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