refactor navbar

web/src/components/index/navbar.astro

@@ -0,0 +1,6 @@
+<div class="text-2xl">
+    <a href="/now">now</a>
+    • <a href="/posts">posts</a>
+    • <a href="/photos">photos</a>
+    <!-- • <a href="/software">software</a> -->
+</div>

web/src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Base from "src/layout/Base.astro"
+import Navbar from "src/components/index/navbar.astro"
 ---
 
 <Base>
@@ -9,13 +10,7 @@ import Base from "src/layout/Base.astro"
 		<div class="w-[32%] text-center">
 			<div class="flex flex-col">
 				<p class="text-4xl">breadone dot net</p>
-				
-				<div class="text-2xl">
-					<a href="/now">now</a> •
-					<a href="/posts">posts</a> •
-					<a href="/photos">photos</a> •
-					<a href="/software">software</a>
-				</div>
+				<Navbar/>
 			</div>
 		</div>
 

web/src/styles/global.css

@@ -1,19 +1,29 @@
 @import "tailwindcss";
 
-@font-face {
-  font-family: Barnum;
-  font-style: normal;
-  font-weight: 200 700;
-  font-display: swap;
-  src: url("/fonts/barnum-roman.ttf");
-}
+@layer base {
+  @font-face {
+    font-family: Barnum;
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url("/fonts/barnum-roman.ttf");
+  }
   
-html body {
+  :root {
+    --bg-light: "#f4f4f9";
+    --accent: "#F9DC5C";
+  }
+  
+  html body {
     @apply font-[Barnum];
     @apply w-[68%] mx-auto mt-14 h-full;
-    @apply bg-[#f4f4f9];
+    @apply bg-(--bg2-light);
+  }
+  
+  a {
+    @apply hover:underline;
+    text-decoration-color: #F9DC5C;
+  }
 }
 
-a {
-    @apply hover:underline;
-}
+@tailwind utilities;