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:
gitea_admin committed 2026-06-24 19:45:32 +02:00
1 parent 04565a993a
commit 2b42e301f0
2 files changed
+49
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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);