From 595cd6ec4e911c023a852249bfbfc53262d7ec93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Wed, 24 Jun 2026 19:50:03 +0200 Subject: [PATCH] Add public page layout two-column variant --- index.html | 1 + patterns/page-layout-public-2-column.html | 97 +++++++++++++++++++++++ semantic-tokens-layouts.html | 2 + styles/01-foundations.css | 2 + styles/37-layouts-page-layout-public.css | 15 ++++ 5 files changed, 117 insertions(+) create mode 100644 patterns/page-layout-public-2-column.html diff --git a/index.html b/index.html index 3ff99b3..2f397e0 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,7 @@
  • Card Listen Seite
  • Page Layout App
  • Page Layout Public
    • +
  • Page Layout Public 2 Column
  • Card Listen Fundamentalanalyse Mobile
    • diff --git a/patterns/page-layout-public-2-column.html b/patterns/page-layout-public-2-column.html new file mode 100644 index 0000000..c5fbd39 --- /dev/null +++ b/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

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. +

    +
    + +
    +
    +
    +

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

    +

    + Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundäre Footer-Inhalte im gleichen Raster. +

    +
    +
    +
    +
    +
    + + + + + + diff --git a/semantic-tokens-layouts.html b/semantic-tokens-layouts.html index c270be1..66772dc 100644 --- a/semantic-tokens-layouts.html +++ b/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/styles/01-foundations.css b/styles/01-foundations.css index 18ec76e..99f1f59 100644 --- a/styles/01-foundations.css +++ b/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/styles/37-layouts-page-layout-public.css b/styles/37-layouts-page-layout-public.css index 9ed6bff..d0ba5f9 100644 --- a/styles/37-layouts-page-layout-public.css +++ b/styles/37-layouts-page-layout-public.css @@ -28,12 +28,27 @@ main { flex: 1; } +.sg-page-layout-public-2-column__content-mirror { + 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; +} + @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__content-mirror { + grid-template-columns: 1fr; + } } .sg-page-layout-public__footer-card { margin-top: auto; } + +.sg-page-layout-public-2-column__footer-card { + margin-top: 0; +}