Restructuring for better layout and code reuse

client/src/App.css

@@ -39,12 +39,29 @@
 }
 
 html {
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 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/components/header/header.css

@@ -1,8 +1,14 @@
 header {
+    --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 {

client/src/pages/about.tsx

@@ -1,16 +1,15 @@
-import { Header } from "/src/components/header";
+import { Page } from "/src/pages/page";
 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

@@ -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 "/src/pages/page";
 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

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