christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove stale Congo theme + research docs
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 9s
Details
Deploy Internet for Kids / Deploy (push) Successful in 6s
Details
Deploy Internet for Kids / Health Check (push) Successful in 1s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 1s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 1s
Details

Browse Source 
Congo submodule was re-added accidentally, overriding custom layouts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-03 13:50:19 +03:00
parent 42d5c51473
commit 7ff71c99eb
5 changed files with 0 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitmodules vendored
View File

@@ -1,3 +0,0 @@
[submodule "themes/congo"]
path = themes/congo
url = https://github.com/jpanther/congo.git

275
IMPLEMENTATION_GUIDE.md
View File

@@ -1,275 +0,0 @@
# 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
View File

@@ -1,113 +0,0 @@
# 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
View File

@@ -1,202 +0,0 @@
# 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 themes/congo deleted from b426bf91b0