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

Keep text layout 2/3-column patterns multi-column on mobile

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-26 11:45:55 +02:00
parent 6cc865d984
commit dfafe55e48
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/text-layouts.html
+4 -4
View File
@@ -28,8 +28,8 @@
</div> </div>
</div> </div>
<p class="sg-preview-label">Pattern: Text zweispaltig</p> <p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig"> <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
<div class="sg-text-layout-pattern__preview-surface"> <div class="sg-text-layout-pattern__preview-surface">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-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"> <p class="sg-body sg-text-layout-pattern__column">
@@ -42,8 +42,8 @@
</div> </div>
</div> </div>
<p class="sg-preview-label">Pattern: Dreispaltig verteilt</p> <p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt"> <div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
<div class="sg-text-layout-pattern__preview-surface"> <div class="sg-text-layout-pattern__preview-surface">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed"> <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left"> <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
styles/31-patterns-text-layouts.css
+8
View File
@@ -78,6 +78,14 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.sg-text-layout-pattern__two-column[data-pattern-part="text-block-two-column"] {
grid-template-columns: var(--layout-text-layout-two-column-columns);
}
.sg-text-layout-pattern__three-column-distributed[data-pattern-part="text-block-three-column-distributed"] {
grid-template-columns: var(--layout-text-layout-three-column-columns);
}
.sg-text-layout-pattern__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] { .sg-text-layout-pattern__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] {
grid-template-columns: var(--layout-text-layout-three-column-columns); grid-template-columns: var(--layout-text-layout-three-column-columns);
} }