Vibe Coding Project 2: Blog Design with GeneratePress

Design a minimal, typography-first blog in HTML/CSS, then implement it in a GeneratePress + GenerateBlocks setup.

🎯 Project Goal

A clean, readable blog with:

• Elegant serif/sans-serif typographic system.
• Card-style post grid for the archive.
• Full-width hero post header.
• Sidebar with a stylized widget area.
• Footer with a three-column layout.

Phase 1: Define Your Typography System

Before prompting AI, design your type scale:

:root {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  3rem;      /* 48px */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
}

Phase 2: AI Prompt for the Post Card Component

Create a blog post card component using the following design system variables:
[paste your :root block]

The card should have:
- A featured image at top (16:9 ratio using padding-bottom trick)
- Category label (small, uppercase, accent color)
- Post title (--font-heading, 2 lines max with line-clamp)
- Excerpt (--font-body, muted color, 3 lines)
- Author avatar (40px circle) + author name + date inline
- Hover: card lifts and title color changes to --accent
Output: clean, semantic HTML + CSS, BEM naming.

Phase 3: GeneratePress Implementation

Setting Up Global Styles

1. Customizer → Colors: Set your accent, contrast, base values.
2. Customizer → Typography: Set Primary Font to Inter, Secondary to Playfair Display.
3. Additional CSS: Add your :root token overrides.

Mapping HTML to GenerateBlocks

Component	GP/GB Element
Post card grid	GB Grid → 3 columns
Post card	GB Container (.post-card)
Category label	GB Headline (H6 tag, .post-card__cat)
Post title	GB Headline (H2 tag, .post-card__title)
Author row	GB Container (flexbox, .post-card__meta)

Key CSS for the Post Card

.post-card {
  background: var(--base-2);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.post-card__title {
  font-family: var(--font-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Phase 4: The Sidebar

For a blog sidebar in GeneratePress:

/* Target GP's sidebar widget area */
.widget {
  padding: var(--space-6);
  background: var(--base-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--accent);
}
.widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}