Remake Home page

DV8-Expo/website/static/sass/nav.sass

@@ -1,5 +1,7 @@
 nav
-    padding: 0 0.5rem
+    padding-left: 1rem
+    padding-right: 0.5rem
+    width: 100%
     height: 3rem
 
     display: flex
@@ -15,7 +17,7 @@ nav
     font-size: 1.1rem
     white-space: nowrap
 
-    color: RGB($secondary)
+    color: RGB($primary)
 
     overflow: hidden
     z-index: 100
@@ -25,7 +27,7 @@ nav
         content: ""
         position: absolute
         inset: 0
-        background: var(--nav)
+        background: RGB(var(--nav))
         transform: translateY(-3rem)
         transition: transform 0.2s ease-in-out
         z-index: -1
@@ -53,41 +55,51 @@ nav
             &:hover
                 color: RGB($accent)
 
-    .title
+    > .title
         height: 3rem
         display: flex
         flex-direction: row
         align-items: center
         justify-content: center
-        opacity: 0
-        transition: opacity 0.1s ease-in-out
+        //opacity: 0
+        //transition: opacity 0.1s ease-in-out
 
         > p
             margin: auto
             font-size: inherit
-            color: RGB($secondary)
+            color: inherit
+            transition: color 0.1s ease-in-out
 
             > span
                 font-family: $monospace-font
                 color: RGB($accent)
 
     &.scrolled
-        .title
-            opacity: 1
+        //.title
+        //    opacity: 1
+        //    transition: opacity 0.1s ease-in-out 0.1s
+
+        color: RGB($secondary)
 
         &::before
             transform: translateY(0)
 
 @media (max-width: 600px)
     nav
+        padding-right: 1rem
+
         height: 6rem
         top: -3rem
         display: flex
+        flex-direction: column
         justify-content: center
         transition: top 0.2s ease-in-out
 
-        .title > p
-            font-size: 1.3rem
+        > .title
+            opacity: 1
+
+            > p
+                font-size: 1.3rem
 
         &.scrolled
             top: 0