1 files changed, 73 insertions, 43 deletions

diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index 3bcc7f9..6e10a83 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -24,6 +24,13 @@ header {
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
+
+  &--menu {
+    display: none;
+    @media (min-width: $screen-lg) {
+      display: flex;
+    }
+  }
   &__item {
     margin: 0.5rem;
   }
@@ -34,6 +41,22 @@ header {
     border-bottom: 2px solid black;
     color: black;
   }
+  &__nav-btn {
+    display: none;
+    padding: 3px 5px;
+    background: var(--color-text);
+    color: var(--color-text-light);
+    border: 1px solid var(--color-border-dark);
+    max-height: 30px;
+    cursor: pointer;
+    @media (min-width: $screen-lg) {
+      display: inline-block;
+    }
+  }
+  &__nav-btn:hover {
+    background: var(--color-text-light);
+    color: var(--color-text);
+  }
 }
 
 .header-nav.desktop {
@@ -43,16 +66,11 @@ header {
   }
 }
 .header-nav {
-  &__close-btn {
-    fill: currentColor;
-    &:hover .header-nav__svg-icon {
-      color: gray;
-      fill: gray;
-    }
-  }
+  display: flex;
 }
 .mb-header-nav {
   transition: opacity 0.3s ease;
+  overflow: auto;
   display: none;
   position: fixed;
   background: var(--color-bg);
@@ -63,6 +81,28 @@ header {
   right: 0;
   width: 100%;
   height: 100vh;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &__container {
+    flex: 1;
+    text-align: center;
+  }
+
+  &__close-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    fill: currentColor;
+    &:hover .mb-header-nav__svg-icon {
+      color: gray;
+      fill: gray;
+    }
+  }
   &__title {
     font-size: 2.5rem;
     font-weight: 700;
@@ -87,44 +127,34 @@ header {
     opacity: 0;
     transition: opacity 0.3s ease;
     font-size: 2.5rem;
-    width: 60%;
     margin: 1rem auto;
     text-align: center;
-
-    @media (min-width: $screen-md) {
-      width: 50%;
-    }
-
-    & > a {
-      display: block;
-      position: relative;
-      overflow: hidden;
-      -webkit-text-stroke: 1px var(--color-text);
-      -webkit-text-fill-color: transparent;
-      &:hover {
-        -webkit-text-stroke: 1px #333333;
-      }
-      &:before {
-        z-index: -1;
-        position: absolute;
-        display: block;
-        width: 0;
-        content: "";
-        height: 100%;
-        background: var(--color-hover-extra);
-        transition: width 0.3s ease;
-      }
-      &:hover:before {
-        width: 100%;
-      }
+  }
+  &__link {
+    text-transform: uppercase;
+    font-weight: bold;
+    position: relative;
+    display: inline-block;
+    -webkit-text-stroke: 1px var(--color-text);
+    color: transparent;
+    background: linear-gradient(90deg, var(--color-extra-2) 0%, var(--color-extra-2) 100%);
+    background-position: left;
+    background-size: 0%;
+    background-repeat: no-repeat;
+    transition: background-size 0.5s ease;
+    background-clip: text;
+    -webkit-background-clip: text;
+    &:hover {
+      background-size: 100%;
     }
   }
 }
 
 .mb-header__menu-btn {
+  flex: 0 0 1.5rem;
   display: block;
-  height: 24px;
-  width: 24px;
+  height: 1.5rem;
+  width: 1.5rem;
   padding: 0;
   position: relative;
 
@@ -132,7 +162,7 @@ header {
     transition: transform 0.2s ease;
     display: inline-block;
     position: absolute;
-    left:0;
+    left: 0;
     top: 3px;
     width: 100%;
     height: 2px;
@@ -143,7 +173,7 @@ header {
     display: inline-block;
     background: black;
     position: absolute;
-    left:0;
+    left: 0;
     top: 12px;
     width: 100%;
     height: 2px;
@@ -153,19 +183,19 @@ header {
     display: inline-block;
     background: black;
     position: absolute;
-    left:0;
+    left: 0;
     top: 21px;
     width: 100%;
     height: 2px;
   }
 
-  &:hover &-line:nth-child(1){
+  &:hover &-line:nth-child(1) {
     transform: translate(-2px, -6px) rotate(2deg);
   }
-  &:hover &-line:nth-child(2){
+  &:hover &-line:nth-child(2) {
     transform: translate(-2px, -2px) rotate(-2deg);
   }
-  &:hover &-line:nth-child(3){
+  &:hover &-line:nth-child(3) {
     transform: translate(-2px, 6px) rotate(2deg);
   }