gitmedia/presseportale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Responsive-Härtung: Seiten-Header, Kontextleiste, Stat-Cards

Browse source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-06-12 14:08:08 +00:00
parent bda755fcf8
commit 036a53499f
55 changed files with 128 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

36
resources/css/shared/hub-components.css
View file

@ -54,6 +54,33 @@
border-bottom-color: rgba(255, 255, 255, 0.1);
}
/* ============================================================
* Page-Header (Titel links, Aktionen rechts)
*
* Ersetzt das frühere Inline-Style `grid-template-columns:1fr auto`:
* Das starre Zwei-Spalten-Grid konnte auf schmalen Screens nicht
* umbrechen — die Aktions-Spalte (auto = Inhaltsbreite) quetschte
* die Titel-Spalte zusammen (Buchstaben-Umbrüche im Titel, Buttons
* liefen aus der Box). Unterhalb von lg stapeln die Bereiche.
* ============================================================ */
.page-header {
display: grid;
align-items: end;
gap: 20px;
}
@media (min-width: 1024px) {
.page-header {
grid-template-columns: 1fr auto;
gap: 32px;
}
}
/* Aktions-Zeilen (Buttons rechts) dürfen auf schmalen Screens
umbrechen, statt aus dem Header zu laufen. */
.page-header > .flex {
flex-wrap: wrap;
}
/* ============================================================
* Stat-Cards (KPI-Karten mit farbigem Strip links)
* ============================================================ */
@ -117,8 +144,15 @@
font-weight: 600;
color: var(--color-ink);
letter-spacing: -0.5px;
line-height: 1;
line-height: 1.05;
margin-top: 14px;
/* Text-Werte (z. B. Portal-Name) dürfen die Karte nie sprengen. */
overflow-wrap: anywhere;
}
@media (max-width: 480px) {
.stat-num {
font-size: 26px;
}
}
.stat-card.is-ok .stat-num {
color: var(--color-ok);