M src/main.rs → src/main.rs

@@ -28,7 +28,7 @@ @if i == 0 {
                     ( nav_element("navElement first", i, element) )
                 } @else if i == elements.len()-1 {
                     ( nav_element("navElement last", i, element) )
-                } @else if i == 2 {
+                } @else if i == 1 {
                     ( nav_element("navElement current", i, element) )
                 } @else {
                     ( nav_element("navElement", i, element) )
@@ -53,7 +53,7 @@ (nav_bar(vec![
                 NavElement{ name: "breadsite".to_string(), href: "/".to_string()},
                 NavElement{ name: "test1".to_string(), href: "test1".to_string()},
                 NavElement{ name: "test2".to_string(), href: "test2".to_string()},
-                NavElement{ name: "test3".to_string(), href: "test3".to_string()},
+                NavElement{ name: ":333".to_string(), href: ":3".to_string()},
                 NavElement{ name: time.to_string(), href: time.to_string()},
             ]))
         }

M static/style.css → static/style.css

@@ -152,7 +152,7 @@ --ctp-frappe-surface1-rgb: 81 87 109;
   --ctp-frappe-surface1-hsl: 227.143 14.737% 37.255%;
   --ctp-frappe-surface0: #414559;
   --ctp-frappe-surface0-rgb: 65 69 89;
-  --ctp-frappe-surface0-hsl: 230.000 15.584% 30.196%;
+  --ctp-frappe-surface0-hsl: 230.000 15.584% 30.26%;
   --ctp-frappe-base: #303446;
   --ctp-frappe-base-rgb: 48 52 70;
   --ctp-frappe-base-hsl: 229.091 18.644% 23.137%;
@@ -329,6 +329,7 @@
 :root {
     --text: var(--ctp-mocha-text);
     --background: var(--ctp-mocha-base);
+    --mantle: var(--ctp-mocha-mantle);
     --crust: var(--ctp-mocha-crust);
     --link: var(--ctp-mocha-blue);
 
@@ -370,19 +371,16 @@ padding-top: 0.8rem;
         padding-right: 1rem;
 
         height: 2rem;
+        margin-bottom: 0.2rem;
 
         color: var(--text);
         text-decoration: none;
         text-wrap-mode: nowrap;
 
         border-bottom-right-radius: 1rem;
-        border-top: none;
-        border-left: none;
 
-        box-shadow: inset -0.1rem -0.1rem 0px 0px var(--crust),
-            -2rem -0.1rem 0 0 var(--crust),
-            -2rem 0px 0 0 var(--crust);
-        background: var(--crust);
+        box-shadow: -2rem 0 var(--mantle);
+        background: var(--mantle);
 
     }
 
@@ -392,71 +390,174 @@ }
 
     #navElement-0 {
         z-index:4;
-        &.current{
+        &:hover{
+            height: 2.2rem !important;
+            margin-bottom: 0 !important;
+
+            position: relative;
+
+            &::before{
+                content: "";
+                position: absolute;
+                width: 100vw;
+                border: 0.1rem solid var(--nav-0);
+                bottom: 0;
+                right: 2rem;
+            }
+
+            box-shadow: inset -0.2rem -0.2rem var(--nav-0),
+                -2rem 0 var(--crust);
+            background-color: var(--crust);
+
+            &.current {
+                box-shadow: inset -0.2rem -0.2rem var(--nav-0),
+                    -2rem 0 var(--nav-0);
+            }
+        }
+        &.current {
             background-color: var(--nav-0);
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-0),
-                -2rem 0px 0 0 var(--nav-0);
-        }
-        &:hover:not(.current){
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-0),
-                -2rem -0.1rem 0 0 var(--crust),
-                -2rem 0px 0 0 var(--nav-0);
+            box-shadow: -2rem 0 var(--nav-0);
         }
     }
+
     #navElement-1 {
         z-index:3;
