joh/AdvisoryBoardMeeting_june2026
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

deck: widen + refine the big-question component

Browse source 
The .question container's max-width:22ch resolved against the small
inherited font, cramping questions to 2-3 words per line and clipping
the decorative quote. Frame the container generously and let the
balanced text set its own comfortable measure; make the aurora quote
mark a clean, visible opening glyph.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-06-18 12:23:07 +02:00
parent 65fd532dbe
commit ae23eecf8e
1 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
assets/css/deck.css
View file

@ -242,23 +242,22 @@ img { display: block; max-width: 100%; }
an aurora-tinted opening mark are the only colour. Deliberately calm. */ an aurora-tinted opening mark are the only colour. Deliberately calm. */
.question { .question {
text-align: center; text-align: center;
max-width: 22ch; /* forces a tall, contemplative measure */ max-width: min(92vw, 920px); /* generous frame; the text controls the measure */
margin-inline: auto; margin-inline: auto;
display: grid; display: grid;
justify-items: center; justify-items: center;
gap: clamp(2rem, 5vh, 3.25rem); gap: clamp(1.6rem, 4vh, 2.6rem);
} }
.question-mark { .question-mark {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-size: clamp(3rem, 7vw, 5.5rem); font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 0.6; line-height: 1;
height: 0.5em;
background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4));
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
opacity: 0.95; opacity: 0.9;
user-select: none; user-select: none;
} }
.question-eyebrow { .question-eyebrow {
@ -272,12 +271,12 @@ img { display: block; max-width: 100%; }
.question-text { .question-text {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 360; font-weight: 360;
font-size: clamp(2rem, 4.6vw, 4rem); font-size: clamp(1.9rem, 3.8vw, 3.4rem);
line-height: 1.14; line-height: 1.16;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
max-width: 18ch; max-width: 100%;
text-wrap: balance; text-wrap: balance;
} }
/* A restrained aurora wash on the emphasised keyword */ /* A restrained aurora wash on the emphasised keyword */