feat: move all css to includes dir

src/includes/css/blocks/button.css

@@ -0,0 +1,102 @@
+.button {
+  align-items: center;
+  color: var(--color-text);
+  display: inline-flex;
+  gap: var(--spacing-0\.5);
+  padding: var(--spacing-0\.5) var(--spacing-1);
+  position: relative;
+  text-decoration: none;
+  transition: transform 0.3s var(--transition-bounce);
+  z-index: 1;
+
+  &::before,
+  &::after {
+    border-radius: var(--spacing-0\.5);
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition:
+      opacity 0.1s ease,
+      transform 0.3s var(--transition-bounce);
+    z-index: -1;
+  }
+
+  &::before {
+    background-color: var(--color-surface);
+  }
+
+  &::after {
+    background-color: var(--color-text);
+    opacity: 0;
+  }
+
+  svg {
+    color: var(--color-fadeText);
+    transform: scale(1);
+    transition: transform 0.3s var(--transition-bounce);
+  }
+}
+
+@media (hover: hover) {
+  .button:not(:active):hover {
+    &::before,
+    &::after {
+      transform: scale(1.05);
+    }
+
+    &::after {
+      opacity: 1;
+    }
+
+    svg {
+      color: var(--color-shadow);
+      transform: rotateZ(10deg) scale(1.25);
+    }
+  }
+}
+
+.button:active {
+  transform: scale(0.95);
+}
+
+.button--alt {
+  color: var(--color-primary);
+
+  &::before {
+    background-color: var(--color-white);
+  }
+
+  &::after {
+    background-color: color-mix(
+      in srgb,
+      var(--color-white) 90%,
+      var(--color-primary)
+    );
+  }
+
+  svg {
+    color: inherit;
+  }
+}
+
+@media (hover: hover) {
+  .button--alt:hover {
+    color: var(--color-shadow);
+
+    svg {
+      color: inherit;
+    }
+  }
+}
+
+.button__count {
+  color: var(--color-fadeText);
+}
+
+@media (hover: hover) {
+  .button:hover {
+    .button__count {
+      color: var(--color-border);
+    }
+  }
+}

src/includes/css/blocks/card.css

@@ -0,0 +1,9 @@
+.card {
+  border: 1px solid var(--color-shadow);
+  border-radius: var(--spacing-0\.5);
+  padding: var(--spacing-1);
+}
+
+.card--secondary {
+  border-color: var(--color-secondary);
+}

src/includes/css/blocks/catalogue.css

@@ -0,0 +1,16 @@
+.catalogue-list-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: var(--spacing-1);
+}
+
+.catalogue-header h2 {
+  --flow-space: var(--spacing-0\.5);
+  transform: var(--text-skew);
+  color: var(--color-fadeText);
+}
+
+.catalogue source,
+.catalogue img {
+  max-width: 300px;
+}

src/includes/css/blocks/image-placeholder.css

@@ -0,0 +1,13 @@
+.image-placeholder {
+  background-color: var(--color-surface);
+  border-radius: var(--spacing-1);
+  width: 100%;
+  height: 100%;
+  font-size: 0.8em;
+  line-height: 1.125em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-1);
+  text-align: center;
+}

src/includes/css/blocks/media-display.css

@@ -0,0 +1,38 @@
+.media-image {
+  --aspect-ratio: 0.8;
+
+  border: 1px solid var(--color-shadow);
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
+
+  source,
+  img {
+    aspect-ratio: var(--aspect-ratio);
+    height: auto;
+    object-fit: cover;
+  }
+}
+
+.media-image--tall {
+  --aspect-ratio: 0.67;
+}
+
+.media-meta-grid {
+  display: grid;
+  grid-template-columns: 225px 1fr;
+}
+
+.meta-grid--full {
+  grid-column: 1/3;
+}
+
+.media-meta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@container (max-width: 36rem) {
+  .media-meta-grid {
+    grid-template-columns: 1fr;
+  }
+}

src/includes/css/blocks/media-grid.css

