diff --git a/web/sass/mixins.scss b/web/sass/mixins.scss
new file mode 100644
index 0000000..396459e
--- /dev/null
+++ b/web/sass/mixins.scss
@@ -0,0 +1,9 @@
+@mixin button_link() {
+ cursor: pointer;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ border: none;
+ overflow: hidden;
+ outline: none;
+ border-radius: 5px;
+}
diff --git a/web/sass/nav.scss b/web/sass/nav.scss
new file mode 100644
index 0000000..41ae196
--- /dev/null
+++ b/web/sass/nav.scss
@@ -0,0 +1,30 @@
+nav {
+ background-color: $nav-bg;
+ display: flex;
+
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ li { display: inline-block; }
+
+ button.title {
+ color: $green;
+ }
+ button.active {
+ background-color: $nav-active-bg;
+ color: $nav-active-color;
+ }
+ button {
+ color: $nav-color;
+ display: block;
+ padding: 12px 24px;
+ text-decoration: none;
+ @include button_link;
+ }
+ button:hover {
+ background-color: $nav-hover;
+ }
+
+}
diff --git a/web/sass/site.scss b/web/sass/site.scss
index 8d2b15e..559f068 100644
--- a/web/sass/site.scss
+++ b/web/sass/site.scss
@@ -1,5 +1,23 @@
@import 'catpuccin';
+$bg: $latte-base;
+$nav-bg: $latte-crust;
+$nav-color: $latte-text;
+$nav-hover: $latte-surface2;
+$nav-active-bg: $latte-mauve;
+$nav-active-color: $latte-base;
+$green: $latte-green;
+
+@import 'mixins';
+
+@import 'nav';
+
body {
background-color: $latte-base;
}
+
+body.dark-mode {
+ $bg: $macchiato-base;
+ $nav-bg: $macchiato-crust;
+ $green: $macchiato-green;
+}
diff --git a/web/templates/index.html b/web/templates/index.html
index 455c569..cf6dc8f 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -8,14 +8,22 @@
{{.Title}}
-
-
-
- Hello World!
-
+
+
+
Hello World!
+
-