Hamburger menu

themes/devroom-2024/assets/scss/_site.scss

@@ -19,8 +19,9 @@ html, body {
     line-height: $line-height;
     -moz-osx-font-smoothing: grayscale;
 
-    transition: color 0.2s ease-in-out,
+    @media screen and (max-width: $mobile-width) {
-    background-color 0.2s ease-in-out;
+        font-size: 14px;
+     }    
 }
 
 html {
@@ -66,51 +67,6 @@ a, a:hover {
     text-decoration: none;
 }
 
-nav {
-    margin-bottom: 2rem;
-    text-align: right;
-    vertical-align: bottom;
-
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    a.brand {
-        text-align: left;
-        flex: 1;
-        display: block;
-        color: $text;
-        font-weight: 800;
-        font-size: 1.6rem;
-    }
-    
-    .menu {
-        flex: 2;
-
-        display: flex;
-        flex-direction: row;
-
-        gap: 0.8rem;
-        justify-content: flex-end;
-
-        a {
-            color: $text;
-            font-weight: 700;
-
-        }
-
-        @media screen and (max-width: $mobile-width) {
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 0.4rem;
-            
-        }
-
-    }
-}
-
-
 h1, h2, h3, h4, h5 {
     font-family: "Mulish", sans-serif;
     font-size: $header_size;
@@ -146,7 +102,7 @@ blockquote {
 
 img {
     width: 98%;
-    border-radius: 1.6rem;
+    border-radius: 0.4rem;
     margin: 0 auto;
     display: block;
 }
@@ -213,6 +169,65 @@ span.begin-task-list + ul {
 
 header {
     margin-bottom: 1.5rem;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+
+    @media screen and (max-width: $mobile-width) {
+       margin-bottom: 0;
+    }
+
+    .brand {
+        flex: 1;
+    }
+
+    button.hamburger {
+        flex: 1;
+        justify-content: flex-end;
+        text-align: right;
+
+        display: none;
+
+        @media screen and (max-width: $mobile-width) {
+            display: block;
+        }
+    }
+
+    nav.menu {
+        display: block;
+        flex: 2;
+
+        justify-content: flex-end;
+
+        display: flex;
+        flex-direction: row;
+        gap: 0.8rem;
+
+        a {
+            font-weight: 700;
+        }
+
+        @media screen and (max-width: $mobile-width) {
+            display: none;
+                        
+            flex-direction: column;
+            align-items: flex-end;
+            
+            a {
+                display: block;
+                text-align: center;
+                font-size: 18px;
+                margin-bottom: 0.4rem;
+            }
+
+            &.is-active {
+                display: block;
+            }
+        }
+    }
 }
 
 footer {
@@ -221,6 +236,10 @@ footer {
     display: flex;
     align-items: center;
 
+    @media screen and (max-width: $mobile-width) {
+        margin: 1.2rem 0;
+    }
+
     .copyright {
         flex: 1;
         text-align: left;
@@ -391,6 +410,10 @@ article.full {
 
     .article-head {
         margin: 5rem 0;
+
+        @media screen and (max-width: $mobile-width) {
+            margin: 0.4rem;
+        }
     }
 }
 
@@ -416,6 +439,10 @@ a.tag {
     display: flex;
     flex-direction: row;
 
+    @media screen and (max-width: $mobile-width) {
+        margin: 1.2rem 0;
+    }
+
     & > * {
         flex: 1;
     }
@@ -490,4 +517,11 @@ form {
         transition: color 0.2s ease-in-out,
         background-color 0.2s ease-in-out;
     }
+}
+
+.mobile-flex-break {
+    @media screen and (max-width: $mobile-width) {
+        flex-basis: 100%;
+        height: 0;
+    }
 }

themes/devroom-2024/assets/scss/devroom.scss

@@ -1,2 +1,3 @@
+@import "_hamburgers";
 @import "_colors_light";
 @import "_site";