SPB Git forge
spboucher.ai ↗

spb/spbgit

Public MIT ★ Pinned

SPB Git — the platform hosting itself

forgefastifyself-hosted
15commits 1branches 1releases
833.0 KBsize
maindefault branch
17 days agolast push
JavaScript 67.4% CSS 16.7% Nunjucks 13.7% Shell 2.3%

feat: design v4 'Monolith' — cinematic hero, display type, sparklines, ⌘K commands, README TOC

- tokens.css v4: obsidian canvas, translucent borders, glass surfaces, ember accent
  family for activity/heat, Bricolage Grotesque + Instrument Serif self-hosted,
  cross-document view transitions
- app.css v4: mesh + grid + grain background stack, glass nav with ⌘K trigger,
  hero grid (display name, serif tagline, constellation canvas, typewriter
  terminal, 5 stat tiles), bento pinned grid, 2-column repo grid with
  sparklines, sticky sidebar (activity, Stack ring, CLI), heatmap card with
  streaks, repo header stat tiles, day-grouped commit timeline, diff bar +
  file jump list, releases 'latest', 4-column footer; overflow: clip on cards
  with sticky headers
- app.js v4: ⌘K palette with commands/search, '/' opens palette, count-up,
  scroll reveal, spotlight on .spot, hero canvas (visibility-aware),
  terminal typewriter, README TOC with scroll spy, blob wrap toggle
- overview.mjs: 26-week sparkline (Catmull-Rom path) per repo, languageStack
  (equal weight per repo); activity.mjs: streaks(); routes.mjs: assetVersion
  cache-busting, groupByDay, stack + terminal data
- fetch-fonts.mjs: Bricolage Grotesque 700/800, Instrument Serif italic
- version 1.1.0, CLAUDE.md §4.1 rewritten for v4

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Simon-Pierre Boucher committed 17 days ago (Sep 8, 2026) parent 2c84d42

24 changed files +1,540 −901

