feat(styles): add responsiveness

LaercioSR · Aug 23, 2024 · 45c358d · 45c358d
1 parent 43aac8c
commit 45c358d
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 44 deletions.
diff --git a/src/app/assets/icons/arrow-down.svg b/src/app/assets/icons/arrow-down.svg
diff --git a/src/app/assets/icons/arrow-left.svg b/src/app/assets/icons/arrow-left.svg
diff --git a/src/app/assets/icons/arrow-right-alt.svg b/src/app/assets/icons/arrow-right-alt.svg
diff --git a/src/app/assets/icons/coffee.svg b/src/app/assets/icons/coffee.svg
diff --git a/src/app/assets/icons/dark-mode.svg b/src/app/assets/icons/dark-mode.svg
diff --git a/src/app/assets/icons/github-logo.svg b/src/app/assets/icons/github-logo.svg
diff --git a/src/app/assets/icons/language.svg b/src/app/assets/icons/language.svg
diff --git a/src/app/assets/icons/light-mode.svg b/src/app/assets/icons/light-mode.svg
diff --git a/src/app/assets/icons/link.svg b/src/app/assets/icons/link.svg
diff --git a/src/app/assets/icons/linkedin-logo.svg b/src/app/assets/icons/linkedin-logo.svg
diff --git a/src/app/assets/icons/mail-logo.svg b/src/app/assets/icons/mail-logo.svg
diff --git a/src/app/components/ButtonCustom/styles.module.css b/src/app/components/ButtonCustom/styles.module.css
@@ -1,13 +1,28 @@
 .global-button {
   cursor: pointer;
-  width: 3rem;
-  height: 3rem;
+  width: 2rem;
+  height: 2rem;
   background: transparent;
   border: none;
 
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media (min-width: 768px) {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+.global-button svg {
+  width: 2rem;
+  height: 2rem;
+
+  @media (min-width: 768px) {
+    width: 3rem;
+    height: 3rem;
+  }
 }
 
 .global-button:first-child svg > path {

diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
@@ -8,12 +8,14 @@ const ThemeSwitch = dynamic(() => import("../ThemeSwitch"), {
 export default function Header() {
   return (
     <nav className={styles.header}>
-      <ul className={styles["header-side_left"]}></ul>
-      <ul className={styles["header-side_right"]}>
-        <li className={styles["header-side-item"]}>
-          <ThemeSwitch />
-        </li>
-      </ul>
+      <div className={styles["nav-wrapper"]}>
+        <ul className={styles["header-side_left"]}></ul>
+        <ul className={styles["header-side_right"]}>
+          <li className={styles["header-side-item"]}>
+            <ThemeSwitch />
+          </li>
+        </ul>
+      </div>
     </nav>
   );
 }
diff --git a/src/app/components/Header/styles.module.css b/src/app/components/Header/styles.module.css
@@ -1,17 +1,29 @@
 .header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.nav-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 1.5rem 10rem;
+  max-width: 90rem;
+  padding: 1rem 2rem;
+
+  @media (min-width: 768px) {
+    padding: 1.5rem 10rem;
+  }
 }
 
 .header-side_left {
+  list-style-type: none;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
-  list-style: none;
 }
 
 .header-side_right {