/* =========================================================
INDEX GALLERIES — one card system, three contexts
is the mode switch:
html:not(.view-feed) → grid mode
html.view-feed → cards (feed) mode
Contexts:
Homepage #all-work.gallery flat, no year groups
Sketchbook .gallerywrapper.timeline year-grouped, masked
Firehose .gallerywrapper.feed year-grouped
Project index .gallerywrapper.project year-grouped
Year-grouped structure:
Card innards (card.njk):
![]()
========================================================= */
/* =========================================================
1. BASE CARD — shared innards, mode-agnostic
========================================================= */
.card-link {
display: block;
color: inherit;
text-decoration: none;
}
.card-img {
display: block;
margin: 0;
}
/* Captions off by default; only feed mode turns them on (section 2)
or a context explicitly opts in. */
.card-meta {
display: none;
}
.card-caption {
margin: 0;
font-size: 1rem;
line-height: 1.4;
text-align: center;
}
.card-caption a {
color: var(--heading-color);
text-decoration: none;
}
.card-caption a:hover {
color: var(--artwork-text-color);
}
/* =========================================================
2. FEED-MODE CHROME AND IMAGE SIZING
Applies wherever html.view-feed is set, except the homepage,
which overrides in section 4.
========================================================= */
html.view-feed .card-link {
display: block;
width: fit-content;
max-width: 100%;
margin-inline: auto;
border-radius: 6px;
overflow: hidden;
background: var(--border-color);
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
transition: filter 0.3s ease, transform 0.3s ease;
}
html.view-feed .card-link:not(:has(img.feed-solo)) {
filter: drop-shadow(
0 6px 16px color-mix(in srgb, var(--artwork-text-color) 85%, transparent)
);
border: 1px solid var(--artwork-text-color);
}
html.view-feed .card-link:hover {
transform: scale(1.015);
}
html.view-feed .card-img {
width: auto;
max-width: 100%;
height: auto;
max-height: 80vh;
margin-inline: auto;
}
html.view-feed .card-meta {
display: flex;
flex-direction: column;
gap: 0.3rem;
text-align: center;
}
/* =========================================================
3. HOMEPAGE — GRID MODE
Flat square tiles. The hero image and caption live outside
#all-work; only the grid is styled here.
========================================================= */
#all-work {
position: relative;
}
html:not(.view-feed) #all-work .gallery-item {
position: relative;
aspect-ratio: 1 / 1;
margin: 0;
padding: 0;
}
html:not(.view-feed) #all-work .card-img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.3s ease;
}
/* =========================================================
4. HOMEPAGE — FEED MODE
Raw pieces, no chrome, single column. Captions show.
========================================================= */
html.view-feed #all-work.gallery {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 640px;
margin-inline: auto;
}
html.view-feed #all-work .gallery-item {
display: flex;
flex-direction: column;
gap: 1rem;
aspect-ratio: auto;
overflow: visible;
}
html.view-feed #all-work .card-link,
html.view-feed #all-work .card-link:not(:has(img.feed-solo)) {
border-radius: 0;
overflow: visible;
background: transparent;
filter: none;
border: 0;
transition: none;
transform: none;
}
html.view-feed #all-work .card-link:hover {
transform: none;
}
html.view-feed #all-work .gallery-item:hover img {
transform: none;
}
/* Homepage reveal machinery collapses in feed mode. */
html.view-feed #all-work .homegallery-break,
html.view-feed #all-work .homegallery-break-mobile,
html.view-feed #all-work .homegallery-break-desktop {
display: none !important;
}
html.view-feed #all-work .homegallery-piece-hidden,
html.view-feed #all-work .homegallery-piece-mobile {
display: flex !important;
}
/* =========================================================
5. YEAR-GROUPED INDEX — GRID MODE
Labels visible, one grid per year, square tiles.
========================================================= */
.gallery-year {
text-align: center;
margin-bottom: 2em;
}
.gallery-year-label {
display: block;
margin: 1.5rem 0 0.5rem;
}
.gallerywrapper .gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 180px));
justify-content: center;
gap: 0;
padding-bottom: 1em;
}
@media (max-width: 375px) {
.gallerywrapper .gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
html:not(.view-feed) .gallerywrapper .card-img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.3s ease;
}
/* Sentinel doesn't occupy a grid cell in grid mode. */
html:not(.view-feed) .feed-sentinel {
display: none;
}
/* =========================================================
6. YEAR-GROUPED INDEX — FEED MODE
Year wrappers unroll via display: contents. Labels hidden.
Cards get the shared chrome and sizing from section 2.
========================================================= */
html.view-feed .gallerywrapper {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 640px;
margin-inline: auto;
}
html.view-feed .gallerywrapper .gallery-year,
html.view-feed .gallerywrapper .gallery {
display: contents;
}
html.view-feed .gallerywrapper .gallery-year-label {
display: none;
}
html.view-feed .gallerywrapper .gallery-item {
display: flex;
flex-direction: column;
gap: 1rem;
aspect-ratio: auto;
overflow: visible;
}
html.view-feed .gallerywrapper .gallery-item:hover img {
transform: none;
}
/* Project index pages hide captions in feed mode — the year
grouping already provides context. Sketchbook and firehose keep
theirs. */
html.view-feed body.tag-goodnight .gallerywrapper .card-meta {
display: none;
}
/* =========================================================
7. SKETCHBOOK OVERRIDES
The mask pattern and per-item rotations live in sketchbook.css.
Grid shape is shared (section 5). Only the feed-mode reset
needs to happen here, since sketchbook.css's nth-child rules
aren't mode-gated.
========================================================= */
html.view-feed .gallerywrapper.timeline .gallery-item {
transform: none;
margin-top: 0;
}
/* =========================================================
8. REVEAL SYSTEM
========================================================= */
html.view-feed .reveal-hidden {
display: none;
}
.feed-sentinel {
height: 1px;
}
/* =========================================================
9. TOGGLE
Injected by feed-view.js into .gallerywrapper (and #all-work
on the homepage). A two-option control:
View as: ✓Grid Feed
The check (✓) sits before whichever option is active. Its
space is reserved on both options so nothing shifts when the
active state moves. Positioned above the gallery, right-aligned.
Placement: this element is the first flow child of the wrapper,
so it sits above the grid / feed without absolute positioning —
it doesn't move when the wrapper's width changes between modes.
========================================================= */
.view-toggle {
display: flex;
align-items: baseline;
gap: .68rem;
width: fit-content;
margin: 1.5rem auto 0.51rem auto;
font: inherit;
font-size: 0.9rem;
color: var(--artwork-text-color);
/* Homepage grid: span all columns, right-align within the row. */
grid-column: 1 / -1;
justify-self: end;
/* Feed modes: right-align as a flex item in the column. */
align-self: flex-end;
}
.view-toggle-label {
color: var(--footer-text-color);
margin-right: 0rem;
}
.view-toggle-option {
font: inherit;
color: inherit;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
/* Reserve space for the check on both options so the label
doesn't shift when active state moves. *
.view-toggle-option::after {
content: "✓";
display: inline-block;
width: 1em;
margin-right: 0em;
visibility: hidden;
font-weight: bold;
}*/
.view-toggle-option[aria-pressed="true"] {
font-weight: bold;
text-decoration: underline;
}
.view-toggle-option[aria-pressed="true"]::after {
visibility: visible;
}
.view-toggle-option:hover,
.view-toggle-option:focus-visible {
text-decoration: none;
}
/* =========================================================
10. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.card-link,
.card-img {
transition: none;
}
html.view-feed .card-link:hover,
html.view-feed .gallerywrapper .gallery-item:hover img {
transform: none;
}
}