Skip to content

Commit d37f7da

Browse files
code5717code5717
committed
fix: increase visual reference and docs typography scale
1 parent 83e48c7 commit d37f7da

5 files changed

Lines changed: 78 additions & 51 deletions

File tree

‎site/public/visuals/a7-docs-atlas.html‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,9 @@
6565
radial-gradient(860px 340px at 94% 2%, var(--amber-dim), transparent 56%),
6666
radial-gradient(940px 360px at 60% 112%, var(--mint-dim), transparent 58%),
6767
var(--bg);
68-
line-height: 1.62;
69-
padding: 28px 40px 64px;
68+
line-height: 1.64;
69+
font-size: 18px;
70+
padding: 30px 42px 64px;
7071
}
7172

7273
.wrap {
@@ -95,7 +96,7 @@
9596

9697
.toc-title {
9798
font-family: var(--font-mono);
98-
font-size: 10px;
99+
font-size: 11px;
99100
letter-spacing: 0.16em;
100101
text-transform: uppercase;
101102
color: var(--text-dim);
@@ -109,7 +110,7 @@
109110
color: var(--text-dim);
110111
text-decoration: none;
111112
font-family: var(--font-mono);
112-
font-size: 11px;
113+
font-size: 12px;
113114
line-height: 1.32;
114115
padding: 7px 8px;
115116
border-left: 2px solid transparent;
@@ -131,7 +132,7 @@
131132
h1 {
132133
margin: 0;
133134
font-family: var(--font-head);
134-
font-size: clamp(2.1rem, 4vw, 3.3rem);
135+
font-size: clamp(2.45rem, 4.8vw, 3.7rem);
135136
line-height: 1.03;
136137
letter-spacing: -0.01em;
137138
}
@@ -140,7 +141,7 @@
140141
margin: 10px 0 24px;
141142
color: var(--text-dim);
142143
font-family: var(--font-mono);
143-
font-size: 12px;
144+
font-size: 14px;
144145
}
145146

146147
.hero {
@@ -195,7 +196,7 @@
195196
.kpi strong {
196197
display: block;
197198
font-family: var(--font-head);
198-
font-size: 1.25rem;
199+
font-size: 1.46rem;
199200
line-height: 1.1;
200201
letter-spacing: -0.01em;
201202
margin-bottom: 3px;
@@ -204,7 +205,7 @@
204205
.kpi span {
205206
font-family: var(--font-mono);
206207
color: var(--text-dim);
207-
font-size: 11px;
208+
font-size: 12px;
208209
text-transform: uppercase;
209210
letter-spacing: 0.11em;
210211
}
@@ -217,7 +218,7 @@
217218
font-family: var(--font-head);
218219
letter-spacing: .04em;
219220
text-transform: uppercase;
220-
font-size: 0.9rem;
221+
font-size: 1.02rem;
221222
background: color-mix(in srgb, var(--surface2) 68%, transparent 32%);
222223
scroll-margin-top: 24px;
223224
}
@@ -250,7 +251,7 @@
250251

251252
.node b {
252253
font-family: var(--font-head);
253-
font-size: 1.02rem;
254+
font-size: 1.16rem;
254255
display: block;
255256
margin-bottom: 4px;
256257
}
@@ -259,7 +260,7 @@
259260
display: block;
260261
color: var(--text-dim);
261262
font-family: var(--font-mono);
262-
font-size: 11px;
263+
font-size: 12px;
263264
margin-top: 6px;
264265
overflow-wrap: break-word;
265266
}
@@ -279,7 +280,7 @@
279280
justify-content: center;
280281
transition: transform .2s ease;
281282
transform-origin: top center;
282-
min-width: 640px;
283+
min-width: 760px;
283284
}
284285

