src/front/components/Lanyard/index.tsx

@@ -2,8 +2,6 @@ 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",
@@ -21,9 +19,9 @@ export default () => {
 
 		const streamingActivity = lanyard.activities.find((act) => act.type === 1);
 		if (streamingActivity) {
-			document.documentElement.className = colors.streaming || "";
+			document.documentElement.className = "streaming";
 		} else {
-			document.documentElement.className = colors[lanyard.discord_status] || "";
+			document.documentElement.className = lanyard.discord_status;
 		}
 
 		if (lanyard.activities.length === 0) {

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

@@ -1,34 +0,0 @@
-.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,23 +7,39 @@ 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
-			class={styles.container}
+			style={{
+				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"
-				class={`${styles.card} ${styles.center}`}
+				style={{
+					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={`${styles.avatar} ${colors.pfp}`}
+					class="pfp"
 				/>
 				<p>
 					Seth, the <strong>dedicated</strong> backend developer, with many{" "}
@@ -39,25 +55,47 @@ export default () => {
 			</mdui-card>
 
 			<br
-				class={styles.lanyard}
+				style={{
+					display: "var(--lanyard-display)",
+				}}
 			/>
 
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				class={`${styles.card} ${styles.lanyard}`}
+				style={{
+					width: "90%",
+					padding: ".5rem",
+					// center the contents
+					display: "var(--lanyard-display, flex)",
+					justifyContent: "center",
+					alignItems: "center",
+					flexDirection: "column",
+				}}
 			>
 				<Lanyard />
 			</mdui-card>
 
 			<br
-				class={styles.hyperate}
+				style={{
+					display: "var(--hyperate-display)",
+				}}
 			/>
 
 			<mdui-card
 				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
-				class={`${styles.card} ${styles.center} ${styles.hyperate}`}
+				style={{
+					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,6 +2,7 @@
 @import "../../node_modules/@fontsource/roboto-mono/latin-400.css";
 */
 @import "../../node_modules/mdui/mdui.css";
+@import "./colors.css";
 
 :not(:defined) {
 	visibility: hidden;
@@ -21,12 +22,12 @@ body {
 	background-color: rgb(var(--mdui-color-background));
 }
 
-.shj-lang-json {
+[class*="shj-lang-"] {
 	white-space: pre;
-	color: #f8f8f2;
+	color: #112;
-	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;
@@ -34,14 +35,6 @@ body {
 	font:
 		18px / 24px monospace;
 	box-shadow: 0 0 5px #0001;
-
-	:before {
-		color: #6f9aff;
-	}
-
-	::selection {
-		background: #bdf5;
-	}
 }
 
 .shj-inline {
@@ -51,15 +44,140 @@ 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">
+<html lang="en" class="offline">
 
 <head>
     <meta charset="UTF-8">

src/front/index.tsx

@@ -4,10 +4,6 @@ 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

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