feat: add more responsivness to menu

fbuireu · Apr 21, 2024 · a5539aa · a5539aa
1 parent 47aece9
commit a5539aa
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/src/ui/components/atoms/logo/logo.css b/src/ui/components/atoms/logo/logo.css
@@ -11,20 +11,24 @@
         transition: top 0.3s linear 1.75s,
         scale 0.2s linear 0.3s,
         transform 0.2s ease-out;
-        width: 307px;
+        width: fit-content;
         z-index: 20;
 
         svg {
             transition: top 0.3s ease-out 1.75s,
             scale 0.2s linear;
+
+            @media (max-width: 525px) {
+                width: 75%;
+            }
         }
 
         :not(.--is-menu-open) svg {
             scale: 0.85;
         }
 
-        @media (max-width: 720px) {
-            width: fit-content;
+        @media (max-width: 525px) {
+            inset: auto 0;
         }
     }
 }
diff --git a/src/ui/components/organisms/header/components/menu/menu.css b/src/ui/components/organisms/header/components/menu/menu.css
@@ -34,9 +34,10 @@
         grid: 'Header-Quote Divider Navigation' / 50% 1fr 50%;
 
         @media (max-width: 1024px) {
-            grid: 'Navigation' 1fr
-            'Divider' min-content
-            'Header-Quote' 1fr / 1fr;
+            grid: '.' calc(var(--header-height) + 2rem)
+                    'Navigation' max-content
+                    'Divider' min-content
+                    'Header-Quote' 20vh / 1fr;
         }
     }
 
@@ -64,6 +65,13 @@
             position: absolute;
             width: 120%;
         }
+
+        @media (max-width: 1024px) {
+            &::after {
+                height: 100%;
+                width: 100%;
+            }
+        }
     }
 
     .navigation__menu__item {
@@ -91,10 +99,14 @@
         &::after {
             top: 330px;
             width: 100%;
+            @media (max-width: 1024px) {
+                bottom: 0;
+            }
         }
 
         @media (max-width: 1024px) {
             padding-inline: 2rem;
+            text-align: center;
         }
     }
 
@@ -119,11 +131,14 @@
             width: calc(100% - 4rem);
             z-index: 20;
         }
+        @media (max-width: 525px) {
+            translate: 0;
+        }
     }
 
     .navigation__menu__link {
         display: inline-block;
-        font-size: clamp(2rem, 4rem, 4rem);
+        font-size: clamp(1rem, 3rem + 1rem, 4rem);
         position: relative;
         text-transform: uppercase;
 
@@ -153,5 +168,9 @@
                 transform: scaleX(1);
             }
         }
+
+        @media (max-width: 1024px) {
+            font-size: clamp(2rem, 3rem, 3rem);
+        }
     }
 }
diff --git a/src/ui/components/organisms/myWork/my-work.css b/src/ui/components/organisms/myWork/my-work.css
@@ -8,8 +8,6 @@
     }
 
     .my-work__item {
-        container-name: sidebar;
-        container-type: inline-size;
         max-width: calc(100% / 4 - 1rem);
         width: 100%;
 
@@ -49,6 +47,13 @@
         }
         @media (max-width: 720px) {
             max-width: 100%;
+
+            &:nth-child(1),
+            &:nth-child(2),
+            &:nth-child(3),
+            &:nth-child(4) {
+                margin-top: 0;
+            }
         }
     }
 

diff --git a/src/ui/styles/base/base.css b/src/ui/styles/base/base.css
@@ -11,7 +11,7 @@
             transition-duration: 0.01ms !important;
         }
     }
-    
+
     html,
     body {
         color: var(--neutral-main);
@@ -115,7 +115,7 @@
 
     h1,
     h2 {
-        font-size: clamp(4rem, 5rem, 5rem);
+        font-size: clamp(2rem, 5rem, 5rem);
     }
 
     h3,
@@ -124,7 +124,7 @@
     }
 
     h3 {
-        font-size: clamp(3rem, 3.5rem, 3.5rem);
+        font-size: clamp(1.5rem, 3.5vw, 3rem);
     }
 
     h4 {