diff --git a/config/bundles/css.js b/config/bundles/css.js
new file mode 100644
index 0000000..a4ced20
--- /dev/null
+++ b/config/bundles/css.js
@@ -0,0 +1,13 @@
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+
+export default {
+ transforms: [
+ async function (content) {
+ const css = await postcss([postcssImport])
+ .process(content, { from: "src/includes/css/styles.css" })
+ .then((result) => result.css);
+ return css;
+ },
+ ],
+};
diff --git a/config/bundles/index.js b/config/bundles/index.js
new file mode 100644
index 0000000..8367564
--- /dev/null
+++ b/config/bundles/index.js
@@ -0,0 +1,5 @@
+import css from "./css.js";
+
+export default {
+ css,
+};
diff --git a/config/design-tokens/colors.js b/config/design-tokens/colors.js
deleted file mode 100644
index 73e0695..0000000
--- a/config/design-tokens/colors.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
- light: {
- primary: "oklch(0.6 0.1025 212.16)",
- secondary: "oklch(0.61 0.2232 31.48)",
- background: "oklch(0.98 0 0)",
- surface: "oklch(0.96 0.0078 207.9)",
- border: "oklch(0.87 0.045077 207.8465)",
- text: "oklch(0.15 0 0)",
- fadeText: "oklch(0.45 0.0214 207.84)",
- shadow: "oklch(0.39 0.0688 212.35)",
- },
- dark: {
- primary: "oklch(0.57 0.0991 213.4)",
- secondary: "oklch(0.55 0.1982 31.52)",
- background: "oklch(0.2 0 0)",
- surface: "oklch(0.26 0.0106 233.21)",
- border: "oklch(0.27 0.0238 245.26)",
- text: "oklch(0.98 0 0)",
- fadeText: "oklch(0.78 0.018 207.85)",
- shadow: "oklch(0.39 0.0688 212.35)",
- },
-};
diff --git a/config/design-tokens/spacing.js b/config/design-tokens/spacing.js
deleted file mode 100644
index 13f8dbe..0000000
--- a/config/design-tokens/spacing.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
- 0: 0,
- 0.25: 4,
- 0.5: 8,
- 1: 16,
- 1.5: 24,
- 2: 32,
- 3: 48,
- 4: 64,
- 5: 80,
-};
diff --git a/config/filters/index.js b/config/filters/index.js
index c1f2b3b..d8da84b 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -2,7 +2,6 @@ import collection from "./collection.js";
import date from "./date.js";
import feed from "./feed.js";
import general from "./general.js";
-import postcss from "./postcss/index.js";
import tag from "./tag.js";
export default {
@@ -10,6 +9,5 @@ export default {
...date,
...feed,
...general,
- ...postcss,
...tag,
};
diff --git a/config/filters/postcss/index.js b/config/filters/postcss/index.js
deleted file mode 100644
index 92051d3..0000000
--- a/config/filters/postcss/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import postcss from "./postcss.js";
-
-export default {
- ...postcss,
-};
diff --git a/config/filters/postcss/postcss.js b/config/filters/postcss/postcss.js
deleted file mode 100644
index 0fc1a6f..0000000
--- a/config/filters/postcss/postcss.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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 { default as postcssBase } from "postcss";
-import postcssImport from "postcss-import";
-import postcssImportExtGlob from "postcss-import-ext-glob";
-import autoprefixer from "autoprefixer";
-import cssnano from "cssnano";
-
-import colors from "./utils/colors.js";
-import fontFamily from "./utils/font-family.js";
-import fontVariables from "./utils/font-variables.js";
-import spacing from "./utils/spacing.js";
-
-const postcss = async (rawCss) => {
- const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
- return await postcssBase([
- postcssImportExtGlob,
- postcssImport,
- autoprefixer,
- cssnano,
- ])
- .process(css, { from: "src/includes/css/styles.css" })
- .then((result) => result.css);
-};
-
-export default {
- postcss,
-};
diff --git a/config/filters/postcss/utils/colors.js b/config/filters/postcss/utils/colors.js
deleted file mode 100644
index 2383db2..0000000
--- a/config/filters/postcss/utils/colors.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import colorSchemes from "../../../design-tokens/colors.js";
-import { helperClassesToCss } from "./helper-classes.js";
-
-const lightScheme = colorSchemes.light;
-const darkScheme = colorSchemes.dark;
-
-const colorToCss = (key, value) => `--color-${key}: ${value};`;
-
-const colorSchemeToCss = (scheme) =>
- Object.entries(scheme).reduce(
- (css, [key, value]) => css + colorToCss(key, value),
- ``,
- );
-
-const lightCss = colorSchemeToCss(lightScheme);
-const darkCss = colorSchemeToCss(darkScheme);
-
-const colorSchemeToHelperClassesCss = (scheme, helperClasses) => {
- return Object.entries(scheme).reduce((css, [key]) => {
- return css + helperClassesToCss(helperClasses, key, `var(--color-${key})`);
- }, ``);
-};
-
-const helperClasses = [
- ["text", ["color"]],
- ["bg", ["background-color"]],
-];
-
-const helperClassesCss = colorSchemeToHelperClassesCss(
- lightScheme,
- helperClasses,
-);
-
-export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;
diff --git a/config/filters/postcss/utils/font-family.js b/config/filters/postcss/utils/font-family.js
deleted file mode 100644
index 4facde2..0000000
--- a/config/filters/postcss/utils/font-family.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import path from "path";
-
-import fonts from "../../../design-tokens/fonts.js";
-
-const getFontUrl = (src) => path.join("/assets/fonts", src);
-
-const fontsToCss = (fonts) => {
- return Object.entries(fonts).reduce((css, [, fontProperties]) => {
- const family = fontProperties.family;
- const format = fontProperties.format;
- const styles = fontProperties.styles;
-
- return (
- css +
- Object.entries(styles).reduce((css, [variant, fontFamily]) => {
- const url = getFontUrl(fontFamily.path);
- const style = fontFamily.fontStyle;
- const weight = fontFamily.fontWeight;
- const stretch = fontFamily.fontStretch;
- const postScriptName = [family, variant].join("-").replaceAll(" ", "");
-
- return (
- css +
- fontFamilyToCss(
- family,
- style,
- weight,
- stretch,
- url,
- family,
- postScriptName,
- format,
- )
- );
- }, ``)
- );
- }, ``);
-};
-
-const fontFamilyToCss = (
- family,
- style,
- weight,
- stretch,
- url,
- localName,
- postScriptName,
- format,
-) => `@font-face {
- font-family: ${family};
- font-style: ${style};
- font-weight: ${weight};
- font-stretch: ${stretch};
- font-display: swap;
- src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
-}\n`;
-
-export default fontsToCss(fonts);
diff --git a/config/filters/postcss/utils/font-variables.js b/config/filters/postcss/utils/font-variables.js
deleted file mode 100644
index fcb3586..0000000
--- a/config/filters/postcss/utils/font-variables.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Fallbacks from Modern Font Stacks.
- * https://modernfontstacks.com/
- */
-
-import fonts from "../../../design-tokens/fonts.js";
-
-const displayFallbacks = [
- "ui-monospace",
- "Cascadia Code",
- "Source Code Pro",
- "Menlo",
- "Consolas",
- "DejaVu Sans Mono",
- "monospace",
-];
-
-const bodyFallbacks = [
- "ui-monospace",
- "Cascadia Code",
- "Source Code Pro",
- "Menlo",
- "Consolas",
- "DejaVu Sans Mono",
- "monospace",
-];
-
-const monoFallbacks = [
- "ui-monospace",
- "Cascadia Code",
- "Source Code Pro",
- "Menlo",
- "Consolas",
- "DejaVu Sans Mono",
- "monospace",
-];
-
-const fallbacks = {
- display: displayFallbacks,
- body: bodyFallbacks,
- monospace: monoFallbacks,
-};
-
-const fontsToCss = (fonts) => {
- return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => {
- const family = fontProperties.family;
-
- const fontTypeCss = fontFamilyToCss(fontType, family);
-
- return css + fontTypeCss;
- }, ``);
-};
-
-const fontFamilyToCss = (type, value) =>
- `--font-family-${type}: ${value},${fallbacks[type].join(",")};`;
-
-export default `:root{${fontsToCss(fonts)}}`;
diff --git a/config/filters/postcss/utils/helper-classes.js b/config/filters/postcss/utils/helper-classes.js
deleted file mode 100644
index 08871ad..0000000
--- a/config/filters/postcss/utils/helper-classes.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Given an array of CSS properties, output css properties
- * with each property equal to `value`
- */
-export const cssPropertiesToCss = (cssProperties, value) => {
- return cssProperties.reduce((css, cssProp) => {
- return css + `${cssProp}:${value};`;
- }, ``);
-};
-
-/**
- * Given a helperClass (string) and array of cssProperties,
- * will generate a css class named helperClass that has
- * all cssProperties mapped to value.
- */
-export const helperClassToCss = (helperClass, cssProperties, value) => {
- const cssProps = cssPropertiesToCss(cssProperties, value);
- return `.${helperClass}{${cssProps}}`;
-};
-
-/**
- * Given an array of helperClasses that map to cssProperties,
- * output a string of CSS that maps the helperClass (with variant modifier)
- * to the array of css properties with each css property equal to
- * value
- *
- * e.g.
- * helperClasses = [["text", ["color"]]],
- * variant = "primary",
- * value = "#000"
- *
- * Will output the following:
- * .text-primary {
- * color: #000;
- * }
- */
-export const helperClassesToCss = (helperClasses, variant, value) => {
- return helperClasses.reduce((css, [helperClass, cssProperties]) => {
- return (
- css + helperClassToCss(`${helperClass}-${variant}`, cssProperties, value)
- );
- }, ``);
-};
diff --git a/config/filters/postcss/utils/spacing.js b/config/filters/postcss/utils/spacing.js
deleted file mode 100644
index 22ae220..0000000
--- a/config/filters/postcss/utils/spacing.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import spacing from "../../../design-tokens/spacing.js";
-import { helperClassesToCss } from "./helper-classes.js";
-
-const spacingToCss = (variant, value) =>
- `--spacing-${variant.replace(".", "\\.")}: ${value}px;`;
-
-const spacingToHelperClassesCss = (spacingValues, helperClasses) => {
- return Object.entries(spacingValues).reduce((css, [spacingVariant]) => {
- const variant = spacingVariant.replace(".", "\\.");
- return (
- css +
- helperClassesToCss(helperClasses, variant, `var(--spacing-${variant})`)
- );
- }, ``);
-};
-
-const helperClasses = [
- ["m", ["margin"]],
- ["my", ["margin-block-start", "margin-block-end"]],
- ["mx", ["margin-inline-start", "margin-inline-end"]],
- ["ml", ["margin-inline-start"]],
- ["mr", ["margin-inline-start"]],
- ["mt", ["margin-block-start"]],
- ["mb", ["margin-block-end"]],
- ["p", ["padding"]],
- ["py", ["padding-block-start", "padding-block-end"]],
- ["px", ["padding-inline-start", "padding-inline-end"]],
- ["pl", ["padding-inline-start"]],
- ["pr", ["padding-inline-start"]],
- ["pt", ["padding-block-start"]],
- ["pb", ["padding-block-end"]],
- ["w", ["width"]],
- ["h", ["height"]],
- ["size", ["width", "height"]],
- ["radius", ["border-radius"]],
- ["gap", ["gap"]],
- ["row-gap", ["row-gap"]],
- ["column-gap", ["column-gap"]],
- ["flow-space", ["--flow-space"]],
-];
-
-const spacingVariablesCss = Object.entries(spacing).reduce(
- (css, [variant, value]) => css + spacingToCss(variant, value),
- ``,
-);
-
-const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
-
-const css = `:root{${spacingVariablesCss}}${helperCss}`;
-
-export default css;
diff --git a/config/transforms/index.js b/config/transforms/index.js
index 769f3b9..ee66425 100644
--- a/config/transforms/index.js
+++ b/config/transforms/index.js
@@ -1,4 +1,3 @@
import htmlConfigTransform from "./html-config.js";
-import xmlConfigTransform from "./xml-config.js";
-export default { htmlConfigTransform, xmlConfigTransform };
+export default { htmlConfigTransform };
diff --git a/config/transforms/xml-config.js b/config/transforms/xml-config.js
deleted file mode 100644
index e4e6d4e..0000000
--- a/config/transforms/xml-config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import minifyXML from "minify-xml";
-
-export default function (eleventyConfig) {
- eleventyConfig.addTransform("xml-minify", (content, path) => {
- if (path && path.endsWith(".xml")) {
- return minifyXML(content, {
- shortenNamespaces: false,
- });
- }
- return content;
- });
-}
diff --git a/eleventy.config.js b/eleventy.config.js
index 2ff0db7..6c23efc 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,15 +1,13 @@
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import { collectionByTag } from "./config/collections/index.js";
+import bundles from "./config/bundles/index.js";
import filters from "./config/filters/index.js";
import markdown from "./config/plugins/markdown.js";
import shortcodes from "./config/shortcodes/index.js";
import transforms from "./config/transforms/index.js";
export default function (eleventyConfig) {
- // --------------------- Watch Targets -----------------------
- eleventyConfig.addWatchTarget("./src/includes/css");
-
// --------------------- Passthrough File Copy -----------------------
["src/assets/fonts/", "src/assets/images"].forEach((path) =>
eleventyConfig.addPassthroughCopy(path),
@@ -18,6 +16,11 @@ export default function (eleventyConfig) {
// --------------------- Markdown -----------------------
eleventyConfig.setLibrary("md", markdown);
+ // --------------------- Bundles -----------------------
+ Object.keys(bundles).forEach((bundleName) => {
+ eleventyConfig.addBundle(bundleName, bundles[bundleName]);
+ });
+
// --------------------- Collections -----------------------
eleventyConfig.addCollection("postsByTag", (collection) =>
collectionByTag(collection, "post"),
diff --git a/package.json b/package.json
index a3e76e8..dce2e6e 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,9 @@
"markdown-it-footnote": "^4.0.0",
"markdown-it-image-figures": "^2.1.1",
"markdown-it-prism": "^2.3.0",
- "minify-xml": "^4.5.2",
"pluralize": "^8.0.0",
"postcss": "^8.5.3",
"postcss-import": "^16.1.0",
- "postcss-import-ext-glob": "^2.1.1",
"upload-to-bunny": "^1.4.0"
}
}
diff --git a/src/includes/css/global/lilypad.css b/src/includes/css/global/lilypad.css
new file mode 100644
index 0000000..cf282f0
--- /dev/null
+++ b/src/includes/css/global/lilypad.css
@@ -0,0 +1 @@
+@font-face{font-display:swap;font-family:Atikinson Hyperlegible Next;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Next"),local("AtikinsonHyperlegibleNext-Regular"),url(assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2) format("woff2")}@font-face{font-display:swap;font-family:Atikinson Hyperlegible Mono;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Mono"),local("AtikinsonHyperlegibleMono-Regular"),url(assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2) format("woff2")}:root{--font-family-display:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-body:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-monospace:Atikinson Hyperlegible Mono,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--color-primary:oklch(0.6 0.1025 212.16);--color-secondary:oklch(0.61 0.2232 31.48);--color-background:oklch(0.98 0 0);--color-surface:oklch(0.96 0.0078 207.9);--color-border:oklch(0.87 0.045077 207.8465);--color-text:oklch(0.15 0 0);--color-fadeText:oklch(0.45 0.0214 207.84);--color-shadow:oklch(0.39 0.0688 212.35)}.text-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.bg-secondary{background-color:var(--color-secondary)}.text-background{color:var(--color-background)}.bg-background{background-color:var(--color-background)}.text-surface{color:var(--color-surface)}.bg-surface{background-color:var(--color-surface)}.text-border{color:var(--color-border)}.bg-border{background-color:var(--color-border)}.text-text{color:var(--color-text)}.bg-text{background-color:var(--color-text)}.text-fadeText{color:var(--color-fadeText)}.bg-fadeText{background-color:var(--color-fadeText)}.text-shadow{color:var(--color-shadow)}.bg-shadow{background-color:var(--color-shadow)}@media (prefers-color-scheme:dark){:root{--color-primary:oklch(0.57 0.0991 213.4);--color-secondary:oklch(0.55 0.1982 31.52);--color-background:oklch(0.2 0 0);--color-surface:oklch(0.26 0.0106 233.21);--color-border:oklch(0.27 0.0238 245.26);--color-text:oklch(0.98 0 0);--color-fadeText:oklch(0.78 0.018 207.85);--color-shadow:oklch(0.39 0.0688 212.35)}}:root{--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:16px;--spacing-4:24px;--spacing-5:32px;--spacing-6:48px;--spacing-7:64px;--spacing-8:80px}.m-0{margin:var(--spacing-0)}.my-0{margin-block-end:var(--spacing-0);margin-block-start:var(--spacing-0)}.mx-0{margin-inline-end:var(--spacing-0)}.ml-0,.mr-0,.mx-0{margin-inline-start:var(--spacing-0)}.mt-0{margin-block-start:var(--spacing-0)}.mb-0{margin-block-end:var(--spacing-0)}.p-0{padding:var(--spacing-0)}.py-0{padding-block-end:var(--spacing-0);padding-block-start:var(--spacing-0)}.px-0{padding-inline-end:var(--spacing-0)}.pl-0,.pr-0,.px-0{padding-inline-start:var(--spacing-0)}.pt-0{padding-block-start:var(--spacing-0)}.pb-0{padding-block-end:var(--spacing-0)}.w-0{width:var(--spacing-0)}.h-0,.size-0{height:var(--spacing-0)}.size-0{width:var(--spacing-0)}.radius-0{border-radius:var(--spacing-0)}.gap-0{gap:var(--spacing-0)}.row-gap-0{row-gap:var(--spacing-0)}.column-gap-0{column-gap:var(--spacing-0)}.flow-space-0{--flow-space:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.my-1{margin-block-end:var(--spacing-1);margin-block-start:var(--spacing-1)}.mx-1{margin-inline-end:var(--spacing-1)}.ml-1,.mr-1,.mx-1{margin-inline-start:var(--spacing-1)}.mt-1{margin-block-start:var(--spacing-1)}.mb-1{margin-block-end:var(--spacing-1)}.p-1{padding:var(--spacing-1)}.py-1{padding-block-end:var(--spacing-1);padding-block-start:var(--spacing-1)}.px-1{padding-inline-end:var(--spacing-1)}.pl-1,.pr-1,.px-1{padding-inline-start:var(--spacing-1)}.pt-1{padding-block-start:var(--spacing-1)}.pb-1{padding-block-end:var(--spacing-1)}.w-1{width:var(--spacing-1)}.h-1,.size-1{height:var(--spacing-1)}.size-1{width:var(--spacing-1)}.radius-1{border-radius:var(--spacing-1)}.gap-1{gap:var(--spacing-1)}.row-gap-1{row-gap:var(--spacing-1)}.column-gap-1{column-gap:var(--spacing-1)}.flow-space-1{--flow-space:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.my-2{margin-block-end:var(--spacing-2);margin-block-start:var(--spacing-2)}.mx-2{margin-inline-end:var(--spacing-2)}.ml-2,.mr-2,.mx-2{margin-inline-start:var(--spacing-2)}.mt-2{margin-block-start:var(--spacing-2)}.mb-2{margin-block-end:var(--spacing-2)}.p-2{padding:var(--spacing-2)}.py-2{padding-block-end:var(--spacing-2);padding-block-start:var(--spacing-2)}.px-2{padding-inline-end:var(--spacing-2)}.pl-2,.pr-2,.px-2{padding-inline-start:var(--spacing-2)}.pt-2{padding-block-start:var(--spacing-2)}.pb-2{padding-block-end:var(--spacing-2)}.w-2{width:var(--spacing-2)}.h-2,.size-2{height:var(--spacing-2)}.size-2{width:var(--spacing-2)}.radius-2{border-radius:var(--spacing-2)}.gap-2{gap:var(--spacing-2)}.row-gap-2{row-gap:var(--spacing-2)}.column-gap-2{column-gap:var(--spacing-2)}.flow-space-2{--flow-space:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.my-3{margin-block-end:var(--spacing-3);margin-block-start:var(--spacing-3)}.mx-3{margin-inline-end:var(--spacing-3)}.ml-3,.mr-3,.mx-3{margin-inline-start:var(--spacing-3)}.mt-3{margin-block-start:var(--spacing-3)}.mb-3{margin-block-end:var(--spacing-3)}.p-3{padding:var(--spacing-3)}.py-3{padding-block-end:var(--spacing-3);padding-block-start:var(--spacing-3)}.px-3{padding-inline-end:var(--spacing-3)}.pl-3,.pr-3,.px-3{padding-inline-start:var(--spacing-3)}.pt-3{padding-block-start:var(--spacing-3)}.pb-3{padding-block-end:var(--spacing-3)}.w-3{width:var(--spacing-3)}.h-3,.size-3{height:var(--spacing-3)}.size-3{width:var(--spacing-3)}.radius-3{border-radius:var(--spacing-3)}.gap-3{gap:var(--spacing-3)}.row-gap-3{row-gap:var(--spacing-3)}.column-gap-3{column-gap:var(--spacing-3)}.flow-space-3{--flow-space:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.my-4{margin-block-end:var(--spacing-4);margin-block-start:var(--spacing-4)}.mx-4{margin-inline-end:var(--spacing-4)}.ml-4,.mr-4,.mx-4{margin-inline-start:var(--spacing-4)}.mt-4{margin-block-start:var(--spacing-4)}.mb-4{margin-block-end:var(--spacing-4)}.p-4{padding:var(--spacing-4)}.py-4{padding-block-end:var(--spacing-4);padding-block-start:var(--spacing-4)}.px-4{padding-inline-end:var(--spacing-4)}.pl-4,.pr-4,.px-4{padding-inline-start:var(--spacing-4)}.pt-4{padding-block-start:var(--spacing-4)}.pb-4{padding-block-end:var(--spacing-4)}.w-4{width:var(--spacing-4)}.h-4,.size-4{height:var(--spacing-4)}.size-4{width:var(--spacing-4)}.radius-4{border-radius:var(--spacing-4)}.gap-4{gap:var(--spacing-4)}.row-gap-4{row-gap:var(--spacing-4)}.column-gap-4{column-gap:var(--spacing-4)}.flow-space-4{--flow-space:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.my-5{margin-block-end:var(--spacing-5);margin-block-start:var(--spacing-5)}.mx-5{margin-inline-end:var(--spacing-5)}.ml-5,.mr-5,.mx-5{margin-inline-start:var(--spacing-5)}.mt-5{margin-block-start:var(--spacing-5)}.mb-5{margin-block-end:var(--spacing-5)}.p-5{padding:var(--spacing-5)}.py-5{padding-block-end:var(--spacing-5);padding-block-start:var(--spacing-5)}.px-5{padding-inline-end:var(--spacing-5)}.pl-5,.pr-5,.px-5{padding-inline-start:var(--spacing-5)}.pt-5{padding-block-start:var(--spacing-5)}.pb-5{padding-block-end:var(--spacing-5)}.w-5{width:var(--spacing-5)}.h-5,.size-5{height:var(--spacing-5)}.size-5{width:var(--spacing-5)}.radius-5{border-radius:var(--spacing-5)}.gap-5{gap:var(--spacing-5)}.row-gap-5{row-gap:var(--spacing-5)}.column-gap-5{column-gap:var(--spacing-5)}.flow-space-5{--flow-space:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.my-6{margin-block-end:var(--spacing-6);margin-block-start:var(--spacing-6)}.mx-6{margin-inline-end:var(--spacing-6)}.ml-6,.mr-6,.mx-6{margin-inline-start:var(--spacing-6)}.mt-6{margin-block-start:var(--spacing-6)}.mb-6{margin-block-end:var(--spacing-6)}.p-6{padding:var(--spacing-6)}.py-6{padding-block-end:var(--spacing-6);padding-block-start:var(--spacing-6)}.px-6{padding-inline-end:var(--spacing-6)}.pl-6,.pr-6,.px-6{padding-inline-start:var(--spacing-6)}.pt-6{padding-block-start:var(--spacing-6)}.pb-6{padding-block-end:var(--spacing-6)}.w-6{width:var(--spacing-6)}.h-6,.size-6{height:var(--spacing-6)}.size-6{width:var(--spacing-6)}.radius-6{border-radius:var(--spacing-6)}.gap-6{gap:var(--spacing-6)}.row-gap-6{row-gap:var(--spacing-6)}.column-gap-6{column-gap:var(--spacing-6)}.flow-space-6{--flow-space:var(--spacing-6)}.m-7{margin:var(--spacing-7)}.my-7{margin-block-end:var(--spacing-7);margin-block-start:var(--spacing-7)}.mx-7{margin-inline-end:var(--spacing-7)}.ml-7,.mr-7,.mx-7{margin-inline-start:var(--spacing-7)}.mt-7{margin-block-start:var(--spacing-7)}.mb-7{margin-block-end:var(--spacing-7)}.p-7{padding:var(--spacing-7)}.py-7{padding-block-end:var(--spacing-7);padding-block-start:var(--spacing-7)}.px-7{padding-inline-end:var(--spacing-7)}.pl-7,.pr-7,.px-7{padding-inline-start:var(--spacing-7)}.pt-7{padding-block-start:var(--spacing-7)}.pb-7{padding-block-end:var(--spacing-7)}.w-7{width:var(--spacing-7)}.h-7,.size-7{height:var(--spacing-7)}.size-7{width:var(--spacing-7)}.radius-7{border-radius:var(--spacing-7)}.gap-7{gap:var(--spacing-7)}.row-gap-7{row-gap:var(--spacing-7)}.column-gap-7{column-gap:var(--spacing-7)}.flow-space-7{--flow-space:var(--spacing-7)}.m-8{margin:var(--spacing-8)}.my-8{margin-block-end:var(--spacing-8);margin-block-start:var(--spacing-8)}.mx-8{margin-inline-end:var(--spacing-8)}.ml-8,.mr-8,.mx-8{margin-inline-start:var(--spacing-8)}.mt-8{margin-block-start:var(--spacing-8)}.mb-8{margin-block-end:var(--spacing-8)}.p-8{padding:var(--spacing-8)}.py-8{padding-block-end:var(--spacing-8);padding-block-start:var(--spacing-8)}.px-8{padding-inline-end:var(--spacing-8)}.pl-8,.pr-8,.px-8{padding-inline-start:var(--spacing-8)}.pt-8{padding-block-start:var(--spacing-8)}.pb-8{padding-block-end:var(--spacing-8)}.w-8{width:var(--spacing-8)}.h-8,.size-8{height:var(--spacing-8)}.size-8{width:var(--spacing-8)}.radius-8{border-radius:var(--spacing-8)}.gap-8{gap:var(--spacing-8)}.row-gap-8{row-gap:var(--spacing-8)}.column-gap-8{column-gap:var(--spacing-8)}.flow-space-8{--flow-space:var(--spacing-8)}.w-full{width:100%}.h-full{height:100%}.w-fit{width:fit-content}.w-max{width:max-content}.w-min{width:min-content}.flex{display:flex}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.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-1{flex:1}.flow>*+*{margin-block-start:var(--flow-space,1em)}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.visually-hidden{border:0;clip:rect(0 0 0 0);height:0;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
diff --git a/src/includes/css/styles.css b/src/includes/css/styles.css
index 526d45b..182c864 100644
--- a/src/includes/css/styles.css
+++ b/src/includes/css/styles.css
@@ -1,8 +1,22 @@
@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";
+@import "blocks/button.css";
+@import "blocks/card.css";
+@import "blocks/media-display.css";
+@import "blocks/media-grid.css";
+@import "blocks/pill.css";
+@import "blocks/posts.css";
+@import "blocks/prism.css";
+@import "blocks/site-header.css";
+@import "blocks/site-logo.css";
+@import "blocks/stars.css";
+
+@import "compositions/cluster.css";
+@import "compositions/repel.css";
+
+@import "utilities/fonts.css";
+@import "utilities/image.css";
+@import "utilities/table.css";
+@import "utilities/wrapper.css";
diff --git a/src/includes/css/utilities/flex.css b/src/includes/css/utilities/flex.css
deleted file mode 100644
index 8c28f8c..0000000
--- a/src/includes/css/utilities/flex.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.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-1 {
- flex: 1;
-}
diff --git a/src/includes/css/utilities/flow.css b/src/includes/css/utilities/flow.css
deleted file mode 100644
index 23bdc32..0000000
--- a/src/includes/css/utilities/flow.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * 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);
-}
diff --git a/src/includes/css/utilities/fonts.css b/src/includes/css/utilities/fonts.css
index fdc2576..c5c5d4f 100644
--- a/src/includes/css/utilities/fonts.css
+++ b/src/includes/css/utilities/fonts.css
@@ -2,22 +2,6 @@
font-size: 1rem;
}
-.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;
}
@@ -29,7 +13,3 @@
.line-height-l {
line-height: 1.5rem;
}
-
-.line-height-xl {
- line-height: 2rem;
-}
diff --git a/src/includes/css/utilities/list.css b/src/includes/css/utilities/list.css
deleted file mode 100644
index f7845a7..0000000
--- a/src/includes/css/utilities/list.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.list-none {
- list-style-type: none;
-}
-
-.list-disc {
- list-style-type: disc;
-}
-
-.list-decimal {
- list-style-type: decimal;
-}
diff --git a/src/includes/css/utilities/visually-hidden.css b/src/includes/css/utilities/visually-hidden.css
deleted file mode 100644
index 6a63f69..0000000
--- a/src/includes/css/utilities/visually-hidden.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * 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;
-}
diff --git a/src/includes/layouts/base.html b/src/includes/layouts/base.html
index 2f2357f..66e4e61 100644
--- a/src/includes/layouts/base.html
+++ b/src/includes/layouts/base.html
@@ -20,16 +20,17 @@
{% endif %}
- {% set css %}
- {% include "css/styles.css" %}
- {% endset %}
-
-
-
- {% include "partials/header.html" %}
-
- {{ content | safe }}
-
- {% include "partials/footer.html" %}
-
+
+ {% css %}
+ {% include "css/styles.css" %}
+ {% endcss %}
+
+
+
+ {% include "partials/header.html" %}
+
+ {{ content | safe }}
+
+ {% include "partials/footer.html" %}
+