Skip to content

style: editorial redesign with serif typography#71

Merged
acald-creator merged 2 commits into
mainfrom
style/editorial-redesign
Apr 14, 2026
Merged

style: editorial redesign with serif typography#71
acald-creator merged 2 commits into
mainfrom
style/editorial-redesign

Conversation

@acald-creator
Copy link
Copy Markdown
Owner

@acald-creator acald-creator commented Apr 14, 2026 •
edited by coderabbitai Bot
Loading

Summary

  • Add Playfair Display serif for display/heading typography
  • Editorial masthead nav with uppercase small-caps links
  • Text-focused homepage — no logo, stacked blurbs with horizontal rules
  • Magazine-style article list on Posts page — overline meta, serif headings, dividers
  • Login page with gold accent top border instead of bordered card
  • Sticky footer via flex column layout
  • Removed tech-landing-page CSS (logo animation, hero gradient)
  • Reduced card border-radius from 8px to 2px
  • Body text at 17px/1.75 line height for readability

Test plan

  • bun run res:build — 108 modules, zero warnings
  • bun run test — all 18 tests pass
  • bun run build — production build succeeds

Summary by CodeRabbit

Release Notes

  • Style

    • Applied visual refresh with new serif font (Playfair Display) for headings across the app
    • Updated navigation bar styling and brand presentation
    • Enhanced typography scales, spacing, and letter-spacing throughout
    • Refined card styling and layout on home and posts pages
    • Improved global heading sizes and hover interactions

  • Chores

    • Removed interactive counter component from the home page

@acald-creator
style: editorial redesign with serif typography
c83cb50 
Add Playfair Display serif for headings, editorial masthead nav,
text-focused homepage with stacked blurbs, magazine-style article
list for posts, accent-line login card, reduced card border-radius.
Sticky footer via flex column layout. Remove tech-landing-page
logo animation and gradient CSS.
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 14, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
rspack-rescript Error Error Apr 14, 2026 1:16am

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 14, 2026 •
edited
Loading

Warning

Rate limit exceeded

@acald-creator has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 51 minutes and 22 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 51 minutes and 22 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8d4b0052-c4e9-458a-adf7-f6baa3ef7d74

📥 Commits

Reviewing files that changed from the base of the PR and between c83cb50 and a4056f9.

📒 Files selected for processing (5)
  • src/components/Avatar/Avatar.res
  • src/components/Badge/Badge.res
  • src/components/Blockquote/Blockquote.res
  • src/components/Divider/Divider.res
  • src/pages/ComponentsPage.res
📝 Walkthrough

Walkthrough

This pull request implements a comprehensive design system overhaul, introducing a serif typography foundation (Playfair Display), refactoring component styling to theme-based approaches, redesigning page layouts (HomePage and PostsPage), updating the brand identity to "The Journal," and removing interactive template elements (Logo component, counter state).

Changes

Cohort / File(s) Summary
Font & Theme System
index.html, src/styles/Theme.res, src/styles/GlobalStyles.res		 Added Google Fonts preconnect/stylesheet for Playfair Display; extended theme with serif font family; updated global body typography (increased font-size to 1.0625rem, line-height to 1.75) and heading styles with new serif font stack, reduced font-weight (400 vs 600), added letter-spacing (-0.02em), and adjusted h1/h2 sizing.
Component Typography & Styling
src/components/Typography/Typography.res, src/components/Card/Card.res, src/components/NavBar/NavBar.res		 Refactored Typography to use theme fonts throughout all variants with adjusted weights/line-heights/letter-spacing; reduced Card border-radius from "lg" to "sm"; updated NavBar padding, removed border-bottom, applied serif font to brand text ("The Journal"), increased link gap, reduced link font-size, added uppercase text-transform and letter-spacing.
App Structure & Global Layout
src/App.res		 Removed global CSS definitions (logo styles, keyframes, hero gradient) and refactored layout using Emotion: outer div as full-height flex column, main element flexes to fill space, footer padding adjusted (2rem 1rem) with centering via margin and width constraints.
HomePage Redesign
src/pages/HomePage.res		 Removed Logo component and counter state; reworked HeroSection with constrained centered container and divider; changed heading to "A ReScript Template"; replaced FeaturesSection grid layout with stacked list-like design; updated feature set to focus on Rspack/ReScript/Relay/Emotion.
PostsPage Restructure
src/pages/PostsPage.res		 Renamed PostCard to PostItem; replaced Card-based layout with semantic <article> markup and Emotion styles; updated post metadata to use Typography.Overline with author/date; changed page header from "Posts" Display heading to "Recent Writing" Overline; updated Suspense fallback text and styling.
LoginPage Card Styling
src/pages/LoginPage.res		 Updated card styling: removed background color/border/border-radius, changed padding from uniform 2rem to 2rem 0, added top-only border with Color.primary.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

  • PR #68: Directly modifies the same UI modules (NavBar, App, HomePage, PostsPage) that are being redesigned in this PR, suggesting coordinate or interdependent changes to component structure and styling.
  • PR #70: Modifies NavBar.res component signature and rendering logic, which could interact with or conflict with the NavBar styling and branding updates in this PR.
  • PR #60: Updates shared styling/theme infrastructure files (Theme.res, GlobalStyles.res, Typography.res, App.res), indicating related changes to the design system foundation.

Poem

🐰 Whiskers twitching with delight,
Serif fonts now catch the light,
The Journal blooms with grace so fine,
Typography in perfect line,
Design systems hop and play,
A fresher look has come to stay! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'style: editorial redesign with serif typography' accurately captures the main objective of this PR, which is a comprehensive editorial redesign focusing on serif typography integration throughout the codebase.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch style/editorial-redesign

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@acald-creator
feat(components): add Divider, Avatar, Badge, and Blockquote
a4056f9 
Add editorial components: Divider with optional centered label,
Avatar with initials fallback and 3 sizes, Badge with 5 semantic
variants, and Blockquote with serif italic styling and attribution.
Add showcase sections to Components page.
@acald-creator acald-creator merged commit 93247f1 into main Apr 14, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@acald-creator