normalize code-page vertical spacing (#122)
Message
normalize code-page vertical spacing (#122)
Diff
.forge/issues/b243e09f-a9fa-4507-96e2-2c48b4f8e719/issue.md+25 −0
--- /dev/null+++ b/.forge/issues/b243e09f-a9fa-4507-96e2-2c48b4f8e719/issue.md@@ -0,0 +1,25 @@1+---2+id: b243e09f-a9fa-4507-96e2-2c48b4f8e7193+title: Normalize code-page vertical spacing4+state: open5+labels:6+- area:render7+assignees: []8+milestone: null9+created: 2026-10-28T11:32:06.967801627Z10+updated: null11+---12+## Problem13+14+The code page inherits a mix of browser heading margins, section margins, and grid gaps. Measured at 1280px: title→clone 24px, clone→Files 60px, Files heading→table ~20px, table→Languages ~20px, Languages→README 40px, README heading→body ~20px. The result reads as arbitrary spacing.15+16+## Fix17+18+Use one explicit vertical scale on the code page:19+20+- 24px between major blocks (repo header, Files, Languages, README)21+- 12px from a section heading to its content22+- 8px from language bar to legend23+- 12px between repo title and clone box24+25+Scope the rules to `.repo-head`, `.code-files`, `.langs`, and `.code-readme`; do not change markdown body rhythm.
static/style.css+14 −1
--- a/static/style.css+++ b/static/style.css@@ -138,7 +138,7 @@ td code,th code{word-break:break-all}138138 td.title,td.sha{overflow-wrap:anywhere}139139 td.num{width:1%;white-space:nowrap}140140 /* Single-column stack; children keep DOM order. */141-.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;min-width:0}141+.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);min-width:0}142142 .cols>section,.cols>div{min-width:0}143143 /* Forms: full-width on mobile, >=40px touch targets. */144144 form{max-width:44rem;margin:1rem 0;min-width:0}@@ -285,6 +285,19 @@ details.clonebox:not([open]){padding-bottom:.25rem}285285 .clonebox .clone-body{margin:0}286286 .clonebox .clone-body>:first-child{margin-top:.75rem}287287 .clone-hint,.clonebox summary .muted{font-weight:400}288+/* Code page vertical rhythm (f0rge #122): one scale instead of browser289+ heading margins. 24px between major blocks, 12px heading -> content,290+ 8px language bar -> legend. Scoped so markdown body flow is unchanged. */291+.repo-head{margin-top:var(--s5);margin-bottom:var(--s5);gap:var(--s3)}292+.repo-head h1{margin:0}293+.repo-head .clonebox{margin:0}294+.code-files>h2,.code-readme>h2{margin:0 0 var(--s3)}295+.code-files>.table-scroll{margin:0}296+.langs{margin:var(--s5) 0 0}297+.langs>h2{margin:0 0 var(--s3)}298+.lang-bar{margin:0}299+.lang-legend{margin:var(--s2) 0 0}300+.code-readme .markdown>:first-child{margin-top:0}288301 /* CI verdict badges (m6/code-bits, f0rge #43): GitHub-style green/red on289302 the code repo-head; running/cancelled keep muted tones. */290303 .badge{display:inline-block;padding:.1em .5em;border:1px solid var(--border);font-weight:700;font-size:.85rem}
tests/code_cols.rs+22 −0
--- a/tests/code_cols.rs+++ b/tests/code_cols.rs@@ -143,3 +143,25 @@ fn code_tab_is_always_stacked() {143143 "wide layout keeps the readable content width"144144 );145145 }146+147+#[test]148+fn code_page_uses_one_vertical_rhythm() {149+ let css = css();150+ // f0rge #122: explicit code-page rhythm, not browser heading margins.151+ // 24px between major blocks, 12px heading -> content, 8px bar -> legend.152+ for rule in [153+ ".cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)",154+ ".repo-head{margin-top:var(--s5);margin-bottom:var(--s5);gap:var(--s3)}",155+ ".repo-head h1{margin:0}",156+ ".repo-head .clonebox{margin:0}",157+ ".code-files>h2,.code-readme>h2{margin:0 0 var(--s3)}",158+ ".code-files>.table-scroll{margin:0}",159+ ".langs{margin:var(--s5) 0 0}",160+ ".langs>h2{margin:0 0 var(--s3)}",161+ ".lang-bar{margin:0}",162+ ".lang-legend{margin:var(--s2) 0 0}",163+ ".code-readme .markdown>:first-child{margin-top:0}",164+ ] {165+ assert!(css.contains(rule), "code-page rhythm rule missing: {rule}");166+ }167+}