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

Add distributed three-column text layout pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 07:46:59 +02:00
parent 13d0b86221
commit 38e1e0369f
3 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styleguide.css
+33 -5
View File
@@ -187,6 +187,13 @@
--text-vsf-drawer-object-card-heading: var(--color-font-light);
--text-vsf-drawer-object-card-body: var(--color-font-light);
--layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
--surface-text-layout-preview: var(--color-light-grey);
--layout-text-layout-column-gap: var(--spacing-large);
--layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr));
--layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr));
--text-align-text-layout-column-left: left;
--text-align-text-layout-column-center: center;
--text-align-text-layout-column-right: right;
/* Typography */
--font-family-base: "Open Sans", sans-serif;
@@ -2203,7 +2210,7 @@ section + section {
width: 100%;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--color-light-grey);
background: var(--surface-text-layout-preview);
}
.sg-text-layout-pattern__sample {
@@ -2225,22 +2232,43 @@ section + section {
.sg-text-layout-pattern__two-column {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--spacing-large);
grid-template-columns: var(--layout-text-layout-two-column-columns);
column-gap: var(--layout-text-layout-column-gap);
}
.sg-text-layout-pattern__three-column-distributed {
width: 100%;
display: grid;
grid-template-columns: var(--layout-text-layout-three-column-columns);
column-gap: var(--layout-text-layout-column-gap);
}
.sg-text-layout-pattern__column {
margin: 0;
}
.sg-text-layout-pattern__column--align-left {
text-align: var(--text-align-text-layout-column-left);
}
.sg-text-layout-pattern__column--align-center {
text-align: var(--text-align-text-layout-column-center);
}
.sg-text-layout-pattern__column--align-right {
text-align: var(--text-align-text-layout-column-right);
}
@media (max-width: 767px) {
.sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column,
.sg-text-layout-pattern__two-column {
.sg-text-layout-pattern__two-column,
.sg-text-layout-pattern__three-column-distributed {
width: 100%;
}
.sg-text-layout-pattern__two-column {
.sg-text-layout-pattern__two-column,
.sg-text-layout-pattern__three-column-distributed {
grid-template-columns: 1fr;
}
}