Theme-Entwicklung

Erkenntnisse aus CSS Demystified einbauen (wann grid, wann flex)
assets-Ordner ausgliedern, aber wie?
Twig-Templates müssen überarbeitet werden (contao_figure in rsce-hero.html.twig bzw. rsce-text-bild.html.twig funktionieren zwar, aber muss geändert werden)
Twig-Templates an einem Ort sammeln, vielleicht Ordner aus Contao-Starlight auch im dev-Ordner einbinden

Für die Theme-Entwicklung interessante Beiträge:

Ändern

$breakpoint-mobile-menu -> media query überprüfen, range verwenden
logical properties inline-size und block-size statt width bzw. height => das ist sehr viel Arbeit, also nach und nach machen, und nur wo sinnvoll, Ausnahmen sind:
- media queries @media (width ...)
- translate, scale, skew, …
- background-position -x/-y
- gradients (linear-gradient to top …)
- wenn es sonst keinen Sinn macht -> match the intent (Bildbreite, Positionierung an bestimmter Stelle)

Einbauen:

min-block-size: 100svb für einen Hero, der die Höhe des Viewports ausfüllen soll (Inhalt kann mit display: grid; und place-content: center; schön zentriert werden)
relative units wie cap (height of captial letter), ex (height of a lowercase X character) -> für Icons in Buttons etc. ( + aspect-ratio: 1 / 1 statt einer Höhe)
vb statt vh (block axis statt height), vi statt vw (inline axis)
vmin eventuell für Mobilgeräte interessant als inline-size-unit, weil sie von der Höhe des Viewports abhängt
besser noch dvh/dvb bzw. - insbesondere für Heros - bevorzugt svh/svb(small viewport height/blocks-size) verwenden. Das tut so als ob immer ein floating UI (Adress-Bar) vorhanden wäre (es gibt auch noch lvh/lvb - die large Variante, das sich wie vh verhält).
relative unit lh (computed value of the line-height of the current element), rlh (computed from the root element), Verwendung bei Icons
vmin: nimmt den kleineren Wert des Viewports, also entweder Breite oder Höhe, je nachdem, was kleiner ist. Scheint Sinn zu machen, auf breiten Monitoren konsistente Größe, auf kleinen schrumpft das Ding
object-fit: scale-down für Logos in definierten img-Kästchen (Newsteaser etc.)
mit container queries können wir viele andere Größen abfragen, wie z.B. ch - also wenn z.B. mehr als 90 Zeichen in einer Zeile stehen, können wir auf drei Spalten umbrechen
media queries für reduced motion:

html {
  font-family: system-ui;
  scroll-margin: 2rem;

  /* add in-page scroll animation for users who haven't opted-in for reduced motion */
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

Wrap detection

Kapitel “Container queries are smart”
Bildhöhe anpassen, wenn die Flexbox wrappt

Prüfen:

transitions prüfen, wann nur ein Wert gebraucht wird und wann beide

Uralt-Notizen aus Notion

21.09.2023

SVG-Animations

YouTube