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

Add public page fullwidth text-picture pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-24 19:45:32 +02:00
parent 04565a993a
commit 2b42e301f0
2 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/public-page-patterns.html
+25
View File
@@ -61,6 +61,31 @@
</div>
</div>
<p class="sg-preview-label">Pattern: text and picture fullwidth</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-public-page-pattern-text-and-picture-fullwidth" data-pattern="text-and-picture-fullwidth">
<h2 class="sg-heading-h2">H2 Überschrift</h2>
<img
class="sg-picture-full-width"
data-component="picture-full-width"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
alt="Platzhalterbild für die Picture Full Width Component"
width="1600"
height="900"
>
<div class="sg-public-page-pattern-text-and-picture-fullwidth__text">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
</div>
</div>
</div>
</div>
<p class="sg-preview-label">Pattern: text and picture left</p>
<div class="sg-preview-area">
styles/45-patterns-public-page-patterns.css
+24
View File
@@ -24,6 +24,16 @@
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-fullwidth {
--text-public-page-pattern-text-picture: var(--color-font-light);
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
gap: var(--spacing-large);
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-left {
--layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
--layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -46,6 +56,11 @@
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-heading-h2 {
margin: 0;
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-left > .sg-heading-h2 {
grid-area: heading;
margin: 0;
@@ -57,6 +72,10 @@
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-fullwidth__text {
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-left__text {
grid-area: text;
min-width: 0;
@@ -77,6 +96,11 @@
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
margin: 0;
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-left__text .sg-body {
margin: 0;
color: var(--text-public-page-pattern-text-picture);