From 151c6d78b988f0e63601cb5da746b071d57c1582 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Fri, 22 Nov 2024 10:36:01 +0100
Subject: [PATCH] modernize: use cascade layers and light-dark() function

---
 src/style.css | 584 +++++++++++++++++++++++++++-----------------------
 1 file changed, 320 insertions(+), 264 deletions(-)

diff --git a/src/style.css b/src/style.css
index ff35732..f7e9f84 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,316 +1,372 @@
-/* ------------------ reset  ------------------
-
-/* inspired by: */
-/* https://piccalil.li/blog/a-modern-css-reset/ */
-/* https://keithjgrant.com/posts/2024/01/my-css-resets/ */
-/* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions */
-/* https://github.com/mayank99/reset.css/blob/main/package/index.css */
-
-/* Box sizing rules */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Typography */
-:where(*) {
-  text-wrap: pretty;
-}
+@layer reset {
+  /* ------------------ reset  ------------------ */
 
-:where(h1, h2, h3, h4) {
-  text-wrap: balance;
-}
+  /* inspired by: */
+  /* https://piccalil.li/blog/a-modern-css-reset/ */
+  /* https://keithjgrant.com/posts/2024/01/my-css-resets/ */
+  /* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions */
+  /* https://github.com/mayank99/reset.css/blob/main/package/index.css */
 
-/* Scroll behavior */
-:where(html:focus-within) {
-  scroll-behavior: smooth;
-}
+  /* Box sizing rules */
 
-/* Body defaults */
-:where(body) {
-  min-height: 100vh;
-  min-height: 100dvh;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-}
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-/* Margins */
-:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
-  margin: 0;
-}
+  /* Typography */
+  * {
+    text-wrap: pretty;
+  }
 
-/* List styles */
-:where(ul[role='list'], ol[role='list']) {
-  list-style: none;
-}
+  h1,
+  h2,
+  h3,
+  h4 {
+    text-wrap: balance;
+  }
 
-/* Padding for lists */
-:where([role='list']) {
-  padding: 0;
-}
+  /* Scroll behavior */
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
 
-/* Anchor styles */
-:where(a:not([class])) {
-  text-decoration-skip-ink: auto;
-}
+  /* Body defaults */
+  body {
+    min-height: 100vh;
+    min-height: 100dvh;
+    text-rendering: optimizeSpeed;
+    line-height: 1.5;
+  }
 
-/* Image styles */
-:where(img, picture, svg, canvas) {
-  max-inline-size: 100%;
-  block-size: auto;
-  vertical-align: middle;
-  font-style: italic;
-  background-repeat: no-repeat;
-  background-size: cover;
-  shape-margin: 0.75rem;
-}
+  /* Margins */
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
 
-/* Button styles */
-:where(button) {
-  all: unset;
-}
+  /* List styles */
+  ul[role='list'],
+  ol[role='list'] {
+    list-style: none;
+  }
 
-/* Inherit fonts for inputs and buttons */
-:where(button, input, select, textarea) {
-  font: inherit;
-  color: inherit;
-}
+  /* Padding for lists */
+  [role='list'] {
+    padding: 0;
+  }
 
-/* Textarea styles */
-:where(textarea) {
-  resize: vertical;
-  resize: block;
-}
+  /* Anchor styles */
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
 
-/* Textarea height */
-:where(textarea:not([rows])) {
-  min-height: 10em;
-}
+  /* Image styles */
+  img,
+  picture,
+  svg,
+  canvas {
+    max-inline-size: 100%;
+    block-size: auto;
+    vertical-align: middle;
+    font-style: italic;
+    background-repeat: no-repeat;
+    background-size: cover;
+    shape-margin: 0.75rem;
+  }
 
-/* Cursor styles */
-:where(button, label, select, summary, [role='button'], [role='option']) {
-  cursor: pointer;
-}
+  /* Button styles */
+  button {
+    all: unset;
+  }
 
-/* Scroll margin above anchor links */
-:where(:target) {
-  scroll-margin-block-start: 2ex;
-}
+  /* Inherit fonts for inputs and buttons */
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+    color: inherit;
+  }
 
-/* Scroll margin below focused elements */
-:where(:focus) {
-  scroll-margin-block-end: 8vh;
-}
+  /* Textarea styles */
+  textarea {
+    resize: vertical;
+    resize: block;
+  }
 
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
+  /* Textarea height */
+  textarea:not([rows]) {
+    min-height: 10em;
   }
 
-  *,
-  ::after,
-  ::before {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
+  /* Cursor styles */
+  button,
+  label,
+  select,
+  summary,
+  [role='button'],
+  [role='option'] {
+    cursor: pointer;
   }
-}
 
