Skip to content

style: reading width, shell layout, and prose typography #1337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NiallJoeMaher merged 6 commits into from
Jun 15, 2026
+49 −17
Merged

style: reading width, shell layout, and prose typography #1337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
92d0d1d
chore: prettier-format OG card files
NiallJoeMaher Jun 14, 2026
4136505
chore: add CLAUDE.md, remove internal planning docs, gitignore AI config
NiallJoeMaher Jun 14, 2026
e12d849
feat: personalized 'For you' feed (topic follow/mute + affinity)
NiallJoeMaher Jun 14, 2026
71921ba
style: reading width, shell layout, and prose typography
NiallJoeMaher Jun 15, 2026
3def377
fix: prose color/line-height review findings
NiallJoeMaher Jun 15, 2026
8a8e30b
Merge branch 'develop' into feat/phase3-personalized-feed
NiallJoeMaher Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/(app)/[username]/[slug]/_userLinkDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {

if (status === "pending") {
return (
<div className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
<div className="mx-auto max-w-prose py-4 sm:py-8">
<div className="animate-pulse">
<div className="mb-4 h-6 w-24 rounded bg-elevated" />
<div className="mb-4 h-4 w-48 rounded bg-elevated" />
Expand All @@ -134,7 +134,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {

if (status === "error" || !linkContent) {
return (
<div className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
<div className="mx-auto max-w-prose py-4 sm:py-8">
<Link
href="/"
className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"
Expand Down Expand Up @@ -173,7 +173,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {
const isOwner = session?.user?.id === linkContent.author?.id;

return (
<article className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
<article className="mx-auto max-w-prose py-4 sm:py-8">
<Link
href="/"
className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"
Expand Down
2 changes: 1 addition & 1 deletion app/(app)/s/[sourceSlug]/[slug]/_feedArticleContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const FeedArticleContent = ({ sourceSlug, article }: Props) => {
const safeExternalUrl = safeExternalHref(article.externalUrl);

return (
<article className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
<article className="mx-auto max-w-prose py-4 sm:py-8">
<Link
href="/"
className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"
Expand Down
2 changes: 1 addition & 1 deletion components/ContentDetail/PostReader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ const PostReader = async ({
{articleSchema && <JsonLd data={articleSchema} />}
{breadcrumbSchema && <JsonLd data={breadcrumbSchema} />}

<div className="mx-auto max-w-3xl px-0 py-4 sm:px-4 sm:py-8">
<div className="mx-auto max-w-prose py-4 sm:py-8">
<nav className="mb-6 flex items-center gap-2 text-sm text-muted">
<Link href="/" className="hover:text-fg">
Feed
Expand Down
56 changes: 44 additions & 12 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ select:focus {
@apply px-6 py-3 text-base;
}

/* App shell — sticky top bar + 3-column rail grid. Breakpoints (1080 / 720) are
/* App shell — sticky top bar + 3-column rail grid. Breakpoints (1300 / 720) are
bespoke to the handoff, so they're raw media queries rather than Tailwind's
lg/md. */
.app-topbar {
Expand All @@ -246,10 +246,10 @@ select:focus {
}

.app-main {
max-width: 1180px;
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 300px;
grid-template-columns: 200px minmax(0, 1fr) 280px;
gap: clamp(1.5rem, 2.4vw, 2.5rem);
padding: 2rem clamp(1rem, 3vw, 2rem) 4rem;
}
Expand Down Expand Up @@ -278,10 +278,12 @@ select:focus {
padding-top: 1.5rem;
}

@media (max-width: 1080px) {
/* Rail folds away when there isn't room — the center column keeps its ~672px
reading measure rather than stretching. */
@media (max-width: 1300px) {
.app-main {
grid-template-columns: 200px minmax(0, 1fr);
max-width: 832px;
max-width: 968px;
}
.app-rightrail {
display: none;
Expand All @@ -293,7 +295,7 @@ select:focus {
grid-template-columns: minmax(0, 1fr);
/* Small side gutters on mobile (not the desktop clamp) so cards get the
full reading width and don't overflow the viewport. */
padding: 1.25rem 0.75rem 6rem;
padding: 1.25rem 1rem 6rem;
}
.app-leftrail {
display: none;
Expand Down Expand Up @@ -327,6 +329,28 @@ select:focus {
@apply prose-neutral dark:prose-invert lg:prose-lg;

margin-top: 1.5rem;
/* A slightly tighter measure than prose-lg's default for a calmer rhythm in
the ~672px reading column. */
line-height: 1.62;
}

/* Body copy sits a step down from the headings (Medium-style); headings and
bold lift to the primary text colour. Everything is keyed off the design
tokens so it flips correctly in dark mode. */
.prose :where(p, ul, ol) {
color: rgb(var(--color-muted));
line-height: 1.62;
}
/* Don't dim paragraph text while the author is writing. */
.tiptap :where(p, ul, ol) {
color: inherit;
}
.prose :where(h1, h2, h3, h4) {
@apply font-display tracking-tight;
color: rgb(var(--color-fg));
}
.prose :where(strong, b) {
color: rgb(var(--color-fg));
}

.prose .anchor {
Expand All @@ -344,7 +368,14 @@ select:focus {
}

.prose a {
@apply transition-all;
@apply text-accent-soft underline transition-all;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.prose blockquote {
@apply border-accent;
border-left-width: 3px;
color: rgb(var(--color-muted));
}
Comment on lines +371 to 379

@coderabbitai coderabbitai Bot Jun 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add empty lines before declarations to fix Stylelint warnings.

Stylelint requires empty lines before certain declarations for consistency.

🎨 Proposed formatting fix 
 .prose a {
   `@apply` text-accent-soft underline transition-all;
+
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
 }
 .prose blockquote {
   `@apply` border-accent;
+
   border-left-width: 3px;
   color: rgb(var(--color-muted));
 }
🧰 Tools
🪛 Stylelint (17.12.0)

[error] 367-367: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

[error] 372-372: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@styles/globals.css` around lines 366 - 374, Add empty lines before
declarations to satisfy Stylelint formatting requirements. Insert a blank line
before the `.prose blockquote` rule and before the `@apply border-accent`
declaration within that rule to maintain consistent spacing and meet Stylelint's
style guidelines for CSS declarations.

Source: Linters/SAST tools

.prose blockquote p::before {
content: none;
Expand All @@ -360,11 +391,13 @@ select:focus {
}

.prose pre {
@apply border-2 border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-black;
@apply border border-hairline bg-inset;
}

.prose code {
@apply rounded-lg border border-neutral-100 bg-neutral-100 px-1 py-0.5 font-mono text-neutral-800 dark:border-neutral-800 dark:bg-black dark:text-neutral-200;
/* Inline code only — fenced blocks keep their own treatment below. */
.prose :not(pre) > code {
@apply rounded-sm border border-hairline bg-inset px-1 py-0.5 font-mono text-fg;
font-size: 0.86em;
}

.prose code:after {
Expand All @@ -376,8 +409,7 @@ select:focus {
}

.prose pre code {
@apply p-0 text-neutral-800 dark:text-neutral-200;
border: initial;
@apply border-0 bg-transparent p-0 text-fg;
}

.prose img {
Expand Down
Loading