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={{
+			class={styles.container}
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "center",
-				flexDirection: "column",
-				height: "100%",
-			}}
 		>
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				style={{
+				class={`${styles.card} ${styles.center}`}
-					width: "90%",
-					padding: ".5rem",
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "center",
-					flexDirection: "column",
-
-					textAlign: "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={{
+				class={styles.lanyard}
-					display: "var(--lanyard-display)",
-				}}
 			/>
 
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				style={{
+				class={`${styles.card} ${styles.lanyard}`}
-					width: "90%",
-					padding: ".5rem",
-					// center the contents
-					display: "var(--lanyard-display, flex)",
-					justifyContent: "center",
-					alignItems: "center",
-					flexDirection: "column",
-				}}
 			>
 				<Lanyard />
 			</mdui-card>
 
 			<br
-				style={{
+				class={styles.hyperate}
-					display: "var(--hyperate-display)",
-				}}
 			/>
 
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				style={{
+				class={`${styles.card} ${styles.center} ${styles.hyperate}`}
-					width: "90%",
-					padding: ".5rem",
-					// center the contents
-					display: "var(--hyperate-display, flex)",
-					justifyContent: "center",
-					alignItems: "center",
-					flexDirection: "column",
-
-					textAlign: "center",
-				}}
 			>
 				<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;
@@ -22,12 +21,12 @@ body {
 	background-color: rgb(var(--mdui-color-background));
 }
 
-[class*="shj-lang-"] {
+.shj-lang-json {
 	white-space: pre;
-	color: #112;
+	color: #f8f8f2;
+	background: var(--mdui-color-secondary-container);
 	text-shadow: none;
 	box-sizing: border-box;
-	background: #dedede;
 	border-radius: 10px;
 	max-width: min(100%, 100vw);
 	margin: 10px 0;
@@ -35,6 +34,14 @@ body {
 	font:
 		18px / 24px monospace;
 	box-shadow: 0 0 5px #0001;
+
+	:before {
+		color: #6f9aff;
+	}
+
+	::selection {
+		background: #bdf5;
+	}
 }
 
 .shj-inline {
@@ -44,140 +51,15 @@ body {
 	display: inline-block;
 }
 
-[class*="shj-lang-"]::selection {
-	background: #bdf5;
-}
-
-[class*="shj-lang-"] ::selection {
-	background: #bdf5;
-}
-
-/*
-[class*="shj-lang-"] > div {
-	display: flex;
-	overflow: auto;
-}
-
-[class*="shj-lang-"] > div :last-child {
-	outline: none;
-	flex: 1;
-}
-
-.shj-numbers {
-	counter-reset: line;
-	padding-left: 5px;
-}
-
-.shj-numbers div {
-	padding-right: 5px;
-}
-
-.shj-numbers div:before {
-	color: #999;
-	content: counter(line);
-	opacity: 0.5;
-	text-align: right;
-	counter-increment: line;
-	margin-right: 5px;
-	display: block;
-}
-
-.shj-syn-cmnt {
-	font-style: italic;
-}
-
-.shj-syn-err,
-.shj-syn-kwd {
-	color: #e16;
-}
-
-.shj-syn-num,
-.shj-syn-class {
-	color: #f60;
-}
-*/
-.shj-syn-insert,
 .shj-syn-str {
 	color: #7d8;
 }
 
-/*
-.shj-syn-bool {
-	color: #3bf;
-}
-
-.shj-syn-type,
-.shj-syn-oper {
-	color: #5af;
-}
-
-.shj-syn-section,
-.shj-syn-func {
-	color: #84f;
-}
-*/
-.shj-syn-deleted,
-.shj-syn-var {
-	color: #f44;
-}
-
-/*
-.shj-oneline {
-	padding: 12px 10px;
-}
-
-.shj-lang-http.shj-oneline .shj-syn-kwd {
-	color: #fff;
-	background: #25f;
-	border-radius: 5px;
-	padding: 5px 7px;
-}
-*/
-[class*="shj-lang-"] {
-	color: #f8f8f2;
-	background: var(--mdui-color-secondary-container);
-}
-
-[class*="shj-lang-"]:before {
-	color: #6f9aff;
-}
-
-.shj-syn-deleted,
-.shj-syn-err,
 .shj-syn-var {
 	color: #ff5261;
 }
 
-/*
-.shj-syn-section,
-.shj-syn-kwd {
-	color: #ff7cc6;
-}
 
-.shj-syn-class {
-	color: #eab07c;
-}
-
-.shj-numbers,
-.shj-syn-cmnt {
-	color: #7d828b;
-}
-
-.shj-syn-insert,
-.shj-syn-type,
-.shj-syn-func,
-.shj-syn-bool {
-	color: #71d58a;
-}
-
-.shj-syn-num {
-	color: #b581fd;
-}
-
-.shj-syn-oper {
-	color: #80c6ff;
-}
-*/
 .shj-syn-str {
 	color: #4dacfa;
 }

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
+}