styling adjust - colours set to cia theme - min-width 480px smaller mobile menu version example

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

@@ -46,7 +46,9 @@ export default {
             const extras = [
                 'center',
                 'education',
+                'resources',
                 'support',
+                'about',
                 '🔍'
             ]
             const ignored = [
@@ -72,61 +74,57 @@ nav.main
     position: sticky
     top: 0
     /* background-color: lightblue */
-    background-color: white
+    background-color: $cia_grey
     word-wrap: break-word
     z-index: 10000
-    
     .menu, .mobile-menu
         /* padding: $ms-0 0 */
-        background: $cia_grey
-        /* border-bottom: 2px $cia_darker solid */
-
         a
-            text-decoration: none
+            /* text-decoration: none leave on for testing*/
             color: $cia_black
-
             h1
+                font-size: $ms-2
                 font-weight: 400
                 color: $cia_red
-                padding: 7px 0 0
-            /* img
+
+            img
                 width: $ms-3
                 height: $ms-3
-                padding: 0 */
+                padding: 0
+            &:hover
+                color: $cia_darker
     
     .menu   
         display: none
         h1
-            font-size: $ms-3
-        h5
-            /* font-size: $ms--1  */
-            font-weight: 200
+            /* font-size: $ms-3  */
+            margin: $ms--5 0  $ms--7
+            /* padding-top: $ms--7 */
+        h5  
+            font-size: $ms--1
+            font-weight: 400
+            margin: 0 $ms--6 $ms--6
+
         > ul
             padding: 0 $ms-1
-        img
-            width: $ms-3
-            height: $ms-3
-            /* padding: 0 */
-            margin-top: $ms--7
     
     .mobile-menu
-        padding: $ms--3
-        img
-            width: $ms-2
-            height: $ms-2
-            padding: 0
-            margin: $ms--7 0 0 $ms--7
+        /* cia logotype adjust for smaller screens */
+        img 
+            margin: $ms--7 $ms--6 0 $ms-0
         h1
-            font-size: $ms-2
+            /* font-size: $ms-2 */
+            margin: $ms--3 0 $ms--5
+        /* hamburger menu drawer */
         label
             position: absolute
             right: 0
             top: 0
             padding: $ms-0
             &:hover
-                color: $cia_red
+                color: $primary-dark
                 cursor: pointer
-                transition: $transition
+        /* make this menu style for $small min-width 480px screen */
         input
             &.hide
                 display: none
@@ -135,20 +133,27 @@ nav.main
                     display: block 
                     clear: both 
                     position: absolute
+                    right: $ms-0
+                    width: fit-content
         ul
-            background-color: $primary-dark
+            /* background-color: $primary-dark */
+            background-color: $cia_grey
             display: none
-            /* padding: $ms--1 0 */
+            padding: $ms--1 $ms-4 0 $ms--3
             margin: $ms-0 0 0 0
+            box-shadow: lightgrey $ms--7 $ms--7 $ms--7
             li  
-                color: $primary-light
+                /* color: $primary-light */
                 &:hover
                     color: $primary-dark
                     background-color: $primary-light
+                    transition: $transition
                 h5
-                    font-size: $ms-1
-                    color: $cia_black
+                    /* font-size: $ms-0 */
+                    /* color: $cia_black */
                     padding: $ms--1
+                    /* padding: 0 */
+                    margin: 0
 
     @media (min-width: $large)
         .menu
@@ -159,5 +164,7 @@ nav.main
 
     @media (min-width:  $extra-large)
         .menu > ul
-            /* max-width: $max-width */
+            max-width: $max-width
+
+
 </style>