feat: move css to own directory

src/css/blocks/archive.css

@@ -0,0 +1,11 @@
+.archive-divider {
+  border-color: var(--color-surface);
+  border-width: 1px;
+  border-style: dashed;
+  flex: 1;
+}
+
+.archive-date {
+  color: var(--color-fadeText);
+  letter-spacing: 0.05em;
+}

src/css/blocks/catalogue.css

@@ -0,0 +1,13 @@
+.catalogue-type {
+  font-size: 0.8rem;
+  border-radius: 0.5rem;
+}
+
+.catalogue-meta {
+  text-align: center;
+}
+
+.catalogue source,
+.catalogue img {
+  max-width: 50%;
+}

src/css/blocks/categories.css

@@ -0,0 +1,23 @@
+.categories {
+  color: var(--text-color);
+}
+
+.categories li {
+  --text-color: var(--color-fadeText);
+}
+
+.categories > li > a {
+  color: var(--text-color);
+  text-decoration-color: var(--text-color);
+}
+
+.categories li:has(a:hover) {
+  --text-color: var(--color-primary);
+}
+
+.categories > li > a::before {
+  content: "#";
+  color: var(--text-color);
+  user-select: none;
+  transition: color var(--transition-duration);
+}

src/css/blocks/date.css

@@ -0,0 +1,7 @@
+.date {
+  color: var(--color-fadeText);
+}
+
+.date svg {
+  color: var(--color-shadow);
+}

src/css/blocks/pill.css

@@ -0,0 +1,27 @@
+.pill {
+  background-color: var(--color-surface);
+  border-radius: 1rem;
+  transition: transform var(--transition-duration);
+}
+
+.pill:hover {
+  background-color: var(--color-text);
+  color: var(--color-primary);
+  transform: translateY(-2px);
+}
+
+.pill:active {
+  transform: translateY(2px);
+}
+
+a.pill {
+  text-decoration: none;
+}
+
+.pill-count {
+  color: var(--color-fadeText);
+}
+
+.pill:hover .pill-count {
+  color: var(--color-border);
+}

src/css/blocks/prism.css

@@ -0,0 +1,68 @@
+/* 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 {
+  color: #73daca;
+}
+
+.token.class-name {
+  color: #ff757f;
+}
+
+.token.plain-text {
+  color: #c0caf5;
+}

src/css/blocks/site-footer.css

@@ -0,0 +1,23 @@
+.footer {
+  background-color: var(--color-surface);
+}
+
+.footer-grid {
+  display: grid;
+}
+
+.footer-socials {
+  grid-column: 1 / -1;
+}
+
+@media (min-width: 32rem) {
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .footer-pages ul {
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: flex-end;
+  }
+}

src/css/blocks/site-logo.css

@@ -0,0 +1,40 @@
+.site-logo {
+  gap: 0.5rem;
+}
+
+.site-logo .wordmark {
+  text-decoration: none;
+}
+
+.site-logo .wordmark > span {
+  text-shadow:
+    -1px 1px 0 var(--shadow-color),
+    0 1px 0 var(--shadow-color),
+    -1px -1px 0 var(--shadow-color),
+    1px -1px 0 var(--shadow-color),
+    1px 1px 0 var(--shadow-color),
+    -1px 2px 0 var(--shadow-color),
+    0px 2px 0 var(--shadow-color),
+    1px 2px 0 var(--shadow-color),
+    -1px 3px 0 var(--shadow-color),
+    0px 3px 0 var(--shadow-color),
+    1px 3px 0 var(--shadow-color);
+  color: var(--color-white);
+  font-family: var(--font-family-display);
+  font-size: 1.5rem;
+  letter-spacing: -0.05em;
+  transition: transform var(--transition-duration);
+}
+
+.site-logo .wordmark > span:hover {
+  transform: translateY(-2px);
+}
+
+.site-logo .wordmark > :nth-child(1) {
+  --shadow-color: var(--color-shadow);
+  z-index: 1;
+}
+
+.site-logo .wordmark > :nth-child(2) {
+  --shadow-color: var(--color-primary);
+}

src/css/blocks/site-nav.css

@@ -0,0 +1,19 @@
+.navbar {
+  backdrop-filter: blur(3px);
+  background-color: color-mix(
+    in srgb,
+    var(--color-background) 60%,
+    transparent
+  );
+  background-image: linear-gradient(var(--color-background) 20%, transparent);
+  container: navbar / inline-size;
+  padding-block: 1.5rem;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.navbar .links {
+  list-style-type: none;
+  gap: 1rem;
+}

src/css/compositions/flex.css

@@ -0,0 +1,32 @@
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.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/css/compositions/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/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/css/global/global-styles.css

@@ -0,0 +1,169 @@
+/*
+  Global styles
+
+  Low-specificity, global styles that apply to the whole
+  project: https://cube.fyi/css.html
+*/
+html {
+  scrollbar-color: var(--color-primary) var(--color-indiglo-800);
+}
+
+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-inline: 1rem;
+  background-color: var(--color-surface);
+}
+
+blockquote > * + * {
+  margin-block-start: 1rem;
+  margin-inline-start: 1rem;
+}
+
+:focus-visible {
+  outline: 3px solid;
+  outline-color: var(--color-primary);
+  outline-offset: 0.3ch;
+}
+
+strong {
+  font-weight: 650;
+}
+
+abbr {
+  text-decoration-color: var(--color-primary);
+}
+
+img[width][height] {
+  height: auto;
+}
+
+hr {
+  border-style: solid;
+  color: var(--color-surface);
+}
+
+:not(pre) > code {
+  background-color: var(--color-surface);
+  color: var(--color-primary);
+  border-color: var(--color-border);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.5em;
+  padding-block: 0.15em;
+  padding-inline: 0.25em;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+figure {
+  margin-inline: 0;
+}
+
+figure figcaption {
+  color: var(--color-fadeText);
+  font-size: 0.8rem;
+  line-height: 1.125rem;
+  text-align: center;
+}
+
+picture source,
+picture img {
+  border-radius: 1rem;
+}
+
+@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/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/css/global/variables.css

@@ -0,0 +1,8 @@
+/* Global variables */
+:root {
+  --transition-duration: 250ms;
+  --transition-timing: ease;
+
+  --color-white: white;
+  --color-black: black;
+}

src/css/styles.11ty.js

@@ -0,0 +1,38 @@
+/*
+ * Implementation sourced from eleventyone starter kit
+ * https://github.com/philhawksworth/eleventyone
+ * ---
+ * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
+ */
+
+const fs = require("fs");
+const postcss = require("postcss");
+const postcssImport = require("postcss-import");
+const postcssImportExtGlob = require("postcss-import-ext-glob");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+const path = require("path").posix;
+
+module.exports = class {
+  async data() {
+    const rawFilepath = path.join(__dirname, "./global.css");
+    const rawCss = fs.readFileSync(rawFilepath);
+
+    return {
+      permalink: `css/styles.css`,
+      rawFilepath,
+      rawCss,
+    };
+  }
+
+  async render({ rawCss, rawFilepath }) {
+    return await postcss([
+      postcssImportExtGlob,
+      postcssImport,
+      autoprefixer,
+      cssnano,
+    ])
+      .process(rawCss, { from: rawFilepath })
+      .then((result) => result.css);
+  }
+};

src/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/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/css/utilities/wrapper.css

@@ -0,0 +1,15 @@
+/**
+ * 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 {
+  width: 90vw;
+  width: clamp(16rem, 90vw, 65ch);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  position: relative;
+}