modified CLAUDE.md +9 −7
@@ -177,14 +177,16 @@ On every push, the hook POSTs to `http://127.0.0.1:7420/internal/hooks/post-rece
177 177
178 178 ### 4.1 Design system
179 179
180 −- **Aesthetic:** modern developer-forge. Dark theme by default, light theme toggle (persisted in `localStorage`, respects `prefers-color-scheme` on first visit).
181 −- **Design tokens** (CSS custom properties in `assets/css/tokens.css`):
182 − - Dark: background `#0b0e14`, surface `#11151c`, border `#1f2530`, text `#e6e9ef`, muted `#8b93a3`, accent `#4f8cff`, accent-2 `#22d3aa`, danger `#ff5d5d`.
183 − - Radius `10px`, subtle 1px borders, no heavy shadows; hover states elevate with border-color shifts, not box-shadows.
184 −- **Typography:** `Inter` (UI) + `JetBrains Mono` (code), self-hosted woff2 in `assets/fonts/` — no third-party font CDNs.
185 −- **Layout:** max-width `1200px`, sticky top nav: logo "**SPB Git**" (monogram SVG), global search input (`/` focuses it), theme toggle, link to `spboucher.ai`.
180 +- **Aesthetic (v4 "Monolith", 2026-09-08):** cinematic developer-forge. Obsidian canvas with a drifting gradient mesh + faint grid + film grain (`.bg` stack), glass surfaces (`--surface-grad` + `backdrop-filter`), electric accents (indigo `#86a4ff`, cyan `#46d6ff`, mint `#3ff0bd`, violet `#c996ff`) and an **ember** counterpoint (`#ff8a3d → #ffc857`) reserved for activity/heat (streaks, heatmap top level, latest release). Dark by default, light theme toggle (persisted in `localStorage`, respects `prefers-color-scheme` on first visit). Design history: v1 flat → v2 gradients → v3 "Nightforge" aurora → v4 "Monolith".
181 +- **Design tokens** (CSS custom properties in `assets/css/tokens.css`): `--bg #04060b`, `--surface #0b0f18`, translucent `--border`, `--text #e6e9f2`, `--muted #8f97ad`, `--accent`, `--accent-2`, `--accent-3`, `--cyan`, `--ember`, `--ember-2`, gradients (`--gradient-brand/hot/ember/text`), heat scale `--heat-0…4` (cold → ember), radii `8/12/18/26px`, depth `--shadow-1/2/card/pop`, `--ring`, `--glass`, `--nav-bg`.
182 +- **Typography:** `Inter` (UI) + `JetBrains Mono` (code) + **`Bricolage Grotesque` 700/800** (display: hero name, section titles, stat numerals, repo titles) + **`Instrument Serif` italic** (accent: hero tagline, error message). All self-hosted woff2 in `assets/fonts/` via `scripts/fetch-fonts.mjs` — no third-party font CDNs. Bricolage 800 woff also feeds satori for OG cards.
183 +- **Motion:** cross-document view transitions (`@view-transition { navigation: auto }`), scroll reveal (`.reveal` + IntersectionObserver), count-up numerals (`[data-count]`), mouse spotlight on any `.spot` card, hero constellation canvas (`#hero-canvas`, drifting git-graph nodes, paused when hidden) and terminal typewriter (`#hero-terminal`). Everything honours `prefers-reduced-motion`.
184 +- **Layout:** max-width `1240px`, sticky glass top nav: monogram + "**SPB Git**" wordmark + `forge` tag, primary links (Repositories · Activity · API), a search trigger that opens the **⌘K palette** (`/` or `⌘K` anywhere; repos + commands + "Search …"), theme toggle, link to `spboucher.ai`.
185 +- **Data widgets:** every repo card carries a 26-week commit **sparkline** (`overview.spark`, computed server-side in `lib/overview.mjs`, cached per repo); the home hero shows 5 stat tiles (repos, commits, languages, commits/52 weeks, day streak); the sidebar has a live activity feed and a **Stack ring** (`languageStack`, equal weight per repo); the heatmap card reports streak / longest streak / active days / busiest day (`stats/activity.mjs → streaks()`); commit history is grouped by day (`routes.mjs → groupByDay`); README pages get a sticky **table of contents** rail (client-side, ≥3 headings, ≥1100px).
186 +- **Assets are cache-busted** with `?v={{ assetVersion }}` (package.json version) — bump the version on every design release.
187 +- ⚠️ Cards with sticky headers (`.blob-card`, `.diff-file`, `.readme-section`) use `overflow: clip`, never `overflow: hidden` — `hidden` turns the card into the sticky element's scrollport and pushes the header down by its `top` offset.
186 188 - Fully responsive down to 360px. Code views scroll horizontally, never break the page.
187 −- Footer on every page: `© Simon-Pierre Boucher · contact@spboucher.ai · Powered by SPB Git`.
189 +- Footer on every page: 4-column grid (about + clone snippet · Explore · Machine · Owner) and a bottom bar `© Simon-Pierre Boucher · Powered by SPB Git v<version>` with a live-status dot.
188 190
189 191 ### 4.2 Pages
190 192
modified README.md +1 −1
@@ -33,7 +33,7 @@ Self-hosted software forge · every repo public & clonable · owner-only writes
33 33 SPB Git is a complete, self-hosted GitHub-equivalent built for one person:
34 34
35 35 - **Git hosting** — Smart HTTP v2 (streamed `upload-pack`/`receive-pack`), anonymous clone/fetch, PAT-authenticated push, post-receive hooks, zip/tar.gz snapshots.
36 −- **Showcase web UI** — SSR (Nunjucks), dark/light themes, pinned repos, activity feed, contribution heatmap, GitHub-grade README rendering (badges, mermaid, task lists, relative images), shiki-highlighted file browsing with line anchors, commits, diffs, blame, branches, tags, global search, OG cards, Atom feed, sitemap.
36 +- **Showcase web UI** (design v4 « Monolith » : mesh + grid background, display typography Bricolage Grotesque / Instrument Serif, sparklines per repo, stat tiles, Stack ring, streaks, ⌘K commands, README table of contents, view transitions) — SSR (Nunjucks), dark/light themes, pinned repos, activity feed, contribution heatmap, GitHub-grade README rendering (badges, mermaid, task lists, relative images), shiki-highlighted file browsing with line anchors, commits, diffs, blame, branches, tags, global search, OG cards, Atom feed, sitemap.
37 37 - **`spbgit` CLI** — the terminal command center: `init`, `token`, `list`, `create --push`, `clone --all`, `status`, `commit`, `push`, `pull`, `sync`, `open`, `info`, `rm`, `doctor`, `release`.
38 38 - **Releases** — GitHub-style binary assets (dmg, pkg, zip…) attached to tags, streamed to disk with sha256 sidecars, public downloads at `/releases/<repo>/<tag>/<file>`:
39 39 ```bash
modified eslint.config.mjs +2 −0
@@ -68,6 +68,8 @@ export default [
68 68 location: 'readonly',
69 69 matchMedia: 'readonly',
70 70 requestAnimationFrame: 'readonly',
71 + IntersectionObserver: 'readonly',
72 + Intl: 'readonly',
71 73 history: 'readonly',
72 74 CustomEvent: 'readonly',
73 75 fetch: 'readonly',
modified package.json +1 −1
@@ -1,6 +1,6 @@
1 1 {
2 2 "name": "spbgit",
3 − "version": "1.0.0",
3 + "version": "1.1.0",
4 4 "description": "SPB Git — Personal Git Platform for Simon-Pierre Boucher",
5 5 "author": "Simon-Pierre Boucher <contact@spboucher.ai>",
6 6 "license": "MIT",
modified scripts/fetch-fonts.mjs +5 −1
@@ -5,7 +5,7 @@
5 5 * Author : Simon-Pierre Boucher
6 6 * Contact : contact@spboucher.ai
7 7 * File : scripts/fetch-fonts.mjs
8 − * Purpose : Download self-hosted Inter / JetBrains Mono fonts (web + OG rendering)
8 + * Purpose : Download self-hosted fonts — Inter, JetBrains Mono, Bricolage Grotesque, Instrument Serif (web + OG)
9 9 * License : MIT © Simon-Pierre Boucher
10 10 * ─────────────────────────────────────────────
11 11 */
@@ -26,7 +26,11 @@ const FONTS = [
26 26 ['https://cdn.jsdelivr.net/npm/@fontsource/inter@5.1.0/files/inter-latin-700-normal.woff2', 'inter-700.woff2'],
27 27 ['https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.1.1/files/jetbrains-mono-latin-400-normal.woff2', 'jetbrains-mono-400.woff2'],
28 28 ['https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.1.1/files/jetbrains-mono-latin-600-normal.woff2', 'jetbrains-mono-600.woff2'],
29 + ['https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.1.0/files/bricolage-grotesque-latin-700-normal.woff2', 'bricolage-700.woff2'],
30 + ['https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.1.0/files/bricolage-grotesque-latin-800-normal.woff2', 'bricolage-800.woff2'],
31 + ['https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.1.0/files/instrument-serif-latin-400-italic.woff2', 'instrument-serif-italic.woff2'],
29 32 ['https://cdn.jsdelivr.net/npm/@fontsource/inter@5.1.0/files/inter-latin-400-normal.woff', 'og/inter-400.woff'],
33 + ['https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.1.0/files/bricolage-grotesque-latin-800-normal.woff', 'og/bricolage-800.woff'],
30 34 ['https://cdn.jsdelivr.net/npm/@fontsource/inter@5.1.0/files/inter-latin-700-normal.woff', 'og/inter-700.woff'],
31 35 ['https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.1.1/files/jetbrains-mono-latin-400-normal.woff', 'og/jetbrains-mono-400.woff'],
32 36 ];
modified src/lib/overview.mjs +86 −2
@@ -5,7 +5,7 @@
5 5 * Author : Simon-Pierre Boucher
6 6 * Contact : contact@spboucher.ai
7 7 * File : src/lib/overview.mjs
8 − * Purpose : Aggregated per-repo overview (meta + git facts), cached
8 + * Purpose : Aggregated per-repo overview (meta + git facts + 26-week sparkline), cached
9 9 * License : MIT © Simon-Pierre Boucher
10 10 * ─────────────────────────────────────────────
11 11 */
@@ -15,6 +15,11 @@ import { join } from 'node:path';
15 15 import { computeLanguages } from '../stats/languages.mjs';
16 16 import { mapLimit } from './util.mjs';
17 17
18 +const SPARK_WEEKS = 26;
19 +const SPARK_W = 120;
20 +const SPARK_H = 34;
21 +const WEEK_S = 7 * 86400;
22 +
18 23 /** @returns {Record<string, number>} clone counts by repo */
19 24 function cloneCounts(ctx) {
20 25 const path = join(ctx.config.dataDir, 'clones.json');
@@ -26,6 +31,45 @@ function cloneCounts(ctx) {
26 31 return {};
27 32 }
28 33
34 +/**
35 + * Weekly commit sparkline for the last N weeks, as ready-to-render SVG path data
36 + * (Catmull-Rom smoothed) in a `SPARK_W × SPARK_H` box.
37 + * @param {number[]} timestamps unix seconds
38 + * @param {number} [now] unix seconds (test injection)
39 + * @returns {{counts: number[], max: number, total: number, path: string, area: string, lastX: number, lastY: number}}
40 + */
41 +export function sparkline(timestamps, now = Math.floor(Date.now() / 1000)) {
42 + const counts = new Array(SPARK_WEEKS).fill(0);
43 + for (const ts of timestamps) {
44 + const age = Math.floor((now - ts) / WEEK_S);
45 + if (age >= 0 && age < SPARK_WEEKS) counts[SPARK_WEEKS - 1 - age] += 1;
46 + }
47 + const max = Math.max(1, ...counts);
48 + const total = counts.reduce((a, b) => a + b, 0);
49 + const pad = 3;
50 + const step = (SPARK_W - 2 * pad) / (SPARK_WEEKS - 1);
51 + const pts = counts.map((c, i) => [
52 + Number((pad + i * step).toFixed(1)),
53 + Number((SPARK_H - pad - (c / max) * (SPARK_H - 2 * pad)).toFixed(1)),
54 + ]);
55 + // Catmull-Rom → cubic Bézier for a soft line.
56 + let d = `M${pts[0][0]},${pts[0][1]}`;
57 + for (let i = 0; i < pts.length - 1; i += 1) {
58 + const p0 = pts[i - 1] ?? pts[i];
59 + const p1 = pts[i];
60 + const p2 = pts[i + 1];
61 + const p3 = pts[i + 2] ?? p2;
62 + const c1x = (p1[0] + (p2[0] - p0[0]) / 6).toFixed(1);
63 + const c1y = (p1[1] + (p2[1] - p0[1]) / 6).toFixed(1);
64 + const c2x = (p2[0] - (p3[0] - p1[0]) / 6).toFixed(1);
65 + const c2y = (p2[1] - (p3[1] - p1[1]) / 6).toFixed(1);
66 + d += ` C${c1x},${c1y} ${c2x},${c2y} ${p2[0]},${p2[1]}`;
67 + }
68 + const last = pts[pts.length - 1];
69 + const area = `${d} L${last[0]},${SPARK_H} L${pts[0][0]},${SPARK_H} Z`;
70 + return { counts, max, total, path: d, area, lastX: last[0], lastY: last[1] };
71 +}
72 +
29 73 /**
30 74 * Build (or read from cache) the full overview of one repository.
31 75 * @param {{config, repos, meta, cache}} ctx
@@ -34,7 +78,7 @@ function cloneCounts(ctx) {
34 78 */
35 79 export async function repoOverview(ctx, name) {
36 80 if (!ctx.repos.exists(name)) return null;
37 − const cachePath = ctx.cache.path('repos', name, '_repo', 'overview.json');
81 + const cachePath = ctx.cache.path('repos', name, '_repo', 'overview-v4.json');
38 82 const cached = ctx.cache.getJSON(cachePath);
39 83 const clones = cloneCounts(ctx)[name] ?? 0;
40 84 if (cached) return { ...cached, cloneCount: clones };
@@ -47,10 +91,12 @@ export async function repoOverview(ctx, name) {
47 91 let commitCount = 0;
48 92 let languages = { languages: [], totalBytes: 0 };
49 93 let license = null;
94 + let spark = null;
50 95 if (head) {
51 96 commitCount = await ctx.repos.commitCount(name, head);
52 97 languages = computeLanguages(await ctx.repos.allFiles(name, head));
53 98 license = await ctx.repos.license(name, head);
99 + spark = sparkline(await ctx.repos.commitTimestamps(name));
54 100 }
55 101 const overview = {
56 102 name,
@@ -72,6 +118,7 @@ export async function repoOverview(ctx, name) {
72 118 topLanguage: languages.languages[0]?.name ?? null,
73 119 license: license?.name ?? null,
74 120 licensePath: license?.path ?? null,
121 + spark,
75 122 cloneUrl: `${ctx.config.publicUrl}/${name}.git`,
76 123 url: `${ctx.config.publicUrl}/${name}`,
77 124 };
@@ -111,3 +158,40 @@ export async function siteStats(ctx) {
111 158 languageNames: [...languages].sort(),
112 159 };
113 160 }
161 +
162 +/**
163 + * Language share across every repository (for the "Stack" ring).
164 + * Each repository weighs the same — byte-weighting would let one repo with a
165 + * few generated megabytes eclipse everything else.
166 + * @param {object[]} overviews
167 + * @param {number} [top] number of named slices before "Other"
168 + * @returns {{list: Array<{name: string, color: string, percent: number}>, stops: string}}
169 + */
170 +export function languageStack(overviews, top = 7) {
171 + const bytes = new Map();
172 + const colors = new Map();
173 + for (const o of overviews) {
174 + for (const lang of o.languages ?? []) {
175 + bytes.set(lang.name, (bytes.get(lang.name) ?? 0) + lang.percent);
176 + colors.set(lang.name, lang.color);
177 + }
178 + }
179 + const total = [...bytes.values()].reduce((a, b) => a + b, 0) || 1;
180 + const sorted = [...bytes.entries()].sort((a, b) => b[1] - a[1]);
181 + const list = sorted.slice(0, top).map(([name, b]) => ({
182 + name,
183 + color: colors.get(name),
184 + percent: Math.round((b / total) * 1000) / 10,
185 + }));
186 + const rest = sorted.slice(top).reduce((a, [, b]) => a + b, 0);
187 + if (rest > 0) list.push({ name: 'Other', color: '#5a637a', percent: Math.round((rest / total) * 1000) / 10 });
188 + let acc = 0;
189 + const stops = list
190 + .map((l) => {
191 + const from = acc;
192 + acc += l.percent;
193 + return `${l.color} ${from.toFixed(1)}% ${Math.min(100, acc).toFixed(1)}%`;
194 + })
195 + .join(', ');
196 + return { list, stops };
197 +}
modified src/server.mjs +1 −1
@@ -192,7 +192,7 @@ export async function buildServer(config) {
192 192 uptimeSeconds: Math.round((Date.now() - ctx.startedAt) / 1000),
193 193 repos: ctx.repos.list().length,
194 194 cache: footprint,
195 − version: '1.0.0',
195 + version: '1.1.0',
196 196 };
197 197 });
198 198
modified src/stats/activity.mjs +41 −5
@@ -5,7 +5,7 @@
5 5 * Author : Simon-Pierre Boucher
6 6 * Contact : contact@spboucher.ai
7 7 * File : src/stats/activity.mjs
8 − * Purpose : Contribution heatmap (52 weeks) + commit calendar data
8 + * Purpose : Contribution heatmap (52 weeks), streaks + commit calendar data
9 9 * License : MIT © Simon-Pierre Boucher
10 10 * ─────────────────────────────────────────────
11 11 */
@@ -77,7 +77,36 @@ export function buildCalendar(dayCounts, today = new Date()) {
77 77 }
78 78 // Drop a leading month label crammed against the second one.
79 79 if (months.length >= 2 && months[1].index - months[0].index < 3) months.shift();
80 − return { weeks, months, total, max };
80 + return { weeks, months, total, max, ...streaks(weeks) };
81 +}
82 +
83 +/**
84 + * Streak statistics over the calendar grid.
85 + * Current streak tolerates an empty "today" (the day is not over yet).
86 + * @param {Array<Array<{date: string, count: number}|null>>} weeks
87 + * @returns {{streak: number, longest: number, activeDays: number, busiest: {date: string, count: number}|null}}
88 + */
89 +export function streaks(weeks) {
90 + const days = weeks.flat().filter(Boolean);
91 + let longest = 0;
92 + let run = 0;
93 + let activeDays = 0;
94 + let busiest = null;
95 + for (const day of days) {
96 + if (day.count > 0) {
97 + run += 1;
98 + activeDays += 1;
99 + if (run > longest) longest = run;
100 + if (!busiest || day.count > busiest.count) busiest = { date: day.date, count: day.count };
101 + } else {
102 + run = 0;
103 + }
104 + }
105 + let streak = 0;
106 + let i = days.length - 1;
107 + if (i >= 0 && days[i].count === 0) i -= 1; // today may still be empty
108 + for (; i >= 0 && days[i].count > 0; i -= 1) streak += 1;
109 + return { streak, longest, activeDays, busiest };
81 110 }
82 111
83 112 /**
@@ -130,10 +159,10 @@ export function calendarSvg(calendar) {
130 159 * Aggregate commit timestamps across every repo, then build calendar + SVG.
131 160 * Cached globally, refreshed on push.
132 161 * @param {{repos: object, cache: object}} ctx
133 − * @returns {Promise<{svg: string, total: number}>}
162 + * @returns {Promise<{svg: string, total: number, streak: number, longest: number, activeDays: number, busiest: object|null}>}
134 163 */
135 164 export async function contributionCalendar(ctx) {
136 − const cachePath = ctx.cache.path('global', 'heatmap.json');
165 + const cachePath = ctx.cache.path('global', 'heatmap-v4.json');
137 166 const cached = ctx.cache.getJSON(cachePath);
138 167 if (cached) return cached;
139 168 const all = [];
@@ -142,7 +171,14 @@ export async function contributionCalendar(ctx) {
142 171 all.push(...stamps);
143 172 }
144 173 const calendar = buildCalendar(bucketByDay(all));
145 − const result = { svg: calendarSvg(calendar), total: calendar.total };
174 + const result = {
175 + svg: calendarSvg(calendar),
176 + total: calendar.total,
177 + streak: calendar.streak,
178 + longest: calendar.longest,
179 + activeDays: calendar.activeDays,
180 + busiest: calendar.busiest,
181 + };
146 182 ctx.cache.setJSON(cachePath, result);
147 183 return result;
148 184 }
modified src/web/assets/css/app.css +517 −493
@@ -5,14 +5,14 @@
5 5 * Author : Simon-Pierre Boucher
6 6 * Contact : contact@spboucher.ai
7 7 * File : src/web/assets/css/app.css
8 − * Purpose : Application styles v3 "Nightforge" — aurora, spotlight, ⌘K, every page
8 + * Purpose : Application styles v4 "Monolith" — cinematic hero, bento, sparklines, every page
9 9 * License : MIT © Simon-Pierre Boucher
10 10 * ─────────────────────────────────────────────
11 11 */
12 12
13 13 *, *::before, *::after { box-sizing: border-box; }
14 14
15 −html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
15 +html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; scroll-behavior: smooth; }
16 16
17 17 body {
18 18 margin: 0;
@@ -26,161 +26,180 @@ body {
26 26 flex-direction: column;
27 27 font-feature-settings: 'cv02', 'cv03', 'ss01';
28 28 position: relative;
29 + overflow-x: clip;
29 30 }
30 31
31 −/* ── Aurora canvas ───────────────────────── */
32 −.aurora {
33 − position: fixed; inset: 0; z-index: -2; overflow: hidden;
34 − pointer-events: none;
35 −}
36 −.aurora::before {
37 − content: ''; position: absolute; inset: -20%;
32 +/* ── Background stack: mesh + grid + grain ─── */
33 +.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
34 +.bg-mesh {
35 + position: absolute; inset: -25%;
38 36 background:
39 − radial-gradient(42% 34% at 18% 8%, var(--bg-glow-1), transparent 70%),
40 − radial-gradient(36% 30% at 82% 4%, var(--bg-glow-2), transparent 70%),
41 − radial-gradient(30% 26% at 62% 18%, var(--bg-glow-3), transparent 72%),
42 − radial-gradient(34% 30% at 38% 2%, var(--bg-glow-4), transparent 70%);
43 − animation: aurora-drift 26s ease-in-out infinite alternate;
44 −}
45 −@keyframes aurora-drift {
46 − from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
47 − 50% { transform: translate3d(1.5%, 1%, 0) scale(1.06); }
48 − to { transform: translate3d(3%, -1%, 0) scale(1.02); }
49 −}
50 −/* film grain — keeps the gradients from banding, adds texture */
51 −.aurora::after {
52 − content: ''; position: absolute; inset: 0; opacity: 0.05;
53 − background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
54 −}
55 −html[data-theme='light'] .aurora::after { opacity: 0.035; }
37 + radial-gradient(38% 30% at 16% 10%, var(--mesh-1), transparent 70%),
38 + radial-gradient(30% 26% at 84% 6%, var(--mesh-2), transparent 70%),
39 + radial-gradient(26% 24% at 60% 22%, var(--mesh-3), transparent 72%),
40 + radial-gradient(32% 28% at 40% 0%, var(--mesh-4), transparent 70%),
41 + radial-gradient(22% 18% at 92% 40%, var(--mesh-5), transparent 70%);
42 + animation: mesh-drift 32s ease-in-out infinite alternate;
43 + will-change: transform;
44 +}
45 +@keyframes mesh-drift {
46 + from { transform: translate3d(-2%, -1%, 0) scale(1); }
47 + 50% { transform: translate3d(1.5%, 1.5%, 0) scale(1.05); }
48 + to { transform: translate3d(3%, -1.5%, 0) scale(1.02); }
49 +}
50 +.bg-grid {
51 + position: absolute; inset: 0;
52 + background-image:
53 + linear-gradient(var(--grid-line) 1px, transparent 1px),
54 + linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
55 + background-size: 56px 56px;
56 + mask: radial-gradient(70% 55% at 50% 0%, black, transparent 100%);
57 + -webkit-mask: radial-gradient(70% 55% at 50% 0%, black, transparent 100%);
58 +}
59 +.bg-noise {
60 + position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
61 + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
62 +}
63 +html[data-theme='light'] .bg-noise { opacity: 0.04; }
56 64
57 65 a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
58 −a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
66 +a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
59 67 code, pre, kbd { font-family: var(--font-mono); }
60 68 button { font-family: inherit; }
61 69 ::selection { background: var(--accent-soft); }
62 −
63 70 :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
64 71
65 −/* custom scrollbars */
66 72 * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
67 73 *::-webkit-scrollbar { width: 10px; height: 10px; }
68 74 *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
69 −*::-webkit-scrollbar-thumb:hover { background: var(--faint); border: 2px solid transparent; background-clip: padding-box; }
70 75 *::-webkit-scrollbar-track { background: transparent; }
71 76
72 −.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }
73 −main.container { flex: 1; padding-top: 30px; padding-bottom: 60px; }
77 +.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; }
78 +main.container { flex: 1; padding-top: 28px; padding-bottom: 72px; }
74 79
75 −.sr-only, .skip-link {
76 − position: absolute; width: 1px; height: 1px; overflow: hidden;
77 − clip: rect(0 0 0 0); white-space: nowrap;
78 −}
80 +.sr-only, .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
79 81 .skip-link:focus {
80 82 position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
81 83 background: var(--surface); border: 1px solid var(--accent); padding: 8px 12px;
82 84 border-radius: var(--radius); z-index: 100;
83 85 }
84 86 .muted { color: var(--muted); }
87 +.mono { font-family: var(--font-mono); }
88 +.display { font-family: var(--font-display); letter-spacing: -0.02em; }
85 89
86 −/* ── Card primitive (shared look) ────────── */
90 +/* ── Card primitive ──────────────────────── */
91 +.card,
87 92 .repo-card, .release-card, .search-results li, .commit-list, .file-table,
88 93 .readme-section, .blob-card, .ref-table, .commit-detail-header, .diff-file,
89 −.badge-stat, .clone-box, .error-art {
94 +.stat, .clone-box, .error-art, .side-card, .hero-terminal, .rstat, .empty-state {
95 + position: relative;
90 96 background: var(--surface-grad);
91 97 border: 1px solid var(--border);
92 98 box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-1);
99 + backdrop-filter: blur(14px);
100 + -webkit-backdrop-filter: blur(14px);
93 101 }
102 +/* mouse spotlight — --mx/--my set by app.js on any .spot */
103 +.spot::after {
104 + content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
105 + background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -60%), var(--accent-soft), transparent 62%);
106 + opacity: 0; transition: opacity 0.3s ease;
107 +}
108 +.spot:hover::after { opacity: 1; }
94 109
95 110 /* ── Top nav ─────────────────────────────── */
96 111 .topnav {
97 112 position: sticky; top: 0; z-index: 50;
98 113 background: var(--nav-bg);
99 − backdrop-filter: blur(18px) saturate(1.6);
100 − -webkit-backdrop-filter: blur(18px) saturate(1.6);
114 + backdrop-filter: blur(22px) saturate(1.7);
115 + -webkit-backdrop-filter: blur(22px) saturate(1.7);
101 116 border-bottom: 1px solid var(--border);
102 117 }
103 118 .topnav::after {
104 119 content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
105 − background: var(--gradient-hot); opacity: 0.35;
106 − mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
107 − -webkit-mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
108 −}
109 −.topnav-inner { display: flex; align-items: center; gap: 16px; height: 60px; }
110 −.brand {
111 − display: flex; align-items: center; gap: 10px;
112 − color: var(--text-bright); font-weight: 700; letter-spacing: -0.01em;
120 + background: var(--gradient-hot); opacity: 0.45;
121 + mask: linear-gradient(90deg, transparent, black 25%, black 75%, transparent);
122 + -webkit-mask: linear-gradient(90deg, transparent, black 25%, black 75%, transparent);
113 123 }
124 +.topnav-inner { display: flex; align-items: center; gap: 18px; height: 64px; }
125 +.brand { display: flex; align-items: center; gap: 11px; color: var(--text-bright); }
114 126 .brand:hover { text-decoration: none; color: var(--text-bright); }
115 −.brand-mark { flex: none; filter: drop-shadow(0 2px 10px var(--accent-glow)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
116 −.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.1); }
117 −.global-search { flex: 1; max-width: 440px; position: relative; }
118 −.global-search input, .repo-filters input, .search-page-form input {
119 − width: 100%; background: var(--surface); color: var(--text);
120 − border: 1px solid var(--border); border-radius: var(--radius);
121 − padding: 8px 13px; font-size: 14px; outline: none;
122 − transition: border-color 0.15s ease, box-shadow 0.15s ease;
127 +.brand-mark { flex: none; filter: drop-shadow(0 2px 12px var(--accent-glow)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
128 +.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.1); }
129 +.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
130 +.brand-tag {
131 + font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
132 + color: var(--accent-2); border: 1px solid var(--accent-2-soft); background: var(--accent-2-soft);
133 + border-radius: 999px; padding: 2px 8px; margin-left: 2px;
134 +}
135 +.topnav-primary { display: flex; gap: 4px; margin-left: 8px; }
136 +.topnav-primary a {
137 + color: var(--muted); font-size: 14px; font-weight: 500; padding: 7px 11px; border-radius: 9px;
138 + transition: color 0.15s ease, background 0.15s ease;
123 139 }
124 −.global-search input { padding-right: 74px; }
125 −.global-search input:focus, .repo-filters input:focus, .search-page-form input:focus {
126 − border-color: var(--accent); box-shadow: var(--ring);
127 −}
128 −.kbd-hint {
129 − position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
130 − display: inline-flex; align-items: center; gap: 3px;
131 − background: var(--surface-2); border: 1px solid var(--border);
132 − border-radius: 7px; padding: 2px 7px; cursor: pointer;
133 − color: var(--muted); font-family: var(--font-mono); font-size: 11px;
134 − transition: border-color 0.15s ease, color 0.15s ease;
135 −}
136 −.kbd-hint:hover { border-color: var(--accent); color: var(--accent); }
137 −.topnav-links { margin-left: auto; display: flex; align-items: center; gap: 12px; }
138 −.topnav-ext { color: var(--muted); font-size: 14px; font-weight: 500; }
140 +.topnav-primary a:hover { color: var(--text-bright); background: var(--surface-2); text-decoration: none; }
141 +.search-trigger {
142 + margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
143 + background: var(--surface); color: var(--muted); border: 1px solid var(--border);
144 + border-radius: 11px; padding: 8px 10px 8px 12px; font-size: 14px; cursor: pointer; width: 280px;
145 + box-shadow: inset 0 1px 0 var(--edge-light);
146 + transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
147 +}
148 +.search-trigger:hover { border-color: var(--border-strong); color: var(--text); box-shadow: inset 0 1px 0 var(--edge-light), 0 0 22px -8px var(--accent-glow); }
149 +.search-trigger svg { flex: none; }
150 +.search-trigger span { flex: 1; text-align: left; }
151 +.search-trigger kbd, .kbd {
152 + font-family: var(--font-mono); font-size: 11px; color: var(--muted);
153 + background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px;
154 +}
155 +.topnav-links { display: flex; align-items: center; gap: 10px; }
156 +.topnav-ext { color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
139 157 .topnav-ext:hover { color: var(--text); text-decoration: none; }
140 158 .icon-btn {
141 159 background: var(--surface); color: var(--muted); border: 1px solid var(--border);
142 − border-radius: var(--radius); padding: 8px 10px; cursor: pointer; line-height: 0;
160 + border-radius: 11px; padding: 9px 10px; cursor: pointer; line-height: 0;
143 161 transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
144 162 }
145 −.icon-btn:hover { border-color: var(--border-strong); color: var(--text); box-shadow: 0 0 16px -6px var(--accent-glow); }
146 −.icon-btn:active { transform: scale(0.92) rotate(-12deg); }
163 +.icon-btn:hover { border-color: var(--border-strong); color: var(--text); box-shadow: 0 0 18px -6px var(--accent-glow); }
164 +.icon-btn:active { transform: scale(0.92) rotate(-14deg); }
147 165 html[data-theme='dark'] .icon-moon { display: none; }
148 166 html[data-theme='light'] .icon-sun { display: none; }
149 167
150 168 /* ── Buttons & chips ─────────────────────── */
151 169 .btn {
152 − display: inline-flex; align-items: center; gap: 6px;
170 + display: inline-flex; align-items: center; gap: 7px;
153 171 background: var(--surface); color: var(--text);
154 − border: 1px solid var(--border); border-radius: var(--radius);
155 − padding: 6px 14px; font-size: 14px; font-weight: 500; cursor: pointer;
172 + border: 1px solid var(--border); border-radius: 11px;
173 + padding: 8px 15px; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1.3;
156 174 box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-1);
157 − transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
175 + transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
176 + white-space: nowrap;
158 177 }
159 178 .btn:hover {
160 179 border-color: var(--border-strong); background: var(--surface-2);
161 − text-decoration: none; color: var(--text); transform: translateY(-1px);
162 − box-shadow: inset 0 1px 0 var(--edge-light), 0 6px 20px -8px var(--accent-glow);
180 + text-decoration: none; color: var(--text-bright); transform: translateY(-1px);
181 + box-shadow: inset 0 1px 0 var(--edge-light), 0 8px 24px -10px var(--accent-glow);
163 182 }
164 183 .btn:active { transform: translateY(0) scale(0.98); }
165 184 .btn-primary {
166 − position: relative; overflow: hidden;
167 − background: var(--gradient-brand); border-color: transparent; color: #fff;
168 − box-shadow: 0 4px 18px -4px var(--accent-glow);
185 + position: relative; overflow: hidden; isolation: isolate;
186 + background: var(--gradient-brand); border-color: transparent; color: #fff; font-weight: 600;
187 + box-shadow: 0 6px 22px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
169 188 }
170 189 .btn-primary::before {
171 − content: ''; position: absolute; inset: 0;
172 − background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
173 − transform: translateX(-120%);
174 − transition: transform 0.55s ease;
190 + content: ''; position: absolute; inset: 0; z-index: -1;
191 + background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
192 + transform: translateX(-130%); transition: transform 0.6s ease;
175 193 }
176 −.btn-primary:hover { background: var(--gradient-brand); color: #fff; filter: brightness(1.06); }
177 −.btn-primary:hover::before { transform: translateX(120%); }
178 −.btn-sm { padding: 4px 11px; font-size: 13px; }
179 −.copy-btn.copied { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 16px -6px var(--accent-2); }
194 +.btn-primary:hover { background: var(--gradient-brand); color: #fff; filter: brightness(1.07); }
195 +.btn-primary:hover::before { transform: translateX(130%); }
196 +.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
197 +.btn-sm { padding: 5px 11px; font-size: 13px; border-radius: 9px; }
198 +.copy-btn.copied { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 18px -6px var(--accent-2); }
180 199
181 200 .chip {
182 − display: inline-flex; align-items: center;
183 − border-radius: 999px; padding: 2px 11px; font-size: 12px; font-weight: 500;
201 + display: inline-flex; align-items: center; gap: 5px;
202 + border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 500; line-height: 1.4;
184 203 background: var(--chip-bg); color: var(--accent); border: 1px solid transparent;
185 204 transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
186 205 }
@@ -188,171 +207,211 @@ html[data-theme='light'] .icon-sun { display: none; }
188 207 .chip-public { color: var(--muted); background: transparent; border-color: var(--border-strong); }
189 208 .chip-license { color: var(--accent-2); background: var(--accent-2-soft); }
190 209 .chip-default { color: var(--accent-2); background: var(--accent-2-soft); }
191 −.chip-pin { color: var(--warning); background: transparent; }
192 210 .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
193 211 .count {
194 − background: var(--surface-2); border-radius: 999px; padding: 0 8px;
195 − font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
212 + background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px;
213 + font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.6;
196 214 }
197 215
216 +/* ── Section scaffolding ─────────────────── */
217 +.section { margin-bottom: 52px; }
218 +.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
219 +.section-title {
220 + font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.025em;
221 + margin: 0; display: flex; align-items: center; gap: 12px; color: var(--text-bright); line-height: 1.1;
222 +}
223 +.section-title .count { font-family: var(--font-mono); font-size: 12px; }
224 +.section-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
225 +.eyebrow {
226 + display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
227 + font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
228 +}
229 +.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px 2px var(--accent-2); animation: pulse-dot 2.4s ease infinite; }
230 +
198 231 /* ── Hero ────────────────────────────────── */
199 232 .hero {
200 − position: relative;
201 − display: flex; align-items: center; justify-content: space-between;
202 − flex-wrap: wrap; gap: 24px; padding: 52px 0 38px;
203 − border-bottom: 1px solid var(--border); margin-bottom: 32px;
204 −}
205 −.hero::after {
206 − content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
207 − background: var(--gradient-hot); opacity: 0.65;
208 − mask: linear-gradient(90deg, black, transparent 75%);
209 − -webkit-mask: linear-gradient(90deg, black, transparent 75%);
233 + position: relative; margin: 8px 0 60px; padding: 56px 0 0;
234 + isolation: isolate;
210 235 }
211 −.hero-id { display: flex; align-items: center; gap: 22px; }
212 −.hero-avatar {
213 − position: relative;
214 − width: 84px; height: 84px; border-radius: 24px;
215 − background: var(--gradient-hot); background-size: 200% 200%;
216 − animation: gradient-pan 9s ease infinite;
217 − color: #fff; font-weight: 700; font-size: 25px; letter-spacing: 0.02em;
218 − display: flex; align-items: center; justify-content: center; flex: none;
219 − box-shadow: 0 14px 44px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
220 −}
221 −.hero-avatar::before {
222 − content: ''; position: absolute; inset: -5px; border-radius: 28px; z-index: -1;
223 − background: conic-gradient(from var(--ring-angle, 0deg), var(--accent), var(--accent-3), var(--accent-2), var(--accent));
224 − opacity: 0.55; filter: blur(6px);
225 − animation: ring-spin 7s linear infinite;
226 −}
227 −@property --ring-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
228 −@keyframes ring-spin { to { --ring-angle: 360deg; } }
229 −@keyframes gradient-pan {
230 − 0%, 100% { background-position: 0% 50%; }
231 − 50% { background-position: 100% 50%; }
236 +.hero-canvas {
237 + position: absolute; inset: -40px -24px 0; z-index: -1; width: calc(100% + 48px); height: calc(100% + 40px);
238 + pointer-events: none; opacity: 0.9;
239 + mask: radial-gradient(80% 90% at 60% 30%, black 40%, transparent 100%);
240 + -webkit-mask: radial-gradient(80% 90% at 60% 30%, black 40%, transparent 100%);
232 241 }
242 +.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
233 243 .hero-name {
234 − margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
235 − background: var(--gradient-text); background-size: 180% 100%;
236 − -webkit-background-clip: text; background-clip: text;
237 − -webkit-text-fill-color: transparent; color: transparent;
238 − animation: gradient-pan 8s ease infinite;
239 −}
240 −.hero-tagline { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
241 −.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; }
242 −.badge-stat {
243 − border-radius: var(--radius);
244 − padding: 12px 18px; font-size: 13px; color: var(--muted);
245 − font-variant-numeric: tabular-nums;
246 − display: flex; flex-direction: column; gap: 1px; min-width: 96px;
247 − transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
248 −}
249 −.badge-stat:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card); }
250 −.badge-stat strong {
251 − font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
252 − background: var(--gradient-brand);
244 + margin: 0; font-family: var(--font-display); font-weight: 800;
245 + font-size: clamp(44px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.04em;
246 + background: var(--gradient-text); background-size: 200% 100%;
253 247 -webkit-background-clip: text; background-clip: text;
254 248 -webkit-text-fill-color: transparent; color: transparent;
255 −}
256 −
257 −.section-title {
258 − font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
259 − margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
260 −}
261 −.section-title::before {
262 − content: ''; width: 4px; height: 17px; border-radius: 3px; flex: none;
263 − background: var(--gradient-brand); box-shadow: 0 0 12px -2px var(--accent-glow);
264 −}
265 −
266 −/* ── Repo cards / home ───────────────────── */
267 −.pinned-grid {
268 − display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
269 − gap: 14px; margin-bottom: 36px;
270 −}
271 −.home-columns { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; }
272 −.repo-list { display: flex; flex-direction: column; gap: 12px; }
249 + animation: gradient-pan 10s ease infinite;
250 + text-wrap: balance;
251 +}
252 +.hero-tagline {
253 + margin: 22px 0 0; font-family: var(--font-serif); font-style: italic;
254 + font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; color: var(--text); max-width: 26ch; text-wrap: balance;
255 +}
256 +.hero-tagline em { font-style: italic; background: var(--gradient-ember); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
257 +.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
258 +.hero-actions .btn { padding: 11px 18px; font-size: 15px; }
259 +.hero-contact { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
260 +.hero-contact a { color: var(--muted); }
261 +.hero-contact a:hover { color: var(--accent); }
262 +
263 +/* terminal card */
264 +.hero-terminal {
265 + border-radius: var(--radius-lg); overflow: hidden; font-family: var(--font-mono); font-size: 13.5px;
266 + box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card);
267 + transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
268 + transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
269 +}
270 +.hero-terminal:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
271 +.term-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--code-head); }
272 +.term-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); }
273 +.term-dot:nth-child(1) { background: #ff5f57; } .term-dot:nth-child(2) { background: #febc2e; } .term-dot:nth-child(3) { background: #28c840; }
274 +.term-title { margin-left: auto; color: var(--faint); font-size: 12px; }
275 +.term-body { padding: 18px 18px 20px; background: var(--code-bg); min-height: 218px; line-height: 1.75; }
276 +.term-line { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-all; }
277 +.term-prompt { color: var(--accent-2); flex: none; }
278 +.term-cmd { color: var(--text-bright); }
279 +.term-out { color: var(--muted); padding-left: 20px; }
280 +.term-ok { color: var(--accent-2); }
281 +.term-caret { display: inline-block; width: 8px; height: 1.1em; background: var(--accent); vertical-align: -3px; margin-left: 2px; animation: caret 1s steps(1) infinite; box-shadow: 0 0 10px var(--accent-glow); }
282 +@keyframes caret { 50% { opacity: 0; } }
283 +
284 +/* stats row */
285 +.hero-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 52px; }
286 +.stat {
287 + border-radius: var(--radius-lg); padding: 18px 20px 16px;
288 + display: flex; flex-direction: column; gap: 4px; overflow: hidden;
289 + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
290 +}
291 +.stat:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card); }
292 +.stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gradient-brand); opacity: 0.7; }
293 +.stat-ember::before { background: var(--gradient-ember); }
294 +.stat-value {
295 + font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1;
296 + font-variant-numeric: tabular-nums; color: var(--text-bright);
297 +}
298 +.stat-ember .stat-value { background: var(--gradient-ember); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
299 +.stat-label { font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }
300 +.stat-sub { font-size: 12px; color: var(--faint); font-family: var(--font-mono); }
301 +
302 +@keyframes gradient-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
303 +@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 8px 0 var(--accent-2); } 50% { box-shadow: 0 0 16px 4px var(--accent-2); } }
304 +
305 +/* ── Bento (pinned) ──────────────────────── */
306 +.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
307 +.bento > .repo-card:first-child { grid-column: span 2; }
308 +.bento > .repo-card:first-child .repo-card-name a { font-size: 24px; font-family: var(--font-display); letter-spacing: -0.02em; }
309 +.bento > .repo-card:first-child .repo-card-desc { font-size: 15px; max-width: 60ch; }
310 +.bento > .repo-card:first-child .spark { width: 220px; height: 44px; }
311 +
312 +/* ── Repo cards ──────────────────────────── */
313 +.repo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
273 314 .repo-card {
274 − position: relative;
275 − border-radius: var(--radius-lg); padding: 18px 20px;
276 − transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
315 + border-radius: var(--radius-lg); padding: 20px 22px 18px;
316 + display: flex; flex-direction: column; gap: 10px;
317 + transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
277 318 overflow: hidden;
278 319 }
279 −/* mouse spotlight — --mx/--my set by app.js */
280 −.repo-card::after {
281 − content: ''; position: absolute; inset: 0; pointer-events: none;
282 − background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -40%), var(--accent-soft), transparent 65%);
283 − opacity: 0; transition: opacity 0.25s ease;
284 −}
285 −.repo-card:hover::after { opacity: 1; }
286 320 .repo-card::before {
287 321 content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
288 − background: var(--gradient-hot); opacity: 0;
289 − transition: opacity 0.18s ease;
290 −}
291 −.repo-card:hover {
292 − border-color: var(--border-strong); transform: translateY(-2px);
293 − box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card);
322 + background: var(--gradient-hot); opacity: 0; transition: opacity 0.2s ease;
294 323 }
324 +.repo-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card); }
295 325 .repo-card:hover::before { opacity: 1; }
296 −.repo-card-name { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
297 −.repo-card-name a { color: var(--text-bright); font-weight: 600; }
326 +.repo-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
327 +.repo-card-name { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
328 +.repo-card-name a { color: var(--text-bright); font-weight: 700; letter-spacing: -0.01em; }
298 329 .repo-card-name a:hover { color: var(--accent); text-decoration: none; }
299 −.repo-card-name a::after { content: ''; position: absolute; inset: 0; } /* whole card clickable */
300 −.repo-card .chip-topic, .repo-card .repo-card-meta { position: relative; z-index: 1; }
301 −.repo-card-desc { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
302 −.repo-card .chip-row { margin-bottom: 10px; }
303 −.repo-card-meta { display: flex; gap: 16px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
304 −.lang-dot {
305 − width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none;
306 − box-shadow: 0 0 8px 0 currentColor; opacity: 0.95;
307 −}
330 +.repo-card-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
331 +.repo-card .chip-topic, .repo-card .repo-card-meta { position: relative; z-index: 2; }
332 +.pin { color: var(--ember-2); font-size: 13px; filter: drop-shadow(0 0 6px var(--ember-glow)); }
333 +.repo-card-desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
334 +.repo-card-meta { display: flex; gap: 16px; color: var(--muted); font-size: 13px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 4px; }
335 +.repo-card-meta .pushed { margin-left: auto; font-variant-numeric: tabular-nums; }
336 +.lang-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 8px 0 currentColor; opacity: 0.95; }
308 337 .lang-dot-label { display: inline-flex; align-items: center; gap: 6px; }
309 −
310 −.repo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
311 −.repo-filters { display: flex; gap: 8px; flex-wrap: wrap; }
312 −.repo-filters input { max-width: 200px; }
338 +.spark { width: 120px; height: 34px; flex: none; overflow: visible; }
339 +.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--accent-glow)); }
340 +.spark-area { fill: url(#spark-fill); opacity: 0.9; }
341 +.spark-dot { fill: var(--accent-2); filter: drop-shadow(0 0 6px var(--accent-2)); }
342 +.spark-quiet .spark-line { stroke: var(--faint); filter: none; }
343 +.spark-quiet .spark-dot { display: none; }
344 +.spark-defs { position: absolute; width: 0; height: 0; }
345 +
346 +/* repo controls */
347 +.repo-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
348 +.repo-filters input, .search-page-form input {
349 + background: var(--surface); color: var(--text);
350 + border: 1px solid var(--border); border-radius: 11px;
351 + padding: 9px 13px; font-size: 14px; outline: none; width: 220px;
352 + box-shadow: inset 0 1px 0 var(--edge-light);
353 + transition: border-color 0.15s ease, box-shadow 0.15s ease;
354 +}
355 +.repo-filters input:focus, .search-page-form input:focus { border-color: var(--accent); box-shadow: var(--ring); }
313 356 .repo-filters select, .ref-select {
314 357 background: var(--surface); color: var(--text); border: 1px solid var(--border);
315 − border-radius: var(--radius); padding: 8px 11px; font-size: 14px; cursor: pointer;
358 + border-radius: 11px; padding: 9px 12px; font-size: 14px; cursor: pointer;
359 + box-shadow: inset 0 1px 0 var(--edge-light);
316 360 transition: border-color 0.15s ease;
317 361 }
318 362 .repo-filters select:hover, .ref-select:hover { border-color: var(--border-strong); }
319 −.empty-state { text-align: center; padding: 44px 0; color: var(--muted); }
320 −
321 −/* ── Activity feed ───────────────────────── */
322 −.activity-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 14px; }
323 −.activity-feed li {
324 − display: flex; gap: 12px; align-items: baseline; position: relative;
325 − padding: 7px 0 7px 4px;
326 −}
363 +.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); border-radius: var(--radius-lg); }
364 +
365 +/* ── Home columns + side cards ───────────── */
366 +.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
367 +.home-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
368 +.side-card { border-radius: var(--radius-lg); padding: 18px 20px; }
369 +.side-card h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
370 +.side-card h2 .count { margin-left: auto; }
371 +
372 +/* activity */
373 +.activity-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 13.5px; max-height: 420px; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
374 +.activity-feed li { display: flex; gap: 12px; align-items: baseline; position: relative; padding: 7px 0 7px 2px; line-height: 1.45; }
327 375 .activity-feed li:not(:last-child)::before {
328 − content: ''; position: absolute; left: 7px; top: 22px; bottom: -8px;
329 − width: 2px; border-radius: 1px;
376 + content: ''; position: absolute; left: 5px; top: 22px; bottom: -8px; width: 2px; border-radius: 1px;
330 377 background: linear-gradient(180deg, var(--accent-2-soft), var(--border));
331 378 }
332 −.activity-dot {
333 − width: 8px; height: 8px; border-radius: 50%;
334 − background: var(--accent-2); flex: none; position: relative; top: -1px;
335 − box-shadow: 0 0 10px 1px var(--accent-2);
336 −}
379 +.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex: none; position: relative; top: -1px; box-shadow: 0 0 10px 1px var(--accent-2); }
337 380 .activity-feed li:first-child .activity-dot { animation: pulse-dot 2.4s ease infinite; }
338 −@keyframes pulse-dot {
339 − 0%, 100% { box-shadow: 0 0 8px 0 var(--accent-2); }
340 − 50% { box-shadow: 0 0 14px 3px var(--accent-2); }
341 −}
381 +.activity-feed li.is-tag .activity-dot { background: var(--ember-2); box-shadow: 0 0 10px 1px var(--ember-glow); }
382 +.activity-feed li.is-del .activity-dot { background: var(--danger); box-shadow: none; }
383 +.activity-feed a { font-weight: 600; color: var(--text); }
384 +.activity-feed a:hover { color: var(--accent); }
342 385 .ref-inline { font-size: 12px; color: var(--muted); }
343 386
387 +/* stack ring */
388 +.stack { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
389 +.ring { position: relative; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--ring-stops, var(--border) 0 100%)); box-shadow: 0 0 30px -10px var(--accent-glow); }
390 +.ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); }
391 +.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--text-bright); line-height: 1; }
392 +.ring-center small { font-family: var(--font-mono); font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 3px; letter-spacing: 0.08em; }
393 +.stack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
394 +.stack-list li { display: flex; align-items: center; gap: 8px; }
395 +.stack-list .pct { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
396 +
344 397 /* ── Heatmap ─────────────────────────────── */
345 −.heatmap-section { margin-top: 46px; }
398 +.heatmap-section { margin-top: 8px; }
399 +.heatmap-card { border-radius: var(--radius-lg); padding: 20px 22px 16px; }
400 +.heatmap-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
401 +.heatmap-stats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
402 +.heatmap-stats strong { color: var(--text-bright); font-family: var(--font-display); font-size: 17px; letter-spacing: -0.02em; margin-right: 4px; }
403 +.heatmap-stats .ember { color: var(--ember-2); }
346 404 .heatmap-scroll { overflow-x: auto; padding-bottom: 6px; }
405 +.heatmap-svg { display: block; min-width: 760px; width: 100%; height: auto; }
347 406 .heatmap-label { fill: var(--muted); font-size: 9px; font-family: var(--font-ui); }
348 407 .heatmap-cell { transition: transform 0.1s ease; transform-origin: center; transform-box: fill-box; rx: 2.5px; }
349 −.heatmap-cell:hover { transform: scale(1.4); stroke: var(--accent); stroke-width: 1; }
408 +.heatmap-cell:hover { transform: scale(1.45); stroke: var(--text-bright); stroke-width: 1; }
350 409 .heatmap-cell[data-level='0'] { fill: var(--heat-0); }
351 410 .heatmap-cell[data-level='1'] { fill: var(--heat-1); }
352 411 .heatmap-cell[data-level='2'] { fill: var(--heat-2); }
353 412 .heatmap-cell[data-level='3'] { fill: var(--heat-3); }
354 413 .heatmap-cell[data-level='4'] { fill: var(--heat-4); filter: drop-shadow(0 0 3px var(--heat-glow)); }
355 −.heatmap-legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; margin-top: 8px; }
414 +.heatmap-legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; margin-top: 10px; justify-content: flex-end; }
356 415 .heatmap-cell-demo { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
357 416 .heatmap-cell-demo[data-level='0'] { background: var(--heat-0); }
358 417 .heatmap-cell-demo[data-level='1'] { background: var(--heat-1); }
@@ -361,233 +420,207 @@ html[data-theme='light'] .icon-sun { display: none; }
361 420 .heatmap-cell-demo[data-level='4'] { background: var(--heat-4); box-shadow: 0 0 5px var(--heat-glow); }
362 421
363 422 /* ── Repo header ─────────────────────────── */
364 −.repo-header { padding-bottom: 0; margin-bottom: 22px; border-bottom: 1px solid var(--border); position: relative; }
365 −.repo-header::after {
366 − content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
367 − background: var(--gradient-hot); opacity: 0.4;
368 − mask: linear-gradient(90deg, black, transparent 65%);
369 − -webkit-mask: linear-gradient(90deg, black, transparent 65%);
370 −}
423 +.repo-header { position: relative; margin-bottom: 24px; padding-top: 6px; }
424 +.repo-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
371 425 .repo-title {
372 − font-size: 22px; margin: 6px 0 6px; display: flex; align-items: center;
373 − gap: 8px; flex-wrap: wrap; font-weight: 500; letter-spacing: -0.01em;
426 + margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
427 + font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.05;
374 428 }
375 −.repo-owner { color: var(--muted); }
429 +.repo-owner { color: var(--muted); font-weight: 700; }
376 430 .repo-owner:hover { color: var(--accent); text-decoration: none; }
377 −.repo-sep { color: var(--faint); }
378 −.repo-name { font-weight: 700; color: var(--text-bright); }
431 +.repo-sep { color: var(--faint); font-weight: 400; }
432 +.repo-name { color: var(--text-bright); }
379 433 .repo-name:hover { color: var(--accent); text-decoration: none; }
380 −.repo-desc { margin: 0 0 10px; color: var(--muted); max-width: 780px; font-size: 15px; }
381 −.repo-meta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 10px; }
382 −.repo-homepage { font-size: 14px; font-weight: 500; }
383 −.lang-bar {
384 − display: flex; height: 9px; border-radius: 5px; overflow: hidden;
385 − background: var(--surface-2); margin: 8px 0; gap: 1px;
386 − box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
387 −}
388 −.lang-bar-seg { display: block; height: 100%; min-width: 2px; transition: filter 0.15s ease; }
434 +.repo-badges { display: flex; gap: 6px; align-items: center; }
435 +.repo-desc { margin: 0 0 12px; color: var(--text); max-width: 78ch; font-size: 16px; line-height: 1.55; }
436 +.repo-meta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
437 +.repo-homepage { font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
438 +
439 +.repo-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
440 +.rstat {
441 + border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: inherit;
442 + transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
443 +}
444 +a.rstat:hover { text-decoration: none; color: inherit; transform: translateY(-2px); border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card); }
445 +.rstat-v { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
446 +.rstat-l { font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); }
447 +
448 +.lang-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--surface-2); margin: 0 0 8px; gap: 2px; }
449 +.lang-bar-seg { display: block; height: 100%; min-width: 3px; transition: filter 0.15s ease, transform 0.15s ease; transform-origin: center; }
389 450 .lang-bar-seg:hover { filter: brightness(1.3) saturate(1.2); }
390 −.lang-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; margin-bottom: 12px; }
391 −.repo-tabs { display: flex; gap: 2px; align-items: center; margin-top: 10px; overflow-x: auto; }
451 +.lang-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; margin-bottom: 14px; }
452 +
453 +.repo-tabs { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--border); overflow-x: auto; position: relative; }
454 +.repo-tabs::after {
455 + content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
456 + background: var(--gradient-hot); opacity: 0.4;
457 + mask: linear-gradient(90deg, black, transparent 60%); -webkit-mask: linear-gradient(90deg, black, transparent 60%);
458 +}
392 459 .repo-tab {
393 − color: var(--muted); padding: 9px 15px; position: relative;
394 − display: inline-flex; gap: 7px; align-items: center;
395 − white-space: nowrap; font-size: 14px; font-weight: 500;
396 − border-radius: var(--radius) var(--radius) 0 0;
397 − transition: color 0.15s ease, background 0.15s ease;
460 + color: var(--muted); padding: 11px 16px; position: relative;
461 + display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 14px; font-weight: 500;
462 + border-radius: 10px 10px 0 0; transition: color 0.15s ease, background 0.15s ease;
398 463 }
399 464 .repo-tab::after {
400 − content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
401 − background: var(--gradient-brand); border-radius: 2px 2px 0 0;
402 − box-shadow: 0 -1px 12px -2px var(--accent-glow);
403 − opacity: 0; transform: scaleX(0.5);
404 − transition: opacity 0.18s ease, transform 0.18s ease;
465 + content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; z-index: 1;
466 + background: var(--gradient-brand); border-radius: 2px 2px 0 0; box-shadow: 0 -1px 14px -2px var(--accent-glow);
467 + opacity: 0; transform: scaleX(0.4); transition: opacity 0.18s ease, transform 0.18s ease;
405 468 }
406 469 .repo-tab:hover { color: var(--text); background: var(--surface); text-decoration: none; }
407 470 .repo-tab.active { color: var(--text-bright); font-weight: 600; }
408 471 .repo-tab.active::after { opacity: 1; transform: scaleX(1); }
409 −.repo-tab-meta { margin-left: auto; font-size: 13px; white-space: nowrap; }
410 472
411 473 /* ── Repo toolbar / clone box ────────────── */
412 474 .repo-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
413 −.clone-box {
414 − display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
415 − border-radius: var(--radius-lg); padding: 5px;
416 −}
475 +.clone-box { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-radius: 14px; padding: 5px 5px 5px 14px; }
476 +.clone-prompt { color: var(--accent-2); font-family: var(--font-mono); font-size: 13px; user-select: none; }
417 477 .clone-url {
418 − background: transparent; border: none; color: var(--muted);
419 − padding: 6px 10px; font-family: var(--font-mono);
420 − font-size: 13px; width: 300px; max-width: 60vw; outline: none;
478 + background: transparent; border: none; color: var(--text); padding: 6px 4px; font-family: var(--font-mono);
479 + font-size: 13px; width: 360px; max-width: 60vw; outline: none;
421 480 }
422 481 .clone-snippet {
423 482 background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius);
424 − padding: 14px 16px; font-size: 13px; overflow-x: auto; display: inline-block; text-align: left;
483 + padding: 14px 16px; font-size: 13px; overflow-x: auto; display: inline-block; text-align: left; margin: 0;
425 484 }
426 485 .path-breadcrumb { font-family: var(--font-mono); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
427 486 .crumb-sep { color: var(--faint); }
428 487
429 488 /* ── File table ──────────────────────────── */
430 −.file-table {
431 − width: 100%; border-collapse: collapse;
432 − border-radius: var(--radius-lg); overflow: hidden;
433 − font-size: 14px; margin-bottom: 26px;
434 −}
435 −.file-table td { padding: 9px 14px; border-top: 1px solid var(--border); }
489 +.file-table { width: 100%; border-collapse: collapse; border-radius: var(--radius-lg); overflow: hidden; font-size: 14px; margin-bottom: 28px; }
490 +.file-table td { padding: 10px 16px; border-top: 1px solid var(--border); }
436 491 .file-table tr:first-child td { border-top: 0; }
437 492 .file-row { transition: background 0.12s ease, box-shadow 0.12s ease; }
438 493 .file-row:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
439 −.file-name { white-space: nowrap; width: 32%; }
440 −.file-name a { color: var(--text); }
494 +.file-name { white-space: nowrap; width: 34%; }
495 +.file-name a { color: var(--text); font-weight: 500; }
441 496 .file-name a:hover { color: var(--accent); text-decoration: none; }
442 −.file-icon { vertical-align: -3px; margin-right: 8px; color: var(--muted); }
497 +.file-icon { vertical-align: -3px; margin-right: 9px; color: var(--muted); }
443 498 .icon-dir { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
444 −.file-commit { overflow: hidden; text-overflow: ellipsis; max-width: 400px; white-space: nowrap; }
499 +.file-commit { overflow: hidden; text-overflow: ellipsis; max-width: 460px; white-space: nowrap; }
445 500 .file-commit a:hover { color: var(--accent); }
446 501 .file-date { text-align: right; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
447 502
448 −/* ── README / markdown section ───────────── */
449 −.readme-section {
450 − border-radius: var(--radius-lg);
451 − margin-bottom: 32px;
452 −}
503 +/* ── README + TOC rail ───────────────────── */
504 +.readme-section { border-radius: var(--radius-lg); margin-bottom: 32px; overflow: clip; }
453 505 .readme-header {
454 − display: flex; align-items: center; gap: 8px; padding: 11px 20px;
506 + display: flex; align-items: center; gap: 8px; padding: 12px 22px;
455 507 border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px;
456 − position: sticky; top: 60px; background: var(--surface); z-index: 10;
457 − border-radius: var(--radius-lg) var(--radius-lg) 0 0;
458 −}
459 −.readme-section .markdown-body { padding: 28px 36px 36px; }
460 −.empty-repo { text-align: center; padding: 52px 20px; }
461 −.notice {
462 − background: var(--accent-soft); border: 1px solid var(--accent);
463 − border-radius: var(--radius); padding: 8px 14px; font-size: 13px; margin: 12px;
464 −}
508 + position: sticky; top: 64px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
509 + z-index: 10; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
510 +}
511 +.readme-header .count { margin-left: auto; }
512 +.readme-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
513 +.readme-layout.has-toc { grid-template-columns: minmax(0, 1fr) 240px; }
514 +.readme-section .markdown-body { padding: 32px 40px 40px; min-width: 0; }
515 +.readme-toc { position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 140px); overflow-y: auto; padding: 26px 20px 26px 0; font-size: 13px; }
516 +.readme-toc h4 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
517 +.readme-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
518 +.readme-toc li a { display: block; padding: 4px 12px; color: var(--muted); border-left: 2px solid transparent; margin-left: -1px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
519 +.readme-toc li.depth-3 a { padding-left: 24px; font-size: 12.5px; }
520 +.readme-toc li a:hover { color: var(--text); text-decoration: none; }
521 +.readme-toc li a.active { color: var(--text-bright); border-left-color: var(--accent); }
522 +.empty-repo { text-align: center; padding: 56px 20px; }
523 +.notice { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; margin: 12px; }
465 524
466 525 /* ── Blob view ───────────────────────────── */
467 −.blob-card {
468 − border-radius: var(--radius-lg);
469 − overflow: hidden;
470 −}
526 +.blob-card { border-radius: var(--radius-lg); overflow: clip; } /* clip, not hidden — hidden would turn the card into the sticky header's scrollport */
471 527 .blob-header {
472 − display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
473 − padding: 10px 16px; border-bottom: 1px solid var(--border);
474 − position: sticky; top: 60px; background: var(--surface); z-index: 10;
528 + display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border);
529 + position: sticky; top: 64px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 10;
475 530 }
476 531 .blob-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; }
477 532 .blob-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
478 533 .blob-image { text-align: center; padding: 32px; background: var(--surface-2); }
479 534 .blob-image img { max-width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-2); }
480 −.blob-binary { text-align: center; padding: 52px 20px; color: var(--muted); }
481 −.blob-markdown { padding: 28px 36px 36px; }
482 −
483 −/* PDF viewer */
535 +.blob-binary { text-align: center; padding: 56px 20px; color: var(--muted); }
536 +.blob-markdown { padding: 32px 40px 40px; }
484 537 .pdf-viewer { background: var(--surface-2); }
485 −.pdf-frame {
486 − display: block; width: 100%; height: calc(100vh - 220px); min-height: 560px;
487 − border: 0; background: var(--surface-2);
488 −}
538 +.pdf-frame { display: block; width: 100%; height: calc(100vh - 220px); min-height: 560px; border: 0; background: var(--surface-2); }
489 539 .pdf-fallback { text-align: center; padding: 52px 20px; color: var(--muted); }
490 540
491 541 .code-view { overflow-x: auto; background: var(--code-bg); }
492 −.code-view pre.shiki {
493 − margin: 0; padding: 14px 0; background: transparent !important;
494 − font-size: 13px; line-height: 1.65; min-width: max-content;
495 −}
542 +.code-view pre.shiki { margin: 0; padding: 14px 0; background: transparent !important; font-size: 13px; line-height: 1.65; min-width: max-content; }
543 +.code-view.wrap pre.shiki { min-width: 0; }
544 +.code-view.wrap .line { white-space: pre-wrap; word-break: break-all; }
496 545 .code-view .line { display: block; padding: 0 16px 0 0; min-height: 1.65em; transition: background 0.12s ease; }
497 546 .code-view .line:hover { background: var(--surface-2); }
498 547 .code-view .line:target { background: var(--accent-soft); animation: line-flash 1.2s ease 1; }
499 548 .code-view .line.range-hl { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
500 −@keyframes line-flash {
501 − 0% { background: var(--accent-glow); }
502 − 100% { background: var(--accent-soft); }
503 −}
549 +@keyframes line-flash { 0% { background: var(--accent-glow); } 100% { background: var(--accent-soft); } }
504 550 .code-view .ln {
505 − display: inline-block; width: 56px; padding-right: 18px; text-align: right;
506 − color: var(--faint); user-select: none; font-size: 12px; text-decoration: none;
507 − position: sticky; left: 0; background: var(--code-bg);
508 − font-variant-numeric: tabular-nums;
551 + display: inline-block; width: 60px; padding-right: 20px; text-align: right; color: var(--faint); user-select: none; font-size: 12px;
552 + text-decoration: none; position: sticky; left: 0; background: var(--code-bg); font-variant-numeric: tabular-nums;
509 553 }
510 554 .code-view .ln:hover { color: var(--accent); }
511 555 .plain-readme { padding: 20px; overflow-x: auto; font-size: 13px; }
512 556
513 557 /* ── Commits ─────────────────────────────── */
514 −.commit-list {
515 − list-style: none; margin: 0 0 20px; padding: 0;
516 − border-radius: var(--radius-lg); overflow: hidden;
517 −}
518 −.commit-row {
519 − display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px;
520 − border-top: 1px solid var(--border); transition: background 0.12s ease, box-shadow 0.12s ease;
521 −}
558 +.commit-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
559 +.commit-day-label {
560 + margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px;
561 + letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
562 +}
563 +.commit-day-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
564 +.commit-day-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
565 +.commit-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-lg); overflow: hidden; }
566 +.commit-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-top: 1px solid var(--border); transition: background 0.12s ease, box-shadow 0.12s ease; }
522 567 .commit-row:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
523 568 .commit-row:first-child { border-top: 0; }
524 −.commit-avatar {
525 − flex: none; border-radius: 8px; overflow: hidden; background: var(--surface-2);
526 − line-height: 0; padding: 3px; border: 1px solid var(--border);
527 −}
569 +.commit-avatar { flex: none; border-radius: 9px; overflow: hidden; background: var(--surface-2); line-height: 0; padding: 3px; border: 1px solid var(--border); }
528 570 .commit-main { flex: 1; min-width: 0; }
529 571 .commit-subject { font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
530 572 .commit-subject a { color: var(--text); }
531 573 .commit-subject a:hover { color: var(--accent); text-decoration: none; }
532 −.commit-body-toggle summary {
533 − cursor: pointer; color: var(--muted); background: var(--surface-2);
534 − border-radius: 4px; padding: 0 8px; display: inline-block; list-style: none;
535 −}
574 +.commit-body-toggle summary { cursor: pointer; color: var(--muted); background: var(--surface-2); border-radius: 5px; padding: 0 8px; display: inline-block; list-style: none; border: 1px solid var(--border); font-size: 12px; }
536 575 .commit-body-toggle summary::-webkit-details-marker { display: none; }
537 −.commit-body { font-size: 13px; color: var(--muted); white-space: pre-wrap; margin: 8px 0 0; }
538 −.commit-meta { font-size: 13px; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; }
576 +.commit-body { font-size: 13px; color: var(--muted); white-space: pre-wrap; margin: 8px 0 0; font-family: var(--font-mono); }
577 +.commit-meta { font-size: 13px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
539 578 .sha-chip {
540 − font-family: var(--font-mono); font-size: 12px; background: var(--surface-2);
541 − color: var(--accent); border: 1px solid var(--border); border-radius: 7px;
542 − padding: 3px 9px; cursor: pointer; flex: none;
543 − transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
579 + font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); color: var(--accent); border: 1px solid var(--border);
580 + border-radius: 8px; padding: 4px 10px; cursor: pointer; flex: none; transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
544 581 }
545 582 .sha-chip:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px -6px var(--accent-glow); }
546 −.pagination { display: flex; gap: 10px; justify-content: center; margin: 22px 0; }
583 +.pagination { display: flex; gap: 10px; justify-content: center; margin: 26px 0; }
547 584
548 585 /* ── Commit detail / diffs ───────────────── */
549 −.commit-detail-header {
550 − border-radius: var(--radius-lg);
551 − padding: 18px 22px; margin-bottom: 18px;
552 −}
553 −.commit-detail-subject { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; }
586 +.commit-detail-header { border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 18px; overflow: hidden; }
587 +.commit-detail-header::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gradient-hot); }
588 +.commit-detail-subject { margin: 0 0 10px; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
554 589 .commit-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; }
555 −.commit-stats { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
590 +.commit-stats { margin: 14px 0 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
591 +.diff-bar { display: inline-flex; height: 8px; width: 120px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
592 +.diff-bar i { display: block; height: 100%; }
593 +.diff-bar .add { background: var(--add-text); }
594 +.diff-bar .del { background: var(--del-text); }
556 595 .diff-add { color: var(--add-text); font-weight: 600; font-variant-numeric: tabular-nums; }
557 596 .diff-del { color: var(--del-text); font-weight: 600; font-variant-numeric: tabular-nums; }
558 −
559 −.diff-file {
560 − border-radius: var(--radius-lg);
561 − margin-bottom: 16px; overflow: hidden;
597 +.diff-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
598 +.diff-nav a {
599 + display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--muted);
600 + background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; max-width: 100%;
562 601 }
602 +.diff-nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
603 +.diff-nav a:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
604 +
605 +.diff-file { border-radius: var(--radius-lg); margin-bottom: 16px; overflow: clip; }
563 606 .diff-file-header {
564 − display: flex; gap: 10px; align-items: center; padding: 10px 14px;
565 − cursor: pointer; background: var(--surface-2); font-size: 13px; list-style: none;
566 − position: sticky; top: 60px; z-index: 5;
567 − transition: background 0.12s ease;
607 + display: flex; gap: 10px; align-items: center; padding: 10px 16px; cursor: pointer; background: var(--code-head); font-size: 13px; list-style: none;
608 + position: sticky; top: 64px; z-index: 5; transition: background 0.12s ease; border-bottom: 1px solid var(--border);
568 609 }
569 610 .diff-file-header:hover { background: var(--surface-3); }
570 611 .diff-file-header::-webkit-details-marker { display: none; }
571 612 .diff-file-header::before { content: '▾'; color: var(--muted); transition: transform 0.15s ease; }
572 613 .diff-file:not([open]) .diff-file-header::before { content: '▸'; }
573 −.diff-path { font-size: 13px; word-break: break-all; }
614 +.diff-path { font-size: 13px; word-break: break-all; color: var(--text); }
574 615 .diff-counts { margin-left: auto; white-space: nowrap; }
575 −.diff-status {
576 − border-radius: 5px; padding: 1px 8px; font-size: 11px;
577 − text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em;
578 −}
616 +.diff-status { border-radius: 6px; padding: 2px 8px; font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; }
579 617 .diff-status-added { background: var(--add-bg); color: var(--add-text); }
580 618 .diff-status-deleted { background: var(--del-bg); color: var(--del-text); }
581 619 .diff-status-modified { background: var(--accent-soft); color: var(--accent); }
582 620 .diff-status-renamed { background: var(--chip-bg); color: var(--accent-2); }
583 −
584 621 .diff-table-wrap { overflow-x: auto; background: var(--code-bg); }
585 622 .diff-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
586 −.diff-gutter {
587 − width: 44px; min-width: 44px; text-align: right; padding: 0 8px;
588 − color: var(--faint); user-select: none; border-right: 1px solid var(--border);
589 − font-size: 11.5px; vertical-align: top; font-variant-numeric: tabular-nums;
590 −}
623 +.diff-gutter { width: 44px; min-width: 44px; text-align: right; padding: 0 8px; color: var(--faint); user-select: none; border-right: 1px solid var(--border); font-size: 11.5px; vertical-align: top; font-variant-numeric: tabular-nums; }
591 624 .diff-code { padding: 0 10px; white-space: pre; }
592 625 .diff-sign { display: inline-block; width: 14px; user-select: none; color: var(--muted); }
593 626 .diff-line-add { background: var(--add-bg); }
@@ -601,145 +634,103 @@ html[data-theme='light'] .icon-sun { display: none; }
601 634
602 635 /* ── Blame ───────────────────────────────── */
603 636 .blame-table { border-collapse: collapse; width: 100%; font-size: 13px; }
604 −.blame-commit {
605 − border-top: 1px solid var(--border); border-right: 1px solid var(--border);
606 − padding: 4px 10px; width: 320px; min-width: 240px; vertical-align: top;
607 − background: var(--surface-2);
608 −}
637 +.blame-commit { border-top: 1px solid var(--border); border-right: 1px solid var(--border); padding: 4px 10px; width: 320px; min-width: 240px; vertical-align: top; background: var(--surface-2); }
609 638 .blame-commit-inner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
610 639 .blame-date { font-size: 12px; width: 100%; padding-left: 30px; }
611 640 .blame-ln { width: 44px; text-align: right; color: var(--faint); padding: 0 8px; user-select: none; font-family: var(--font-mono); font-size: 12px; }
612 641 .blame-code pre { margin: 0; font-size: 12.5px; line-height: 1.6; white-space: pre; }
613 −.blame-line[data-age='0'] .blame-commit { box-shadow: inset 3px 0 0 var(--accent); }
614 −.blame-line[data-age='1'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 85%, transparent); }
615 −.blame-line[data-age='2'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
616 −.blame-line[data-age='3'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 58%, transparent); }
617 −.blame-line[data-age='4'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 47%, transparent); }
618 −.blame-line[data-age='5'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 38%, transparent); }
619 −.blame-line[data-age='6'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
620 −.blame-line[data-age='7'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 22%, transparent); }
621 −.blame-line[data-age='8'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 15%, transparent); }
622 −.blame-line[data-age='9'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 8%, transparent); }
642 +.blame-line[data-age='0'] .blame-commit { box-shadow: inset 3px 0 0 var(--ember); }
643 +.blame-line[data-age='1'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ember) 85%, var(--accent)); }
644 +.blame-line[data-age='2'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ember) 60%, var(--accent)); }
645 +.blame-line[data-age='3'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ember) 35%, var(--accent)); }
646 +.blame-line[data-age='4'] .blame-commit { box-shadow: inset 3px 0 0 var(--accent); }
647 +.blame-line[data-age='5'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }
648 +.blame-line[data-age='6'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
649 +.blame-line[data-age='7'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
650 +.blame-line[data-age='8'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 26%, transparent); }
651 +.blame-line[data-age='9'] .blame-commit { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 12%, transparent); }
623 652
624 653 /* ── Branch/tag tables ───────────────────── */
625 −.ref-table {
626 − width: 100%; border-collapse: collapse;
627 − border-radius: var(--radius-lg); overflow: hidden;
628 − font-size: 14px;
629 −}
630 −.ref-table th { text-align: left; padding: 11px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); }
631 −.ref-table td { padding: 11px 14px; border-top: 1px solid var(--border); }
654 +.ref-table { width: 100%; border-collapse: collapse; border-radius: var(--radius-lg); overflow: hidden; font-size: 14px; }
655 +.ref-table th { text-align: left; padding: 12px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-weight: 500; background: var(--code-head); }
656 +.ref-table td { padding: 12px 16px; border-top: 1px solid var(--border); }
632 657 .ref-table tbody tr { transition: background 0.12s ease; }
633 658 .ref-table tbody tr:hover { background: var(--surface-2); }
634 −.ref-name { font-family: var(--font-mono); font-size: 13px; }
659 +.ref-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
635 660 .ahead-behind { display: inline-flex; gap: 10px; font-family: var(--font-mono); font-size: 13px; }
636 −.archive-links { display: flex; gap: 6px; }
661 +.archive-links { display: flex; gap: 6px; flex-wrap: wrap; }
637 662
638 663 /* ── Releases ────────────────────────────── */
639 −.release-list { display: flex; flex-direction: column; gap: 18px; }
640 −.release-card {
641 − position: relative;
642 − border-radius: var(--radius-lg); padding: 18px 22px;
643 − transition: border-color 0.18s ease, box-shadow 0.18s ease;
644 −}
664 +.release-list { display: flex; flex-direction: column; gap: 18px; position: relative; }
665 +.release-card { border-radius: var(--radius-lg); padding: 22px 26px; transition: border-color 0.18s ease, box-shadow 0.18s ease; overflow: hidden; }
645 666 .release-card:hover { border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card); }
646 −.release-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
647 −.release-tag { margin: 0; font-size: 17px; font-family: var(--font-mono); }
667 +.release-card:first-child::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gradient-ember); }
668 +.release-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
669 +.release-tag { margin: 0; font-size: 26px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
670 +.release-tag a { color: var(--text-bright); }
671 +.release-latest { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-2); background: var(--ember-soft); border-radius: 999px; padding: 3px 9px; }
648 672 .release-subject { color: var(--muted); }
649 −.release-assets { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
673 +.release-assets { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
650 674 .release-assets li {
651 − display: flex; align-items: center; gap: 10px;
652 − background: var(--surface-2); border: 1px solid var(--border);
653 − border-radius: var(--radius); padding: 9px 14px; font-size: 14px;
654 − transition: border-color 0.15s ease, box-shadow 0.15s ease;
675 + display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border);
676 + border-radius: var(--radius); padding: 10px 14px; font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
655 677 }
656 678 .release-assets li:hover { border-color: var(--accent); box-shadow: 0 4px 18px -8px var(--accent-glow); }
657 679 .release-assets li svg { color: var(--accent-2); flex: none; }
680 +.release-assets li a { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
658 681
659 682 /* ── Search page ─────────────────────────── */
660 −.search-page-form { display: flex; gap: 8px; margin-bottom: 28px; max-width: 560px; }
661 −.search-results { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
662 −.search-results li {
663 − border-radius: var(--radius-lg); padding: 15px 19px;
664 − transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
665 −}
683 +.search-hero { margin: 24px 0 36px; }
684 +.search-page-form { display: flex; gap: 8px; margin-top: 18px; max-width: 640px; }
685 +.search-page-form input { flex: 1; width: auto; padding: 13px 16px; font-size: 16px; border-radius: 14px; }
686 +.search-results { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
687 +.search-results li { border-radius: var(--radius-lg); padding: 16px 20px; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
666 688 .search-results li:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-card); }
667 −.search-hit-name { font-weight: 600; font-size: 15px; }
668 −.search-snippet { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
689 +.search-hit-name { font-weight: 700; font-size: 16px; color: var(--text-bright); }
690 +.search-snippet { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
691 +.search-results .chip-row { margin-top: 8px; }
669 692
670 693 /* ── ⌘K command palette ──────────────────── */
671 694 .cmdk[hidden] { display: none; }
672 695 .cmdk { position: fixed; inset: 0; z-index: 90; }
673 −.cmdk-backdrop {
674 − position: absolute; inset: 0; background: var(--backdrop);
675 − backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
676 − animation: fade-in 0.16s ease both;
677 −}
696 +.cmdk-backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade-in 0.16s ease both; }
678 697 .cmdk-panel {
679 − position: relative; margin: 12vh auto 0; width: min(620px, calc(100vw - 32px));
680 − background: var(--surface-grad); border: 1px solid var(--border-strong);
681 − border-radius: var(--radius-lg); overflow: hidden;
682 − box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-pop), 0 0 80px -30px var(--accent-glow);
683 − animation: pop-in 0.18s cubic-bezier(0.2, 1.2, 0.4, 1) both;
698 + position: relative; margin: 11vh auto 0; width: min(660px, calc(100vw - 32px));
699 + background: var(--surface-grad); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); overflow: hidden;
700 + box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-pop), 0 0 100px -30px var(--accent-glow);
701 + animation: pop-in 0.2s cubic-bezier(0.2, 1.2, 0.4, 1) both;
702 + backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
684 703 }
685 704 @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
686 −@keyframes pop-in {
687 − from { opacity: 0; transform: translateY(10px) scale(0.985); }
688 − to { opacity: 1; transform: none; }
689 −}
690 −.cmdk-input-row {
691 − display: flex; align-items: center; gap: 10px; padding: 14px 16px;
692 − border-bottom: 1px solid var(--border);
693 −}
705 +@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
706 +.cmdk-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
694 707 .cmdk-input-row svg { color: var(--muted); flex: none; }
695 −.cmdk-input-row input {
696 − flex: 1; background: transparent; border: 0; outline: none;
697 − color: var(--text-bright); font-size: 16px; font-family: var(--font-ui);
698 −}
708 +.cmdk-input-row input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text-bright); font-size: 17px; font-family: var(--font-ui); }
699 709 .cmdk-input-row input::placeholder { color: var(--faint); }
700 −.cmdk-input-row kbd {
701 − background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
702 − padding: 2px 7px; font-size: 11px; color: var(--muted);
703 −}
704 −.cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 46vh; overflow-y: auto; }
705 −.cmdk-item {
706 − display: flex; align-items: center; gap: 12px; padding: 10px 12px;
707 − border-radius: 10px; cursor: pointer; font-size: 14px;
708 − color: var(--text); position: relative;
709 −}
710 +.cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 48vh; overflow-y: auto; }
711 +.cmdk-group { padding: 10px 12px 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
712 +.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 14px; color: var(--text); position: relative; }
710 713 .cmdk-item:hover, .cmdk-item[aria-selected='true'] { background: var(--accent-soft); }
711 −.cmdk-item[aria-selected='true']::before {
712 − content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
713 − border-radius: 2px; background: var(--gradient-brand);
714 − box-shadow: 0 0 10px -1px var(--accent-glow);
715 −}
714 +.cmdk-item[aria-selected='true']::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--gradient-brand); box-shadow: 0 0 10px -1px var(--accent-glow); }
715 +.cmdk-item-icon { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); flex: none; }
716 716 .cmdk-item-name { font-weight: 600; color: var(--text-bright); white-space: nowrap; }
717 717 .cmdk-item-desc { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
718 −.cmdk-item .lang-dot { width: 8px; height: 8px; }
719 718 .cmdk-item-hint { margin-left: auto; color: var(--faint); font-size: 12px; font-family: var(--font-mono); flex: none; }
720 −.cmdk-empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 14px; }
721 −.cmdk-footer {
722 − display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--border);
723 − color: var(--faint); font-size: 12px;
724 −}
725 −.cmdk-footer kbd {
726 − background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
727 − padding: 0 5px; font-size: 11px; margin-right: 4px;
728 −}
719 +.cmdk-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; }
720 +.cmdk-footer { display: flex; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--border); color: var(--faint); font-size: 12px; }
721 +.cmdk-footer kbd { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; font-size: 11px; margin-right: 4px; }
729 722 body.cmdk-open { overflow: hidden; }
730 723
731 724 /* ── Error pages ─────────────────────────── */
732 −.error-page { text-align: center; padding: 80px 20px; }
725 +.error-page { text-align: center; padding: 90px 20px; }
733 726 .error-code {
734 − font-size: 110px; font-weight: 700; font-family: var(--font-mono); line-height: 1;
735 − background: var(--gradient-hot); background-size: 200% 200%;
736 − animation: gradient-pan 6s ease infinite;
737 − -webkit-background-clip: text; background-clip: text;
738 − -webkit-text-fill-color: transparent; color: transparent;
739 − filter: drop-shadow(0 6px 30px var(--accent-glow));
727 + font-size: clamp(96px, 18vw, 180px); font-weight: 800; font-family: var(--font-display); line-height: 0.9; letter-spacing: -0.06em;
728 + background: var(--gradient-hot); background-size: 200% 200%; animation: gradient-pan 6s ease infinite;
729 + -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
730 + filter: drop-shadow(0 10px 40px var(--accent-glow));
740 731 }
741 −.error-message { font-size: 18px; color: var(--muted); margin: 16px 0 8px; }
742 −.error-art { display: inline-block; text-align: left; color: var(--muted); border-radius: var(--radius); padding: 14px 18px; font-size: 13px; margin: 16px 0 24px; }
732 +.error-message { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--text); margin: 18px 0 8px; }
733 +.error-art { display: inline-block; text-align: left; color: var(--muted); border-radius: var(--radius); padding: 14px 18px; font-size: 13px; margin: 18px 0 26px; }
743 734
744 735 /* ── Mermaid blocks ──────────────────────── */
745 736 .mermaid-block { margin: 16px 0; }
@@ -748,49 +739,82 @@ body.cmdk-open { overflow: hidden; }
748 739 .mermaid-target svg { max-width: 100%; }
749 740
750 741 /* ── Footer ──────────────────────────────── */
751 −.footer {
752 − position: relative;
753 − border-top: 1px solid var(--border); color: var(--muted);
754 − padding: 26px 0; font-size: 13px;
755 −}
742 +.footer { position: relative; border-top: 1px solid var(--border); color: var(--muted); font-size: 13.5px; background: linear-gradient(180deg, transparent, var(--bg-elev)); }
756 743 .footer::before {
757 − content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
758 − background: var(--gradient-hot); opacity: 0.3;
759 − mask: linear-gradient(90deg, transparent, black 30%, black 70%, transparent);
760 − -webkit-mask: linear-gradient(90deg, transparent, black 30%, black 70%, transparent);
761 −}
762 −.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
763 −.footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
764 −.footer-links { display: flex; gap: 16px; }
765 −.footer a { color: var(--muted); }
766 −.footer a:hover { color: var(--accent); }
767 −
768 −/* ── Page entrance ───────────────────────── */
769 −@keyframes rise-in {
770 − from { opacity: 0; transform: translateY(8px); }
771 − to { opacity: 1; transform: none; }
772 −}
773 −main.container > * { animation: rise-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
774 −main.container > *:nth-child(2) { animation-delay: 0.05s; }
775 −main.container > *:nth-child(3) { animation-delay: 0.1s; }
776 −main.container > *:nth-child(4) { animation-delay: 0.14s; }
744 + content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gradient-hot); opacity: 0.35;
745 + mask: linear-gradient(90deg, transparent, black 30%, black 70%, transparent); -webkit-mask: linear-gradient(90deg, transparent, black 30%, black 70%, transparent);
746 +}
747 +.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 44px 24px 32px; }
748 +.footer-col h4 { margin: 0 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
749 +.footer-col a { display: block; color: var(--muted); padding: 3px 0; }
750 +.footer-col a:hover { color: var(--text-bright); text-decoration: none; }
751 +.footer-about p { margin: 12px 0 14px; max-width: 42ch; line-height: 1.55; }
752 +.footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--text-bright); font-family: var(--font-display); font-size: 16px; }
753 +.footer-cmd { margin: 0; background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--text); overflow-x: auto; }
754 +.footer-cmd .term-prompt { margin-right: 8px; }
755 +.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 24px 26px; border-top: 1px solid var(--border); font-size: 12.5px; }
756 +.footer-bottom a { color: var(--muted); }
757 +.footer-bottom a:hover { color: var(--accent); }
758 +.footer-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; }
759 +.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px 1px var(--accent-2); animation: pulse-dot 2.4s ease infinite; }
760 +
761 +/* ── Entrance & scroll reveal ────────────── */
762 +@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
763 +main.container > * { animation: rise-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
764 +main.container > *:nth-child(2) { animation-delay: 0.06s; }
765 +main.container > *:nth-child(3) { animation-delay: 0.12s; }
766 +main.container > *:nth-child(4) { animation-delay: 0.16s; }
767 +.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1); }
768 +.reveal.in { opacity: 1; transform: none; }
769 +html.no-js .reveal { opacity: 1; transform: none; }
777 770
778 771 /* ── Responsive ──────────────────────────── */
772 +@media (max-width: 1100px) {
773 + .readme-layout.has-toc { grid-template-columns: minmax(0, 1fr); }
774 + .readme-toc { display: none; }
775 + .hero-stats { grid-template-columns: repeat(3, 1fr); }
776 + .repo-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
777 + .footer-grid { grid-template-columns: 1fr 1fr; }
778 +}
779 779 @media (max-width: 960px) {
780 780 .home-columns { grid-template-columns: 1fr; }
781 + .home-side { position: static; }
781 782 .file-commit { display: none; }
782 783 .blame-commit { width: 200px; min-width: 150px; }
784 + .hero-grid { grid-template-columns: 1fr; gap: 30px; }
785 + .hero-terminal { transform: none; }
786 + .topnav-primary { display: none; }
787 + .search-trigger { width: auto; }
788 + .search-trigger span { display: none; }
789 + .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
790 + .bento > .repo-card:first-child { grid-column: span 2; }
783 791 }
784 792 @media (max-width: 640px) {
785 − .global-search { display: none; }
786 − .hero { flex-direction: column; align-items: flex-start; padding-top: 36px; }
787 − .hero-name { font-size: 27px; }
788 − .hero-avatar { width: 68px; height: 68px; border-radius: 19px; font-size: 21px; }
789 − .pinned-grid { grid-template-columns: 1fr; }
793 + .container { padding: 0 16px; }
794 + .topnav-inner { gap: 10px; }
795 + .brand-tag, .topnav-ext, .eyebrow-more { display: none; }
796 + .hero { padding-top: 28px; margin-bottom: 44px; }
797 + .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 34px; }
798 + .stat-value { font-size: 28px; }
799 + .bento, .repo-grid { grid-template-columns: 1fr; }
800 + .bento > .repo-card:first-child { grid-column: auto; }
801 + .bento > .repo-card:first-child .spark { width: 120px; height: 34px; }
802 + .repo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
790 803 .clone-url { width: 100%; max-width: none; }
804 + .clone-box { padding-left: 12px; }
791 805 .repo-toolbar { flex-direction: column; align-items: stretch; }
792 806 .file-date { display: none; }
793 − .readme-section .markdown-body, .blob-markdown { padding: 16px; }
807 + .readme-section .markdown-body, .blob-markdown { padding: 18px; }
794 808 .pdf-frame { height: 70vh; min-height: 420px; }
795 − .footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
809 + .footer-grid { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px 20px; }
810 + .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 22px; }
811 + .repo-filters input { width: 100%; }
812 + .repo-filters { width: 100%; }
813 + .repo-filters select { flex: 1; }
814 + .commit-row { flex-wrap: wrap; }
815 + .commit-row .sha-chip { order: 3; margin-left: 42px; }
816 + .hero-terminal { display: none; }
817 + .term-body { min-height: 0; }
818 + .stack { grid-template-columns: 96px 1fr; }
819 + .ring { width: 96px; height: 96px; }
796 820 }
modified src/web/assets/css/tokens.css +146 −146
@@ -5,173 +5,165 @@
5 5 * Author : Simon-Pierre Boucher
6 6 * Contact : contact@spboucher.ai
7 7 * File : src/web/assets/css/tokens.css
8 − * Purpose : Design tokens v3 "Nightforge" — electric palette, aurora, depth
8 + * Purpose : Design tokens v4 "Monolith" — obsidian canvas, electric + ember accents, display type
9 9 * License : MIT © Simon-Pierre Boucher
10 10 * ─────────────────────────────────────────────
11 11 */
12 12
13 −@font-face {
14 − font-family: 'Inter';
15 − src: url('/assets/fonts/inter-400.woff2') format('woff2');
16 − font-weight: 400;
17 − font-style: normal;
18 − font-display: swap;
19 −}
20 −@font-face {
21 − font-family: 'Inter';
22 − src: url('/assets/fonts/inter-500.woff2') format('woff2');
23 − font-weight: 500;
24 − font-style: normal;
25 − font-display: swap;
26 −}
27 −@font-face {
28 − font-family: 'Inter';
29 − src: url('/assets/fonts/inter-600.woff2') format('woff2');
30 − font-weight: 600;
31 − font-style: normal;
32 − font-display: swap;
33 −}
34 −@font-face {
35 − font-family: 'Inter';
36 − src: url('/assets/fonts/inter-700.woff2') format('woff2');
37 − font-weight: 700;
38 − font-style: normal;
39 − font-display: swap;
40 −}
41 −@font-face {
42 − font-family: 'JetBrains Mono';
43 − src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
44 − font-weight: 400;
45 − font-style: normal;
46 − font-display: swap;
47 −}
48 −@font-face {
49 − font-family: 'JetBrains Mono';
50 − src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2');
51 − font-weight: 600;
52 − font-style: normal;
53 − font-display: swap;
54 −}
13 +/* ── Self-hosted type ────────────────────────
14 + Inter (UI) · JetBrains Mono (code) · Bricolage Grotesque (display) · Instrument Serif (accent italic) */
15 +@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
16 +@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
17 +@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
18 +@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
19 +@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
20 +@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
21 +@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
22 +@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
23 +@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
55 24
56 25 :root,
57 26 html[data-theme='dark'] {
58 − /* canvas */
59 − --bg: #05070c;
60 − --bg-glow-1: rgba(124, 154, 255, 0.09);
61 − --bg-glow-2: rgba(52, 227, 176, 0.055);
62 − --bg-glow-3: rgba(192, 132, 252, 0.07);
63 − --bg-glow-4: rgba(56, 207, 253, 0.06);
27 + /* canvas — obsidian, near-black with a cold blue cast */
28 + --bg: #04060b;
29 + --bg-elev: #070a12;
30 + --mesh-1: rgba(124, 154, 255, 0.16);
31 + --mesh-2: rgba(52, 227, 176, 0.10);
32 + --mesh-3: rgba(192, 132, 252, 0.13);
33 + --mesh-4: rgba(56, 207, 253, 0.11);
34 + --mesh-5: rgba(255, 138, 61, 0.07);
35 + --grid-line: rgba(255, 255, 255, 0.035);
64 36
65 37 /* surfaces & lines */
66 − --surface: #0d1119;
67 − --surface-2: #131826;
68 − --surface-3: #1a2033;
69 − --surface-grad: linear-gradient(180deg, #10151f 0%, #0c1018 100%);
70 − --border: #1d2434;
71 − --border-strong: #2b3550;
72 − --edge-light: rgba(255, 255, 255, 0.055); /* 1px inner top highlight */
38 + --surface: #0b0f18;
39 + --surface-2: #111726;
40 + --surface-3: #182034;
41 + --surface-grad: linear-gradient(180deg, rgba(20, 26, 42, 0.92) 0%, rgba(10, 14, 23, 0.94) 100%);
42 + --glass: rgba(11, 15, 24, 0.66);
43 + --border: rgba(255, 255, 255, 0.075);
44 + --border-strong: rgba(255, 255, 255, 0.15);
45 + --edge-light: rgba(255, 255, 255, 0.07);
73 46
74 47 /* text */
75 − --text: #e7eaf3;
76 − --text-bright: #f6f8fd;
77 − --muted: #8d95ab;
78 − --faint: #5b6478;
79 −
80 − /* accents */
81 − --accent: #7c9aff;
82 − --accent-hover: #9ab2ff;
83 − --accent-soft: rgba(124, 154, 255, 0.15);
84 − --accent-glow: rgba(124, 154, 255, 0.4);
85 − --accent-2: #34e3b0;
86 − --accent-2-soft: rgba(52, 227, 176, 0.13);
87 − --accent-3: #c084fc;
88 − --accent-3-soft: rgba(192, 132, 252, 0.13);
48 + --text: #e6e9f2;
49 + --text-bright: #ffffff;
50 + --muted: #8f97ad;
51 + --faint: #5a637a;
52 +
53 + /* accents — electric family */
54 + --accent: #86a4ff;
55 + --accent-hover: #a7bcff;
56 + --accent-soft: rgba(134, 164, 255, 0.14);
57 + --accent-glow: rgba(134, 164, 255, 0.42);
58 + --accent-2: #3ff0bd;
59 + --accent-2-soft: rgba(63, 240, 189, 0.13);
60 + --accent-3: #c996ff;
61 + --accent-3-soft: rgba(201, 150, 255, 0.13);
62 + --cyan: #46d6ff;
63 + /* ember — the warm counterpoint (activity, heat, streaks) */
64 + --ember: #ff8a3d;
65 + --ember-2: #ffc857;
66 + --ember-soft: rgba(255, 138, 61, 0.14);
67 + --ember-glow: rgba(255, 138, 61, 0.45);
89 68
90 69 /* gradients */
91 − --gradient-brand: linear-gradient(120deg, #7c9aff 0%, #38cffd 52%, #34e3b0 100%);
92 − --gradient-hot: linear-gradient(115deg, #c084fc 0%, #7c9aff 30%, #38cffd 62%, #34e3b0 100%);
93 − --gradient-text: linear-gradient(100deg, #f6f8fd 0%, #c9d6ff 45%, #7c9aff 80%, #38cffd 100%);
94 − --gradient-border:
95 − linear-gradient(140deg, rgba(124, 154, 255, 0.85), rgba(56, 207, 253, 0.55) 45%, rgba(52, 227, 176, 0.75));
70 + --gradient-brand: linear-gradient(120deg, #86a4ff 0%, #46d6ff 52%, #3ff0bd 100%);
71 + --gradient-hot: linear-gradient(115deg, #c996ff 0%, #86a4ff 30%, #46d6ff 62%, #3ff0bd 100%);
72 + --gradient-ember: linear-gradient(120deg, #ff5c7a 0%, #ff8a3d 55%, #ffc857 100%);
73 + --gradient-text: linear-gradient(100deg, #ffffff 0%, #d7e0ff 40%, #86a4ff 75%, #46d6ff 100%);
74 + --gradient-border: linear-gradient(140deg, rgba(134, 164, 255, 0.9), rgba(70, 214, 255, 0.5) 45%, rgba(63, 240, 189, 0.8));
96 75
97 76 /* status */
98 77 --danger: #ff6b6b;
99 78 --success: #3fd06a;
100 − --warning: #e8b339;
79 + --warning: #ffc857;
101 80
102 81 /* diff */
103 − --add-bg: rgba(63, 208, 106, 0.13);
82 + --add-bg: rgba(63, 208, 106, 0.12);
104 83 --add-bg-strong: rgba(63, 208, 106, 0.26);
105 − --add-text: #5be381;
106 − --del-bg: rgba(255, 99, 99, 0.12);
84 + --add-text: #5fe888;
85 + --del-bg: rgba(255, 99, 99, 0.11);
107 86 --del-bg-strong: rgba(255, 99, 99, 0.26);
108 − --del-text: #ff8585;
109 − --hunk-bg: rgba(124, 154, 255, 0.08);
87 + --del-text: #ff8a8a;
88 + --hunk-bg: rgba(134, 164, 255, 0.08);
110 89
111 90 /* code */
112 − --code-bg: #090c13;
113 − --code-head: #10141f;
114 − --chip-bg: rgba(124, 154, 255, 0.13);
115 −
116 − /* heatmap */
117 − --heat-0: #12172386;
118 − --heat-1: #133a54;
119 − --heat-2: #14639c;
120 − --heat-3: #38cffd;
121 − --heat-4: #9be9ff;
122 − --heat-glow: rgba(56, 207, 253, 0.55);
91 + --code-bg: #070a11;
92 + --code-head: #0d1220;
93 + --chip-bg: rgba(134, 164, 255, 0.13);
94 +
95 + /* heatmap — cold to ember */
96 + --heat-0: rgba(255, 255, 255, 0.045);
97 + --heat-1: #173a5e;
98 + --heat-2: #1c6aa8;
99 + --heat-3: #46d6ff;
100 + --heat-4: #ffc857;
101 + --heat-glow: rgba(255, 200, 87, 0.65);
123 102
124 103 /* geometry & type */
104 + --radius-sm: 8px;
125 105 --radius: 12px;
126 − --radius-lg: 16px;
106 + --radius-lg: 18px;
107 + --radius-xl: 26px;
127 108 --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
128 109 --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
110 + --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
111 + --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
129 112
130 113 /* depth */
131 − --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
132 − --shadow-2: 0 8px 28px -10px rgba(0, 0, 0, 0.6);
133 − --shadow-card: 0 18px 50px -20px rgba(0, 0, 0, 0.75), 0 0 40px -18px var(--accent-glow);
134 − --shadow-pop: 0 24px 80px -24px rgba(0, 0, 0, 0.85);
135 − --ring: 0 0 0 3px rgba(124, 154, 255, 0.35);
136 − --nav-bg: rgba(5, 7, 12, 0.72);
137 − --backdrop: rgba(3, 4, 8, 0.66);
114 + --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
115 + --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
116 + --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.85), 0 0 50px -20px var(--accent-glow);
117 + --shadow-pop: 0 30px 90px -26px rgba(0, 0, 0, 0.9);
118 + --ring: 0 0 0 3px rgba(134, 164, 255, 0.35);
119 + --nav-bg: rgba(4, 6, 11, 0.62);
120 + --backdrop: rgba(2, 3, 7, 0.7);
138 121 color-scheme: dark;
139 122 }
140 123
141 124 html[data-theme='light'] {
142 − --bg: #f5f7fd;
143 − --bg-glow-1: rgba(76, 111, 255, 0.075);
144 − --bg-glow-2: rgba(12, 166, 120, 0.05);
145 − --bg-glow-3: rgba(147, 51, 234, 0.05);
146 − --bg-glow-4: rgba(2, 148, 212, 0.055);
125 + --bg: #f3f5fb;
126 + --bg-elev: #ffffff;
127 + --mesh-1: rgba(76, 111, 255, 0.13);
128 + --mesh-2: rgba(12, 166, 120, 0.08);
129 + --mesh-3: rgba(147, 51, 234, 0.08);
130 + --mesh-4: rgba(2, 148, 212, 0.09);
131 + --mesh-5: rgba(255, 120, 40, 0.06);
132 + --grid-line: rgba(20, 30, 60, 0.05);
147 133
148 134 --surface: #ffffff;
149 − --surface-2: #f0f3fa;
150 − --surface-3: #e7ebf6;
151 − --surface-grad: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
152 − --border: #dde3f0;
153 − --border-strong: #c2cbdf;
154 − --edge-light: rgba(255, 255, 255, 0.85);
155 −
156 − --text: #1b2233;
157 − --text-bright: #0c1224;
158 − --muted: #566078;
159 − --faint: #8a93a9;
160 −
161 − --accent: #4c6fff;
162 − --accent-hover: #3557e8;
163 − --accent-soft: rgba(76, 111, 255, 0.11);
164 − --accent-glow: rgba(76, 111, 255, 0.3);
165 − --accent-2: #0ca678;
166 − --accent-2-soft: rgba(12, 166, 120, 0.11);
167 − --accent-3: #9333ea;
168 − --accent-3-soft: rgba(147, 51, 234, 0.1);
169 −
170 − --gradient-brand: linear-gradient(120deg, #4c6fff 0%, #0294d4 52%, #0ca678 100%);
171 − --gradient-hot: linear-gradient(115deg, #9333ea 0%, #4c6fff 30%, #0294d4 62%, #0ca678 100%);
172 − --gradient-text: linear-gradient(100deg, #0c1224 0%, #23346c 45%, #4c6fff 85%);
173 − --gradient-border:
174 − linear-gradient(140deg, rgba(76, 111, 255, 0.7), rgba(2, 148, 212, 0.45) 45%, rgba(12, 166, 120, 0.6));
135 + --surface-2: #f1f4fa;
136 + --surface-3: #e7ecf6;
137 + --surface-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 251, 254, 0.96) 100%);
138 + --glass: rgba(255, 255, 255, 0.7);
139 + --border: rgba(20, 30, 60, 0.09);
140 + --border-strong: rgba(20, 30, 60, 0.18);
141 + --edge-light: rgba(255, 255, 255, 0.9);
142 +
143 + --text: #1a2133;
144 + --text-bright: #0a1020;
145 + --muted: #58627b;
146 + --faint: #8b94aa;
147 +
148 + --accent: #4360f0;
149 + --accent-hover: #2f4bd6;
150 + --accent-soft: rgba(67, 96, 240, 0.1);
151 + --accent-glow: rgba(67, 96, 240, 0.3);
152 + --accent-2: #0a9f74;
153 + --accent-2-soft: rgba(10, 159, 116, 0.11);
154 + --accent-3: #8b32e0;
155 + --accent-3-soft: rgba(139, 50, 224, 0.1);
156 + --cyan: #0a8fd0;
157 + --ember: #f0741e;
158 + --ember-2: #d99a00;
159 + --ember-soft: rgba(240, 116, 30, 0.12);
160 + --ember-glow: rgba(240, 116, 30, 0.35);
161 +
162 + --gradient-brand: linear-gradient(120deg, #4360f0 0%, #0a8fd0 52%, #0a9f74 100%);
163 + --gradient-hot: linear-gradient(115deg, #8b32e0 0%, #4360f0 30%, #0a8fd0 62%, #0a9f74 100%);
164 + --gradient-ember: linear-gradient(120deg, #e8365d 0%, #f0741e 55%, #d99a00 100%);
165 + --gradient-text: linear-gradient(100deg, #0a1020 0%, #1f2f6e 45%, #4360f0 85%);
166 + --gradient-border: linear-gradient(140deg, rgba(67, 96, 240, 0.7), rgba(10, 143, 208, 0.45) 45%, rgba(10, 159, 116, 0.6));
175 167
176 168 --danger: #d33636;
177 169 --success: #1a7f37;
@@ -183,26 +175,26 @@ html[data-theme='light'] {
183 175 --del-bg: rgba(207, 34, 46, 0.09);
184 176 --del-bg-strong: rgba(207, 34, 46, 0.2);
185 177 --del-text: #cf222e;
186 − --hunk-bg: rgba(76, 111, 255, 0.07);
178 + --hunk-bg: rgba(67, 96, 240, 0.07);
187 179
188 − --code-bg: #f7f9fd;
180 + --code-bg: #f8f9fd;
189 181 --code-head: #eef1f8;
190 − --chip-bg: rgba(76, 111, 255, 0.1);
182 + --chip-bg: rgba(67, 96, 240, 0.1);
191 183
192 − --heat-0: #e8ecf4;
193 − --heat-1: #bfe3ff;
194 − --heat-2: #6cc0f7;
195 − --heat-3: #2492e0;
196 − --heat-4: #0b5cad;
197 − --heat-glow: rgba(36, 146, 224, 0.4);
184 + --heat-0: rgba(20, 30, 60, 0.07);
185 + --heat-1: #bfe0ff;
186 + --heat-2: #63b3f5;
187 + --heat-3: #1f7fd6;
188 + --heat-4: #f0741e;
189 + --heat-glow: rgba(240, 116, 30, 0.45);
198 190
199 191 --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
200 − --shadow-2: 0 8px 28px -12px rgba(16, 24, 40, 0.18);
201 − --shadow-card: 0 18px 50px -24px rgba(16, 24, 40, 0.28), 0 0 36px -20px var(--accent-glow);
202 − --shadow-pop: 0 24px 80px -28px rgba(16, 24, 40, 0.35);
203 − --ring: 0 0 0 3px rgba(76, 111, 255, 0.28);
204 − --nav-bg: rgba(245, 247, 253, 0.78);
205 − --backdrop: rgba(18, 24, 40, 0.4);
192 + --shadow-2: 0 10px 30px -14px rgba(16, 24, 40, 0.2);
193 + --shadow-card: 0 24px 60px -28px rgba(16, 24, 40, 0.3), 0 0 40px -22px var(--accent-glow);
194 + --shadow-pop: 0 30px 90px -30px rgba(16, 24, 40, 0.4);
195 + --ring: 0 0 0 3px rgba(67, 96, 240, 0.28);
196 + --nav-bg: rgba(243, 245, 251, 0.7);
197 + --backdrop: rgba(18, 24, 40, 0.42);
206 198 color-scheme: light;
207 199 }
208 200
@@ -218,9 +210,17 @@ html[data-theme='light'] .shiki span {
218 210 background-color: transparent !important;
219 211 }
220 212
213 +/* Cross-document view transitions (Chromium/Safari) — soft crossfade between pages */
214 +@view-transition { navigation: auto; }
215 +::view-transition-old(root) { animation: 160ms ease-out both vt-fade-out; }
216 +::view-transition-new(root) { animation: 220ms ease-out both vt-fade-in; }
217 +@keyframes vt-fade-out { to { opacity: 0; } }
218 +@keyframes vt-fade-in { from { opacity: 0; } }
219 +
221 220 @media (prefers-reduced-motion: reduce) {
222 221 *, *::before, *::after {
223 222 animation-duration: 0.01ms !important;
224 223 transition-duration: 0.01ms !important;
225 224 }
225 + ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
226 226 }
added src/web/assets/fonts/og/bricolage-800.woff +0 −0

Binary file not shown.

modified src/web/assets/js/app.js +342 −81
@@ -5,7 +5,7 @@
5 5 * Author : Simon-Pierre Boucher
6 6 * Contact : contact@spboucher.ai
7 7 * File : src/web/assets/js/app.js
8 − * Purpose : Vanilla JS layer — theme, copy, filters, anchors, mermaid, ⌘K, spotlight
8 + * Purpose : Vanilla JS layer v4 — theme, ⌘K commands, constellation hero, count-up, reveal, TOC, terminal
9 9 * License : MIT © Simon-Pierre Boucher
10 10 * ─────────────────────────────────────────────
11 11 */
@@ -13,29 +13,21 @@
13 13 (function () {
14 14 'use strict';
15 15
16 + document.documentElement.classList.remove('no-js');
17 + var reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
18 + var fmt = function (n) { return new Intl.NumberFormat('en-US').format(n); };
19 +
16 20 /* ── Theme toggle ─────────────────────────── */
17 21 var toggle = document.getElementById('theme-toggle');
18 − if (toggle) {
19 − toggle.addEventListener('click', function () {
20 − var html = document.documentElement;
21 − var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
22 − html.setAttribute('data-theme', next);
23 − try { localStorage.setItem('spbgit-theme', next); } catch (e) { /* ignore */ }
24 − });
25 − }
26 −
27 − /* ── "/" focuses the global search ────────── */
28 − document.addEventListener('keydown', function (event) {
29 − if (event.key !== '/' || event.metaKey || event.ctrlKey || event.altKey) return;
30 − var target = event.target;
31 − if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;
32 − var input = document.getElementById('global-search');
33 − if (input) {
34 − event.preventDefault();
35 − input.focus();
36 − input.select();
37 − }
38 − });
22 + var setTheme = function (next) {
23 + document.documentElement.setAttribute('data-theme', next);
24 + try { localStorage.setItem('spbgit-theme', next); } catch (e) { /* ignore */ }
25 + document.dispatchEvent(new CustomEvent('spbgit:theme', { detail: next }));
26 + };
27 + var flipTheme = function () {
28 + setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
29 + };
30 + if (toggle) toggle.addEventListener('click', flipTheme);
39 31
40 32 /* ── Copy buttons ─────────────────────────── */
41 33 document.addEventListener('click', function (event) {
@@ -46,11 +38,11 @@
46 38 navigator.clipboard.writeText(text).then(function () {
47 39 btn.classList.add('copied');
48 40 var prev = btn.textContent;
49 − btn.textContent = '✓';
41 + btn.textContent = '✓ Copied';
50 42 setTimeout(function () {
51 43 btn.classList.remove('copied');
52 44 btn.textContent = prev;
53 − }, 1200);
45 + }, 1300);
54 46 });
55 47 });
56 48
@@ -62,7 +54,6 @@
62 54 var container = scope ? document.querySelector(scope) : btn.closest('.code-block');
63 55 var pre = container ? container.querySelector('pre') : null;
64 56 if (!pre) return;
65 − // Strip line-number anchors from the copied text.
66 57 var clone = pre.cloneNode(true);
67 58 clone.querySelectorAll('a.ln').forEach(function (a) { a.remove(); });
68 59 navigator.clipboard.writeText(clone.textContent).then(function () {
@@ -85,6 +76,7 @@
85 76 var langSelect = document.getElementById('repo-lang');
86 77 var topicSelect = document.getElementById('repo-topic');
87 78 var emptyNote = document.getElementById('repo-list-empty');
79 + var countBadge = document.getElementById('repo-count');
88 80
89 81 var apply = function () {
90 82 var q = (filterInput.value || '').toLowerCase();
@@ -105,15 +97,17 @@
105 97 if (show) visible += 1;
106 98 });
107 99 var key = sortSelect.value;
108 − var attr = key === 'name' ? 'data-name' : key === 'created' ? 'data-created' : 'data-pushed';
100 + var attr = key === 'name' ? 'data-name' : key === 'created' ? 'data-created' : key === 'commits' ? 'data-commits' : 'data-pushed';
109 101 cards
110 102 .sort(function (a, b) {
111 103 var av = a.getAttribute(attr) || '';
112 104 var bv = b.getAttribute(attr) || '';
105 + if (key === 'commits') return (parseInt(bv, 10) || 0) - (parseInt(av, 10) || 0);
113 106 return key === 'name' ? av.localeCompare(bv) : bv.localeCompare(av);
114 107 })
115 108 .forEach(function (card) { list.appendChild(card); });
116 109 if (emptyNote) emptyNote.hidden = visible > 0;
110 + if (countBadge) countBadge.textContent = fmt(visible);
117 111 };
118 112 [filterInput, sortSelect, langSelect, topicSelect].forEach(function (el) {
119 113 if (!el) return;
@@ -130,18 +124,28 @@
130 124 var kind = refSelect.getAttribute('data-kind') || 'tree';
131 125 var path = refSelect.getAttribute('data-path') || '';
132 126 var ref = refSelect.value;
133 − var url = '/' + repo + '/' + kind + '/' + ref + (path ? '/' + path : '');
134 − location.href = url;
127 + location.href = '/' + repo + '/' + kind + '/' + ref + (path ? '/' + path : '');
135 128 });
136 129 }
137 130
138 − /* ── Line range highlighting (#L10-L20) ───── */
131 + /* ── Blob: soft-wrap toggle + line ranges ─── */
139 132 var codeView = document.getElementById('code-view');
133 + var wrapToggle = document.getElementById('wrap-toggle');
134 + if (codeView && wrapToggle) {
135 + var wrapPref = null;
136 + try { wrapPref = localStorage.getItem('spbgit-wrap'); } catch (e) { /* ignore */ }
137 + var setWrap = function (on) {
138 + codeView.classList.toggle('wrap', on);
139 + wrapToggle.setAttribute('aria-pressed', on ? 'true' : 'false');
140 + wrapToggle.classList.toggle('copied', on);
141 + try { localStorage.setItem('spbgit-wrap', on ? '1' : '0'); } catch (e) { /* ignore */ }
142 + };
143 + if (wrapPref === '1') setWrap(true);
144 + wrapToggle.addEventListener('click', function () { setWrap(!codeView.classList.contains('wrap')); });
145 + }
140 146 if (codeView) {
141 147 var applyRange = function () {
142 − codeView.querySelectorAll('.line.range-hl').forEach(function (el) {
143 − el.classList.remove('range-hl');
144 − });
148 + codeView.querySelectorAll('.line.range-hl').forEach(function (el) { el.classList.remove('range-hl'); });
145 149 var match = /^#L(\d+)(?:-L(\d+))?$/.exec(location.hash);
146 150 if (!match) return;
147 151 var start = parseInt(match[1], 10);
@@ -156,7 +160,6 @@
156 160 };
157 161 applyRange();
158 162 window.addEventListener('hashchange', applyRange);
159 − // Shift-click a line number to extend the selection into a range.
160 163 codeView.addEventListener('click', function (event) {
161 164 var anchor = event.target.closest('a.ln');
162 165 if (!anchor || !event.shiftKey) return;
@@ -170,15 +173,231 @@
170 173 });
171 174 }
172 175
173 − /* ── Card spotlight (mouse-tracking glow) ─── */
176 + /* ── Spotlight (mouse-tracking glow) on .spot ─ */
174 177 document.addEventListener('pointermove', function (event) {
175 − var card = event.target.closest ? event.target.closest('.repo-card') : null;
178 + var card = event.target.closest ? event.target.closest('.spot') : null;
176 179 if (!card) return;
177 180 var rect = card.getBoundingClientRect();
178 181 card.style.setProperty('--mx', (event.clientX - rect.left) + 'px');
179 182 card.style.setProperty('--my', (event.clientY - rect.top) + 'px');
180 183 }, { passive: true });
181 184
185 + /* ── Scroll reveal ────────────────────────── */
186 + var revealEls = document.querySelectorAll('.reveal');
187 + if (revealEls.length && 'IntersectionObserver' in window && !reduceMotion) {
188 + var io = new IntersectionObserver(function (entries) {
189 + entries.forEach(function (entry) {
190 + if (entry.isIntersecting) { entry.target.classList.add('in'); io.unobserve(entry.target); }
191 + });
192 + }, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });
193 + revealEls.forEach(function (el) { io.observe(el); });
194 + } else {
195 + revealEls.forEach(function (el) { el.classList.add('in'); });
196 + }
197 +
198 + /* ── Count-up numerals ────────────────────── */
199 + var counters = document.querySelectorAll('[data-count]');
200 + if (counters.length && !reduceMotion) {
201 + counters.forEach(function (el) {
202 + var target = parseInt(el.getAttribute('data-count'), 10);
203 + if (!Number.isFinite(target) || target <= 0) return;
204 + var start = null;
205 + var dur = 1100 + Math.min(900, target / 40);
206 + var step = function (ts) {
207 + if (start === null) start = ts;
208 + var p = Math.min(1, (ts - start) / dur);
209 + var eased = 1 - Math.pow(2, -10 * p);
210 + el.textContent = fmt(Math.round(target * eased));
211 + if (p < 1) requestAnimationFrame(step); else el.textContent = fmt(target);
212 + };
213 + el.textContent = '0';
214 + requestAnimationFrame(step);
215 + });
216 + }
217 +
218 + /* ── Hero constellation (git graph drifting) ─ */
219 + var canvas = document.getElementById('hero-canvas');
220 + if (canvas && canvas.getContext) {
221 + var ctx = canvas.getContext('2d');
222 + var nodes = [];
223 + var W = 0;
224 + var H = 0;
225 + var dpr = Math.min(2, window.devicePixelRatio || 1);
226 + var running = true;
227 + var last = 0;
228 + var palette = function () {
229 + var light = document.documentElement.getAttribute('data-theme') === 'light';
230 + return light
231 + ? ['67,96,240', '10,143,208', '10,159,116', '139,50,224', '240,116,30']
232 + : ['134,164,255', '70,214,255', '63,240,189', '201,150,255', '255,138,61'];
233 + };
234 + var colors = palette();
235 + document.addEventListener('spbgit:theme', function () { colors = palette(); });
236 + var resize = function () {
237 + var rect = canvas.getBoundingClientRect();
238 + W = rect.width; H = rect.height;
239 + canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr);
240 + ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
241 + var count = Math.max(28, Math.min(80, Math.round((W * H) / 14000)));
242 + nodes = [];
243 + for (var i = 0; i < count; i += 1) {
244 + nodes.push({
245 + x: Math.random() * W, y: Math.random() * H,
246 + vx: (Math.random() - 0.5) * 0.16, vy: (Math.random() - 0.5) * 0.12,
247 + r: 1.2 + Math.random() * 1.8, c: Math.floor(Math.random() * colors.length),
248 + phase: Math.random() * Math.PI * 2,
249 + });
250 + }
251 + };
252 + var LINK = 150;
253 + var draw = function (ts) {
254 + if (!running) return;
255 + var dt = last ? Math.min(40, ts - last) : 16;
256 + last = ts;
257 + ctx.clearRect(0, 0, W, H);
258 + var i; var j;
259 + for (i = 0; i < nodes.length; i += 1) {
260 + var n = nodes[i];
261 + n.x += n.vx * dt * 0.06; n.y += n.vy * dt * 0.06;
262 + if (n.x < -10) n.x = W + 10; else if (n.x > W + 10) n.x = -10;
263 + if (n.y < -10) n.y = H + 10; else if (n.y > H + 10) n.y = -10;
264 + }
265 + ctx.lineWidth = 1;
266 + for (i = 0; i < nodes.length; i += 1) {
267 + for (j = i + 1; j < nodes.length; j += 1) {
268 + var a = nodes[i]; var b = nodes[j];
269 + var dx = a.x - b.x; var dy = a.y - b.y;
270 + var d2 = dx * dx + dy * dy;
271 + if (d2 > LINK * LINK) continue;
272 + var alpha = (1 - Math.sqrt(d2) / LINK) * 0.28;
273 + ctx.strokeStyle = 'rgba(' + colors[a.c] + ',' + alpha.toFixed(3) + ')';
274 + ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
275 + }
276 + }
277 + for (i = 0; i < nodes.length; i += 1) {
278 + var p = nodes[i];
279 + var pulse = 0.65 + 0.35 * Math.sin(ts / 900 + p.phase);
280 + ctx.fillStyle = 'rgba(' + colors[p.c] + ',' + (0.55 * pulse + 0.25).toFixed(3) + ')';
281 + ctx.shadowColor = 'rgba(' + colors[p.c] + ',0.9)';
282 + ctx.shadowBlur = 8 * pulse;
283 + ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
284 + }
285 + ctx.shadowBlur = 0;
286 + if (!reduceMotion) requestAnimationFrame(draw);
287 + };
288 + resize();
289 + window.addEventListener('resize', function () { resize(); if (reduceMotion) draw(0); });
290 + requestAnimationFrame(draw);
291 + document.addEventListener('visibilitychange', function () {
292 + running = !document.hidden;
293 + if (running) { last = 0; requestAnimationFrame(draw); }
294 + });
295 + if ('IntersectionObserver' in window) {
296 + new IntersectionObserver(function (entries) {
297 + var visible = entries[0].isIntersecting;
298 + if (visible && !running) { running = true; last = 0; requestAnimationFrame(draw); }
299 + if (!visible) running = false;
300 + }).observe(canvas);
301 + }
302 + }
303 +
304 + /* ── Hero terminal typewriter ─────────────── */
305 + var term = document.getElementById('hero-terminal');
306 + var termBody = document.getElementById('term-body');
307 + if (term && termBody && !reduceMotion) {
308 + var repos = (term.getAttribute('data-repos') || '').split(',').filter(Boolean);
309 + var origin = term.getAttribute('data-origin') || '';
310 + var totalRepos = (function () {
311 + var el = document.querySelector('[data-count]');
312 + return el ? el.getAttribute('data-count') : '';
313 + })();
314 + var idx = 0;
315 + var line = function (cls, html) {
316 + var div = document.createElement('div');
317 + div.className = 'term-line' + (cls ? ' ' + cls : '');
318 + div.innerHTML = html;
319 + return div;
320 + };
321 + var typeCommand = function (text, done) {
322 + termBody.innerHTML = '';
323 + var row = line('', '<span class="term-prompt">$</span><span class="term-cmd"></span><span class="term-caret"></span>');
324 + termBody.appendChild(row);
325 + var cmd = row.querySelector('.term-cmd');
326 + var i = 0;
327 + var tick = function () {
328 + cmd.textContent = text.slice(0, i);
329 + i += 1;
330 + if (i <= text.length) setTimeout(tick, 22 + Math.random() * 40); else setTimeout(done, 350);
331 + };
332 + tick();
333 + };
334 + var cycle = function () {
335 + if (!repos.length) return;
336 + var repo = repos[idx % repos.length];
337 + idx += 1;
338 + typeCommand('git clone ' + origin + '/' + repo + '.git', function () {
339 + var caret = termBody.querySelector('.term-caret');
340 + if (caret) caret.remove();
341 + var outs = [
342 + ["term-out", "Cloning into '" + repo + "'…"],
343 + ['term-out', 'remote: SPB Git · ' + (totalRepos ? fmt(parseInt(totalRepos, 10)) + ' public repositories' : 'public forge')],
344 + ['term-out', 'Receiving objects: 100% — done.'],
345 + ['term-out term-ok', 'Resolving deltas: 100% — done.'],
346 + ];
347 + var k = 0;
348 + var emit = function () {
349 + if (k < outs.length) {
350 + termBody.appendChild(line(outs[k][0], outs[k][1]));
351 + k += 1;
352 + setTimeout(emit, 260 + Math.random() * 240);
353 + } else {
354 + termBody.appendChild(line('', '<span class="term-prompt">$</span><span class="term-caret"></span>'));
355 + setTimeout(cycle, 3400);
356 + }
357 + };
358 + setTimeout(emit, 260);
359 + });
360 + };
361 + setTimeout(cycle, 1800);
362 + }
363 +
364 + /* ── README table of contents ─────────────── */
365 + var readme = document.getElementById('readme');
366 + var toc = document.getElementById('readme-toc');
367 + var tocList = document.getElementById('readme-toc-list');
368 + var readmeLayout = document.getElementById('readme-layout');
369 + if (readme && toc && tocList && readmeLayout) {
370 + var heads = Array.prototype.slice.call(readme.querySelectorAll('h2[id], h3[id]'));
371 + if (heads.length >= 3) {
372 + var links = [];
373 + heads.forEach(function (h) {
374 + var li = document.createElement('li');
375 + li.className = 'depth-' + h.tagName.slice(1);
376 + var a = document.createElement('a');
377 + a.href = '#' + h.id;
378 + a.textContent = h.textContent.replace(/^#\s*/, '').trim();
379 + li.appendChild(a);
380 + tocList.appendChild(li);
381 + links.push(a);
382 + });
383 + toc.hidden = false;
384 + readmeLayout.classList.add('has-toc');
385 + if ('IntersectionObserver' in window) {
386 + var active = null;
387 + var spy = new IntersectionObserver(function (entries) {
388 + entries.forEach(function (entry) {
389 + if (!entry.isIntersecting) return;
390 + var id = entry.target.id;
391 + if (active) active.classList.remove('active');
392 + active = links.find(function (l) { return l.getAttribute('href') === '#' + id; }) || null;
393 + if (active) active.classList.add('active');
394 + });
395 + }, { rootMargin: '-90px 0px -70% 0px', threshold: 0 });
396 + heads.forEach(function (h) { spy.observe(h); });
397 + }
398 + }
399 + }
400 +
182 401 /* ── ⌘K command palette ───────────────────── */
183 402 var cmdk = document.getElementById('cmdk');
184 403 if (cmdk) {
@@ -188,7 +407,16 @@
188 407 var cmdkItems = [];
189 408 var cmdkIndex = 0;
190 409
191 − // Subsequence fuzzy match; lower score = better. Returns -1 on no match.
410 + var commands = [
411 + { name: 'Home', desc: 'All repositories', href: '/', icon: '⌂', keys: 'home index' },
412 + { name: 'Activity', desc: 'Latest pushes and tags', href: '/#activity', icon: '◉', keys: 'feed pushes' },
413 + { name: 'Commit calendar', desc: 'The last 52 weeks', href: '/#heatmap', icon: '▦', keys: 'heatmap streak' },
414 + { name: 'Toggle theme', desc: 'Dark ↔ light', action: flipTheme, icon: '◐', keys: 'dark light mode' },
415 + { name: 'JSON API', desc: '/api/v1/repos', href: '/api/v1/repos', icon: '{}', keys: 'api json' },
416 + { name: 'Atom feed', desc: '/feed.atom', href: '/feed.atom', icon: '≋', keys: 'rss atom feed' },
417 + { name: 'spboucher.ai', desc: 'Main site', href: 'https://spboucher.ai', icon: '↗', keys: 'site owner' },
418 + ];
419 +
192 420 var fuzzyScore = function (query, text) {
193 421 if (!query) return 0;
194 422 var q = query.toLowerCase();
@@ -206,63 +434,89 @@
206 434 return 100 + gaps;
207 435 };
208 436
437 + var addGroup = function (label) {
438 + var li = document.createElement('li');
439 + li.className = 'cmdk-group';
440 + li.textContent = label;
441 + cmdkList.appendChild(li);
442 + };
443 + var addItem = function (entry) {
444 + var li = document.createElement('li');
445 + li.className = 'cmdk-item';
446 + li.setAttribute('role', 'option');
447 + var icon = document.createElement('span');
448 + icon.className = 'cmdk-item-icon';
449 + icon.textContent = entry.icon || '›';
450 + li.appendChild(icon);
451 + var name = document.createElement('span');
452 + name.className = 'cmdk-item-name';
453 + name.textContent = entry.name;
454 + li.appendChild(name);
455 + if (entry.desc) {
456 + var desc = document.createElement('span');
457 + desc.className = 'cmdk-item-desc';
458 + desc.textContent = entry.desc;
459 + li.appendChild(desc);
460 + }
461 + if (entry.hint) {
462 + var hint = document.createElement('span');
463 + hint.className = 'cmdk-item-hint';
464 + hint.textContent = entry.hint;
465 + li.appendChild(hint);
466 + }
467 + li.__run = function () {
468 + if (entry.action) { entry.action(); cmdkClose(); } else if (entry.href) { location.href = entry.href; }
469 + };
470 + li.addEventListener('click', li.__run);
471 + li.addEventListener('pointerenter', function () { cmdkSelect(cmdkItems.indexOf(li)); });
472 + cmdkList.appendChild(li);
473 + cmdkItems.push(li);
474 + };
475 +
209 476 var cmdkRender = function () {
210 477 var query = cmdkInput.value.trim();
211 − var scored = [];
212 − (cmdkRepos || []).forEach(function (repo) {
213 − var haystack = repo.name + ' ' + (repo.description || '');
214 − var score = fuzzyScore(query, haystack);
215 − if (score !== -1) scored.push({ repo: repo, score: score });
216 − });
217 − scored.sort(function (a, b) { return a.score - b.score || a.repo.name.localeCompare(b.repo.name); });
218 − scored = scored.slice(0, 12);
219 478 cmdkList.innerHTML = '';
220 479 cmdkItems = [];
221 480 if (cmdkRepos === null) {
222 481 cmdkList.innerHTML = '<li class="cmdk-empty">Loading repositories…</li>';
223 482 return;
224 483 }
225 − if (!scored.length) {
484 + var scored = [];
485 + cmdkRepos.forEach(function (repo) {
486 + var score = fuzzyScore(query, repo.name + ' ' + (repo.description || '') + ' ' + (repo.topics || []).join(' '));
487 + if (score !== -1) scored.push({ repo: repo, score: score });
488 + });
489 + scored.sort(function (a, b) { return a.score - b.score || a.repo.name.localeCompare(b.repo.name); });
490 + scored = scored.slice(0, query ? 9 : 7);
491 + var cmds = commands.filter(function (c) { return fuzzyScore(query, c.name + ' ' + c.keys) !== -1; }).slice(0, query ? 4 : 3);
492 +
493 + if (scored.length) {
494 + addGroup(query ? 'Repositories' : 'Recently pushed');
495 + scored.forEach(function (entry) {
496 + addItem({ name: entry.repo.name, desc: entry.repo.description, hint: entry.repo.topLanguage || '', href: '/' + entry.repo.name, icon: '◇' });
497 + });
498 + }
499 + if (cmds.length) {
500 + addGroup('Commands');
501 + cmds.forEach(addItem);
502 + }
503 + if (query) {
504 + addGroup('Search');
505 + addItem({ name: 'Search “' + query + '”', desc: 'Names, topics and README content', href: '/search?q=' + encodeURIComponent(query), icon: '⌕', hint: '↵' });
506 + }
507 + if (!cmdkItems.length) {
226 508 var empty = document.createElement('li');
227 509 empty.className = 'cmdk-empty';
228 − empty.textContent = query ? 'No repository matches “' + query + '”' : 'No repositories yet.';
510 + empty.textContent = 'Nothing matches “' + query + '”';
229 511 cmdkList.appendChild(empty);
230 512 return;
231 513 }
232 − scored.forEach(function (entry, index) {
233 − var li = document.createElement('li');
234 − li.className = 'cmdk-item';
235 − li.setAttribute('role', 'option');
236 − li.setAttribute('data-href', '/' + entry.repo.name);
237 − var name = document.createElement('span');
238 − name.className = 'cmdk-item-name';
239 − name.textContent = entry.repo.name;
240 − li.appendChild(name);
241 − if (entry.repo.description) {
242 − var desc = document.createElement('span');
243 − desc.className = 'cmdk-item-desc';
244 − desc.textContent = entry.repo.description;
245 − li.appendChild(desc);
246 − }
247 − if (entry.repo.topLanguage) {
248 − var hint = document.createElement('span');
249 − hint.className = 'cmdk-item-hint';
250 − hint.textContent = entry.repo.topLanguage;
251 − li.appendChild(hint);
252 − }
253 − li.addEventListener('click', function () { location.href = li.getAttribute('data-href'); });
254 − li.addEventListener('pointerenter', function () { cmdkSelect(index); });
255 − cmdkList.appendChild(li);
256 − cmdkItems.push(li);
257 − });
258 514 cmdkSelect(0);
259 515 };
260 516
261 517 var cmdkSelect = function (index) {
262 518 cmdkIndex = Math.max(0, Math.min(index, cmdkItems.length - 1));
263 − cmdkItems.forEach(function (item, i) {
264 − item.setAttribute('aria-selected', i === cmdkIndex ? 'true' : 'false');
265 − });
519 + cmdkItems.forEach(function (item, i) { item.setAttribute('aria-selected', i === cmdkIndex ? 'true' : 'false'); });
266 520 var current = cmdkItems[cmdkIndex];
267 521 if (current) current.scrollIntoView({ block: 'nearest' });
268 522 };
@@ -285,25 +539,34 @@
285 539 document.body.classList.remove('cmdk-open');
286 540 };
287 541
288 − var opener = document.getElementById('cmdk-open');
289 − if (opener) opener.addEventListener('click', cmdkOpen);
542 + ['cmdk-open', 'cmdk-open-alt'].forEach(function (id) {
543 + var opener = document.getElementById(id);
544 + if (opener) opener.addEventListener('click', cmdkOpen);
545 + });
290 546 cmdk.addEventListener('click', function (event) {
291 547 if (event.target.closest('[data-cmdk-close]')) cmdkClose();
292 548 });
293 549 cmdkInput.addEventListener('input', cmdkRender);
294 550 document.addEventListener('keydown', function (event) {
551 + var target = event.target;
552 + var typing = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable);
295 553 if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
296 554 event.preventDefault();
297 555 if (cmdk.hidden) cmdkOpen(); else cmdkClose();
298 556 return;
299 557 }
558 + if (event.key === '/' && !typing && !event.metaKey && !event.ctrlKey && !event.altKey && cmdk.hidden) {
559 + event.preventDefault();
560 + cmdkOpen();
561 + return;
562 + }
300 563 if (cmdk.hidden) return;
301 564 if (event.key === 'Escape') { event.preventDefault(); cmdkClose(); }
302 565 else if (event.key === 'ArrowDown') { event.preventDefault(); cmdkSelect(cmdkIndex + 1); }
303 566 else if (event.key === 'ArrowUp') { event.preventDefault(); cmdkSelect(cmdkIndex - 1); }
304 567 else if (event.key === 'Enter') {
305 568 var current = cmdkItems[cmdkIndex];
306 − if (current) { event.preventDefault(); location.href = current.getAttribute('data-href'); }
569 + if (current && current.__run) { event.preventDefault(); current.__run(); }
307 570 }
308 571 });
309 572 }
@@ -327,9 +590,7 @@
327 590 target.innerHTML = result.svg; // mermaid output, securityLevel strict
328 591 block.setAttribute('data-rendered', '1');
329 592 })
330 − .catch(function () {
331 − block.setAttribute('data-rendered', '0');
332 − });
593 + .catch(function () { block.setAttribute('data-rendered', '0'); });
333 594 });
334 595 };
335 596 document.body.appendChild(script);
modified src/web/routes.mjs +39 −2
@@ -12,8 +12,9 @@
12 12
13 13 import nunjucks from 'nunjucks';
14 14 import { join, posix } from 'node:path';
15 +import { readFileSync } from 'node:fs';
15 16 import { PROJECT_ROOT } from '../config.mjs';
16 −import { repoOverview, allOverviews, siteStats } from '../lib/overview.mjs';
17 +import { repoOverview, allOverviews, siteStats, languageStack } from '../lib/overview.mjs';
17 18 import { search } from '../lib/search.mjs';
18 19 import { contributionCalendar } from '../stats/activity.mjs';
19 20 import { languageColor } from '../stats/languages.mjs';
@@ -54,9 +55,39 @@ export function setupViews(config) {
54 55 });
55 56 env.addGlobal('owner', config.owner);
56 57 env.addGlobal('publicUrl', config.publicUrl);
58 + env.addGlobal('assetVersion', packageVersion());
57 59 return env;
58 60 }
59 61
62 +/** package.json version — used for asset cache-busting and the footer. */
63 +function packageVersion() {
64 + try {
65 + return JSON.parse(readFileSync(join(PROJECT_ROOT, 'package.json'), 'utf8')).version ?? '0';
66 + } catch {
67 + return '0';
68 + }
69 +}
70 +
71 +/** Group a commit page by calendar day (UTC) for the timeline view. */
72 +function groupByDay(commits) {
73 + const days = [];
74 + let current = null;
75 + for (const commit of commits) {
76 + // Group on the author's own calendar day (the ISO prefix keeps the commit's offset).
77 + const iso = String(commit.date).slice(0, 10);
78 + if (!current || current.iso !== iso) {
79 + const d = new Date(`${iso}T00:00:00Z`);
80 + const label = Number.isNaN(d.getTime())
81 + ? iso
82 + : d.toLocaleDateString('en-US', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' });
83 + current = { iso, label, commits: [] };
84 + days.push(current);
85 + }
86 + current.commits.push(commit);
87 + }
88 + return days;
89 +}
90 +
60 91 /** Render a view with the standard page envelope. */
61 92 function makeRender(env, config) {
62 93 return function render(reply, template, data) {
@@ -187,9 +218,12 @@ export async function registerWeb(app, ctx) {
187 218 contributionCalendar(ctx),
188 219 ]);
189 220 const pinned = overviews.filter((o) => o.pinned).slice(0, 6);
190 − const activity = ctx.activity.recent(15);
221 + const activity = ctx.activity.recent(18);
191 222 const topics = [...new Set(overviews.flatMap((o) => o.topics))].sort();
192 223 const languages = [...new Set(overviews.map((o) => o.topLanguage).filter(Boolean))].sort();
224 + const stack = languageStack(overviews);
225 + const terminalRepos = (pinned.length ? pinned : overviews.filter((o) => !o.empty)).slice(0, 6).map((o) => o.name);
226 + if (terminalRepos.length === 0) terminalRepos.push('hello-world');
193 227 return render(reply, 'home.njk', {
194 228 title: 'SPB Git — Simon-Pierre Boucher',
195 229 description: 'Personal git platform of Simon-Pierre Boucher — every repository, public and clonable.',
@@ -200,6 +234,8 @@ export async function registerWeb(app, ctx) {
200 234 topics,
201 235 languages,
202 236 heatmap,
237 + stack,
238 + terminalRepos,
203 239 canonicalPath: '/',
204 240 });
205 241 });
@@ -548,6 +584,7 @@ export async function registerWeb(app, ctx) {
548 584 tab: 'commits',
549 585 currentRef: resolved.ref,
550 586 commits,
587 + days: groupByDay(commits),
551 588 page,
552 589 hasNext,
553 590 filterPath: path ?? '',
modified src/web/views/blob.njk +2 −1
@@ -5,7 +5,7 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/blob.njk
8 − Purpose : File view — sticky header, shiki code, line anchors
8 + Purpose : File view v4 — glass sticky header, wrap toggle, shiki code, line anchors
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
@@ -34,6 +34,7 @@
34 34 {% endif %}
35 35 {% endif %}
36 36 {% if view.kind == 'code' %}
37 + <button class="btn btn-sm" type="button" id="wrap-toggle" aria-pressed="false" title="Toggle soft wrap">Wrap</button>
37 38 <button class="btn btn-sm code-copy" type="button" data-code-copy data-code-target="#code-view" title="Copy file contents">
38 39 <span class="code-copy-label">Copy file</span>
39 40 </button>
modified src/web/views/commit.njk +17 −6
@@ -5,7 +5,7 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/commit.njk
8 − Purpose : Single commit — full diff with per-file collapsible hunks
8 + Purpose : Single commit v4 — header with diff bar, file jump list, collapsible highlighted diffs
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
@@ -22,17 +22,28 @@
22 22 <span class="muted">committed {{ commit.date | reltime }} ({{ commit.date | datefull }})</span>
23 23 <button class="sha-chip copy-btn" type="button" data-copy="{{ commit.sha }}" title="Copy full SHA">{{ commit.shortSha }}</button>
24 24 {% for parent in commit.parents %}
25 − <a class="muted" href="/{{ overview.name }}/commit/{{ parent }}">parent {{ parent | truncate(7, true, '') }}</a>
25 + <a class="muted mono" style="font-size:12px" href="/{{ overview.name }}/commit/{{ parent }}">parent {{ parent | truncate(7, true, '') }}</a>
26 26 {% endfor %}
27 27 </div>
28 + {% set total = (commit.additions + commit.deletions) or 1 %}
28 29 <p class="commit-stats">
29 − Showing <strong>{{ commit.files.length }}</strong> changed file{{ 's' if commit.files.length != 1 }}
30 − with <span class="diff-add">+{{ commit.additions | num }}</span> and <span class="diff-del">−{{ commit.deletions | num }}</span>
30 + <span><strong>{{ commit.files.length }}</strong> changed file{{ 's' if commit.files.length != 1 }}</span>
31 + <span class="diff-bar" aria-hidden="true"><i class="add" style="width:{{ (commit.additions / total * 100) | round }}%"></i><i class="del" style="width:{{ (commit.deletions / total * 100) | round }}%"></i></span>
32 + <span class="diff-add">+{{ commit.additions | num }}</span>
33 + <span class="diff-del">−{{ commit.deletions | num }}</span>
31 34 </p>
32 35 </header>
33 36
37 + {% if commit.files.length > 1 %}
38 + <nav class="diff-nav" aria-label="Changed files">
39 + {% for file in commit.files %}
40 + <a href="#diff-{{ loop.index }}"><span>{{ file.newPath or file.oldPath }}</span><span class="diff-add">+{{ file.additions }}</span><span class="diff-del">−{{ file.deletions }}</span></a>
41 + {% endfor %}
42 + </nav>
43 + {% endif %}
44 +
34 45 {% for file in commit.files %}
35 − <details class="diff-file" open>
46 + <details class="diff-file" id="diff-{{ loop.index }}" open>
36 47 <summary class="diff-file-header">
37 48 <span class="diff-status diff-status-{{ file.status }}">{{ file.status }}</span>
38 49 <code class="diff-path">{% if file.status == 'renamed' %}{{ file.oldPath }} → {% endif %}{{ file.newPath or file.oldPath }}</code>
@@ -57,7 +68,7 @@
57 68 </tbody>
58 69 </table>
59 70 </div>
60 − {% if file.truncated %}<p class="muted">Diff truncated — file too large.</p>{% endif %}
71 + {% if file.truncated %}<p class="muted" style="padding:10px 16px">Diff truncated — file too large.</p>{% endif %}
61 72 {% endif %}
62 73 </details>
63 74 {% endfor %}
modified src/web/views/commits.njk +34 −24
@@ -5,7 +5,7 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/commits.njk
8 − Purpose : Paginated commit history
8 + Purpose : Paginated commit history v4 — grouped by day on a timeline
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
@@ -25,35 +25,45 @@
25 25 </select>
26 26 </div>
27 27 {% if filterPath %}
28 − <p class="muted">History of <code>{{ filterPath }}</code> · <a href="/{{ overview.name }}/commits/{{ currentRef }}">clear filter</a></p>
28 + <p class="muted" style="margin:0">History of <code>{{ filterPath }}</code> · <a href="/{{ overview.name }}/commits/{{ currentRef }}">clear filter</a></p>
29 + {% else %}
30 + <p class="muted mono" style="margin:0;font-size:13px">page {{ page }}</p>
29 31 {% endif %}
30 32 </div>
31 33
32 −<ol class="commit-list">
33 − {% for commit in commits %}
34 − <li class="commit-row">
35 − <span class="commit-avatar" title="{{ commit.authorName }}">{{ commit.authorEmail | identicon(28) }}</span>
36 − <div class="commit-main">
37 − <div class="commit-subject">
38 − <a href="/{{ overview.name }}/commit/{{ commit.sha }}">{{ commit.subject }}</a>
39 − {% if commit.body %}
40 − <details class="commit-body-toggle"><summary aria-label="Show commit body">…</summary><pre class="commit-body">{{ commit.body }}</pre></details>
41 − {% endif %}
42 − </div>
43 − <div class="commit-meta muted">
44 − {{ commit.authorName }} committed {{ commit.date | reltime }}
45 − <span title="{{ commit.date }}">({{ commit.date | datefull }})</span>
46 − · {{ commit.filesChanged | num }} file{{ 's' if commit.filesChanged != 1 }} changed
47 − {% if commit.additions %}<span class="diff-add">+{{ commit.additions | num }}</span>{% endif %}
48 − {% if commit.deletions %}<span class="diff-del">−{{ commit.deletions | num }}</span>{% endif %}
49 − </div>
50 − </div>
51 − <button class="sha-chip copy-btn" type="button" data-copy="{{ commit.sha }}" title="Copy full SHA">{{ commit.shortSha }}</button>
34 +{% if days.length %}
35 +<ol class="commit-days">
36 + {% for day in days %}
37 + <li class="commit-day">
38 + <h3 class="commit-day-label">{{ day.label }} <span class="count">{{ day.commits.length }}</span></h3>
39 + <ol class="commit-list">
40 + {% for commit in day.commits %}
41 + <li class="commit-row">
42 + <span class="commit-avatar" title="{{ commit.authorName }}">{{ commit.authorEmail | identicon(28) }}</span>
43 + <div class="commit-main">
44 + <div class="commit-subject">
45 + <a href="/{{ overview.name }}/commit/{{ commit.sha }}">{{ commit.subject }}</a>
46 + {% if commit.body %}
47 + <details class="commit-body-toggle"><summary aria-label="Show commit body">…</summary><pre class="commit-body">{{ commit.body }}</pre></details>
48 + {% endif %}
49 + </div>
50 + <div class="commit-meta muted">
51 + <strong style="color:var(--text)">{{ commit.authorName }}</strong> committed {{ commit.date | reltime }}
52 + · {{ commit.filesChanged | num }} file{{ 's' if commit.filesChanged != 1 }}
53 + {% if commit.additions %}<span class="diff-add">+{{ commit.additions | num }}</span>{% endif %}
54 + {% if commit.deletions %}<span class="diff-del">−{{ commit.deletions | num }}</span>{% endif %}
55 + </div>
56 + </div>
57 + <button class="sha-chip copy-btn" type="button" data-copy="{{ commit.sha }}" title="Copy full SHA">{{ commit.shortSha }}</button>
58 + </li>
59 + {% endfor %}
60 + </ol>
52 61 </li>
53 − {% else %}
54 − <li class="muted">No commits yet.</li>
55 62 {% endfor %}
56 63 </ol>
64 +{% else %}
65 +<div class="empty-state"><p>No commits yet.</p></div>
66 +{% endif %}
57 67
58 68 <nav class="pagination" aria-label="Commit pages">
59 69 {% if page > 1 %}
modified src/web/views/error.njk +5 −2
@@ -5,7 +5,7 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/error.njk
8 − Purpose : Custom 404 / 500 pages
8 + Purpose : Custom 404 / 500 pages v4 — display numerals, serif message
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
@@ -15,6 +15,9 @@
15 15 <p class="error-message">{{ message }}</p>
16 16 <pre class="error-art"> git checkout --orphan reality
17 17 fatal: reference is not a tree</pre>
18 − <a class="btn btn-primary" href="/">Back to the repositories</a>
18 + <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap">
19 + <a class="btn btn-primary" href="/">Back to the repositories</a>
20 + <button class="btn" type="button" id="cmdk-open-alt">Search with ⌘K</button>
21 + </div>
19 22 </div>
20 23 {% endblock %}
modified src/web/views/home.njk +100 −35
@@ -5,45 +5,75 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/home.njk
8 − Purpose : Home — hero, pinned repos, repo index, activity, heatmap
8 + Purpose : Home v4 — cinematic hero + terminal, stats, bento pinned, repo grid, activity, stack ring, heatmap
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
12 12 {% block content %}
13 −<section class="hero">
14 − <div class="hero-id">
15 − <div class="hero-avatar" aria-hidden="true">SPB</div>
16 − <div>
17 − <h1 class="hero-name">{{ owner.name }}</h1>
18 − <p class="hero-tagline">{{ owner.tagline }} · <a href="mailto:{{ owner.email }}">{{ owner.email }}</a></p>
13 +<section class="hero" aria-labelledby="hero-name">
14 + <canvas class="hero-canvas" id="hero-canvas" aria-hidden="true"></canvas>
15 + <div class="hero-grid">
16 + <div class="hero-copy">
17 + <p class="eyebrow"><span class="eyebrow-dot" aria-hidden="true"></span>git.spboucher.ai<span class="eyebrow-more"> · personal software forge</span></p>
18 + <h1 class="hero-name" id="hero-name">{{ owner.name }}</h1>
19 + <p class="hero-tagline">{{ owner.tagline }}</p>
20 + <div class="hero-actions">
21 + <a class="btn btn-primary" href="#repos">Browse {{ stats.repos | num }} repositories</a>
22 + <a class="btn" href="/feed.atom">
23 + <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2 2a1 1 0 0 1 1-1c6.627 0 12 5.373 12 12a1 1 0 1 1-2 0C13 7.477 8.523 3 3 3a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1 7 7 0 0 1 7 7 1 1 0 1 1-2 0 5 5 0 0 0-5-5 1 1 0 0 1-1-1Zm1.5 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"/></svg>
24 + Follow activity
25 + </a>
26 + </div>
27 + <p class="hero-contact"><a href="mailto:{{ owner.email }}">{{ owner.email }}</a> · <a href="https://spboucher.ai" rel="noopener">spboucher.ai</a></p>
28 + </div>
29 + <div class="hero-terminal" id="hero-terminal" data-repos="{{ terminalRepos | join(',') }}" data-origin="{{ publicUrl }}" aria-hidden="true">
30 + <div class="term-bar"><span class="term-dot"></span><span class="term-dot"></span><span class="term-dot"></span><span class="term-title">zsh — spb@forge</span></div>
31 + <div class="term-body" id="term-body">
32 + <div class="term-line"><span class="term-prompt">$</span><span class="term-cmd">git clone {{ publicUrl }}/{{ terminalRepos[0] }}.git</span></div>
33 + <div class="term-line term-out">Cloning into '{{ terminalRepos[0] }}'…</div>
34 + <div class="term-line term-out">remote: SPB Git · {{ stats.repos | num }} public repositories</div>
35 + <div class="term-line term-out term-ok">done.</div>
36 + <div class="term-line"><span class="term-prompt">$</span><span class="term-caret"></span></div>
37 + </div>
19 38 </div>
20 39 </div>
21 − <div class="hero-badges">
22 − <span class="badge-stat"><strong>{{ stats.repos | num }}</strong> repos</span>
23 − <span class="badge-stat"><strong>{{ stats.commits | num }}</strong> commits</span>
24 − <span class="badge-stat"><strong>{{ stats.languages | num }}</strong> languages</span>
40 + <div class="hero-stats">
41 + <div class="stat spot"><span class="stat-value" data-count="{{ stats.repos }}">{{ stats.repos | num }}</span><span class="stat-label">public repositories</span></div>
42 + <div class="stat spot"><span class="stat-value" data-count="{{ stats.commits }}">{{ stats.commits | num }}</span><span class="stat-label">commits, all time</span></div>
43 + <div class="stat spot"><span class="stat-value" data-count="{{ stats.languages }}">{{ stats.languages | num }}</span><span class="stat-label">languages</span></div>
44 + <div class="stat stat-ember spot"><span class="stat-value" data-count="{{ heatmap.total }}">{{ heatmap.total | num }}</span><span class="stat-label">commits, last 52 weeks</span></div>
45 + <div class="stat stat-ember spot"><span class="stat-value" data-count="{{ heatmap.streak }}">{{ heatmap.streak | num }}</span><span class="stat-label">day streak</span><span class="stat-sub">longest {{ heatmap.longest | num }}</span></div>
25 46 </div>
26 47 </section>
27 48
28 49 {% if pinned.length %}
29 −<section aria-labelledby="pinned-h">
30 − <h2 id="pinned-h" class="section-title">Pinned</h2>
31 − <div class="pinned-grid">
50 +<section class="section reveal" aria-labelledby="pinned-h">
51 + <header class="section-head">
52 + <div>
53 + <h2 id="pinned-h" class="section-title">Pinned</h2>
54 + <p class="section-sub">Hand-picked — the work worth opening first.</p>
55 + </div>
56 + </header>
57 + <div class="bento">
32 58 {% for repo in pinned %}{% include "partials/repo-card.njk" %}{% endfor %}
33 59 </div>
34 60 </section>
35 61 {% endif %}
36 62
37 63 <div class="home-columns">
38 − <section class="home-main" aria-labelledby="repos-h">
39 − <div class="repo-controls">
40 − <h2 id="repos-h" class="section-title">Repositories</h2>
64 + <section class="home-main section" id="repos" aria-labelledby="repos-h">
65 + <header class="section-head">
66 + <div>
67 + <h2 id="repos-h" class="section-title">Repositories <span class="count" id="repo-count">{{ overviews.length | num }}</span></h2>
68 + <p class="section-sub">Everything is public and clonable over HTTPS.</p>
69 + </div>
41 70 <div class="repo-filters">
42 − <input type="search" id="repo-filter" placeholder="Filter repositories…" aria-label="Filter repositories">
71 + <input type="search" id="repo-filter" placeholder="Filter by name or description…" aria-label="Filter repositories">
43 72 <select id="repo-sort" aria-label="Sort repositories">
44 73 <option value="pushed">Recently pushed</option>
45 74 <option value="name">Name</option>
46 75 <option value="created">Created</option>
76 + <option value="commits">Most commits</option>
47 77 </select>
48 78 <select id="repo-lang" aria-label="Filter by language">
49 79 <option value="">All languages</option>
@@ -54,8 +84,8 @@
54 84 {% for topic in topics %}<option value="{{ topic }}">{{ topic }}</option>{% endfor %}
55 85 </select>
56 86 </div>
57 − </div>
58 − <div class="repo-list" id="repo-list">
87 + </header>
88 + <div class="repo-grid" id="repo-list">
59 89 {% for repo in overviews %}{% include "partials/repo-card.njk" %}{% endfor %}
60 90 {% if not overviews.length %}
61 91 <div class="empty-state">
@@ -68,18 +98,20 @@
68 98 </section>
69 99
70 100 <aside class="home-side">
71 − <section aria-labelledby="activity-h">
72 − <h2 id="activity-h" class="section-title">Activity</h2>
101 + <section class="side-card spot" id="activity" aria-labelledby="activity-h">
102 + <h2 id="activity-h">Activity <span class="count">live</span></h2>
73 103 <ul class="activity-feed">
74 104 {% for event in activity %}
75 − <li>
105 + <li class="{{ 'is-del' if event.deleted else ('is-tag' if event.refType == 'tag') }}">
76 106 <span class="activity-dot" aria-hidden="true"></span>
77 107 <div>
78 108 {% if event.deleted %}
79 109 deleted {{ event.refType }} <code>{{ event.ref }}</code> in <a href="/{{ event.repo }}">{{ event.repo }}</a>
110 + {% elif event.refType == 'tag' %}
111 + tagged <code>{{ event.ref }}</code> on <a href="/{{ event.repo }}">{{ event.repo }}</a>
80 112 {% else %}
81 113 pushed {{ event.commits | num }} commit{{ 's' if event.commits != 1 }} to <a href="/{{ event.repo }}">{{ event.repo }}</a>
82 − {% if event.refType == 'tag' %}(tag <code>{{ event.ref }}</code>){% elif event.ref != overviewDefault %}<code class="ref-inline">{{ event.ref }}</code>{% endif %}
114 + {% if event.ref != 'main' and event.ref != 'master' %}<code class="ref-inline">{{ event.ref }}</code>{% endif %}
83 115 {% endif %}
84 116 <span class="muted">· {{ event.at | reltime }}</span>
85 117 </div>
@@ -89,20 +121,53 @@
89 121 {% endfor %}
90 122 </ul>
91 123 </section>
124 +
125 + {% if stack.list.length %}
126 + <section class="side-card spot" aria-labelledby="stack-h">
127 + <h2 id="stack-h">Stack <span class="count">{{ stats.languages }} languages</span></h2>
128 + <div class="stack">
129 + <div class="ring" style="--ring-stops: {{ stack.stops }}" role="img" aria-label="Language share across all repositories">
130 + <div class="ring-center">{{ stack.list[0].percent }}%<small>{{ stack.list[0].name | truncate(10, true, '') }}</small></div>
131 + </div>
132 + <ul class="stack-list">
133 + {% for lang in stack.list %}
134 + <li><span class="lang-dot" style="background:{{ lang.color }}"></span>{{ lang.name }}<span class="pct">{{ lang.percent }}%</span></li>
135 + {% endfor %}
136 + </ul>
137 + </div>
138 + </section>
139 + {% endif %}
140 +
141 + <section class="side-card spot" aria-labelledby="cli-h">
142 + <h2 id="cli-h">From the terminal</h2>
143 + <pre class="footer-cmd"><span class="term-prompt">$</span>spbgit clone &lt;repo&gt;
144 +<span class="term-prompt">$</span>spbgit list --sort pushed</pre>
145 + <p class="muted" style="margin:10px 0 0;font-size:13px">The <a href="/spbgit">spbgit</a> CLI manages every repository from one command line.</p>
146 + </section>
92 147 </aside>
93 148 </div>
94 149
95 −<section aria-labelledby="heatmap-h" class="heatmap-section">
96 − <h2 id="heatmap-h" class="section-title">{{ heatmap.total | num }} commits in the last year</h2>
97 − <div class="heatmap-scroll">{{ heatmap.svg | safe }}</div>
98 − <div class="heatmap-legend" aria-hidden="true">
99 − <span>Less</span>
100 − <span class="heatmap-cell-demo" data-level="0"></span>
101 − <span class="heatmap-cell-demo" data-level="1"></span>
102 − <span class="heatmap-cell-demo" data-level="2"></span>
103 − <span class="heatmap-cell-demo" data-level="3"></span>
104 − <span class="heatmap-cell-demo" data-level="4"></span>
105 − <span>More</span>
150 +<section id="heatmap" class="heatmap-section section reveal" aria-labelledby="heatmap-h">
151 + <div class="heatmap-card card spot">
152 + <div class="heatmap-head">
153 + <h2 id="heatmap-h" class="section-title">{{ heatmap.total | num }} commits in the last year</h2>
154 + <div class="heatmap-stats">
155 + <span><strong class="ember">{{ heatmap.streak | num }}</strong>day streak</span>
156 + <span><strong>{{ heatmap.longest | num }}</strong>longest streak</span>
157 + <span><strong>{{ heatmap.activeDays | num }}</strong>active days</span>
158 + {% if heatmap.busiest %}<span><strong>{{ heatmap.busiest.count | num }}</strong>busiest day · {{ heatmap.busiest.date }}</span>{% endif %}
159 + </div>
160 + </div>
161 + <div class="heatmap-scroll">{{ heatmap.svg | safe }}</div>
162 + <div class="heatmap-legend" aria-hidden="true">
163 + <span>Less</span>
164 + <span class="heatmap-cell-demo" data-level="0"></span>
165 + <span class="heatmap-cell-demo" data-level="1"></span>
166 + <span class="heatmap-cell-demo" data-level="2"></span>
167 + <span class="heatmap-cell-demo" data-level="3"></span>
168 + <span class="heatmap-cell-demo" data-level="4"></span>
169 + <span>More</span>
170 + </div>
106 171 </div>
107 172 </section>
108 173 {% endblock %}
modified src/web/views/layout.njk +85 −46
@@ -5,18 +5,20 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/layout.njk
8 − Purpose : Base layout — nav, footer, meta, OG cards, theme
8 + Purpose : Base layout v4 — background stack, glass nav, ⌘K, footer grid, meta/OG
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}<!DOCTYPE html>
12 −<html lang="en" data-theme="dark">
12 +<html lang="en" data-theme="dark" class="no-js">
13 13 <head>
14 14 <meta charset="utf-8">
15 − <meta name="viewport" content="width=device-width, initial-scale=1">
15 + <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
16 16 <title>{{ title | default('SPB Git') }}</title>
17 17 <meta name="description" content="{{ description | default('SPB Git — the personal git platform of Simon-Pierre Boucher.') }}">
18 18 <link rel="canonical" href="{{ canonical }}">
19 19 <meta name="author" content="{{ owner.name }}">
20 + <meta name="theme-color" content="#04060b" media="(prefers-color-scheme: dark)">
21 + <meta name="theme-color" content="#f3f5fb" media="(prefers-color-scheme: light)">
20 22 <meta property="og:site_name" content="SPB Git">
21 23 <meta property="og:type" content="website">
22 24 <meta property="og:title" content="{{ title | default('SPB Git') }}">
@@ -33,26 +35,35 @@
33 35 <link rel="alternate" type="application/atom+xml" title="SPB Git activity" href="/feed.atom">
34 36 <link rel="preload" href="/assets/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>
35 37 <link rel="preload" href="/assets/fonts/inter-600.woff2" as="font" type="font/woff2" crossorigin>
38 + <link rel="preload" href="/assets/fonts/bricolage-800.woff2" as="font" type="font/woff2" crossorigin>
36 39 <link rel="preload" href="/assets/fonts/jetbrains-mono-400.woff2" as="font" type="font/woff2" crossorigin>
37 − <link rel="stylesheet" href="/assets/css/tokens.css">
38 − <link rel="stylesheet" href="/assets/css/app.css">
39 − <link rel="stylesheet" href="/assets/css/markdown.css">
40 − <script src="/assets/js/theme-boot.js"></script>
40 + <link rel="stylesheet" href="/assets/css/tokens.css?v={{ assetVersion }}">
41 + <link rel="stylesheet" href="/assets/css/app.css?v={{ assetVersion }}">
42 + <link rel="stylesheet" href="/assets/css/markdown.css?v={{ assetVersion }}">
43 + <script src="/assets/js/theme-boot.js?v={{ assetVersion }}"></script>
41 44 </head>
42 45 <body>
43 − <div class="aurora" aria-hidden="true"></div>
46 + <div class="bg" aria-hidden="true"><div class="bg-mesh"></div><div class="bg-grid"></div><div class="bg-noise"></div></div>
47 + <svg class="spark-defs" aria-hidden="true" focusable="false">
48 + <defs>
49 + <linearGradient id="spark-fill" x1="0" y1="0" x2="0" y2="1">
50 + <stop offset="0" stop-color="#86a4ff" stop-opacity="0.35"/>
51 + <stop offset="1" stop-color="#86a4ff" stop-opacity="0"/>
52 + </linearGradient>
53 + </defs>
54 + </svg>
44 55 <a class="skip-link" href="#main">Skip to content</a>
45 56 <header class="topnav">
46 57 <div class="container topnav-inner">
47 58 <a class="brand" href="/" aria-label="SPB Git home">
48 − <svg class="brand-mark" width="28" height="28" viewBox="0 0 28 28" aria-hidden="true">
59 + <svg class="brand-mark" width="30" height="30" viewBox="0 0 28 28" aria-hidden="true">
49 60 <defs>
50 61 <linearGradient id="spbg-nav" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
51 − <stop offset="0" stop-color="#c084fc"/><stop offset="0.35" stop-color="#7c9aff"/>
52 − <stop offset="0.7" stop-color="#38cffd"/><stop offset="1" stop-color="#34e3b0"/>
62 + <stop offset="0" stop-color="#c996ff"/><stop offset="0.35" stop-color="#86a4ff"/>
63 + <stop offset="0.7" stop-color="#46d6ff"/><stop offset="1" stop-color="#3ff0bd"/>
53 64 </linearGradient>
54 65 <linearGradient id="spbg-nav-gloss" x1="0" y1="0" x2="0" y2="28" gradientUnits="userSpaceOnUse">
55 − <stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.55" stop-color="#fff" stop-opacity="0"/>
66 + <stop offset="0" stop-color="#fff" stop-opacity="0.3"/><stop offset="0.55" stop-color="#fff" stop-opacity="0"/>
56 67 </linearGradient>
57 68 </defs>
58 69 <rect width="28" height="28" rx="7" fill="url(#spbg-nav)"/>
@@ -63,69 +74,97 @@
63 74 <circle cx="9.2" cy="19.3" r="2.05" fill="#fff"/>
64 75 </svg>
65 76 <span class="brand-name">SPB Git</span>
77 + <span class="brand-tag">forge</span>
66 78 </a>
67 − <form class="global-search" action="/search" method="get" role="search">
68 − <input type="search" name="q" id="global-search" placeholder="Search repositories… ( / )"
69 − value="{{ q | default('') }}" autocomplete="off" aria-label="Search repositories">
70 − <button type="button" class="kbd-hint" id="cmdk-open" aria-label="Open command palette" title="Jump to repository">⌘K</button>
71 − </form>
72 − <nav class="topnav-links" aria-label="Site">
79 + <nav class="topnav-primary" aria-label="Primary">
80 + <a href="/#repos">Repositories</a>
81 + <a href="/#activity">Activity</a>
82 + <a href="/api/v1/repos">API</a>
83 + </nav>
84 + <button type="button" class="search-trigger" id="cmdk-open" aria-label="Search repositories (⌘K)">
85 + <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="7" cy="7" r="5"/><path d="m14.5 14.5-3.8-3.8" stroke-linecap="round"/></svg>
86 + <span>Search repositories…</span>
87 + <kbd>⌘K</kbd>
88 + </button>
89 + <div class="topnav-links">
73 90 <button id="theme-toggle" class="icon-btn" type="button" aria-label="Toggle color theme" title="Toggle theme">
74 91 <svg class="icon-sun" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1 0-1h1A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 0 1-.708-.708l.707-.707a.5.5 0 0 1 .708 0zm-9.9 9.9a.5.5 0 0 1 0 .707l-.707.707a.5.5 0 0 1-.707-.707l.707-.707a.5.5 0 0 1 .707 0zm9.9 1.414a.5.5 0 0 1-.707 0l-.708-.707a.5.5 0 0 1 .708-.707l.707.707a.5.5 0 0 1 0 .707zm-9.9-9.9a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l.708.707a.5.5 0 0 1 0 .707z"/></svg>
75 92 <svg class="icon-moon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278z"/></svg>
76 93 </button>
77 − <a class="topnav-ext" href="https://spboucher.ai" rel="noopener">spboucher.ai</a>
78 − </nav>
94 + <a class="topnav-ext" href="https://spboucher.ai" rel="noopener">spboucher.ai ↗</a>
95 + </div>
79 96 </div>
80 97 </header>
81 98 <main id="main" class="container">
82 99 {% block content %}{% endblock %}
83 100 </main>
84 101 <footer class="footer">
85 − <div class="container footer-inner">
86 − <span class="footer-brand">
87 − <svg width="18" height="18" viewBox="0 0 28 28" aria-hidden="true">
88 − <defs>
89 − <linearGradient id="spbg-ft" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
90 − <stop offset="0" stop-color="#c084fc"/><stop offset="0.35" stop-color="#7c9aff"/>
91 − <stop offset="0.7" stop-color="#38cffd"/><stop offset="1" stop-color="#34e3b0"/>
92 − </linearGradient>
93 − </defs>
94 − <rect width="28" height="28" rx="7" fill="url(#spbg-ft)"/>
95 − <path d="M 18.6 8.3 C 17.6 6.9 15.9 6.1 13.9 6.1 C 11.1 6.1 9.2 7.7 9.2 9.8 C 9.2 11.8 10.7 12.9 13.5 13.55 L 14.5 13.78 C 17.3 14.45 18.8 15.6 18.8 17.7 C 18.8 20 16.9 21.6 14.1 21.6 C 11.9 21.6 10.2 20.8 9.2 19.3"
96 − fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
97 − <circle cx="18.6" cy="8.3" r="2.05" fill="#fff"/>
98 − <circle cx="9.2" cy="19.3" r="2.05" fill="#fff"/>
99 − </svg>
100 − SPB Git
101 − </span>
102 − <span>© {{ owner.name }} · <a href="mailto:{{ owner.email }}">{{ owner.email }}</a></span>
103 − <span class="footer-links">
102 + <div class="container footer-grid">
103 + <div class="footer-col footer-about">
104 + <span class="footer-brand">
105 + <svg width="20" height="20" viewBox="0 0 28 28" aria-hidden="true">
106 + <defs>
107 + <linearGradient id="spbg-ft" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
108 + <stop offset="0" stop-color="#c996ff"/><stop offset="0.35" stop-color="#86a4ff"/>
109 + <stop offset="0.7" stop-color="#46d6ff"/><stop offset="1" stop-color="#3ff0bd"/>
110 + </linearGradient>
111 + </defs>
112 + <rect width="28" height="28" rx="7" fill="url(#spbg-ft)"/>
113 + <path d="M 18.6 8.3 C 17.6 6.9 15.9 6.1 13.9 6.1 C 11.1 6.1 9.2 7.7 9.2 9.8 C 9.2 11.8 10.7 12.9 13.5 13.55 L 14.5 13.78 C 17.3 14.45 18.8 15.6 18.8 17.7 C 18.8 20 16.9 21.6 14.1 21.6 C 11.9 21.6 10.2 20.8 9.2 19.3"
114 + fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
115 + <circle cx="18.6" cy="8.3" r="2.05" fill="#fff"/>
116 + <circle cx="9.2" cy="19.3" r="2.05" fill="#fff"/>
117 + </svg>
118 + SPB Git
119 + </span>
120 + <p>The personal software forge of {{ owner.name }}. Every repository is public and clonable — one origin, no middlemen.</p>
121 + <pre class="footer-cmd"><span class="term-prompt">$</span>git clone {{ publicUrl }}/&lt;repo&gt;.git</pre>
122 + </div>
123 + <div class="footer-col">
124 + <h4>Explore</h4>
125 + <a href="/#repos">Repositories</a>
126 + <a href="/#activity">Activity</a>
127 + <a href="/search">Search</a>
128 + <a href="/#heatmap">Commit calendar</a>
129 + </div>
130 + <div class="footer-col">
131 + <h4>Machine</h4>
132 + <a href="/api/v1/repos">JSON API</a>
104 133 <a href="/feed.atom">Atom feed</a>
105 − <a href="/api/v1/repos">API</a>
134 + <a href="/sitemap.xml">Sitemap</a>
135 + <a href="/healthz">Health</a>
136 + </div>
137 + <div class="footer-col">
138 + <h4>Owner</h4>
106 139 <a href="https://spboucher.ai" rel="noopener">spboucher.ai</a>
107 − </span>
140 + <a href="mailto:{{ owner.email }}">{{ owner.email }}</a>
141 + </div>
142 + </div>
143 + <div class="container footer-bottom">
144 + <span>© {{ owner.name }} · Powered by <a href="/spbgit">SPB Git</a> v{{ assetVersion }}</span>
145 + <span class="footer-status"><i class="status-dot" aria-hidden="true"></i>self-hosted · MacLustr</span>
108 146 </div>
109 147 </footer>
110 148 <div class="cmdk" id="cmdk" hidden>
111 149 <div class="cmdk-backdrop" data-cmdk-close></div>
112 150 <div class="cmdk-panel" role="dialog" aria-modal="true" aria-label="Command palette">
113 151 <div class="cmdk-input-row">
114 − <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
152 + <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
115 153 <circle cx="7" cy="7" r="5"/><path d="m14.5 14.5-3.8-3.8" stroke-linecap="round"/>
116 154 </svg>
117 − <input id="cmdk-input" type="text" placeholder="Jump to a repository…" autocomplete="off"
155 + <input id="cmdk-input" type="text" placeholder="Jump to a repository, or type a command…" autocomplete="off"
118 156 role="combobox" aria-expanded="true" aria-controls="cmdk-list" aria-label="Jump to a repository">
119 − <kbd>esc</kbd>
157 + <kbd class="kbd">esc</kbd>
120 158 </div>
121 − <ul class="cmdk-list" id="cmdk-list" role="listbox" aria-label="Repositories"></ul>
159 + <ul class="cmdk-list" id="cmdk-list" role="listbox" aria-label="Results"></ul>
122 160 <div class="cmdk-footer">
123 161 <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
124 162 <span><kbd>↵</kbd> open</span>
125 163 <span><kbd>esc</kbd> close</span>
164 + <span style="margin-left:auto"><kbd>/</kbd> or <kbd>⌘K</kbd> anywhere</span>
126 165 </div>
127 166 </div>
128 167 </div>
129 − <script src="/assets/js/app.js" defer></script>
168 + <script src="/assets/js/app.js?v={{ assetVersion }}" defer></script>
130 169 </body>
131 170 </html>
modified src/web/views/partials/repo-card.njk +20 −7
@@ -5,18 +5,30 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/partials/repo-card.njk
8 − Purpose : Repo card used on home (pinned grid + list)
8 + Purpose : Repo card v4 — name, 26-week sparkline, description, topics, meta
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 −#}<article class="repo-card" data-name="{{ repo.name }}"
11 +#}<article class="repo-card spot" data-name="{{ repo.name }}"
12 12 data-description="{{ repo.description }}"
13 13 data-language="{{ repo.topLanguage or '' }}"
14 14 data-topics="{{ repo.topics | join(',') }}"
15 15 data-pushed="{{ repo.lastPush or '' }}"
16 − data-created="{{ repo.created or '' }}">
17 − <h3 class="repo-card-name"><a href="/{{ repo.name }}">{{ repo.name }}</a>
18 − {% if repo.pinned %}<span class="chip chip-pin" title="Pinned">★</span>{% endif %}
19 − </h3>
16 + data-created="{{ repo.created or '' }}"
17 + data-commits="{{ repo.commitCount or 0 }}">
18 + <div class="repo-card-top">
19 + <h3 class="repo-card-name">
20 + <a href="/{{ repo.name }}">{{ repo.name }}</a>
21 + {% if repo.pinned %}<span class="pin" title="Pinned" aria-label="Pinned">★</span>{% endif %}
22 + </h3>
23 + {% if repo.spark %}
24 + <svg class="spark {{ 'spark-quiet' if repo.spark.total == 0 }}" viewBox="0 0 120 34" preserveAspectRatio="none" role="img"
25 + aria-label="{{ repo.spark.total | num }} commits in the last 26 weeks">
26 + <path class="spark-area" d="{{ repo.spark.area }}"/>
27 + <path class="spark-line" d="{{ repo.spark.path }}"/>
28 + {% if repo.spark.total > 0 %}<circle class="spark-dot" cx="{{ repo.spark.lastX }}" cy="{{ repo.spark.lastY }}" r="2.2"/>{% endif %}
29 + </svg>
30 + {% endif %}
31 + </div>
20 32 {% if repo.description %}<p class="repo-card-desc">{{ repo.description }}</p>{% endif %}
21 33 {% if repo.topics.length %}
22 34 <div class="chip-row">
@@ -27,7 +39,8 @@
27 39 {% if repo.topLanguage %}
28 40 <span class="lang-dot-label"><span class="lang-dot" style="background:{{ repo.topLanguage | langcolor }}"></span>{{ repo.topLanguage }}</span>
29 41 {% endif %}
42 + {% if repo.commitCount %}<span title="Commits" class="mono">{{ repo.commitCount | num }} commits</span>{% endif %}
30 43 {% if repo.cloneCount %}<span title="Clone / fetch count">⇩ {{ repo.cloneCount | num }}</span>{% endif %}
31 − {% if repo.lastPush %}<span>pushed {{ repo.lastPush | reltime }}</span>{% else %}<span class="muted">empty</span>{% endif %}
44 + {% if repo.lastPush %}<span class="pushed">pushed {{ repo.lastPush | reltime }}</span>{% else %}<span class="muted pushed">empty</span>{% endif %}
32 45 </div>
33 46 </article>
modified src/web/views/partials/repo-header.njk +45 −12
@@ -5,24 +5,46 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/partials/repo-header.njk
8 − Purpose : Repo page header — breadcrumb, meta, language bar, tabs
8 + Purpose : Repo page header v4 — display title, badges, stat tiles, language bar, tabs
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}<header class="repo-header">
12 − <h1 class="repo-title">
13 − <a href="/" class="repo-owner">spb</a><span class="repo-sep">/</span><a href="/{{ overview.name }}" class="repo-name">{{ overview.name }}</a>
14 − <span class="chip chip-public">Public</span>
15 − {% if overview.license %}<span class="chip chip-license" title="License detected from {{ overview.licensePath }}">{{ overview.license }}</span>{% endif %}
16 − </h1>
12 + <div class="repo-title-row">
13 + <h1 class="repo-title">
14 + <a href="/" class="repo-owner">spb</a><span class="repo-sep">/</span><a href="/{{ overview.name }}" class="repo-name">{{ overview.name }}</a>
15 + </h1>
16 + <div class="repo-badges">
17 + <span class="chip chip-public">Public</span>
18 + {% if overview.license %}<span class="chip chip-license" title="License detected from {{ overview.licensePath }}">{{ overview.license }}</span>{% endif %}
19 + {% if overview.pinned %}<span class="chip" style="color:var(--ember-2);background:var(--ember-soft)">★ Pinned</span>{% endif %}
20 + </div>
21 + </div>
17 22 {% if overview.description %}<p class="repo-desc">{{ overview.description }}</p>{% endif %}
23 + {% if overview.homepage or overview.topics.length %}
18 24 <div class="repo-meta-row">
19 − {% if overview.homepage %}<a class="repo-homepage" href="{{ overview.homepage }}" rel="noopener noreferrer">🔗 {{ overview.homepage }}</a>{% endif %}
25 + {% if overview.homepage %}
26 + <a class="repo-homepage" href="{{ overview.homepage }}" rel="noopener noreferrer">
27 + <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25Zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0Z"/></svg>
28 + {{ overview.homepage | replace('https://', '') | replace('http://', '') }}
29 + </a>
30 + {% endif %}
20 31 {% if overview.topics.length %}
21 32 <div class="chip-row">
22 33 {% for topic in overview.topics %}<a class="chip chip-topic" href="/search?q={{ topic }}">{{ topic }}</a>{% endfor %}
23 34 </div>
24 35 {% endif %}
25 36 </div>
37 + {% endif %}
38 +
39 + <div class="repo-stats">
40 + <a class="rstat spot" href="/{{ overview.name }}/commits/{{ overview.defaultBranch }}"><span class="rstat-v">{{ overview.commitCount | num }}</span><span class="rstat-l">commits</span></a>
41 + <a class="rstat spot" href="/{{ overview.name }}/branches"><span class="rstat-v">{{ overview.branchCount | num }}</span><span class="rstat-l">branches</span></a>
42 + <a class="rstat spot" href="/{{ overview.name }}/tags"><span class="rstat-v">{{ overview.tagCount | num }}</span><span class="rstat-l">releases</span></a>
43 + <div class="rstat"><span class="rstat-v">{{ overview.sizeBytes | bytes }}</span><span class="rstat-l">size</span></div>
44 + <div class="rstat"><span class="rstat-v mono" style="font-size:16px;font-family:var(--font-mono)">{{ overview.defaultBranch }}</span><span class="rstat-l">default branch</span></div>
45 + <div class="rstat"><span class="rstat-v" title="{{ overview.lastPush }}">{{ (overview.lastPush | reltime) if overview.lastPush else '—' }}</span><span class="rstat-l">last push</span></div>
46 + </div>
47 +
26 48 {% if overview.languages.length %}
27 49 <div class="lang-bar" role="img" aria-label="Language composition">
28 50 {% for lang in overview.languages %}
@@ -38,10 +60,21 @@
38 60 </div>
39 61 {% endif %}
40 62 <nav class="repo-tabs" aria-label="Repository sections">
41 − <a class="repo-tab {{ 'active' if tab == 'code' }}" href="/{{ overview.name }}">Code</a>
42 − <a class="repo-tab {{ 'active' if tab == 'commits' }}" href="/{{ overview.name }}/commits/{{ currentRef }}">Commits <span class="count">{{ overview.commitCount | num }}</span></a>
43 − <a class="repo-tab {{ 'active' if tab == 'branches' }}" href="/{{ overview.name }}/branches">Branches <span class="count">{{ overview.branchCount }}</span></a>
44 − <a class="repo-tab {{ 'active' if tab == 'tags' }}" href="/{{ overview.name }}/tags">Tags <span class="count">{{ overview.tagCount }}</span></a>
45 − <span class="repo-tab-meta muted">{{ overview.sizeBytes | bytes }}</span>
63 + <a class="repo-tab {{ 'active' if tab == 'code' }}" href="/{{ overview.name }}">
64 + <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L13.94 8l-3.72-3.72a.75.75 0 1 1 1.06-1.06Zm-6.56 0a.75.75 0 1 1 1.06 1.06L2.06 8l3.72 3.72a.75.75 0 1 1-1.06 1.06L.47 8.53a.75.75 0 0 1 0-1.06Z"/></svg>
65 + Code
66 + </a>
67 + <a class="repo-tab {{ 'active' if tab == 'commits' }}" href="/{{ overview.name }}/commits/{{ currentRef }}">
68 + <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/></svg>
69 + Commits <span class="count">{{ overview.commitCount | num }}</span>
70 + </a>
71 + <a class="repo-tab {{ 'active' if tab == 'branches' }}" href="/{{ overview.name }}/branches">
72 + <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/></svg>
73 + Branches <span class="count">{{ overview.branchCount }}</span>
74 + </a>
75 + <a class="repo-tab {{ 'active' if tab == 'tags' }}" href="/{{ overview.name }}/tags">
76 + <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"/></svg>
77 + Releases <span class="count">{{ overview.tagCount }}</span>
78 + </a>
46 79 </nav>
47 80 </header>
modified src/web/views/repo.njk +18 −9
@@ -5,7 +5,7 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/repo.njk
8 − Purpose : Repo home — clone box, file table, rendered README
8 + Purpose : Repo home v4 — terminal clone box, file table, README with sticky table of contents
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
@@ -13,9 +13,9 @@
13 13 {% include "partials/repo-header.njk" %}
14 14
15 15 {% if overview.empty %}
16 −<div class="empty-repo">
17 − <h2>This repository is empty</h2>
18 − <p>Push something to bring it to life:</p>
16 +<div class="empty-repo card spot" style="border-radius:var(--radius-lg)">
17 + <h2 class="section-title" style="justify-content:center">This repository is empty</h2>
18 + <p class="muted">Push something to bring it to life:</p>
19 19 <pre class="clone-snippet">git remote add origin {{ overview.cloneUrl }}
20 20 git push -u origin {{ overview.defaultBranch }}</pre>
21 21 <p class="muted">or, from anywhere: <code>spbgit clone {{ overview.name }}</code></p>
@@ -35,10 +35,12 @@ git push -u origin {{ overview.defaultBranch }}</pre>
35 35 </select>
36 36 </div>
37 37 <div class="clone-box">
38 − <input class="clone-url" type="text" readonly value="{{ overview.cloneUrl }}" aria-label="Clone URL">
39 − <button class="btn copy-btn" type="button" data-copy="{{ overview.cloneUrl }}" title="Copy clone URL">Copy</button>
40 − <button class="btn copy-btn" type="button" data-copy="spbgit clone {{ overview.name }}" title="Copy spbgit command">spbgit</button>
41 − <a class="btn" href="/archive/{{ overview.name }}/{{ currentRef }}.zip" rel="nofollow">ZIP</a>
38 + <span class="clone-prompt" aria-hidden="true">$</span>
39 + <input class="clone-url" type="text" readonly value="git clone {{ overview.cloneUrl }}" aria-label="Clone command">
40 + <button class="btn btn-sm copy-btn" type="button" data-copy="git clone {{ overview.cloneUrl }}" title="Copy clone command">Copy</button>
41 + <button class="btn btn-sm copy-btn" type="button" data-copy="spbgit clone {{ overview.name }}" title="Copy spbgit command">spbgit</button>
42 + <a class="btn btn-sm" href="/archive/{{ overview.name }}/{{ currentRef }}.zip" rel="nofollow">ZIP</a>
43 + <a class="btn btn-sm" href="/archive/{{ overview.name }}/{{ currentRef }}.tar.gz" rel="nofollow">tar.gz</a>
42 44 </div>
43 45 </div>
44 46
@@ -49,8 +51,15 @@ git push -u origin {{ overview.defaultBranch }}</pre>
49 51 <div class="readme-header">
50 52 <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574M8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25"/></svg>
51 53 <code>{{ readme.path }}</code>
54 + <a class="count" href="/{{ overview.name }}/blob/{{ currentRef }}/{{ readme.path }}?plain=1" rel="nofollow" title="View source">source</a>
55 + </div>
56 + <div class="readme-layout" id="readme-layout">
57 + <article class="markdown-body" id="readme">{{ readme.html | safe }}</article>
58 + <nav class="readme-toc" id="readme-toc" aria-label="README table of contents" hidden>
59 + <h4>On this page</h4>
60 + <ol id="readme-toc-list"></ol>
61 + </nav>
52 62 </div>
53 − <article class="markdown-body">{{ readme.html | safe }}</article>
54 63 </section>
55 64 {% endif %}
56 65 {% endif %}
modified src/web/views/search.njk +18 −15
@@ -5,29 +5,32 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/search.njk
8 − Purpose : Global search — grouped repo + README results
8 + Purpose : Global search v4 — hero query bar, grouped repo + README results
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
12 12 {% block content %}
13 −<h1 class="section-title">Search</h1>
14 −<form action="/search" method="get" class="search-page-form" role="search">
15 − <input type="search" name="q" value="{{ q }}" placeholder="Search repositories, topics, READMEs…" aria-label="Search query" autofocus>
16 − <button class="btn btn-primary" type="submit">Search</button>
17 −</form>
13 +<section class="search-hero">
14 + <p class="eyebrow"><span class="eyebrow-dot" aria-hidden="true"></span>search · names, descriptions, topics, READMEs</p>
15 + <h1 class="section-title" style="font-size:34px">{% if q %}Results for “{{ q }}”{% else %}Search the forge{% endif %}</h1>
16 + <form action="/search" method="get" class="search-page-form" role="search">
17 + <input type="search" name="q" value="{{ q }}" placeholder="Search repositories, topics, READMEs…" aria-label="Search query" autofocus>
18 + <button class="btn btn-primary" type="submit">Search</button>
19 + </form>
20 +</section>
18 21
19 22 {% if q %}
20 −<section aria-labelledby="repo-results-h">
21 − <h2 id="repo-results-h" class="section-title">Repositories <span class="count">{{ results.repos.length }}</span></h2>
23 +<section class="section" aria-labelledby="repo-results-h">
24 + <header class="section-head"><h2 id="repo-results-h" class="section-title">Repositories <span class="count">{{ results.repos.length }}</span></h2></header>
22 25 {% if results.repos.length %}
23 26 <ul class="search-results">
24 27 {% for hit in results.repos %}
25 − <li>
28 + <li class="spot">
26 29 <a class="search-hit-name" href="/{{ hit.name }}">{{ hit.name }}</a>
27 − {% if hit.topLanguage %}<span class="lang-dot-label"><span class="lang-dot" style="background:{{ hit.topLanguage | langcolor }}"></span>{{ hit.topLanguage }}</span>{% endif %}
28 − {% if hit.description %}<p class="muted">{{ hit.description }}</p>{% endif %}
30 + {% if hit.topLanguage %} <span class="lang-dot-label muted" style="font-size:13px;margin-left:10px"><span class="lang-dot" style="background:{{ hit.topLanguage | langcolor }}"></span>{{ hit.topLanguage }}</span>{% endif %}
31 + {% if hit.description %}<p class="search-snippet">{{ hit.description }}</p>{% endif %}
29 32 {% if hit.topics.length %}
30 − <div class="chip-row">{% for topic in hit.topics %}<span class="chip chip-topic">{{ topic }}</span>{% endfor %}</div>
33 + <div class="chip-row">{% for topic in hit.topics %}<a class="chip chip-topic" href="/search?q={{ topic }}">{{ topic }}</a>{% endfor %}</div>
31 34 {% endif %}
32 35 </li>
33 36 {% endfor %}
@@ -37,12 +40,12 @@
37 40 {% endif %}
38 41 </section>
39 42
40 −<section aria-labelledby="readme-results-h">
41 − <h2 id="readme-results-h" class="section-title">README content <span class="count">{{ results.readmes.length }}</span></h2>
43 +<section class="section" aria-labelledby="readme-results-h">
44 + <header class="section-head"><h2 id="readme-results-h" class="section-title">README content <span class="count">{{ results.readmes.length }}</span></h2></header>
42 45 {% if results.readmes.length %}
43 46 <ul class="search-results">
44 47 {% for hit in results.readmes %}
45 − <li>
48 + <li class="spot">
46 49 <a class="search-hit-name" href="/{{ hit.name }}">{{ hit.name }}</a>
47 50 <p class="search-snippet">{{ hit.snippet }}</p>
48 51 </li>
modified src/web/views/tags.njk +6 −4
@@ -5,7 +5,7 @@
5 5 Author : Simon-Pierre Boucher
6 6 Contact : contact@spboucher.ai
7 7 File : src/web/views/tags.njk
8 − Purpose : Releases — tags with source archives + binary assets
8 + Purpose : Releases v4 — tags with "latest" marker, binary assets, source archives
9 9 License : MIT © Simon-Pierre Boucher
10 10 ─────────────────────────────────────────────
11 11 #}{% extends "layout.njk" %}
@@ -15,9 +15,10 @@
15 15 {% if tagsWithAssets.length %}
16 16 <div class="release-list">
17 17 {% for tag in tagsWithAssets %}
18 − <article class="release-card">
18 + <article class="release-card spot">
19 19 <header class="release-header">
20 20 <h2 class="release-tag"><a href="/{{ overview.name }}/tree/{{ tag.name }}">{{ tag.name }}</a></h2>
21 + {% if loop.first %}<span class="release-latest">latest</span>{% endif %}
21 22 {% if tag.subject %}<span class="release-subject">{{ tag.subject }}</span>{% endif %}
22 23 <span class="muted">· {{ tag.date | reltime }}</span>
23 24 </header>
@@ -29,7 +30,7 @@
29 30 <a href="/releases/{{ overview.name }}/{{ tag.key }}/{{ asset.name | urlencode }}" rel="nofollow">{{ asset.name }}</a>
30 31 <span class="muted">{{ asset.size | bytes }}</span>
31 32 {% if asset.sha256 %}
32 − <button class="sha-chip copy-btn" type="button" data-copy="{{ asset.sha256 }}" title="Copy sha256">sha256</button>
33 + <button class="sha-chip copy-btn" type="button" data-copy="{{ asset.sha256 }}" title="Copy sha256" style="margin-left:auto">sha256</button>
33 34 {% endif %}
34 35 </li>
35 36 {% endfor %}
@@ -38,12 +39,13 @@
38 39 <div class="archive-links">
39 40 <a class="btn btn-sm" href="/archive/{{ overview.name }}/{{ tag.name }}.zip" rel="nofollow">Source (zip)</a>
40 41 <a class="btn btn-sm" href="/archive/{{ overview.name }}/{{ tag.name }}.tar.gz" rel="nofollow">Source (tar.gz)</a>
42 + <a class="btn btn-sm btn-ghost" href="/{{ overview.name }}/commits/{{ tag.name }}" rel="nofollow">History →</a>
41 43 </div>
42 44 </article>
43 45 {% endfor %}
44 46 </div>
45 47 {% else %}
46 −<div class="empty-state">
48 +<div class="empty-state spot" style="border-radius:var(--radius-lg)">
47 49 <p>No releases yet. Tag a version, push it, then attach artifacts:</p>
48 50 <pre class="clone-snippet">git tag v1.0.0 && git push --tags
49 51 spbgit release upload {{ overview.name }} v1.0.0 MyApp.dmg</pre>
50 52