#34

frontend/src/index.css

@@ -34,15 +34,12 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --theme-link: 221.2 83.2% 53.3%;
-    --top-nav-background: 48 96% 89%;
-    --top-nav-foreground: 20 14.3% 4.1%;
-    --top-nav-border: 45 93% 77%;
-    --top-nav-link: 334 84% 57%;
-    --top-nav-link-hover: 334 78% 69%;
-    --top-nav-active-background: 48 96% 89%;
-    --top-nav-active-foreground: 20 14.3% 4.1%;
-    --top-nav-submenu-background: 48 100% 96%;
-    --top-nav-submenu-foreground: 20 14.3% 4.1%;
+    --top-nav-root-bg-mobile: #fef08a;
+    --top-nav-root-bg-desktop: #fefce8;
+    --top-nav-highlight-bg: #fef08a;
+    --top-nav-submenu-bg: #fef08a;
+    --top-nav-mobile-active-bg: #fefce8;
+    --top-nav-link: #db2777;
 
     --tag-colour-deerjikist: #9f1239;
     --tag-colour-deerjikist-hover: #b62a51;
@@ -87,15 +84,12 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
-    --top-nav-background: 0 49% 20%;
-    --top-nav-foreground: 345 100% 93%;
-    --top-nav-border: 0 38% 28%;
-    --top-nav-link: 335 82% 80%;
-    --top-nav-link-hover: 341 100% 92%;
-    --top-nav-active-background: 0 38% 28%;
-    --top-nav-active-foreground: 345 100% 93%;
-    --top-nav-submenu-background: 0 49% 20%;
-    --top-nav-submenu-foreground: 345 100% 93%;
+    --top-nav-root-bg-mobile: #230505;
+    --top-nav-root-bg-desktop: #230505;
+    --top-nav-highlight-bg: #450a0a;
+    --top-nav-submenu-bg: #450a0a;
+    --top-nav-mobile-active-bg: #450a0a;
+    --top-nav-link: #f9a8d4;
   }
 
   body
@@ -215,41 +209,48 @@ body
   color: var(--tag-link-hover-colour) !important;
 }
 
-.top-nav-themed
+.top-nav-root
 {
-  background: hsl(var(--top-nav-background));
-  color: hsl(var(--top-nav-foreground));
-  border-color: hsl(var(--top-nav-border));
+  background: var(--top-nav-root-bg-mobile);
+  border-color: transparent;
 }
 
-.top-nav-themed a,
-.top-nav-themed button
+@media (min-width: 768px)
 {
-  color: hsl(var(--top-nav-link));
+  .top-nav-root
+  {
+    background: var(--top-nav-root-bg-desktop);
+  }
 }
 
-.top-nav-themed a:hover,
-.top-nav-themed button:hover
+.top-nav-link
 {
-  color: hsl(var(--top-nav-link-hover));
+  color: var(--top-nav-link);
 }
 
-.top-nav-themed-active
+.top-nav-link:hover
 {
-  background: hsl(var(--top-nav-active-background));
-  color: hsl(var(--top-nav-active-foreground));
+  color: color-mix(in oklab, var(--top-nav-link), white 18%);
 }
 
-.top-nav-themed a.top-nav-themed-active,
-.top-nav-themed button.top-nav-themed-active
+.top-nav-highlight
 {
-  color: hsl(var(--top-nav-active-foreground));
+  background: var(--top-nav-highlight-bg);
 }
 
-.top-nav-themed-submenu
+.top-nav-submenu
 {
-  background: hsl(var(--top-nav-submenu-background));
-  color: hsl(var(--top-nav-submenu-foreground));
+  background: var(--top-nav-submenu-bg);
+}
+
+.top-nav-mobile-menu
+{
+  background: var(--top-nav-root-bg-mobile);
+}
+
+.top-nav-mobile-active
+{
+  background: var(--top-nav-mobile-active-bg);
 }
 
 .tag-marquee__animated