gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace two-column text pattern with deterministic 50-50 grid and update VSF drawer

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 11:39:03 +02:00
parent fe2982a0d5
commit 71a2932028
3 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/text-layouts.html
+8 -3
View File
@@ -31,9 +31,14 @@
<p class="sg-preview-label">Pattern: Text zweispaltig</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig">
<div class="sg-text-layout-pattern__preview-surface">
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--two-column" data-pattern-part="text-block-two-column">
Text zweispaltig: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert. Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen, die in Analyse- und Detailseiten stabil funktionieren und sich gut mit angrenzenden Karten, Tabellen oder Kennzahlenmodulen kombinieren lassen.
</p>
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
<p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
</p>
<p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
</p>
</div>
</div>
</div>
</section>
patterns/vsf-card-listen-seite.html
+3 -3
View File
@@ -688,14 +688,14 @@
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<div class="sg-vsf-drawer-object-card__text-columns" data-pattern-part="text-block-two-column">
<p class="sg-body sg-vsf-drawer-object-card__text-column">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
<p class="sg-body sg-text-layout-pattern__column">
Ticker: WDC<br>
Region: Amerika<br>
Sub-Region: Nordamerika<br>
Land: Vereinigte Staaten von Amerika
</p>
<p class="sg-body sg-vsf-drawer-object-card__text-column">
<p class="sg-body sg-text-layout-pattern__column">
ISIN: US9581021055<br>
Industrie: Computer Hardware
</p>
styleguide.css
+19 -18
View File
@@ -2096,21 +2096,13 @@ section + section {
color: var(--text-vsf-drawer-object-card-body);
}
.sg-vsf-drawer-object-card__text.sg-text-layout-pattern__sample--two-column {
.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column,
.sg-vsf-drawer-object-card .sg-text-layout-pattern__column {
color: var(--text-vsf-drawer-object-card-body);
column-gap: var(--layout-vsf-drawer-object-card-column-gap);
}
.sg-vsf-drawer-object-card__text-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column {
gap: var(--layout-vsf-drawer-object-card-column-gap);
color: var(--text-vsf-drawer-object-card-body);
}
.sg-vsf-drawer-object-card__text-column {
margin: 0;
color: var(--text-vsf-drawer-object-card-body);
}
.sg-vsf-drawer-object-card__heading {
@@ -2148,20 +2140,29 @@ section + section {
}
.sg-text-layout-pattern__sample--two-column {
margin: 0;
}
.sg-text-layout-pattern__two-column {
width: 100%;
column-count: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--spacing-large);
}
.sg-text-layout-pattern__column {
margin: 0;
}
@media (max-width: 767px) {
.sg-vsf-drawer-object-card__text-columns {
grid-template-columns: 1fr;
.sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column,
.sg-text-layout-pattern__two-column {
width: 100%;
}
.sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column {
width: 100%;
column-count: 1;
.sg-text-layout-pattern__two-column {
grid-template-columns: 1fr;
}
}