1 files changed, 92 insertions, 0 deletions
diff --git a/themes/hugo-whisper-theme/assets/scss/components/_main-menu-mobile.scss b/themes/hugo-whisper-theme/assets/scss/components/_main-menu-mobile.scss
new file mode 100644
index 0000000..0826118
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/components/_main-menu-mobile.scss
@@ -0,0 +1,92 @@
+.main-menu-mobile {
+  position: fixed;
+  background: $primary;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  &.open {
+    opacity: 0.9;
+    visibility: visible;
+    height: 100%;
+    z-index: 20;
+    li {
+      animation: fadeInRight 0.5s ease forwards;
+      animation-delay: 0.35s;
+      &:nth-of-type(2) {
+        animation-delay: 0.4s;
+      }
+      &:nth-of-type(3) {
+        animation-delay: 0.45s;
+      }
+      &:nth-of-type(4) {
+        animation-delay: 0.5s;
+      }
+      &:nth-of-type(5) {
+        animation-delay: 0.55s;
+      }
+      &:nth-of-type(6) {
+        animation-delay: 0.6s;
+      }
+    }
+  }
+  ul {
+    font-size: 2rem;
+    font-family: $font-family-base;
+    text-align: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex: 0;
+    li {
+      display: block;
+      position: relative;
+      opacity: 0;
+      a {
+        display: block;
+        position: relative;
+        color: #ffffff;
+        text-decoration: none;
+        overflow: hidden;
+        font-weight: lighter;
+        &:hover::after,
+        &:focus::after,
+        &:active::after {
+          width: 100%;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 0%;
+          transform: translateX(-50%);
+          height: 3px;
+          background: #ffffff;
+          transition: 0.35s;
+        }
+      }
+    }
+  }
+}
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    left: 20%;
+  }
+  100% {
+    opacity: 1;
+    left: 0;
+  }
+}
+.lock-scroll {
+  overflow: hidden;
+}