Skip to content

Commit f7fc2d0

Browse files
jonathanpophamjonathanpopham
committed
Update homepage and repo page themes to match brand guidelines
- Replace Inter/JetBrains Mono with Public Sans/Martian Mono/Lexend Peta - Update all CSS variables to brand palette (black bg, teal accent, muted secondaries) - Typography: lighter heading weights, negative letter-spacing, body weight 300 - Nav links: Martian Mono uppercase to match supermodel.com - Fix WCAG contrast on accent buttons (black text on teal) - Update shields.io badge colors - Hero stats wrap on narrow viewports Closes supermodeltools/arch-docs#15 (homepage portion)
1 parent cdaccd4 commit f7fc2d0

File tree

1 file changed

+45
-41
lines changed

1 file changed

+45
-41
lines changed

‎generate-index.go‎

Lines changed: 45 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ func generateRepoPages(cfg Config) error {
114114
if upstream == "" {
115115
return ""
116116
}
117-
return fmt.Sprintf("https://img.shields.io/github/stars/%s?style=flat&logo=github&color=818cf8&labelColor=1a1d27", upstream)
117+
return fmt.Sprintf("https://img.shields.io/github/stars/%s?style=flat&logo=github&color=8CC6C9&labelColor=161616", upstream)
118118
},
119119
"archDocsURL": func(name string) string {
120120
return fmt.Sprintf("https://graphtechnologydevelopers.github.io/%s/", url.PathEscape(name))
@@ -187,7 +187,7 @@ func generateIndex(cfg Config) error {
187187
if upstream == "" {
188188
return ""
189189
}
190-
return fmt.Sprintf("https://img.shields.io/github/stars/%s?style=flat&logo=github&color=818cf8&labelColor=1a1d27", upstream)
190+
return fmt.Sprintf("https://img.shields.io/github/stars/%s?style=flat&logo=github&color=8CC6C9&labelColor=161616", upstream)
191191
},
192192
"totalRepos": func() int {
193193
total := 0
@@ -228,40 +228,40 @@ const repoTemplate = `<!DOCTYPE html>
228228
<meta name="twitter:description" content="{{escape .Desc}}">
229229
<link rel="preconnect" href="https://fonts.googleapis.com">
230230
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
231-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
231+
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@200;300;400;500;600;700&family=Martian+Mono:wght@300;400;500&family=Lexend+Peta:wght@400&display=swap" rel="stylesheet">
232232
<style>
233233
:root {
234-
--bg: #0f1117;
235-
--bg-card: #1a1d27;
236-
--border: #2a2e3e;
237-
--text: #e4e4e7;
238-
--text-muted: #9ca3af;
239-
--accent: #6366f1;
240-
--accent-light: #818cf8;
241-
--green: #22c55e;
242-
--orange: #f59e0b;
243-
--blue: #3b82f6;
244-
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
234+
--bg: #000000;
235+
--bg-card: #161616;
236+
--border: #202020;
237+
--text: #FFFFFF;
238+
--text-muted: #808080;
239+
--accent: #71B9BC;
240+
--accent-light: #8CC6C9;
241+
--green: #7CCE86;
242+
--orange: #D0A27D;
243+
--blue: #8E8CE9;
244+
--font: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
245245
--max-w: 1200px;
246-
--radius: 8px;
246+
--radius: 0px;
247247
}
248248
* { margin: 0; padding: 0; box-sizing: border-box; }
249-
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
249+
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; font-weight: 300; -webkit-font-smoothing: antialiased; }
250250
a { color: var(--accent-light); text-decoration: none; }
251251
a:hover { text-decoration: underline; }
252252
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
253253
.site-header { border-bottom: 1px solid var(--border); padding: 16px 0; position: sticky; top: 0; background: var(--bg); z-index: 100; }
254254
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
255-
.site-brand { font-size: 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
255+
.site-brand { font-size: 18px; font-weight: 400; color: var(--text); display: flex; align-items: center; gap: 8px; }
256256
.site-brand:hover { text-decoration: none; color: var(--accent-light); }
257257
.site-brand svg { width: 24px; height: 24px; }
258258
.site-nav { display: flex; gap: 16px; align-items: center; }
259-
.site-nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; }
259+
.site-nav a { color: var(--text-muted); font-size: 0.68rem; font-weight: 300; font-family: 'Martian Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
260260
.site-nav a:hover { color: var(--text); text-decoration: none; }
261261
.breadcrumb { padding: 24px 0 0; font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
262262
.breadcrumb span { color: var(--border); }
263263
.entity-header { padding: 32px 0 48px; }
264-
.entity-header h1 { font-size: 32px; font-weight: 700; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; }
264+
.entity-header h1 { font-size: 32px; font-weight: 300; letter-spacing: -0.02em; margin-bottom: 12px; font-family: var(--font); }
265265
.entity-header p { color: var(--text-muted); font-size: 16px; max-width: 600px; margin-bottom: 20px; }
266266
.card-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
267267
.pill { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
@@ -272,7 +272,7 @@ a:hover { text-decoration: underline; }
272272
.star-badge { height: 20px; vertical-align: middle; }
273273
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 600; transition: opacity 0.2s; }
274274
.btn:hover { opacity: 0.85; text-decoration: none; }
275-
.btn-primary { background: var(--accent); color: #fff; }
275+
.btn-primary { background: var(--accent); color: #000; }
276276
.site-footer { border-top: 1px solid var(--border); padding: 32px 0; margin-top: 64px; color: var(--text-muted); font-size: 13px; text-align: center; }
277277
</style>
278278
</head>
@@ -331,25 +331,25 @@ const indexTemplate = `<!DOCTYPE html>
331331
<meta name="description" content="Architecture documentation for popular open source repositories. Browse code graphs, dependency diagrams, and codebase structure.">
332332
<link rel="preconnect" href="https://fonts.googleapis.com">
333333
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
334-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
334+
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@200;300;400;500;600;700&family=Martian+Mono:wght@300;400;500&family=Lexend+Peta:wght@400&display=swap" rel="stylesheet">
335335
<style>
336336
:root {
337-
--bg: #0f1117;
338-
--bg-card: #1a1d27;
339-
--bg-hover: #22263a;
340-
--border: #2a2e3e;
341-
--text: #e4e4e7;
342-
--text-muted: #9ca3af;
343-
--accent: #6366f1;
344-
--accent-light: #818cf8;
345-
--green: #22c55e;
346-
--orange: #f59e0b;
347-
--red: #ef4444;
348-
--blue: #3b82f6;
349-
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
350-
--mono: 'JetBrains Mono', 'Fira Code', monospace;
337+
--bg: #000000;
338+
--bg-card: #161616;
339+
--bg-hover: #08191C;
340+
--border: #202020;
341+
--text: #FFFFFF;
342+
--text-muted: #808080;
343+
--accent: #71B9BC;
344+
--accent-light: #8CC6C9;
345+
--green: #7CCE86;
346+
--orange: #D0A27D;
347+
--red: #E589C6;
348+
--blue: #8E8CE9;
349+
--font: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
350+
--mono: 'Martian Mono', 'Fira Code', monospace;
351351
--max-w: 1200px;
352-
--radius: 8px;
352+
--radius: 0px;
353353
}
354354
* { margin: 0; padding: 0; box-sizing: border-box; }
355355
html { overflow-x: hidden; }
@@ -392,15 +392,16 @@ a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; b
392392
.site-brand:hover { text-decoration: none; color: var(--accent-light); }
393393
.site-brand svg { width: 24px; height: 24px; }
394394
.site-nav { display: flex; gap: 16px; align-items: center; }
395-
.site-nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
395+
.site-nav a { color: var(--text-muted); font-size: 0.68rem; font-weight: 300; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
396396
.site-nav a:hover { color: var(--text); text-decoration: none; }
397397
.hero {
398398
padding: 64px 0 48px;
399399
text-align: center;
400400
}
401401
.hero h1 {
402402
font-size: 36px;
403-
font-weight: 700;
403+
font-weight: 200;
404+
letter-spacing: -0.04em;
404405
margin-bottom: 12px;
405406
}
406407
.hero p {
@@ -412,13 +413,15 @@ a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; b
412413
.hero-stats {
413414
display: flex;
414415
justify-content: center;
415-
gap: 32px;
416+
flex-wrap: wrap;
417+
gap: 16px 32px;
416418
margin-top: 32px;
417419
}
418420
.hero-stat { text-align: center; }
419421
.hero-stat .num {
420422
font-size: 28px;
421-
font-weight: 700;
423+
font-weight: 300;
424+
letter-spacing: -0.02em;
422425
color: var(--accent-light);
423426
}
424427
.hero-stat .label {
@@ -456,7 +459,8 @@ a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; b
456459
}
457460
.section-title {
458461
font-size: 22px;
459-
font-weight: 700;
462+
font-weight: 300;
463+
letter-spacing: -0.02em;
460464
margin-bottom: 16px;
461465
}
462466
.section { margin-bottom: 48px; }

0 commit comments

Comments
 (0)