change structure, update

src/assets/css/blocks/card.css

@@ -1,51 +0,0 @@
-.card {
-  --gutter: var(--space-xs-s);
-  background-color: var(--color-bg-accent);
-  border: 4px solid var(--color-bg-accent);
-  color: var(--color-text);
-  padding: var(--space-s-m);
-  border-radius: var(--border-radius);
-  max-inline-size: unset;
-}
-
-.card ::selection {
-  color: var(--color-dark);
-  background-color: var(--color-secondary);
-}
-
-.card h2,
-.card h3 {
-  font-family: var(--font-base);
-  font-size: var(--size-step-2);
-}
-
-.card h2 a,
-.card h3 a {
-  text-decoration: none;
-}
-
-.card:hover,
-.card:focus-within {
-  border: 4px solid var(--color-primary);
-}
-
-/* 'clickable' */
-
-.card:focus-within a:focus {
-  outline: none;
-}
-.card {
-  position: relative;
-}
-.card a:after {
-  bottom: 0;
-  content: '';
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.blogcards {
-  --gutter: var(--space-l);
-}

src/assets/css/blocks/dialog.css

@@ -1,21 +0,0 @@
-dialog {
-  border: none;
-  border-radius: var(--border-radius);
-}
-
-dialog + button {
-  all: unset;
-  cursor: pointer;
-}
-
-dialog::backdrop {
-  background-image: var(--gradient-stripes);
-  opacity: 0.85;
-  filter: brightness(50%);
-}
-
-/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */
-
-html:has(dialog[open]:modal) {
-  overflow: hidden;
-}

src/assets/css/blocks/grid-card.css

@@ -1,14 +0,0 @@
-.grid-card {
-  display: grid;
-  gap: 2ch;
-  grid-row: span 3;
-  grid-template-rows: subgrid;
-}
-
-.grid-card img {
-  max-inline-size: var(--max-img-width, 100%);
-  block-size: auto;
-  aspect-ratio: 16/9;
-  object-fit: cover;
-  object-position: center;
-}

src/assets/css/blocks/site-foot.css

@@ -1,45 +0,0 @@
-.site-foot {
-  margin-block-start: var(--space-l-xl);
-  padding: var(--space-s-m);
-  color: var(--color-text);
-}
-
-.site-foot__inner {
-  display: flex;
-  gap: var(--space-xs);
-  justify-content: center;
-  align-items: center;
-}
-
-/* increase tab size */
-.site-foot__inner a {
-  padding: var(--space-xs);
-}
-
-:not(nav#social).site-foot__inner {
-  flex-wrap: wrap;
-}
-
-.site-foot svg {
-  inline-size: 1.1em;
-  block-size: 1em;
-}
-
-.site-foot .creator {
-  text-decoration: none;
-}
-
-.site-foot .creator {
-  text-decoration: none;
-}
-.site-foot .creator:hover {
-  color: transparent;
-  background-image: var(--gradient-rainbow);
-  background-size: 100%;
-  background-repeat: repeat;
-  background-clip: text;
-}
-
-.site-foot .creator:hover svg {
-  color: var(--color-text);
-}

src/assets/css/blocks/youtube.css

@@ -1,3 +0,0 @@
-.youtube-embed {
-  aspect-ratio: 16 / 9;
-}

src/assets/css/bundle/details.css

@@ -1,23 +1,28 @@
-.control {
+.details .control {
   --gutter: var(--space-xs-s);
   --cluster-horizontal-alignment: flex-end;
   border-block-start: 1px solid var(--color-bg-accent);
   padding-block-start: var(--space-xs);
 }
 
-details > * + * {
+/* Hide without JS */
+is-land:not(:defined) .details .control {
+  display: none;
+}
+
+.details details > * + * {
   margin-block-start: var(--flow-space, 1em);
 }
 
-details > p:last-child {
+.details details > p:last-child {
   margin-block-end: var(--space-l);
 }
 
-summary {
+.details summary {
   grid-column: content;
 }
 
-summary {
+.details summary {
   display: flex;
   align-items: baseline;
   line-height: 1.2;
@@ -28,13 +33,13 @@ summary {
   font-size: var(--size-step-1);
 }
 
-summary:hover,
+.details summary:hover,
-summary:focus-visible,
+.details summary:focus-visible,
-[open] > summary {
+.details[open] > summary {
   color: var(--color-primary);
 }
 
-summary::before {
+.details summary::before {
   content: '+';
   display: block;
   color: var(--color-primary);
@@ -47,21 +52,35 @@ summary::before {
   margin-inline-start: 0.2ch;
 }
 
-[open] summary::before {
+.details details[open] summary::before {
-  content: '-';
+  content: '–';
+}
+
+.details details > :is(h2, h3) {
+  font-weight: var(--font-bold);
+  font-size: var(--size-step-0);
+  border-block-end: 1px solid var(--color-bg-accent);
+  padding-block-end: var(--space-xs);
+}
+
+.details details > :is(h2, h3) {
+  font-weight: var(--font-bold);
+  font-size: var(--size-step-0);
+  border-block-end: 1px solid var(--color-bg-accent);
+  padding-block-end: var(--space-xs);
 }
 
 /* Hide default marker */
-summary::-webkit-details-marker,
+.details summary::-webkit-details-marker,
-summary::marker {
+.details summary::marker {
   content: '';
   display: none;
 }
 
-summary + * {
+.details summary + * {
   margin-block-start: var(--space-s-m);
 }
 
-details > * + * {
+.details details > * + * {
   margin-inline-start: 2.4ch;
 }

src/assets/css/bundle/gallery.css

@@ -0,0 +1,24 @@
+.gallery dialog {
+  border-radius: var(--border-radius);
+  inset: revert;
+}
+
+.gallery dialog + button {
+  all: unset;
+  cursor: pointer;
+}
+
+/* Don't indicate interactivity without JS */
+is-land:not(:defined) .gallery dialog + button {
+  cursor: default;
+}
+
+.gallery dialog::backdrop {
+  background-image: var(--gradient-stripes);
+  opacity: 0.9;
+  filter: brightness(50%);
+}
+
+.gallery dialog img {
+  max-block-size: 70vh;
+}

src/assets/css/bundle/nav-drawer.css

@@ -1,45 +1,56 @@
-.site-nav-drawer {
-  position: var(--nav-position, absolute);
-  inset-inline-end: 0.1rem;
-}
-
 /* Remove default list styling and create layout for list */
-.site-nav-drawer ul {
+.mainnav ul {
-  z-index: 1;
-  --cluster-vertical-alignment: normal;
-  --gutter: var(--space-xs);
   list-style: none;
   margin: 0;
+  --gutter: var(--space-xs);
   line-height: 0.5em;
-  padding: var(--nav-list-padding, var(--space-2xl) var(--space-s));
+  padding-block-end: var(--space-s);
-  background: var(--nav-list-background, var(--color-bg));
-  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
-  flex-direction: var(--nav-list-layout, column);
-  block-size: var(--nav-list-height, 100vh);
-  position: var(--nav-list-position, fixed);
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  inline-size: var(--nav-list-width, min(22rem, 100vw));
-  visibility: var(--nav-list-visibility, visible);
 }
 
-.site-nav-drawer [aria-expanded='false'] + ul {
+/* drawerif JS enabled */
+@media (scripting: enabled) {
+  .mainnav {
+    position: var(--nav-position, absolute);
+    inset-inline-end: 0.1rem;
+  }
+
+  .mainnav ul {
+    --cluster-vertical-alignment: normal;
+    z-index: 1;
+    padding: var(--nav-list-padding, var(--space-2xl) var(--space-s));
+    background: var(--nav-list-background, var(--color-bg));
+    box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
+    flex-direction: var(--nav-list-layout, column);
+    block-size: var(--nav-list-height, 100vh);
+    position: var(--nav-list-position, fixed);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inline-size: var(--nav-list-width, min(18rem, 100vw));
+    visibility: var(--nav-list-visibility, visible);
+  }
+}
+
+.mainnav [aria-expanded='false'] + ul {
   transform: var(--nav-list-transform, translateX(100%));
   visibility: var(--nav-list-visibility, hidden);
 }
 
 /* animates ul only when opening to avoid flash on page load, svg always */
 @media (prefers-reduced-motion: no-preference) {
-  .site-nav-drawer [aria-expanded='true'] + ul,
+  .mainnav [aria-expanded='true'] + ul,
-  .site-nav-drawer svg {
+  .mainnav svg {
     transition:
       transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
       visibility 0.05s linear;
   }
 }
 
+.mainnav [aria-expanded='true'] + ul {
+  padding-top: var(--space-2xl);
+}
+
 /* Basic link styling */
-.site-nav-drawer a {
+.mainnav a {
   --text-color: var(--color-text);
   --background-color: var(--color-bg);
   --border-color: transparent;
@@ -48,27 +59,27 @@
   padding: var(--anchor-padding, var(--space-s));
   text-decoration: none;
   display: block;
-  border-radius: var(--border-radius);
+
   border: 1px solid var(--border-color);
 }
 
 /* Change the border-color on :hover and :focus */
-.site-nav-drawer a:where(:hover, :focus) {
+.mainnav a:where(:hover, :focus) {
   --background-color: var(--color-bg-accent);
   --text-color: var(--color-text-accent);
   --border-color: var(--color-bg-accent);
 }
 
 /* Change border-color and color for the active page */
-.site-nav-drawer [aria-current='page'],
+.mainnav [aria-current='page'],
-.site-nav-drawer [data-state='active'] {
+.mainnav [data-state='active'] {
   --background-color: var(--color-bg-accent);
   --text-color: var(--color-text);
   --border-color: var(--color-bg-accent);
 }
 
 /* Reset button styling */
-.site-nav-drawer button {
+.mainnav button {
   all: unset;
   display: var(--nav-button-display, flex);
   align-items: center;
@@ -79,31 +90,31 @@
   padding: var(--space-xs) 0;
 }
 
-.site-nav-drawer span {
+.mainnav span {
   font-size: var(--size-step-min-1);
   font-weight: var(--font-bold);
   text-transform: uppercase;
   padding-inline-end: var(--space-2xs);
 }
 
-.site-nav-drawer svg {
+.mainnav svg {
   block-size: 100%;
   inline-size: auto;
   transform: translateY(-0.1em);
   color: var(--color-text);
 }
 
-.site-nav-drawer [aria-expanded='true'] svg {
+.mainnav [aria-expanded='true'] svg {
   transform: var(--nav-list-rotate, rotate(45deg));
 }
 
-@media screen(sm) {
+@media screen(navigation) {
-  .site-nav-drawer {
+  .mainnav {
     --nav-button-display: none;
     --nav-position: static;
   }
 
-  .site-nav-drawer ul {
+  .mainnav ul {
     --nav-list-background: transparent;
     --nav-list-layout: row;
     --nav-list-position: static;
@@ -115,7 +126,7 @@
     --nav-list-visibility: visible;
   }
 
-  .site-nav-drawer a {
+  .mainnav a {
     --anchor-padding: var(--space-xs) 0.2em;
     --text-color: var(--color-text);
     --background-color: transparent;
@@ -127,7 +138,7 @@
     text-underline-offset: 0.2em;
   }
 
-  .site-nav-drawer a:where(:hover, :focus) {
+  .mainnav a:where(:hover, :focus) {
     --text-color: var(--color-text);
     --background-color: transparent;
     --border-color: transparent;
@@ -135,8 +146,8 @@
   }
 
   /* Change border-color and color for the active page */
-  .site-nav-drawer [aria-current='page'],
+  .mainnav [aria-current='page'],
-  .site-nav-drawer [data-state='active'] {
+  .mainnav [data-state='active'] {
     --text-color: var(--color-primary);
     --background-color: transparent;
     --border-color: transparent;

src/assets/css/bundle/nav-pills.css

@@ -1,13 +1,13 @@
 /* Basic link styling */
-.site-nav ul {
+.mainnav ul {
+  --gutter: var(--space-xs);
   list-style: none;
   margin: 0;
-  gap: var(--space-xs);
   line-height: 0.5em;
   padding-block-end: var(--space-s);
 }
 
-.site-nav a {
+.mainnav a {
   --text-color: var(--color-text);
   --background-color: var(--color-bg);
   --border-color: var(--color-bg-accent-2);
@@ -21,27 +21,27 @@
 }
 
 /* Change the border-color on :hover and :focus */
-.site-nav a:where(:hover, :focus) {
+.mainnav a:where(:hover, :focus) {
   --background-color: var(--color-text);
   --text-color: var(--color-bg);
   --border-color: var(--color-bg);
 }
 
 /* Change border-color and color for the active page. data-state='active' if a child is active. */
-.site-nav [aria-current='page'],
+.mainnav [aria-current='page'],
-.site-nav [data-state='active'] {
+.mainnav [data-state='active'] {
   --background-color: var(--color-text);
   --text-color: var(--color-bg);
   --border-color: var(--color-bg);
 }
 
-@media screen(md) {
+@media screen(navigation) {
   /* Basic link styling */
-  .site-nav ul {
+  .mainnav ul {
     padding-block-end: 0;
   }
 
-  .site-nav a {
+  .mainnav a {
     --text-color: var(--color-text);
     --background-color: transparent;
     --border-color: transparent;
@@ -56,15 +56,15 @@
   }
 
   /* Change the border-color on :hover and :focus */
-  .site-nav a:where(:hover, :focus) {
+  .mainnav a:where(:hover, :focus) {
     --text-decoration: var(--color-text-accent);
     --text-color: var(--color-text);
     --background-color: transparent;
   }
 
   /* Change border-color and color for the active page */
-  .site-nav [aria-current='page'],
+  .mainnav [aria-current='page'],
-  .site-nav [data-state='active'] {
+  .mainnav [data-state='active'] {
     --text-decoration: var(--color-primary);
     --text-color: var(--color-primary);
     --background-color: transparent;

src/assets/css/components/custom-card.css

@@ -0,0 +1,105 @@
+custom-card {
+  --gutter: var(--space-xs-s);
+  background-color: var(--card-bg, var(--color-bg-accent));
+  border: 4px solid var(--color-bg-accent);
+  color: var(--color-text);
+  padding: var(--space-s-m);
+  border-radius: var(--border-radius);
+  max-inline-size: unset;
+  display: grid;
+  grid-template-rows: [image] max-content [headline] max-content [meta] max-content [desc] auto [footer] max-content;
+}
+
+/* avoid flow space being added to unused elements with nested slots */
+custom-card > :empty {
+  display: none;
+}
+
+custom-card ::selection {
+  color: var(--color-dark);
+  background-color: var(--color-secondary);
+}
+
+custom-card :is(h2, h3) {
+  --flow-space: var(--space-m);
+  grid-row: headline;
+  font-size: var(--size-step-2);
+}
+
+custom-card :is(h2, h3) a {
+  text-decoration: none;
+}
+
+custom-card > :is(picture, figure) {
+  grid-row: image;
+  --flow-space: 0;
+}
+
+custom-card img {
+  max-inline-size: var(--max-img-width, 100%);
+  block-size: auto;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  object-position: center;
+}
+
+custom-card > .meta {
+  grid-row: meta;
+  font-size: var(--size-step-min-1);
+}
+
+custom-card > p {
+  grid-row: desc;
+}
+
+custom-card > footer {
+  grid-row: footer;
+  font-size: var(--size-step-min-2);
+}
+
+/* avoid overflow of long words */
+
+custom-card :is(a, p, h2, h3) {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+/* -------------------- variants --------------------  */
+
+/* no padding */
+
+custom-card[no-padding] {
+  background-color: transparent;
+  border: 4px solid var(--color-bg-accent);
+  padding: 0;
+  border-radius: none;
+}
+
+/* squared image */
+
+custom-card[img-square] img {
+  aspect-ratio: 1;
+}
+
+/* clickable */
+
+custom-card[clickable]:hover,
+custom-card[clickable]:focus-within {
+  border: 4px solid var(--color-primary);
+}
+
+custom-card[clickable]:focus-within a:focus {
+  outline: none;
+}
+custom-card[clickable] {
+  position: relative;
+}
+custom-card[clickable] a:after {
+  bottom: 0;
+  content: '';
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}

src/assets/css/compositions/reel.css

@@ -1,41 +0,0 @@
-/*
- REEL
- A layout that creates a carousel-like element
-
-
- CONFIGURATION
- Add an attribute of data-scroll="snap" to the element
- to enable scroll snapping
-*/
-
-.reel {
-  --reel-space: 2rem;
-  display: flex;
-  block-size: auto;
-  max-inline-size: 100%;
-  margin-inline: auto;
-
-  /* Padding allows child element hover states to show */
-  padding: 0.5rem;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.reel > * {
-  flex-basis: var(--reel-item-width, calc(33.333% - var(--reel-space)));
-  flex-shrink: 0;
-}
-
-.reel > * + * {
-  margin-inline-start: var(--reel-space);
-}
-
-/* SCROLL TYPE EXCEPTION
-   Sets the reel to snap on each item on scroll */
-.reel[data-scroll='snap'] {
-  scroll-snap-type: x mandatory;
-}
-
-.reel[data-scroll='snap'] > * {
-  scroll-snap-align: start;
-}

src/assets/css/compositions/switcher.css

@@ -1,34 +0,0 @@
-/*
-SWITCHER
-More info: https://every-layout.dev/layouts/switcher/
-A layout that allows you to lay **2** items next to each other
-until there is not enough horizontal space to allow that.
-
-CUSTOM PROPERTIES AND CONFIGURATION
---gutter (var(--space-size-1)): This defines the space
-between each item
-
---switcher-target-container-width (40rem): How large the container
-needs to be to allow items to sit inline with each other
-
---switcher-vertical-alignment How items should align vertically.
-Can be any acceptable flexbox alignment value.
-*/
-.switcher {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gutter, var(--space-s-l));
-  align-items: var(--switcher-vertical-alignment, flex-start);
-}
-
-.switcher > * {
-  flex-grow: 1;
-  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
-}
-
-/* Max 2 items,
-so we target everything *after* those */
-.switcher > :nth-last-child(n + 3),
-.switcher > :nth-last-child(n + 3) ~ * {
-  flex-basis: 100%;
-}

src/assets/css/global/base/fonts.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'Inclusive Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local(''),
+    url('/assets/fonts/inclusive/inclusivesans-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inclusive Sans';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local(''),
+    url('/assets/fonts/inclusive/inclusivesans-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Redhat';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src:
+    local(''),
+    url('/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2') format('woff2');
+}

src/assets/css/global/base/global-styles.css

@@ -1,35 +1,40 @@
 /*
-  Global styles
+	Global styles
 
-  Low-specificity, global styles that apply to the whole
+	Low-specificity, global styles that apply to the whole
-  project: https://cube.fyi/css.html
+	project: https://cube.fyi/css.html
 */
 
+/* Base styles */
+html {
+  color-scheme: light dark;
+}
+
 body {
-  color: var(--color-text);
-  background-color: var(--color-bg);
-  font-size: var(--size-step-0);
-  font-family: var(--font-base);
-  line-height: 1.4;
-  letter-spacing: var(--tracking);
   display: flex;
   flex-direction: column;
-  font-weight: var(--font-medium);
+  font-family: var(--font-base);
+  font-size: var(--size-step-0);
+  font-weight: var(--font-regular);
+  line-height: var(--leading-standard);
+  color: var(--color-text);
+  background-color: var(--color-bg);
   accent-color: var(--color-primary);
+  letter-spacing: var(--tracking);
 }
 
 main {
   flex: auto;
 }
 
-/* Base typesetting */
+/* Typography */
 h1,
 h2,
 h3 {
+  font-family: var(--font-display);
+  font-weight: var(--font-extra-bold);
   line-height: 1.2;
   letter-spacing: var(--tracking-s);
-  font-weight: var(--font-bold);
-  font-family: var(--font-display);
 }
 
 h1 {
@@ -44,7 +49,7 @@ h3 {
   font-size: var(--size-step-2);
 }
 
-/* Set line lengths */
+/* Text formatting */
 p,
 li,
 blockquote:not([class]) {
@@ -52,8 +57,8 @@ blockquote:not([class]) {
 }
 
 blockquote {
-  border-inline-start: 0.5rem solid var(--color-primary);
   padding: var(--space-m-l);
+  border-inline-start: 0.5rem solid var(--color-primary);
   font-size: var(--size-step-2);
 }
 
@@ -67,31 +72,37 @@ blockquote :last-child {
   font-size: var(--size-step-1);
 }
 
+/* Form elements */
+input,
+textarea {
+  caret-color: var(--color-primary);
+}
+
+/* SVG */
 svg {
   block-size: 2ex;
   inline-size: auto;
   flex: none;
 }
 
+/* Text styling */
+b,
 strong {
   font-weight: var(--font-extra-bold);
+  font-family: var(--font-display);
 }
 
+/* Horizontal rule */
 hr {
-  border: 0;
   height: 1px;
   width: 10%;
   margin-block: var(--space-m-l);
   margin-inline-start: 0;
   background-color: var(--color-bg-accent-2);
+  border: 0;
 }
 
-[role='list'] {
+/* Links */
-  padding: 0;
-}
-
-/* Base interactive elements */
-
 a {
   color: currentcolor;
   text-decoration-thickness: 0.08em;
@@ -101,36 +112,26 @@ a:hover {
   text-decoration: none;
 }
 
+/* Focus styles */
 :focus-visible {
   outline: 3px solid;
   outline-offset: 0.3ch;
 }
 
-main:focus {
+/* Text selection */
-  outline: none;
-}
-
-/* Base selection styles that invert whatever colours are rendered */
 ::selection {
   background-color: var(--color-text);
   color: var(--color-bg);
 }
 
+/* Transitions */
 .preload-transitions * {
   transition: none !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
+/* Scripting */
-  html:focus-within {
+@media (scripting: none) {
-    scroll-behavior: auto;
+  .require-js {
-  }
+    display: none;
-
-  *,
-  ::after,
-  ::before {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
   }
 }

src/assets/css/global/base/reset.css

@@ -0,0 +1,144 @@
+/* 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;
+}
+
+:where(h1, h2, h3, h4) {
+  text-wrap: balance;
+}
+
+/* Scroll behavior */
+:where(html:focus-within) {
+  scroll-behavior: smooth;
+}
+
+/* Body defaults */
+:where(body) {
+  min-height: 100vh;
+  min-height: 100dvh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Margins */
+:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
+  margin: 0;
+}
+
+/* List styles */
+:where(ul[role='list'], ol[role='list']) {
+  list-style: none;
+}
+
+/* Padding for lists */
+:where([role='list']) {
+  padding: 0;
+}
+
+/* Anchor styles */
+:where(a:not([class])) {
+  text-decoration-skip-ink: auto;
+}
+
+/* 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;
+}
+
+/* Button styles */
+:where(button) {
+  all: unset;
+}
+
+/* Inherit fonts for inputs and buttons */
+:where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+}
+
+/* Textarea styles */
+:where(textarea) {
+  resize: vertical;
+  resize: block;
+}
+
+/* Textarea height */
+:where(textarea:not([rows])) {
+  min-height: 10em;
+}
+
+/* Cursor styles */
+:where(button, label, select, summary, [role='button'], [role='option']) {
+  cursor: pointer;
+}
+
+/* Scroll margin above anchor links */
+:where(:target) {
+  scroll-margin-block-start: 2ex;
+}
+
+/* Scroll margin below focused elements */
+:where(:focus) {
+  scroll-margin-block-end: 8vh;
+}
+
+:where(dialog) {
+  border: none;
+  background: none;
+  inset: unset;
+  max-width: unset;
+  max-height: unset;
+}
+
+:where([popover]) {
+  border: none;
+  background: none;
+  inset: unset;
+  color: inherit;
+}
+
+/*  hide dialog elements without open or popover attributes, and elements with a popover attribute that are not in an open state. */
+:where(dialog:not([open], [popover])),
+:where([popover]:not(:popover-open)) {
+  display: none !important;
+}
+
+/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */
+:where(html:has(dialog[open]:modal)) {
+  overflow: hidden;
+}
+
+/* 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;
+  }
+}

src/assets/css/global/base/variables.css

@@ -1,11 +1,9 @@
 /* Global variables.  */
 /* This turned out a little too complex, and probably is overly specific. I'm still fiddling with this. Should work by itself though, once you define your design token colors.
-/* Feel free to delete the modern CSS enhancements starting on line 74. Adjust fallbacks if modern color syntax not supported for text and bg variants. */
+Adjust fallbacks if modern color syntax not supported for text and bg variants. */
 
 /* Basic variable definitions for color schemes */
 :root {
-  color-scheme: light dark;
-
   --gutter: var(--space-m-l);
   --border-radius: 0.3rem;
   --transition-duration: 250ms;
@@ -15,14 +13,7 @@
   --tracking-s: -0.075ch;
   --tracking-wide: 0.05ch;
 
-  --gradient-rainbow: linear-gradient(
+  --gradient-rainbow: linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%);
-    90deg,
-    #cf4662 10%,
-    #fbbe25 30%,
-    #62c95c 50%,
-    #08bccb 75%,
-    #a977d5 90%
-  );
   --gradient-conic: conic-gradient(
     var(--color-primary) 0 28%,
     var(--color-secondary) 0 67%,
@@ -89,56 +80,31 @@
     --color-text-accent: color-mix(in oklab, var(--color-base-dark) 80%, var(--color-bg));
     --color-bg-accent: color-mix(in oklab, var(--color-bg) 90%, var(--color-text));
     --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 70%, var(--color-text));
+    --color-primary-sub-20: color-mix(in oklab, var(--color-primary-highlight), var(--color-bg) 20%);
+    --color-secondary-sub-20: color-mix(in oklab, var(--color-secondary-highlight), var(--color-bg) 20%);
+    --color-tertiary-sub-20: color-mix(in oklab, var(--color-tertiary-highlight), var(--color-bg) 20%);
   }
 
   @media (prefers-color-scheme: dark) {
     :root {
-      --color-text-accent: color-mix(
+      --color-text-accent: color-mix(in oklab, var(--color-base-light) 70%, var(--color-bg));
-        in oklab,
-        var(--color-base-light) 70%,
-        var(--color-bg)
-      );
       --color-bg-accent: color-mix(in oklab, var(--color-bg) 92%, var(--color-text));
       --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 80%, var(--color-text));
       /* add opacity with color-mix */
-      --color-primary: color-mix(
+      --color-primary: var(--color-primary-sub-20);
-        in oklab,
+      --color-secondary: var(--color-secondary-sub-20);
-        var(--color-primary-highlight),
+      --color-tertiary: var(--color-tertiary-sub-20);
-        transparent 20%
-      );
-      --color-secondary: color-mix(
-        in oklab,
-        var(--color-secondary-highlight),
-        transparent 20%
-      );
-      --color-tertiary: color-mix(
-        in oklab,
-        var(--color-tertiary-highlight),
-        transparent 20%
-      );
     }
   }
 
   :root[data-theme='dark'] {
-    --color-text-accent: color-mix(
+    --color-text-accent: color-mix(in oklab, var(--color-base-light) 70%, var(--color-bg));
-      in oklab,
-      var(--color-base-light) 70%,
-      var(--color-bg)
-    );
     --color-bg-accent: color-mix(in oklab, var(--color-bg) 92%, var(--color-text));
     --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 80%, var(--color-text));
     /* add opacity with color-mix */
-    --color-primary: color-mix(in oklab, var(--color-primary-highlight), transparent 20%);
+    --color-primary: var(--color-primary-sub-20);
-    --color-secondary: color-mix(
+    --color-secondary: var(--color-secondary-sub-20);
-      in oklab,
+    --color-tertiary: var(--color-tertiary-sub-20);
-      var(--color-secondary-highlight),
-      transparent 20%
-    );
-    --color-tertiary: color-mix(
-      in oklab,
-      var(--color-tertiary-highlight),
-      transparent 20%
-    );
   }
 }
 

src/assets/css/global/blocks/code.css

@@ -10,6 +10,7 @@ code {
 pre {
   --dark-bg: color-mix(in oklab, var(--color-bg) 92%, black);
   grid-column: popout !important;
+  overflow-x: auto;
 }
 
 code,

src/assets/css/global/blocks/external-link.css

@@ -1,14 +1,12 @@
 article
-  [href^='http']:not([href*='localhost:8080']):not(
+  a[href^='http']:not([href*='localhost:8080']):not([href*='eleventy-excellent.netlify.app']):not(.button) {
-    [href*='eleventy-excellent.netlify.app']
-  ):not(.button) {
   padding-inline-end: 0.8em;
 }
 
 article
-  [href^='http']:not([href*='localhost:8080']):not(
+  a[href^='http']:not([href*='localhost:8080']):not([href*='eleventy-excellent.netlify.app']):not(
-    [href*='eleventy-excellent.netlify.app']
+    .no-indicator
-  ):not(.no-indicator)::after {
+  )::after {
   position: absolute;
   display: inline-block;
   inline-size: 1em;

src/assets/css/global/blocks/post.css

@@ -1,16 +1,16 @@
-.post h1 {
+.post .prose h1 {
   font-size: var(--size-step-6);
 }
 
-.post h2 {
+.post .prose h2 {
   font-size: var(--size-step-3);
 }
 
-.post h3 {
+.post .prose h3 {
   font-size: var(--size-step-2);
 }
 
-.post img {
+.post .prose img {
   max-inline-size: var(--max-img-width, 100%);
   block-size: auto;
   aspect-ratio: 16/9;
@@ -18,12 +18,12 @@
   object-position: center;
 }
 
-.date {
+.post ..prose date {
   font-size: var(--size-step-1);
   color: var(--color-text-light);
 }
 
-.credit {
+.post .prose .credit {
   font-size: var(--size-step-min-1);
   color: var(--color-text-accent);
   background-color: var(--color-bg);
@@ -33,7 +33,6 @@
   max-inline-size: fit-content;
 }
 
-.meta {
+.post .prose .meta {
   font-size: var(--size-step-min-1);
-  margin-block-end: var(--space-m);
 }

src/assets/css/global/blocks/prose.css

@@ -5,7 +5,7 @@
   --wrapper-width: 64rem;
 }
 
-.prose :is(pre, pre + *, figure, figure + *) {
+.prose :where(pre, pre + *, figure, figure + *) {
   --flow-space: var(--space-m-l);
 }
 
@@ -17,11 +17,11 @@
   border-bottom: 1px solid var(--color-bg-accent);
 }
 
-.prose :is(h2, h3, h4) {
+:where(.prose :is(h2, h3, h4)) {
   --flow-space: var(--space-xl);
 }
 
-.prose :is(h2 + *, h3 + *, h4 + *):not(figure) {
+:where(.prose :is(h2 + *, h3 + *, h4 + *):not(figure)) {
   --flow-space: var(--space-m);
 }
 
@@ -29,7 +29,7 @@
   text-decoration: none;
 }
 
-.prose .heading-anchor {
+.heading-anchor {
   text-decoration: none;
 }
 
@@ -45,7 +45,7 @@
 
 /* inline space only for "regular lists" */
 .prose :where(ul:not(.grid), ol:not(.grid)) {
-  padding-inline-start: 1.5ch;
+  padding-inline-start: 1.2ch;
 }
 
 /* marker only for "regular lists" */

src/assets/css/global/blocks/seperator.css

@@ -4,3 +4,7 @@
   inline-size: 100%;
   fill: var(--spot-color, var(--color-bg));
 }
+
+.section > .seperator {
+  transform: translateY(-1px);
+}

src/assets/css/global/blocks/site-footer.css

@@ -0,0 +1,45 @@
+.site-footer {
+  margin-block-start: var(--space-l-xl);
+  padding: var(--space-s-m);
+  color: var(--color-text);
+}
+
+.site-footer .footer__meta {
+  --gutter: var(--space-xs);
+  --cluster-horizontal-alignment: center;
+}
+
+/* increase tab size */
+.site-footer .footer__meta a {
+  padding: var(--space-xs);
+}
+
+.site-footer svg {
+  inline-size: 1.1em;
+  block-size: 1em;
+}
+
+.site-footer .creator {
+  font-size: var(--size-step-min-1);
+  margin-block-start: var(--space-xl);
+  display: grid;
+  place-items: center;
+}
+
+.site-footer .creator a {
+  --gutter: var(--space-xs);
+  --cluster-horizontal-alignment: center;
+  text-decoration: none;
+}
+
+.site-footer .creator a:hover {
+  color: transparent;
+  background-image: var(--gradient-rainbow);
+  background-size: 100%;
+  background-repeat: repeat;
+  background-clip: text;
+}
+
+.site-footer .creator:hover svg {
+  color: var(--color-text);
+}

src/assets/css/global/blocks/site-logo.css

@@ -2,7 +2,5 @@
   --gutter: var(--space-xs);
   padding: var(--space-s) 0;
   font-size: var(--size-step-0);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
   text-decoration: none;
 }

src/assets/css/global/blocks/table.css

@@ -2,6 +2,7 @@ table {
   border: 0;
   inline-size: 100%;
 }
+
 table br {
   display: none;
 }
@@ -34,11 +35,13 @@ td {
   display: block;
   text-align: start;
 }
+
 td::before {
   content: attr(data-label);
   float: start;
   font-weight: var(--font-bold);
 }
+
 td:last-child {
   border-block-end: 0;
 }
@@ -50,17 +53,21 @@ td:last-child {
     padding: 0;
     table-layout: fixed;
   }
+
   table br {
     display: block;
   }
+
   thead {
     position: static;
     text-align: start;
     display: table-header-group;
   }
+
   caption {
     margin: var(--space-xs) 0 var(--space-s);
   }
+
   tr {
     border: 0;
     padding: var(--space-xs);
@@ -75,9 +82,11 @@ td:last-child {
   td {
     border: none;
   }
+
   td::before {
     display: none;
   }
+
   th,
   td {
     padding: var(--space-s);

src/assets/css/global/blocks/theme-switch.css

@@ -14,13 +14,14 @@
 }
 
 .theme-switch .button[aria-pressed='true'] {
-  --_color-primary-contrast: color-mix(
+  --_color-primary-contrast: color-mix(in oklab, var(--color-primary) 85%, var(--color-base-dark));
-    in oklab,
-    var(--color-primary) 85%,
-    var(--color-base-dark)
-  );
   --button-bg: var(--_color-primary-contrast);
   --button-text: var(--color-base-light);
   --button-border: var(--_color-primary-contrast);
   outline-color: var(--_color-primary-contrast);
 }
+
+/* Hide without JS */
+is-land:not(:defined) .theme-switch {
+  display: none;
+}

src/assets/css/global/compositions/cluster.css

@@ -15,7 +15,7 @@ horizontally. Can be any acceptable flexbox aligmnent value.
 Can be any acceptable flexbox alignment value.
 */
 
-.cluster {
+:where(.cluster) {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, var(--space-s-l));

src/assets/css/global/compositions/flow.css

@@ -3,6 +3,6 @@ FLOW UTILITY
 Like the Every Layout stack: https://every-layout.dev/layouts/stack/
 Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
 */
-.flow > * + * {
+:where(.flow) > * + * {
   margin-block-start: var(--flow-space, 1em);
 }

src/assets/css/global/compositions/grid.css

@@ -14,7 +14,7 @@ ideally, as a minimum.
 --grid-placement (auto-fill): Set either auto-fit or auto-fill
 to change how empty grid tracks are handled */
 
-.grid {
+:where(.grid) {
   display: grid;
   grid-template-columns: repeat(
     var(--grid-placement, auto-fill),
@@ -23,12 +23,12 @@ to change how empty grid tracks are handled */
   gap: var(--gutter, var(--space-s-m));
 }
 
-.grid[data-rows='masonry'] {
+:where(.grid)[data-rows='masonry'] {
   grid-template-rows: masonry;
   align-items: start;
 }
 
-.grid[data-layout='50-50'] {
+:where(.grid)[data-layout='50-50'] {
   --grid-placement: auto-fit;
   --grid-min-item-size: clamp(16rem, 50vw, 28rem);
 }

src/assets/css/global/compositions/repel.css

@@ -11,7 +11,7 @@ between each item.
 Can be any acceptable flexbox alignment value.
 */
 
-.repel {
+:where(.repel) {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -19,6 +19,6 @@ Can be any acceptable flexbox alignment value.
   gap: var(--gutter, var(--space-s-l));
 }
 
-.repel[data-nowrap] {
+:where(.repel)[data-nowrap] {
   flex-wrap: nowrap;
 }

src/assets/css/global/compositions/sidebar.css

@@ -19,18 +19,18 @@ EXCEPTIONS
 .sidebar[data-direction='rtl']: flips the sidebar to be on the right
 */
 
-.sidebar {
+:where(.sidebar) {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, var(--space-s-l));
 }
 
-.sidebar:not([data-direction]) > :first-child {
+:where(.sidebar):not([data-direction]) > :first-child {
   flex-basis: var(--sidebar-target-width, 20rem);
   flex-grow: 1;
 }
 
-.sidebar:not([data-direction]) > :last-child {
+:where(.sidebar):not([data-direction]) > :last-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: var(--sidebar-content-min-width, 50%);
@@ -39,12 +39,12 @@ EXCEPTIONS
 /*
 A flipped version where the sidebar is on the right
 */
-.sidebar[data-direction='rtl'] > :last-child {
+:where(.sidebar)[data-direction='rtl'] > :last-child {
   flex-basis: var(--sidebar-target-width, 20rem);
   flex-grow: 1;
 }
 
-.sidebar[data-direction='rtl'] > :first-child {
+:where(.sidebar)[data-direction='rtl'] > :first-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: var(--sidebar-content-min-width, 50%);

src/assets/css/global/fonts.css

@@ -1,89 +0,0 @@
-/* Set up for old browsers. I set the medium Figtree as regular, as I prefer it a little bolder. */
-@supports not (font-variation-settings: normal) {
-  @font-face {
-    font-family: Figtree;
-    font-style: normal;
-    font-display: swap;
-    font-weight: 800;
-    src:
-      local(''),
-      url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2');
-  }
-
-  @font-face {
-    font-family: Figtree;
-    font-style: normal;
-    font-display: swap;
-    font-weight: 700;
-    src:
-      local(''),
-      url('/assets/fonts/figtree/figtree-bold.woff2') format('woff2');
-  }
-
-  @font-face {
-    font-family: Figtree;
-    font-style: normal;
-    font-display: swap;
-    font-weight: 500;
-    src:
-      local(''),
-      url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2');
-  }
-
-  @font-face {
-    font-family: Figtree;
-    font-style: italic;
-    font-display: swap;
-    font-weight: 500;
-    src:
-      local(''),
-      url('/assets/fonts/figtree/figtree-mediumitalic.woff2') format('woff2');
-  }
-}
-
-/* Set up for modern browsers, all weights */
-@supports (font-variation-settings: normal) {
-  @font-face {
-    font-family: 'Figtree';
-    src:
-      url('/assets/fonts/figtree/figtree-variable[wght].woff2')
-        format('woff2 supports variations'),
-      url('/assets/fonts/figtree/figtree-variable[wght].woff2') format('woff2-variations');
-    font-weight: 300 900;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Figtree';
-    src:
-      url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
-        format('woff2 supports variations'),
-      url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
-        format('woff2-variations');
-    font-weight: 300 900;
-    font-style: italic;
-    font-display: swap;
-  }
-}
-
-/* 900 weight is handled as if 700. */
-@font-face {
-  font-family: 'Redhat';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src:
-    local(''),
-    url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'RobotoMono';
-  font-style: normal;
-  font-display: swap;
-  font-weight: normal;
-  src:
-    local(''),
-    url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2');
-}

src/assets/css/global/global.css

@@ -1,15 +1,18 @@
 @import 'tailwindcss/base';
 
-@import 'global/reset.css';
+@import 'base/reset.css';
-@import 'global/fonts.css';
+@import 'base/fonts.css';
 
 @import 'tailwindcss/components';
 
-@import 'global/variables.css';
+@import 'base/variables.css';
-@import 'global/global-styles.css';
+@import 'base/global-styles.css';
 
-@import-glob 'blocks/*.css';
 @import-glob 'compositions/*.css';
+@import-glob 'blocks/*.css';
 @import-glob 'utilities/*.css';
 
+/* debugging */
+/* @import-glob 'tests/*.css'; */
+
 @import 'tailwindcss/utilities';

src/assets/css/global/reset.css

@@ -1,124 +0,0 @@
-/* inspired by: */
-/* Modern reset: 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 */
-
-/* Box sizing rules */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Remove default margin */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-}
-
-/* Prevent zooming when orientation changes on some iOS devices */
-html {
-  text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-}
-
-/* Set core root defaults */
-html:focus-within {
-  scroll-behavior: smooth;
-}
-
-/* Make gutter area stable and present on both edges of the scrollbar */
-html {
-  scrollbar-gutter: stable;
-}
-
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-  min-height: 100dvh;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-}
-
-/* A elements that don't have a class get default styles */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-}
-
-/* Make images easier to work with */
-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;
-}
-
-/* remove default button styles */
-button {
-  all: unset;
-}
-
-/* Inherit fonts for inputs and buttons */
-button,
-input,
-textarea,
-select {
-  font: inherit;
-}
-
-/* Make sure textareas without a rows attribute are not tiny */
-textarea:not([rows]) {
-  min-height: 10em;
-}
-
-/* Adding cursor style to interactive elements */
-button,
-label,
-select,
-summary,
-[role='button'],
-[role='option'] {
-  cursor: pointer;
-}
-
-/* No typographic widows */
-* {
-  text-wrap: pretty;
-}
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-}
-
-/* Scroll margin allowance above anchor links */
-:target {
-  scroll-margin-block-start: 2ex;
-}
-
-/* Scroll margin allowance below focused elements
-  to ensure they are clearly in view */
-:focus {
-  scroll-margin-block-end: 8vh;
-}

src/assets/css/global/tests/debug.css

@@ -0,0 +1,70 @@
+/* https://heydonworks.com/article/testing-html-with-modern-css/ */
+
+/* WIP */
+
+:root {
+  --highlight-outline: 0.25rem solid cornflowerblue;
+  --warning-outline: 0.25rem solid orange;
+  --error-outline: 0.25rem solid red;
+}
+
+/* outline all elements  */
+* * * * * {
+  outline: var(--highlight-outline);
+}
+
+/* highlight empty elements */
+*:empty:not(svg *) {
+  outline: var(--warning-outline);
+  --warning-empty-element: 'The element is empty';
+}
+
+a:not([href]) {
+  outline: var(--error-outline);
+  --error-not-href: 'The link does not have an href. Did you mean to use a <button>?';
+}
+
+a[href^='javascript'] {
+  outline: var(--error-outline);
+  --error-javascript-href: 'The href does not appear to include a location. Did you mean to use a <button>?';
+}
+
+a[disabled] {
+  outline: var(--error-outline);
+  --error-anchor-disabled: 'The disabled property is not valid on anchors (links). Did you mean to use a <button>?';
+}
+
+label:not(:has(:is(input, output, textarea, select))):not([for]) {
+  outline: var(--error-outline);
+  --error-unassociated-label: 'The <label> neither uses the `for` attribute nor wraps an applicable form element';
+}
+
+input:not(form input) {
+  outline: var(--warning-outline);
+  --warning-input-orphan: 'The input is outside a <form> element. Users may benefit from <form> semantics and behaviors.';
+}
+
+figure[aria-label]:not(:has(figcaption)) {
+  outline: var(--warning-outline);
+  --warning-figure-label-not-visible: 'The labeling method used is not visible and only available to assistive software';
+}
+
+figure[aria-label] figcaption {
+  outline: var(--warning-outline);
+  --warning-overridden-figcaption: 'The figure has a figcaption that is overridden by an ARIA label';
+}
+
+ol[class*='breadcrumb']:not(:is(nav[aria-label], nav[aria-labelledby]) ol) {
+  outline: var(--error-outline);
+  --error-undiscoverable-breadcrumbs: 'It looks like you have provided breadcrumb navigation outside a labeled `<nav>` landmark';
+}
+#body
+  :not(:is(header, nav, main, aside, footer)):not(:is(header, nav, main, aside, footer) *):not(.skip-link) {
+  outline: var(--error-outline);
+  --error-content-outside-landmark: 'You have some content that is not inside a landmark (header, nav, main, aside, or footer)';
+}
+
+header nav:has(ul > ul) {
+  outline: var(--warning-outline);
+  --warning-nested-navigation: 'You appear to be using tiered/nested navigation in your header. This can be difficult to traverse. Index pages with tables of content are preferable.';
+}

src/assets/css/global/tests/is-land.css

@@ -0,0 +1,17 @@
+:root {
+  --island-ready: 0.25rem solid ForestGreen;
+  --island-component: 0.25rem solid goldenrod;
+}
+
+is-land[ready] {
+  display: block;
+  background-color: rgba(114, 233, 110, 0.2);
+  outline: var(--island-outline);
+}
+is-land,
+.demo-component {
+  display: block;
+  padding: 0.5em;
+  margin: 0.5em 0;
+  outline: var(--island-component);
+}

src/assets/css/global/utilities/spin.css

@@ -0,0 +1,14 @@
+.spin {
+  animation: spin 30s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}