refactor: Split web code into multiple files, improve static resource loading

2026-05-26 20:49:55 +00:00 · 2026-02-28 20:32:46 -05:00
parent 9515019641
commit 3d50af0943
14 changed files with 194 additions and 65 deletions
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="447.99823"
+   height="447.99823"
+   viewBox="0 0 447.99823 447.99823"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"
+     transform="translate(-32.000893,-32.000893)"><circle
+       style="fill:#9b4bd4;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path1"
+       cy="256"
+       cx="256"
+       r="176" /><path
+       style="fill:#de6cd3;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41,174 69,36 C 135,126 175,102 226,94 l -12,31 62,-44 -69,-44 15,30 C 128,69 84,109 41,172 Z"
+       id="path7" /><path
+       style="fill:#de6cd3;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 338,41 -36,69 c 84,25 108,65 116,116 l -31,-12 44,62 44,-69 -30,15 C 443,128 403,84 340,41 Z"
+       id="path6" /><path
+       style="fill:#de6cd3;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 471,338 -69,-36 c -25,84 -65,108 -116,116 l 12,-31 -62,44 69,44 -15,-30 c 94,-2 138,-42 181,-105 z"
+       id="path8" /><path
+       style="fill:#de6cd3;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 174,471 36,-69 C 126,377 102,337 94,286 l 31,12 -44,-62 -44,69 30,-15 c 2,94 42,138 105,181 z"
+       id="path9" /><g
+       id="g15"
+       transform="translate(-5.4157688e-4)"><path
+         style="fill:none;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 155.45977,224.65379 c -7.25909,13.49567 -7.25909,26.09161 -6.35171,39.58729 0.90737,11.69626 12.7034,24.29222 24.49943,26.09164 21.77727,3.59884 28.12898,-20.69338 28.12898,-20.69338 0,0 4.53693,-15.29508 5.4443,-40.48699"
+         id="path11" /><path
+         style="fill:none;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 218.96706,278.05399 c 3.00446,17.12023 7.52704,24.88918 19.22704,28.48918 9,2.7 22.5,-4.5 22.5,-16.2 0.9,21.6 17.1,17.1 19.8,17.1 11.7,-1.8 18.9,-14.4 16.2,-30.6"
+         id="path12" /><path
+         style="fill:none;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 305.6941,230.94317 c 1.8,27 6.3,40.5 6.3,40.5 8.1,27 28.8,19.8 28.8,19.8 18.9,-7.2 22.5,-24.3 22.5,-30.6 0,-25.2 -6.3,-35.1 -6.3,-35.1"
+         id="path13" /></g></g></svg>
@@ -0,0 +1,94 @@
+:root {
+    color-scheme: light;
+    --font-stack: sans-serif;
+
+    --background-color: #fff;
+    --text-color: #000;
+
+    --bg: oklch(0.76 0.0854 317.27);
+    --panel-bg: oklch(0.91 0.042 317.27);
+
+    --name-lightness: 0.45;
+
+    @media (prefers-color-scheme: dark) {
+        color-scheme: dark;
+        --text-color: #fff;
+        --bg: oklch(0.15 0.042 317.27);
+        --panel-bg: oklch(0.24 0.03 317.27);
+
+        --name-lightness: 0.8;
+    }
+
+    --c1: oklch(0.44 0.177 353.06);
+    --c2: oklch(0.59 0.158 150.88);
+
+    --normal-font-size: 1rem;
+    --small-font-size: 0.8rem;
+}
+
+body {
+    color: var(--text-color);
+    font-family: var(--font-stack);
+    margin: 0;
+    padding: 0;
+    display: grid;
+    place-items: center;
+    min-height: 100vh;
+}
+
+html {
+    background-color: var(--bg);
+    background-image: linear-gradient(
+        70deg,
+        oklch(from var(--bg) l + 0.2 c h),
+        oklch(from var(--bg) l - 0.2 c h)
+    );
+    font-size: 16px;
+}
+
+.panel {
+    width: min(clamp(24rem, 12rem + 40vw, 48rem), calc(100vw - 3rem));
+    border-radius: 15px;
+    background-color: var(--panel-bg);
+    padding-inline: 1.5rem;
+    padding-block: 1rem;
+    box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);
+}
+
+@media (max-width: 24rem) {
+    .panel {
+        padding-inline: 0.25rem;
+        width: calc(100vw - 0.5rem);
+        border-radius: 0;
+        margin-block-start: 0.2rem;
+    }
+    main {
+        height: 100%;
+    }
+}
+
+footer {
+    padding-inline: 0.25rem;
+    height: max(fit-content, 2rem);
+}
+
+.project-name {
+    text-decoration: none;
+    background: linear-gradient(
+        130deg,
+        oklch(from var(--c1) var(--name-lightness) c h),
+        oklch(from var(--c2) var(--name-lightness) c h)
+    );
+    background-clip: text;
+    color: transparent;
+    filter: brightness(1.2);
+}
+
+b {
+    color: oklch(from var(--c2) var(--name-lightness) c h);
+}
+
+.logo {
+    width: 100%;
+    height: 64px;
+}