Skip to content

Tidy blog layout: aligned columns, tighter spacing, captions, and index contrast #155

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
3mdistal merged 4 commits into from
Sep 25, 2026
Merged

Tidy blog layout: aligned columns, tighter spacing, captions, and index contrast #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ac85cc9
Align blog post header with the body text on wide screens
3mdistal Sep 25, 2026
e7b7047
Tidy blog layout: shared column, tighter spacing, captions, contrast
3mdistal Sep 25, 2026
7dc00f9
Give blog index titles room before the date
3mdistal Sep 25, 2026
0431c9d
Put the blog index on the posts' reading column
3mdistal Sep 25, 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
21 changes: 5 additions & 16 deletions src/lib/components/blog-header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,28 +66,17 @@
</div>

<style>
/* Same column and gutter as the post body, so their text always lines up. */
.blog-header {
margin: 0 auto;
margin-top: 80px; /* More space from top */
padding: var(--content-space-lg) var(--content-space-sm);
padding: var(--content-space-lg) var(--content-gutter) 0;
width: 100%;
max-width: 900px;
max-width: calc(var(--content-column) + 2 * var(--content-gutter));
color: var(--color-content-text);

@media (min-width: 640px) {
padding: var(--content-space-lg) var(--content-space-md);
}

@media (min-width: 768px) {
padding: var(--content-space-lg) var(--content-space-xl);
}

@media (min-width: 1280px) {
padding: var(--content-space-xl) var(--content-space-xl);
}

@media (min-width: 1536px) {
padding: var(--content-space-xl) var(--content-space-lg);
padding-top: var(--content-space-xl);
}
}

Expand Down Expand Up @@ -187,7 +176,7 @@
flex-direction: column;
align-items: flex-start;
gap: var(--content-space-xs);
margin-bottom: var(--content-space-md);
margin-bottom: var(--content-space-sm);
border-bottom: 1px solid var(--color-content-border);
padding-bottom: var(--content-space-md);

Expand Down
20 changes: 20 additions & 0 deletions src/lib/styles/prose-variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,33 @@
--content-space-xs: var(--space-2);

/* Content layout */
--content-column: 900px; /* Reading column shared by blog posts and the blog index */
--content-gutter: var(--content-space-sm); /* Side padding around it; grows below */
--content-measure: 60ch;
--content-measure-subtitle: 45ch;
--content-measure-blockquote: 40ch;
--content-radius: calc(var(--radius-1) + 2px);
--content-radius-sm: var(--radius-1);
}

@media (min-width: 640px) {
:root {
--content-gutter: var(--content-space-md);
}
}

@media (min-width: 768px) {
:root {
--content-gutter: var(--content-space-xl);
}
}

@media (min-width: 1536px) {
:root {
--content-gutter: var(--content-space-lg);
}
}

