From 0d470d43d8ddeedc30ce77f556804b9e42d44886 Mon Sep 17 00:00:00 2001 From: seth Date: Sun, 18 May 2025 19:14:32 -0400 Subject: [PATCH 1/3] style: refine syntax highlighting styles for better readability --- src/front/index.css | 126 ++++---------------------------------------- 1 file changed, 11 insertions(+), 115 deletions(-) diff --git a/src/front/index.css b/src/front/index.css index 29b519d..e5d7841 100644 --- a/src/front/index.css +++ b/src/front/index.css @@ -22,9 +22,10 @@ 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; @@ -35,6 +36,14 @@ body { font: 18px / 24px monospace; box-shadow: 0 0 5px #0001; + + :before { + color: #6f9aff; + } + + ::selection { + background: #bdf5; + } } .shj-inline { @@ -44,103 +53,19 @@ 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, @@ -148,36 +73,7 @@ body { 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; } From 1ed052457330f4b63ac31f32df9f7324d3e59567 Mon Sep 17 00:00:00 2001 From: seth Date: Sun, 18 May 2025 19:16:44 -0400 Subject: [PATCH 2/3] style: remove unused background color and redundant syntax from CSS --- src/front/index.css | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/front/index.css b/src/front/index.css index e5d7841..eb12a03 100644 --- a/src/front/index.css +++ b/src/front/index.css @@ -28,7 +28,6 @@ body { 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; @@ -53,22 +52,10 @@ body { display: inline-block; } - -.shj-syn-insert, .shj-syn-str { color: #7d8; } - -.shj-syn-deleted, -.shj-syn-var { - color: #f44; -} - - - -.shj-syn-deleted, -.shj-syn-err, .shj-syn-var { color: #ff5261; } From 62cce216df8c7a360a89279a7e1f866038df3df3 Mon Sep 17 00:00:00 2001 From: seth Date: Sun, 18 May 2025 19:31:44 -0400 Subject: [PATCH 3/3] use css modules & nesting --- src/front/{colors.css => colors.module.css} | 0 src/front/components/Lanyard/index.tsx | 6 +- .../components/pages/About/index.module.css | 34 +++++++++++ src/front/components/pages/About/index.tsx | 60 ++++--------------- src/front/index.css | 1 - src/front/index.html | 2 +- src/front/index.tsx | 4 ++ types/css.d.ts | 6 ++ 8 files changed, 60 insertions(+), 53 deletions(-) rename src/front/{colors.css => colors.module.css} (100%) create mode 100644 src/front/components/pages/About/index.module.css create mode 100644 types/css.d.ts diff --git a/src/front/colors.css b/src/front/colors.module.css similarity index 100% rename from src/front/colors.css rename to src/front/colors.module.css diff --git a/src/front/components/Lanyard/index.tsx b/src/front/components/Lanyard/index.tsx index 3e69529..c56e1dd 100644 --- a/src/front/components/Lanyard/index.tsx +++ b/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 = { 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) { diff --git a/src/front/components/pages/About/index.module.css b/src/front/components/pages/About/index.module.css new file mode 100644 index 0000000..db4a39c --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/front/components/pages/About/index.tsx b/src/front/components/pages/About/index.tsx index dcf2d9b..98fa17e 100644 --- a/src/front/components/pages/About/index.tsx +++ b/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 (

Seth, the dedicated backend developer, with many{" "} @@ -55,47 +39,25 @@ export default () => {

diff --git a/src/front/index.css b/src/front/index.css index eb12a03..a860177 100644 --- a/src/front/index.css +++ b/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; diff --git a/src/front/index.html b/src/front/index.html index 480d0c9..571faad 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/front/index.tsx b/src/front/index.tsx index eaf9dd5..043834f 100644 --- a/src/front/index.tsx +++ b/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(); // You're garbage, let me collect you. diff --git a/types/css.d.ts b/types/css.d.ts new file mode 100644 index 0000000..c5e4c4d --- /dev/null +++ b/types/css.d.ts @@ -0,0 +1,6 @@ +declare module '*.module.css' { + const styles: { + readonly [key: string]: string + } + export default styles +} \ No newline at end of file