client/src/App.css

@@ -1,67 +1,12 @@
-:root {
+html {
-    /* 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;
-}
-
-@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 {
-    min-height: 100svh;
-    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 {
+body {
-    max-width: 40rem;
-    width: 100%;
     height: 100%;
+    width: 100%;
 }

client/src/App.tsx

@@ -1,6 +1,6 @@
-import "@/App.css";
+import "/src/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,14 +1,9 @@
 header {
-    --margin: 0.25rem;
+    border-color: #c6a0f6;
-    --padding: 0.25rem;
     border-width: 2px;
     border-style: solid;
 
-    position: sticky;
+    position: sticky top;
-
-    margin: var(--margin);
-    padding: var(--padding);
-    width: calc(100% - (2 * var(--margin)) - (2 * var(--padding)) - 4px);
 }
 
 nav {
@@ -25,27 +20,8 @@ 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,4 +1,3 @@
-import "@/App.css";
 import "./header.css";
 import { Nav } from "./nav";
 

client/src/components/header/nav.tsx

@@ -5,17 +5,13 @@ export function Nav() {
   return (
     <nav>
       <ul>
-        <NavLink path="/" name="Home" />
+        <li>
-        <NavLink path="/about" name="About" />
+          <Link to="/">Home</Link>
+        </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,15 +1,16 @@
-import { Page } from "@/pages/page";
+import { Header } from "/src/components/header";
-import "@/App.css";
+import "/src/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

@@ -1,11 +0,0 @@
-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,13 +1,14 @@
-import { Page } from "./page";
+import { Header } from "/src/components/header";
-import "@/App.css";
+import "/src/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

@@ -1,34 +1,29 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        /* Visit https://aka.ms/tsconfig to read more about this file */
+    /* Visit https://aka.ms/tsconfig to read more about this file */
-        "target": "ES2020",
+    "target": "ES2020",
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-        "jsx": "react-jsx",
+    "jsx": "react-jsx",
-        "useDefineForClassFields": true,
+    "useDefineForClassFields": true,
 
-        /* Modules */
+    /* Modules */
-        "module": "ESNext",
+    "module": "ESNext",
-        "moduleResolution": "bundler",
+    "moduleResolution": "bundler",
 
-        /* Emit */
+    /* Emit */
-        "noEmit": true,
+    "noEmit": true,
 
-        /* Interop Constraints */
+    /* Interop Constraints */
-        "isolatedModules": true,
+    "isolatedModules": true,
-        "allowSyntheticDefaultImports": true,
+    "allowSyntheticDefaultImports": true,
-        "allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": true,
-        "esModuleInterop": true,
+    "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
+    "forceConsistentCasingInFileNames": true,
 
-        /* Type Checking */
+    /* Type Checking */
-        "strict": true,
+    "strict": true,
 
-        /* Completeness */
+    /* Completeness */
-        "skipLibCheck": true,
+    "skipLibCheck": true
-
+  }
-        "baseUrl": "./src",
-        "paths": {
-            "@/*": ["*"]
-        }
-    }
 }