_news.scss

Nachrichtenlisten

Die Module erhalten zwei Klassen: eine für die Raster- bzw. Listendarstellung, und eine für die Teaser.

• Raster- bzw. Listendarstellung
  • .grid-auto-fit (dynamische Spaltenanzahl: Breite nach Platzangebot)
  • .grid-auto-fill (dynamische Spaltenanzahl: fixe Breite, so viele wie reinpassen)
  • .grid-2c (zwei Spalten)
  • .grid-3c (drei Spalten)
  • .grid-4c (vier Spalten)
  • .grid-1c (eine Spalte, Listendarstellung)
• Teaser
  • .card (klassische Kartendarstellung, Bild oben, Text unten)
  • .list (Bild links, Teasertext rechts)

Dynamische Spaltenanzahl

Die Anzeige orientiert sich an der Breite der Grid-Columns, d.h., es ist keine fixe Anzahl an Spalten vorgegeben.
Die Breite der Beiträge orientiert sich an der Bildbreite, d.h., sowohl eine breitere Figcaption (siehe _html-elements.scss) als auch ein breiterer Teaser wird mit CSS Containment eingefangen. Damit wird verhindert, dass eine Hintergrundfarbe für .layout-latest breiter ist als das Teaserbild. Containment in CSS

Bildgröße

Die Größe des Teaserbildes wird in Contao verwaltet, da die Bilder dort responsive ausgegeben werden können.

Wichtig

Bei der dynamischen Spaltenanzahl muss der --min-Wert an die in Contao vergebene Bildgröße angepasst werden. Damit wird verhindert, dass bei einem Layout-Umbruch das Bild schmäler ist als die verfügbare Breite.
--min <= Bildbreite/2 - $column-gap

_news.scss

@use "../abstracts/" as *;

// Container
.mod_newslist,
.mod_newsarchive,
.mod_newsreader {
  container-type: inline-size;
  container-name: newsContainer;
}

// flexibles Grid
.grid-auto-fit {
  .gridcontainer {
    // --min: Bildbreite / 2 - $column-gap
    --min: 216px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min($min, 100%), 1fr));
    column-gap: $column-gap;
    row-gap: $row-gap;
  }
}
.grid-auto-fill {
  .gridcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min($min, 100%), 1fr));
    column-gap: $column-gap;
    row-gap: $row-gap;
  }
}

// grid mit fixer Spaltenanzahl
.grid-2c {
  .gridcontainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: $column-gap;
    row-gap: $row-gap;
    @container newsContainer (width > #{$tweakpoint-53}) {
      grid-template-columns: 1fr 1fr;
    }
  }
}

.grid-3c {
  .gridcontainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: $column-gap;
    row-gap: $row-gap;
    @container newsContainer (width > #{$tweakpoint-30}) {
      grid-template-columns: 1fr 1fr;
    }
    @container newsContainer (width > #{$tweakpoint-53}) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.grid-4c {
  .gridcontainer {
    display: grid;
    column-gap: $column-gap;
    row-gap: $row-gap;
    @container contentElementGroup (width > #{$tweakpoint-30}) {
      grid-template-columns: 1fr 1fr;
    }
    @container contentElementGroup (width > #{$tweakpoint-53}) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}

// einspaltige Liste
.grid-1c {
  .gridcontainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: $row-gap;
  }
}

// Bildunterschrift innerhalb vom Bild positionieren
.layout_latest {
  figure {
    position: relative;
    figcaption {
      position: absolute;
      inline-size: 100%;
      left: 0.5rem;
      bottom: 0.125rem;
      color: white;
    }
  }
}

// Template layout_latest Card
.card {
  .layout_latest {
    inline-size: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    .teaser {
      contain: inline-size;
      display: flex;
      flex-direction: column;
      gap: 0.25lh;
      .headline {
        margin-block-start: 0.5lh;
      }
      p.more {
        margin-block-start: auto;
      }
    }
  }
}

// Template layout_latest Liste
.list {
  .layout_latest {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    img {
      height: 100%;
      object-fit: cover;
    }
    .teaser {
      display: flex;
      flex-direction: column;
      gap: 0.25lh;
      p.more {
        margin-block-start: auto;
      }
    }
  }
}