_root.scss

• interpolate-size: keyword ins root (und reduced motion auch!) Video KP -> damit können wir intrinsische Höhen ohne JS animieren!
• html { scrollbar-gutter: stable; } oder die Alternative … bram.us - das sieht doof aus, wenn z.B. der Footer eine dunkle Hintergrundfarbe hat, bleibt anstelle des Scrollbars ein Streifen in der Hintergrundfarbe des body stehen. Da ist ein Ghost-Scrollbar noch besser!

base/_root.scss

@use "../abstracts" as *;

:root {

  --font-fallback-default: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  // generates the color custom properties
  @each $color, $shade-map in $default {
    @each $shade, $value in $shade-map {
      --#{$color}-#{$shade}: #{$value};
    }
  }
}

html {
  height: 100%;
  font-size: 100%;
  overflow-y: scroll;
}