diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html index 3ff99b3..8813f9e 100644 --- a/docs/styleguide/index.html +++ b/docs/styleguide/index.html @@ -41,7 +41,6 @@ diff --git a/docs/styleguide/patterns/page-layout-public-2-column.html b/docs/styleguide/patterns/page-layout-public-2-column.html new file mode 100644 index 0000000..03995cb --- /dev/null +++ b/docs/styleguide/patterns/page-layout-public-2-column.html @@ -0,0 +1,97 @@ + + + + + + Styleguide – Page Layout Public 2 Column + + + + +

Layout – Page Layout Public 2 Column

+ +
+
+
+
+ + + +
+
+ +
+

Portalname

+ + +
+
+ +
+
+

H1 Überschrift

+
+ +
+
+
+

+ Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im Layout. +

+
+
+ +
+

+ 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 +

+
+
+
+
+ + + + + + diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html index ecc4135..7a2ed2e 100644 --- a/docs/styleguide/patterns/public-page-patterns.html +++ b/docs/styleguide/patterns/public-page-patterns.html @@ -61,6 +61,31 @@ +

Pattern: text and picture fullwidth

+ +
+
+
+

H2 Überschrift

+ + Platzhalterbild für die Picture Full Width Component + +
+

+ 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. +

+
+
+
+
+

Pattern: text and picture left

diff --git a/docs/styleguide/patterns/vsf-portal-header-public.html b/docs/styleguide/patterns/vsf-portal-header-public.html deleted file mode 100644 index c73e420..0000000 --- a/docs/styleguide/patterns/vsf-portal-header-public.html +++ /dev/null @@ -1,283 +0,0 @@ - - - - - - Styleguide – Pattern VSF Portal Header Public - - - - -

Pattern – VSF Portal Header Public

- -
-
-
-
-

ValueStockFinder

- -
-
- - - -
-
- - -
-
- -
-

Willkommen bei ValueStockFinder

-
-
- -
- - - - - - diff --git a/docs/styleguide/semantic-tokens-layouts.html b/docs/styleguide/semantic-tokens-layouts.html index c270be1..66772dc 100644 --- a/docs/styleguide/semantic-tokens-layouts.html +++ b/docs/styleguide/semantic-tokens-layouts.html @@ -30,6 +30,8 @@ layout-object-card-shared-widthautoGeteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen. layout-content-cards-group-gapspacing-smallAbstand zwischen Inhaltsblock-Karten innerhalb der Gruppe. layout-card-list-drawer-widthdimension-card-list-drawer-widthBreite des ausziehbaren Card-Listenbereichs relativ zum Container. + layout-page-layout-public-2-column-columnsrepeat(2, minmax(0, 1fr))Spaltenraster des Layouts Layout – Page Layout Public 2 Column. + layout-page-layout-public-2-column-gapspacing-largeHorizontaler Abstand zwischen den beiden Inhalts-Spalten im Layout Layout – Page Layout Public 2 Column.

Valuestockfinder Layouts

diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 18ec76e..99f1f59 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -195,6 +195,8 @@ --surface-content-block-card-content: var(--color-white); --radius-picture-full-width: var(--radius-card); --layout-content-cards-group-gap: var(--spacing-small); + --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr)); + --layout-page-layout-public-2-column-gap: var(--spacing-large); --surface-card-list-drawer: var(--color-background-purple); --text-content-block-card-title: var(--color-font-dark); --text-content-block-card-content: var(--color-font-dark); diff --git a/docs/styleguide/styles/37-layouts-page-layout-public.css b/docs/styleguide/styles/37-layouts-page-layout-public.css index 9ed6bff..c1d8bc3 100644 --- a/docs/styleguide/styles/37-layouts-page-layout-public.css +++ b/docs/styleguide/styles/37-layouts-page-layout-public.css @@ -28,10 +28,26 @@ main { flex: 1; } +.sg-page-layout-public-2-column__columns { + display: grid; + grid-template-columns: var(--layout-page-layout-public-2-column-columns); + gap: var(--layout-page-layout-public-2-column-gap); + align-items: start; +} + +.sg-page-layout-public-2-column__text-column { + min-width: 0; +} + @media (max-width: 48rem) { .sg-page-layout-public__content-mirror { width: min(calc(100% - (var(--spacing-small) * 2)), 1100px); } + + .sg-page-layout-public-2-column__columns { + display: flex; + flex-direction: column; + } } .sg-page-layout-public__footer-card { diff --git a/docs/styleguide/styles/45-patterns-public-page-patterns.css b/docs/styleguide/styles/45-patterns-public-page-patterns.css index 002af0a..33984df 100644 --- a/docs/styleguide/styles/45-patterns-public-page-patterns.css +++ b/docs/styleguide/styles/45-patterns-public-page-patterns.css @@ -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,15 @@ min-width: 0; } +.sg-public-page-pattern-text-and-picture-fullwidth__text { + min-width: 0; +} + +.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width { + width: 60%; + min-width: 0; +} + .sg-public-page-pattern-text-and-picture-left__text { grid-area: text; min-width: 0; @@ -77,6 +101,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); @@ -98,4 +127,8 @@ "picture" "text"; } + + .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width { + width: 100%; + } } diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index fe6b25e..104d4b6 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -195,6 +195,8 @@ --surface-content-block-card-content: var(--color-white); --radius-picture-full-width: var(--radius-card); --layout-content-cards-group-gap: var(--spacing-small); + --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr)); + --layout-page-layout-public-2-column-gap: var(--spacing-large); --surface-card-list-drawer: var(--color-background-purple); --text-content-block-card-title: var(--color-font-dark); --text-content-block-card-content: var(--color-font-dark); @@ -3453,10 +3455,26 @@ main { flex: 1; } +.sg-page-layout-public-2-column__columns { + display: grid; + grid-template-columns: var(--layout-page-layout-public-2-column-columns); + gap: var(--layout-page-layout-public-2-column-gap); + align-items: start; +} + +.sg-page-layout-public-2-column__text-column { + min-width: 0; +} + @media (max-width: 48rem) { .sg-page-layout-public__content-mirror { width: min(calc(100% - (var(--spacing-small) * 2)), 1100px); } + + .sg-page-layout-public-2-column__columns { + display: flex; + flex-direction: column; + } } .sg-page-layout-public__footer-card { @@ -4680,6 +4698,16 @@ main { 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); @@ -4702,6 +4730,11 @@ main { 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; @@ -4713,6 +4746,15 @@ main { min-width: 0; } +.sg-public-page-pattern-text-and-picture-fullwidth__text { + min-width: 0; +} + +.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width { + width: 60%; + min-width: 0; +} + .sg-public-page-pattern-text-and-picture-left__text { grid-area: text; min-width: 0; @@ -4733,6 +4775,11 @@ main { 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); @@ -4754,5 +4801,9 @@ main { "picture" "text"; } + + .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width { + width: 100%; + } } diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index eab8071..41bffe6 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "04565a9", - "syncedAtUtc": "2026-06-24T15:12:19Z", + "styleguideCommit": "1953578", + "syncedAtUtc": "2026-06-25T07:20:58Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index fe6b25e..104d4b6 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -195,6 +195,8 @@ --surface-content-block-card-content: var(--color-white); --radius-picture-full-width: var(--radius-card); --layout-content-cards-group-gap: var(--spacing-small); + --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr)); + --layout-page-layout-public-2-column-gap: var(--spacing-large); --surface-card-list-drawer: var(--color-background-purple); --text-content-block-card-title: var(--color-font-dark); --text-content-block-card-content: var(--color-font-dark); @@ -3453,10 +3455,26 @@ main { flex: 1; } +.sg-page-layout-public-2-column__columns { + display: grid; + grid-template-columns: var(--layout-page-layout-public-2-column-columns); + gap: var(--layout-page-layout-public-2-column-gap); + align-items: start; +} + +.sg-page-layout-public-2-column__text-column { + min-width: 0; +} + @media (max-width: 48rem) { .sg-page-layout-public__content-mirror { width: min(calc(100% - (var(--spacing-small) * 2)), 1100px); } + + .sg-page-layout-public-2-column__columns { + display: flex; + flex-direction: column; + } } .sg-page-layout-public__footer-card { @@ -4680,6 +4698,16 @@ main { 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); @@ -4702,6 +4730,11 @@ main { 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; @@ -4713,6 +4746,15 @@ main { min-width: 0; } +.sg-public-page-pattern-text-and-picture-fullwidth__text { + min-width: 0; +} + +.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width { + width: 60%; + min-width: 0; +} + .sg-public-page-pattern-text-and-picture-left__text { grid-area: text; min-width: 0; @@ -4733,6 +4775,11 @@ main { 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); @@ -4754,5 +4801,9 @@ main { "picture" "text"; } + + .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width { + width: 100%; + } }