`
+ );
+};
diff --git a/src/_config/utils/clamp-generator.js b/src/_config/utils/clamp-generator.js
new file mode 100644
index 0000000..0617e6b
--- /dev/null
+++ b/src/_config/utils/clamp-generator.js
@@ -0,0 +1,43 @@
+/**
+ * Credits:
+ * - © Andy Bell - https://buildexcellentwebsit.es/
+ */
+
+/**
+ * Takes an array of tokens and sends back and array of name
+ * and clamp pairs for CSS fluid values.
+ *
+ * @param {array} tokens array of {name: string, min: number, max: number}
+ * @returns {array} {name: string, value: string}
+ */
+
+import viewports from '../../_data/designTokens/viewports.json';
+
+export const clampGenerator = tokens => {
+ const rootSize = 16;
+
+ return tokens.map(({name, min, max}) => {
+ if (min === max) {
+ return `${min / rootSize}rem`;
+ }
+
+ // Convert the min and max sizes to rems
+ const minSize = min / rootSize;
+ const maxSize = max / rootSize;
+
+ // Convert the pixel viewport sizes into rems
+ const minViewport = viewports.min / rootSize;
+ const maxViewport = viewports.max / rootSize;
+
+ // Slope and intersection allow us to have a fluid value but also keep that sensible
+ const slope = (maxSize - minSize) / (maxViewport - minViewport);
+ const intersection = -1 * minViewport * slope + minSize;
+
+ return {
+ name,
+ value: `clamp(${minSize}rem, ${intersection.toFixed(2)}rem + ${(slope * 100).toFixed(
+ 2
+ )}vw, ${maxSize}rem)`
+ };
+ });
+};
diff --git a/src/_config/utils/tokens-to-tailwind.js b/src/_config/utils/tokens-to-tailwind.js
new file mode 100644
index 0000000..2944744
--- /dev/null
+++ b/src/_config/utils/tokens-to-tailwind.js
@@ -0,0 +1,24 @@
+/**
+ * Credits:
+ * - © Andy Bell - https://buildexcellentwebsit.es/
+ */
+
+/**
+ * Converts human readable tokens into tailwind config friendly ones
+ *
+ * @param {array} tokens {name: string, value: any}
+ * @return {object} {key, value}
+ */
+
+import slugify from 'slugify';
+
+export const tokensToTailwind = tokens => {
+ const nameSlug = text => slugify(text, {lower: true});
+ let response = {};
+
+ tokens.forEach(({name, value}) => {
+ response[nameSlug(name)] = value;
+ });
+
+ return response;
+};
diff --git a/src/_data/designTokens/borderRadius.json b/src/_data/designTokens/borderRadius.json
new file mode 100644
index 0000000..192feb4
--- /dev/null
+++ b/src/_data/designTokens/borderRadius.json
@@ -0,0 +1,15 @@
+{
+ "title": "Border Radius",
+ "description": "",
+ "meta": {},
+ "items": [
+ {
+ "name": "small",
+ "value": "1.5px"
+ },
+ {
+ "name": "Medium",
+ "value": "3px"
+ }
+ ]
+}
diff --git a/src/_data/designTokens/colors.json b/src/_data/designTokens/colors.json
new file mode 100644
index 0000000..e45ed9b
--- /dev/null
+++ b/src/_data/designTokens/colors.json
@@ -0,0 +1,102 @@
+{
+ "title": "Colors",
+ "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print. neutral and colors are converted to color scales, fixedColors are kept as they are",
+ "items": [
+ {
+ "name": "Dove Gray 50",
+ "value": "#f5f5f6"
+ },
+ {
+ "name": "Dove Gray 100",
+ "value": "#ddddde"
+ },
+ {
+ "name": "Dove Gray 200",
+ "value": "#bdbdbe"
+ },
+ {
+ "name": "Dove Gray 300",
+ "value": "#9e9e9f"
+ },
+ {
+ "name": "Dove Gray 400",
+ "value": "#807f81"
+ },
+ {
+ "name": "Dove Gray 500",
+ "value": "#636264"
+ },
+ {
+ "name": "Dove Gray 600",
+ "value": "#555456"
+ },
+ {
+ "name": "Dove Gray 700",
+ "value": "#3f3f40"
+ },
+ {
+ "name": "Dove Gray 800",
+ "value": "#353536"
+ },
+ {
+ "name": "Dove Gray 900",
+ "value": "#262627"
+ },
+ {
+ "name": "Dove Gray 950",
+ "value": "#1f1f1f"
+ },
+ {
+ "name": "Royal Blue 50",
+ "value": "#e7f1ff"
+ },
+ {
+ "name": "Royal Blue 100",
+ "value": "#deeaff"
+ },
+ {
+ "name": "Royal Blue 200",
+ "value": "#b9ceff"
+ },
+ {
+ "name": "Royal Blue 300",
+ "value": "#9fb9ff"
+ },
+ {
+ "name": "Royal Blue 400",
+ "value": "#7494ff"
+ },
+ {
+ "name": "Royal Blue 500",
+ "value": "#5977fc"
+ },
+ {
+ "name": "Royal Blue 600",
+ "value": "#3a50d2"
+ },
+ {
+ "name": "Royal Blue 700",
+ "value": "#2936b7"
+ },
+ {
+ "name": "Royal Blue 800",
+ "value": "#1f2a94"
+ },
+ {
+ "name": "Royal Blue 900",
+ "value": "#0d0c64"
+ },
+ {
+ "name": "Royal Blue 950",
+ "value": "#070846"
+ },
+ {
+ "name": "Gold",
+ "value": "#DFBA56"
+ },
+ {
+ "name": "Pink",
+ "value": "#C23797"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/_data/designTokens/colorsBase.json b/src/_data/designTokens/colorsBase.json
new file mode 100644
index 0000000..856fae8
--- /dev/null
+++ b/src/_data/designTokens/colorsBase.json
@@ -0,0 +1,26 @@
+{
+ "title": "Colors",
+ "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print. neutral and colors are converted to color scales, fixedColors are kept as they are",
+ "neutral": [
+ {
+ "name": "Dove Gray",
+ "value": "#68676C"
+ }
+ ],
+ "colors": [
+ {
+ "name": "Royal Blue",
+ "value": "#4862E5"
+ }
+ ],
+ "fixedColors": [
+ {
+ "name": "Gold",
+ "value": "#DFBA56"
+ },
+ {
+ "name": "Pink",
+ "value": "#C23797"
+ }
+ ]
+}
diff --git a/src/_data/designTokens/fonts.json b/src/_data/designTokens/fonts.json
new file mode 100644
index 0000000..734107b
--- /dev/null
+++ b/src/_data/designTokens/fonts.json
@@ -0,0 +1,29 @@
+{
+ "title": "Fonts",
+ "description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks",
+ "items": [
+ {
+ "name": "Display",
+ "description": "Display font stack for headings and large text. ",
+ "value": ["Clear Sans", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
+ },
+ {
+ "name": "Base",
+ "description": "Base font stack for body text. Clear Sans is a modern, versatile sans-serif typeface designed for optimal readability across user interfaces, print, and digital screens. Its clean, open letterforms and balanced proportions ensure clarity even at smaller sizes, making it ideal for UI design and body text. Originally created by Intel for enhanced legibility.",
+ "value": ["Clear Sans", "system-ui", "sans-serif"]
+ },
+ {
+ "name": "Mono",
+ "description": "Monospace font for code and preformatted text.",
+ "value": [
+ "ui-monospace",
+ "Cascadia Code",
+ "Source Code Pro",
+ "Menlo",
+ "Consolas",
+ "DejaVu Sans Mono",
+ "monospace"
+ ]
+ }
+ ]
+}
diff --git a/src/_data/designTokens/spacing.json b/src/_data/designTokens/spacing.json
new file mode 100644
index 0000000..779ea03
--- /dev/null
+++ b/src/_data/designTokens/spacing.json
@@ -0,0 +1,110 @@
+{
+ "title": "Spacing",
+ "description": "Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.",
+ "meta": {
+ "scaleGenerator": "https://utopia.fyi/space/calculator?c=320,19,1.2,1350,26,1.414,8,2,&s=0.75|0.5|0.25,2|3|5|8|13,s-l&g=s,l,xl,12",
+ "note": ""
+ },
+ "items": [
+ {
+ "name": "4XS",
+ "min": 2,
+ "max": 3
+ },
+ {
+ "name": "3XS",
+ "min": 5,
+ "max": 6
+ },
+ {
+ "name": "2XS",
+ "min": 9,
+ "max": 11
+ },
+ {
+ "name": "XS",
+ "min": 14,
+ "max": 17
+ },
+ {
+ "name": "S",
+ "min": 18,
+ "max": 22
+ },
+ {
+ "name": "M",
+ "min": 27,
+ "max": 33
+ },
+ {
+ "name": "L",
+ "min": 36,
+ "max": 44
+ },
+ {
+ "name": "XL",
+ "min": 54,
+ "max": 66
+ },
+ {
+ "name": "2XL",
+ "min": 90,
+ "max": 110
+ },
+ {
+ "name": "3XL",
+ "min": 144,
+ "max": 176
+ },
+ {
+ "name": "4XL",
+ "min": 234,
+ "max": 286
+ },
+ {
+ "name": "3XS - 2XS",
+ "min": 5,
+ "max": 11
+ },
+ {
+ "name": "2XS - XS",
+ "min": 9,
+ "max": 17
+ },
+ {
+ "name": "XS - S",
+ "min": 14,
+ "max": 22
+ },
+ {
+ "name": "S - M",
+ "min": 18,
+ "max": 33
+ },
+ {
+ "name": "M - L",
+ "min": 27,
+ "max": 44
+ },
+ {
+ "name": "L - XL",
+ "min": 36,
+ "max": 66
+ },
+ {
+ "name": "L - 2xl",
+ "min": 36,
+ "max": 110
+ },
+ {
+ "name": "XL - 2XL",
+ "min": 54,
+ "max": 110
+ },
+ {
+ "name": "2XL - 3xl",
+ "min": 90,
+ "max": 176
+ }
+ ]
+}
diff --git a/src/_data/designTokens/textLeading.json b/src/_data/designTokens/textLeading.json
new file mode 100644
index 0000000..c221a97
--- /dev/null
+++ b/src/_data/designTokens/textLeading.json
@@ -0,0 +1,18 @@
+{
+ "title": "Leading",
+ "description": "Ratio-based leading/line-height values",
+ "items": [
+ {
+ "name": "Flat",
+ "value": 1
+ },
+ {
+ "name": "Fine",
+ "value": 1.2
+ },
+ {
+ "name": "Standard",
+ "value": 1.5
+ }
+ ]
+}
diff --git a/src/_data/designTokens/textSizes.json b/src/_data/designTokens/textSizes.json
new file mode 100644
index 0000000..5a4e0a4
--- /dev/null
+++ b/src/_data/designTokens/textSizes.json
@@ -0,0 +1,49 @@
+{
+ "title": "Text Sizes",
+ "description": "A minimum and maximum text size size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropiate sizes, per context",
+ "meta": {
+ "scaleGenerator": "https://utopia.fyi/type/calculator?c=320,19,1.2,1350,28,1.25,6,2,&s=0.75|0.5|0.25,2|3|5|8|13,s-l&g=s,l,xl,12"
+ },
+ "items": [
+ {
+ "name": "Step min 2",
+ "min": 11,
+ "max": 13
+ },
+ {
+ "name": "Step min 1",
+ "min": 15,
+ "max": 16
+ },
+ {
+ "name": "Step 0",
+ "min": 18,
+ "max": 22
+ },
+ {
+ "name": "Step 1",
+ "min": 20,
+ "max": 26
+ },
+ {
+ "name": "Step 2",
+ "min": 22,
+ "max": 31
+ },
+ {
+ "name": "Step 3",
+ "min": 26,
+ "max": 44
+ },
+ {
+ "name": "Step 4",
+ "min": 31,
+ "max": 63
+ },
+ {
+ "name": "Step 5",
+ "min": 37,
+ "max": 88
+ }
+ ]
+}
diff --git a/src/_data/designTokens/textWeights.json b/src/_data/designTokens/textWeights.json
new file mode 100644
index 0000000..c7f29e7
--- /dev/null
+++ b/src/_data/designTokens/textWeights.json
@@ -0,0 +1,23 @@
+{
+ "title": "Text Weights",
+ "description": "Helper classes and custom properties for common font weights",
+ "meta": {},
+ "items": [
+ {
+ "name": "Light",
+ "value": 300
+ },
+ {
+ "name": "Regular",
+ "value": 400
+ },
+ {
+ "name": "Medium",
+ "value": 500
+ },
+ {
+ "name": "Bold",
+ "value": 700
+ }
+ ]
+}
diff --git a/src/_data/designTokens/viewports.json b/src/_data/designTokens/viewports.json
new file mode 100644
index 0000000..7c4a4f4
--- /dev/null
+++ b/src/_data/designTokens/viewports.json
@@ -0,0 +1,9 @@
+{
+ "title": "Viewports",
+ "description": "The min and maximum viewports used to generate fluid type and space scales.",
+ "min": 320,
+ "navigation": 603,
+ "sm": 640,
+ "md": 1000,
+ "max": 1360
+}
diff --git a/src/_data/helpers.js b/src/_data/helpers.js
new file mode 100644
index 0000000..a6893bd
--- /dev/null
+++ b/src/_data/helpers.js
@@ -0,0 +1,49 @@
+/**
+ * Returns back some attributes based on whether the
+ * link is active or a parent of an active item.
+ *
+ * @param {String} itemUrl - The link in question.
+ * @param {String} pageUrl - The page context.
+ * @returns {String} - The attributes or empty.
+ */
+export function getLinkActiveState(itemUrl, pageUrl) {
+ let response = '';
+
+ // Ensure pageUrl is a string before proceeding
+ if (typeof pageUrl === 'string') {
+ if (itemUrl === pageUrl) {
+ response = ' aria-current="page"';
+ }
+
+ if (itemUrl.length > 1 && pageUrl.startsWith(itemUrl.replace('/page-0/', ''))) {
+ response += ' data-state="active"';
+ }
+ }
+
+ return response;
+}
+
+/**
+ * Take an array of keys and return back items that match.
+ * Note: items in the collection must have a key attribute in
+ * Front Matter.
+ *
+ * @param {Array} collection - 11ty collection.
+ * @param {Array} keys - Collection of keys.
+ * @returns {Array} - Result collection or empty.
+ */
+export function filterCollectionByKeys(collection, keys) {
+ return collection.filter(x => keys.includes(x.data.key));
+}
+
+/**
+ * Generates a random UUID (Universally Unique Identifier).
+ *
+ * @returns {string} A random UUID.
+ */
+export function random() {
+ const segment = () => {
+ return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+ };
+ return `${segment()}-${segment()}-${segment()}`;
+}
diff --git a/src/_data/meta.js b/src/_data/meta.js
new file mode 100644
index 0000000..ee103f0
--- /dev/null
+++ b/src/_data/meta.js
@@ -0,0 +1,89 @@
+export const url = process.env.URL || 'http://localhost:8080';
+export const siteName = 'The Scalable Way';
+export const siteDescription = 'Empowering Data Platforms with Precision and Scale';
+export const siteType = 'Organization'; // schema
+export const locale = 'en_EN';
+export const lang = 'en';
+export const skipContent = 'Skip to content';
+export const author = {
+ name: 'The Scalable Way', // i.e. Lene Saile - page / blog author's name. Must be set.
+ avatar: '/icon-512x512.png', // path to the author's avatar. In this case just using a favicon.
+ email: '', // i.e. hola@lenesaile.com - email of the author
+ website: '', // i.e. https.://www.lenesaile.com - the personal site of the author
+ fediverse: '' // used for highlighting journalism on the fediverse. Can be Mastodon, Flipboard, Threads, WordPress (with the ActivityPub plugin installed), PeerTube, Pixelfed, etc. https://blog.joinmastodon.org/2024/07/highlighting-journalism-on-mastodon/
+};
+export const creator = {
+ name: 'Lene Saile', // i.e. Lene Saile - creator's (developer) name.
+ email: 'hola@lenesaile.com',
+ website: 'https://www.lenesaile.com',
+ social: 'https://front-end.social/@lene'
+};
+export const pathToSvgLogo = 'src/assets/svg/brand/logo-spaced.svg'; // used for favicon generation
+export const themeColor = '#f5f5f6'; // Manifest: defines the default theme color for the application
+export const themeBgColor = '#f5f5f6'; // Manifest: defines a placeholder background color for the application page to display before its stylesheet is loaded
+export const opengraph_default = '/assets/images/template/opengraph-default.jpg'; // fallback/default meta image
+export const opengraph_default_alt = 'Visible content: The Scalable Way'; // alt text for default meta image"
+export const blog = {
+ // RSS feed
+ name: 'Blog',
+ description: '',
+ // feed links are looped over in the head. You may add more to the array.
+ feedLinks: [
+ {
+ title: 'Atom Feed',
+ url: '/feed.xml',
+ type: 'application/atom+xml'
+ },
+ {
+ title: 'JSON Feed',
+ url: '/feed.json',
+ type: 'application/json'
+ }
+ ],
+ // Tags
+ tagSingle: 'Tag',
+ tagPlural: 'Tags',
+ tagMore: 'More tags:',
+ // pagination
+ paginationLabel: 'Blog',
+ paginationPage: 'Page',
+ paginationPrevious: 'Previous',
+ paginationNext: 'Next',
+ paginationNumbers: true
+};
+export const details = {
+ aria: 'section controls',
+ expand: 'expand all',
+ collapse: 'collapse all'
+};
+export const navigation = {
+ navLabel: 'Menu',
+ ariaTop: 'Main',
+ ariaBottom: 'Complementary',
+ ariaPlatforms: 'Platforms',
+ drawerNav: false
+};
+export const themeSwitch = {
+ title: 'Theme',
+ light: 'light',
+ dark: 'dark'
+};
+export const greenweb = {
+ // this goes into src/common/greenweb.njk
+ providers: {
+ // if you want to add more than one, edit the array directly.
+ domain: 'netlify.com',
+ service: 'cdn'
+ },
+ credentials: {
+ // optional, eg: { domain='my-org.com', doctype = 'webpage', url = 'https://my-org.com/our-climate-record'}
+ domain: '',
+ doctype: '',
+ url: ''
+ }
+};
+export const viewRepo = {
+ // this is for the view/edit on github link. The value in the package.json will be pulled in.
+ allow: true,
+ infoText: 'View this page on GitHub'
+};
diff --git a/src/_data/navigation.js b/src/_data/navigation.js
new file mode 100644
index 0000000..598e508
--- /dev/null
+++ b/src/_data/navigation.js
@@ -0,0 +1,26 @@
+export default {
+ top: [
+ {
+ text: 'About',
+ url: '/about/'
+ },
+ {
+ text: 'Insights',
+ url: '/insights/'
+ }
+ ],
+ bottom: [
+ {
+ text: 'Style guide',
+ url: '/styleguide/'
+ },
+ {
+ text: 'Imprint',
+ url: '/imprint/'
+ },
+ {
+ text: 'Privacy',
+ url: '/privacy/'
+ }
+ ]
+};
diff --git a/src/_data/personal.yaml b/src/_data/personal.yaml
new file mode 100644
index 0000000..644c22a
--- /dev/null
+++ b/src/_data/personal.yaml
@@ -0,0 +1,11 @@
+email: hola@eyourmail.lol
+address: |-
+ Organization name
+ Your street
+ 12345, city
+ Tel: +34 928231911
+platforms:
+ github: ''
+ mastodon: ''
+ bluesky: ''
+ kofi: ''
diff --git a/src/_data/team.yaml b/src/_data/team.yaml
new file mode 100644
index 0000000..910c97f
--- /dev/null
+++ b/src/_data/team.yaml
@@ -0,0 +1,26 @@
+- name: Alessio Civitillo
+ image: alessio.jpg
+ description_short: |
+ An experienced financial analyst and software engineer, Alessio brings a unique blend of expertise and vision to the world of data, ensuring that our clients unlock the hidden connections in their data and deliver value to their stakeholders.
+ description_long: |
+ Alessio Civitillo has spent over a decade blending financial analysis with software engineering. His work focuses on helping clients discover valuable insights hidden in complex datasets.
+
+ By merging data science with strategic thinking, Alessio consistently delivers solutions that drive measurable business success.
+
+- name: Karol
+ image: karol.jpg
+ description_short: |
+ A dedicated data strategist focused on actionable insights and innovative data-driven solutions.
+ description_long: |
+ Karol specializes in developing data-driven strategies tailored to client goals. His keen analytical skills turn raw data into powerful insights.
+
+ With a background in finance and tech, Karol bridges the gap between complex data sets and meaningful business decisions.
+
+- name: Mateusz
+ image: mateusz.jpg
+ description_short: |
+ Passionate about turning complex data into clear, actionable intelligence for better decision-making.
+ description_long: |
+ Mateusz brings expertise in data analytics and process optimization. His focus is on making complex data easy to understand and act upon.
+
+ He thrives on designing solutions that transform insights into competitive advantages, driving client success through precision and clarity.
diff --git a/src/_includes/head/css-inline.njk b/src/_includes/head/css-inline.njk
new file mode 100644
index 0000000..a8cd2b3
--- /dev/null
+++ b/src/_includes/head/css-inline.njk
@@ -0,0 +1,14 @@
+
+ {%- if eleventy.env.runMode === "serve" %}
+
+
+
+ {% include "partials/date.njk" %}
+ {%
+ if
+ item.data.tags.length > 1
+ %}
+
+ {% for tag in item.data.tags %}
+ {% if tag != "posts" %}
+ {{ tag }}
+ {% endif %}
+ {% endfor %}
+
+ {% endif %}
+ {{ item.data.description | markdownFormat | safe }}
+
+
+{% css "inline" %}
+ {% include "css/custom-card.css" %}
+{% endcss %}
diff --git a/src/_includes/partials/card-tag.njk b/src/_includes/partials/card-tag.njk
new file mode 100644
index 0000000..6332c3e
--- /dev/null
+++ b/src/_includes/partials/card-tag.njk
@@ -0,0 +1,11 @@
+
+
+ {% include "partials/date.njk" %}
+ {{ item.data.description }}
+
+
+{% css "inline" %}
+ {% include "css/custom-card.css" %}
+{% endcss %}
diff --git a/src/_includes/partials/date.njk b/src/_includes/partials/date.njk
new file mode 100644
index 0000000..5735269
--- /dev/null
+++ b/src/_includes/partials/date.njk
@@ -0,0 +1 @@
+ {{ definedDate | formatDate('MMMM D, YYYY') }}
diff --git a/src/_includes/partials/details.njk b/src/_includes/partials/details.njk
new file mode 100644
index 0000000..805c378
--- /dev/null
+++ b/src/_includes/partials/details.njk
@@ -0,0 +1,20 @@
+
+
+ {{ meta.details.expand }}
+ {{ meta.details.collapse }}
+
+ {%- for item in itemList | alphabetic -%}
+
+ {{ item.data.title }}
+ {{- item.templateContent | safe -}}
+
+ {%- endfor -%}
+
+ {{ meta[page.lang].blog.githubEdit }}
+ {{ meta.viewRepo.infoText }} .
+
+{% endif %}
diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
new file mode 100644
index 0000000..a91fe87
--- /dev/null
+++ b/src/_includes/partials/footer.njk
@@ -0,0 +1,46 @@
+
diff --git a/src/_includes/partials/gallery.njk b/src/_includes/partials/gallery.njk
new file mode 100644
index 0000000..f658bf5
--- /dev/null
+++ b/src/_includes/partials/gallery.njk
@@ -0,0 +1,19 @@
+
+
+ {%- for item in gallery -%}
+
+ Close
+ {%- image item.image, item.alt, item.caption -%}
+
+ {%- image item.image, item.alt -%}
+ {%- endfor -%}
+
+
+ {% css "inline" %}
+ {% include "css/gallery.css" %}
+ {% endcss %}
+
+ {% js "defer" %}
+ {% include "scripts/gallery.js" %}
+ {% endjs %}
+
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
new file mode 100644
index 0000000..76cc665
--- /dev/null
+++ b/src/_includes/partials/header.njk
@@ -0,0 +1,15 @@
+
diff --git a/src/_includes/partials/main-nav.njk b/src/_includes/partials/main-nav.njk
new file mode 100644
index 0000000..b0d28a5
--- /dev/null
+++ b/src/_includes/partials/main-nav.njk
@@ -0,0 +1,54 @@
+
+{% set drawerNav = meta.navigation.drawerNav %}
+
+
+
+
+
+{% if drawerNav %}
+
+
+
+
+
+
+ {{ meta.navigation.navLabel }}
+
+
+
+
+
+{% endif %}
+
+{% if drawerNav %}
+ {% js "defer" %}
+ {% include "scripts/nav-drawer.js" %}
+ {% endjs %}
+{% endif %}
diff --git a/src/_includes/partials/pagination.njk b/src/_includes/partials/pagination.njk
new file mode 100644
index 0000000..f6b782a
--- /dev/null
+++ b/src/_includes/partials/pagination.njk
@@ -0,0 +1,40 @@
+
+
+
+ {{ meta[metaKey].paginationPage }}
+
+
+
+
+{% css "inline" %}
+ {% include "css/pagination.css" %}
+{% endcss %}
diff --git a/src/_includes/partials/post-tags.njk b/src/_includes/partials/post-tags.njk
new file mode 100644
index 0000000..07626b9
--- /dev/null
+++ b/src/_includes/partials/post-tags.njk
@@ -0,0 +1,7 @@
+{% if tags.size > 1 %}
+
+ {% for tag in tags %}
+
{{ tag }}
+ {% endfor %}
+
+ {% svg "misc/search" %}
+ Search
+
+
+
+
{{ meta.themeSwitch.title }}
+
+ {{ meta.themeSwitch.light }}
+
+
+ {{ meta.themeSwitch.dark }}
+
+
+
+
+
diff --git a/src/_includes/webc/custom-masonry.webc b/src/_includes/webc/custom-masonry.webc
new file mode 100644
index 0000000..c28f916
--- /dev/null
+++ b/src/_includes/webc/custom-masonry.webc
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/_includes/webc/custom-svg.webc b/src/_includes/webc/custom-svg.webc
new file mode 100644
index 0000000..33a9520
--- /dev/null
+++ b/src/_includes/webc/custom-svg.webc
@@ -0,0 +1,44 @@
+
diff --git a/src/_includes/webc/custom-youtube-link.webc b/src/_includes/webc/custom-youtube-link.webc
new file mode 100644
index 0000000..8e237ec
--- /dev/null
+++ b/src/_includes/webc/custom-youtube-link.webc
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+ {%- if title -%}
+ {{- title -}}
+ {%- else -%}
+ {{- meta.siteName -}}
+ {%- endif -%}
+
+
+ {{ content | safe }}
+
+ {% include "partials/footer.njk" %}
+
+
diff --git a/src/_layouts/page.njk b/src/_layouts/page.njk
new file mode 100644
index 0000000..33106a8
--- /dev/null
+++ b/src/_layouts/page.njk
@@ -0,0 +1,8 @@
+---
+layout: base
+---
+
+
+ {{ title }}
+ {{ content | safe }}
+
diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk
new file mode 100644
index 0000000..e70e4a9
--- /dev/null
+++ b/src/_layouts/post.njk
@@ -0,0 +1,48 @@
+---
+layout: base
+schema: blog
+---
+
+
+
+
{{ title }}
+
+ {% if image %}
+
+ {% image image, alt or title, credit, "eager", "feature" %}
+ {% endif %}
+
+
+
+ {% set definedDate = date %} {% include "partials/date.njk" %}
+ {%
+ if tags.length >
+ 1
+ %}
+
+ {% for tag in tags %}{% if tag != "posts" %}
+ {{ tag }}
+ {% endif %}{% endfor %}
+ {% endif %}
+
+
+ {{ content | safe }}
+ {% include 'partials/edit-on.njk' %}
+
+
+{%- css "inline" -%}
+ {%- include 'css/post.css' -%}
+ {%- include 'css/footnotes.css' -%}
+{%- endcss -%}
diff --git a/src/_layouts/tags.njk b/src/_layouts/tags.njk
new file mode 100644
index 0000000..d6c3c86
--- /dev/null
+++ b/src/_layouts/tags.njk
@@ -0,0 +1,10 @@
+---
+layout: base
+---
+
+
+
+
{{ title }}
+ {{ content | safe }}
+
+
diff --git a/src/assets/css/bundle/about.css b/src/assets/css/bundle/about.css
new file mode 100644
index 0000000..8948a62
--- /dev/null
+++ b/src/assets/css/bundle/about.css
@@ -0,0 +1,11 @@
+.about main wrapper > * {
+ border-inline-end: 1px solid var(--color-bg-accent);
+}
+
+.about .grid {
+ --grid-min-item-size: clamp(16rem, 50vw, 16rem);
+}
+
+.about .about__content div {
+ padding-block-start: var(--space-2xs);
+}
diff --git a/src/assets/css/bundle/column.css b/src/assets/css/bundle/column.css
new file mode 100644
index 0000000..dc8dabf
--- /dev/null
+++ b/src/assets/css/bundle/column.css
@@ -0,0 +1,14 @@
+.column {
+ column-count: 1;
+}
+
+.column > * {
+ break-inside: avoid;
+}
+
+@media screen(sm) {
+ .column:not(:has(p:only-child, li:only-child)) {
+ column-count: 2;
+ gap: var(--gutter, var(--space-l-xl));
+ }
+}
diff --git a/src/assets/css/bundle/custom-card.css b/src/assets/css/bundle/custom-card.css
new file mode 100644
index 0000000..6820151
--- /dev/null
+++ b/src/assets/css/bundle/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-small);
+ 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-pink);
+}
+
+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-blue);
+}
+
+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;
+}
diff --git a/src/assets/css/bundle/details.css b/src/assets/css/bundle/details.css
new file mode 100644
index 0000000..7eaacd8
--- /dev/null
+++ b/src/assets/css/bundle/details.css
@@ -0,0 +1,86 @@
+.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);
+}
+
+/* Hide without JS */
+is-land:not(:defined) .details .control {
+ display: none;
+}
+
+.details details > * + * {
+ margin-block-start: var(--flow-space, 1em);
+}
+
+.details details > p:last-child {
+ margin-block-end: var(--space-l);
+}
+
+.details summary {
+ grid-column: content;
+}
+
+.details summary {
+ display: flex;
+ align-items: baseline;
+ line-height: 1.2;
+ gap: 0 1ch;
+ cursor: pointer;
+ list-style: none;
+ font-weight: var(--font-bold);
+ font-size: var(--size-step-1);
+}
+
+.details summary:hover,
+.details summary:focus-visible,
+.details[open] > summary {
+ color: var(--color-blue);
+}
+
+.details summary::before {
+ content: '+';
+ display: block;
+ color: var(--color-blue);
+ font-family: var(--font-mono);
+ font-size: var(--size-step-0);
+ font-weight: var(--font-regular);
+ line-height: 0.5;
+ transform: scale(1.4);
+ transform-origin: right bottom;
+ margin-inline-start: 0.2ch;
+}
+
+.details details[open] summary::before {
+ 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 */
+.details summary::-webkit-details-marker,
+.details summary::marker {
+ content: '';
+ display: none;
+}
+
+.details summary + * {
+ margin-block-start: var(--space-s-m);
+}
+
+.details details > * + * {
+ margin-inline-start: 2.4ch;
+}
diff --git a/src/assets/css/bundle/footnotes.css b/src/assets/css/bundle/footnotes.css
new file mode 100644
index 0000000..37b76ad
--- /dev/null
+++ b/src/assets/css/bundle/footnotes.css
@@ -0,0 +1,26 @@
+.footnotes {
+ font-size: var(--size-step-min-1);
+}
+
+.footnote-ref {
+ font-size: var(--size-step-min-2);
+ vertical-align: super;
+ margin-inline-start: 0.1ch;
+ color: var(--color-text-accent);
+}
+
+.footnote-ref a {
+ text-decoration: none;
+ padding: 0.3ch;
+}
+
+.footnote-backref {
+ text-decoration: none;
+ background-color: var(--color-bg-accent);
+ border-radius: var(--border-radius-small);
+ padding-inline: var(--space-xs);
+}
+
+.footnote-backref:hover {
+ color: var(--color-blue);
+}
diff --git a/src/assets/css/bundle/gallery.css b/src/assets/css/bundle/gallery.css
new file mode 100644
index 0000000..03e081a
--- /dev/null
+++ b/src/assets/css/bundle/gallery.css
@@ -0,0 +1,30 @@
+.gallery dialog {
+ border-radius: var(--border-radius-small);
+ 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 {
+ aspect-ratio: auto;
+ max-block-size: 70vh;
+ inline-size: auto;
+}
+
+.gallery dialog figcaption {
+ color: var(--color-light);
+}
diff --git a/src/assets/css/bundle/home.css b/src/assets/css/bundle/home.css
new file mode 100644
index 0000000..b924a58
--- /dev/null
+++ b/src/assets/css/bundle/home.css
@@ -0,0 +1,314 @@
+.home h1 {
+ font-weight: var(--font-light);
+}
+
+/* ------------------- hero */
+
+.home .hero {
+ --button-icon-size: 1.8ch;
+ overflow: hidden;
+ grid-row: 1;
+ background: var(--color-bg-accent);
+ display: grid;
+ block-size: clamp(35rem, 70vh, 45rem);
+ grid-column: full;
+}
+
+.home .hero > :is(svg, header) {
+ grid-row: 1;
+}
+
+/* first blue pixel */
+.home .hero > svg {
+ grid-column: full;
+ inline-size: 100%;
+ block-size: auto;
+ color: var(--color-bg-accent-2);
+ mix-blend-mode: plus-lighter;
+}
+
+@media screen(max) {
+ .home .hero > svg {
+ color: var(--color-text);
+ mix-blend-mode: normal;
+ }
+}
+
+.home .hero > svg:first-of-type {
+ grid-column: full-start / content-end;
+ transform: rotate(30deg);
+ inline-size: clamp(30ch, 30vw, 35rem);
+ margin-inline-start: -15ch;
+}
+
+.home .hero > svg:nth-of-type(2) {
+ grid-column: content-start / full-end;
+ justify-self: end;
+ align-self: center;
+ inline-size: clamp(50ch, 40vw, 60rem);
+ transform: rotate(210deg);
+ margin-inline-end: -20%;
+ margin-block-end: -10ch;
+}
+
+.home .hero > header {
+ grid-column: content;
+ background: transparent;
+ z-index: 1;
+ align-self: center;
+}
+
+.home .hero > header p {
+ max-inline-size: 45ch;
+}
+
+/* ------------------- sections */
+
+/* highlight-1 */
+
+.home .highlight-one {
+ position: relative;
+ overflow: hidden;
+}
+
+.home .highlight-one article > div {
+ max-inline-size: 58ch;
+}
+
+.home .highlight-one span {
+ color: var(--color-pink);
+}
+
+.home .highlight-one svg {
+ grid-column: content-start / full-end;
+ position: absolute;
+ inset-inline-end: 0;
+ inline-size: clamp(30ch, 40vw, 35rem);
+ block-size: auto;
+ color: var(--color-blue-accent-2);
+ mix-blend-mode: overlay;
+ translate: var(--space-2xl) calc(var(--space-3xl) * -1);
+}
+
+@media screen(md) {
+ .home .highlight-one svg {
+ color: var(--color-blue-accent-2);
+ mix-blend-mode: normal;
+ }
+}
+
+/* highlight-2 */
+
+.home .highlight-two {
+ z-index: 1;
+ position: relative;
+}
+
+.home .highlight-two article > * {
+ max-inline-size: 55ch;
+ margin-inline: auto;
+}
+
+/* foundations */
+
+.home .foundations {
+ overflow: hidden;
+ padding-inline: var(--gap);
+ background: var(--color-bg-accent);
+ position: relative;
+}
+
+.home .foundations .split {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+}
+
+.home .foundations svg {
+ grid-row: 1;
+ grid-column: 1/ -1;
+ color: var(--color-bg-accent-2);
+}
+
+.home .foundations .timeline {
+ grid-row: 1;
+ grid-column: 1 / -1;
+}
+
+@media screen(sm) {
+ .home .foundations svg {
+ grid-column: 1/ 5;
+ }
+
+ .home .foundations .timeline {
+ grid-column: 2 / -1;
+ }
+}
+
+@media screen(md) {
+ .home .foundations svg {
+ grid-column: 1/ 4;
+ color: var(--color-text);
+ }
+
+ .home .foundations .timeline {
+ grid-column: 4 / -1;
+ }
+}
+
+.home .foundations svg {
+ inline-size: clamp(40ch, 50vw, 40rem);
+ block-size: auto;
+
+ margin-block-start: calc(var(--space-l) * -1);
+ margin-inline-end: calc(var(--space-3xl) - 1.5ch);
+ justify-self: end;
+}
+
+.home .foundations .timeline {
+ margin-inline-start: calc(var(--space-s) * -1);
+ list-style: none;
+ padding: 0;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-l);
+}
+
+.home .foundations .timeline li::after {
+ content: '';
+ position: absolute;
+ width: 0.15ch;
+ background: var(--color-blue);
+ inset-inline-start: var(--space-s);
+ inset-block-start: calc(var(--space-s) * 2);
+ inset-block-end: calc(-1 * var(--space-l));
+ z-index: 0;
+}
+
+.home .foundations .timeline li:last-child::after {
+ display: none;
+}
+
+.home .foundations .timeline li {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ padding-inline-start: var(--space-xl);
+ z-index: 1;
+}
+
+.home .foundations .timeline span {
+ block-size: calc(var(--space-s) * 2);
+ inline-size: calc(var(--space-s) * 2);
+ background: var(--color-blue);
+ color: var(--color-royal-blue-50);
+ font-size: var(--size-step-2);
+ font-weight: var(--font-medium);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ position: absolute;
+ inset-inline-start: 0;
+}
+
+.home .foundations .timeline div {
+ margin-inline-start: var(--space-s);
+ margin-block-start: var(--space-3xs);
+}
+
+/* about */
+
+.home .about .grid {
+ --gutter: var(--space-xl);
+ --grid-min-item-size: clamp(16rem, 28%, 25rem);
+}
+
+.home .about header div {
+ grid-column: span 2;
+ max-inline-size: 45ch;
+}
+
+.home .about .about__content p {
+ font-size: var(--size-step-min-1);
+}
+
+/* why */
+
+.home .why {
+ --gutter: var(--space-xl);
+}
+
+.home .why header p {
+ font-size: var(--size-step-1);
+ font-weight: var(--font-medium);
+}
+
+@media screen(sm) {
+ .home .why header p {
+ max-inline-size: 50%;
+ margin-inline-start: calc(50% + var(--gutter) / 2);
+ }
+}
+
+.home .why header strong {
+ color: var(--color-pink);
+}
+
+.home .why .column {
+ --gutter: var(--space-xl);
+}
+
+.home .why dl > * {
+ --flow-space: var(--space-l);
+}
+
+.home .why dl div > * {
+ --flow-space: var(--space-4xs);
+}
+
+/* services */
+
+.home .services {
+ position: relative;
+}
+
+.home .services h3 {
+ color: var(--color-blue-accent-4);
+}
+
+.home .services h3 span {
+ display: block;
+ background: var(--color-blue-accent-4);
+ color: var(--color-bg);
+ inline-size: fit-content;
+ border-radius: var(--border-radius-small);
+ padding: var(--space-4xs) var(--space-3xs);
+ margin-block-start: var(--space-3xs);
+}
+
+.home .services .grid {
+ --gutter: var(--space-s);
+ --grid-min-item-size: clamp(9rem, 25%, 20rem);
+ background: var(--color-bg);
+ border-radius: var(--border-radius-small);
+ border: 1px solid var(--color-blue-accent-3);
+ padding: var(--space-xs);
+ margin-block-start: var(--space-l);
+ position: relative;
+}
+
+.home .services .grid div {
+ grid-column: span 2;
+}
+
+.home .services svg {
+ grid-column: content-start / full-end;
+ position: absolute;
+ inset-inline-end: var(--space-m);
+ inset-block-start: var(--space-s);
+ inline-size: clamp(10ch, 40vw, 30rem);
+ block-size: auto;
+ color: var(--color-blue-accent-3);
+ rotate: 90deg;
+}
diff --git a/src/assets/css/bundle/pagination.css b/src/assets/css/bundle/pagination.css
new file mode 100644
index 0000000..464afbf
--- /dev/null
+++ b/src/assets/css/bundle/pagination.css
@@ -0,0 +1,41 @@
+.pagination {
+ --gutter: var(--space-xs-s);
+}
+
+.pagination li {
+ color: var(--pagination-text, var(--color-text));
+ background-color: var(--pagination-bg, var(--color-bg));
+ border: 3px solid var(--pagination-border, var(--color-bg-accent));
+ border-radius: var(--border-radius-small);
+}
+
+.pagination li:not(:has(a)) {
+ padding: var(--space-xs) var(--space-s-m);
+ opacity: 0.6;
+}
+
+.pagination a {
+ text-decoration: none;
+}
+
+.pagination a {
+ padding: var(--space-xs) var(--space-s-m);
+ text-decoration: none;
+ display: block;
+}
+
+.pagination li:not(:has(a)) {
+ padding: var(--space-xs) var(--space-s-m);
+ opacity: 0.6;
+}
+
+.pagination li:has(a:hover) {
+ --pagination-bg: var(--color-bg-accent);
+ --pagination-border: var(--color-bg-accent);
+}
+
+.pagination li:has(a[aria-current='page']) {
+ --pagination-bg: var(--color-pink);
+ --pagination-border: var(--color-pink);
+ --pagination-text: var(--color-base-light);
+}
diff --git a/src/assets/css/bundle/post.css b/src/assets/css/bundle/post.css
new file mode 100644
index 0000000..b38f052
--- /dev/null
+++ b/src/assets/css/bundle/post.css
@@ -0,0 +1,28 @@
+.post img {
+ max-inline-size: var(--max-img-width, 100%);
+ block-size: auto;
+ aspect-ratio: 16/9;
+ object-fit: cover;
+ object-position: center;
+}
+
+time {
+ font-size: var(--size-step-min-1);
+ color: var(--color-pink);
+ text-transform: uppercase;
+ font-weight: var(--font-medium);
+}
+
+.post .credit {
+ font-size: var(--size-step-min-1);
+ color: var(--color-text-accent);
+ background-color: var(--color-bg);
+ padding: var(--space-xs) var(--space-s);
+ border-radius: var(--border-radius-small);
+ transform: translateY(-4ch) translateX(-0.5ch);
+ max-inline-size: fit-content;
+}
+
+.post .meta {
+ font-size: var(--size-step-min-1);
+}
diff --git a/src/assets/css/bundle/styleguide.css b/src/assets/css/bundle/styleguide.css
new file mode 100644
index 0000000..4cded7c
--- /dev/null
+++ b/src/assets/css/bundle/styleguide.css
@@ -0,0 +1,72 @@
+.styleguide {
+ --region-space-top: var(--space-xl-2xl);
+ --spot-color: color-mix(in oklab, var(--color-bg) 97%, var(--color-text));
+}
+
+.styleguide code {
+ font-size: var(--size-step-min-2);
+}
+
+.styleguide li p:has(code) {
+ line-height: var(--leading-flat);
+}
+
+.styleguide section {
+ --region-space-bottom: var(--space-l-xl);
+ --region-space-top: var(--space-l-xl);
+}
+
+.styleguide :is(h2, h3) {
+ font-size: var(--size-step-0);
+ font-family: var(--font-base);
+ text-transform: uppercase;
+}
+
+.styleguide h2 {
+ letter-spacing: var(--tracking-wide);
+}
+
+.styleguide .colors {
+ --cluster-vertical-alignment: flex-start;
+}
+
+.styleguide .colors ul {
+ --min: 10ch;
+ --gap: var(--space-s-m);
+
+ display: grid;
+ grid-gap: var(--gap);
+ /* min() with 100% prevents overflow
+ in extra narrow spaces */
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
+}
+
+.styleguide .colors li {
+ display: grid;
+ gap: var(--space-xs);
+ grid-row: span 2;
+ grid-template-rows: subgrid;
+}
+
+.styleguide .colors li div {
+ max-inline-size: var(--max-img-width, 100%);
+ block-size: auto;
+ aspect-ratio: 16/9;
+ object-fit: cover;
+ object-position: center;
+ border: 1px solid var(--color-text);
+}
+
+.styleguide .space {
+ background-color: var(--color-text);
+ display: block;
+}
+
+.styleguide .tabs {
+ align-items: center;
+ border-block-end: 1px solid #d1d8e0;
+ display: flex;
+ gap: var(--space-xs);
+ margin-block-end: var(--space-s);
+ padding-block-end: var(--space-s);
+}
diff --git a/src/assets/css/bundle/table.css b/src/assets/css/bundle/table.css
new file mode 100644
index 0000000..28f479a
--- /dev/null
+++ b/src/assets/css/bundle/table.css
@@ -0,0 +1,96 @@
+table {
+ border: 0;
+ inline-size: 100%;
+}
+
+table br {
+ display: none;
+}
+
+thead {
+ border: none;
+ clip: rect(0 0 0 0);
+ block-size: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ inline-size: 1px;
+}
+
+tr {
+ border: 1px solid var(--color-text);
+ display: block;
+ margin-block-end: var(--space-s);
+}
+
+th,
+td {
+ padding: var(--space-xs) var(--space-s);
+ vertical-align: sub;
+}
+
+td {
+ border-block-end: 1px solid var(--color-text);
+ 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;
+}
+
+@media screen(sm) {
+ table {
+ border-collapse: collapse;
+ margin: 0;
+ 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);
+ margin: 0;
+ display: table-row;
+ }
+
+ tr:not(:last-child) {
+ border-block-end: 1px solid var(--color-bg-accent);
+ }
+
+ td {
+ border: none;
+ }
+
+ td::before {
+ display: none;
+ }
+
+ th,
+ td {
+ padding: var(--space-s);
+ text-align: start;
+ display: table-cell;
+ }
+}
diff --git a/src/assets/css/global/base/fonts.css b/src/assets/css/global/base/fonts.css
new file mode 100644
index 0000000..fb8f888
--- /dev/null
+++ b/src/assets/css/global/base/fonts.css
@@ -0,0 +1,49 @@
+@font-face {
+ font-family: 'Clear Sans';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 300;
+ src:
+ local(''),
+ url('/assets/fonts/clearsans/clearsans-light.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Clear Sans';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src:
+ local(''),
+ url('/assets/fonts/clearsans/clearsans-regular.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Clear Sans';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 400;
+ src:
+ local(''),
+ url('/assets/fonts/clearsans/clearsans-italic.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Clear Sans';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 500;
+ src:
+ local(''),
+ url('/assets/fonts/clearsans/clearsans-medium.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Clear Sans';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 700;
+ src:
+ local(''),
+ url('/assets/fonts/clearsans/clearsans-bold.woff2') format('woff2');
+}
diff --git a/src/assets/css/global/base/global-styles.css b/src/assets/css/global/base/global-styles.css
new file mode 100644
index 0000000..62ad256
--- /dev/null
+++ b/src/assets/css/global/base/global-styles.css
@@ -0,0 +1,142 @@
+/*
+ Global styles
+
+ Low-specificity, global styles that apply to the whole
+ project: https://cube.fyi/css.html
+*/
+
+/* Base styles */
+html {
+ color-scheme: light dark;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ font-family: var(--font-base);
+ font-size: var(--size-step-0);
+ font-weight: var(--font-regular);
+ font-size-adjust: from-font;
+ line-height: var(--leading-standard);
+ color: var(--color-text);
+ background-color: var(--color-bg);
+ accent-color: var(--color-blue);
+}
+
+main {
+ flex: auto;
+}
+
+/* Typography */
+h1,
+h2,
+h3 {
+ font-family: var(--font-display);
+ font-weight: var(--font-medium);
+ line-height: var(--leading-fine);
+ letter-spacing: var(--tracking-s);
+}
+
+h1 {
+ font-size: var(--size-step-4);
+}
+
+h2 {
+ font-size: var(--size-step-3);
+}
+
+h3 {
+ font-size: var(--size-step-2);
+}
+
+/* Text formatting */
+p,
+li,
+blockquote:not([class]) {
+ max-inline-size: 65ch;
+}
+
+blockquote {
+ padding: var(--space-m-l);
+ border-inline-start: 0.5rem solid var(--color-blue);
+ font-size: var(--size-step-2);
+}
+
+blockquote > * + * {
+ margin-block-start: var(--space-m-l);
+}
+
+blockquote :last-child {
+ font-family: var(--font-base);
+ font-style: normal;
+ font-size: var(--size-step-1);
+}
+
+/* Form elements */
+input,
+textarea {
+ caret-color: var(--color-blue);
+}
+
+/* SVG */
+svg {
+ block-size: 2ex;
+ inline-size: auto;
+ flex: none;
+ stroke-width: 2;
+ vector-effect: non-scaling-stroke;
+}
+
+/* Text styling */
+b,
+strong {
+ font-weight: var(--font-bold);
+}
+
+/* Horizontal rule */
+hr {
+ height: 1px;
+ width: 10%;
+ margin-block: var(--space-m-l);
+ margin-inline-start: 0;
+ background-color: var(--color-bg-accent-2);
+ border: 0;
+}
+
+/* Links */
+a {
+ color: currentcolor;
+ text-decoration-thickness: 0.08em;
+}
+
+mark {
+ background: var(--color-gold);
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+/* Focus styles */
+:focus-visible {
+ outline: 3px solid;
+ outline-offset: 0.3ch;
+}
+
+/* Text selection */
+::selection {
+ background-color: var(--color-text);
+ color: var(--color-bg);
+}
+
+/* Transitions */
+.preload-transitions * {
+ transition: none !important;
+}
+
+/* Scripting */
+@media (scripting: none) {
+ .require-js {
+ display: none;
+ }
+}
diff --git a/src/assets/css/global/base/reset.css b/src/assets/css/global/base/reset.css
new file mode 100644
index 0000000..64587ed
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/assets/css/global/base/variables.css b/src/assets/css/global/base/variables.css
new file mode 100644
index 0000000..5b5d4cb
--- /dev/null
+++ b/src/assets/css/global/base/variables.css
@@ -0,0 +1,86 @@
+/* Basic variable definitions for color schemes */
+:root {
+ --gap: clamp(1rem, 6vw, 3rem);
+ --gutter: var(--space-m-l);
+ --transition-duration: 250ms;
+ --transition-timing: ease;
+ --tracking: -0.05ch;
+ --tracking-s: -0.075ch;
+ --tracking-wide: 0.05ch;
+
+ --gradient-rainbow: linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%);
+ --gradient-conic: conic-gradient(
+ var(--color-blue) 0 28%,
+ var(--color-pink) 0 67%,
+ var(--color-gold) 0 100%
+ );
+ --gradient-stripes: linear-gradient(
+ 45deg,
+ var(--color-base-dark) 0 75%,
+ var(--color-blue) 0 85%,
+ var(--color-pink) 0 92%,
+ var(--color-gold) 0 100%
+ );
+}
+
+/* Default / Light theme specific variables */
+:root,
+:root[data-theme='light'] {
+ --color-dark: var(--color-dove-gray-900);
+ --color-light: var(--color-dove-gray-50);
+ --color-text: var(--color-dove-gray-900);
+ --color-text-accent: var(--color-dove-gray-800);
+ --color-bg: white;
+ --color-bg-accent: var(--color-dove-gray-50);
+ --color-bg-accent-2: var(--color-dove-gray-100);
+ --color-bg-accent-3: var(--color-dove-gray-200);
+ --color-blue: var(--color-royal-blue-500);
+ --color-blue-accent: var(--color-royal-blue-50);
+ --color-blue-accent-2: var(--color-royal-blue-900);
+ --color-blue-accent-3: var(--color-royal-blue-200);
+ --color-blue-accent-4: var(--color-royal-blue-600);
+
+ img {
+ filter: brightness(1);
+ }
+}
+
+/* Dark theme specific variables based on system preference */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-text: var(--color-dove-gray-50);
+ --color-bg: var(--color-dove-gray-800);
+ --color-blue: var(--color-royal-blue-600);
+ --color-blue-accent: var(--color-dove-gray-900);
+ --color-blue-accent-2: var(--color-royal-blue-300);
+ --color-blue-accent-3: var(--color-dove-gray-100);
+ --color-blue-accent-4: var(--color-royal-blue-400);
+ --color-text-accent: var(--color-dove-gray-100);
+ --color-bg-accent: var(--color-dove-gray-900);
+ --color-bg-accent-2: var(--color-dove-gray-700);
+ --color-bg-accent-3: var(--color-dove-gray-700);
+
+ img {
+ filter: brightness(0.9);
+ }
+ }
+}
+
+/* Dark theme specific variables based on manual override */
+:root[data-theme='dark'] {
+ --color-text: var(--color-dove-gray-50);
+ --color-bg: var(--color-dove-gray-800);
+ --color-blue: var(--color-royal-blue-600);
+ --color-blue-accent: var(--color-dove-gray-900);
+ --color-blue-accent-2: var(--color-royal-blue-300);
+ --color-blue-accent-3: var(--color-dove-gray-100);
+ --color-blue-accent-4: var(--color-royal-blue-400);
+ --color-text-accent: var(--color-dove-gray-100);
+ --color-bg-accent: var(--color-dove-gray-900);
+ --color-bg-accent-2: var(--color-dove-gray-700);
+ --color-bg-accent-3: var(--color-dove-gray-700);
+
+ img {
+ filter: brightness(0.9);
+ }
+}
diff --git a/src/assets/css/global/blocks/button.css b/src/assets/css/global/blocks/button.css
new file mode 100644
index 0000000..9a06bce
--- /dev/null
+++ b/src/assets/css/global/blocks/button.css
@@ -0,0 +1,97 @@
+.button {
+ --button-bg: var(--color-text);
+ --button-color: color-mix(in oklab, var(--button-bg) 10%, var(--color-bg));
+ --button-hover-bg: color-mix(in oklab, var(--button-bg) 90%, var(--color-bg));
+ --button-hover-color: color-mix(in oklab, var(--button-bg) 5%, var(--color-bg));
+ --button-border-width: var(--border-thickness);
+ --button-border-style: solid;
+ --button-border-color: color-mix(in oklab, var(--button-bg) 80%, var(--color-text));
+ --button-radius: var(--border-radius-small);
+ --button-font-weight: var(--font-bold);
+ --button-gap: var(--space-2xs);
+ --button-padding: var(--space-3xs) var(--space-xs);
+ --button-font-size: var(--size-step-0);
+ --button-text-transform: none;
+
+ display: inline-flex;
+ align-items: center;
+ gap: var(--button-gap);
+ padding: var(--button-padding);
+ background: var(--button-bg);
+ color: var(--button-color);
+ border-width: var(--button-border-width);
+ border-style: var(--button-border-style);
+ border-color: var(--button-border-color);
+ border-radius: var(--button-radius);
+ text-decoration: none;
+ font-weight: var(--button-font-weight);
+ font-size: var(--button-font-size);
+ line-height: var(--leading-flat);
+ text-transform: var(--button-text-transform);
+ /* trim the space at the cap height - in Safari Technology Preview */
+ text-box-trim: trim-both;
+ text-box-edge: cap alphabetic;
+}
+
+.button svg {
+ block-size: var(--button-icon-size, 1.2cap);
+ flex: none;
+}
+
+/* Hover/focus/active */
+.button:hover,
+.button[aria-current='page'],
+.button[aria-pressed='true'],
+.button[data-state='active'] {
+ background: var(--button-hover-bg);
+ color: var(--button-color);
+}
+
+.button:focus {
+ outline-color: var(--button-outline-color, var(--button-border-color));
+}
+
+.button:active {
+ transform: scale(99%);
+}
+
+/* Variants */
+.button[data-button-variant='blue'] {
+ --button-bg: var(--color-blue);
+ --button-color: var(--color-royal-blue-50);
+}
+
+.button[data-button-variant='pink'] {
+ --button-bg: var(--color-pink);
+ --button-color: var(--color-medium-red-violet-50);
+}
+
+.button[data-button-variant='gold'] {
+ --button-bg: var(--color-gold);
+ --button-color: var(--color-dark);
+}
+
+.button[data-ghost-button] {
+ --button-bg: var(--color-bg);
+ --button-border-color: var(--color-text);
+ --button-color: var(--color-text);
+ --button-hover-color: var(--color-bg);
+}
+
+.button[data-ghost-button]:hover {
+ --_ghost-hover-bg: var(--button-bg);
+ --_ghost-hover-bg: color-mix(in oklab, var(--button-bg) 95%, var(--color-dark));
+ background: var(--_ghost-hover-bg);
+}
+
+.button[data-small-button] {
+ --button-border-width: 2px;
+ --button-radius: var(--border-radius-small);
+ --button-font-size: var(--size-step-min-2);
+ --button-padding: var(--space-3xs) var(--space-xs);
+ --button-text-transform: uppercase;
+}
+/* Radius variants */
+.button[data-button-radius='hard'] {
+ --button-radius: 0;
+}
diff --git a/src/assets/css/global/blocks/code.css b/src/assets/css/global/blocks/code.css
new file mode 100644
index 0000000..33bb4d2
--- /dev/null
+++ b/src/assets/css/global/blocks/code.css
@@ -0,0 +1,230 @@
+:root {
+ --color-code-orange: hsl(30, 70%, 60%);
+ --color-code-blue: var(--color-pink);
+ --color-code-indigo: hsl(260, 48%, 56%);
+ --color-code-violet: hsl(314, 70%, 60%);
+ --color-code-pink: hsl(350, 70%, 60%);
+ --color-code-gray: hsl(0, 0%, 58%);
+ --color-code-bg: color-mix(in oklab, var(--color-bg) 92%, black);
+}
+
+code,
+pre {
+ font-family: var(--font-mono);
+ font-size: var(--size-step-min-1);
+ background-color: var(--color-code-bg);
+
+ border-radius: var(--border-radius-small);
+}
+
+code[class*='language-'],
+pre[class*='language-'] {
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ hyphens: none;
+}
+
+/* Specific Styles for Elements */
+pre {
+ grid-column: popout !important;
+ overflow-x: auto;
+ padding: var(--space-m-l);
+}
+
+/* Style Adjustments for within different contexts */
+:where(:not(pre)) > code {
+ position: relative;
+ top: -0.05em;
+ padding: 0.1em 0.4em;
+}
+
+pre[class*='language-'] {
+ overflow: auto;
+ position: relative;
+}
+
+[class*='language-'] .namespace {
+ opacity: 0.7;
+}
+
+.token.atrule {
+ color: var(--color-code-pink);
+}
+
+.token.attr-name {
+ color: var(--color-code-orange);
+}
+
+.token.attr-value {
+ color: var(--color-text-accent);
+}
+
+.token.attribute {
+ color: var(--color-code-blue);
+}
+
+.token.boolean {
+ color: var(--color-code-pink);
+}
+
+.token.builtin {
+ color: var(--color-code-orange);
+}
+
+.token.cdata {
+ color: var(--color-code-orange);
+}
+
+.token.char {
+ color: var(--color-code-orange);
+}
+
+.token.class {
+ color: var(--color-code-orange);
+}
+
+.token.class-name {
+ color: var(--color-code-orange);
+}
+
+.token.color {
+ color: var(--color-code-orange);
+}
+
+.token.comment {
+ color: var(--color-code-gray);
+}
+
+.token.constant {
+ color: var(--color-code-pink);
+}
+
+.token.deleted {
+ color: var(--color-code-pink);
+}
+
+.token.doctype {
+ color: var(--color-code-orange);
+}
+
+.token.entity {
+ color: var(--color-code-pink);
+}
+
+.token.function {
+ color: var(--color-code-pink);
+}
+
+.token.hexcode {
+ color: var(--color-code-orange);
+}
+
+.token.id {
+ color: var(--color-code-pink);
+ font-weight: var(--font-bold);
+}
+
+.token.important {
+ color: var(--color-code-pink);
+ font-weight: var(--font-bold);
+}
+
+.token.inserted {
+ color: var(--color-code-orange);
+}
+
+.token.keyword {
+ color: var(--color-code-pink);
+ font-style: italic;
+}
+
+.token.number {
+ color: var(--color-text-accent);
+}
+
+.token.operator {
+ color: var(--color-code-gray);
+}
+
+.token.prolog {
+ color: var(--color-code-orange);
+}
+
+.token.property {
+ color: var(--color-code-orange);
+}
+
+.token.pseudo-class {
+ color: var(--color-code-blue);
+}
+
+.token.pseudo-element {
+ color: var(--color-code-blue);
+}
+
+.token.punctuation {
+ color: var(--color-code-gray);
+}
+
+.token.regex {
+ color: var(--color-code-orange);
+}
+
+.token.selector {
+ color: var(--color-code-pink);
+}
+
+.token.string {
+ color: var(--color-text-accent);
+}
+
+.token.symbol {
+ color: var(--color-code-pink);
+}
+
+.token.tag {
+ color: var(--color-code-pink);
+}
+
+.token.unit {
+ color: var(--color-code-pink);
+}
+
+.token.url {
+ color: var(--color-code-violet);
+}
+
+.token.variable {
+ color: var(--color-code-pink);
+}
+
+/* CodePen iframe */
+.codepen a {
+ --icon-size: 1.2em;
+
+ display: flex;
+ align-items: center;
+ gap: var(--space-2xs);
+}
+
+.prose .cp_embed_wrapper,
+.prose .cp_embed_wrapper + script + *:not(h2) {
+ --flow-space: var(--space-l);
+}
+
+.cp_embed_wrapper {
+ grid-column: popout;
+ position: relative;
+ overflow: auto;
+ display: grid;
+ place-items: center;
+ grid-template-areas: 'container';
+ resize: horizontal;
+}
+
+.cp_embed_wrapper iframe {
+ grid-area: container;
+ width: 100%;
+}
diff --git a/src/assets/css/global/blocks/external-link.css b/src/assets/css/global/blocks/external-link.css
new file mode 100644
index 0000000..89cf8ca
--- /dev/null
+++ b/src/assets/css/global/blocks/external-link.css
@@ -0,0 +1,23 @@
+article
+ a[href^='http']:not([href*='localhost:8080']):not([href*='eleventy-excellent.netlify.app']):not(.button) {
+ padding-inline-end: 0.8em;
+}
+
+article
+ a[href^='http']:not([href*='localhost:8080']):not([href*='eleventy-excellent.netlify.app']):not(
+ .no-indicator
+ )::after {
+ position: absolute;
+ display: inline-block;
+ inline-size: 1em;
+ block-size: 1em;
+ background-image: url('/assets/images/template/external.svg');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 60% auto;
+ /* alternative text rules */
+ content: '(external link)';
+ overflow: hidden;
+ white-space: nowrap;
+ text-indent: 1em; /* the width of the icon */
+}
diff --git a/src/assets/css/global/blocks/main-nav.css b/src/assets/css/global/blocks/main-nav.css
new file mode 100644
index 0000000..da5fcac
--- /dev/null
+++ b/src/assets/css/global/blocks/main-nav.css
@@ -0,0 +1,197 @@
+.mainnav {
+ --nav-list-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+ position: var(--nav-position, absolute);
+ inset-inline-end: 0;
+ /* position depending on search button */
+ order: 1;
+}
+
+.mainnav:has([aria-expanded='true']) {
+ --nav-position: fixed;
+ inset-inline-end: var(--gap);
+}
+
+.mainnav ul {
+ /* configuration */
+ --gutter: var(--space-3xs);
+ --cluster-vertical-alignment: center;
+ --nav-list-background: var(--color-bg-accent);
+ --nav-list-shadow: -5px 0 11px 0 hsl(0 0% 0% / 0.2);
+ --nav-list-layout: column;
+ --nav-list-height: 100dvh;
+ --nav-list-padding: var(--space-2xl) var(--space-s);
+ --nav-list-position: fixed;
+ --nav-list-width: min(18rem, 100vw);
+ --nav-list-visibility: hidden;
+
+ background: var(--nav-list-background);
+ box-shadow: var(--nav-list-shadow);
+ display: flex;
+ flex-direction: var(--nav-list-layout);
+ flex-wrap: wrap;
+ block-size: var(--nav-list-height);
+ list-style: none;
+ margin: 0;
+ padding: var(--nav-list-padding);
+ position: var(--nav-list-position);
+ inset-block-start: 0;
+ inset-inline-end: 0;
+ inline-size: var(--nav-list-width);
+ opacity: 0;
+ transition:
+ opacity 0.3 var(--nav-list-timing-function),
+ visibility 0.3s ease-in-out;
+ visibility: var(--nav-list-visibility);
+}
+
+.mainnav ul[no-flash] {
+ transition: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .mainnav ul {
+ --nav-list-transform: translateX(100%);
+ opacity: 1;
+ transform: var(--nav-list-transform);
+ transition:
+ transform 0.5s var(--nav-list-timing-function),
+ visibility 0.3s linear;
+ }
+
+ .mainnav svg {
+ transition: transform 0.4s var(--nav-list-timing-function);
+ }
+}
+
+.mainnav [aria-expanded='true'] + ul {
+ --nav-list-visibility: visible;
+ --nav-list-transform: translateX(0);
+ opacity: 1;
+}
+
+.mainnav button {
+ --gutter: var(--space-2xs);
+ --cluster-vertical-alignment: center;
+ display: var(--nav-button-display, flex);
+ position: relative;
+ z-index: 2;
+ padding: var(--space-2xs) 0;
+ line-height: var(--leading-flat);
+}
+
+.mainnav span {
+ font-weight: var(--font-bold);
+ text-transform: uppercase;
+ font-family: var(--font-display);
+ font-size: var(--size-step-min-1);
+}
+
+.mainnav svg {
+ block-size: 0.9em;
+ color: var(--color-text);
+ stroke-width: 3;
+}
+
+.mainnav [aria-expanded='true'] svg {
+ transform: rotate(45deg);
+}
+
+.mainnav a {
+ /* configuration */
+ --nav-item-background: transparent;
+ --nav-item-text-color: var(--color-text);
+ --nav-item-padding: var(--space-2xs) var(--space-2xs);
+ --nav-item-decoration-color: transparent;
+
+ background: var(--nav-item-background);
+ color: var(--nav-item-text-color);
+ padding: var(--nav-item-padding);
+ display: block;
+ border-radius: var(--border-radius-small);
+ text-decoration-line: underline;
+ text-decoration-color: var(--nav-item-decoration-color);
+ text-decoration-thickness: 3px;
+ text-underline-offset: 0.2em;
+ font-weight: var(--font-medium);
+}
+
+.mainnav a:is(:hover, :focus) {
+ --nav-item-background: transparent;
+ --nav-item-text-color: var(--color-text);
+ --nav-item-decoration-color: var(--color-text);
+}
+
+.mainnav [aria-current='page'],
+.mainnav [data-state='active'] {
+ --nav-item-background: var(--color-text);
+ --nav-item-text-color: var(--color-light);
+ --nav-item-decoration-color: transparent;
+}
+
+.mainnav > ul:first-of-type > li:last-child a {
+ --nav-item-background: var(--color-blue);
+ --nav-item-padding: var(--space-4xs) var(--space-xs);
+ --nav-item-text-color: var(--color-light);
+}
+
+.mainnav > ul:first-of-type > li:last-child a:is(:hover, :focus),
+.mainnav > ul:first-of-type > li:last-child [aria-current='page'] {
+ --nav-item-background: var(--color-text);
+ --nav-item-decoration-color: transparent;
+ --nav-item-text-color: var(--color-bg);
+}
+
+/* Search Toggle Visibility */
+@media screen(navigation) {
+ .mainnav {
+ /* position depending on search button */
+ order: 0;
+ margin-inline-end: var(--space-xl);
+ --nav-position: static;
+ --nav-button-display: none;
+ }
+
+ .mainnav ul {
+ --nav-list-layout: row;
+ --nav-list-position: static;
+ --nav-list-padding: 0;
+ --nav-list-height: auto;
+ --nav-list-width: 100%;
+ --nav-list-shadow: none;
+ --nav-list-visibility: visible;
+ --nav-list-transform: translateX(0);
+ }
+
+ .mainnav [aria-current='page'],
+ .mainnav [data-state='active'] {
+ --nav-item-background: transparent;
+ --nav-item-text-color: var(--color-text);
+ --nav-item-decoration-color: var(--color-text);
+ }
+}
+
+/* Repeat the settings to provide a different styling when JavaScript is disabled or drawerNav is set to false. The selector
+assumes that the button doesn’t exist without JS, making the list the first child within the navigation. */
+
+.mainnav ul:first-child {
+ --nav-list-layout: row;
+ --nav-list-position: static;
+ --nav-list-padding: 0;
+ --nav-list-height: auto;
+ --nav-list-width: 100%;
+ --nav-list-shadow: none;
+ --nav-list-visibility: visible;
+ --nav-list-transform: translateX(0);
+}
+
+.mainnav ul:first-child [aria-current='page'],
+.mainnav ul:first-child [data-state='active'] {
+ --nav-item-background: transparent;
+ --nav-item-text-color: var(--color-text);
+ --nav-item-decoration-color: var(--color-text);
+}
+
+/* make menu wrap without drawer */
+.mainnav:has(ul:first-child) {
+ --nav-position: relative;
+}
diff --git a/src/assets/css/global/blocks/pagefind.css b/src/assets/css/global/blocks/pagefind.css
new file mode 100644
index 0000000..1a35d34
--- /dev/null
+++ b/src/assets/css/global/blocks/pagefind.css
@@ -0,0 +1,137 @@
+/* Search Toggle Visibility */
+@media screen(navigation) {
+ .search-toggle {
+ position: absolute;
+ right: 0;
+ }
+}
+
+@media screen(ltnav) {
+ .search-toggle {
+ display: flex;
+ justify-content: flex-start;
+ order: 0;
+ }
+}
+
+.search-toggle {
+ background: none;
+ border: none;
+ padding: var(--space-2xs);
+ cursor: pointer;
+}
+
+.search-toggle svg {
+ block-size: auto;
+}
+
+pagefind-search {
+ position: absolute;
+ inset-inline-end: 0;
+ top: 120%;
+ inline-size: min(100%, 25rem);
+}
+
+.pagefind-ui form {
+ display: flex;
+ position: relative;
+ block-size: var(--space-m);
+}
+
+.pagefind-ui form:before {
+ position: absolute;
+ inline-size: 1ch;
+ block-size: 1ch;
+ background-color: var(--color-text);
+ inset-block-start: 0.8ch;
+ inset-inline-start: 1ch;
+ content: '';
+ mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0ic2VhcmNoIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0yMSAyMS01LjE5Ny01LjE5N20wIDBBNy41IDcuNSAwIDEgMCA1LjE5NiA1LjE5NmE3LjUgNy41IDAgMCAwIDEwLjYwNyAxMC42MDdaIiAvPgo8L3N2Zz4K);
+}
+
+.pagefind-ui input {
+ padding-inline-start: 2.25rem;
+ padding-inline-end: 1rem;
+ inline-size: 100%;
+ border-radius: var(--border-radius-small);
+ border: 2px solid var(--color-bg-accent-2);
+ background-color: var(--color-bg-accent);
+ font-size: var(--size-step-min-1);
+ color: var(--color-text);
+}
+
+.pagefind-ui .pagefind-ui__results-area {
+ position: absolute;
+ inset-inline-start: 0;
+ inline-size: 100%;
+ margin-block-start: var(--space-l);
+ inset-inline-start: auto;
+ inset-inline-end: 0;
+ border-radius: var(--border-radius-small);
+ overflow: hidden;
+ border: 2px solid var(--color-bg-accent-2);
+ background-color: var(--color-bg-accent);
+}
+
+.pagefind-ui ol {
+ display: flex;
+ flex-direction: column;
+ max-block-size: 50vh;
+ overflow-y: auto;
+ gap: var(--space-2xs);
+ padding: var(--space-xs);
+}
+
+.pagefind-ui li {
+ list-style: none;
+ border-radius: var(--border-radius-small);
+ padding: var(--space-xs);
+ border: 1px solid var(--color-bg-accent-2);
+}
+
+.pagefind-ui li:hover,
+.pagefind-ui li:focus-within {
+ background-color: var(--color-bg-accent-2);
+ border: 1px solid var(--color-bg);
+}
+
+.pagefind-ui li:focus-within a:focus {
+ outline: none;
+}
+
+.pagefind-ui li {
+ position: relative;
+}
+
+.pagefind-ui li a:after {
+ position: absolute;
+ inset: 0;
+ content: '';
+}
+
+.pagefind-ui .pagefind-ui__result-title {
+ font-weight: var(--font-medium);
+ margin-block-end: var(--space-xs);
+}
+
+.pagefind-ui .pagefind-ui__result-excerpt {
+ font-size: var(--size-step-min-1);
+}
+
+.pagefind-ui .pagefind-ui__button,
+.pagefind-ui .pagefind-ui__search-clear,
+.pagefind-ui .pagefind-ui__message,
+.pagefind-ui .pagefind-ui__hidden {
+ display: none;
+}
+
+.pagefind-ui .pagefind-ui__message:has(+ ol:empty) {
+ display: block;
+ text-align: center;
+ color: var(--color-text);
+ padding: var(--space-xs);
+}
+
+.pagefind-ui .pagefind-ui__message + ol:empty {
+ display: none;
+}
diff --git a/src/assets/css/global/blocks/prose.css b/src/assets/css/global/blocks/prose.css
new file mode 100644
index 0000000..ee657d6
--- /dev/null
+++ b/src/assets/css/global/blocks/prose.css
@@ -0,0 +1,73 @@
+/* Based on Andy Bell, https://github.com/Andy-set-studio/personal-site-eleventy */
+
+.prose {
+ --flow-space: var(--space-s-m);
+}
+
+.prose :where(pre, pre + *, figure, figure + *) {
+ --flow-space: var(--space-m-l);
+}
+
+.prose figcaption {
+ font-size: var(--size-step-min-1);
+ text-align: center;
+ padding-block-end: var(--space-xs);
+ margin-block-end: var(--space-s);
+ border-bottom: 1px solid var(--color-bg-accent);
+}
+
+:where(.prose :is(h2, h3, h4)) {
+ --flow-space: var(--space-xl);
+}
+
+:where(.prose :is(h2 + *, h3 + *, h4 + *):not(figure)) {
+ --flow-space: var(--space-m);
+}
+
+.prose .heading-anchor:is(:hover, :focus) {
+ text-decoration: none;
+}
+
+.heading-anchor {
+ text-decoration: none;
+}
+
+.prose mark {
+ background-color: var(--color-gold);
+ color: var(--color-base-dark);
+}
+
+/* block space only for "regular lists" */
+.prose :not(.cluster):not(.grid) > li + li {
+ padding-block-start: var(--space-s-m);
+}
+
+/* inline space only for "regular lists" */
+.prose :where(ul:not(.grid), ol:not(.grid)) {
+ padding-inline-start: 1.2ch;
+}
+
+/* marker only for "regular lists" */
+.prose :where(ul:not(.grid):not([role='list'])) li::marker {
+ color: var(--color-blue);
+ content: '– ';
+}
+
+.prose ol li::marker {
+ color: var(--color-blue);
+}
+
+.prose img {
+ border-radius: var(--border-radius-small);
+}
+
+@media screen(ltnav) {
+ .prose > *,
+ .prose a {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+ /* Adds a hyphen where the word breaks, if supported (No Blink) */
+ hyphens: auto;
+ }
+}
diff --git a/src/assets/css/global/blocks/section.css b/src/assets/css/global/blocks/section.css
new file mode 100644
index 0000000..50e53db
--- /dev/null
+++ b/src/assets/css/global/blocks/section.css
@@ -0,0 +1,19 @@
+.section > .seperator:first-child {
+ transform: rotate(180deg) translateY(-1px);
+}
+
+.section__inner {
+ background-color: var(--spot-color, var(--color-bg-accent));
+ color: var(--color-text);
+}
+
+.section blockquote {
+ font-weight: var(--font-bold);
+ line-height: 1;
+ font-size: var(--size-step-4);
+ letter-spacing: var(--tracking-s);
+}
+
+.section :is(h1, h2, h3, blockquote) {
+ opacity: 95%;
+}
diff --git a/src/assets/css/global/blocks/seperator.css b/src/assets/css/global/blocks/seperator.css
new file mode 100644
index 0000000..ea9c3f8
--- /dev/null
+++ b/src/assets/css/global/blocks/seperator.css
@@ -0,0 +1,10 @@
+.seperator {
+ display: block;
+ block-size: 3.5em;
+ inline-size: 100%;
+ fill: var(--spot-color, var(--color-bg));
+}
+
+.section > .seperator {
+ transform: translateY(-1px);
+}
diff --git a/src/assets/css/global/blocks/site-footer.css b/src/assets/css/global/blocks/site-footer.css
new file mode 100644
index 0000000..4f5ec4b
--- /dev/null
+++ b/src/assets/css/global/blocks/site-footer.css
@@ -0,0 +1,45 @@
+.site-footer {
+ 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-3xs);
+}
+
+.site-footer svg {
+ stroke-width: 2;
+ 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);
+}
diff --git a/src/assets/css/global/blocks/site-header.css b/src/assets/css/global/blocks/site-header.css
new file mode 100644
index 0000000..b85770d
--- /dev/null
+++ b/src/assets/css/global/blocks/site-header.css
@@ -0,0 +1,4 @@
+.site-header {
+ background: var(--color-bg-accent);
+ z-index: 2;
+}
diff --git a/src/assets/css/global/blocks/site-logo.css b/src/assets/css/global/blocks/site-logo.css
new file mode 100644
index 0000000..97a3367
--- /dev/null
+++ b/src/assets/css/global/blocks/site-logo.css
@@ -0,0 +1,11 @@
+.logo {
+ --gutter: var(--space-xs);
+ padding: var(--space-2xs) 0;
+ font-size: var(--size-step-0);
+ text-decoration: none;
+ font-weight: var(--font-medium);
+}
+.logo svg {
+ color: var(--color-royal-blue-500);
+ block-size: auto;
+}
diff --git a/src/assets/css/global/blocks/skip-link.css b/src/assets/css/global/blocks/skip-link.css
new file mode 100644
index 0000000..0bfb428
--- /dev/null
+++ b/src/assets/css/global/blocks/skip-link.css
@@ -0,0 +1,35 @@
+.skip-link {
+ clip: rect(1px, 1px, 1px, 1px);
+ display: block;
+ block-size: 1px;
+ overflow: hidden;
+ position: absolute;
+ inline-size: 1px;
+ top: 1rem;
+ left: 1rem;
+ z-index: 999;
+}
+
+.skip-link:focus {
+ clip: auto;
+ block-size: auto;
+ overflow: visible;
+ inline-size: auto;
+ background-color: var(--color-text);
+ color: var(--color-bg);
+ padding: var(--space-xs) var(--space-s-m);
+ border-radius: var(--border-radius-small);
+ line-height: 1;
+}
+
+.skip-link:not(:focus) {
+ border: 0;
+ clip: rect(0 0 0 0);
+ block-size: auto;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ inline-size: 1px;
+ white-space: nowrap;
+}
diff --git a/src/assets/css/global/blocks/tag.css b/src/assets/css/global/blocks/tag.css
new file mode 100644
index 0000000..e13ced0
--- /dev/null
+++ b/src/assets/css/global/blocks/tag.css
@@ -0,0 +1,31 @@
+/* always in combination with .button */
+
+.taglist {
+ --gutter: var(--space-s-m);
+}
+
+.post-tag {
+ --button-bg: var(--color-text);
+ --button-text: var(--color-bg);
+ --button-border: var(--color-text);
+ font-size: var(--size-step-min-2);
+ text-transform: uppercase;
+ padding: 0.1rem 0.625rem;
+ font-weight: var(--font-bold);
+}
+
+.card .post-tag {
+ --button-bg: var(--color-bg-accent-2);
+ --button-text: var(--color-text);
+ --button-border: var(--color-bg-accent-2);
+}
+
+/* layout */
+
+.tags h1 {
+ font-size: var(--size-step-4);
+}
+
+.tags h2 {
+ font-size: var(--size-step-2);
+}
diff --git a/src/assets/css/global/blocks/textgradient.css b/src/assets/css/global/blocks/textgradient.css
new file mode 100644
index 0000000..b28d6b3
--- /dev/null
+++ b/src/assets/css/global/blocks/textgradient.css
@@ -0,0 +1,15 @@
+.gradient-text {
+ color: transparent;
+ background-image: var(--gradient-conic);
+ padding: 0.6rem 0;
+ background-size: 50%;
+ background-clip: text;
+}
+
+.gradient-text-linear {
+ color: transparent;
+ background-image: var(--gradient-rainbow);
+ background-size: 100%;
+ background-repeat: repeat;
+ background-clip: text;
+}
diff --git a/src/assets/css/global/blocks/theme-switch.css b/src/assets/css/global/blocks/theme-switch.css
new file mode 100644
index 0000000..3073229
--- /dev/null
+++ b/src/assets/css/global/blocks/theme-switch.css
@@ -0,0 +1,31 @@
+.theme-switch h2 {
+ font-size: var(--size-step-min-1);
+ font-family: var(--font-base);
+}
+
+.theme-switch .button {
+ --button-border-color: var(--color-text);
+ --button-border-width: 2px;
+ --button-color: var(--color-light);
+ --button-bg: var(--color-dark);
+ font-family: var(--font-display);
+ border-radius: var(--border-radius-small);
+ font-size: var(--size-step-min-2);
+ padding: 0.1rem 0.625rem;
+ font-weight: var(--font-semi-bold);
+ min-block-size: 1.5em;
+ text-transform: uppercase;
+}
+
+.theme-switch .button[aria-pressed='true'] {
+ --_color-primary-contrast: var(--color-royal-blue-600);
+ --button-bg: var(--_color-primary-contrast);
+ --button-color: var(--color-light);
+ --button-border-color: var(--_color-primary-contrast);
+ outline-color: var(--_color-primary-contrast);
+}
+
+/* Hide without JS */
+is-land:not(:defined) .theme-switch {
+ display: none;
+}
diff --git a/src/assets/css/global/compositions/cluster.css b/src/assets/css/global/compositions/cluster.css
new file mode 100644
index 0000000..0d3df5d
--- /dev/null
+++ b/src/assets/css/global/compositions/cluster.css
@@ -0,0 +1,24 @@
+/*
+CLUSTER
+More info: https://every-layout.dev/layouts/cluster/
+A layout that lets you distribute items with consitent
+spacing, regardless of their size
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--cluster-horizontal-alignment (flex-start) How items should align
+horizontally. Can be any acceptable flexbox aligmnent value.
+
+--cluster-vertical-alignment How items should align vertically.
+Can be any acceptable flexbox alignment value.
+*/
+
+:where(.cluster) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--gutter, var(--space-s-l));
+ justify-content: var(--cluster-horizontal-alignment, flex-start);
+ align-items: var(--cluster-vertical-alignment, center);
+}
diff --git a/src/assets/css/global/compositions/flow.css b/src/assets/css/global/compositions/flow.css
new file mode 100644
index 0000000..7259304
--- /dev/null
+++ b/src/assets/css/global/compositions/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/
+*/
+:where(.flow) > * + * {
+ margin-block-start: var(--flow-space, 1em);
+}
diff --git a/src/assets/css/global/compositions/grid.css b/src/assets/css/global/compositions/grid.css
new file mode 100644
index 0000000..0398bf2
--- /dev/null
+++ b/src/assets/css/global/compositions/grid.css
@@ -0,0 +1,39 @@
+/* AUTO GRID
+Related Every Layout: https://every-layout.dev/layouts/grid/
+More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
+A flexible layout that will create an auto-fill grid with
+configurable grid item sizes
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--grid-min-item-size (14rem): How large each item should be
+ideally, as a minimum.
+
+--grid-placement (auto-fill): Set either auto-fit or auto-fill
+to change how empty grid tracks are handled */
+
+:where(.grid) {
+ display: grid;
+ grid-template-columns: repeat(
+ var(--grid-placement, auto-fill),
+ minmax(var(--grid-min-item-size, 16rem), 1fr)
+ );
+ gap: var(--gutter, var(--space-s-m));
+}
+
+:where(.grid)[data-rows='masonry'] {
+ grid-template-rows: masonry;
+ align-items: start;
+}
+
+:where(.grid)[data-layout='50-50'] {
+ --grid-placement: auto-fit;
+ --grid-min-item-size: clamp(16rem, 50vw, 25rem);
+}
+
+:where(.grid)[data-layout='thirds'] {
+ --grid-placement: auto-fit;
+ --grid-min-item-size: clamp(16rem, 33%, 25rem);
+}
diff --git a/src/assets/css/global/compositions/repel.css b/src/assets/css/global/compositions/repel.css
new file mode 100644
index 0000000..4b7fbfc
--- /dev/null
+++ b/src/assets/css/global/compositions/repel.css
@@ -0,0 +1,24 @@
+/*
+REPEL
+A little layout that pushes items away from each other where
+there is space in the viewport and stacks on small viewports
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--repel-vertical-alignment How items should align vertically.
+Can be any acceptable flexbox alignment value.
+*/
+
+:where(.repel) {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: var(--repel-vertical-alignment, center);
+ gap: var(--gutter, var(--space-s-l));
+}
+
+:where(.repel)[data-nowrap] {
+ flex-wrap: nowrap;
+}
diff --git a/src/assets/css/global/compositions/sidebar.css b/src/assets/css/global/compositions/sidebar.css
new file mode 100644
index 0000000..2e953f4
--- /dev/null
+++ b/src/assets/css/global/compositions/sidebar.css
@@ -0,0 +1,51 @@
+/*
+SIDEBAR
+More info: https://every-layout.dev/layouts/sidebar/
+A layout that allows you to have a flexible main content area
+and a "fixed" width sidebar that sits on the left or right.
+If there is not enough viewport space to fit both the sidebar
+width *and* the main content minimum width, they will stack
+on top of each other
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-size-1)): This defines the space
+between the sidebar and main content.
+
+--sidebar-target-width (20rem): How large the sidebar should be
+
+--sidebar-content-min-width(50%): The minimum size of the main content area
+
+EXCEPTIONS
+.sidebar[data-direction='rtl']: flips the sidebar to be on the right
+*/
+
+:where(.sidebar) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--gutter, var(--space-s-l));
+}
+
+:where(.sidebar):not([data-direction]) > :first-child {
+ flex-basis: var(--sidebar-target-width, 20rem);
+ flex-grow: 1;
+}
+
+:where(.sidebar):not([data-direction]) > :last-child {
+ flex-basis: 0;
+ flex-grow: 999;
+ min-inline-size: var(--sidebar-content-min-width, 50%);
+}
+
+/*
+A flipped version where the sidebar is on the right
+*/
+:where(.sidebar)[data-direction='rtl'] > :last-child {
+ flex-basis: var(--sidebar-target-width, 20rem);
+ flex-grow: 1;
+}
+
+:where(.sidebar)[data-direction='rtl'] > :first-child {
+ flex-basis: 0;
+ flex-grow: 999;
+ min-inline-size: var(--sidebar-content-min-width, 50%);
+}
diff --git a/src/assets/css/global/compositions/wrapper.css b/src/assets/css/global/compositions/wrapper.css
new file mode 100644
index 0000000..a8c3af1
--- /dev/null
+++ b/src/assets/css/global/compositions/wrapper.css
@@ -0,0 +1,36 @@
+/* © Ryan Mulligan - https://ryanmulligan.dev/blog/layout-breakouts/ */
+
+.wrapper {
+ --wrapper-width: 53rem;
+ --gap: clamp(1rem, 6vw, 3rem);
+ --full: minmax(var(--gap), 1fr);
+ --content: min(var(--wrapper-width, 85rem), 100% - var(--gap) * 2);
+ --popout: minmax(0, 2rem);
+ --feature: minmax(0, 5rem);
+
+ display: grid;
+ grid-template-columns:
+ [full-start] var(--full)
+ [feature-start] var(--feature)
+ [popout-start] var(--popout)
+ [content-start] var(--content) [content-end]
+ var(--popout) [popout-end]
+ var(--feature) [feature-end]
+ var(--full) [full-end];
+}
+
+.wrapper > * {
+ grid-column: content;
+}
+
+.popout {
+ grid-column: popout;
+}
+
+.feature {
+ grid-column: feature;
+}
+
+.full {
+ grid-column: full;
+}
diff --git a/src/assets/css/global/global.css b/src/assets/css/global/global.css
new file mode 100644
index 0000000..09ba94f
--- /dev/null
+++ b/src/assets/css/global/global.css
@@ -0,0 +1,18 @@
+@import 'tailwindcss/base';
+
+@import 'base/reset.css';
+@import 'base/fonts.css';
+
+@import 'tailwindcss/components';
+
+@import 'base/variables.css';
+@import 'base/global-styles.css';
+
+@import-glob 'compositions/*.css';
+@import-glob 'blocks/*.css';
+@import-glob 'utilities/*.css';
+
+/* debugging */
+/* @import-glob 'tests/*.css'; */
+
+@import 'tailwindcss/utilities';
diff --git a/src/assets/css/global/tests/debug.css b/src/assets/css/global/tests/debug.css
new file mode 100644
index 0000000..5805413
--- /dev/null
+++ b/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 ?';
+}
+
+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 ?';
+}
+
+a[disabled] {
+ outline: var(--error-outline);
+ --error-anchor-disabled: 'The disabled property is not valid on anchors (links). Did you mean to use a ?';
+}
+
+label:not(:has(:is(input, output, textarea, select))):not([for]) {
+ outline: var(--error-outline);
+ --error-unassociated-label: 'The 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