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%;
-    width: 100%;
+    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 {
+    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 (
-    <>
-      <Header />
+    <Page>
       <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 (
-    <>
-      <Header />
+    <Page>
       <h1>Starve Me Now!</h1>
       <p>
         Edit <code>src/App.tsx</code> to get started!
       </p>
-    </>
+    </Page>
   );
 }

client/tsconfig.json

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