Skip to content

Improve design and add closing thoughts section #7

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
joshcoolman merged 1 commit into from
Feb 12, 2026
Merged

Improve design and add closing thoughts section #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 25 additions & 0 deletions app/sourcing-image/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,31 @@ export default function SourcingImage() {
</figure>
</section>

{/* Closing Thoughts */}
<section className="si-closing">
<div className="si-closing-rule" />
<h2 className="si-closing-heading">Closing Thoughts</h2>
<p>
Every image in this essay was chosen before a single word was written.
That inversion -- visual first, language second -- mirrors how
attention itself operates. We see before we name. We feel the weight
of a composition before we can articulate why it holds us.
</p>
<p>
The sourcing of images is its own form of writing. Each photograph
carries a tonal register, a rhythm, a set of spatial relationships
that either harmonize with or disrupt the images around it. Curating
a sequence is like tuning an instrument: the individual notes matter
less than the intervals between them.
</p>
<p>
If this experiment proves anything, it is that editorial design is
not illustration. The images do not serve the text. The text does not
explain the images. They exist in dialogue -- two voices, neither
subordinate, each making the other more precise.
</p>
</section>

{/* Colophon */}
<footer className="si-colophon">
<div className="si-colophon-rule" />
Expand Down
45 changes: 42 additions & 3 deletions app/sourcing-image/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
.si-hero-img {
object-fit: cover;
object-position: center 40%;
filter: brightness(0.7);
filter: brightness(0.65) saturate(1.1);
}

.si-hero-overlay {
Expand Down Expand Up @@ -350,8 +350,8 @@

.si-pullquote {
margin: 0;
padding: 48px 0;
border-top: 1px solid var(--rule);
padding: 56px 0;
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--rule);
text-align: center;
}
Expand Down Expand Up @@ -490,6 +490,45 @@
padding: 14px 0;
}

/* ───────────────────────────────────────────
Closing Thoughts
─────────────────────────────────────────── */

.si-closing {
max-width: var(--col-max);
margin: 0 auto;
padding: 0 24px 48px;
}

.si-closing-rule {
width: 100%;
height: 1px;
background: linear-gradient(to right, var(--rule), transparent);
margin: 64px 0 48px;
}

.si-closing-heading {
font-family: var(--serif);
font-size: clamp(24px, 3.5vw, 32px);
font-weight: 400;
font-style: italic;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 28px;
}

.si-closing p {
margin: 0 0 24px;
color: var(--mid);
font-size: 16px;
line-height: 1.8;
}

.si-closing p:last-child {
margin-bottom: 0;
}

/* ───────────────────────────────────────────
Colophon
─────────────────────────────────────────── */
Expand Down