Tom/Elternbeirat
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Unify team grid, limit avatars to brand colours, keep duty tags on one line

Browse Source
This commit is contained in:
tleininger committed 2026-10-01 16:04:12 +02:00
1 parent a5a68ed122
commit 602f258257
4 files changed
+72 -72
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Elternbeirat.Web/wwwroot/app.css
+31 -54
View File
@@ -74,20 +74,16 @@
--color-button-light-hover: #eaf3f9;
--color-on-button-light: #1f5477;
/* Initials avatars on the person cards (::: team, see TeamMember.cs). Five
soft tints, each with a deep text shade of the same hue, so a board of ten
people looks lively but calm. The colour is picked from the name, so it means
nothing -- it only helps tell the cards apart. Every pair >= 5.3:1. */
--color-avatar-1: #dbeaf5; /* blue */
--color-on-avatar-1: #1f5477;
--color-avatar-2: #dcefd8; /* green */
/* Initials avatars on the person cards (::: team, see TeamMember.cs): only the
two brand colours, blue and green tint, so the board stays in the IGMH palette.
The colour is picked from the name, so it means nothing -- it only helps tell
the cards apart. The tints follow their tokens into dark mode; the green text
needs its own shade, because --color-accent-dark is too light for small text
on the tint (3.6:1). Blue 7.2:1, green 5.9:1. */
--color-avatar-1: var(--color-brand-tint);
--color-on-avatar-1: var(--color-brand-dark);
--color-avatar-2: var(--color-accent-tint);
--color-on-avatar-2: #2f6b33;
--color-avatar-3: #fbeec5; /* warm yellow */
--color-on-avatar-3: #7a5a00;
--color-avatar-4: #f8dfe0; /* rose */
--color-on-avatar-4: #8e2f3a;
--color-avatar-5: #e7e0f3; /* violet */
--color-on-avatar-5: #553a8a;
/* Keyboard focus ring (:focus-visible). Its own token so it can stay strong on
the light page (dark blue, 8:1 on white) and flip to a light blue on the dark
@@ -196,18 +192,9 @@
--color-button-light-hover: #d3dee6;
--color-on-button-light: #1a3d57; /* 9:1 on the eased white */
/* Avatars: the tints turn into deep shades, the text into light ones; each
pair >= 7:1, so the circles do not glare on the dark cards. */
--color-avatar-1: #1f3a4f;
--color-on-avatar-1: #a3d5f4;
--color-avatar-2: #24402a;
--color-on-avatar-2: #a6dc9e;
--color-avatar-3: #4a3d14;
--color-on-avatar-3: #f3d98a;
--color-avatar-4: #4d2a2f;
--color-on-avatar-4: #f4b8bf;
--color-avatar-5: #3a3150;
--color-on-avatar-5: #cdbdf0;
/* Avatar green text: the brightened accent, 6.7:1 on the dark green tint
(the blue pair follows its tokens, 8.6:1). */
--color-on-avatar-2: var(--color-accent);
--color-focus: #a3d5f4; /* light blue: a dark ring would vanish here */
@@ -882,12 +869,16 @@ h1:focus {
}
/* ::: team -- one person card per list item (Markdown.cs/TeamMember.cs build the
avatar, name, role chip, duty tags and note). A grid like the kacheln, a little
wider so a long double name still fits its line. Each "## Vorsitz" etc. above
stays a normal heading; every group is a block of its own. */
avatar, name, role chip, duty tags and note). Each "## Vorsitz" etc. above stays
a normal heading; every group is a block of its own. One raster for all of them,
so the cards line up across groups: a group of one person gets the same card
width as a group of six, not a stretched one. 17rem fits a long double name.
align-items: start lets every card be as tall as its content -- a card without
duties is not stretched to its neighbour's height. */
.markdown-body .team > ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
align-items: start;
gap: var(--space-3);
max-width: none;
margin: 0 0 var(--space-4);
@@ -900,8 +891,7 @@ h1:focus {
}
/* The card: avatar in a column of its own, everything else stacked beside it.
align-content keeps a short card's text at the top when a long neighbour in the
same row stretches it. Hover only deepens the shadow -- nothing moves. */
Hover only deepens the shadow -- nothing moves. */
.markdown-body .team-card {
display: grid;
grid-template-columns: auto 1fr;
@@ -949,9 +939,6 @@ h1:focus {
.markdown-body .team-avatar-1 { background: var(--color-avatar-1); color: var(--color-on-avatar-1); }
.markdown-body .team-avatar-2 { background: var(--color-avatar-2); color: var(--color-on-avatar-2); }
.markdown-body .team-avatar-3 { background: var(--color-avatar-3); color: var(--color-on-avatar-3); }
.markdown-body .team-avatar-4 { background: var(--color-avatar-4); color: var(--color-on-avatar-4); }
.markdown-body .team-avatar-5 { background: var(--color-avatar-5); color: var(--color-on-avatar-5); }
.markdown-body .team-name {
color: var(--color-heading);
@@ -973,7 +960,9 @@ h1:focus {
}
/* Duties as small outlined tags: quieter than the role chip, because the role
says who someone is and the duties only what they look after. */
says who someone is and the duties only what they look after. A tag never breaks
inside ("Stellvertretende Schulkonferenz" stays one piece); the row wraps between
tags instead. */
.markdown-body .team-duties {
display: flex;
flex-wrap: wrap;
@@ -982,6 +971,7 @@ h1:focus {
}
.markdown-body .team-duty {
white-space: nowrap;
padding: 0.05rem var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
@@ -995,25 +985,12 @@ h1:focus {
font-size: 0.95rem;
}
/* ::: team gross -- the chair: wider cards, a bigger avatar and name, and a green
edge so the first group reads as the lead of the page. */
.markdown-body .team.gross > ul {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.markdown-body .team.gross .team-card {
padding: var(--space-4);
border-top: 4px solid var(--color-accent);
}
.markdown-body .team.gross .team-avatar {
width: 4rem;
height: 4rem;
font-size: 1.3rem;
}
.markdown-body .team.gross .team-name {
font-size: 1.35rem;
/* ::: team gross -- the chair. Same raster and card as every other group, so the
page keeps one rhythm; only the role chip stands out, filled in the button blue
instead of the pale tint (white on it 5.4:1, in dark mode too). */
.markdown-body .team.gross .team-role {
background: var(--color-button);
color: var(--color-on-button);
}
/* Tables (pipe tables): not in the content yet, styled ahead of time. As a block