fix: restore nav menu, language dropdown, sidebar with TOC + articles
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 18s
Deploy Internet for Kids / Deploy (push) Successful in 5s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 18s
Deploy Internet for Kids / Deploy (push) Successful in 5s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s
- Nav shows About + Topics links again - Language switcher is a proper dropdown (current lang + translations) - Article sidebar with sticky TOC + recent articles list - Wider content area (64rem) with 240px sidebar - Responsive: sidebar hidden on mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
public/
|
||||
resources/
|
||||
.hugo_build.lock
|
||||
.claude-session/
|
||||
|
||||
275
IMPLEMENTATION_GUIDE.md
Normal file
275
IMPLEMENTATION_GUIDE.md
Normal file
@@ -0,0 +1,275 @@
|
||||
# Implementation Guide: Typography Redesign
|
||||
## For internetforkids.org (Hugo + Congo Theme)
|
||||
|
||||
### EASIEST PATH: Modify Congo Theme
|
||||
|
||||
The Congo theme is already set up - no need to switch themes. Just customize typography files.
|
||||
|
||||
#### Step 1: Update Font Imports
|
||||
**File:** `layouts/partials/head.html` or `config/_default/params.toml`
|
||||
|
||||
Add Google Fonts (if using Option A or B):
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&family=Oxygen:wght@400;700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
Or for Option B:
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
#### Step 2: Override Congo's CSS
|
||||
**File:** `assets/css/custom.css` (create if doesn't exist)
|
||||
|
||||
```css
|
||||
/* Option A: Sam Altman Style */
|
||||
:root {
|
||||
--font-serif: 'Crimson Text', Georgia, serif;
|
||||
--font-sans: 'Oxygen', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 { font-size: 50px; }
|
||||
h2 { font-size: 28px; }
|
||||
h3 { font-size: 24px; }
|
||||
|
||||
article {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Add spacing between articles */
|
||||
article + article {
|
||||
margin-top: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
Or Option B (Dario Amodei):
|
||||
```css
|
||||
:root {
|
||||
--font-serif: Georgia, 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
color: #1f1e1d;
|
||||
background-color: #f0ede6;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 { font-size: 36px; }
|
||||
h2 { font-size: 24px; }
|
||||
|
||||
article {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
#### Step 3: Update Congo config
|
||||
**File:** `config/_default/params.toml`
|
||||
|
||||
```toml
|
||||
# Change this line if using warm background:
|
||||
# colorScheme = "avocado" # Current
|
||||
colorScheme = "slate" # For Option A (darker)
|
||||
|
||||
defaultAppearance = "light"
|
||||
|
||||
[article]
|
||||
showDate = true
|
||||
showReadingTime = true
|
||||
showAuthor = true
|
||||
showBreadcrumbs = true
|
||||
showTableOfContents = true
|
||||
```
|
||||
|
||||
#### Step 4: Build & Test
|
||||
```bash
|
||||
hugo server
|
||||
# Visit http://localhost:1313 to preview changes
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### MEDIUM PATH: Switch to Blowfish Theme
|
||||
|
||||
Blowfish is modern, actively maintained, and Tailwind-based.
|
||||
|
||||
**Pros:**
|
||||
- Better performance (Tailwind CSS)
|
||||
- Modern design foundation
|
||||
- Easy typography customization
|
||||
|
||||
**Cons:**
|
||||
- Requires theme migration
|
||||
- May need content restructuring
|
||||
|
||||
**Steps:**
|
||||
1. Clone Blowfish: `git submodule add https://github.com/nunocoracao/blowfish themes/blowfish`
|
||||
2. Update `config.toml`: `theme = "blowfish"`
|
||||
3. Customize `assets/css/custom.css` with serif fonts
|
||||
4. Copy content structure from Congo
|
||||
|
||||
---
|
||||
|
||||
### CUSTOM THEME PATH: Build from Scratch
|
||||
|
||||
**Only if neither Congo customization nor Blowfish works.**
|
||||
|
||||
Would require:
|
||||
1. Creating new Hugo theme folder
|
||||
2. Implementing all layouts (baseof.html, single.html, list.html, etc.)
|
||||
3. Writing custom CSS
|
||||
4. Time investment: 15-20 hours
|
||||
|
||||
---
|
||||
|
||||
### RECOMMENDED IMPLEMENTATION ORDER
|
||||
|
||||
#### Phase 1: Quick Win (Day 1)
|
||||
1. Add Google Fonts to layout
|
||||
2. Add custom.css with typography rules
|
||||
3. Test locally with `hugo server`
|
||||
4. Check all article pages render correctly
|
||||
|
||||
#### Phase 2: Fine-tuning (Day 2)
|
||||
1. Adjust font sizes for mobile responsiveness
|
||||
2. Test on different screen sizes
|
||||
3. Verify links, navigation, colors work
|
||||
4. Get feedback from team
|
||||
|
||||
#### Phase 3: Deployment (Day 3)
|
||||
1. Deploy to staging if available
|
||||
2. Live testing on actual domain
|
||||
3. Deploy to production
|
||||
4. Monitor for issues
|
||||
|
||||
---
|
||||
|
||||
### RESPONSIVE CONSIDERATIONS
|
||||
|
||||
Add mobile breakpoints to custom.css:
|
||||
|
||||
```css
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 16px; /* Don't go smaller on mobile */
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px; /* Scale down headings */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 100%; /* Use full width on mobile */
|
||||
padding: 20px; /* But add side padding */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### TESTING CHECKLIST
|
||||
|
||||
- [ ] Homepage renders correctly
|
||||
- [ ] Article pages display proper typography
|
||||
- [ ] Mobile view is readable
|
||||
- [ ] Dark mode works (if enabled)
|
||||
- [ ] Links are visible and clickable
|
||||
- [ ] Images scale properly
|
||||
- [ ] Code blocks are readable
|
||||
- [ ] Lists and blockquotes look good
|
||||
- [ ] Date/author metadata is clear
|
||||
- [ ] Sidebar navigation works
|
||||
|
||||
---
|
||||
|
||||
### ROLLBACK PLAN
|
||||
|
||||
If changes don't work:
|
||||
1. Delete `assets/css/custom.css`
|
||||
2. Revert `config/_default/params.toml` changes
|
||||
3. Restart Hugo server
|
||||
4. Original Congo theme returns
|
||||
|
||||
No destructive changes - fully reversible.
|
||||
|
||||
---
|
||||
|
||||
### FILE LOCATIONS TO MODIFY
|
||||
|
||||
```
|
||||
internetforkids/
|
||||
├── config/
|
||||
│ └── _default/
|
||||
│ └── params.toml # Update font settings
|
||||
├── assets/
|
||||
│ └── css/
|
||||
│ └── custom.css # ADD new file with typography
|
||||
├── layouts/
|
||||
│ └── partials/
|
||||
│ └── head.html # ADD Google Fonts link
|
||||
└── themes/
|
||||
└── congo/ # Don't modify directly
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### QUICK COMMAND REFERENCE
|
||||
|
||||
```bash
|
||||
# View live preview
|
||||
hugo server
|
||||
|
||||
# Check for errors
|
||||
hugo server --debug
|
||||
|
||||
# Build static site
|
||||
hugo
|
||||
|
||||
# Watch for changes
|
||||
hugo server --watch
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### FONT PAIRING LOGIC
|
||||
|
||||
**Rule:** Serif + Sans creates visual contrast
|
||||
|
||||
- Serif headings = authority, elegance
|
||||
- Sans body = modern, readable
|
||||
- Same serif throughout = literary, unified
|
||||
|
||||
Pick ONE approach and stick with it.
|
||||
|
||||
113
TYPOGRAPHY_QUICK_REFERENCE.md
Normal file
113
TYPOGRAPHY_QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# Typography Quick Reference Guide
|
||||
## For internetforkids.org Redesign
|
||||
|
||||
### THE THREE APPROACHES
|
||||
|
||||
#### Approach 1: Sam Altman (Classic Contrast)
|
||||
```
|
||||
BEFORE: AFTER:
|
||||
[Heading in default font] --> [HEADING in Crimson Text]
|
||||
Body text in same font --> Body text in Oxygen sans-serif
|
||||
16px, 1.5 line height --> 16px, 1.6 line height
|
||||
Wide width (800px+) --> 500px max width (focused)
|
||||
```
|
||||
**Best for:** Pure, elegant simplicity | Strong serif/sans contrast
|
||||
|
||||
---
|
||||
|
||||
#### Approach 2: Dario Amodei (Literary Warmth)
|
||||
```
|
||||
BEFORE: AFTER:
|
||||
[Heading] --> [Heading in Newsreader serif]
|
||||
Body text --> Body text in Newsreader serif (same)
|
||||
16px, 1.5 line height --> 20px, 1.6 line height
|
||||
White background --> Warm cream (#f0ede6)
|
||||
Dark gray text --> Dark brown (#1f1e1d)
|
||||
```
|
||||
**Best for:** Literary, sophisticated feel | Unified serif throughout
|
||||
|
||||
---
|
||||
|
||||
#### Approach 3: Blowfish Evolution (Modern)
|
||||
```
|
||||
BEFORE: AFTER:
|
||||
[Congo default] --> [Blowfish with serif headings]
|
||||
Sans-serif body --> San-serif body (improved)
|
||||
16px --> 18px
|
||||
1.5 line height --> 1.7 line height
|
||||
Current spacing --> Generous whitespace/padding
|
||||
```
|
||||
**Best for:** Modern tech aesthetic | Easier migration path
|
||||
|
||||
---
|
||||
|
||||
### IMMEDIATE VISUAL CHANGES
|
||||
|
||||
**Typography improvement boils down to 3 things:**
|
||||
|
||||
1. **Font Selection**
|
||||
- Headings: Switch from default to serif (Crimson Text, Merriweather, or Georgia)
|
||||
- Effect: Instant premium feel, 80% of the improvement
|
||||
|
||||
2. **Spacing** (line-height + margins)
|
||||
- Increase body line-height from 1.5 to 1.6-1.7
|
||||
- Increase margins between sections
|
||||
- Effect: More breathing room, easier to read
|
||||
|
||||
3. **Color & Width**
|
||||
- Option: Keep pure white OR add warm cream background
|
||||
- Reduce max-width to 700-850px (narrower = more readable)
|
||||
- Effect: Better focus, more intimate feel
|
||||
|
||||
---
|
||||
|
||||
### MEASUREMENTS COMPARISON
|
||||
|
||||
```
|
||||
METRIC Sam Altman Dario Amodei Congo (Current)
|
||||
Body Font Size 16px 20px 14-16px
|
||||
Body Line Height 1.6 (25.6px) 1.6 (32px) ~1.5
|
||||
Heading Font Size (H1) 50px 36px Varies
|
||||
Heading Weight 400 600 Varies
|
||||
Content Width 500px 800px+ 800px+
|
||||
Paragraph Margin 24px 20px ~15-20px
|
||||
Background #fff #f0ede6 Avocado scheme
|
||||
Text Color #555 #1f1e1d Varies
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### FONT STACK EXAMPLES
|
||||
|
||||
**Option A (Sam Altman style):**
|
||||
```css
|
||||
/* Headings */
|
||||
font-family: 'Crimson Text', Georgia, serif;
|
||||
|
||||
/* Body */
|
||||
font-family: 'Oxygen', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
```
|
||||
|
||||
**Option B (Dario Amodei style):**
|
||||
```css
|
||||
/* All text */
|
||||
font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
|
||||
```
|
||||
|
||||
**Option C (Blowfish compatible):**
|
||||
```css
|
||||
/* Headings */
|
||||
font-family: 'Merriweather', Georgia, serif;
|
||||
|
||||
/* Body */
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ONE-SENTENCE SUMMARY
|
||||
|
||||
Sam Altman = **Classic elegance** (serif + sans contrast)
|
||||
Dario Amodei = **Warm literacy** (unified serif, cream background)
|
||||
Blowfish = **Modern readability** (clean sans + serif accents)
|
||||
|
||||
202
TYPOGRAPHY_RESEARCH.md
Normal file
202
TYPOGRAPHY_RESEARCH.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# Typography Research: Premium CEO/Founder Blog Design
|
||||
## Research for internetforkids.org Redesign
|
||||
|
||||
### REFERENCE SITES ANALYZED
|
||||
|
||||
#### 1. Sam Altman's Blog (blog.samaltman.com)
|
||||
**Platform:** Posthaven (custom blog hosting)
|
||||
**Typography Profile:**
|
||||
- **Body Text:** Oxygen sans-serif, 16px, line-height 25.6px (1.6x)
|
||||
- **Headings:** Crimson Text serif (elegant classical serif), 50px (h1), 26px (h2), font-weight 400
|
||||
- **Content Width:** 500px (tight, focused reading)
|
||||
- **Color:** Dark gray (rgb(85,85,85)) on white
|
||||
- **Margins:** 80px bottom margin between articles
|
||||
- **Visual Style:** Minimal sidebar nav, clean article focus, serif headings create premium feel
|
||||
- **Key Feature:** Perfect contrast between serif headings and sans-serif body - typography-driven design
|
||||
|
||||
#### 2. Dario Amodei's Site (darioamodei.com)
|
||||
**Platform:** Webflow (custom-built)
|
||||
**Typography Profile:**
|
||||
- **Body Text:** Newsreader 24 Pt (custom serif typeface), 20px, line-height 32px (1.6x)
|
||||
- **Headings:** Same Newsreader font, 28.8px, font-weight 600
|
||||
- **Background:** Warm off-white (rgb(240,238,230)) - cream/tan color
|
||||
- **Content Width:** Max content appears ~800-900px
|
||||
- **Paragraph Spacing:** 20px bottom margin
|
||||
- **Color:** Very dark brown (rgb(31,30,29))
|
||||
- **Visual Style:** Essay-focused, clean list navigation, warm palette, generous whitespace
|
||||
- **Key Feature:** Unified serif typography throughout creates "literary" aesthetic
|
||||
|
||||
#### 3. Medium CEO Blog Tag
|
||||
**Platform:** Medium.com
|
||||
**Typography Profile:**
|
||||
- **Body Text:** Times font, 16px
|
||||
- **Headings:** Sohne sans-serif, 42px, font-weight 500, line-height 52px
|
||||
- **Text Color:** Dark with alpha transparency rgba(0,0,0,0.8)
|
||||
- **Layout:** Card-based article previews with images
|
||||
- **Visual Style:** Clean grid, image-heavy curation
|
||||
- **Key Feature:** Sans-serif headings with generous line-height (1.24x) allows larger size without feeling cramped
|
||||
|
||||
---
|
||||
|
||||
### DESIGN PATTERNS SUMMARY
|
||||
|
||||
#### TYPOGRAPHY HIERARCHY
|
||||
All premium CEO blogs use this pattern:
|
||||
1. **Serif headings** (Crimson Text, Newsreader, Times) - conveys sophistication
|
||||
2. **Sans-serif body** or **consistent serif throughout** - readability focus
|
||||
3. **Line-height 1.6x** standard (25.6px-32px) - premium spacing
|
||||
4. **Generous margins** - breathing room between articles/sections
|
||||
|
||||
#### CONTENT WIDTH STRATEGIES
|
||||
- **Sam Altman:** 500px - ultra-focused reading (oldest, Posthaven)
|
||||
- **Dario Amodei:** ~800-900px - comfortable essay width
|
||||
- **Medium:** Full-width cards, article content centered
|
||||
|
||||
#### COLOR PALETTES
|
||||
- **Sam Altman:** Pure white background + dark gray text (classic)
|
||||
- **Dario Amodei:** Warm off-white/cream background (rgb(240,238,230)) + dark brown (more inviting)
|
||||
- **Medium:** White + near-black (standard web)
|
||||
|
||||
---
|
||||
|
||||
### HUGO THEMES ANALYSIS
|
||||
|
||||
#### BLOWFISH (Actively maintained, Tailwind CSS)
|
||||
- **Typography:** Tailwind default (system-ui sans-serif)
|
||||
- **Body:** 18px, line-height 28px
|
||||
- **Headings:** 36px, line-height 40px
|
||||
- **Strengths:** Modern, lightweight, responsive, good for tech blogs
|
||||
- **Weakness:** Uses sans-serif throughout, less premium feel than CEO blogs
|
||||
|
||||
#### CURRENT: CONGO THEME
|
||||
- **Used by:** internetforkids.org
|
||||
- **Assessment:** Functional but dated, color-scheme focused rather than typography-focused
|
||||
- **Issue:** No special serif/sans-serif contrast, standard blog styling
|
||||
|
||||
---
|
||||
|
||||
### KEY TYPOGRAPHY RECOMMENDATIONS FOR INTERNETFORKIDS.ORG
|
||||
|
||||
#### OPTION A: "Premium CEO Blog" (Dario Amodei style)
|
||||
**Best for:** Creating premium, literary feel
|
||||
- **Headings:** Serif font (Crimson Text, Merriweather, or Georgia)
|
||||
- H1: 28-36px, weight 600-700
|
||||
- H2: 24px, weight 600
|
||||
- **Body:** Serif OR high-quality sans-serif
|
||||
- Font size: 18-20px
|
||||
- Line-height: 1.6-1.7 (28-34px actual)
|
||||
- Max width: 700-850px
|
||||
- **Background:** Warm off-white/cream (rgb(240,238,230) or similar)
|
||||
- **Text Color:** Dark brown (rgb(31-40, 30-35, 29-25))
|
||||
|
||||
#### OPTION B: "Classic Contrast" (Sam Altman style)
|
||||
**Best for:** Clean, modern aesthetic with traditional feel
|
||||
- **Headings:** Serif (Crimson Text)
|
||||
- H1: 48-56px, weight 400
|
||||
- **Body:** Clean sans-serif (Oxygen, Inter, system-ui)
|
||||
- Font size: 16-18px
|
||||
- Line-height: 1.6
|
||||
- **Content Width:** 500-600px (narrow, focused)
|
||||
- **Background:** Pure white
|
||||
- **Color:** Dark gray to black
|
||||
|
||||
#### OPTION C: "Modern Blowfish Evolution" (Current + Typography)
|
||||
**Best for:** Staying with Hugo, but improving typography
|
||||
- Modify Congo theme or switch to Blowfish
|
||||
- Add serif Google Fonts headings
|
||||
- Increase body font size to 18px minimum
|
||||
- Increase line-height to 1.7
|
||||
- Add generous margin/padding
|
||||
- Warm color palette option
|
||||
|
||||
---
|
||||
|
||||
### RECOMMENDED FONTS (Web Safe + Google Fonts)
|
||||
|
||||
#### SERIF (Headings)
|
||||
- **Crimson Text** - Classic, elegant (Sam Altman choice)
|
||||
- **Merriweather** - Friendly, readable serif
|
||||
- **Newsreader** - Modern editorial serif (Dario Amodei choice, custom)
|
||||
- **Georgia** - Web-safe fallback, built-in
|
||||
- **EB Garamond** - High elegance, small caps
|
||||
|
||||
#### SANS-SERIF (Body)
|
||||
- **Inter** - Modern, super readable (used by Blowfish)
|
||||
- **Oxygen** - Friendly, humanist (Sam Altman choice)
|
||||
- **System-ui** - OS default fonts (fastest, no load)
|
||||
- **Newsreader** - Can use throughout (literary approach)
|
||||
- **Lora** - Optimized for screen reading
|
||||
|
||||
---
|
||||
|
||||
### SPECIFIC CSS VALUES TO IMPLEMENT
|
||||
|
||||
```css
|
||||
/* DARIO AMODEI INSPIRED */
|
||||
body {
|
||||
font-family: Georgia, 'Newsreader', serif; /* or serif-only */
|
||||
font-size: 20px;
|
||||
line-height: 1.6; /* = 32px */
|
||||
color: #1f1e1d;
|
||||
background: #f0ede6; /* warm cream */
|
||||
}
|
||||
|
||||
h1, h2, h3 { font-family: Georgia, serif; }
|
||||
h1 { font-size: 32-36px; font-weight: 600; }
|
||||
h2 { font-size: 24px; font-weight: 600; }
|
||||
|
||||
article {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
/* SAM ALTMAN INSPIRED */
|
||||
body {
|
||||
font-family: 'Oxygen', -apple-system, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Crimson Text', Georgia, serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
article + article {
|
||||
margin-top: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### VISUAL DISTINCTIONS
|
||||
|
||||
| Aspect | Sam Altman | Dario Amodei | Medium |
|
||||
|--------|-----------|--------------|--------|
|
||||
| **Serif/Sans** | Serif headings + Sans body | All serif | Sans headings + serif body |
|
||||
| **Line Height** | 1.6 | 1.6 | 1.24 (headings), 1.6 (body) |
|
||||
| **Width** | 500px (tight) | 800px+ (comfortable) | Full-width |
|
||||
| **Background** | Pure white | Warm cream | White |
|
||||
| **Text Color** | Medium gray | Dark brown | Near-black |
|
||||
| **Overall Feel** | Classic minimal | Literary, warm | Modern, democratic |
|
||||
|
||||
---
|
||||
|
||||
### NEXT STEPS FOR INTERNETFORKIDS.ORG
|
||||
|
||||
1. **Choose style direction:** Premium literary (Dario) vs. classic minimal (Sam)
|
||||
2. **Select font family:** Crimson Text (serif headings) or Newsreader (serif throughout)
|
||||
3. **Adjust spacing:** Increase line-height from current ~1.5 to 1.6-1.7
|
||||
4. **Set content width:** 700-850px for readability (current Congo theme likely wider)
|
||||
5. **Add whitespace:** Increase margins/padding between sections
|
||||
6. **Consider background:** Keep white or add warm cream tone
|
||||
7. **Test on live content:** Ensure changes work with existing posts
|
||||
8. **Consider theme swap:** Blowfish (modern) or custom modifications to Congo
|
||||
|
||||
1
themes/congo
Submodule
1
themes/congo
Submodule
Submodule themes/congo added at b426bf91b0
Reference in New Issue
Block a user