style(navigation): implement new navigation-bar

2025-08-22 00:46:19 +02:00
parent aebd3d643e
commit 244ad1aabe
8 changed files with 679 additions and 84 deletions
--- a/src/app/core/components/navigation-bar/navigation-bar.scss
+++ b/src/app/core/components/navigation-bar/navigation-bar.scss
@@ -15,6 +15,35 @@ nav {
            border-color: var(--surface-500);
        }
    }
+
+    .navigation ul li a {
+        display: block;
+        padding: 5px 10px;
+        position: relative;
+        color: color-mix(in srgb, var(--content-color) 80%, transparent);
+        font-family: 'JetBrains Mono', monospace;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+
+        &.active {
+            color: var(--primary-500);
+            position: relative;
+            top: -3px;
+
+            &::after {
+                content: "";
+                position: absolute;
+                left: calc(50% - 1px);
+                transform: translate(-50%);
+                width: 50%;
+                height: .1px;
+                background: var(--primary-500);
+                border-radius: 50%;
+                bottom: 2px;
+                box-shadow: 0 -3px 10px 1px var(--primary-500);
+            }
+        }
+    }
 }

 .blur {