release: v0.20.0
This commit is contained in:
Ralksta
370
app/themes/kunsthalle.css
Normal file
370
app/themes/kunsthalle.css
Normal file
@@ -0,0 +1,370 @@
|
||||
/* ══════════════════════════════════════════════════════
|
||||
THEME: Kunsthalle — photographs hung on a grey gallery wall
|
||||
══════════════════════════════════════════════════════
|
||||
|
||||
The grey surround (tokens.css) is the point: lighter than every dark
|
||||
preset, darker than every light one, as in an ISO 3664 viewing booth.
|
||||
Everything else is a museum signage system: one family (Libre Franklin),
|
||||
sentence-case titles, small tracked labels, and petrol reserved for
|
||||
wayfinding — links and hover, never decoration. */
|
||||
|
||||
[data-preset='kunsthalle'] {
|
||||
/* The hung shadow: a tight contact shadow plus a soft drop below. */
|
||||
--kh-hang: 0 1px 2px rgba(0, 0, 0, 0.14), 0 14px 28px -14px rgba(0, 0, 0, 0.28);
|
||||
--kh-hang-hover: 0 2px 4px rgba(0, 0, 0, 0.18), 0 20px 36px -16px rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'][data-theme='light'] {
|
||||
--kh-hang: 0 1px 2px rgba(0, 0, 0, 0.1), 0 14px 28px -16px rgba(0, 0, 0, 0.22);
|
||||
--kh-hang-hover: 0 2px 4px rgba(0, 0, 0, 0.12), 0 20px 36px -16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ── Header: wall colour, no rule ─────────────────── */
|
||||
[data-preset='kunsthalle'] .header {
|
||||
background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .header__wordmark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .header__nav-link {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .header__nav-link:hover {
|
||||
color: var(--accent-text, var(--accent));
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .header__nav-link.active {
|
||||
color: var(--text-primary);
|
||||
border-bottom-color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Titles: sentence case, Franklin 500 ──────────── */
|
||||
[data-preset='kunsthalle'] .hero__title,
|
||||
[data-preset='kunsthalle'] .album-header__title,
|
||||
[data-preset='kunsthalle'] .subpage-title {
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero__subtitle,
|
||||
[data-preset='kunsthalle'] .album-header__meta,
|
||||
[data-preset='kunsthalle'] .subpage-subtitle {
|
||||
font-style: normal;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* Labels: the small caps line on a wall text. */
|
||||
[data-preset='kunsthalle'] .section-label,
|
||||
[data-preset='kunsthalle'] .subpage-section__desc {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Photo grid: hung works with wall between them ── */
|
||||
/* Each photo hangs with a wall label below it: PhotoGrid's figcaption
|
||||
(.photo-grid__label), in flow under the tile, so a long caption pushes the
|
||||
next row down instead of running into it. The rows and columns between the
|
||||
works are wall: at least 16px even when settings.yaml sets a tighter
|
||||
grid.gap, which lands inline and beats the preset's 56px. */
|
||||
[data-preset='kunsthalle'] .photo-grid {
|
||||
--grid-gap: 56px;
|
||||
row-gap: max(var(--grid-gap), 16px);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .photo-grid .photo-grid__item {
|
||||
margin-bottom: 0;
|
||||
transition: box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
/* Masonry: the work and its label stay together in one column, and the
|
||||
wall below them is the figure's, not the tile's. */
|
||||
[data-preset='kunsthalle'] .photo-grid--masonry > .fade-in {
|
||||
break-inside: avoid;
|
||||
margin-bottom: max(var(--grid-gap), 16px);
|
||||
}
|
||||
|
||||
/* Justified: the tile keeps the row height and the label hangs below it,
|
||||
so the figure grows rather than the photo shrinking. */
|
||||
[data-preset='kunsthalle'] .photo-grid--justified > .fade-in {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .photo-grid--justified .photo-grid__item {
|
||||
height: var(--grid-row-height);
|
||||
}
|
||||
|
||||
/* The shadow frame, retuned from a soft halo to a hung shadow. */
|
||||
[data-preset='kunsthalle'][data-photo-frame='shadow'] .photo-grid__item {
|
||||
box-shadow: var(--kh-hang);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'][data-photo-frame='shadow'] .photo-grid__item:hover {
|
||||
box-shadow: var(--kh-hang-hover);
|
||||
}
|
||||
|
||||
/* Still photos: no zoom, no dimming. */
|
||||
[data-preset='kunsthalle'] .photo-grid__item:hover img {
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* The EXIF line moves from the photo to the wall label. Under passepartout
|
||||
it stays printed on the mat (that frame's rule outranks this one), and the
|
||||
label drops its copy below. */
|
||||
[data-preset='kunsthalle'] .photo-grid__item-exif {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'][data-photo-frame='passepartout'] .photo-grid__label-exif {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Wall label: catalogue number, the photo's caption when the site publishes
|
||||
one, then camera and lens, in small Franklin on the wall. */
|
||||
[data-preset='kunsthalle'] .photo-grid__label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
/* As wide as the photo and never wider: a filmstrip frame sizes to its
|
||||
content, and a long caption must not stretch it. */
|
||||
width: 0;
|
||||
min-width: 100%;
|
||||
padding-top: 12px;
|
||||
font-family: var(--font-caption);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.45;
|
||||
color: var(--text-muted);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .photo-grid__label-no {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .photo-grid__label-no::before {
|
||||
content: 'No. ';
|
||||
}
|
||||
|
||||
/* The caption reads as the work's title; three lines at most on the wall,
|
||||
the lightbox has the rest. */
|
||||
[data-preset='kunsthalle'] .photo-grid__label-title {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .photo-grid__item:is(:hover, :focus-visible) + .photo-grid__label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Album covers: hung, with a wall label below ──── */
|
||||
[data-preset='kunsthalle'] .subpage-grid {
|
||||
--subpage-gap: 40px;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item {
|
||||
aspect-ratio: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-media {
|
||||
aspect-ratio: 3 / 2;
|
||||
height: auto;
|
||||
box-shadow: var(--kh-hang);
|
||||
transition: box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item:hover .subpage-grid__item-media {
|
||||
box-shadow: var(--kh-hang-hover);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item:hover img {
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-overlay,
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-caption {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 12px;
|
||||
padding: 14px 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-index {
|
||||
grid-row: span 2;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-index::before {
|
||||
content: 'No. ';
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-caption-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item:hover .subpage-grid__item-caption-title {
|
||||
color: var(--accent-text, var(--accent));
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .subpage-grid__item-caption-count {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Standalone album cards on the home page */
|
||||
[data-preset='kunsthalle'] .album-card {
|
||||
border: none;
|
||||
box-shadow: var(--kh-hang);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .album-card:hover {
|
||||
transform: none;
|
||||
box-shadow: var(--kh-hang-hover);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .album-card:hover .album-card__image {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* ── Mosaic hero: a wall of works, the title below ── */
|
||||
[data-preset='kunsthalle'] .hero--mosaic {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero__mosaic-grid {
|
||||
gap: 28px;
|
||||
min-height: 0;
|
||||
height: clamp(360px, 64vh, 760px);
|
||||
padding: 40px 40px 0;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero__mosaic-cell {
|
||||
box-shadow: var(--kh-hang);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero__mosaic-overlay {
|
||||
position: static;
|
||||
transform: none;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 32px 40px 72px;
|
||||
text-align: left;
|
||||
background: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero--mosaic .hero__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
text-transform: none;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero--mosaic .hero__subtitle {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero--mosaic .hero__nav {
|
||||
justify-content: flex-start;
|
||||
gap: 8px 24px;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero--mosaic .hero__nav-link {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero--mosaic .hero__nav-link:hover {
|
||||
color: var(--accent-text, var(--accent));
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* The other hero styles keep their own layout; only the type follows. */
|
||||
[data-preset='kunsthalle'] .hero__nav-link {
|
||||
text-decoration-color: var(--border-hover);
|
||||
}
|
||||
|
||||
/* ── Footer ───────────────────────────────────────── */
|
||||
[data-preset='kunsthalle'] .footer {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
[data-preset='kunsthalle'] .header__wordmark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .photo-grid {
|
||||
--grid-gap: 44px;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero__mosaic-grid {
|
||||
gap: 16px;
|
||||
height: 72vh;
|
||||
height: 72svh;
|
||||
padding: 24px 20px 0;
|
||||
}
|
||||
|
||||
[data-preset='kunsthalle'] .hero__mosaic-overlay {
|
||||
padding: 24px 20px 56px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user