285286
.zoom-controls {
@@ -318,14 +319,14 @@
318319
.mermaid .nodeLabel {
319320
color: var(--text) !important;
320321
font-family: var(--font-head) !important;
321-
font-size: 16px !important;
322+
font-size: 18px !important;
322323
}
323324

324325
.mermaid .edgeLabel {
325326
color: var(--text-dim) !important;
326327
background-color: var(--bg) !important;
327328
font-family: var(--font-mono) !important;
328-
font-size: 12px !important;
329+
font-size: 14px !important;
329330
}
330331

331332
.mermaid .edgeLabel rect {
@@ -344,7 +345,7 @@
344345
table {
345346
width: 100%;
346347
border-collapse: collapse;
347-
font-size: 13px;
348+
font-size: 15px;
348349
min-width: 840px;
349350
}
350351

@@ -355,7 +356,7 @@
355356
background: var(--surface2);
356357
color: var(--text-dim);
357358
font-family: var(--font-mono);
358-
font-size: 10px;
359+
font-size: 11px;
359360
letter-spacing: .12em;
360361
text-transform: uppercase;
361362
text-align: left;
@@ -384,7 +385,7 @@
384385
border-radius: 999px;
385386
padding: 3px 9px;
386387
font-family: var(--font-mono);
387-
font-size: 10px;
388+
font-size: 11px;
388389
text-transform: uppercase;
389390
letter-spacing: .08em;
390391
border: 1px solid transparent;
@@ -455,7 +456,7 @@
455456
.milestone small {
456457
color: var(--text-dim);
457458
font-family: var(--font-mono);
458-
font-size: 11px;
459+
font-size: 12px;
459460
}
460461

461462
.callout {
@@ -733,7 +734,7 @@ <h1>A7 Docs Atlas</h1>
733734
const controls = wrap.querySelector('.zoom-controls');
734735
if (!target || !controls) return;
735736

736-
let scale = 1;
737+
let scale = 1.15;
737738
let isPanning = false;
738739
let startX = 0;
739740
let startY = 0;

‎site/public/visuals/a7-examples-reference.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,30 +19,30 @@
1919
--border:rgba(243,205,187,.2); --accent:#ff9a6f; --mint:#72d7b1; --amber:#ffc781; --rose:#ff9fbd;
2020
}
2121
}
22-
*{box-sizing:border-box} body{margin:0;padding:36px;background:
22+
*{box-sizing:border-box} body{margin:0;padding:40px;background:
2323
radial-gradient(920px 360px at 12% -10%, rgba(178,77,31,.18), transparent 58%),
2424
radial-gradient(780px 340px at 90% 0%, rgba(29,136,96,.16), transparent 56%),var(--bg);
25-
color:var(--text);font-family:var(--font)}
25+
color:var(--text);font-family:var(--font);font-size:18px;line-height:1.62}
2626
.wrap{max-width:1050px;margin:0 auto}
27-
h1{margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.02;letter-spacing:-.01em}
28-
.sub{margin:.6rem 0 1.4rem;color:var(--text-dim);font-family:var(--mono);font-size:12px}
27+
h1{margin:0;font-size:clamp(2.35rem,4.8vw,3.5rem);line-height:1.02;letter-spacing:-.01em}
28+
.sub{margin:.7rem 0 1.5rem;color:var(--text-dim);font-family:var(--mono);font-size:14px}
2929
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
30-
.stat{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:11px 12px}
31-
.stat strong{display:block;font-size:1.24rem;line-height:1.1;margin-bottom:2px}
32-
.stat span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
30+
.stat{border:1px solid var(--border);border-radius:13px;background:var(--surface);padding:13px 14px}
31+
.stat strong{display:block;font-size:1.5rem;line-height:1.1;margin-bottom:2px}
32+
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
3333
.table-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
3434
.table-scroll{overflow:auto}
35-
table{width:100%;border-collapse:collapse;font-size:13px;min-width:820px}
36-
th{position:sticky;top:0;background:var(--surface2);text-align:left;padding:12px 13px;border-bottom:2px solid var(--border);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
37-
td{padding:12px 13px;border-bottom:1px solid var(--border);vertical-align:top}
35+
table{width:100%;border-collapse:collapse;font-size:15px;min-width:940px}
36+
th{position:sticky;top:0;background:var(--surface2);text-align:left;padding:14px 15px;border-bottom:2px solid var(--border);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
37+
td{padding:14px 15px;border-bottom:1px solid var(--border);vertical-align:top}
3838
tbody tr:nth-child(even){background:rgba(178,77,31,.06)}
3939
tbody tr:hover{background:rgba(29,136,96,.09)}
40-
.status{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:999px;padding:3px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
40+
.status{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
4141
.done{color:var(--mint);background:color-mix(in srgb,var(--mint) 14%, transparent 86%);border-color:color-mix(in srgb,var(--mint) 32%, transparent 68%)}
4242
.study{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%, transparent 84%);border-color:color-mix(in srgb,var(--amber) 32%, transparent 68%)}
4343
.advanced{color:var(--rose);background:color-mix(in srgb,var(--rose) 14%, transparent 86%);border-color:color-mix(in srgb,var(--rose) 32%, transparent 68%)}
44-
code{font-family:var(--mono);font-size:11px;background:rgba(178,77,31,.1);padding:1px 5px;border-radius:4px}
45-
@media (max-width:860px){body{padding:22px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
44+
code{font-family:var(--mono);font-size:12px;background:rgba(178,77,31,.1);padding:1px 6px;border-radius:4px}
45+
@media (max-width:860px){body{padding:24px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))} table{font-size:14px}}
4646
</style>
4747
</head>
4848
<body>

‎site/public/visuals/a7-language-map.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@
1616
@media (prefers-color-scheme: dark){
1717
:root{--bg:#101723;--surface:#172131;--surface2:#202d42;--text:#eaf1ff;--text-dim:#9fb1ca;--border:rgba(184,208,240,.2);--accent:#8bb7ff;--green:#7adfb8;--orange:#ffc685;--purple:#c7b2f3}
1818
}
19-
*{box-sizing:border-box}body{margin:0;padding:36px;background:radial-gradient(900px 340px at 14% -8%, rgba(42,98,178,.2), transparent 58%),radial-gradient(840px 360px at 90% 2%, rgba(29,138,103,.16), transparent 54%),var(--bg);color:var(--text);font-family:var(--font)}
19+
*{box-sizing:border-box}body{margin:0;padding:40px;background:radial-gradient(900px 340px at 14% -8%, rgba(42,98,178,.2), transparent 58%),radial-gradient(840px 360px at 90% 2%, rgba(29,138,103,.16), transparent 54%),var(--bg);color:var(--text);font-family:var(--font);font-size:18px;line-height:1.62}
2020
.wrap{max-width:1080px;margin:0 auto}
21-
h1{margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.02;letter-spacing:-.01em}
22-
.sub{margin:.6rem 0 1.3rem;color:var(--text-dim);font-family:var(--mono);font-size:12px}
21+
h1{margin:0;font-size:clamp(2.35rem,4.8vw,3.55rem);line-height:1.02;letter-spacing:-.01em}
22+
.sub{margin:.7rem 0 1.5rem;color:var(--text-dim);font-family:var(--mono);font-size:14px}
2323
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
24-
.card{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:14px}
25-
.label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
26-
.title{font-size:1.18rem;line-height:1.2;margin:0 0 8px}
24+
.card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:16px}
25+
.label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
26+
.title{font-size:1.44rem;line-height:1.15;margin:0 0 8px}
2727
.desc{margin:0;color:var(--text-dim);line-height:1.55}
28-
ul{margin:.55rem 0 0;padding-left:14px} li{margin:.22rem 0;color:var(--text-dim)}
29-
@media (max-width:900px){body{padding:22px}.grid{grid-template-columns:1fr}}
28+
ul{margin:.62rem 0 0;padding-left:16px} li{margin:.28rem 0;color:var(--text-dim)}
29+
@media (max-width:900px){body{padding:24px}.grid{grid-template-columns:1fr}}
3030
</style>
3131
</head>
3232
<body>

‎site/public/visuals/a7-pipeline-reference.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,26 @@
2121
--blue:#82c8ff; --amber:#ffcd8d; --rose:#f3a0b5;
2222
}
2323
}
24-
*{box-sizing:border-box} body{margin:0;padding:36px;background:
24+
*{box-sizing:border-box} body{margin:0;padding:40px;background:
2525
radial-gradient(900px 360px at 10% -8%, var(--accent-dim), transparent 60%),
2626
radial-gradient(860px 360px at 92% 0%, rgba(186,115,24,.16), transparent 58%), var(--bg);
27-
color:var(--text); font-family:var(--font);}
27+
color:var(--text); font-family:var(--font); font-size:18px; line-height:1.6;}
2828
.wrap{max-width:1100px;margin:0 auto}
29-
h1{margin:0;font-size:clamp(2rem,4vw,3.1rem);line-height:1.03;letter-spacing:-.02em}
30-
.sub{margin:.65rem 0 1.4rem;color:var(--text-dim);font-family:var(--mono);font-size:12px}
31-
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
29+
h1{margin:0;font-size:clamp(2.4rem,4.8vw,3.6rem);line-height:1.02;letter-spacing:-.02em}
30+
.sub{margin:.75rem 0 1.5rem;color:var(--text-dim);font-family:var(--mono);font-size:14px}
31+
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}
3232
.legend{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 10px}
33-
.legend span{font-family:var(--mono);font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
33+
.legend span{font-family:var(--mono);font-size:13px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
3434
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
3535
.dot-a{background:var(--accent)} .dot-b{background:var(--blue)} .dot-c{background:var(--amber)} .dot-d{background:var(--rose)}
36-
.mermaid-wrap{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--surface2);padding:30px 18px;overflow:auto}
37-
.mermaid-wrap .mermaid{display:flex;justify-content:center;transition:transform .2s ease;transform-origin:top center;min-width:680px}
36+
.mermaid-wrap{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--surface2);padding:34px 20px 22px;overflow:auto}
37+
.mermaid-wrap .mermaid{display:flex;justify-content:center;transition:transform .2s ease;transform-origin:top center;min-width:740px}
3838
.zoom{position:absolute;top:8px;right:8px;display:flex;gap:2px;padding:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px;z-index:8}
3939
.zoom button{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--text-dim);font-family:var(--mono);cursor:pointer}
4040
.zoom button:hover{background:var(--accent-dim);color:var(--text)}
4141
.mermaid-wrap.is-zoomed{cursor:grab}.mermaid-wrap.is-panning{cursor:grabbing;user-select:none}
42-
.mermaid .nodeLabel{font-family:var(--font)!important;font-size:15px!important;color:var(--text)!important}
43-
.mermaid .edgeLabel{font-family:var(--mono)!important;font-size:12px!important;color:var(--text-dim)!important}
42+
.mermaid .nodeLabel{font-family:var(--font)!important;font-size:18px!important;color:var(--text)!important}
43+
.mermaid .edgeLabel{font-family:var(--mono)!important;font-size:14px!important;color:var(--text-dim)!important}
4444
.mermaid .edgeLabel rect{fill:var(--bg)!important}
4545
</style>
4646
</head>
@@ -93,7 +93,7 @@ <h1>A7 Pipeline Reference</h1>
9393
lineColor: dark ? '#89b7a9' : '#4f7b6e', fontSize:'15px', fontFamily:'Bricolage Grotesque'
9494
}});
9595
const wrap=document.getElementById('m1'); const mer=wrap.querySelector('.mermaid'); const zoom=wrap.querySelector('.zoom');
96-
let s=1, p=false, sx=0, sy=0, sl=0, st=0;
96+
let s=1.18, p=false, sx=0, sy=0, sl=0, st=0;
9797
const apply=()=>{mer.style.transform=`scale(${s})`; wrap.classList.toggle('is-zoomed', s>1.01)};
9898
zoom.addEventListener('click',(e)=>{const b=e.target.closest('button'); if(!b)return; const z=b.dataset.z; if(z==='in')s=Math.min(3,s+.14); if(z==='out')s=Math.max(.7,s-.14); if(z==='reset')s=1; apply();});
9999
wrap.addEventListener('wheel',(e)=>{if(!(e.ctrlKey||e.metaKey))return; e.preventDefault(); s += e.deltaY<0?.08:-.08; s=Math.max(.7,Math.min(3,s)); apply();},{passive:false});

