feat: add a navbar

sass/_theme.scss

@@ -1,5 +1,6 @@
 @use 'colors/catppuccin-macchiato' as dark;
 @use 'colors/catppuccin-latte' as light;
+@use 'fonts';
 
 :root {
   --pink: #{light.$pink};
@@ -27,6 +28,7 @@
   --mantle: #{light.$mantle};
   --crust: #{light.$crust};
 
+  --main-width: min(700px, 95%);
   --standard-border-radius: .8rem;
   --text-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
   --title-font: "Ubuntu Nerd Font", Helvetica, sans-serif;

sass/parts/_navbar.scss

@@ -0,0 +1,88 @@
+header {
+    background-color: var(--crust);
+    margin-bottom: 3rem;
+    ;
+}
+
+nav {
+    display: flex;
+    max-width: var(--main-width);
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    justify-content: space-between;
+
+    &>div {
+        vertical-align: middle;
+
+        a {
+            text-decoration: none;
+        }
+
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        &.nav-title,
+        &.nav-menus,
+        &.nav-widgets,
+        &>ul>li {
+            display: inline-block;
+        }
+
+        &.nav-title {
+            font-size: 2rem;
+            font-weight: 100;
+            text-transform: uppercase;
+
+            a {
+                color: var(--text);
+
+                &:visited {
+                    color: var(--text);
+                }
+
+                &:hover {
+                    color: var(--text);
+                }
+            }
+        }
+
+
+        &.nav-menus {
+            a {
+                color: var(--text);
+
+                &:visited {
+                    color: var(--text);
+                }
+
+                &:hover {
+                    color: var(--subtext0);
+                }
+            }
+
+            li {
+                list-style-type: none;
+                padding: 0;
+                margin-left: .5rem;
+                margin-right: .5rem;
+
+            }
+        }
+
+        &.nav-widgets {
+            color: var(--text);
+            font-size: 1.5rem;
+
+            li {
+                margin-left: .5rem;
+                margin-right: .5rem;
+            }
+
+        }
+    }
+}

sass/styles.scss

@@ -4,6 +4,7 @@
 @use 'parts/code';
 @use 'parts/footnote';
 @use 'parts/misc';
+@use 'parts/navbar';
 @use 'parts/page_title';
 @use 'parts/table';
 
@@ -24,10 +25,11 @@ body {
     background-color: var(--base);
     font-size: 1rem;
     line-height: 1.75;
+    margin: 0;
 }
 
 article {
-    max-width: min(700px, 95%);
+    max-width: var(--main-width);
     margin-left: auto;
     margin-right: auto;
 }
@@ -88,13 +90,14 @@ a {
     text-decoration-thickness: 0.01rem;
     text-underline-offset: 0.3rem;
 
+    &:visited {
+        color: var(--lavender);
+    }
+
     &:hover {
         color: var(--sky);
     }
 
-    &:visited {
-        color: var(--lavender);
-    }
 }
 
 li {