mobile menu

styles/content.styl

@@ -11,7 +11,7 @@ $mb=3em
 
     &>*
         color: white
-        max-width: 45em
+        max-width: 40em
         margin: 0 auto
         padding: 1em 1.5em
         width: 100%

styles/menu.styl

@@ -1,3 +1,5 @@
+@require './utils.styl'
+
 $foregound=#ffffff
 
 menu-item-hover()
@@ -16,13 +18,21 @@ nav.main
     background: rgb(0,0,0)
     background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%)
 
-    .left
+    #icon
+        height: 2.5em
+        width: 2.5em
+        object-fit: contain
+        z-index 10
+        cursor pointer
+        display: none
+
+    .home
         color: $foregound
         font-weight: bold
         font-size: 2em
         cursor pointer
 
-    .right
+    .links
         &>div
             color: $foregound
             padding: .5em 0.75em
@@ -37,3 +47,32 @@ nav.main
         &:not(:hover)
             &>.active
                 menu-item-hover()
+        
+        >.home
+            display: none
+
+@media (max-width: $mobile-width)
+    nav.main
+        #icon
+            display: initial
+            
+        .links
+            position: fixed
+            display: none
+            top: 0
+            left: 0
+            background: rgba(0, 0, 0, 1)
+            height: 100vh
+            width: 100vw
+            flex-direction: column
+            align-items: center
+            justify-content: center
+
+            &.open
+                display: flex
+
+            & .home
+                display: initial
+
+            &>div
+                margin: .5em 0

styles/utils.styl

@@ -1,3 +1,5 @@
+$mobile-width = 40rem
+
 underline()
     transition: all linear 100ms