@@ -0,0 +1,100 @@
+.media-grid {
+  --column-count: 5;
+  --aspect-ratio: 0.67;
+
+  display: grid;
+  grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+
+  li {
+    border: 1px solid var(--color-shadow);
+    overflow: hidden;
+    position: relative;
+
+    a {
+      color: var(--color-white);
+
+      picture {
+        height: 100%;
+
+        img {
+          aspect-ratio: var(--aspect-ratio);
+          border-radius: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: transform 0.3s ease;
+        }
+      }
+
+      .text-only {
+        aspect-ratio: var(--aspect-ratio);
+        overflow: hidden;
+      }
+    }
+  }
+
+  .meta {
+    background: linear-gradient(transparent, var(--color-shadow) 90%);
+    bottom: 0;
+    height: 100%;
+    position: absolute;
+    transition: opacity 0.3s ease;
+    width: 100%;
+
+    .meta-text {
+      text-shadow: 1px 1px 2px var(--color-black);
+      transition: transform 0.3s var(--transition-bounce);
+    }
+  }
+}
+
+.media-grid--square {
+  --aspect-ratio: 1;
+}
+
+@media (hover: hover) {
+  .media-grid {
+    li {
+      a {
+        .meta {
+          opacity: 0;
+
+          .meta-text {
+            transition-delay: 0.05s;
+            transform: translateY(var(--spacing-1));
+          }
+        }
+      }
+
+      a:hover {
+        img {
+          transform: scale(1.05);
+        }
+
+        .meta {
+          opacity: 1;
+
+          .meta-text {
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+.media-grid.square {
+  --aspect-ratio: 1;
+}
+
+@container (max-width: 32rem) {
+  .media-grid {
+    --column-count: 3;
+  }
+}
+
+@container (max-width: 24rem) {
+  .media-grid {
+    --column-count: 2;
+  }
+}

src/includes/css/blocks/now.css

@@ -0,0 +1,18 @@
+/*
+ * From Every Layout
+ * GRID
+ * https://every-layout.dev/layouts/grid/
+ */
+
+.media-grid {
+  display: grid;
+  grid-gap: var(--spacing-0\.5);
+}
+
+.media-grid.square {
+  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
+}
+
+.media-grid.poster {
+  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
+}

src/includes/css/blocks/pill.css

@@ -0,0 +1,13 @@
+.pill {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--color-surface);
+  color: var(--color-fadeText);
+  font-size: 0.8rem;
+  font-family: var(--font-family-body);
+  font-weight: var(--font-weight-body-regular);
+  line-height: 0.8rem;
+  padding-inline: var(--spacing-0\.5);
+  padding-block: var(--spacing-0\.25);
+  border-radius: var(--spacing-0\.5);
+}

src/includes/css/blocks/posts.css

@@ -0,0 +1,4 @@
+.posts-list-item {
+  display: grid;
+  grid-template-columns: auto auto;
+}

src/includes/css/blocks/prism.css

@@ -0,0 +1,70 @@
+/* 
+ * Adapted from the Tokyo Night theme on GitHub
+ * https://github.com/folke/tokyonight.nvim/blob/main/extras/prism/tokyonight_night.js
+ */
+
+pre:has(code) {
+  background-color: #1a1b26;
+  border-radius: 0.5em;
+  padding: 1em;
+  color: #c0caf5;
+}
+
+.token.prolog,
+.token.builtin {
+  color: #f7768e;
+}
+
+.token.function {
+  color: #7aa2f7;
+}
+
+.token.symbol {
+  color: #2ac3de;
+}
+
+.token.punctuation {
+  color: #bb9af7;
+}
+
+.token.string,
+.token.char,
+.token.tag,
+.token.selector {
+  color: #9ece6a;
+}
+
+.token.keyword {
+  color: #9d7cd8;
+}
+
+.token.operator {
+  color: #89ddff;
+}
+
+.token.constant,
+.token.boolean {
+  color: #ff9e64;
+}
+
+.token.variable {
+  color: #c0caf5;
+}
+
+.token.comment {
+  color: #565f89;
+  font-style: italic;
+}
+
+.token.attr-name,
+.token.property {
+  color: #73daca;
+}
+
+.token.class-name {
+  color: #ff757f;
+}
+
+.token.plain-text {
+  color: #c0caf5;
+}

src/includes/css/blocks/site-header.css

@@ -0,0 +1,18 @@
+.navbar {
+  background-color: var(--color-primary);
+  position: relative;
+}
+
+.navbar::after {
+  content: "";
+  display: block;
+  mask-image: var(--triangles);
+  background-color: var(--color-primary);
+  mask-size: 1.5rem auto;
+  mask-repeat: repeat-x;
+  height: 24px;
+  transform: translateY(16px);
+  position: absolute;
+  left: 0;
+  right: 0;
+}

src/includes/css/blocks/site-logo.css

@@ -0,0 +1,48 @@
+.site-logo .wordmark {
+  text-decoration: none;
+}
+
+.site-logo .logo img {
+  user-select: none;
+  filter: drop-shadow(0 1px 0 var(--color-white))
+    drop-shadow(1px 0 0 var(--color-white))
+    drop-shadow(-1px 0 0 var(--color-white))
+    drop-shadow(0 -1px 0 var(--color-white))
+    drop-shadow(
+      0 0 6px color-mix(in srgb, var(--color-primary) 80%, var(--color-white))
+    );
+  transition: transform 0.3s var(--transition-bounce);
+}
+
+.site-logo .wordmark > span {
+  --shadow-color: var(--color-shadow);
+  color: var(--color-white);
+  font-family: var(--font-family-display);
+  font-size: 1.5rem;
+  letter-spacing: -0.05em;
+  position: relative;
+  text-shadow:
+    -1px -1px 0 var(--shadow-color),
+    0px -1px 0 var(--shadow-color),
+    1px -1px 0 var(--shadow-color),
+    1px 0px 0 var(--shadow-color),
+    1px 1px 0 var(--shadow-color),
+    0px 1px 0 var(--shadow-color),
+    -1px 1px 0 var(--shadow-color),
+    -1px 0px 0 var(--shadow-color);
+  filter: url(#3d_text);
+  transition: transform 0.3s var(--transition-bounce);
+}
+
+.site-logo .wordmark > span:hover {
+  transform: scale(1.15) translateY(-4px);
+  z-index: 2;
+}
+
+.site-logo .wordmark > span:nth-child(2) {
+  z-index: 1;
+}
+
+.site-logo .wordmark > span:nth-child(3) {
+  color: color-mix(in srgb, var(--color-white) 90%, var(--color-primary));
+}

src/includes/css/blocks/stars.css

@@ -0,0 +1,22 @@
+.stars li {
+  line-height: 16px; /* Size of icons */
+  filter: drop-shadow(-1px 1px 0px var(--color-surface));
+  transition: margin ease-in-out var(--transition-duration);
+  z-index: 1;
+}
+
+.star-filled {
+  color: var(--color-primary);
+}
+
+.star-empty {
+  color: var(--color-fadeText);
+}
+
+.stars li:not(:first-child) {
+  margin-inline-start: -6px;
+}
+
+.stars:hover li {
+  margin-inline-start: 0;
+}

src/includes/css/compositions/cluster.css

@@ -0,0 +1,15 @@
+/*
+CLUSTER
+More info: https://every-layout.dev/layouts/cluster/
+A layout that lets you distribute items with consitent
+spacing, regardless of their size
+*/
+
+.cluster {
+  --gap: var(--spacing-1);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, --spacing-1);
+  justify-content: flex-start;
+  align-items: center;
+}

src/includes/css/compositions/repel.css

@@ -0,0 +1,16 @@
+/*
+REPEL
+A little layout that 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: center;
+  gap: var(--spacing-0\.5);
+}
+
+.repel[data-nowrap] {
+  flex-wrap: nowrap;
+}

src/includes/css/compositions/switcher.css

@@ -0,0 +1,21 @@
+/*
+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.
+*/
+
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((32rem - 100%) * 999);
+}
+
+.switcher > :nth-last-child(n + 3),
+.switcher > :nth-last-child(n + 3) ~ * {
+  flex-basis: 100%;
+}

src/includes/css/global.css

@@ -0,0 +1,8 @@
+@import "global/reset.css";
+@import "global/variables.css";
+
+@import "global/global-styles.css";
+
+@import-glob "blocks/*.css";
+@import-glob "compositions/*.css";
+@import-glob "utilities/*.css";

src/includes/css/global/global-styles.css

@@ -0,0 +1,267 @@
+/*
+  Global styles
+
+  Low-specificity, global styles that apply to the whole
+  project: https://cube.fyi/css.html
+*/
+
+@view-transition {
+  navigation: auto;
+}
+
+html {
+  scrollbar-color: var(--color-primary) var(--color-surface);
+}
+
+body {
+  accent-color: var(--color-primary);
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-family-body);
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-body-regular);
+  letter-spacing: -0.03rem;
+  line-height: 2rem;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-display);
+}
+
+h1 {
+  font-size: 3rem;
+  font-weight: var(--font-weight-display-extrabold);
+  letter-spacing: -0.05rem;
+  line-height: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 1.5rem;
+}
+
+h4 {
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 1.125rem;
+  text-transform: uppercase;
+}
+
+a {
+  color: currentColor;
+  text-decoration-color: var(--color-primary);
+  text-decoration-thickness: 2px;
+  transition:
+    color var(--transition-duration),
+    text-decoration-color var(--transition-duration);
+}
+
+a:visited {
+  text-decoration-color: var(--color-shadow);
+}
+
+a:hover,
+a:active,
+a:focus-visible {
+  color: var(--color-primary);
+  text-decoration-color: var(--color-primary);
+}
+
+ul li::marker {
+  color: var(--color-primary);
+}
+
+ol li::marker {
+  color: var(--color-fadeText);
+}
+
+blockquote {
+  border-inline-start: 2px solid var(--color-primary);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding: var(--spacing-1);
+  background-color: var(--color-surface);
+  border-radius: var(--spacing-0\.5);
+}
+
+blockquote > * + * {
+  margin-top: 1em;
+}
+
+:focus-visible {
+  outline: 3px solid;
+  outline-color: var(--color-text);
+  outline-offset: 0.3ch;
+}
+
+strong {
+  font-weight: 650;
+}
+
+abbr {
+  text-decoration-color: var(--color-primary);
+}
+
+hr {
+  border-style: solid;
+  color: var(--color-surface);
+}
+
+code {
+  font-family: var(--font-family-monospace);
+}
+
+:not(pre) > code {
+  background-color: var(--color-surface);
+  border-radius: var(--spacing-0\.25);
+  padding-block: 0.15em;
+  padding-inline: 0.25em;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+figure,
+picture {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-inline: 0;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
+}
+
+figure figcaption {
+  color: var(--color-fadeText);
+  font-size: 0.8rem;
+  line-height: 1.125rem;
+  text-align: center;
+  margin-block-start: var(--flow-space, 1em);
+}
+
+picture source,
+picture img {
+  height: auto;
+}
+
+aside {
+  background-color: var(--color-surface);
+  padding: var(--spacing-1);
+  border-radius: var(--spacing-0\.5);
+  margin-inline: calc(-1 * var(--spacing-1));
+}
+
+mark {
+  background-color: var(--color-border);
+  color: var(--color-text);
+  padding-block: var(--spacing-0\.25);
+}
+
+[href="#main"] {
+  background-color: var(--color-background);
+  margin-inline: var(--spacing-1);
+}
+
+[href="#main"]:not(:focus) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+table {
+  border: 1px solid var(--color-border);
+  border-radius: var(--spacing-0\.5);
+  border-spacing: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+table thead {
+  background-color: var(--color-surface);
+}
+
+table thead th {
+  text-align: left;
+}
+
+table th,
+table td {
+  padding-block: var(--spacing-0\.5);
+  padding-inline: var(--spacing-1);
+}
+
+table tbody tr:first-child td {
+  border-top: 1px solid var(--color-border);
+}
+
+table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* 
+ * Snippet from:
+ * https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Cdetails%3E
+ */
+details {
+  @media (prefers-reduced-motion: no-preference) {
+    interpolate-size: allow-keywords;
+  }
+
+  &::details-content {
+    opacity: 0;
+    block-size: 0;
+    overflow-y: clip;
+    transition:
+      content-visibility 0.3s allow-discrete,
+      opacity 0.3s,
+      block-size 0.3s;
+  }
+
+  &[open]::details-content {
+    opacity: 1;
+    block-size: auto;
+  }
+
+  ul,
+  ol {
+    margin-block: 0;
+  }
+}
+
+@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/includes/css/global/reset.css

@@ -0,0 +1,90 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-start: 0;
+  margin-block-end: 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;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

src/includes/css/global/variables.css

@@ -0,0 +1,31 @@
+/* Global variables */
+:root {
+  --transition-duration: 250ms;
+  --transition-timing: ease;
+
+  --color-white: white;
+  --color-black: black;
+
+  --text-skew: skew(0deg, -1deg);
+
+  --triangles: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0" d="M0,0 40,40 80,0z" /></svg>');
+
+  --transition-bounce: linear(
+    0,
+    0.544 5.5%,
+    0.947 11.5%,
+    1.213 18.1%,
+    1.298 21.7%,
+    1.352 25.5%,
+    1.372 28.2%,
+    1.379 31.1%,
+    1.374 34.2%,
+    1.357 37.6%,
+    1.307 43.7%,
+    1.121 61.8%,
+    1.074 67.8%,
+    1.04 73.7%,
+    1.007 84.7%,
+    1
+  );
+}

src/includes/css/styles.11ty.js

@@ -0,0 +1,49 @@
+/*
+ * Implementation sourced from eleventyone starter kit
+ * https://github.com/philhawksworth/eleventyone
+ * ---
+ * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
+ */
+
+import fs from "fs";
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+import postcssImportExtGlob from "postcss-import-ext-glob";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import { posix as path } from "path";
+import { fileURLToPath } from "url";
+
+import colors from "../../css-utils/colors.js";
+import fontFamily from "../../css-utils/font-family.js";
+import fontVariables from "../../css-utils/font-variables.js";
+import spacing from "../../css-utils/spacing.js";
+
+export default class {
+  async data() {
+    const dirname = path.dirname(fileURLToPath(import.meta.url));
+    const rawFilepath = path.join(dirname, "./global.css");
+    const rawCss = fs.readFileSync(rawFilepath);
+
+    const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
+
+    return {
+      permalink: `css/styles.css`,
+      excludeFromSitemap: true,
+      eleventyExcludeFromCollections: true,
+      rawFilepath,
+      rawCss: css,
+    };
+  }
+
+  async render({ rawCss, rawFilepath }) {
+    return await postcss([
+      postcssImportExtGlob,
+      postcssImport,
+      autoprefixer,
+      cssnano,
+    ])
+      .process(rawCss, { from: rawFilepath })
+      .then((result) => result.css);
+  }
+}

src/includes/css/utilities/flex.css

@@ -0,0 +1,36 @@
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-1 {
+  flex: 1;
+}

src/includes/css/utilities/flow.css

@@ -0,0 +1,8 @@
+/*
+ * 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 > * + * {
+  margin-block-start: var(--flow-space, 1em);
+}

src/includes/css/utilities/fonts.css

@@ -0,0 +1,39 @@
+.font-size-s {
+  font-size: 0.8rem;
+}
+
+.font-size-m {
+  font-size: 1.125rem;
+}
+
+.font-size-l {
+  font-size: 1.5rem;
+}
+
+.font-size-xl {
+  font-size: 2rem;
+}
+
+.font-size-2xl {
+  font-size: 3rem;
+}
+
+.line-height-s {
+  line-height: 0.8rem;
+}
+
+.line-height-m {
+  line-height: 1.125rem;
+}
+
+.line-height-l {
+  line-height: 1.5rem;
+}
+
+.line-height-xl {
+  line-height: 2rem;
+}
+
+.text-skew {
+  transform: var(--text-skew);
+}

src/includes/css/utilities/image.css

@@ -0,0 +1,11 @@
+.image-shrink {
+  max-width: 50%;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
+}
+
+.image-tiny {
+  max-width: 25%;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
+}

src/includes/css/utilities/list.css

@@ -0,0 +1,11 @@
+.list-none {
+  list-style-type: none;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}

src/includes/css/utilities/table.css

@@ -0,0 +1,3 @@
+.table-wrapper {
+  overflow-x: auto;
+}

src/includes/css/utilities/visually-hidden.css

@@ -0,0 +1,15 @@
+/*
+ * VISUALLY HIDDEN UTILITY
+ * Info: https://piccalil.li/quick-tip/visually-hidden/
+ */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}

src/includes/css/utilities/wrapper.css

@@ -0,0 +1,16 @@
+/**
+ * WRAPPER
+ * Sets a max width, adds a consistent gutter and horizontally
+ * centers the contents
+ * https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
+ */
+.wrapper {
+  container-type: inline-size;
+  width: 90vw;
+  width: clamp(16rem, 90vw, 65ch);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  position: relative;
+}