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
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

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
 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

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
 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

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
 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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

@coderabbitaicoderabbitaiBotJun 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