-/* ------------------ variables  ------------------  */
-
-:root {
-  /* font sizes */
-  /* https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
-  --size-step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
-  --size-step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
-  --size-step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
-  --size-step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
-  --size-step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
-  --size-step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
-  --size-step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
-  --size-step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
-
-  /* spacing */
-  /* https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
-  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
-  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
-  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
-  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
-  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
-  --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
-  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
-  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
-  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);
-
-  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
-  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
-  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
-  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
-  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
-  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
-  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
-  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);
-
-  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);
-
-  /* semantic variables */
-
-  --gutter: var(--space-s-m);
-  --wrapper-width: clamp(16rem, 98vw, 65rem);
-  --text-size-base: var(--size-step-0);
-  --text-size-heading-1: var(--size-step-5);
-  --text-size-heading-2: var(--size-step-4);
-  --text-size-heading-3: var(--size-step-3);
-  --font-base: system-ui, sans-serif;
-  --leading: 1.5;
-  --leading-fine: 1.2;
-  --color: deeppink;
-
-  /* color scheme */
-  &:has(input[name='color-scheme'][value='light dark']:checked) {
-    color-scheme: light dark;
+  /* Scroll margin above anchor links */
+  :target {
+    scroll-margin-block-start: 2ex;
   }
-  &:has(input[name='color-scheme'][value='light']:checked) {
-    color-scheme: light;
+
+  /* Scroll margin below focused elements */
+  :focus {
+    scroll-margin-block-end: 8vh;
   }
-  &:has(input[name='color-scheme'][value='dark']:checked) {
-    color-scheme: dark;
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+      scroll-behavior: auto;
+    }
+
+    *,
+    ::after,
+    ::before {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+    }
   }
 }
 
-/* ------------------ base  ------------------  */
+@layer variables {
+  /* ------------------ variables  ------------------  */
 
-html {
-  color-scheme: light dark;
+  :root {
+    color-scheme: light dark;
+    --_dark: color-mix(in oklab, black 70%, snow);
+    --color-highlight: light-dark(deeppink, mediumvioletred);
+    --color-bg: light-dark(snow, var(--_dark));
+    --color-text: light-dark(var(--_dark), snow);
+
+    /* mode switch (https://web.dev/articles/light-dark) */
+    &:has(input[name='color-scheme'][value='light dark']:checked) {
+      color-scheme: light dark;
+    }
+    &:has(input[name='color-scheme'][value='light']:checked) {
+      color-scheme: light;
+    }
+    &:has(input[name='color-scheme'][value='dark']:checked) {
+      color-scheme: dark;
+    }
+
+    /* font sizes */
+    /* https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
+    --size-step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
+    --size-step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
+    --size-step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
+    --size-step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
+    --size-step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
+    --size-step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
+    --size-step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
+    --size-step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
+
+    /* spacing */
+    /* https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
+    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
+    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
+    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
+    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
+    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
+    --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
+    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
+    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
+    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);
+
+    --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
+    --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
+    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
+    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
+    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
+    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
+    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
+    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);
+
+    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);
+
+    /* semantic variables */
+
+    --gutter: var(--space-s-m);
+    --wrapper-width: clamp(16rem, 98vw, 65rem);
+    --text-size-base: var(--size-step-0);
+    --text-size-heading-1: var(--size-step-5);
+    --text-size-heading-2: var(--size-step-4);
+    --text-size-heading-3: var(--size-step-3);
+    --font-base: system-ui, sans-serif;
+    --leading: 1.5;
+    --leading-fine: 1.2;
+  }
 }
 
-body {
-  font-family: var(--font-base);
-  font-size: var(--text-size-base);
-  line-height: var(--leading);
-  display: flex;
-  flex-direction: column;
-  color: CanvasText;
-  background-color: Canvas;
-  accent-color: var(--color);
-}
+@layer base {
+  /* ------------------ base  ------------------  */
 
-main {
-  flex: auto;
-}
+  body {
+    font-family: var(--font-base);
+    font-size: var(--text-size-base);
+    line-height: var(--leading);
+    display: flex;
+    flex-direction: column;
+    accent-color: var(--color-highlight);
+    color: var(--color-text);
+    background-color: var(--color-bg);
+  }
 
-h1,
-h2,
-h3 {
-  line-height: var(--leading-fine);
-}
+  main {
+    flex: auto;
+  }
 
-h1 {
-  font-size: var(--text-size-heading-1);
-}
+  h1,
+  h2,
+  h3 {
+    line-height: var(--leading-fine);
+  }
 
-h2 {
-  font-size: var(--text-size-heading-2);
-}
+  h1 {
+    font-size: var(--text-size-heading-1);
+  }
 
-h3 {
-  font-size: var(--text-size-heading-3);
-}
+  h2 {
+    font-size: var(--text-size-heading-2);
+  }
 
-p,
-li {
-  max-inline-size: 70ch;
-}
+  h3 {
+    font-size: var(--text-size-heading-3);
+  }
 
-svg {
-  block-size: 2ex;
-  inline-size: auto;
-  flex: none;
-}
+  p,
+  li {
+    max-inline-size: 70ch;
+  }
 
-a {
-  color: currentcolor;
-  text-decoration-thickness: 0.08em;
-}
+  svg {
+    block-size: 2ex;
+    inline-size: auto;
+    flex: none;
+  }
 
-/* Focus styles */
-:focus-visible {
-  outline: 3px solid;
-  outline-offset: 0.3ch;
-}
+  a {
+    color: currentcolor;
+    text-decoration-thickness: 0.08em;
+  }
 
-/* Text selection */
-::selection {
-  background-color: var(--color);
-  color: currentColor;
-}
+  /* Focus styles */
+  :focus-visible {
+    outline: 3px solid;
+    outline-offset: 0.3ch;
+  }
 
-/* Scripting */
-@media (scripting: none) {
-  .require-js {
-    display: none;
+  /* Text selection */
+  ::selection {
+    background-color: var(--color-highlight);
+    color: currentColor;
+  }
+
+  /* Scripting */
+  @media (scripting: none) {
+    .require-js {
+      display: none;
+    }
   }
 }
 
-/* ------------------ Compositions (layouts) ------------------ */
+@layer compositions {
+  /* ------------------ Compositions (layouts) ------------------ */
 
-/* https://every-layout.dev/layouts/stack/ */
-.flow > * + * {
-  margin-block-start: var(--flow-space, 1em);
-}
+  /* https://every-layout.dev/layouts/stack/ */
+  .flow > * + * {
+    margin-block-start: var(--flow-space, 1em);
+  }
 
-/* https://every-layout.dev/layouts/cluster/ */
-.cluster {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gutter, var(--space-s-l));
-  justify-content: var(--cluster-horizontal-alignment, flex-start);
-  align-items: var(--cluster-vertical-alignment, center);
-}
+  /* https://every-layout.dev/layouts/cluster/ */
+  .cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gutter, var(--space-s-l));
+    justify-content: var(--cluster-horizontal-alignment, flex-start);
+    align-items: var(--cluster-vertical-alignment, center);
+  }
 
-/* https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/ */
-.wrapper {
-  margin-inline: auto;
-  padding-inline: var(--gutter);
-  position: relative;
-  inline-size: var(--wrapper-width);
-}
+  /* pushes items away from each other where there is space in the viewport and stacks on small viewports */
+  .repel {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: var(--repel-vertical-alignment, center);
+    gap: var(--gutter, var(--space-s-l));
+  }
 
-/* pushes items away from each other where there is space in the viewport and stacks on small viewports */
-.repel {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: var(--repel-vertical-alignment, center);
-  gap: var(--gutter, var(--space-s-l));
-}
+  /* Add consistent vertical padding to create regions of content */
+  .region {
+    padding-block-start: var(--region-space-top, var(--space-l-xl));
+    padding-block-end: var(--region-space-bottom, var(--space-l-xl));
+  }
 
-/* Add consistent vertical padding to create regions of content */
-.region {
-  padding-block-start: var(--region-space-top, var(--space-l-xl));
-  padding-block-end: var(--region-space-bottom, var(--space-l-xl));
-}
+  /* https://ryanmulligan.dev/blog/layout-breakouts/ */
+  .wrapper {
+    --gap: clamp(1rem, 6vw, 3rem);
+    --full: minmax(var(--gap), 1fr);
+    --content: min(var(--wrapper-width, 85rem), 100% - var(--gap) * 2);
+    --outer: minmax(0, 5rem);
+
+    display: grid;
+    grid-template-columns:
+      [full-start] var(--full)
+      [outer-start] var(--outer)
+      [content-start] var(--content) [content-end]
+      var(--outer) [outer-end]
+      var(--full) [full-end];
+  }
 
-/* ------------------ blocks  ------------------  */
+  .wrapper > * {
+    grid-column: content;
+  }
+
+  .outer {
+    grid-column: feature;
+  }
 
-.skip-link {
-  position: absolute;
-  top: 1em;
-  left: 1em;
+  .full {
+    grid-column: full;
+  }
 }
 
-.skip-link:not(:focus),
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: auto;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
+@layer blocks {
+  /* ------------------ blocks  ------------------  */
+
+  .skip-link {
+    position: absolute;
+    top: 1em;
+    left: 1em;
+  }
+
+  .skip-link:not(:focus),
+  .visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: auto;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+  }
 }