+        &:hover{
+            height: 2.2rem !important;
+            margin-bottom: 0 !important;
+
+            position: relative;
+
+            &::before{
+                content: "";
+                position: absolute;
+                width: 100vw;
+                border: 0.1rem solid var(--nav-1);
+                bottom: 0;
+                right: 2rem;
+            }
+
+            box-shadow: inset -0.2rem -0.2rem var(--nav-1),
+                -2rem 0 var(--crust);
+            background-color: var(--crust);
+
+            &.current {
+                box-shadow: inset -0.2rem -0.2rem var(--nav-1),
+                    -2rem 0 var(--nav-1);
+            }
+        }
         &.current {
             background-color: var(--nav-1);
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-1),
-                -2rem 0px 0 0 var(--nav-1);
-        }
-        &:hover:not(.current){
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-1),
-                -2rem -0.1rem 0 0 var(--crust),
-                -2rem 0px 0 0 var(--nav-1);
+            box-shadow: -2rem 0 var(--nav-1);
         }
     }
+
     #navElement-2 {
         z-index:2;
+        &:hover{
+            height: 2.2rem !important;
+            margin-bottom: 0 !important;
+
+            position: relative;
+
+            &::before{
+                content: "";
+                position: absolute;
+                width: 100vw;
+                border: 0.1rem solid var(--nav-2);
+                bottom: 0;
+                right: 2rem;
+            }
+
+            box-shadow: inset -0.2rem -0.2rem var(--nav-2),
+                -2rem 0 var(--crust);
+            background-color: var(--crust);
+
+            &.current {
+                box-shadow: inset -0.2rem -0.2rem var(--nav-2),
+                    -2rem 0 var(--nav-2);
+            }
+        }
         &.current {
             background-color: var(--nav-2);
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-2),
-                -2rem 0px 0 0 var(--nav-2);
-        }
-        &:hover:not(.current){
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-2),
-                -2rem -0.1rem 0 0 var(--crust),
-                -2rem 0px 0 0 var(--nav-2);
+            box-shadow: -2rem 0 var(--nav-2);
         }
     }
+
     #navElement-3 {
         z-index:1;
+        &:hover{
+            height: 2.2rem !important;
+            margin-bottom: 0 !important;
+
+            position: relative;
+
+            &::before{
+                content: "";
+                position: absolute;
+                width: 100vw;
+                border: 0.1rem solid var(--nav-3);
+                bottom: 0;
+                right: 2rem;
+            }
+
+            box-shadow: inset -0.2rem -0.2rem var(--nav-3),
+                -2rem 0 var(--crust);
+            background-color: var(--crust);
+
+            &.current {
+                box-shadow: inset -0.2rem -0.2rem var(--nav-3),
+                    -2rem 0 var(--nav-3);
+            }
+        }
         &.current {
             background-color: var(--nav-3);
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-3),
-                -2rem 0px 0 0 var(--nav-3);
-        }
-        &:hover:not(.current){
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-3),
-                -2rem -0.1rem 0 0 var(--crust),
-                -2rem 0px 0 0 var(--nav-3);
+            box-shadow: -2rem 0 var(--nav-3);
         }
     }
+
     #navElement-4 {
         z-index:0;
+        &:hover{
+            height: 2.2rem !important;
+            margin-bottom: 0 !important;
+
+            position: relative;
+
+            &::before{
+                content: "";
+                position: absolute;
+                width: 100vw;
+                border: 0.1rem solid var(--nav-4);
+                bottom: 0;
+                right: 2rem;
+            }
+
+            box-shadow: inset -0.2rem -0.2rem var(--nav-4),
+                -2rem 0 var(--crust);
+            background-color: var(--crust);
+
+            &.current {
+                box-shadow: inset -0.2rem -0.2rem var(--nav-4),
+                    -2rem 0 var(--nav-4);
+            }
+        }
         &.current {
             background-color: var(--nav-4);
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-4),
-                -2rem 0px 0 0 var(--nav-4);
-        }
-        &:hover:not(.current){
-            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-4),
-                -2rem -0.1rem 0 0 var(--crust),
-                -2rem 0px 0 0 var(--nav-4);
+            box-shadow: -2rem 0 var(--nav-4);
         }
     }
 
     .first {
         margin-left: 1rem;
     }
-}+}
+
+@media (hover: none) {
+    @keyframes spin {
+        to {transform:rotate(360deg);}
+    }
+    * {
+        animation: spin 10s linear infinite;
+    }
+}