Keep design blocks in the reading column, rework key figures and tiles, drop focus ring on tabindex=-1
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
tleiningerandClaude Opus 5.5 committed
1 parent
ebb3b387c5
commit
8e4333b3ac
1 file changed
+96
-13
@@ -170,6 +170,7 @@
|
||||
light button text ................. 8.1 / 9.7 (hover 7.2 / 8.3)
|
||||
white on calendar band ............ 5.2 / 6.4
|
||||
avatar blue / green ............... 7.2 / 8.6 5.9 / 6.7
|
||||
key figure / caption on card ...... 5.4 / 7.5 5.0 / 6.9
|
||||
focus ring on page / card ......... 7.5 / 11.0 8.1 / 9.4
|
||||
white ring on header / footer ..... 4.9 / 5.5 11.4 / 16.6
|
||||
green markers on card (graphic) ... 3.8 / 7.5
|
||||
@@ -346,8 +347,12 @@ h1:focus {
|
||||
links (and with them every card, which is one big link), buttons, the <summary>
|
||||
of each disclosure, form fields and anything made focusable with tabindex. Dark
|
||||
brand surfaces (header, hero, footer) switch the colour to
|
||||
--color-focus-inverse. */
|
||||
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
|
||||
--color-focus-inverse.
|
||||
tabindex="-1" is left out: such an element is never reached with Tab, only
|
||||
focused by code -- the h1 by FocusOnNavigate on every page load, <main> by the
|
||||
skip link. Chromium counts that as :focus-visible, and since this rule outweighs
|
||||
h1:focus / main:focus below, the page title would otherwise get a ring. */
|
||||
:is(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
|
||||
outline: 3px solid var(--color-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -902,24 +907,39 @@ main:focus {
|
||||
mask: var(--icon-info) center / contain no-repeat;
|
||||
}
|
||||
|
||||
/* ::: kacheln and ::: kennzahlen -- a list laid out as a grid of cards. auto-fill
|
||||
with a minimum width gives as many columns as fit (one on a phone) without any
|
||||
breakpoint. */
|
||||
/* ::: kacheln and ::: kennzahlen -- a list laid out as a grid of cards. They keep
|
||||
the 42rem reading column like the text and the other boxes: one calm left and
|
||||
right edge down the page instead of blocks of three different widths. */
|
||||
.markdown-body :is(.kacheln, .kennzahlen) > ul {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
max-width: 42rem;
|
||||
margin: 0 0 var(--space-4);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Kacheln: auto-fit with a 15rem minimum gives exactly two columns in the 42rem
|
||||
(three would need 46rem), so four tiles sit as 2 x 2. Below ~31rem it drops to
|
||||
one column -- two would squeeze a long word like "Chancengerechtigkeit" out of
|
||||
its card. min() keeps a single card from overflowing a very narrow screen. */
|
||||
.markdown-body .kacheln > ul {
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
|
||||
}
|
||||
|
||||
/* Kennzahlen: one row of equal columns where there is room. auto-fill used to
|
||||
leave empty tracks on the right on a wide screen and one figure alone in a second
|
||||
row on a phone. A narrow column switches to stacked rows instead (below). The
|
||||
block is its own container, so the switch follows the width the figures actually
|
||||
get, not the screen. */
|
||||
.markdown-body .kennzahlen {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.markdown-body .kennzahlen > ul {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
}
|
||||
|
||||
/* The grid gap does the spacing; the list's own item spacing would only push the
|
||||
@@ -943,24 +963,87 @@ main:focus {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
/* On a phone the tiles keep their card but tighten up, so four of them stacked
|
||||
do not turn into a long scroll. */
|
||||
@media (max-width: 40rem) {
|
||||
.markdown-body .kacheln > ul {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.markdown-body .kacheln li {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
||||
.markdown-body .kacheln li > strong:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Kennzahlen: "- **seit 1975** Gründung" -- the bold part becomes a big figure,
|
||||
the rest a small caption beneath. Brand blue for the figure, not the green: the
|
||||
green does not reach 3:1 on its own tint, the blue does. */
|
||||
the rest a small caption beneath. A white card with a green stroke on top, not
|
||||
a green wash: a ::: hinweis often follows right below, and two green tints in a
|
||||
row ran together into one green patch. Brand blue for the figure: 5.4:1 on the
|
||||
card (5.0 dark), where the green would not reach 3:1. */
|
||||
.markdown-body .kennzahlen li {
|
||||
padding: var(--space-4) var(--space-3);
|
||||
padding: var(--space-4) var(--space-2);
|
||||
border-top: 4px solid var(--color-accent);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-accent-tint);
|
||||
background: var(--color-bg);
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--color-text-soft);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* The figure scales with the block (cqi, not vw): 2rem in the full 42rem, a little
|
||||
less just above the switch to rows. nowrap: "seit 1975" split over two lines
|
||||
reads as two figures. */
|
||||
.markdown-body .kennzahlen li > strong:first-child {
|
||||
display: block;
|
||||
color: var(--color-brand);
|
||||
font-size: 2rem;
|
||||
font-size: clamp(1.5rem, 4.75cqi, 2rem);
|
||||
font-weight: var(--font-weight-heading);
|
||||
letter-spacing: var(--letter-spacing-heading);
|
||||
line-height: 1.15;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Below 30rem three columns get under 10rem each: the figure no longer fits on one
|
||||
line and a caption like "im Einsatz für die IGMH" stacks up word by word. So the
|
||||
figures become rows of one card -- figure left, caption beside it, a thin line
|
||||
between rows. Subgrid gives every row the same figure column, so the captions
|
||||
line up whatever the figure's length. */
|
||||
@container (max-width: 30rem) {
|
||||
.markdown-body .kennzahlen > ul {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0;
|
||||
border-top: 4px solid var(--color-accent);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-bg);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.markdown-body .kennzahlen li {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
column-gap: var(--space-3);
|
||||
align-items: baseline;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-body .kennzahlen li + li {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.markdown-body .kennzahlen li > strong:first-child {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ::: team -- one person card per list item (Markdown.cs/TeamMember.cs build the
|
||||
|
||||
Reference in new issue
Block a user