diff --git a/.gitmodules b/.gitmodules index 1da2c4d..e69de29 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +0,0 @@ -[submodule "themes/congo"] - path = themes/congo - url = https://github.com/jpanther/congo.git diff --git a/IMPLEMENTATION_GUIDE.md b/IMPLEMENTATION_GUIDE.md deleted file mode 100644 index 3f93032..0000000 --- a/IMPLEMENTATION_GUIDE.md +++ /dev/null @@ -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 - - - -``` - -Or for Option B: -```html - -``` - -#### 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. - diff --git a/TYPOGRAPHY_QUICK_REFERENCE.md b/TYPOGRAPHY_QUICK_REFERENCE.md deleted file mode 100644 index 0325457..0000000 --- a/TYPOGRAPHY_QUICK_REFERENCE.md +++ /dev/null @@ -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) - diff --git a/TYPOGRAPHY_RESEARCH.md b/TYPOGRAPHY_RESEARCH.md deleted file mode 100644 index cd73796..0000000 --- a/TYPOGRAPHY_RESEARCH.md +++ /dev/null @@ -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 - diff --git a/themes/congo b/themes/congo deleted file mode 160000 index b426bf9..0000000 --- a/themes/congo +++ /dev/null @@ -1 +0,0 @@ -Subproject commit b426bf91b0a90edbb4063bf4efd463536a1f99fe