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

@@ -367,7 +367,6 @@ gap: 1rem;
 
     .navElement{
         padding-top: 0.8rem;
-        /* padding-left: 0.5rem; */
         padding-right: 1rem;
 
         height: 2rem;
@@ -377,11 +376,12 @@ text-decoration: none;
         text-wrap-mode: nowrap;
 
         border-bottom-right-radius: 1rem;
-        border: 0.1rem solid transparent;
         border-top: none;
         border-left: none;
 
-        box-shadow: -1rem -1rem 0 1rem var(--crust);
+        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);
 
     }
@@ -393,56 +393,71 @@
     #navElement-0 {
         z-index:4;
         &.current{
-            box-shadow: -1rem -1rem 0 1rem var(--nav-0);
             background-color: var(--nav-0);
+            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-0),
+                -2rem -0.1rem 0 0 var(--nav-0),
+                -2rem 0px 0 0 var(--nav-0);
         }
         &:hover:not(.current){
-            background: linear-gradient(var(--crust), var(--crust)) padding-box,
-              linear-gradient(to right, var(--crust), var(--nav-0)) border-box;
+            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);
         }
     }
     #navElement-1 {
         z-index:3;
         &.current {
-            box-shadow: -1rem -1rem 0 1rem var(--nav-1);
             background-color: var(--nav-1);
+            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-1),
+                -2rem -0.1rem 0 0 var(--nav-1),
+                -2rem 0px 0 0 var(--nav-1);
         }
         &:hover:not(.current){
-            background: linear-gradient(var(--crust), var(--crust)) padding-box,
-              linear-gradient(to right, var(--crust), var(--nav-1)) border-box;
+            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);
         }
     }
     #navElement-2 {
         z-index:2;
         &.current {
-            box-shadow: -1rem -1rem 0 1rem var(--nav-2);
             background-color: var(--nav-2);
+            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-2),
+                -2rem -0.1rem 0 0 var(--nav-2),
+                -2rem 0px 0 0 var(--nav-2);
         }
         &:hover:not(.current){
-            background: linear-gradient(var(--crust), var(--crust)) padding-box,
-              linear-gradient(to right, var(--crust), var(--nav-2)) border-box;
+            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);
         }
     }
     #navElement-3 {
         z-index:1;
         &.current {
-            box-shadow: -1rem -1rem 0 1rem var(--nav-3);
             background-color: var(--nav-3);
+            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-3),
+                -2rem -0.1rem 0 0 var(--nav-3),
+                -2rem 0px 0 0 var(--nav-3);
         }
         &:hover:not(.current){
-            background: linear-gradient(var(--crust), var(--crust)) padding-box,
-              linear-gradient(to right, var(--crust), var(--nav-3)) border-box;
+            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);
         }
     }
     #navElement-4 {
         z-index:0;
         &.current {
-            box-shadow: -1rem -1rem 0 1rem var(--nav-4);
             background-color: var(--nav-4);
+            box-shadow: inset -0.1rem -0.1rem 0px 0px var(--nav-4),
+                -2rem -0.1rem 0 0 var(--nav-4),
+                -2rem 0px 0 0 var(--nav-4);
         }
         &:hover:not(.current){
-            background: linear-gradient(var(--crust), var(--crust)) padding-box,
-              linear-gradient(to right, var(--crust), var(--nav-4)) border-box;
+            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);
         }
     }