designslife/dlStack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
16314054eccc4f5862ecbb0aeca1d4b1b0e09c05
dlStack/assets/css/swiss.css
Joel Brock 543d3bd8e1 Refine Swiss + Editorial themes; add optional date field 
Swiss: drop all-caps on titles, soften heavy ink borders to muted rules
or remove them where background contrast carries the form, balance hero
name weights (smaller lighter first name vs heavier italic last name),
fix unreadable white description text on portfolio hover.

Editorial: enlarge the section "No" mark and set it in italic Fraunces so
it reads as typography instead of a tick, swap the first name into DM
Serif Display for a different J, sharpen the section number caption.

Client tile: contain custom logos at 86% so wide marks like
"The Cooperative Way" stop getting cropped to "operative".

New: optional `date` field on every item type (link/card/portfolio/
youtube/client). Accepts YYYY, YYYY-MM, or YYYY-MM-DD. Rendered
human-friendly with the raw ISO preserved in <time datetime>.
Documented in README and demonstrated in links.example.json.
2026-05-15 16:33:53 -07:00

429 lines
13 KiB
CSS
Raw Blame History

/* dlstack — Swiss/International template
Activate with theme.template: "swiss" in links.json.
Tribute to Müller-Brockmann, Hofmann, Lohse — Akzidenz-Grotesk family
(Archivo as a free variable substitute). All overrides scoped to
:root[data-template="swiss"] so this file is inert otherwise.
*/
:root[data-template="swiss"] {
--paper: oklch(0.985 0 0);
--paper-2: oklch(0.955 0 0);
--ink: oklch(0.10 0 0);
--ink-2: oklch(0.18 0 0);
--muted: oklch(0.42 0 0);
--rule: oklch(0.78 0 0);
--accent: #DC2127;
--on-accent: oklch(0.99 0 0);
--display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--radius: 0;
}
@media (prefers-color-scheme: dark) {
:root[data-template="swiss"][data-theme="auto"] {
--paper: oklch(0.10 0 0);
--paper-2: oklch(0.16 0 0);
--ink: oklch(0.985 0 0);
--ink-2: oklch(0.92 0 0);
--muted: oklch(0.62 0 0);
--rule: oklch(0.32 0 0);
}
}
:root[data-template="swiss"][data-theme="dark"] {
--paper: oklch(0.10 0 0);
--paper-2: oklch(0.16 0 0);
--ink: oklch(0.985 0 0);
--ink-2: oklch(0.92 0 0);
--muted: oklch(0.62 0 0);
--rule: oklch(0.32 0 0);
}
/* clean off the editorial paper grain */
:root[data-template="swiss"] body::before { display: none; }
/* ───── marker bar ───── */
:root[data-template="swiss"] .marker {
border-bottom: 1px solid var(--rule);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ink);
}
:root[data-template="swiss"] .marker__brand { color: var(--ink); gap: 0.55rem; }
:root[data-template="swiss"] .marker__brand .star {
width: 12px; height: 12px;
background: var(--accent);
border-radius: 50%;
display: inline-block;
font-size: 0; transform: none;
}
:root[data-template="swiss"] .marker__year { color: var(--accent); }
:root[data-template="swiss"] .theme {
border-radius: 0;
border-color: var(--rule);
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
color: var(--ink);
background: transparent;
padding: 6px 14px;
}
:root[data-template="swiss"] .theme:hover { background: var(--ink); color: var(--paper); }
/* ───── hero — true poster ───── */
:root[data-template="swiss"] .hero__name {
font-family: var(--display);
font-style: normal;
font-weight: 700;
font-variation-settings: normal;
text-transform: none;
letter-spacing: -0.035em;
line-height: 0.86;
}
:root[data-template="swiss"] .hero__name .hero__name-first {
font-family: var(--display);
font-weight: 500;
font-size: 0.78em;
letter-spacing: -0.025em;
color: var(--ink);
}
:root[data-template="swiss"] .hero__name em {
font-style: normal;
font-weight: 800;
font-variation-settings: normal;
color: var(--accent);
}
/* Replace typographic asterisk with primary geometric mark — solid red disc */
:root[data-template="swiss"] .hero__asterism {
font-size: 0; color: transparent;
width: clamp(3rem, 7vw, 5.5rem);
height: clamp(3rem, 7vw, 5.5rem);
background: var(--accent);
border-radius: 50%;
transform: none;
animation: swiss-pop 900ms 200ms cubic-bezier(0.16, 1, 0.30, 1) both;
}
@keyframes swiss-pop {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: scale(1); }
}
:root[data-template="swiss"] .hero__tagline {
font-family: var(--display);
font-style: normal;
font-weight: 600;
font-variation-settings: normal;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--ink);
font-size: clamp(1.15rem, 0.85rem + 1.4vw, 1.85rem);
line-height: 1.1;
max-width: 32ch;
}
:root[data-template="swiss"] .hero__tagline span { color: var(--accent); padding: 0 0.35em; }
:root[data-template="swiss"] .hero__bio {
color: var(--ink);
font-weight: 400;
font-family: var(--body);
}
/* ───── social ───── */
:root[data-template="swiss"] .social a {
border-radius: 0;
border-color: var(--rule);
border-width: 1px;
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--fs-mini);
padding: 9px 14px;
color: var(--ink);
}
:root[data-template="swiss"] .social a:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
transform: none;
}
/* ───── sections ───── */
:root[data-template="swiss"] .section__head {
border-bottom: 2px solid var(--ink);
padding-bottom: 0.85rem;
}
:root[data-template="swiss"] .section__numwrap small {
color: var(--ink);
font-weight: 700;
font-style: normal;
font-family: var(--display);
font-variation-settings: normal;
}
:root[data-template="swiss"] .section__num {
font-family: var(--display);
font-style: normal;
font-weight: 900;
font-variation-settings: normal;
color: var(--accent);
letter-spacing: -0.05em;
}
:root[data-template="swiss"] .section__title {
font-family: var(--display);
font-style: normal;
font-weight: 800;
font-variation-settings: normal;
text-transform: none;
letter-spacing: -0.025em;
color: var(--ink);
}
:root[data-template="swiss"] .section__kicker {
font-family: var(--display);
font-style: normal;
font-weight: 500;
font-variation-settings: normal;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: var(--fs-mini);
color: var(--muted);
}
/* ───── cards ───── */
:root[data-template="swiss"] .card {
border-radius: 0;
border: 0;
background: var(--paper-2);
transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1);
isolation: isolate;
}
:root[data-template="swiss"] .card:hover {
transform: none;
box-shadow: none;
background: var(--ink);
color: var(--paper);
}
:root[data-template="swiss"] .card:hover .card__title,
:root[data-template="swiss"] .card:hover .card__desc,
:root[data-template="swiss"] .card:hover .card__host { color: var(--paper); }
:root[data-template="swiss"] .card::after {
font-family: var(--display);
font-weight: 700;
color: var(--ink);
}
:root[data-template="swiss"] .card:hover::after { color: var(--accent); transform: translate(3px, -3px); }
:root[data-template="swiss"] .card__title {
font-family: var(--display);
font-weight: 700;
text-transform: none;
letter-spacing: -0.01em;
}
:root[data-template="swiss"] .card__desc {
font-family: var(--body);
color: var(--muted);
}
:root[data-template="swiss"] .card__host {
font-family: var(--display);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.08em;
}
:root[data-template="swiss"] .card__date {
font-family: var(--display);
font-weight: 600;
color: var(--muted);
letter-spacing: 0.06em;
}
:root[data-template="swiss"] .card:hover .card__date,
:root[data-template="swiss"] .card:hover .card__host { color: var(--paper); }
:root[data-template="swiss"] .card__meta .card__date::before { color: var(--accent); }
:root[data-template="swiss"] .card:hover .card__meta .card__date::before { color: var(--paper); }
/* link card favicon */
:root[data-template="swiss"] .card--link .favicon {
border-radius: 0;
border: 0;
background: var(--paper);
}
:root[data-template="swiss"] .card--link:hover .favicon {
background: var(--paper);
}
:root[data-template="swiss"] .card--link .favicon[data-fallback] {
font-family: var(--display);
font-weight: 900;
color: var(--ink);
}
/* project card */
:root[data-template="swiss"] .card--project .card__title {
font-family: var(--display);
font-weight: 800;
font-style: normal;
font-variation-settings: normal;
text-transform: none;
font-size: var(--fs-lg);
line-height: 1.05;
letter-spacing: -0.02em;
}
/* featured — solid red, white text, true poster */
:root[data-template="swiss"] .card--featured {
background: var(--accent);
color: var(--on-accent);
border: 0;
}
:root[data-template="swiss"] .card--featured:hover {
background: var(--ink);
color: var(--paper);
}
:root[data-template="swiss"] .card--featured::before {
font-family: var(--display);
font-weight: 700;
letter-spacing: 0.18em;
}
:root[data-template="swiss"] .card--featured .card__title {
color: var(--on-accent);
font-weight: 800;
text-transform: none;
font-size: clamp(1.95rem, 1.30rem + 1.8vw, 2.8rem);
letter-spacing: -0.025em;
line-height: 1;
}
:root[data-template="swiss"] .card--featured:hover .card__title,
:root[data-template="swiss"] .card--featured:hover .card__desc { color: var(--paper); }
:root[data-template="swiss"] .card--featured .card__desc {
color: color-mix(in oklch, var(--on-accent) 85%, transparent);
}
/* tags — square, monoline, all caps */
:root[data-template="swiss"] .tag {
border-radius: 0;
border: 0;
background: var(--paper);
font-family: var(--display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink);
}
:root[data-template="swiss"] .card:hover .tag {
background: var(--paper);
color: var(--ink);
}
:root[data-template="swiss"] .card--featured .tag {
background: color-mix(in oklch, var(--on-accent) 14%, transparent);
border-color: color-mix(in oklch, var(--on-accent) 30%, transparent);
color: var(--on-accent);
}
:root[data-template="swiss"] .card--featured:hover .tag {
background: color-mix(in oklch, var(--paper) 14%, transparent);
border-color: color-mix(in oklch, var(--paper) 30%, transparent);
color: var(--paper);
}
/* youtube */
:root[data-template="swiss"] .card--youtube {
border-radius: 0;
border: 0;
}
:root[data-template="swiss"] .yt__play {
border-radius: 0;
border-width: 2px;
background: rgba(0,0,0,0.7);
}
:root[data-template="swiss"] .yt:hover .yt__play {
background: var(--accent);
border-color: var(--accent);
transform: translate(-50%, -50%) scale(1.05);
}
:root[data-template="swiss"] .yt__title {
font-family: var(--display);
font-weight: 700;
text-transform: none;
letter-spacing: -0.005em;
}
/* portfolio */
:root[data-template="swiss"] .card--portfolio {
border-radius: 0;
border: 0;
}
:root[data-template="swiss"] .card--portfolio:hover { background: var(--paper-2); color: var(--ink); }
:root[data-template="swiss"] .card--portfolio:hover .portfolio__caption .card__title { color: var(--accent); }
:root[data-template="swiss"] .card--portfolio:hover .card__desc,
:root[data-template="swiss"] .card--portfolio:hover .card__date,
:root[data-template="swiss"] .card--portfolio:hover .card__host { color: var(--muted); }
:root[data-template="swiss"] .portfolio__caption {
border-top: 0;
padding: 1.1rem 1.35rem 1.2rem;
}
:root[data-template="swiss"] .portfolio__caption .card__title {
font-family: var(--display);
font-weight: 800;
font-variation-settings: normal;
text-transform: none;
letter-spacing: -0.02em;
font-size: var(--fs-lg);
line-height: 1.05;
}
:root[data-template="swiss"] .portfolio__caption .card__desc { color: var(--muted); }
/* clients */
:root[data-template="swiss"] .client__logo {
border-radius: 0;
border: 0;
background: var(--paper-2);
}
/* opt the client tile out of the global card hover-flip: the card has no
chrome, so filling it with ink would hide the title text below the logo */
:root[data-template="swiss"] .card--client:hover {
background: transparent;
color: var(--ink);
border-color: transparent;
}
:root[data-template="swiss"] .card--client:hover .client__title { color: var(--accent); }
:root[data-template="swiss"] .card--client:hover .client__logo {
background: var(--ink);
transform: none;
box-shadow: none;
}
:root[data-template="swiss"] .card--client:hover .client__logo img.is-favicon { filter: invert(1); }
:root[data-template="swiss"] .client__logo[data-fallback] {
font-family: var(--display);
font-weight: 900;
color: var(--ink);
}
:root[data-template="swiss"] .card--client:hover .client__logo[data-fallback] { color: var(--paper); }
:root[data-template="swiss"] .client__title {
font-family: var(--display);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-sm);
color: var(--ink);
}
/* footer */
:root[data-template="swiss"] .foot {
border-top: 1px solid var(--rule);
color: var(--ink);
font-family: var(--display);
font-weight: 600;
}
:root[data-template="swiss"] .foot__mark {
font-family: var(--display);
font-style: normal;
text-transform: uppercase;
font-weight: 800;
color: var(--accent);
font-size: var(--fs-md);
letter-spacing: 0.08em;
}
/* selection */
:root[data-template="swiss"] ::selection {
background: var(--accent);
color: var(--on-accent);
}
/* override editorial entrance for the asterism (it spins; Swiss should pop) */
:root[data-template="swiss"] .hero__asterism { animation: swiss-pop 900ms 200ms cubic-bezier(0.16, 1, 0.30, 1) both; }
Reference in New Issue View Git Blame Copy Permalink