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

Add public page text and picture left pattern

Browse Source
This commit is contained in:
gitea_admin committed 2026-06-24 15:49:32 +02:00
1 parent 382a52a3a7
commit dc6e563e05
2 files changed
+70
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 left</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-left" data-pattern="text-and-picture-left">
<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-left__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: Content Focus Box</p>
<div class="sg-preview-area">
styles/45-patterns-public-page-patterns.css
+45
View File
@@ -24,27 +24,64 @@
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);
--text-public-page-pattern-text-picture: var(--color-font-light);
display: grid;
width: 100%;
min-width: 0;
grid-template-columns: var(--layout-public-page-pattern-text-picture-columns);
grid-template-areas:
"heading heading"
"picture text";
gap: var(--layout-public-page-pattern-text-picture-gap);
align-items: start;
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-right > .sg-heading-h2 {
grid-area: heading;
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;
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-right__text {
grid-area: text;
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-left__text {
grid-area: text;
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-right > .sg-picture-full-width {
grid-area: picture;
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-left > .sg-picture-full-width {
grid-area: picture;
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-right__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);
}
@media (max-width: 48rem) {
.sg-public-page-pattern-text-and-picture-right {
grid-template-columns: 1fr;
@@ -53,4 +90,12 @@
"picture"
"text";
}
.sg-public-page-pattern-text-and-picture-left {
grid-template-columns: 1fr;
grid-template-areas:
"heading"
"picture"
"text";
}
}