Adjust mobile header

Author: klavierworks

src/components/Layout/Container/Container.module.css

@@ -7,9 +7,12 @@
 }
 
 .hasVerticalPadding {
-  padding-top: 268px;
+  padding-top: 160px;
   padding-bottom: 104px;
 
+  @media (--tablet) {
+    padding-top: 268px;
+  }
   @media (--desktop) {
     padding-top: 304px;
     padding-bottom: 100px;

src/components/Logo/Logo.module.css

@@ -1,11 +1,12 @@
 .logo {
-  @mixin logo;
+  @mixin logo-small;
   margin: 0;
   z-index: 1;
   text-align: left;
   top: 65px;
 
   @media (--tablet) {
+    @mixin logo;
     top: 78px;
     left: 45px;
   }
@@ -19,4 +20,13 @@
     pointer-events: auto;
     text-decoration: none;
   }
+
+  .break {
+    display: none;
+
+    @media (--tablet) {
+      display: block;
+      width: 100%;
+    }
+  }
 }

src/components/Logo/Logo.tsx

@@ -8,7 +8,7 @@ const Logo = () => {
       <Link href="/">
         {'Random '}
 
-        <br aria-hidden />
+        <span className={styles.break} aria-hidden />
 
         {'Studio'}
       </Link>

src/components/Navigation/Navigation.module.css

@@ -1,15 +1,20 @@
 .nav {
   display: flex;
-  flex-direction: column-reverse;
-  row-gap: 32px;
+  flex-direction: column;
+  row-gap: 16px;
   position: fixed;
-  top: 40px;
+  top: 24px;
   left: 20px;
   right: 20px;
   pointer-events: none;
   z-index: 5;
   mix-blend-mode: difference;
 
+  @media(--tablet) {
+    row-gap: 32px;
+    top: 40px;
+  }
+
   @media (--desktop) {
     flex-direction: row;
     align-items: start;

src/styles/mixins/_typography.css

@@ -24,6 +24,10 @@
   line-height: 52px;
   letter-spacing: -0.9px;
 }
+@define-mixin logo-small {
+  @mixin body-3;
+  @mixin logo-text-styles;
+}
 
 @define-mixin body-1 {
   /* Text Style Body-1 */