Root

Overview

The :root stylesheet currently contains references for breakpoints, sizes and very basic colour values but may expand further in the future. These breakpoint references are purely informative because css does not have the abilty to use variables in @media statements.

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/bases/root.css

• Directorystyle

  • Directorybases

    • root.css

Stylesheet

:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-rg: 1024px;
  --breakpoint-lg: 1216px;
  --breakpoint-xl: 1408px;

  --size-0: 0;
  --size-1: 0.25ch;
  --size-2: 0.5ch;
  --size-3: 1ch;
  --size-4: 1.5ch;
  --size-5: 2ch;
  --size-6: 2.5ch;
  --size-7: 3ch;
  --size-8: 3.5ch;
  --size-9: 4ch;

  --body-background: white;
  --html-color: DimGray;

  color-scheme: light;
  --color-mode: "light";
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: "dark";
  }
}

:root[color-scheme="dark"] {
  --body-background: DimGray;
  --html-color: white;
}