_news.scss

TODO

• newslist + figure + figcaption: figcaption im Bild positionieren, siehe auch _content-image.md

Teaser mit Bild: klassische Griddarstellung

Die Anzeige orientiert sich an der Breite der Grid-Columns, d.h., es ist keine fixe Anzahl an Spalten vorgegeben.
Die Breite der einzelnen 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

_news.scss

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

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

// Klassische Griddarstellung
.grid {
  .gridcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: $gap;
  }

  // Template layout_latest
  .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;
      }
    }
  }
}

// Liste mit Bild
.list {
  .gridcontainer {
    display: flex;
    flex-direction: column;
    gap: $row-gap;
  }

  .layout_latest {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: $gap;
    .teaser {
      display: flex;
      flex-direction: column;
      gap: 0.25lh;
      p.more {
        margin-block-start: auto;
      }
    }
  }
}