make stuff

src/components/nav.astro

@@ -10,6 +10,9 @@
 	<a href="/services">services</a>
 </div>
 <style>
+ .nav {
+     color: white;
+ }
  a {
      color: white;
  }

src/layouts/Layout.astro

@@ -23,6 +23,7 @@ const { title } = Astro.props;
 <style is:global>
 	html {
 		font-family: monospace;
-		background: #101010;
+	    background: #101010;
+	    color: white;
 	}
 </style>

src/pages/home.astro

@@ -0,0 +1,30 @@
+---
+import Nav from "../components/nav.astro";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="sako.lol - home">
+    <div class="top">
+	<Nav/>
+    </div>
+    <div class="content">
+	<h1>placeholder</h1>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> todo make this extend to the bottom regardless if theres nothing</p>
+    </div>
+</Layout>
+<style>
+ .top {
+     text-align: center;
+     align-items: center;
+ }
+ .content {
+     background-color: #222222;
+     margin: auto;
+     max-width: 90vw;
+ }
+</style>

src/pages/index.astro

@@ -6,11 +6,6 @@ import Nav from '../components/nav.astro';
 <Layout title="sako.lol">
     <main>
 	<div class="center">
-	    <!-- <div class="nav">
-		 <a href="/">home</a>
-		 <a href="blog">blog</a>
-		 <a href="services">services</a>
-		 </div> -->
 	    <Nav/>
 	    <div>
     </main>