/* Content colors - Dark mode */
@media (prefers-color-scheme: dark) {
:root {
Expand Down
18 changes: 17 additions & 1 deletion src/lib/styles/prose.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

.prose {
margin: 0 auto;
max-width: 900px;
max-width: var(--content-column);
font-size: var(--content-font-size-body);
line-height: 1.75rem;
}
Expand Down Expand Up @@ -103,6 +103,22 @@
object-fit: contain;
}

/* Image captions: a paragraph containing only <small>, right after an image */
.prose p:has(> img):has(+ p > small:only-child) {
margin-bottom: var(--content-space-xs);
}

.prose p:has(> img):has(+ p > small:only-child) > img {
margin-bottom: 0;
}

.prose p:has(> img) + p:has(> small:only-child) {
margin-top: 0;
margin-bottom: 2em;
color: var(--color-content-secondary);
line-height: 1.5;
}

.prose .session-interlude-video {
display: block;
margin: 2em 0;
Expand Down
3 changes: 2 additions & 1 deletion src/lib/styles/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@
}

[data-theme='blog'] {
--color-bg: var(--color-steel-500);
/* Dark enough for the white index text to meet WCAG AA (4.5:1). */
--color-bg: var(--color-steel-600);
--color-surface: rgba(20, 23, 35, 0.35);
--color-surface-muted: rgba(255, 255, 255, 0.08);
--color-text: #f8fafc;
Expand Down
1 change: 1 addition & 0 deletions src/lib/styles/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@

--color-mauve-400: #beb5ca;
--color-steel-500: #838391;
--color-steel-600: #666674;
--color-cloud-200: #d1dce7;

--color-violet-800: #271647;
Expand Down
18 changes: 12 additions & 6 deletions src/routes/(landing-pages)/blog/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,11 @@
width: 100%;
}

/* Same reading column as blog posts, so the two pages line up. */
.blog-wrapper {
position: relative;
width: 90%;
padding-inline: var(--content-gutter);
width: 100%;
max-width: calc(var(--content-column) + 2 * var(--content-gutter));
}

.background-container {
Expand All @@ -127,12 +129,16 @@
object-position: right;
}

@media (min-width: 768px) {
.blog-wrapper {
left: 2.5rem;
width: 60%;
/* In light mode the painting's pale areas would lighten the background
behind the white text; multiply lets the bird only darken it. (Set on
the fixed container, which is its own stacking context.) */
@media (prefers-color-scheme: light) {
.background-container {
mix-blend-mode: multiply;
}
}

@media (min-width: 768px) {
.background-container :global(.background-image) {
object-position: 50% 35%;
}
Expand Down
28 changes: 10 additions & 18 deletions src/routes/(landing-pages)/blog/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -547,26 +547,16 @@
.blog-container {
margin: 0 auto;
background-color: var(--color-content-bg);
padding: var(--content-space-lg) var(--content-space-sm);
max-width: 900px;
padding: var(--content-space-lg) var(--content-gutter);
max-width: calc(var(--content-column) + 2 * var(--content-gutter));
color: var(--color-content-text);

@media (min-width: 640px) {
padding: var(--content-space-lg) var(--content-space-md);
}

@media (min-width: 768px) {
padding: var(--content-space-lg) var(--content-space-xl);
}

/* Wider for the owner editor's two panes; .prose stays centered at
--content-column, so the reading column doesn't move. */
@media (min-width: 1280px) {
padding: var(--content-space-xl) var(--content-space-xl);
padding-block: var(--content-space-xl);
max-width: 1320px;
}

@media (min-width: 1536px) {
padding: var(--content-space-xl) var(--content-space-lg);
}
}

.blog-container > div:not(.prose):not(.editor-layout):not(.editor-toolbar):not(.editor-feedback) {
Expand Down Expand Up @@ -696,10 +686,11 @@
max-width: none;
}

/* Right-aligned to the reading column, not the wider editor container. */
.back-link {
margin-top: 4em;
margin: 4em auto 0;
width: 100%;
max-width: var(--content-measure);
max-width: var(--content-column);
font-size: 2.25rem;
line-height: 2.5rem;
text-align: right;
Expand All @@ -711,7 +702,8 @@

a {
display: inline-block;
padding: var(--content-space-md);
/* No right padding, so the text ends at the column edge. */
padding: var(--content-space-md) 0 var(--content-space-md) var(--content-space-md);
color: var(--color-content-text);
font-family: var(--font-serif);
}
Expand Down
93 changes: 55 additions & 38 deletions src/routes/(landing-pages)/blog/blog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,22 @@
</script>

<h1 class="posts-title" style="color: {accent}">Posts</h1>
{#each posts as post}
<div class="post-item">
<p class="post-title-wrapper">
<a href="/blog/{post.slug}" class="post-title-link">
{post.title}
</a>
</p>
{#if post.subtitle}
<p class="post-subtitle">{post.subtitle}</p>
{/if}
<p class="post-date">{post.formattedPublicationDate}</p>
<div class="post-category-wrapper">
<ul class="post-list">
{#each posts as post}
<li class="post-item">
<h2 class="post-title-wrapper">
<a href="/blog/{post.slug}" class="post-title-link">
{post.title}
</a>
</h2>
{#if post.subtitle}
<p class="post-subtitle">{post.subtitle}</p>
{/if}
<p class="post-date">{post.formattedPublicationDate}</p>
<p class="post-category">{post.category}</p>
</div>
</div>
{/each}
</li>
{/each}
</ul>

<style>
.posts-title {
Expand All @@ -41,31 +41,47 @@
font-size: 4rem;
}

.post-list {
margin: 0;
padding: 0;
list-style: none;
}

/* Phones: title, subtitle, then one meta line ("Lyric · September 10, 2026"). */
.post-item {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-4);
grid-template-columns: auto 1fr;
column-gap: var(--space-2);
margin-bottom: 3rem;

/* The title takes the free width; the date column hugs the date. */
@media (min-width: 768px) {
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-7);
}
}

.post-title-wrapper {
grid-column: span 2;
margin-bottom: 0;
margin: 0;
font-weight: inherit;
font-size: inherit;

@media (min-width: 768px) {
grid-column: 1;
align-self: baseline;
}
}

.post-title-link {
transition: color 0.15s ease;
color: var(--color-text);
font-weight: 500;
font-size: var(--content-font-size-heading-md);
line-height: 1;
line-height: 1.15;
font-family: var(--font-serif);

@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: 1.75rem;
}

Expand All @@ -86,37 +102,38 @@
color: var(--color-text);
font-style: italic;
font-size: var(--content-font-size-body);
line-height: 1;
line-height: 1.35;
text-wrap: balance;

@media (min-width: 768px) {
grid-column: 1;
}
}

.post-date {
grid-row-start: 3;
grid-column-start: 2;
color: var(--color-text-muted);

@media (min-width: 768px) {
grid-row-start: 1;
grid-column-start: 3;
&::before {
margin-right: var(--space-2);
content: '·';
content: '·' / '';
}
}

.post-category-wrapper {
display: flex;
grid-column-start: 2;
justify-content: flex-end;

@media (min-width: 768px) {
grid-column-start: 1;
justify-content: flex-start;
grid-row-start: 1;
align-self: baseline;

&::before {
content: none;
}
}
}

.post-category {
display: none;
grid-row-start: 3;
grid-column-start: 1;
color: var(--color-text-muted);

@media (min-width: 768px) {
display: block;
}
}
</style>
Loading