🛠 Update header and footer

src/css/base/footer.css

@@ -5,7 +5,7 @@
   background-color: var(--color-card-bg);
   transition-property: background-color;
   transition-duration: var(--transition-duration-fast);
-  padding: var(--space-m) 0;
+  padding: var(--space-l) 0;
 
   & .wrap {
     @media (--M_and_up) {
@@ -13,9 +13,29 @@
       flex-wrap: wrap;
       justify-content: space-between;
     }
+
+    & p:last-child {
+      margin-bottom: 0;
+    }
   }
 
-  & p {
-    margin-bottom: 0;
+  & .social {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & a {
+      display: inline-block;
+
+      & svg {
+        height: 24px;
+        width: 24px;
+        display: block;
+      }
+    }
+
+    & > * + * {
+      margin-left: var(--space-l);
+    }
   }
 }

src/css/base/header.css

@@ -45,6 +45,11 @@
     align-items: center;
   }
 
+  & .brand {
+    display: block;
+    margin-bottom: var(--space-m);
+  }
+
   & .logo {
     display: block;
     width: 100%;
@@ -58,9 +63,11 @@
     align-self: flex-start;
     align-items: center;
     justify-content: space-between;
-    padding-right: 5.75%;
     line-height: 1;
 
+    @media (--up_to_M) {
+      margin-bottom: var(--space-s);
+    }
     @media (--up_to_L) {
       margin-top: var(--space-m);
       font-size: var(--font-size-xl);
@@ -75,38 +82,35 @@
       align-items: center;
 
       & a {
+        margin-right: var(--space-l);
         text-transform: uppercase;
         font-weight: var(--font-weight-bold);
         cursor: pointer;
+        line-height: 0;
 
         &.current {
           color: var(--color-accent);
         }
       }
-
-      & > a + a {
-        margin-left: var(--space-l);
-      }
     }
 
-    & .more {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
+    & button{
+      display: inline-block;
+      position: relative;
+      top: 2px;
 
-      & a,
-      & button{
-        display: inline-block;
-
-        & svg {
-          height: .85em;
-          width: .85em;
-          display: block;
-        }
+      @media (--up_to_S) {
+        visibility: hidden;
       }
 
-      & > * + * {
-        margin-left: var(--space-l);
+      & svg {
+        height: 4.5vw;
+        width: 4.5vw;
+        min-height: 24px;
+        min-width: 24px;
+        max-height: 42px;
+        max-width: 42px;
+        display: block;
       }
     }
   }

src/css/base/layout.css

@@ -14,7 +14,7 @@
     padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.525);
   }
   @media (--M_to_L) {
-    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.675);
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.825);
   }
   @media (--L_and_up) {
     padding-top: var(--space-l);

src/css/base/variables.css

@@ -1,3 +1,4 @@
+@custom-media --up_to_S screen and (max-width: 360px);
 @custom-media --up_to_M screen and (max-width: 599px);
 @custom-media --up_to_L screen and (max-width: 839px);
 @custom-media --M_to_L screen and (min-width: 600px) and (max-width: 839px);