modified
frontend/bun.lock
@@ -4,7 +4,7 @@ "workspaces": { "": { "dependencies": { "@fontsource/jetbrains-mono": "^5.2.5", "@fontsource/monaspace-argon": "^5.2.5", }, "devDependencies": { "sass": "^1.97.3",
@@ -65,7 +65,7 @@ "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="], "@fontsource/jetbrains-mono": ["@fontsource/jetbrains-mono@5.2.8", "", {}, "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ=="], "@fontsource/monaspace-argon": ["@fontsource/monaspace-argon@5.2.5", "", {}, "sha512-EJ+jq1Smm3BB+8RK/gwB1uzjrSKdycZkKm8OZGCYvqJiTChKcGe7b2lmj0PmQbb/+lAEdCBIAcFLlPaWhtRANA=="], "@parcel/watcher": ["@parcel/watcher@2.5.6", "", { "dependencies": { "detect-libc": "^2.0.3", "is-glob": "^4.0.3", "node-addon-api": "^7.0.0", "picomatch": "^4.0.3" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.6", "@parcel/watcher-darwin-arm64": "2.5.6", "@parcel/watcher-darwin-x64": "2.5.6", "@parcel/watcher-freebsd-x64": "2.5.6", "@parcel/watcher-linux-arm-glibc": "2.5.6", "@parcel/watcher-linux-arm-musl": "2.5.6", "@parcel/watcher-linux-arm64-glibc": "2.5.6", "@parcel/watcher-linux-arm64-musl": "2.5.6", "@parcel/watcher-linux-x64-glibc": "2.5.6", "@parcel/watcher-linux-x64-musl": "2.5.6", "@parcel/watcher-win32-arm64": "2.5.6", "@parcel/watcher-win32-ia32": "2.5.6", "@parcel/watcher-win32-x64": "2.5.6" } }, "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ=="],
modified
frontend/static_src/styles/base.scss
@@ -1,24 +1,27 @@// repos — palette evokes the dense red-brown center of a tree (heartwood).// repos — warm-earth dark palette aligned with analytics + status.// Mossy forest green primary + warm amber labels on deep earth darks.:root { --bg: #1a1410; --surface: #221a14; --surface-2: #2a2018; --border: #3d2f24; --text: #e8dccc; --text-mute: #9c8a72; --accent: #b8543a; // heartwood-red core --accent-2: #c4a574; // sap gold --green: #6b9e78; --code-bg: #15100c; --add-bg: #1f2e1f; --add-fg: #95c895; --del-bg: #2e1f1f; --del-fg: #d08585; --hunk-fg: #8aa9c4; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --prose: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bg: #0e0d0a; --surface: #13120e; --surface-2: #18160f; --border: rgba(107, 158, 120, 0.12); --border-strong: rgba(107, 158, 120, 0.22); --text: #ddd7cd; --text-mute: #847c72; --text-dim: #665f56; --accent: #6b9e78; // mossy green primary --accent-2: #c9a84c; // warm amber (section labels, callouts) --green: #7db88c; // brighter green for links, hover, active --code-bg: #090806; --add-bg: rgba(107, 158, 120, 0.12); --add-fg: #7db88c; --del-bg: rgba(196, 112, 85, 0.12); --del-fg: #e38871; --hunk-fg: #9ec5d2; --mono: "Monaspace Argon", ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; --prose: "Monaspace Argon", ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;}* { box-sizing: border-box; }
@@ -29,8 +32,11 @@ html, body { background: var(--bg); color: var(--text); font-family: var(--prose); font-size: 15px; line-height: 1.55; font-size: 0.92rem; line-height: 1.7; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}// Sticky footer: body fills viewport, main takes the slack so the
@@ -44,7 +50,7 @@ body {main { flex: 1 0 auto; }a { color: var(--accent-2); color: var(--green); text-decoration: none; &:hover { text-decoration: underline; }
@@ -63,26 +69,9 @@ code, pre, .sha, .clone-box input {// --- topbar ---.topbar { position: relative; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); border-bottom: 1px solid var(--border); padding: 1.15rem 0; // The outer accent stripe is a horizontal cross-section of the brand // mark: red core, sap-gold middle ring, green outer ring. // Reads as a tree-ring slice across the top of every page. &::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient( 90deg, var(--accent) 0%, var(--accent-2) 50%, var(--green) 100% ); opacity: 0.75; } background: #090806; border-bottom: 1px solid rgba(107, 158, 120, 0.06); padding: 0.85rem 0; &__row { display: flex;
@@ -105,35 +94,34 @@ code, pre, .sha, .clone-box input {.brand { display: inline-flex; align-items: center; gap: 0.7rem; gap: 0.6rem; color: var(--text); font-family: var(--mono); font-weight: 600; font-size: 1.15rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; &:hover { text-decoration: none; color: var(--accent-2); color: var(--text); .brand-mark { transform: translateY(-1px); } }}.brand-mark { width: 32px; height: 32px; // Each ring gets a slow color tween so hovering the brand feels like the // wood warming under a thumb. Strokes shift one step inward toward red. circle { transition: stroke 350ms ease, fill 350ms ease; }} display: inline-flex; width: 22px; height: 22px; color: var(--accent); transition: transform 250ms ease;.brand:hover .brand-mark { .brand-mark__r1 { stroke: var(--accent-2); } .brand-mark__r2 { stroke: var(--accent-2); } .brand-mark__r3 { stroke: var(--accent); } .brand-mark__core { fill: var(--accent-2); } svg { width: 100%; height: 100%; display: block; }}.brand-text { letter-spacing: 0.03em; }.brand-text { color: var(--text); }.tagline { color: var(--text-mute);
@@ -180,7 +168,7 @@ code, pre, .sha, .clone-box input { .topnav__dot { background: var(--accent); box-shadow: 0 0 0 2px rgba(184, 84, 58, 0.15); box-shadow: 0 0 0 2px rgba(107, 158, 120, 0.15); } } }
@@ -270,7 +258,7 @@ main { padding: 3rem 0 4rem; } font-family: var(--mono); font-weight: 600; font-size: 1.1rem; color: var(--accent-2); color: var(--green); } &__age {
@@ -292,7 +280,7 @@ main { padding: 3rem 0 4rem; } &__last-sha { font-family: var(--mono); color: var(--accent); color: var(--accent-2); margin-right: 0.4rem; }}
@@ -369,7 +357,7 @@ main { padding: 3rem 0 4rem; } a { color: var(--text-mute); &:hover { color: var(--accent-2); text-decoration: none; } &:hover { color: var(--green); text-decoration: none; } }}
@@ -413,7 +401,7 @@ main { padding: 3rem 0 4rem; } } .sha { color: var(--accent); color: var(--accent-2); margin-right: 0.4rem; }
@@ -476,7 +464,7 @@ main { padding: 3rem 0 4rem; } padding: 0.75rem 0; border-bottom: 1px solid var(--border); .sha { color: var(--accent); flex-shrink: 0; } .sha { color: var(--accent-2); flex-shrink: 0; } .summary { margin: 0; } .meta { margin: 0; color: var(--text-mute); font-size: 0.85rem; }}
@@ -546,7 +534,7 @@ main { padding: 3rem 0 4rem; } font-size: 1.35rem; margin: 0 0 0.5rem; } .sha { color: var(--accent); } .sha { color: var(--accent-2); } .meta { color: var(--text-mute); margin: 0 0 1rem; }}
@@ -585,10 +573,10 @@ main { padding: 3rem 0 4rem; } border-radius: 3px; letter-spacing: 0.05em; &--added { background: rgba(149, 200, 149, 0.15); color: var(--add-fg); } &--deleted { background: rgba(208, 133, 133, 0.15); color: var(--del-fg); } &--added { background: rgba(125, 184, 140, 0.15); color: var(--add-fg); } &--deleted { background: rgba(196, 112, 85, 0.15); color: var(--del-fg); } &--modified { background: var(--surface-2); color: var(--text-mute); } &--renamed { background: rgba(196, 165, 116, 0.15); color: var(--accent-2); } &--renamed { background: rgba(201, 168, 76, 0.15); color: var(--accent-2); }}.hunk {
@@ -605,7 +593,7 @@ main { padding: 3rem 0 4rem; } display: block; padding: 0.15rem 0.75rem; color: var(--hunk-fg); background: rgba(138, 169, 196, 0.08); background: rgba(158, 197, 210, 0.08);}.line {
@@ -626,12 +614,10 @@ main { padding: 3rem 0 4rem; }// --- footer ---.footer { position: relative; margin-top: 4rem; padding: 3.5rem 0 3rem; border-top: 1px solid var(--border); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); overflow: hidden; padding: 4rem 0 3rem; border-top: 1px solid rgba(107, 158, 120, 0.06); background: #090806; &__grid { display: grid;
@@ -698,28 +684,14 @@ main { padding: 3rem 0 4rem; } } } // Tree-rings flourish, echoing the brand mark. Anchored bottom-right, // bled off the edge so only an arc is visible. `currentColor` so the // hue follows the footer text color and the opacity below sets it. &-rings { position: absolute; right: -120px; bottom: -120px; width: 460px; height: 460px; color: var(--accent); opacity: 0.07; pointer-events: none; z-index: 0; }}// Slim copyright bar, like blog/status/analytics..footer-bar { background: var(--code-bg); border-top: 1px solid var(--border); padding: 0.9rem 0; color: var(--text-mute); background: #050403; border-top: 1px solid rgba(107, 158, 120, 0.04); padding: 0.8rem 0; color: rgba(221, 215, 205, 0.3); font-size: 0.78rem; &__row {