‎site/src/styles/docs.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@
4747
--docs-mesh-a: #cae8f56a;
4848
--docs-mesh-b: #ffe1b454;
4949
--docs-mesh-c: #d2f0e46b;
50+
51+
--sl-text-xs: 0.82rem;
52+
--sl-text-sm: 0.95rem;
53+
--sl-text-body: 1.06rem;
54+
--sl-text-h4: 1.32rem;
55+
--sl-text-h3: 1.66rem;
56+
--sl-text-h2: 2.12rem;
57+
--sl-text-h1: 2.9rem;
5058
}
5159

5260
:root[data-theme='dark'] {
@@ -98,6 +106,10 @@ body {
98106
background-color: var(--sl-color-bg);
99107
}
100108

109+
html {
110+
font-size: 17px;
111+
}
112+
101113
body {
102114
background-image:
103115
radial-gradient(980px 380px at 10% -8%, var(--docs-mesh-a), transparent 56%),
@@ -127,6 +139,7 @@ header .header {
127139
.sidebar-content a {
128140
border-radius: 0.58rem;
129141
transition: background-color 140ms ease, transform 140ms ease;
142+
font-size: 0.95rem;
130143
}
131144

132145
.sidebar-content a:hover {
@@ -207,6 +220,15 @@ header .header {
207220
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 74%, transparent 26%);
208221
}
209222

223+
.sl-markdown-content pre code {
224+
font-size: 0.95rem;
225+
}
226+
227+
.sl-markdown-content p,
228+
.sl-markdown-content li {
229+
font-size: 1.03rem;
230+
}
231+
210232
.sl-markdown-content a {
211233
text-underline-offset: 0.16em;
212234
text-decoration-thickness: 0.1em;
@@ -264,6 +286,10 @@ header .header {
264286
}
265287

266288
@media (max-width: 50rem) {
289+
html {
290+
font-size: 16px;
291+
}
292+
267293
.hero {
268294
border-radius: 0.95rem;
269295
}

0 commit comments

Comments
 (0)