:sparkles: rudimentary click mobile menu added

vue-theme/src/app.vue

@@ -22,91 +22,96 @@ export default {
 <style lang="postcss">
 @import './sss/variables.sss'
 
-html > body
-    font-family: $sans
-    font-size: $base
-    main 
-        background-color: green
-        width: 100%
-        
-        :--headings
-            color: yellow
-
-        > [class^="page--"]
-            background-color: lightblue
-            max-width: $max-width
-            width: 90%
-            padding: $ms 0
-            align-items: flex-start
-            
-            /* Block Shadow Thing */
-            .shadow
-                box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
-                border-radius: 8px
-    
-            /* Content Pieces */
-            .post
-                background-color: teal
-                margin: 0 0 $ms
-                &--title
-                    color: yellow
-                    padding: 0 0 $ms
-                &--content
-                    color: orange
-                    &--block > p
-                        color: white
-                    .wp-block-image
-                        margin: 0
-                        img
-                            width: 100%
-                > ul
-                    list-style: none
+html 
+    /* Hide the wpadminbar */
+    margin-top: 0 !important
+    #wpadminbar
+        display: none !important
+    > body
+        font-family: $sans
+        font-size: $base
+        main 
+            background-color: green
+            width: 100%
             
-            /* Single & List Pages */
-            > article
-                background-color: lightpink
-                > * > * 
-                    padding: $ms
-                > section, > header
+            :--headings
+                color: yellow
+
+            > [class^="page--"]
+                background-color: lightblue
+                max-width: $max-width
+                width: 90%
+                padding: $ms 0
+                align-items: flex-start
+                
+                /* Block Shadow Thing */
+                .shadow
+                    box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
+                    border-radius: 8px
+        
+                /* Content Pieces */
+                .post
+                    background-color: teal
                     margin: 0 0 $ms
-                .block-wrapper
-                    .wp-block-gallery
-                        .blocks-gallery
-                            /* &-grid
-                                list-style: none
-                            &-item
-                                float: left
-                        &.columns-1
-                            .blocks-gallery-item
+                    &--title
+                        color: yellow
+                        padding: 0 0 $ms
+                    &--content
+                        color: orange
+                        &--block > p
+                            color: white
+                        .wp-block-image
+                            margin: 0
+                            img
                                 width: 100%
-                        &.columns-2
-                            .blocks-gallery-item
-                                width: 50%
-                        &.columns-3
-                            .blocks-gallery-item
-                                width: 33.33%
-                        &.columns-4
-                            .blocks-gallery-item
-                                width: 25% */
-            
-            /* Sidebar */
-            > aside
-                background-color: salmon
-                margin: 0 0 0 $ms
-                min-width: 27%
-                width: 27%
-                > section
-                    > *
+                    > ul
+                        list-style: none
+                
+                /* Single & List Pages */
+                > article
+                    background-color: lightpink
+                    > * > * 
                         padding: $ms
-                        margin: 0 0 $ms 0
-                    > .post
-                        background-color: blue
+                    > section, > header
+                        margin: 0 0 $ms
+                    .block-wrapper
+                        .wp-block-gallery
+                            .blocks-gallery
+                                /* &-grid
+                                    list-style: none
+                                &-item
+                                    float: left
+                            &.columns-1
+                                .blocks-gallery-item
+                                    width: 100%
+                            &.columns-2
+                                .blocks-gallery-item
+                                    width: 50%
+                            &.columns-3
+                                .blocks-gallery-item
+                                    width: 33.33%
+                            &.columns-4
+                                .blocks-gallery-item
+                                    width: 25% */
+                
+                /* Sidebar */
+                > aside
+                    background-color: salmon
+                    margin: 0 0 0 $ms
+                    min-width: 27%
+                    width: 27%
+                    > section
+                        > *
+                            padding: $ms
+                            margin: 0 0 $ms 0
+                        > .post
+                            background-color: blue
 
-    nav, footer
-        &.main
-            background-color: pink
-            padding: 0 $ms
-            width: 100%
-            ul > li
+        nav, footer
+            &.main
+                background-color: pink
                 padding: 0 $ms
+                width: 100%
+                ul > li
+                    padding: 0 $ms
 </style>

vue-theme/src/components/navigation/navigation.vue

@@ -1,13 +1,14 @@
 // Replace with calls to menu system
 <template lang="pug">
 nav.main
+    router-link(to="/")
+        h1.t-serif.t-up x
+            span &nbsp;logotype
+    
+    label(for="toggle-mobile-menu" aria-label="Menu") &#9776;
+    input(id="toggle-mobile-menu" type="checkbox").hide
+
     ul
-        li
-            router-link(to="/")
-                h1.t-serif x
-                    span &nbsp;logotype
-        li
-            h5 &nbsp;
         li
             router-link(:to="`/`")
                 h5 home
@@ -45,9 +46,24 @@ nav.main
 
 nav.main
     background-color: lightblue
+    a > h1
+        margin: 0
+    label
+        position: absolute
+        right: 3vw
+        top: 10px
+    input
+        &.hide
+            display: none
+            cursor: pointer
+            &:checked + ul
+                display: block 
+                clear: both 
+                position: fixed
     ul
         width: 100%
         background-color: grey
+        display: none
         li
             h5
                 color: $cia_black