color scheme and some organization

public/styles/css/classes.css

@@ -0,0 +1,11 @@
+.content {
+
+}
+
+.title {
+
+}
+
+.subtitle {
+    
+}

public/styles/css/color-scheme.css

@@ -0,0 +1,67 @@
+:root {
+    --text: #f2ede7;
+    --background: #0d0a06;
+    --primary: #d7bfa2;
+    --secondary: #76552e;
+    --accent: #ffa941;
+
+    --text-50: #f6f3ee;
+    --text-100: #ede6de;
+    --text-200: #dbcebd;
+    --text-300: #c9b59c;
+    --text-400: #b89c7a;
+    --text-500: #a68359;
+    --text-600: #856947;
+    --text-700: #634f36;
+    --text-800: #423524;
+    --text-900: #211a12;
+    --text-950: #110d09;
+
+    --background-50: #f7f3ee;
+    --background-100: #efe7dc;
+    --background-200: #dfcfb9;
+    --background-300: #cfb696;
+    --background-400: #bf9e73;
+    --background-500: #af8650;
+    --background-600: #8c6b40;
+    --background-700: #695030;
+    --background-800: #463620;
+    --background-900: #231b10;
+    --background-950: #110d08;
+
+    --primary-50: #f7f3ed;
+    --primary-100: #f0e7db;
+    --primary-200: #e0ceb8;
+    --primary-300: #d1b694;
+    --primary-400: #c29d70;
+    --primary-500: #b3854d;
+    --primary-600: #8f6a3d;
+    --primary-700: #6b502e;
+    --primary-800: #47351f;
+    --primary-900: #241b0f;
+    --primary-950: #120d08;
+
+    --secondary-50: #f8f3ed;
+    --secondary-100: #f1e7da;
+    --secondary-200: #e2ceb6;
+    --secondary-300: #d4b691;
+    --secondary-400: #c69d6c;
+    --secondary-500: #b88547;
+    --secondary-600: #936a39;
+    --secondary-700: #6e502b;
+    --secondary-800: #49351d;
+    --secondary-900: #251b0e;
+    --secondary-950: #120d07;
+
+    --accent-50: #fff4e5;
+    --accent-100: #ffe8cc;
+    --accent-200: #ffd199;
+    --accent-300: #ffba66;
+    --accent-400: #ffa333;
+    --accent-500: #ff8c00;
+    --accent-600: #cc7000;
+    --accent-700: #995400;
+    --accent-800: #663800;
+    --accent-900: #331c00;
+    --accent-950: #1a0e00;
+}

public/styles/css/main.css

@@ -1,8 +1,20 @@
+@import "color-scheme.css";
+
 @font-face {
     font-family: terminess-nf;
     src: url(../fonts/TerminessNerdFont-Regular.ttf);
 }
 
 :root {
-    font-family: terminess-nf
+    font-size: 20px;
+    font-family: terminess-nf;
+    
+    padding: 1rem;
+    width: 1000px;
+    max-width: calc(100% - 2rem);
+    line-height: 1.6;
+    margin: auto;
+
+    color: var(--text);
+    background-color: var(--background);
 }

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/index.astro

@@ -3,7 +3,12 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout>
-	<main>
-		<h1>nelle observer</h1>
-	</main>
-</Layout>
+  <main>
+	// Title Area
+    <section class="content">
+      <h1 class="title">nelle observer</h1>
+	  <h2 class="subtitle"></h2>
+	  <p>words</p>
+	</section>
+  </main>
+</Layout>