use css modules & nesting

src/front/components/Lanyard/index.tsx

@@ -2,6 +2,8 @@ import { highlightElement } from "@speed-highlight/core";
 import { createRef } from "tsx-dom";
 import socket from "../../utilities/socket";
 
+import colors from "../../colors.module.css";
+
 const activityTypes: Record<number, string> = {
 	0: "Playing",
 	1: "Streaming",
@@ -19,9 +21,9 @@ export default () => {
 
 		const streamingActivity = lanyard.activities.find((act) => act.type === 1);
 		if (streamingActivity) {
-			document.documentElement.className = "streaming";
+			document.documentElement.className = colors.streaming || "";
 		} else {
-			document.documentElement.className = lanyard.discord_status;
+			document.documentElement.className = colors[lanyard.discord_status] || "";
 		}
 
 		if (lanyard.activities.length === 0) {

src/front/components/pages/About/index.module.css

@@ -0,0 +1,34 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+}
+
+.card {
+    width: 90%;
+    padding: .5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .center {
+        text-align: center;
+    }
+}
+
+.avatar {
+    width: 5rem;
+    height: inherit;
+    border: 2px solid rgb(var(--mdui-color-primary));
+}
+
+.lanyard {
+    display: var(--lanyard-display);
+}
+
+.hyperate {
+    display: var(--hyperate-display);
+}

src/front/components/pages/About/index.tsx

@@ -7,39 +7,23 @@ import "mdui/components/segmented-button";
 import Hyperate from "../../Hyperate";
 import Lanyard from "../../Lanyard";
 
+import styles from "./index.module.css";
+import colors from "../../../colors.module.css";
+
+
 export default () => {
 	return (
 		<div
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "center",
-				flexDirection: "column",
-				height: "100%",
-			}}
+			class={styles.container}
 		>
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				style={{
-					width: "90%",
-					padding: ".5rem",
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "center",
-					flexDirection: "column",
-
-					textAlign: "center",
-				}}
+				class={`${styles.card} ${styles.center}`}
 			>
 				<mdui-avatar
-					style={{
-						width: "5rem",
-						height: "inherit",
-						border: "2px solid rgb(var(--mdui-color-primary))",
-					}}
 					src="/public/Abyssinian/default.png"
-					class="pfp"
+					class={`${styles.avatar} ${colors.pfp}`}
 				/>
 				<p>
 					Seth, the <strong>dedicated</strong> backend developer, with many{" "}
@@ -55,47 +39,25 @@ export default () => {
 			</mdui-card>
 
 			<br
-				style={{
-					display: "var(--lanyard-display)",
-				}}
+				class={styles.lanyard}
 			/>
 
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				style={{
-					width: "90%",
-					padding: ".5rem",
-					// center the contents
-					display: "var(--lanyard-display, flex)",
-					justifyContent: "center",
-					alignItems: "center",
-					flexDirection: "column",
-				}}
+				class={`${styles.card} ${styles.lanyard}`}
 			>
 				<Lanyard />
 			</mdui-card>
 
 			<br
-				style={{
-					display: "var(--hyperate-display)",
-				}}
+				class={styles.hyperate}
 			/>
 
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				style={{
-					width: "90%",
-					padding: ".5rem",
-					// center the contents
-					display: "var(--hyperate-display, flex)",
-					justifyContent: "center",
-					alignItems: "center",
-					flexDirection: "column",
-
-					textAlign: "center",
-				}}
+				class={`${styles.card} ${styles.center} ${styles.hyperate}`}
 			>
 				<Hyperate />
 			</mdui-card>

src/front/index.css

@@ -2,7 +2,6 @@
 @import "../../node_modules/@fontsource/roboto-mono/latin-400.css";
 */
 @import "../../node_modules/mdui/mdui.css";
-@import "./colors.css";
 
 :not(:defined) {
 	visibility: hidden;

src/front/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="offline">
+<html lang="en">
 
 <head>
     <meta charset="UTF-8">

src/front/index.tsx

@@ -4,6 +4,10 @@ import "./utilities/clicker";
 
 import App from "./App";
 
+import colors from "./colors.module.css";
+
+document.documentElement.className = colors.offline || "";
+
 document.body.appendChild(<App />);
 
 // You're garbage, let me collect you.

types/css.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+    const styles: {
+        readonly [key: string]: string
+    }
+    export default styles
+}