better responsive menu for small screen

jmau111 · Aug 10, 2021 · c468c89 · c468c89
1 parent 9b42f07
commit c468c89
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/assets/scss/_mode-dark.scss b/assets/scss/_mode-dark.scss
@@ -1,12 +1,14 @@
 :root[data-theme="dark"] {
   --bg-color: #17191c;
   --bg-color-header: #17191c;
-  --bg-color-subheader: #131416;
+  --bg-color-subheader: #0f1012;
   --bg-color-footer: #131416;
   --bg-quotes: #1e2229;
+  --bg-menu-mobile: #0b0c0c;
   --bg-btn: #f0db3b;
   --color: #c9c9c9;
   --color-header: #cdc7c3;
+  --color-menu-mobile: #fafafa;
   --color-subheader: #cfc4bb;
   --color-footer: #beb4ac;
   --color-btn: #121213;

diff --git a/assets/scss/_mode-light.scss b/assets/scss/_mode-light.scss
@@ -5,9 +5,11 @@
   --bg-color-subheader: #313131;
   --bg-color-footer: #131416;
   --bg-quotes: #faefe4;
+  --bg-menu-mobile: #131313;
   --bg-btn: #bf154a;
   --color: #383838;
   --color-header: #181818;
+  --color-menu-mobile: #fafafa;
   --color-subheader: #eee4da;
   --color-footer: #beb4ac;
   --color-btn: #f5f5fe;

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -259,13 +259,43 @@
     top: 2rem;
     right: 2rem;
   }
+  .site-nav {
+    transform: none;
+    animation: none;
+    position: absolute;
+    right: 0;
+    top: calc(1px + 2rem);
+    padding: calc(var(--gap)/2);
+    width: 70vw;  
+    z-index: 101;
+    border-radius: var(--radius) 0 0 var(--radius);
+    background-color: var(--bg-menu-mobile);
+    transform: translateX(-100%) translateZ(0);
+    transition: transform .2s;
+    will-change: transform;
+  }
   #check-menu:checked ~ .site-nav {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: block;
+    text-align: end;
+    transform: translateX(0);
+  }
+  .site-nav {
+    .site-menu {
+      width: 100%;
+      flex-direction: column;
+
+      a {
+        color: var(--color-menu-mobile);
+      }
+    }
+    .site-menu > li,
+    .site-menu > li + li {
+      margin: 0.75rem 0;
+      width: 100%;
+    }
   }
-  .nav-menu {
-    flex: 1;
+  .theme__btn {
+    margin: 0;
   }
   .subheader {
     min-height: 30vh;

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,11 +1,11 @@
 <header class="site-header">
     <div class="inner">
         {{- if .IsHome }}
-        <h1 class="site-title">
+        <h1 class="site-title slide-horizontal-invert">
             {{ partial "site-title.html" . }}
         </h1>
         {{- else }}
-        <p class="site-title">
+        <p class="site-title slide-horizontal-invert">
             {{ partial "site-title.html" . }}
         </p>
         {{- end }}