Moving to better absoulte paths with @ syntax

The themeing is broken up into 4 colors, `text`, `background`, `accent`,
and `highlight`
`text` is used for most foreground elements, including obviously text
`background` is used for most background colors
`accent` is used for decorations
`highlight` is used for highlighting certain elements, such as headers

client/src/App.css

@@ -1,12 +1,67 @@
-html {
+:root {
+    /* Catppuccin colors */
+    /* Light mode */
+    --light-text: #1e2030;
+    --light-background: #eff1f5;
+    --light-accent: #8839ef;
+    --light-highlight: #209fb5;
+    /* Dark mode */
+    --dark-text: #cad3f5;
+    --dark-background: #24273a;
+    --dark-accent: #c6a0f6;
+    --dark-highlight: #7dc4e4;
+
+    /* Global configs */
     color-scheme: light dark;
     font-family: system-ui;
-    display: flex;
+}
-    align-items: center;
+
-    justify-content: center;
+@media (prefers-color-scheme: light) {
+    html {
+        color: var(--light-text);
+        background-color: var(--light-background);
+    }
+
+    h1 {
+        color: var(--light-highlight);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        color: var(--dark-text);
+        background-color: var(--dark-background);
+    }
+
+    h1 {
+        color: var(--dark-highlight);
+    }
+}
+
+html {
 }
 
 body {
-    height: 100%;
+    min-height: 100svh;
-    width: 100%;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+}
+
+#app {
+    height: 100%;
+    min-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
+#body {
+    max-width: 40rem;
+    width: 100%;
+    height: 100%;
 }

client/src/App.tsx

@@ -1,6 +1,6 @@
-import "/src/App.css";
+import "@/App.css";
-import { About } from "./pages/about";
+import { About } from "@/pages/about";
-import { Root } from "./pages/root";
+import { Root } from "@/pages/root";
 import { BrowserRouter, Route, Routes } from "react-router";
 
 export function App() {

client/src/components/header/header.css

@@ -1,9 +1,14 @@
 header {
-    border-color: #c6a0f6;
+    --margin: 0.25rem;
+    --padding: 0.25rem;
     border-width: 2px;
     border-style: solid;
 
-    position: sticky top;
+    position: sticky;
+
+    margin: var(--margin);
+    padding: var(--padding);
+    width: calc(100% - (2 * var(--margin)) - (2 * var(--padding)) - 4px);
 }
 
 nav {
@@ -20,8 +25,27 @@ nav {
     }
 
     a {
-        color: #cad3f5;
         text-decoration: none;
         font-weight: bold;
     }
 }
+
+@media (prefers-color-scheme: light) {
+    header {
+        border-color: var(--light-accent);
+    }
+
+    a {
+        color: var(--light-text);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    header {
+        border-color: var(--dark-accent);
+    }
+
+    a {
+        color: var(--dark-text);
+    }
+}

client/src/components/header/index.tsx

@@ -1,3 +1,4 @@
+import "@/App.css";
 import "./header.css";
 import { Nav } from "./nav";
 

client/src/components/header/nav.tsx

@@ -5,13 +5,17 @@ export function Nav() {
   return (
     <nav>
       <ul>
-        <li>
+        <NavLink path="/" name="Home" />
-          <Link to="/">Home</Link>
+        <NavLink path="/about" name="About" />
-        </li>
-        <li>
-          <Link to="/about">About</Link>
-        </li>
       </ul>
     </nav>
   );
 }
+
+function NavLink(props: { path: string; name: string }) {
+  return (
+    <li>
+      <Link to={props.path}>{props.name}</Link>
+    </li>
+  );
+}

client/src/index.tsx

@@ -1,11 +1,11 @@
-import { createRoot } from 'react-dom/client';
+import { createRoot } from "react-dom/client";
-import { StrictMode } from 'react';
+import { StrictMode } from "react";
-import { App } from './App';
+import { App } from "@/App";
 
 let container = document.getElementById("app")!;
-let root = createRoot(container)
+let root = createRoot(container);
 root.render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );

client/src/pages/about.tsx

@@ -1,16 +1,15 @@
-import { Header } from "/src/components/header";
+import { Page } from "@/pages/page";
-import "/src/App.css";
+import "@/App.css";
 
 export function About() {
   return (
-    <>
+    <Page>
-      <Header />
       <h1>About Starve Me Now!</h1>
       <p>
         Firstly, this is intended for those who have a starvation/diet control
         fetish. This is <b>not</b> intended to help with weight loss or similar
         reasons to fast.
       </p>
-    </>
+    </Page>
   );
 }

client/src/pages/page.tsx

@@ -0,0 +1,11 @@
+import { Header } from "@/components/header";
+import "@/App.css";
+
+export function Page(props: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <article id="body">{props.children}</article>
+    </>
+  );
+}

client/src/pages/root.tsx

@@ -1,14 +1,13 @@
-import { Header } from "/src/components/header";
+import { Page } from "./page";
-import "/src/App.css";
+import "@/App.css";
 
 export function Root() {
   return (
-    <>
+    <Page>
-      <Header />
       <h1>Starve Me Now!</h1>
       <p>
         Edit <code>src/App.tsx</code> to get started!
       </p>
-    </>
+    </Page>
   );
 }

client/tsconfig.json

@@ -24,6 +24,11 @@
         "strict": true,
 
         /* Completeness */
-    "skipLibCheck": true
+        "skipLibCheck": true,
+
+        "baseUrl": "./src",
+        "paths": {
+            "@/*": ["*"]
+        }
     }
 }