Init

91 files changed, 5117 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ca2f874
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+site
+cache
+.env
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
new file mode 100644
index 0000000..e480ec8
--- /dev/null
+++ b/.oxfmtrc.json
@@ -0,0 +1,20 @@
+{
+        "$schema": "https://cdn.jsdelivr.net/npm/oxfmt@0.57.0/configuration_schema.json",
+        "ignorePatterns": ["submodules", "cache", "site"],
+        "useTabs": true,
+        "endOfLine": "lf",
+        "sortImports": {
+                "newlinesBetween": true,
+                "groups": [
+                        "type-import",
+                        ["value-builtin", "value-external"],
+                        "type-internal",
+                        "value-internal",
+                        ["type-parent", "type-sibling", "type-index"],
+                        ["value-parent", "value-sibling", "value-index"],
+                        "unknown"
+                ],
+                "internalPattern": ["~/", "@/", "$/", "#"]
+        },
+        "quoteProps": "consistent"
+}
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 0000000..c4522bb
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,12 @@
+{
+        "$schema": "https://cdn.jsdelivr.net/npm/oxlint@1.73.0/configuration_schema.json",
+        "ignorePatterns": [".zed", ".vscode", "submodules", "cache", "site", "*.scss"],
+        "plugins": ["eslint", "typescript", "unicorn", "oxc", "import"],
+        "categories": {
+                "correctness": "error"
+        },
+        "rules": {
+                "typescript/consistent-type-imports": "error",
+                "typescript/consistent-type-definitions": "error"
+        }
+}
diff --git a/.zed/settings.json b/.zed/settings.json
new file mode 100644
index 0000000..3013fe6
--- /dev/null
+++ b/.zed/settings.json
@@ -0,0 +1,184 @@
+// Folder-specific settings
+//
+// For a full list of overridable settings, and general information on folder-specific settings,
+// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
+{
+        "languages": {
+                "MDX": {
+                        "format_on_save": "on",
+                        "prettier": {
+                                "allowed": false
+                        },
+                        "formatter": [
+                                {
+                                        "code_action": "source.fixAll.oxc"
+                                },
+                                {
+                                        "language_server": {
+                                                "name": "oxfmt"
+                                        }
+                                }
+                        ]
+                },
+                "JavaScript": {
+                        "language_servers": [
+                                "deno",
+                                "oxfmt",
+                                "!typescript-language-server",
+                                "!vtsls",
+                                "!eslint",
+                                "!codebook",
+                                "..."
+                        ],
+                        "format_on_save": "on",
+                        "prettier": {
+                                "allowed": false
+                        },
+                        "formatter": [
+                                {
+                                        "code_action": "source.fixAll.oxc"
+                                },
+                                {
+                                        "language_server": {
+                                                "name": "oxfmt"
+                                        }
+                                }
+                        ]
+                },
+                "TypeScript": {
+                        "language_servers": [
+                                "deno",
+                                "oxfmt",
+                                "!typescript-language-server",
+                                "!vtsls",
+                                "!eslint",
+                                "!codebook",
+                                "..."
+                        ],
+                        "format_on_save": "on",
+                        "prettier": {
+                                "allowed": false
+                        },
+                        "formatter": [
+                                {
+                                        "code_action": "source.fixAll.oxc"
+                                },
+                                {
+                                        "language_server": {
+                                                "name": "oxfmt"
+                                        }
+                                }
+                        ]
+                },
+                "TSX": {
+                        "language_servers": [
+                                "deno",
+                                "oxfmt",
+                                "!typescript-language-server",
+                                "!vtsls",
+                                "!eslint",
+                                "!codebook",
+                                "..."
+                        ],
+                        "format_on_save": "on",
+                        "prettier": {
+                                "allowed": false
+                        },
+                        "formatter": [
+                                {
+                                        "code_action": "source.fixAll.oxc"
+                                },
+                                {
+                                        "language_server": {
+                                                "name": "oxfmt"
+                                        }
+                                }
+                        ]
+                },
+                "JSON": {
+                        "language_servers": ["!codebook", "..."],
+                        "format_on_save": "on",
+                        "prettier": {
+                                "allowed": false
+                        },
+                        "formatter": [
+                                {
+                                        "code_action": "source.fixAll.oxc"
+                                },
+                                {
+                                        "language_server": {
+                                                "name": "oxfmt"
+                                        }
+                                }
+                        ]
+                },
+                "JSONC": {
+                        "format_on_save": "on",
+                        "prettier": {
+                                "allowed": false
+                        },
+                        "formatter": [
+                                {
+                                        "code_action": "source.fixAll.oxc"
+                                },
+                                {
+                                        "language_server": {
+                                                "name": "oxfmt"
+                                        }
+                                }
+                        ]
+                },
+                "SCSS": {
+                        "format_on_save": "on",
+                        "prettier": {
+                                "allowed": false
+                        },
+                        "formatter": [
+                                {
+                                        "code_action": "source.fixAll.oxc"
+                                },
+                                {
+                                        "language_server": {
+                                                "name": "oxfmt"
+                                        }
+                                }
+                        ]
+                }
+        },
+        "lsp": {
+                "deno": {
+                        "settings": {
+                                "deno": {
+                                        "enable": true
+                                }
+                        }
+                },
+                "oxlint": {
+                        "initialization_options": {
+                                "settings": {
+                                        "configPath": null,
+                                        "run": "onType",
+                                        "disableNestedConfig": false,
+                                        "fixKind": "safe_fix",
+                                        "typeAware": true,
+                                        "unusedDisableDirectives": "deny"
+                                }
+                        }
+                },
+                "oxfmt": {
+                        "initialization_options": {
+                                "settings": {
+                                        "fmt.configPath": null,
+                                        "run": "onSave"
+                                }
+                        }
+                },
+                "mdx-analyzer": {
+                        "initialization_options": {
+                                "typescript": {
+                                        "enabled": true
+                                }
+                        }
+                }
+        }
+}
diff --git a/.zed/tasks.json b/.zed/tasks.json
new file mode 100644
index 0000000..b706900
--- /dev/null
+++ b/.zed/tasks.json
@@ -0,0 +1,8 @@
+// Project tasks configuration. See https://zed.dev/docs/tasks for documentation.
+[
+        {
+                "label": "Serve",
+                "command": "deno",
+                "args": ["run", "serve"]
+        }
+]
diff --git a/corvos.config.ts b/corvos.config.ts
new file mode 100644
index 0000000..deae101
--- /dev/null
+++ b/corvos.config.ts
@@ -0,0 +1,80 @@
+import "https://deno.land/std@0.224.0/dotenv/load.ts";
+import type { Page } from "corvos";
+
+import { Pipeline, Site } from "corvos";
+import { assets } from "corvos/plugins/assets.ts";
+import { brotli } from "corvos/plugins/brotli.ts";
+import { cache } from "corvos/plugins/cache.ts";
+import { esbuild } from "corvos/plugins/esbuild.ts";
+import { feeds } from "corvos/plugins/feeds.ts";
+import { gzip } from "corvos/plugins/gzip.ts";
+import { hash } from "corvos/plugins/hash.ts";
+import { icons } from "corvos/plugins/icons.ts";
+import { images } from "corvos/plugins/images.ts";
+import { jsx } from "corvos/plugins/jsx.ts";
+import { markdown } from "corvos/plugins/markdown.ts";
+import { mdx } from "corvos/plugins/mdx.ts";
+import { modules } from "corvos/plugins/modules.ts";
+import { queryBuilder } from "corvos/plugins/query_builder.ts";
+import { sass } from "corvos/plugins/sass.ts";
+import { sitemap } from "corvos/plugins/sitemap.ts";
+import { templates } from "corvos/plugins/templates.ts";
+import { transformImages } from "corvos/plugins/transform_images.ts";
+import { urls } from "corvos/plugins/urls.ts";
+
+import type { Node } from "$/deps/strapi.tsx";
+import type { PageData } from "$/schemas/mod.ts";
+
+import { strapi } from "$/deps/strapi.tsx";
+import { pageDataSchema } from "$/schemas/mod.ts";
+
+const assetPipeline = Pipeline.create()
+        .use(cache())
+
+        .use(assets())
+        .use(hash())
+
+        .use(esbuild())
+        .use(sass())
+        .use(icons())
+        .use(
+                images({
+                        allowedOrigins: ["strapi.volpeon.ink"],
+                        defaults: { formats: ["avif", "webp", "png"], densities: [1, 2] },
+                }),
+        )
+        .use(transformImages())
+
+        .use(brotli())
+        .use(gzip());
+
+const pagePipeline = Pipeline.create()
+        // Helpers
+        .use(queryBuilder())
+
+        // Content
+        .use(modules<Page<".strapi", Node[], PageData> | Page<".", Uint8Array<ArrayBuffer>>>())
+        .use(markdown({ frontmatterSchema: pageDataSchema }))
+        .use(mdx({ frontmatterSchema: pageDataSchema }))
+        .use(strapi())
+        .use(jsx())
+        .use(urls({ base: new URL("https://corvos.volpeon.ink/") }))
+
+        // Page listings
+        .use(feeds<{ type: "releases" }>())
+        .use(sitemap())
+
+        // Templates
+        .use(templates())
+        .use(jsx())
+
+        .use(brotli())
+        .use(gzip());
+
+const site = new Site({
+        assetPipeline,
+        pagePipeline,
+        redirects: [[/^\/(scripts|styles)\//, "/assets/"]],
+});
+
+export default site;
diff --git a/deno.json b/deno.json
new file mode 100644
index 0000000..caf143e
--- /dev/null
+++ b/deno.json
@@ -0,0 +1,84 @@
+{
+        "$schema": "https://raw.githubusercontent.com/denoland/deno/refs/heads/main/cli/schemas/config-file.v1.json",
+        "imports": {
+                "$/": "./src/",
+                "@/corvos.config.ts": "./corvos.config.ts",
+                "@std/datetime": "jsr:@std/datetime@^0.225.7",
+                "@std/encoding": "jsr:@std/encoding@^1.0.11",
+                "@std/streams": "jsr:@std/streams@^1.1.1",
+                "@types/alpinejs": "npm:@types/alpinejs@^3.13.11",
+                "@zip-js/zip-js": "jsr:@zip-js/zip-js@^2.8.26",
+                "alpinejs": "npm:alpinejs@^3.15.12",
+                "arktype": "npm:arktype@2.2.3",
+                "corvos": "../corvos/mod.ts",
+                "corvos/": "../corvos/",
+                "corvos/jsx-runtime": "../corvos/jsx-runtime.ts",
+                "include-media/": "https://raw.githubusercontent.com/eduardoboucas/include-media/refs/heads/master/",
+                "iro-sass/": "https://git.wyvern.rip/iro-sass/plain/src/",
+                "iro-design/": "https://git.wyvern.rip/iro-design/plain/src/",
+                "mrmime": "npm:mrmime@^2.0.1",
+                "oxfmt": "npm:oxfmt@^0.58.0",
+                "oxlint": "npm:oxlint@^1.73.0"
+        },
+        "permissions": {
+                "corvos": {
+                        "read": true,
+                        "write": ["./"],
+                        "import": [
+                                "cdn.jsdelivr.net:443",
+                                "jsr.io:443",
+                                "deno.land:443",
+                                "esm.sh:443",
+                                "corvos.wyvern.rip:443"
+                        ],
+                        "net": [
+                                "0.0.0.0",
+                                "cdn.jsdelivr.net:443",
+                                "data.jsdelivr.com:443",
+                                "jsr.io:443",
+                                "deno.land:443",
+                                "esm.sh:443",
+                                "registry.npmjs.org:443",
+                                "raw.githubusercontent.com:443",
+                                "git.wyvern.rip:443",
+                                "strapi.volpeon.ink:443",
+                                "icy.wyvern.rip:443",
+                                "public.api.bsky.app:443",
+                                "127.0.0.1:1337"
+                        ],
+                        "env": true,
+                        "run": true,
+                        "ffi": true,
+                        "sys": true
+                }
+        },
+        "tasks": {
+                "corvos": {
+                        "description": "Run corvos command",
+                        "command": "deno run -P=corvos corvos/cli.ts"
+                },
+                "build": {
+                        "description": "Build the site for production",
+                        "command": "deno task corvos"
+                },
+                "serve": {
+                        "description": "Run and serve the site for development",
+                        "command": "deno task corvos -s"
+                }
+        },
+        "compilerOptions": {
+                "types": ["@types/alpinejs"],
+                "lib": ["deno.window", "deno.unstable", "node", "dom"],
+                "jsx": "react-jsx",
+                "jsxImportSource": "corvos",
+                "strict": true,
+                "noUncheckedIndexedAccess": true
+        },
+        "unstable": ["temporal", "fmt-component"],
+        "lock": false,
+        "lint": {
+                "rules": {
+                        "exclude": ["no-import-prefix", "ban-types", "jsx-key"]
+                }
+        }
+}
diff --git a/src/assets/InterVariable-Italic.woff2 b/src/assets/InterVariable-Italic.woff2
new file mode 100644
index 0000000..b3530f3
--- /dev/null
+++ b/src/assets/InterVariable-Italic.woff2
diff --git a/src/assets/InterVariable.woff2 b/src/assets/InterVariable.woff2
new file mode 100644
index 0000000..5a8d3e7
--- /dev/null
+++ b/src/assets/InterVariable.woff2
diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
new file mode 100644
index 0000000..ec8d3f1
--- /dev/null
+++ b/src/assets/favicon.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+    <path
+        d="M26.993,16L22.988,11.995L18.219,11.995L22.224,16L16.86,16L30.001,29.141L27.141,32L19.808,32L24.277,27.531L19.758,23.012L15.187,23.012L17.589,25.413L11.002,32L11.002,28.396L12.559,26.839L8.274,22.554L10.739,20.088L6.013,15.362L7.483,13.891L4.604,11.009L1.517,11.009L0,9.492L6.006,3.486L6.006,6.006L10.008,6.005L10.008,7.272L12.005,9.269L14.002,7.272L14.002,0L18.432,0L16.438,1.994L20.427,1.994L34.435,16L26.993,16ZM28,17L32,21L27.231,21L23.231,17L28,17Z" />
+    <style>
+        path {
+            fill: #000;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            path {
+                fill: #FFF;
+            }
+        }
+    </style>
+</svg>
diff --git a/src/assets/symbols.svg b/src/assets/symbols.svg
new file mode 100644
index 0000000..e54a7e3
--- /dev/null
+++ b/src/assets/symbols.svg
@@ -0,0 +1,413 @@
+<svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xml:space="preserve"
+        xmlns:serif="http://www.serif.com/"
+>
+    <symbol id="logo" viewBox="0 0 2700 600" preserveAspectRatio="xMinYMin">
+        <use href="#logo-sm" />
+
+        <path
+                        d="M798.1,165.25L872.79,165.25L906.285,257.65L938.24,343.89L932.08,343.89L963.65,257.65L997.53,165.25L1071.45,165.25L969.04,434.75L900.51,434.75L798.1,165.25Z"
+                        style="fill:currentColor;"
+                />
+        <path
+                        d="M1223.14,440.14C1194.91,440.14 1169.82,434.173 1147.87,422.238C1125.93,410.303 1108.73,393.683 1096.28,372.38C1083.83,351.077 1077.61,326.95 1077.61,300C1077.61,272.793 1083.83,248.603 1096.28,227.428C1108.73,206.253 1125.99,189.698 1148.07,177.762C1170.14,165.827 1195.16,159.86 1223.14,159.86C1251.12,159.86 1276.08,165.827 1298.02,177.762C1319.97,189.698 1337.16,206.253 1349.61,227.428C1362.06,248.603 1368.29,272.793 1368.29,300C1368.29,326.95 1362.06,351.077 1349.61,372.38C1337.16,393.683 1319.97,410.303 1298.02,422.238C1276.08,434.173 1251.12,440.14 1223.14,440.14ZM1223.14,375.46C1237.51,375.46 1250.35,372.252 1261.64,365.835C1272.93,359.418 1281.72,350.499 1288.01,339.078C1294.3,327.656 1297.44,314.63 1297.44,300C1297.44,285.37 1294.3,272.344 1288.01,260.923C1281.72,249.501 1272.93,240.582 1261.64,234.165C1250.35,227.748 1237.51,224.54 1223.14,224.54C1208.77,224.54 1195.93,227.748 1184.64,234.165C1173.35,240.582 1164.49,249.501 1158.08,260.923C1151.66,272.344 1148.45,285.37 1148.45,300C1148.45,314.63 1151.66,327.656 1158.08,339.078C1164.49,350.499 1173.35,359.418 1184.64,365.835C1195.93,372.252 1208.77,375.46 1223.14,375.46Z"
+                        style="fill:currentColor;"
+                />
+        <path
+                        d="M1413.71,165.25L1483.02,165.25L1483.02,399.715L1453.37,370.07L1596.59,370.07L1596.59,434.75L1413.71,434.75L1413.71,165.25Z"
+                        style="fill:currentColor;"
+                />
+        <path
+                        d="M1637.79,165.25L1747.12,165.25C1768.94,165.25 1788.13,169.292 1804.68,177.378C1821.24,185.463 1834.01,197.012 1842.99,212.028C1851.97,227.043 1856.47,244.56 1856.47,264.58C1856.47,284.6 1851.97,302.117 1842.99,317.133C1834.01,332.148 1821.24,343.698 1804.68,351.783C1788.13,359.868 1768.94,363.91 1747.12,363.91L1668.2,363.91L1668.2,305.005L1740.97,305.005C1755.34,305.005 1766.5,301.476 1774.46,294.418C1782.42,287.359 1786.39,277.542 1786.39,264.965C1786.39,252.388 1782.35,242.571 1774.27,235.513C1766.18,228.454 1755.08,224.925 1740.97,224.925L1668.2,224.925L1706.32,185.655L1706.32,331.955L1707.09,340.81L1707.09,434.75L1637.79,434.75L1637.79,165.25Z"
+                        style="fill:currentColor;"
+                />
+        <path
+                        d="M1897.66,165.25L2078.22,165.25L2078.22,222.23L1927.31,222.23L1966.19,183.73L1966.19,416.27L1927.31,377L2082.46,377L2082.46,434.75L1897.66,434.75L1897.66,165.25ZM1935.39,269.97L2067.83,269.97L2067.83,326.565L1935.39,326.565L1935.39,269.97Z"
+                        style="fill:currentColor;"
+                />
+        <path
+                        d="M2259.18,440.14C2230.94,440.14 2205.85,434.173 2183.91,422.238C2161.96,410.303 2144.77,393.683 2132.32,372.38C2119.87,351.077 2113.64,326.95 2113.64,300C2113.64,272.793 2119.87,248.603 2132.32,227.428C2144.77,206.253 2162.03,189.698 2184.1,177.762C2206.17,165.827 2231.2,159.86 2259.18,159.86C2287.15,159.86 2312.11,165.827 2334.06,177.762C2356,189.698 2373.2,206.253 2385.65,227.428C2398.1,248.603 2404.32,272.793 2404.32,300C2404.32,326.95 2398.1,351.077 2385.65,372.38C2373.2,393.683 2356,410.303 2334.06,422.238C2312.11,434.173 2287.15,440.14 2259.18,440.14ZM2259.18,375.46C2273.55,375.46 2286.38,372.252 2297.68,365.835C2308.97,359.418 2317.76,350.499 2324.05,339.078C2330.34,327.656 2333.48,314.63 2333.48,300C2333.48,285.37 2330.34,272.344 2324.05,260.923C2317.76,249.501 2308.97,240.582 2297.68,234.165C2286.38,227.748 2273.55,224.54 2259.18,224.54C2244.8,224.54 2231.97,227.748 2220.68,234.165C2209.38,240.582 2200.53,249.501 2194.11,260.923C2187.69,272.344 2184.49,285.37 2184.49,300C2184.49,314.63 2187.69,327.656 2194.11,339.078C2200.53,350.499 2209.38,359.418 2220.68,365.835C2231.97,372.252 2244.8,375.46 2259.18,375.46Z"
+                        style="fill:currentColor;"
+                />
+        <path
+                        d="M2449.75,165.25L2507.12,165.25L2623,322.715L2617.99,323.485L2617.99,165.25L2686.53,165.25L2686.53,434.75L2629.16,434.75L2512.89,275.745L2518.28,274.59L2518.28,434.75L2449.75,434.75L2449.75,165.25Z"
+                        style="fill:currentColor;"
+                />
+    </symbol>
+
+    <symbol id="logo-sm" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin">
+        <path
+                        d="M171.812,105.796L144.61,78.594L115.919,78.594L137.325,100L105.375,100L189.94,184.565L174.505,200L125.258,200L153.187,172.07L124.939,143.822L94.919,143.822L109.929,158.832L68.762,200L68.762,177.478L78.493,167.746L51.71,140.963L67.12,125.552L37.579,96.012L45.759,87.832L29.112,71.185L11.859,71.185L0,59.326L44.124,15.201L44.124,34.031L67.12,34.031L67.12,45.45L78.695,57.025L90.269,45.45L90.269,0L115.201,0L100,15.201L130.405,15.201L150.785,35.579L123.803,35.573L143.829,55.6L170.86,55.651L221.016,105.796L171.812,105.796ZM31.055,43.344C26.613,43.344 23.006,46.951 23.006,51.393C23.006,55.836 26.613,59.443 31.055,59.443C35.498,59.443 39.105,55.836 39.105,51.393C39.105,46.951 35.498,43.344 31.055,43.344ZM178.102,112.047L200,133.945L171.309,133.945L149.411,112.047L178.102,112.047Z"
+                        style="fill:currentColor"
+                />
+    </symbol>
+
+    <symbol id="site-footer" viewBox="0 0 3840 1600" preserveAspectRatio="xMidYMax">
+        <rect
+                        x="0"
+                        y="1360"
+                        width="3840"
+                        height="240"
+                        style="fill:var(--site-footer--bg, rgb(41,39,45));"
+                />
+
+        <g id="Moon" style="transform: translateY(var(--site-footer--moon-y, 0px));">
+            <g>
+                <circle
+                                        cx="1043.51"
+                                        cy="677.436"
+                                        r="141.34"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+            </g>
+        </g>
+        <g id="Stars" style="transform: translateY(var(--site-footer--star-y, 0px));">
+            <g>
+                <circle
+                                        cx="1699.27"
+                                        cy="544.216"
+                                        r="5.328"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="1646.14"
+                                        cy="856.455"
+                                        r="5.328"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="2416.95"
+                                        cy="623.907"
+                                        r="5.328"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="3379.97"
+                                        cy="783.855"
+                                        r="5.328"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="2736.62"
+                                        cy="912.99"
+                                        r="5.328"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="3016.91"
+                                        cy="533.56"
+                                        r="5.328"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="1484.2"
+                                        cy="778.528"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="1100.74"
+                                        cy="981.29"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="196.68"
+                                        cy="942.185"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="774.638"
+                                        cy="1080.71"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="851.735"
+                                        cy="860.82"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="371.871"
+                                        cy="584.434"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="1720.66"
+                                        cy="1145.82"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="1764.59"
+                                        cy="711.93"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="2262.17"
+                                        cy="666.541"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="2691.87"
+                                        cy="647.565"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="3088.24"
+                                        cy="866.505"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="3657.07"
+                                        cy="834.16"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="3542.12"
+                                        cy="553.771"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="2958.94"
+                                        cy="963.22"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+                <circle
+                                        cx="2434.39"
+                                        cy="1041.53"
+                                        r="2.664"
+                                        style="fill:var(--site-footer--star, #fff);"
+                                />
+            </g>
+        </g>
+        <g id="Cloud" style="transform: translateY(var(--site-footer--cloud-y, 0px));">
+            <g>
+                <path
+                                        d="M1046.44,761.258C1037.57,738.638 1015.54,722.604 989.792,722.604C982.836,722.604 976.151,723.774 969.923,725.928C952.459,692.734 917.626,670.076 877.543,670.076C865.972,670.076 854.839,671.965 844.434,675.449C809.767,624.335 751.197,590.721 684.839,590.721C616.252,590.721 555.986,626.63 521.832,680.658C499.625,658.932 469.24,645.533 435.749,645.533C370.278,645.533 316.673,696.743 312.838,761.258L1046.44,761.258Z"
+                                        style="fill:var(--site-footer--cloud, #36343A);"
+                                />
+            </g>
+        </g>
+        <g
+                        id="Cloud1"
+                        serif:id="Cloud"
+                        style="transform: translateY(var(--site-footer--cloud-y, 0px));"
+                >
+            <g>
+                <path
+                                        d="M3238.9,776.138C3237.32,733.626 3202.31,699.598 3159.41,699.598C3148.5,699.598 3138.09,701.801 3128.62,705.787C3102.93,655.293 3050.46,620.67 2989.97,620.67C2935.04,620.67 2886.73,649.214 2859.07,692.265C2845.15,684.431 2829.09,679.961 2812,679.961C2776.74,679.961 2745.89,698.974 2729.14,727.298C2720.82,723.501 2711.58,721.385 2701.84,721.385C2669.26,721.385 2642.18,745.067 2636.87,776.138L3238.9,776.138Z"
+                                        style="fill:var(--site-footer--cloud, #36343A);"
+                                />
+            </g>
+        </g>
+        <g
+                        id="Cloud2"
+                        serif:id="Cloud"
+                        style="transform: translateY(var(--site-footer--cloud-y, 0px));"
+                >
+            <g>
+                <path
+                                        d="M1781.38,740.368C1781.53,738.122 1781.6,735.858 1781.6,733.577C1781.6,675.957 1734.82,629.178 1677.2,629.178C1659.2,629.178 1642.27,633.742 1627.48,641.774C1606.62,610.476 1571,589.839 1530.61,589.839C1478.27,589.839 1433.97,624.469 1419.37,672.044C1404.68,661.872 1386.85,655.911 1367.64,655.911C1319.61,655.911 1280.22,693.19 1276.85,740.368L1781.38,740.368Z"
+                                        style="fill:var(--site-footer--cloud, #36343A);"
+                                />
+            </g>
+        </g>
+        <g id="BG" style="transform: translateY(var(--site-footer--l1-y, 0px));">
+            <g>
+                <path
+                                        d="M0,1404.44L50.539,1404.44L103.371,1345.75L135.693,1345.75L181.301,1279.9L1049.31,1279.9L1111.63,1351.9L1509.23,1351.9L1553.81,1404.44L1813.22,1404.44L1864.66,1330.21L2171.38,1330.21L2224.59,1262.98L2577.01,1262.98L2674.55,1367.11L2992.16,1367.11L3027.66,1404.44L3840,1404.44L3840,2000L0,2000L0,1404.44Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+                <path
+                                        d="M849.371,1111.33L898.466,1310.88L800.276,1310.88L849.371,1111.33Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+                <path
+                                        d="M931.197,1192.12L980.292,1391.67L882.102,1391.67L931.197,1192.12Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+                <path
+                                        d="M1236.74,1223.18L1285.84,1422.73L1187.64,1422.73L1236.74,1223.18Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+                <path
+                                        d="M1365.43,1175.49L1414.53,1375.05L1316.34,1375.05L1365.43,1175.49Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+                <path
+                                        d="M2460.51,1102.33L2509.61,1301.89L2411.42,1301.89L2460.51,1102.33Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+                <path
+                                        d="M2369.71,1151.81L2418.8,1351.37L2320.61,1351.37L2369.71,1151.81Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+                <path
+                                        d="M3748.44,1235.46L3797.53,1435.02L3699.35,1435.02L3748.44,1235.46Z"
+                                        style="fill:var(--site-footer--l1, rgb(24,22,29));"
+                                />
+            </g>
+        </g>
+        <g id="Dragon-Awake" serif:id="Dragon Awake">
+            <g>
+                <path
+                                        d="M3129.18,1304.49C3129.18,1304.49 3135.89,1291.42 3162.48,1239.64C3189.58,1186.9 3176.08,1147.44 3135.34,1147.44L3067.07,1147.44L3056.05,1131.05L3072.58,1111.46C3072.58,1092.59 3083.19,1074.18 3095.14,1067.91L3095.14,1092.76L3103.87,1092.76C3114.47,1077.86 3130.57,1067.91 3144.76,1067.91L3130.66,1098.47L3162.79,1098.47L3153.57,1111.46L3187.93,1121.1L3175.42,1131.05L3220.77,1160.43L3347.94,1067.91C3347.94,1067.91 3324.76,1097.7 3295.98,1134.5C3255.53,1186.21 3279,1230.05 3340.18,1206.24C3364.42,1196.81 3386.19,1188.58 3386.19,1188.58L3249.46,1337.7L3129.18,1337.7L3129.18,1304.49ZM3109.76,1105.31C3103.54,1105.31 3098.5,1110.36 3098.5,1116.58C3098.5,1122.79 3103.54,1127.84 3109.76,1127.84C3115.98,1127.84 3121.03,1122.79 3121.03,1116.58C3121.03,1110.36 3115.98,1105.31 3109.76,1105.31Z"
+                                        style="fill:var(--site-footer--dragon-awake, transparent);"
+                                />
+                <path
+                                        d="M3117.9,1156.8C3131.98,1162.99 3136.11,1180.55 3124.53,1195.94L3137.91,1195.94C3134.63,1214.49 3139.03,1229.93 3153.92,1239.94C3147.6,1240.52 3139.46,1238.69 3134.46,1235.24L3081.9,1337.7L3036.77,1337.7L3036.77,1304.49L3068.03,1216.52L3117.9,1156.8Z"
+                                        style="fill:var(--site-footer--dragon-awake, transparent);"
+                                />
+                <path
+                                        d="M3283.36,1337.7L3312.28,1306.45L3312.28,1322.65C3344.81,1287.03 3380.18,1295.56 3397.01,1337.7L3283.36,1337.7Z"
+                                        style="fill:var(--site-footer--dragon-awake, transparent);"
+                                />
+            </g>
+        </g>
+        <g id="Dragon-Asleep" serif:id="Dragon Asleep">
+            <g>
+                <circle
+                                        cx="3309.17"
+                                        cy="1197.08"
+                                        r="15.426"
+                                        style="fill:var(--site-footer--dragon-asleep--eye, #fff);"
+                                />
+                <path
+                                        d="M2994.68,1254.32C3066.74,1218.37 3133.74,1254.32 3178.54,1254.32C3208.13,1254.32 3219.6,1240.67 3249.2,1240.67L3281.09,1240.67C3298.06,1240.67 3315.37,1261.06 3324.43,1261.06C3333.5,1261.06 3341.03,1253.52 3341.03,1244.46C3341.03,1235.39 3333.5,1227.86 3324.43,1227.86L3266.35,1227.86L3255.32,1211.48L3271.86,1191.88C3271.86,1173.02 3282.47,1154.61 3294.41,1148.34L3294.41,1173.18L3303.14,1173.18C3313.75,1158.28 3329.85,1148.34 3344.04,1148.34L3329.93,1178.9L3362.07,1178.9L3352.84,1191.88L3387.21,1201.52L3374.7,1211.48C3374.7,1211.48 3384.74,1223.8 3398.51,1240.67C3414.68,1260.47 3420.79,1278.2 3420.79,1303.77L3466.54,1303.77C3491.29,1303.77 3504.57,1307.41 3515.99,1332.43L2848.75,1332.43C2756.41,1332.43 2733.27,1542.79 2629.7,1542.79L2473.31,1542.79C2501.14,1485.67 2551.42,1477.75 2592.95,1527.35L2605.71,1507.26C2605.71,1519.21 2614.89,1530.05 2626.85,1530.05C2706.65,1530.05 2716.87,1302.62 2846.08,1280.36C2908.65,1269.58 2955.39,1273.92 2994.68,1254.32ZM3309.04,1185.73C3302.82,1185.73 3297.77,1190.78 3297.77,1197C3297.77,1203.22 3302.82,1208.26 3309.04,1208.26C3315.26,1208.26 3320.3,1203.22 3320.3,1197C3320.3,1190.78 3315.26,1185.73 3309.04,1185.73Z"
+                                        style="fill:var(--site-footer--dragon-asleep, #000);"
+                                />
+            </g>
+        </g>
+        <path
+                        id="FG"
+                        d="M1426.79,1449.74L1598.5,1449.74L1684.36,1540L1808.3,1540L1817.66,1516.69L1878.3,1521.85L1884.85,1540L2335.12,1540L2379.15,1467.78L2477.43,1496.57L2494.17,1540L2670.66,1540L2751.39,1427.41L2783.87,1427.41L2816.63,1330.21L3536.24,1330.21L3630.37,1415.61L3659.42,1477.48L3840,1477.48L3840,2000L0,2000L0,1477.48L169.867,1477.48L237.724,1380.1L740.493,1380.1L800.556,1449.74L1094.6,1449.74L1119.79,1485.2L1247.73,1485.2L1270.13,1449.74L1288.6,1390.04L1355.63,1358.1L1382.43,1408.08L1417.17,1422.49L1426.79,1449.74Z"
+                        style="fill:var(--site-footer--fg, #000);"
+                />
+        <g id="Grass">
+            <g>
+                <path
+                                        d="M1964.26,1447.6C1964.5,1447.67 1964.76,1447.65 1964.99,1447.73C1965,1447.73 1966.48,1448.43 1968.05,1449.28C1994.05,1463.24 2010.58,1495.73 2012.41,1534.31C2012.76,1541.77 2012.39,1546.56 2012.39,1546.58C2012.21,1547.21 2012.14,1547.88 2011.84,1548.47C2011.7,1548.74 2010.91,1550.28 2008.97,1550.91C2006.97,1551.56 2005.38,1550.74 2005.11,1550.59C2003.3,1549.66 2002.76,1548.01 2002.67,1547.72C2002.19,1546.28 2002.4,1546.25 2002.49,1544.73C2002.83,1538.77 2003.83,1502.46 1984.46,1471.42C1976.87,1459.26 1967.66,1450.66 1964.26,1447.6Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M1940.18,1496.65C1942.03,1496.46 1956.02,1494.27 1972.12,1501.52C1996.72,1512.59 2003.83,1536 2004.87,1545.54C2005.11,1547.75 2003.92,1549.15 2003.71,1549.4C2003.29,1549.88 2002.78,1550.3 2002.21,1550.6C2000.34,1551.56 1998.64,1551 1998.35,1550.9C1996.42,1550.27 1995.62,1548.73 1995.48,1548.46C1994.76,1547.07 1995.02,1546.99 1994.78,1545.43C1993.81,1538.91 1990.55,1529.71 1984.21,1521.7C1981.44,1518.19 1976.23,1512.33 1966.76,1506.98C1965.27,1506.14 1958.34,1501.96 1940.18,1496.65Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+            </g>
+        </g>
+        <g id="Grass1" serif:id="Grass">
+            <g>
+                <path
+                                        d="M914.865,1353.59C918.601,1356.1 936.504,1366.93 943.547,1399.88C944.1,1402.46 949.844,1426.61 942.861,1462.86C941.841,1468.15 940.963,1471.42 940.959,1471.43C940.664,1472.02 940.472,1472.67 940.068,1473.19C938.816,1474.79 937.094,1475.01 936.795,1475.05C934.71,1475.32 933.3,1474.22 933.056,1474.03C931.454,1472.78 931.229,1471.05 931.19,1470.76C931.006,1469.35 931.176,1469.35 931.528,1467.98C932.629,1463.67 945.08,1413.35 928.571,1375.31C923.046,1362.59 915.993,1354.89 914.865,1353.59Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M883.65,1402.93C885.951,1403.27 901.116,1404.64 915.997,1418.61C938.217,1439.47 939.399,1469.8 939.375,1469.94C939.267,1470.59 939.277,1471.27 939.044,1471.89C938.937,1472.17 938.322,1473.79 936.469,1474.64C934.557,1475.51 932.887,1474.87 932.597,1474.76C930.698,1474.04 929.973,1472.46 929.847,1472.19C929.211,1470.81 929.434,1470.75 929.319,1469.23C928.997,1464.99 926.888,1445.48 913.454,1427.58C908.608,1421.13 900.749,1412.52 883.65,1402.93Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M951.126,1470.45C951.127,1470.44 951.128,1470.43 951.128,1470.43C951.126,1470.46 951.125,1470.47 951.126,1470.45ZM951.128,1470.43C951.13,1470.41 951.13,1470.41 951.128,1470.43ZM951.126,1470.45C951.103,1470.64 950.982,1471.57 950.599,1472.34C950.464,1472.61 949.687,1474.16 947.765,1474.82C947.472,1474.92 945.782,1475.5 943.899,1474.57C942.075,1473.66 941.514,1472.02 941.416,1471.73C940.957,1470.39 941.08,1470.36 941.224,1468.94C941.598,1465.28 943.546,1450.5 951.826,1435C963.679,1412.82 982.921,1399.84 1002.9,1397.08C1004.23,1396.9 1005.61,1396.76 1005.62,1396.76C1005.87,1396.77 1006.11,1396.89 1006.36,1396.9C986.272,1405.86 973.972,1416.5 965.016,1430.57C952.605,1450.08 951.153,1469.9 951.126,1470.45Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+            </g>
+        </g>
+        <g id="Grass2" serif:id="Grass">
+            <g>
+                <path
+                                        d="M458.456,1404C458.477,1404.38 458.483,1405.06 458.326,1405.68C458.251,1405.98 457.825,1407.66 456.085,1408.71C455.82,1408.87 454.289,1409.8 452.25,1409.29C451.957,1409.21 450.274,1408.79 449.221,1407.05C448.556,1405.95 448.639,1405.9 448.467,1404.63C446.814,1392.39 446.731,1379.27 446.717,1377.06C446.608,1359.92 448.297,1342.01 452.941,1325.57C460.174,1299.96 471.1,1289.59 474.677,1286C467.832,1297.99 462.126,1313.35 459.008,1333.34C453.666,1367.57 457.88,1400.23 458.456,1404ZM458.456,1404C458.447,1403.85 458.437,1403.74 458.433,1403.7C458.547,1404.48 458.54,1404.55 458.456,1404ZM458.433,1403.7C458.43,1403.69 458.431,1403.69 458.433,1403.7Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M392.718,1331.94C395.17,1332.02 412.732,1331.6 428.759,1344.91C455.13,1366.81 451.323,1404.53 451.175,1405.03C450.986,1405.65 450.883,1406.33 450.562,1406.9C449.569,1408.68 447.901,1409.16 447.612,1409.24C445.592,1409.83 444.033,1408.95 443.763,1408.8C441.991,1407.81 441.505,1406.14 441.42,1405.85C441.018,1404.47 441.209,1404.45 441.32,1403.02C441.634,1398.95 442.726,1377.03 430.267,1358.46C421.782,1345.81 409.582,1338.25 392.718,1331.94Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M462.967,1404.49C462.969,1404.46 462.97,1404.44 462.97,1404.42C462.97,1404.53 462.968,1404.55 462.967,1404.49ZM462.967,1404.49C462.953,1404.75 462.887,1405.62 462.577,1406.37C462.461,1406.65 461.795,1408.25 459.923,1409.04C459.638,1409.16 457.991,1409.86 456.048,1409.06C455.769,1408.94 454.165,1408.28 453.373,1406.4C452.876,1405.23 452.956,1405.2 452.977,1403.92C453.12,1395.18 454.889,1386.49 455.193,1385C462.837,1347.44 486.107,1331.12 510.591,1335.1C511.659,1335.27 511.652,1335.28 512.824,1335.49C495.33,1338.05 478.5,1345.1 469.039,1370.99C463.05,1387.37 462.952,1403.61 462.967,1404.49ZM462.97,1404.42C462.97,1404.4 462.971,1404.41 462.97,1404.42Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+            </g>
+        </g>
+        <g id="Tree">
+            <g>
+                <path
+                                        d="M2070.78,639.766C2070.78,710.098 2135.65,740.217 2188.85,759.283C2206.09,765.464 2159.42,776.932 2140.44,771.373C2168.96,792.343 2207.29,804.943 2243.82,818.39C2266.38,826.697 2188.43,832.896 2153.66,818.39C2153.66,818.39 2163.7,837.928 2170.2,850.792C2179.2,868.606 2095.6,825.355 2070.78,806.784L2025.44,806.784C1999.8,825.821 1915.56,869.191 1925.33,851.276C1932.06,838.946 1943.15,818.39 1943.15,818.39C1909.87,837.85 1840.29,826.677 1860.34,818.39C1893.38,804.74 1929.15,791.382 1957.84,769.618C1940.08,772.877 1892.24,764.541 1907.77,759.283C1968.01,738.879 2025.44,710.502 2025.44,639.766L2025.44,616.15L2070.78,616.15L2070.78,639.766Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <rect
+                                        x="2018.84"
+                                        y="1165.1"
+                                        width="59.623"
+                                        height="692.272"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M2076.84,1043.84C2076.84,1114.17 2135.51,1144.29 2188.71,1163.36C2205.95,1169.54 2146.96,1181.01 2127.98,1175.45C2156.5,1196.42 2207.15,1218.3 2243.68,1231.75C2263.02,1238.87 2210.31,1269.17 2130.83,1255.59C2130.83,1255.59 2133.04,1265.37 2136.13,1279.52C2138.33,1289.6 2086.1,1271.11 2070.64,1244.83L2025.3,1244.83C2010.05,1271.11 1957.4,1289.99 1961.34,1279.76C1966.27,1266.98 1969.86,1258.18 1969.86,1258.18C1895.25,1274.47 1843.08,1238.82 1860.2,1231.75C1893.24,1218.1 1941.51,1195.46 1970.2,1173.69C1952.44,1176.95 1892.1,1168.62 1907.63,1163.36C1967.88,1142.95 2019.1,1114.58 2019.1,1043.84L2019.1,1020.23L2076.84,1020.23L2076.84,1043.84Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M2071.08,805.061C2071.08,875.393 2136.13,914.507 2199.21,924.578C2218.34,927.632 2167.4,953.246 2146.89,947.687C2177.72,968.658 2253.82,995.302 2311.02,1006.41C2332.2,1010.52 2259.3,1039.94 2179.01,1032.81C2179.01,1032.81 2221.8,1056.94 2257.49,1069.58C2293.18,1082.22 2166.02,1109.84 2071.08,1057.76L2025.74,1057.76C1942.32,1109.32 1805.06,1082.46 1837.24,1071.75C1883.04,1056.51 1915.35,1034 1915.35,1034C1844.15,1036.32 1772.71,1011.23 1793.58,1006.41C1846.44,994.199 1918.52,967.697 1949.53,945.932C1930.33,949.191 1878.24,927.289 1895.4,924.578C1959.08,914.518 2025.74,875.796 2025.74,805.061L2025.74,781.445L2071.08,781.445L2071.08,805.061Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M2051.79,446.256C2051.79,446.256 2097.14,551.378 2179.34,614.851C2194.93,626.89 2136.67,633.349 2110.62,626.401C2110.62,626.401 2127.97,653.465 2136.47,666.47C2147.5,683.333 2093.49,658.353 2071.08,629.181L2025.74,629.181C2003.5,658.781 1949.29,682.946 1961.19,665.734C1970.94,651.633 1988.47,626.401 1988.47,626.401C1962.52,633.418 1909.82,626.446 1923.59,615.533C2005.91,550.291 2051.79,446.256 2051.79,446.256Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+            </g>
+        </g>
+        <g id="Tree1" serif:id="Tree">
+            <g>
+                <path
+                                        d="M565.291,486.652C565.291,486.652 608.588,590.252 689.204,634.627C704.448,640.091 655.441,650.227 640.039,645.314C663.182,663.848 690.806,674.985 719.625,686.871C737.428,694.213 675.927,699.692 648.49,686.871C648.49,686.871 656.409,704.139 661.538,715.51C668.64,731.255 603.657,693.027 583.511,676.612L546.72,676.612C525.916,693.438 460.627,731.772 468.339,715.937C473.646,705.039 482.397,686.871 482.397,686.871C456.138,704.07 401.237,694.195 417.062,686.871C443.13,674.805 468.586,662.999 491.865,643.762C477.454,646.643 428.009,641.497 440.765,634.627C520.33,591.782 565.291,486.652 565.291,486.652Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <rect
+                                        x="535.054"
+                                        y="1042.06"
+                                        width="59.623"
+                                        height="692.272"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M593.05,920.803C593.05,991.135 651.724,1021.25 704.92,1040.32C722.167,1046.5 663.177,1057.97 644.196,1052.41C672.717,1073.38 723.367,1095.26 759.894,1108.71C779.235,1115.83 726.523,1146.13 647.047,1132.55C647.047,1132.55 649.257,1142.33 652.346,1156.48C654.546,1166.56 602.318,1148.07 586.852,1121.79L541.514,1121.79C526.26,1148.07 473.611,1166.95 477.556,1156.72C482.486,1143.94 486.076,1135.14 486.076,1135.14C411.467,1151.43 359.293,1115.78 376.417,1108.71C409.457,1095.06 457.724,1072.42 486.411,1050.65C468.652,1053.91 408.314,1045.58 423.84,1040.32C484.089,1019.92 535.317,991.538 535.317,920.803L535.317,897.187L593.05,897.187L593.05,920.803Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+                <path
+                                        d="M587.292,682.02C587.292,752.353 644.509,792.408 701.696,801.537C719.04,804.306 672.861,827.527 654.263,822.487C682.209,841.498 751.199,865.652 803.056,875.722C822.258,879.451 756.167,906.114 683.383,899.654C683.383,899.654 722.173,921.528 754.53,932.986C786.887,944.445 671.61,969.481 585.539,922.273L544.438,922.273C468.813,969.016 344.383,944.666 373.557,934.956C415.076,921.138 444.366,900.735 444.366,900.735C379.817,902.833 315.054,880.093 333.974,875.722C381.892,864.652 447.238,840.626 475.347,820.896C457.946,823.85 410.72,803.995 426.28,801.537C484.009,792.418 541.954,752.756 541.954,682.02L541.954,658.404L587.292,658.404L587.292,682.02Z"
+                                        style="fill:var(--site-footer--fg, #000);"
+                                />
+            </g>
+        </g>
+    </symbol>
+
+    <symbol id="site-footer-bg" viewBox="0 0 100 1600" preserveAspectRatio="none">
+        <rect
+                        x="0"
+                        y="1360"
+                        width="100"
+                        height="240"
+                        style="fill:var(--site-footer--bg, rgb(41,39,45));"
+                />
+        <rect
+                        x="0"
+                        y="1404.44"
+                        width="100"
+                        height="595.555"
+                        style="fill:var(--site-footer--l1, rgb(24,22,29)); transform: translateY(var(--site-footer--l1-y, 0px));"
+                />
+        <rect id="FG" x="-0" y="1477.48" width="100" height="522.519" />
+    </symbol>
+</svg>
diff --git a/src/data/nav.ts b/src/data/nav.ts
new file mode 100644
index 0000000..2f9efb9
--- /dev/null
+++ b/src/data/nav.ts
@@ -0,0 +1,9 @@
+export const nav: {
+        label: string;
+        url: string;
+        icon: "house" | "package";
+        hidden?: boolean;
+}[] = [
+        { icon: "house", label: "Home", url: "/" },
+        { icon: "package", label: "Releases", url: "/releases/" },
+];
diff --git a/src/deps/strapi.tsx b/src/deps/strapi.tsx
new file mode 100644
index 0000000..de2e495
--- /dev/null
+++ b/src/deps/strapi.tsx
@@ -0,0 +1,416 @@
+import type { Pipeline } from "corvos";
+import type { StandardSchemaV1 } from "corvos/deps/standard_schema.ts";
+
+import { type } from "arktype";
+import { Page, PipelineStageError } from "corvos";
+import { Severity } from "corvos/core/error.ts";
+import { replaceExtension } from "corvos/core/utils/path.ts";
+
+import { ContentImage } from "$/ui/objects/ContentImage.tsx";
+
+export enum HeadingBlockLevel {
+        L1 = 1,
+        L2 = 2,
+        L3 = 3,
+        L4 = 4,
+        L5 = 5,
+        L6 = 6,
+}
+
+export const fileAttributeSchema = type({
+        "alternativeText?": "string | null",
+        "caption?": "string | null",
+        "createdAt": "string",
+        "documentId": "string",
+        "ext": "string",
+        "formats?": "Record<string, unknown> | null",
+        "hash": "string",
+        "height?": "number | null",
+        "mime": "string",
+        "name": "string",
+        "previewUrl?": "string | null",
+        "provider": "string",
+        "provider_metadata?": "unknown",
+        "size": "number",
+        "updatedAt": "string",
+        "url": "string",
+        "width?": "number | null",
+});
+
+export type FileAttribute = typeof fileAttributeSchema.infer;
+
+export const imageAttributeSchema = fileAttributeSchema.narrow(
+        (o): o is Omit<typeof o, "width" | "height"> & { width: number; height: number } =>
+                !!o.width && !!o.height,
+);
+
+export type ImageAttribute = typeof imageAttributeSchema.infer;
+
+const blocksAttributeScope = type
+        .scope({
+                codeBlockNode: {
+                        "children": "defaultInlineNode[]",
+                        "language?": "string",
+                        "type": "'code'",
+                },
+
+                defaultInlineNode: "textInlineNode | linkInlineNode",
+
+                headingBlockNode: {
+                        children: "defaultInlineNode[]",
+                        level: "1 | 2 | 3 | 4 | 5 | 6",
+                        type: "'heading'",
+                },
+
+                imageBlockNode: {
+                        children: type({
+                                text: "string",
+                                type: "'text'",
+                        }).array(),
+                        image: fileAttributeSchema.omit("documentId"),
+                        type: "'image'",
+                },
+
+                linkInlineNode: {
+                        children: "textInlineNode[]",
+                        type: "'link'",
+                        url: "string",
+                },
+
+                listBlockNode: {
+                        children: "(listItemInlineNode | listBlockNode)[]",
+                        format: "'ordered' | 'unordered'",
+                        type: "'list'",
+                },
+
+                listItemInlineNode: {
+                        children: "defaultInlineNode[]",
+                        type: "'list-item'",
+                },
+
+                node: "rootNode | nonTextInlineNode",
+
+                nonTextInlineNode: "linkInlineNode | listItemInlineNode",
+
+                paragraphBlockNode: {
+                        children: "defaultInlineNode[]",
+                        type: "'paragraph'",
+                },
+
+                quoteBlockNode: {
+                        children: "defaultInlineNode[]",
+                        type: "'quote'",
+                },
+
+                rootNode:
+                        "paragraphBlockNode | quoteBlockNode | codeBlockNode | headingBlockNode | listBlockNode | imageBlockNode",
+
+                textInlineNode: {
+                        "bold?": "boolean",
+                        "code?": "boolean",
+                        "italic?": "boolean",
+                        "strikethrough?": "boolean",
+                        "text": "string",
+                        "type": "'text'",
+                        "underline?": "boolean",
+                },
+        })
+        .export();
+
+export const defaultInlineNodeSchema = blocksAttributeScope.defaultInlineNode;
+
+export type DefaultInlineNode = typeof defaultInlineNodeSchema.infer;
+
+export const nodeSchema = blocksAttributeScope.node;
+
+export type Node = typeof nodeSchema.infer;
+
+export const strapiItemSchema = type({
+        "[string]": "unknown",
+        "documentId": "string",
+        "publishedAt": "string.date.parse | null",
+        "updatedAt": "string.date.parse",
+});
+
+export type StrapiItem = typeof strapiItemSchema.infer;
+
+export function walkBlocks(
+        content: (Node | DefaultInlineNode)[],
+        fn: (_: Node | DefaultInlineNode) => unknown,
+): void {
+        for (const node of content) {
+                fn(node);
+
+                switch (node.type) {
+                        case "heading":
+                        case "code":
+                        case "quote":
+                        case "paragraph":
+                        case "list":
+                        case "list-item":
+                        case "link": {
+                                return walkBlocks(node.children, fn);
+                        }
+                }
+        }
+}
+
+function blocksNodeToTSX(node: Node | DefaultInlineNode) {
+        switch (true) {
+                case node.type === "heading": {
+                        switch (node.level) {
+                                case 1:
+                                        return <h1>{blocksToTSX(node.children)}</h1>;
+                                case 2:
+                                        return <h2>{blocksToTSX(node.children)}</h2>;
+                                case 3:
+                                        return <h3>{blocksToTSX(node.children)}</h3>;
+                                case 4:
+                                        return <h4>{blocksToTSX(node.children)}</h4>;
+                                case 5:
+                                        return <h5>{blocksToTSX(node.children)}</h5>;
+                                default:
+                                        return <h6>{blocksToTSX(node.children)}</h6>;
+                        }
+                }
+
+                case node.type === "image" && !!node.image.caption: {
+                        return (
+                                <figure>
+                                        <ContentImage src={node.image.url} alt={node.image.alternativeText ?? undefined} />
+                                        <figcaption>{node.image.caption}</figcaption>
+                                </figure>
+                        );
+                }
+
+                case node.type === "image": {
+                        return <ContentImage src={node.image.url} alt={node.image.alternativeText ?? undefined} />;
+                }
+
+                case node.type === "code": {
+                        return (
+                                <pre>
+                                        <code>{blocksToTSX(node.children)}</code>
+                                </pre>
+                        );
+                }
+
+                case node.type === "quote": {
+                        return <blockquote>{blocksToTSX(node.children)}</blockquote>;
+                }
+
+                case node.type === "paragraph" &&
+                        node.children.length === 1 &&
+                        node.children[0]?.type === "text" &&
+                        node.children[0].text === "---": {
+                        return <hr />;
+                }
+
+                case node.type === "paragraph": {
+                        return <p>{blocksToTSX(node.children)}</p>;
+                }
+
+                case node.type === "list" && node.format === "ordered": {
+                        return <ol>${blocksToTSX(node.children)}</ol>;
+                }
+
+                case node.type === "list": {
+                        return <ul>${blocksToTSX(node.children)}</ul>;
+                }
+
+                case node.type === "list-item": {
+                        return <li>${blocksToTSX(node.children)}</li>;
+                }
+
+                case node.type === "link": {
+                        return <a href={node.url}>{blocksToTSX(node.children)}</a>;
+                }
+
+                case node.type === "text": {
+                        return [
+                                node.bold ? "strong" : undefined,
+                                node.code ? "code" : undefined,
+                                node.italic ? "em" : undefined,
+                                node.strikethrough ? "del" : undefined,
+                                node.underline ? "u" : undefined,
+                        ].reduce((res: JSX.Element, Tag) => (Tag ? <Tag>{res}</Tag> : res), node.text);
+                }
+        }
+}
+
+export function blocksToTSX(
+        content: (Node | DefaultInlineNode)[],
+        filter: (node: Node | DefaultInlineNode) => boolean = () => true,
+): JSX.Element {
+        return content
+                .filter(filter)
+                .map(blocksNodeToTSX)
+                .filter((s) => s !== undefined);
+}
+
+export const strapiCollectionResponseSchema = type({
+        data: strapiItemSchema.array(),
+        meta: {
+                pagination: {
+                        page: "number",
+                        pageCount: "number",
+                        pageSize: "number",
+                        total: "number",
+                },
+        },
+});
+
+export const strapiItemResponseSchema = type({
+        data: strapiItemSchema,
+});
+
+async function* loadPaginated(url: URL | string, init?: RequestInit) {
+        let pageSize: number | undefined;
+        let pages = 1;
+
+        for (let i = 0; i < pages; ++i) {
+                const pageUrl = new URL(url);
+
+                if (pageSize) {
+                        pageUrl.searchParams.set("pagination[page]", `${i + 1}`);
+                        pageUrl.searchParams.set("pagination[pageSize]", `${pageSize}`);
+                }
+
+                const res = await fetch(pageUrl, init);
+                const json = await res.json();
+
+                const dec = strapiCollectionResponseSchema(json);
+
+                if (dec instanceof type.errors) {
+                        throw new Error(dec.summary);
+                }
+
+                pages = dec.meta.pagination.pageCount;
+                pageSize = dec.meta.pagination.pageSize;
+
+                for (const item of dec.data) {
+                        yield item;
+                }
+        }
+}
+
+export class StrapiLoader {
+        init: RequestInit;
+
+        constructor(
+                readonly host: string | URL,
+                token: string,
+                readonly publicHost = host,
+        ) {
+                this.init = {
+                        headers: {
+                                Authorization: `Bearer ${token}`,
+                        },
+                        keepalive: true,
+                };
+        }
+
+        async loadSingle<T>(
+                collection: string,
+                schema: StandardSchemaV1<unknown, T>,
+                query: Record<string, string> = {},
+        ) {
+                const url = new URL(`/api/${collection}`, this.host);
+                Object.entries(query).forEach(([key, value]) => {
+                        url.searchParams.append(key, value);
+                });
+
+                const res = await fetch(url, this.init);
+                const json = await res.json();
+
+                const dec = strapiItemResponseSchema(json);
+
+                if (dec instanceof type.errors) {
+                        throw new Error(`Schema mismatch in ${url}:\n${dec.summary}`);
+                }
+
+                const dec2 = await schema["~standard"].validate(dec.data);
+
+                if (dec2.issues) {
+                        throw new Error(`Schema mismatch in ${url}:\n${dec2.issues.join("\n")}`);
+                }
+
+                return {
+                        documentId: dec.data.documentId,
+                        publishedAt: dec.data.publishedAt,
+                        updatedAt: dec.data.updatedAt,
+                        ...dec2.value,
+                };
+        }
+
+        async *loadCollection<T>(
+                collection: string,
+                schema: StandardSchemaV1<unknown, T>,
+                query: Record<string, string> = {},
+        ) {
+                const url = new URL(`/api/${collection}`, this.host);
+                Object.entries(query).forEach(([key, value]) => {
+                        url.searchParams.append(key, value);
+                });
+
+                for await (const item of loadPaginated(url, this.init)) {
+                        const dec = await schema["~standard"].validate(item);
+
+                        if (dec.issues) {
+                                yield new PipelineStageError(
+                                        Severity.ERROR,
+                                        `Schema mismatch in ${url}`,
+                                        dec.issues.join("\n"),
+                                );
+                        } else {
+                                yield {
+                                        documentId: item.documentId,
+                                        publishedAt: item.publishedAt,
+                                        updatedAt: item.updatedAt,
+                                        ...dec.value,
+                                };
+                        }
+                }
+        }
+
+        readonly resolvedFileAttributeSchema = fileAttributeSchema.pipe(({ url, previewUrl, ...o }) => ({
+                ...o,
+                url: new URL(url, this.publicHost).href,
+                ...(previewUrl ? { previewUrl: new URL(previewUrl, this.publicHost).href } : {}),
+        }));
+
+        readonly resolvedImageAttributeSchema = imageAttributeSchema.pipe((o) => ({
+                ...o,
+                previewUrl: o.previewUrl ? new URL(o.previewUrl, this.publicHost).href : undefined,
+                url: new URL(o.url, this.publicHost).href,
+        }));
+}
+
+export function strapi() {
+        return <Loaders extends string, Out extends { ".strapi": [Node[], {}] }, Helpers extends {}>(
+                pipeline: Pipeline<Loaders, Out, Helpers>,
+        ) =>
+                pipeline.process("strapi", ".strapi", function* (page) {
+                        yield new Page(
+                                ".jsxelement",
+                                blocksToTSX(page.content),
+                                page.data as Out[".strapi"][1],
+                                replaceExtension(page.url, ".jsx"),
+                                page,
+                        );
+                });
+}
+
+export const Blocks = ({
+        content,
+        filter = () => true,
+}: {
+        content: (Node | DefaultInlineNode)[];
+        filter?: (node: Node | DefaultInlineNode) => boolean;
+}) => blocksToTSX(content, filter);
+
+const strapiUrl = Deno.env.get("STRAPI_URL") ?? "";
+const strapiPublicUrl = Deno.env.get("STRAPI_PUBLIC_URL");
+const strapiToken = Deno.env.get("STRAPI_TOKEN") ?? "";
+
+export const strapiLoader = new StrapiLoader(strapiUrl, strapiToken, strapiPublicUrl);
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
new file mode 100644
index 0000000..1d35a1d
--- /dev/null
+++ b/src/pages/index.mdx
@@ -0,0 +1,10 @@
+---
+type: "home"
+title: "Corvos · static site generator"
+description: "Project website of Corvos, a static site generator for Deno."
+---
+
+import { template } from "./index.tsx";
+export { template };
+
+Corvos is a Static Site Generator with the goal to provide a customizeable, type-safe experience.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..b1581b7
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,64 @@
+import { BaseLayout } from "$/ui/base/BaseLayout.tsx";
+import { ReleaseCard } from "$/ui/components/ReleaseCard.tsx";
+import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
+import { CardList } from "$/ui/layouts/CardList.tsx";
+import { Container } from "$/ui/layouts/Container.tsx";
+import { Button } from "$/ui/objects/Button.tsx";
+import { Divider } from "$/ui/objects/Divider.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+import { Icon } from "$/ui/objects/Icon.tsx";
+import site from "@/corvos.config.ts";
+
+export const template = site.$.template({ type: "home" }, (page, pages) => {
+        const query = site.$.query(pages);
+        const releasesIndex = query.type(".html").match({ type: "releases-index" }).one();
+        const releases = query.type(".html").match({ type: "release" }).many().toArray();
+
+        return (
+                <BaseLayout page={page}>
+                        <SiteHeader
+                                url={page.url}
+                                sm={
+                                        <div class="l-media__block l-media__block--main">
+                                                <Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
+                                        </div>
+                                }
+                        />
+
+                        <Container fixed="150" pad-inline pad-block class="c-home-banner">
+                                <Heading as="h1" class="c-home-banner__intro">
+                                        <strong class="o-heading__highlight">
+                                                <a class="p-name u-url u-uid" href={site.$.url("", true)}>
+                                                        Corvos
+                                                </a>
+                                        </strong>{" "}
+                                        &ndash; A static site generator for Deno.
+                                </Heading>
+
+                                <div class="u-mbs-400 c-subtitle">{{ __html: page.content }}</div>
+
+                                <div class="u-mbs-700">
+                                        <Button
+                                                href={releasesIndex.url}
+                                                post={<Icon icon="arrow-right" variant="bold" />}
+                                                size="xl"
+                                                variant="primary"
+                                                wide
+                                        >
+                                                Releases
+                                        </Button>
+                                </div>
+                        </Container>
+
+                        <Divider level="faint" />
+
+                        <Container class="u-mbs-neutralize" fixed="150" pad-block pad-inline>
+                                <CardList keyboard-nav>
+                                        {releases.map((page) => (
+                                                <ReleaseCard page={page} heading-level="h3" list />
+                                        ))}
+                                </CardList>
+                        </Container>
+                </BaseLayout>
+        );
+});
diff --git a/src/pages/pkg/corvos@[version].ts b/src/pages/pkg/corvos@[version].ts
new file mode 100644
index 0000000..6dcb65a
--- /dev/null
+++ b/src/pages/pkg/corvos@[version].ts
@@ -0,0 +1,35 @@
+import * as zip from "@zip-js/zip-js";
+import { Page, PipelineStageError } from "corvos";
+import { binaryLoader } from "corvos/core/loaders/binary.ts";
+
+import { strapiLoader } from "$/deps/strapi.tsx";
+import { releaseStrapiSchema } from "$/schemas/releases.ts";
+import site from "@/corvos.config.ts";
+
+export const pages = site.$.pageGenerator(async function* () {
+        for await (const item of strapiLoader.loadCollection("corvos-releases", releaseStrapiSchema, {
+                "populate[0]": "files",
+                "sort[0]": "date:desc",
+        })) {
+                if (item instanceof PipelineStageError) {
+                        yield item;
+                        continue;
+                }
+
+                const res = await binaryLoader(new URL(item.files.url));
+                const reader = new zip.ZipReader(new zip.Uint8ArrayReader(res.content));
+
+                for await (const entry of reader.getEntriesGenerator()) {
+                        if (entry.directory) {
+                                continue;
+                        }
+
+                        yield new Page(
+                                ".",
+                                new Uint8Array(await entry.arrayBuffer()),
+                                { version: item.version },
+                                `/pkg/corvos@${item.version}/${entry.filename}`,
+                        );
+                }
+        }
+});
diff --git a/src/pages/releases/[version].tsx b/src/pages/releases/[version].tsx
new file mode 100644
index 0000000..84d807a
--- /dev/null
+++ b/src/pages/releases/[version].tsx
@@ -0,0 +1,100 @@
+import { Page, PipelineStageError } from "corvos";
+
+import { strapiLoader } from "$/deps/strapi.tsx";
+import { releaseStrapiSchema } from "$/schemas/releases.ts";
+import { BaseLayout } from "$/ui/base/BaseLayout.tsx";
+import { ReleaseCard } from "$/ui/components/ReleaseCard.tsx";
+import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
+import { CardList } from "$/ui/layouts/CardList.tsx";
+import { Container } from "$/ui/layouts/Container.tsx";
+import { HList } from "$/ui/layouts/HList.tsx";
+import { ActionButton } from "$/ui/objects/ActionButton.tsx";
+import { Badge } from "$/ui/objects/Badge.tsx";
+import { Body } from "$/ui/objects/Body.tsx";
+import { Divider } from "$/ui/objects/Divider.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+import { Icon } from "$/ui/objects/Icon.tsx";
+import site from "@/corvos.config.ts";
+
+export const pages = site.$.pageGenerator(async function* () {
+        for await (const item of strapiLoader.loadCollection("corvos-releases", releaseStrapiSchema, {
+                "populate[0]": "files",
+                "sort[0]": "date:desc",
+        })) {
+                if (item instanceof PipelineStageError) {
+                        yield item;
+                } else {
+                        yield new Page(".strapi", item.notes ?? [], {
+                                ...item,
+                                title: `Corvos ${item.version}`,
+                                type: "release" as const,
+                        });
+                }
+        }
+});
+
+export const template = site.$.template({ type: "release" }, (page, pages) => {
+        const query = site.$.query(pages);
+
+        const feed = query.type(".rss").match({ type: "releases" }).one();
+
+        const prev = query.type(".html").match({ type: "release" }).prev(page);
+        const next = query.type(".html").match({ type: "release" }).next(page);
+
+        return (
+                <BaseLayout page={page}>
+                        <SiteHeader
+                                mode="compact"
+                                url={page.url}
+                                end={
+                                        <div class="l-media__block">
+                                                <ActionButton
+                                                        align-block
+                                                        class="u-mbs-0"
+                                                        href={feed.url}
+                                                        icon={<Icon icon="rss-simple" variant="bold" />}
+                                                        level="quiet"
+                                                        pill
+                                                        title="RSS Feed"
+                                                />
+                                        </div>
+                                }
+                        >
+                                <div class="l-media__block l-media__block--main">
+                                        <Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
+                                </div>
+                        </SiteHeader>
+
+                        <Container as="main" class="u-mbs-neutralize h-entry" fixed="150" pad-block pad-inline>
+                                <HList aria-label="Categories">
+                                        <li>
+                                                <Badge as="strong" pill selected>
+                                                        <time class="dt-published" datetime={page.data.date.toISOString()}>
+                                                                {page.data.date.toLocaleDateString(undefined, {
+                                                                        day: "numeric",
+                                                                        month: "short",
+                                                                        year: "numeric",
+                                                                })}
+                                                        </time>
+                                                </Badge>
+                                        </li>
+                                </HList>
+
+                                <Heading as="h1" class="u-mbs-200 p-name" display highlight level="xxl">
+                                        {page.data.title}
+                                </Heading>
+
+                                <Body class="e-content">{{ __html: page.content }}</Body>
+                        </Container>
+
+                        <Divider level="faint" />
+
+                        <Container as="footer" class="u-mbs-neutralize" fixed="150" pad-block pad-inline>
+                                <CardList layout="grid">
+                                        {prev && <ReleaseCard heading-level="h2" page={prev} list />}
+                                        {next && <ReleaseCard heading-level="h2" page={next} list />}
+                                </CardList>
+                        </Container>
+                </BaseLayout>
+        );
+});
diff --git a/src/pages/releases/feed.ts b/src/pages/releases/feed.ts
new file mode 100644
index 0000000..b430ca5
--- /dev/null
+++ b/src/pages/releases/feed.ts
@@ -0,0 +1,19 @@
+import type { FeedItem } from "corvos/plugins/feeds.ts";
+
+import site from "@/corvos.config.ts";
+
+export const feeds = site.$.feedGenerator(function* (pages) {
+        const items = site.$.query(pages)
+                .match({ type: "release" })
+                .many()
+                .take(20)
+                .map(
+                        (page): FeedItem => ({
+                                title: page.data.title,
+                                url: page.url,
+                                content: page.content,
+                                updated: page.data.date,
+                        }),
+                );
+        yield { type: "releases", title: `Releases`, url: "/releases/", items };
+});
diff --git a/src/pages/releases/index.mdx b/src/pages/releases/index.mdx
new file mode 100644
index 0000000..6519c76
--- /dev/null
+++ b/src/pages/releases/index.mdx
@@ -0,0 +1,8 @@
+---
+type: "releases-index"
+title: "Releases"
+description: "All releases of Corvos."
+---
+
+import { template } from "./index.tsx";
+export { template };
diff --git a/src/pages/releases/index.tsx b/src/pages/releases/index.tsx
new file mode 100644
index 0000000..132eee7
--- /dev/null
+++ b/src/pages/releases/index.tsx
@@ -0,0 +1,51 @@
+import { BaseLayout } from "$/ui/base/BaseLayout.tsx";
+import { ReleaseCard } from "$/ui/components/ReleaseCard.tsx";
+import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
+import { CardList } from "$/ui/layouts/CardList.tsx";
+import { Container } from "$/ui/layouts/Container.tsx";
+import { ActionButton } from "$/ui/objects/ActionButton.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+import { Icon } from "$/ui/objects/Icon.tsx";
+import { PlaceholderBox } from "$/ui/objects/PlaceholderBox.tsx";
+import site from "@/corvos.config.ts";
+
+export const template = site.$.template({ type: "releases-index" }, (page, pages) => {
+        const query = site.$.query(pages);
+        const items = query.type(".html").match({ type: "release" }).many().toArray();
+        const feed = query.type(".rss").match({ type: "releases" }).one();
+
+        return (
+                <BaseLayout page={page}>
+                        <SiteHeader
+                                url={page.url}
+                                end={
+                                        <div class="l-media__block">
+                                                <ActionButton
+                                                        align-block
+                                                        class="u-mbs-0"
+                                                        href={feed.url}
+                                                        icon={<Icon icon="rss-simple" variant="bold" />}
+                                                        level="quiet"
+                                                        pill
+                                                        title="RSS Feed"
+                                                />
+                                        </div>
+                                }
+                                sm={
+                                        <div class="l-media__block l-media__block--main">
+                                                <Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
+                                        </div>
+                                }
+                        ></SiteHeader>
+
+                        <Container as="main" fixed pad-block pad-inline>
+                                <CardList keyboard-nav>
+                                        {items.map((item) => (
+                                                <ReleaseCard page={item} heading-level="h2" list />
+                                        ))}
+                                        {!items.length && <PlaceholderBox as="em">Nothing there yet</PlaceholderBox>}
+                                </CardList>
+                        </Container>
+                </BaseLayout>
+        );
+});
diff --git a/src/pages/sitemap.ts b/src/pages/sitemap.ts
new file mode 100644
index 0000000..378a9ed
--- /dev/null
+++ b/src/pages/sitemap.ts
@@ -0,0 +1,8 @@
+import site from "@/corvos.config.ts";
+
+export const sitemap = site.$.sitemap((pages) => ({
+        items: pages.map((page) => ({
+                loc: page.url,
+                lastmod: page.data.modifiedAt,
+        })),
+}));
diff --git a/src/schemas/misc.ts b/src/schemas/misc.ts
new file mode 100644
index 0000000..e86df72
--- /dev/null
+++ b/src/schemas/misc.ts
@@ -0,0 +1,16 @@
+import { type } from "arktype";
+
+export const miscSchema = type.or(
+        {
+                type: "'home'",
+                title: "string",
+                description: "string",
+        },
+        {
+                type: "'releases-index'",
+                title: "string",
+                description: "string",
+        },
+);
+
+export type Misc = typeof miscSchema.infer;
diff --git a/src/schemas/mod.ts b/src/schemas/mod.ts
new file mode 100644
index 0000000..69d6c6f
--- /dev/null
+++ b/src/schemas/mod.ts
@@ -0,0 +1,8 @@
+import { type } from "arktype";
+
+import { miscSchema } from "$/schemas/misc.ts";
+import { releaseSchema } from "$/schemas/releases.ts";
+
+export const pageDataSchema = type.or(releaseSchema, miscSchema);
+
+export type PageData = typeof pageDataSchema.infer;
diff --git a/src/schemas/releases.ts b/src/schemas/releases.ts
new file mode 100644
index 0000000..0ccb6a6
--- /dev/null
+++ b/src/schemas/releases.ts
@@ -0,0 +1,18 @@
+import { type } from "arktype";
+
+import { nodeSchema } from "../deps/strapi.tsx";
+import { strapiLoader } from "../deps/strapi.tsx";
+
+export const releaseStrapiSchema = type({
+        "version": "string",
+        "date": "string.date.parse",
+        "notes?": nodeSchema.array().or("null"),
+        "files": strapiLoader.resolvedFileAttributeSchema,
+});
+
+export const releaseSchema = releaseStrapiSchema.merge({
+        type: "'release'",
+        title: "string",
+});
+
+export type Release = typeof releaseSchema.infer;
diff --git a/src/scripts/lib/dom.ts b/src/scripts/lib/dom.ts
new file mode 100644
index 0000000..a88686a
--- /dev/null
+++ b/src/scripts/lib/dom.ts
@@ -0,0 +1,59 @@
+function isAbove(a: HTMLElement, b: HTMLElement) {
+        return a.offsetTop + a.clientHeight < b.offsetTop;
+}
+
+export function getVerticalNeighbor(
+        dir: -1 | 1,
+        items: Iterable<HTMLElement>,
+        current: HTMLElement,
+) {
+        let candidates: HTMLElement[] = [];
+
+        if (dir === -1) {
+                let adjacentY = Number.MIN_SAFE_INTEGER;
+
+                for (const item of items) {
+                        if (!isAbove(item, current)) {
+                                continue;
+                        }
+
+                        if (item.offsetTop > adjacentY) {
+                                adjacentY = item.offsetTop;
+                                candidates = [item];
+                        } else if (item.offsetTop === adjacentY) {
+                                candidates.push(item);
+                        }
+                }
+        } else {
+                let adjacentY = Number.MAX_SAFE_INTEGER;
+
+                for (const item of items) {
+                        if (!isAbove(current, item)) {
+                                continue;
+                        }
+
+                        if (item.offsetTop < adjacentY) {
+                                adjacentY = item.offsetTop;
+                                candidates = [item];
+                        } else if (item.offsetTop === adjacentY) {
+                                candidates.push(item);
+                        }
+                }
+        }
+
+        const currentX = current.offsetLeft + 0.5 * current.clientWidth;
+        let match = candidates[0];
+        let bestDist = Number.MAX_SAFE_INTEGER;
+
+        for (const candidate of candidates) {
+                const candidateX = candidate.offsetLeft + 0.5 * candidate.clientWidth;
+                const dist = Math.abs(currentX - candidateX);
+
+                if (dist < bestDist) {
+                        bestDist = dist;
+                        match = candidate;
+                }
+        }
+
+        return match;
+}
diff --git a/src/scripts/lib/keyboardNav.ts b/src/scripts/lib/keyboardNav.ts
new file mode 100644
index 0000000..4c79a08
--- /dev/null
+++ b/src/scripts/lib/keyboardNav.ts
@@ -0,0 +1,272 @@
+import { getVerticalNeighbor } from "./dom.ts";
+
+function focusPrev(
+        owner: HTMLElement,
+        itemSelector: string,
+        wrap: boolean,
+        stateful: boolean,
+        current: HTMLElement,
+) {
+        const items = [...owner.querySelectorAll<HTMLElement>(itemSelector)];
+        const i = items.indexOf(current);
+
+        const prev = i > 0 ? items[i - 1] : wrap ? items.at(-1) : undefined;
+
+        if (!prev || prev === current) {
+                return false;
+        }
+
+        if (stateful) {
+                current.setAttribute("tabindex", "-1");
+                prev.removeAttribute("tabindex");
+        }
+        prev.focus();
+        return true;
+}
+
+function focusNext(
+        owner: HTMLElement,
+        itemSelector: string,
+        wrap: boolean,
+        stateful: boolean,
+        current: HTMLElement,
+) {
+        const items = [...owner.querySelectorAll<HTMLElement>(itemSelector)];
+        const i = items.indexOf(current);
+
+        const next = i < items.length - 1 ? items[i + 1] : wrap ? items[0] : undefined;
+
+        if (!next || next === current) {
+                return false;
+        }
+
+        if (stateful) {
+                current.setAttribute("tabindex", "-1");
+                next.removeAttribute("tabindex");
+        }
+        next.focus();
+        return true;
+}
+
+function focusUp(
+        owner: HTMLElement,
+        itemSelector: string,
+        wrap: boolean,
+        stateful: boolean,
+        current: HTMLElement,
+) {
+        const items = [...owner.querySelectorAll<HTMLElement>(itemSelector)];
+        let neighbor: HTMLElement | undefined = getVerticalNeighbor(-1, items, current);
+
+        if (!neighbor && wrap) {
+                neighbor = items.at(-1);
+        }
+
+        if (!neighbor || neighbor === current) {
+                return false;
+        }
+
+        if (stateful) {
+                current.setAttribute("tabindex", "-1");
+                neighbor.removeAttribute("tabindex");
+        }
+        neighbor.focus();
+        return true;
+}
+
+function focusDown(
+        owner: HTMLElement,
+        itemSelector: string,
+        wrap: boolean,
+        stateful: boolean,
+        current: HTMLElement,
+) {
+        const items = owner.querySelectorAll<HTMLElement>(itemSelector);
+        let neighbor = getVerticalNeighbor(1, items, current);
+
+        if (!neighbor && wrap) {
+                neighbor = items[0];
+        }
+
+        if (!neighbor || neighbor === current) {
+                return false;
+        }
+
+        if (stateful) {
+                current.setAttribute("tabindex", "-1");
+                neighbor.removeAttribute("tabindex");
+        }
+        neighbor.focus();
+        return true;
+}
+
+function focusFirst(
+        owner: HTMLElement,
+        itemSelector: string,
+        stateful: boolean,
+        current: HTMLElement,
+) {
+        const cards = [...owner.querySelectorAll<HTMLElement>(itemSelector)];
+        const first = cards[0];
+
+        if (!first || first === current) {
+                return false;
+        }
+
+        if (stateful) {
+                current.setAttribute("tabindex", "-1");
+                first.removeAttribute("tabindex");
+        }
+        first.focus();
+        return true;
+}
+
+function focusLast(
+        owner: HTMLElement,
+        itemSelector: string,
+        stateful: boolean,
+        current: HTMLElement,
+) {
+        const cards = [...owner.querySelectorAll<HTMLElement>(itemSelector)];
+        const last = cards.at(-1);
+
+        if (!last || last === current) {
+                return false;
+        }
+
+        if (stateful) {
+                current.setAttribute("tabindex", "-1");
+                last.removeAttribute("tabindex");
+        }
+        last.focus();
+        return true;
+}
+
+function onKeyDown(
+        owner: HTMLElement,
+        itemSelector: string,
+        horizontal: boolean,
+        vertical: boolean,
+        wrap: boolean,
+        stateful: boolean,
+        e: KeyboardEvent,
+) {
+        let handled = false;
+
+        if (!e.currentTarget) {
+                return;
+        }
+
+        switch (e.key) {
+                case "ArrowLeft": {
+                        if (horizontal) {
+                                handled = focusPrev(owner, itemSelector, wrap, stateful, e.currentTarget as HTMLElement);
+                        }
+                        break;
+                }
+
+                case "ArrowRight": {
+                        if (horizontal) {
+                                handled = focusNext(owner, itemSelector, wrap, stateful, e.currentTarget as HTMLElement);
+                        }
+                        break;
+                }
+
+                case "ArrowUp": {
+                        if (vertical) {
+                                handled = focusUp(owner, itemSelector, wrap, stateful, e.currentTarget as HTMLElement);
+                        }
+                        break;
+                }
+
+                case "ArrowDown": {
+                        if (vertical) {
+                                handled = focusDown(owner, itemSelector, wrap, stateful, e.currentTarget as HTMLElement);
+                        }
+                        break;
+                }
+
+                case "Home": {
+                        handled = focusFirst(owner, itemSelector, stateful, e.currentTarget as HTMLElement);
+                        break;
+                }
+
+                case "End": {
+                        handled = focusLast(owner, itemSelector, stateful, e.currentTarget as HTMLElement);
+                        break;
+                }
+        }
+
+        if (handled) {
+                e.stopPropagation();
+                e.preventDefault();
+        }
+}
+
+export function mountKeyboardNav() {
+        const keyboardNavEls = document.querySelectorAll<HTMLElement>(".js-keyboard-nav");
+
+        for (const keyboardNavEl of keyboardNavEls) {
+                const itemSelector = keyboardNavEl.dataset.keyboardNavItem ?? "";
+
+                if (!itemSelector) {
+                        console.error("Keyboard nav: No item class provided");
+                        continue;
+                }
+
+                let horizontal = false,
+                        vertical = false,
+                        wrap = false,
+                        stateful = false;
+
+                switch (keyboardNavEl.dataset.keyboardNavMode) {
+                        case "grid": {
+                                horizontal = true;
+                                vertical = true;
+                                stateful = true;
+                                break;
+                        }
+
+                        case "nav": {
+                                horizontal = true;
+                                wrap = true;
+                                break;
+                        }
+
+                        case "menu": {
+                                vertical = true;
+                                wrap = true;
+                                break;
+                        }
+
+                        case "list": {
+                                vertical = true;
+                                wrap = true;
+                                stateful = true;
+                                break;
+                        }
+                }
+
+                const onKeyDown_ = (e: KeyboardEvent) => {
+                        onKeyDown(keyboardNavEl, itemSelector, horizontal, vertical, wrap, stateful, e);
+                };
+
+                const itemEls = [...keyboardNavEl.querySelectorAll<HTMLElement>(itemSelector)].filter((el) =>
+                        el.matches("a, button, input"),
+                );
+                let focused = false;
+
+                for (const itemEl of itemEls) {
+                        itemEl.addEventListener("keydown", onKeyDown_);
+                        if (!itemEl.classList.contains("is-selected")) {
+                                itemEl.setAttribute("tabindex", "-1");
+                        } else {
+                                focused = true;
+                        }
+                }
+
+                if (!focused) {
+                        itemEls[0]?.removeAttribute("tabindex");
+                }
+        }
+}
diff --git a/src/scripts/lib/lightbox.ts b/src/scripts/lib/lightbox.ts
new file mode 100644
index 0000000..ac5b581
--- /dev/null
+++ b/src/scripts/lib/lightbox.ts
@@ -0,0 +1,450 @@
+import Alpine from "alpinejs";
+
+export interface LightboxItem {
+        thumbnail?: string;
+        src: string;
+        srcset?: string;
+        alt: string;
+}
+
+function touchParams(e: TouchEvent) {
+        const [t0, t1] = e.touches;
+
+        if (e.touches.length > 2 || !t0) {
+                return;
+        }
+
+        let x = t0.clientX;
+        let y = t0.clientY;
+        let dist = 0;
+
+        if (t1) {
+                dist = Math.hypot(x - t1.clientX, y - t1.clientY);
+                x = (x + t1.clientX) / 2;
+                y = (y + t1.clientY) / 2;
+        }
+
+        return { x, y, dist };
+}
+
+export function mountLightbox() {
+        const minZoom = 0.9;
+
+        Alpine.data("lightbox", () => ({
+                _zoom: minZoom,
+                _offsetX: 0,
+                _offsetY: 0,
+
+                loading: false,
+                inertia: false,
+                items: <LightboxItem[]>[],
+                current: 0,
+                dragging: false,
+                touchStart: {
+                        x: 0,
+                        y: 0,
+                        distance: 0,
+                        transformOrigin: { x: 0, y: 0 },
+                        zoom: 1,
+                        offsetX: 0,
+                        offsetY: 0,
+                        timestamp: 0,
+                },
+                velocity: {
+                        measure: false,
+                        prevOffsetX: 0,
+                        prevOffsetY: 0,
+                        timestamp: 0,
+                        x: 0,
+                        y: 0,
+                },
+
+                get zoom() {
+                        return this._zoom;
+                },
+                set zoom(value) {
+                        this._zoom = Math.min(this.maxZoom, Math.max(minZoom, value));
+                        /* oxlint-disable-next-line eslint/no-self-assign */ // deno-lint-ignore no-self-assign
+                        this.offsetX = this.offsetX;
+                        /* oxlint-disable-next-line eslint/no-self-assign */ // deno-lint-ignore no-self-assign
+                        this.offsetY = this.offsetY;
+                },
+
+                get offsetX() {
+                        return this._offsetX;
+                },
+                set offsetX(value) {
+                        const limit = this.offsetLimit;
+                        this._offsetX = Math.min(limit.x, Math.max(-limit.x, value));
+                },
+
+                get offsetY() {
+                        return this._offsetY;
+                },
+                set offsetY(value) {
+                        const limit = this.offsetLimit;
+                        this._offsetY = Math.min(limit.y, Math.max(-limit.y, value));
+                },
+
+                get offsetLimit(): { x: number; y: number } {
+                        if (!this.$refs.img) {
+                                return { x: 0, y: 0 };
+                        }
+
+                        const th = this.$refs.thumbnails?.clientHeight ?? 0;
+                        const cw = this.$root.clientWidth;
+                        const ch = this.$root.clientHeight - th;
+                        const x = 0.5 * Math.max(0, this.$refs.img.clientWidth * this.zoom - cw);
+                        const y = 0.5 * Math.max(0, this.$refs.img.clientHeight * this.zoom - ch);
+
+                        return { x, y };
+                },
+
+                get open(): boolean {
+                        return !!this.$root.hasAttribute("open");
+                },
+
+                get currentItem(): LightboxItem {
+                        return this.items[this.current] ?? { src: "", alt: "" };
+                },
+
+                get transformOrigin(): { x: number; y: number } {
+                        const img = this.$refs.img;
+
+                        if (!img) {
+                                return { x: this.offsetX, y: this.offsetY };
+                        }
+
+                        return {
+                                x: img.offsetLeft + img.clientWidth / 2 + this.offsetX,
+                                y: img.offsetTop + img.clientHeight / 2 + this.offsetY,
+                        };
+                },
+
+                get naturalZoom() {
+                        const img = <HTMLImageElement>this.$refs.img;
+                        return img ? img.naturalWidth / img.clientWidth : 1;
+                },
+
+                get maxZoom() {
+                        return Math.max(this.naturalZoom, 5);
+                },
+
+                get zoomedFull() {
+                        return Math.abs(this.zoom - this.naturalZoom) < 0.1;
+                },
+
+                init() {
+                        const triggerEls = document.querySelectorAll<HTMLAnchorElement>("a[data-lightbox]");
+                        const galleries = new Map<string, LightboxItem[]>();
+
+                        for (const triggerEl of triggerEls) {
+                                const triggerImgEl = triggerEl.querySelector("img");
+
+                                const key = triggerEl.dataset.lightbox ?? "";
+                                const gallery = galleries.get(key);
+                                const item: LightboxItem = {
+                                        thumbnail: triggerImgEl?.src,
+                                        src: triggerEl.href,
+                                        srcset: triggerEl.dataset.lightboxSrcset,
+                                        alt: "",
+                                };
+
+                                if (gallery) {
+                                        gallery.push(item);
+                                } else {
+                                        galleries.set(key, [item]);
+                                }
+
+                                triggerEl.style.cursor = "zoom-in";
+                                triggerEl.addEventListener("click", (e) => {
+                                        e.preventDefault();
+                                        this.show(galleries.get(key) ?? [], item.src);
+                                });
+                        }
+
+                        this.$watch("currentItem.src", () => {
+                                this.loading = true;
+                                this.reset();
+                        });
+                },
+
+                show(items: LightboxItem[], src?: string) {
+                        const current = items.findIndex((item) => item.src === src);
+                        this.items = items;
+                        this.current = current === -1 ? 0 : current;
+                        this.reset();
+
+                        (<HTMLDialogElement>this.$root).showModal();
+                },
+
+                close() {
+                        (<HTMLDialogElement>this.$root).close();
+                },
+
+                reset() {
+                        this.stopVelocity();
+                        this.stopInertia();
+                        this.dragging = false;
+                        this._zoom = minZoom;
+                        this._offsetX = 0;
+                        this._offsetY = 0;
+                },
+
+                prev() {
+                        this.current = this.current > 0 ? this.current - 1 : this.items.length - 1;
+                },
+
+                next() {
+                        this.current = this.current < this.items.length - 1 ? this.current + 1 : 0;
+                },
+
+                toggleZoom(x?: number, y?: number) {
+                        const zoom = this.zoomedFull ? minZoom : this.naturalZoom;
+                        const deltaZoom = zoom / this.zoom - 1;
+
+                        this.zoom = zoom;
+
+                        if (x !== undefined && y !== undefined) {
+                                const transformOrigin = this.transformOrigin;
+                                const offsetX = transformOrigin.x - x;
+                                const offsetY = transformOrigin.y - y;
+
+                                this.offsetX += offsetX * deltaZoom;
+                                this.offsetY += offsetY * deltaZoom;
+                        }
+                },
+
+                measureVelocity(loop?: boolean) {
+                        if (!loop) {
+                                this.inertia = false;
+
+                                if (this.velocity.measure) {
+                                        return;
+                                } else {
+                                        this.velocity.prevOffsetX = this.offsetX;
+                                        this.velocity.prevOffsetY = this.offsetY;
+                                        this.velocity.x = 0;
+                                        this.velocity.y = 0;
+                                        this.velocity.measure = true;
+                                }
+                        }
+                        if (!this.velocity.measure) {
+                                return;
+                        }
+
+                        const deltaX = this.offsetX - this.velocity.prevOffsetX;
+                        const deltaY = this.offsetY - this.velocity.prevOffsetY;
+                        let window = 1;
+
+                        if (
+                                Math.sqrt(deltaX ** 2 + deltaY ** 2) <
+                                Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2)
+                        ) {
+                                window = 6;
+                        }
+
+                        this.velocity.x -= this.velocity.x / window;
+                        this.velocity.x += deltaX / window;
+                        this.velocity.y -= this.velocity.y / window;
+                        this.velocity.y += deltaY / window;
+
+                        this.velocity.prevOffsetX = this.offsetX;
+                        this.velocity.prevOffsetY = this.offsetY;
+
+                        requestAnimationFrame(this.measureVelocity.bind(this, true));
+                },
+
+                stopVelocity() {
+                        this.velocity.measure = false;
+                },
+
+                runInertia(loop?: boolean, timestamp: DOMHighResTimeStamp = performance.now()) {
+                        const len = Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2);
+
+                        if (!loop) {
+                                this.stopVelocity();
+
+                                if (this.inertia) {
+                                        return;
+                                } else if (len > 5) {
+                                        this.inertia = true;
+                                        this.velocity.timestamp = timestamp;
+                                }
+                        }
+
+                        if (!this.inertia) {
+                                this.stopInertia();
+                                return;
+                        }
+
+                        if (loop) {
+                                const norm = { x: this.velocity.x / len, y: this.velocity.y / len };
+                                const elapsed = timestamp - this.velocity.timestamp;
+                                const friction = 30 * (elapsed / 1000);
+                                const decel = { x: norm.x * friction, y: norm.y * friction };
+                                const decelLen = Math.sqrt(decel.x ** 2 + decel.y ** 2);
+
+                                if (len < decelLen) {
+                                        this.stopInertia();
+                                        return;
+                                }
+
+                                this.offsetX += this.velocity.x;
+                                this.offsetY += this.velocity.y;
+                                this.velocity.x -= decel.x;
+                                this.velocity.y -= decel.y;
+                                this.velocity.timestamp = timestamp;
+                        }
+
+                        requestAnimationFrame(this.runInertia.bind(this, true));
+                },
+
+                stopInertia() {
+                        this.inertia = false;
+                },
+
+                handleClose() {
+                        this.stopVelocity();
+                        this.stopInertia();
+                },
+
+                handleScroll(e: WheelEvent) {
+                        this.stopInertia();
+
+                        const direction = e.deltaY > 0 ? -1 : 1;
+
+                        const transformOrigin = this.transformOrigin;
+                        const offsetX = transformOrigin.x - e.clientX;
+                        const offsetY = transformOrigin.y - e.clientY;
+
+                        const zoom = Math.min(this.maxZoom, Math.max(minZoom, this.zoom * (1 + direction * 0.1)));
+                        const deltaZoom = zoom / this.zoom - 1;
+
+                        this.zoom = zoom;
+                        this.offsetX += offsetX * deltaZoom;
+                        this.offsetY += offsetY * deltaZoom;
+                },
+
+                handleMouseDown(e: MouseEvent) {
+                        this.measureVelocity();
+
+                        if (e.buttons === 1) {
+                                this.dragging = true;
+                        }
+                },
+
+                handleMouseMove(e: MouseEvent) {
+                        if (!this.dragging) {
+                                return;
+                        }
+
+                        this.offsetX += e.movementX;
+                        this.offsetY += e.movementY;
+                },
+
+                handleMouseUp() {
+                        this.dragging = false;
+                        this.runInertia();
+                },
+
+                handleDoubleClick(e: MouseEvent) {
+                        this.toggleZoom(e.clientX, e.clientY);
+                },
+
+                handleTouchStart(e: TouchEvent) {
+                        const params = touchParams(e);
+
+                        if (!params || (e.touches.length === 1 && e.target !== this.$refs.img)) {
+                                return;
+                        }
+
+                        e.preventDefault();
+
+                        const now = Date.now();
+
+                        if (e.touches.length === 1) {
+                                if (
+                                        now - this.touchStart.timestamp < 200 &&
+                                        Math.sqrt((params.x - this.touchStart.x) ** 2 + (params.y - this.touchStart.y) ** 2) < 20
+                                ) {
+                                        this.toggleZoom(params.x, params.y);
+                                }
+                        }
+
+                        this.touchStart.x = params.x;
+                        this.touchStart.y = params.y;
+                        this.touchStart.distance = params.dist;
+                        this.touchStart.transformOrigin = this.transformOrigin;
+                        this.touchStart.zoom = this.zoom;
+                        this.touchStart.offsetX = this.offsetX;
+                        this.touchStart.offsetY = this.offsetY;
+                        this.touchStart.timestamp = now;
+
+                        this.dragging = false;
+
+                        if (e.touches.length === 1) {
+                                this.measureVelocity();
+                        } else {
+                                this.stopVelocity();
+                        }
+                },
+
+                handleTouchMove(e: TouchEvent) {
+                        const params = touchParams(e);
+
+                        if (!params || (e.touches.length === 1 && e.target !== this.$refs.img)) {
+                                return;
+                        }
+
+                        e.preventDefault();
+
+                        const deltaX = params.x - this.touchStart.x;
+                        const deltaY = params.y - this.touchStart.y;
+                        const deltaDist = this.touchStart.distance ? params.dist / this.touchStart.distance : 1;
+
+                        const offsetX = this.touchStart.transformOrigin.x - this.touchStart.x;
+                        const offsetY = this.touchStart.transformOrigin.y - this.touchStart.y;
+
+                        const zoom = Math.min(this.maxZoom, Math.max(minZoom, this.touchStart.zoom * deltaDist));
+                        const deltaZoom = zoom / this.touchStart.zoom - 1;
+
+                        this.zoom = zoom;
+                        this.offsetX = this.touchStart.offsetX + deltaX + offsetX * deltaZoom;
+                        this.offsetY = this.touchStart.offsetY + deltaY + offsetY * deltaZoom;
+                },
+
+                handleTouchEnd(e: TouchEvent) {
+                        this.handleTouchStart(e);
+
+                        if (!e.touches.length) {
+                                this.runInertia();
+                        }
+                },
+
+                handleKeyDown(e: KeyboardEvent) {
+                        if (!this.open || e.defaultPrevented) {
+                                return;
+                        }
+
+                        this.stopInertia();
+
+                        switch (e.key) {
+                                case "Left":
+                                case "ArrowLeft":
+                                        this.prev();
+                                        break;
+
+                                case "Right":
+                                case "ArrowRight":
+                                        this.next();
+                                        break;
+
+                                default:
+                                        return;
+                        }
+
+                        e.preventDefault();
+                },
+        }));
+}
diff --git a/src/scripts/lib/siteHeader.ts b/src/scripts/lib/siteHeader.ts
new file mode 100644
index 0000000..0d9ec43
--- /dev/null
+++ b/src/scripts/lib/siteHeader.ts
@@ -0,0 +1,37 @@
+export function mountSiteHeader() {
+        const headerEl = document.querySelector<HTMLElement>(".c-site-header");
+
+        if (headerEl) {
+                const navbarEl = headerEl?.querySelector(".o-navbar--static-white");
+                const logoEl = headerEl?.querySelector(".c-logo--static-white");
+                const buttonEls = headerEl?.querySelectorAll(".o-button--static-white");
+
+                let settings: IntersectionObserverInit;
+
+                const boundingRect = headerEl.getBoundingClientRect();
+
+                if (boundingRect.top > 0) {
+                        settings = {
+                                rootMargin: "1px 0px -100% 0px",
+                        };
+                } else {
+                        settings = {
+                                root: document.documentElement,
+                                rootMargin: "-1px 0px 0px 0px",
+                                threshold: [1],
+                        };
+                }
+
+                const observer = new IntersectionObserver(([e]) => {
+                        const scroll = e?.isIntersecting;
+                        headerEl.classList.toggle("is-scroll", scroll);
+                        navbarEl?.classList.toggle("o-navbar--static-white", !scroll);
+                        logoEl?.classList.toggle("c-logo--static-white", !scroll);
+                        for (const buttonEl of buttonEls) {
+                                buttonEl.classList.toggle("o-button--static-white", !scroll);
+                        }
+                }, settings);
+
+                observer.observe(headerEl);
+        }
+}
diff --git a/src/scripts/lib/tabbar.ts b/src/scripts/lib/tabbar.ts
new file mode 100644
index 0000000..6a3d3d3
--- /dev/null
+++ b/src/scripts/lib/tabbar.ts
@@ -0,0 +1,12 @@
+export function mountTabbar() {
+        const tabbarEls = document.querySelectorAll<HTMLElement>(".o-tabbar__tabs");
+
+        for (const tabbarEl of tabbarEls) {
+                const selectedItemEl = tabbarEl.querySelector<HTMLElement>(".o-tabbar__tab.is-selected");
+
+                if (selectedItemEl) {
+                        tabbarEl.scrollLeft =
+                                selectedItemEl.offsetLeft - 0.5 * tabbarEl.clientWidth + 0.5 * selectedItemEl.clientWidth;
+                }
+        }
+}
diff --git a/src/scripts/lib/toc.ts b/src/scripts/lib/toc.ts
new file mode 100644
index 0000000..958f209
--- /dev/null
+++ b/src/scripts/lib/toc.ts
@@ -0,0 +1,14 @@
+export function mountToc() {
+        const observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                        const id = entry.target.getAttribute("id");
+                        document
+                                .querySelector(`.o-toc__item[href="#${id}"]`)
+                                ?.classList.toggle("is-selected", entry.intersectionRatio > 0);
+                }
+        });
+
+        document.querySelectorAll("section[id]").forEach((section) => {
+                observer.observe(section);
+        });
+}
diff --git a/src/scripts/script.ts b/src/scripts/script.ts
new file mode 100644
index 0000000..02fb7ff
--- /dev/null
+++ b/src/scripts/script.ts
@@ -0,0 +1,17 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+
+import { mountKeyboardNav } from "./lib/keyboardNav.ts";
+import { mountLightbox } from "./lib/lightbox.ts";
+import { mountSiteHeader } from "./lib/siteHeader.ts";
+import { mountTabbar } from "./lib/tabbar.ts";
+import { mountToc } from "./lib/toc.ts";
+
+document.body.classList.remove("t-no-js");
+document.body.classList.add("t-js");
+
+mountKeyboardNav();
+mountLightbox();
+mountTabbar();
+mountSiteHeader();
+mountToc();
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
new file mode 100644
index 0000000..2b1f6c2
--- /dev/null
+++ b/src/styles/_common.scss
@@ -0,0 +1,87 @@
+@use "sass:map";
+@use "sass:math";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-sass/functions" as fn;
+@use "pkg:iro-sass/easing" as easing;
+@use "pkg:iro-design/config.defaults" as defaults;
+
+$font--standard--family: props.def(
+        --font--standard--family,
+        (
+                "Inter",
+                "Open Sans",
+                "Segoe UI",
+                "Droid Sans",
+                Roboto,
+                Oxygen,
+                "Helvetica Neue",
+                Helvetica,
+                Tahoma,
+                Arial,
+                sans-serif
+        )
+);
+
+@use "pkg:iro-design/core.vars" as core;
+
+@use "./components/site-header.vars" as site-header;
+
+@use "pkg:iro-design/layouts/split-view.vars" with (
+        $panel--sticky-offset: props.def(
+                --l-split-view--panel--sticky-offset,
+                calc(props.get(site-header.$block-size) + props.get(core.$size--400))
+        )
+);
+
+@forward "pkg:iro-design";
+
+@forward "objects/deflist" as o-deflist--*;
+@forward "objects/message" as o-message--*;
+@forward "objects/placeholder-box" as o-placeholder-box--*;
+@forward "objects/toc" as o-toc--*;
+
+@forward "components/home-banner" as c-home-banner--*;
+@forward "components/logo" as c-logo--*;
+@forward "components/site-header" as c-site-header--*;
+@forward "components/site-nav" as c-site-nav--*;
+@forward "components/site-footer" as c-site-footer--*;
+@forward "components/subtitle" as c-subtitle--*;
+@forward "components/visited-indicator" as c-visited-indicator--*;
+
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+        @font-face {
+                font-family: "Inter";
+                font-style: normal;
+                font-weight: 50 950;
+                font-display: swap;
+                src: url(load("/assets/InterVariable.woff2")) format("woff2-variations");
+                font-feature-settings: "ss01";
+        }
+
+        @font-face {
+                font-family: "Inter";
+                font-style: italic;
+                font-weight: 50 950;
+                font-display: swap;
+                src: url(load("/assets/InterVariable-Italic.woff2")) format("woff2-variations");
+                font-feature-settings: "ss01";
+        }
+
+        html {
+                scroll-behavior: smooth;
+                scroll-padding-block-start: props.get(site-header.$block-size);
+                scrollbar-gutter: stable;
+                min-block-size: 100%;
+                display: flex;
+        }
+
+        body {
+                inline-size: 100%;
+        }
+
+        [x-cloak] {
+                display: none;
+        }
+}
diff --git a/src/styles/components/_home-banner.scss b/src/styles/components/_home-banner.scss
new file mode 100644
index 0000000..660cd9b
--- /dev/null
+++ b/src/styles/components/_home-banner.scss
@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "sass:string";
+@use "sass:meta";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@use "site-header.vars" as site-header;
+
+@mixin styles {
+        @include bem.component("home-banner") {
+                @include bem.elem("intro") {
+                        margin-block-start: 0;
+                        font-size: clamp(props.get(iro.$core--font-size--500), 5.3vw, 5rem);
+                        font-weight: 300;
+                        color: props.get(iro.$core--theme, --text);
+                        line-height: 1.2;
+
+                        strong {
+                                font-family: props.get(iro.$core--font--headline--family);
+                                font-weight: 900;
+                                text-transform: uppercase;
+                                letter-spacing: 2px;
+                                color: props.get(iro.$core--theme, --heading);
+                        }
+                }
+
+                @include iro.media--media("<=md") {
+                        @include bem.elem("intro") {
+                                font-size: props.get(iro.$core--font-size--500);
+                        }
+
+                        @include bem.elem("buttons") {
+                                justify-content: center;
+                        }
+                }
+        }
+}
diff --git a/src/styles/components/_logo.scss b/src/styles/components/_logo.scss
new file mode 100644
index 0000000..3450817
--- /dev/null
+++ b/src/styles/components/_logo.scss
@@ -0,0 +1,81 @@
+@use "sass:map";
+@use "sass:string";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+        @include bem.component("logo") {
+                display: block;
+                padding: props.get(iro.$core--size--50);
+                margin-inline: calc(-1 * props.get(iro.$core--size--50));
+                border-radius: props.get(iro.$s-links--rounding);
+                color: props.get(iro.$core--theme, --heading);
+
+                &:link,
+                &:visited {
+                        &:hover {
+                                text-decoration: none;
+                                color: props.get(iro.$core--theme, --text-mute);
+                        }
+
+                        &:focus-visible {
+                                color: props.get(iro.$s-links--key-focus--text-color);
+                                text-decoration: none;
+                                outline: props.get(iro.$s-links--key-focus--border-color) solid
+                                        props.get(iro.$s-links--key-focus--border-width);
+                                box-shadow: 0 0 0
+                                        calc(
+                                                props.get(iro.$s-links--key-focus--border-width) +
+                                                        props.get(iro.$s-links--key-focus--outline-width)
+                                        )
+                                        props.get(iro.$s-links--key-focus--outline-color);
+                        }
+                }
+
+                @include bem.elem("img") {
+                        display: block;
+                        block-size: 1.7em;
+                        aspect-ratio: 2700 / 600;
+                }
+
+                @include bem.modifier("sm") {
+                        @include bem.elem("img") {
+                                aspect-ratio: 600 / 600;
+                        }
+                }
+
+                @include bem.modifier("lg") {
+                        @include bem.elem("img") {
+                                block-size: 2em;
+                        }
+                }
+
+                @each $theme in map.keys(props.get(iro.$core--transparent-colors)) {
+                        $logo-theme: static-#{string.slice($theme, 3)};
+
+                        @include bem.modifier($logo-theme) {
+                                color: props.get(iro.$core--transparent-colors, $theme, --900);
+
+                                &:link,
+                                &:visited {
+                                        &:hover {
+                                                color: props.get(iro.$core--transparent-colors, $theme, --800);
+                                        }
+
+                                        &:focus-visible {
+                                                color: props.get(iro.$core--transparent-colors, $theme, --900);
+                                                outline-color: props.get(iro.$core--transparent-colors, $theme, --900);
+                                                box-shadow: 0 0 0
+                                                        calc(
+                                                                props.get(iro.$s-links--key-focus--border-width) +
+                                                                        props.get(iro.$s-links--key-focus--outline-width)
+                                                        )
+                                                        props.get(iro.$core--transparent-colors, $theme, --300);
+                                        }
+                                }
+                        }
+                }
+        }
+}
diff --git a/src/styles/components/_site-footer.scss b/src/styles/components/_site-footer.scss
new file mode 100644
index 0000000..33608ff
--- /dev/null
+++ b/src/styles/components/_site-footer.scss
@@ -0,0 +1,157 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "site-footer.vars";
+@use "site-footer.vars" as vars;
+
+@mixin styles {
+        @include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+        @property --site-footer--l1-y {
+                initial-value: 0px;
+                inherits: true;
+                syntax: "<length>";
+        }
+
+        @property --site-footer--cloud-y {
+                initial-value: 0px;
+                inherits: true;
+                syntax: "<length>";
+        }
+
+        @property --site-footer--moon-y {
+                initial-value: 0px;
+                inherits: true;
+                syntax: "<length>";
+        }
+
+        @property --site-footer--star-y {
+                initial-value: 0px;
+                inherits: true;
+                syntax: "<length>";
+        }
+
+        @keyframes footer-l1-ani {
+                from {
+                        --site-footer--l1-y: -300px;
+                        --site-footer--cloud-y: -400px;
+                        --site-footer--moon-y: -500px;
+                        --site-footer--star-y: -500px;
+                }
+                to {
+                        --site-footer--l1-y: 300px;
+                        --site-footer--cloud-y: 400px;
+                        --site-footer--moon-y: 500px;
+                        --site-footer--star-y: 500px;
+                }
+        }
+
+        @include bem.component("site-footer") {
+                position: sticky;
+                inset-block-start: 100%;
+
+                @include bem.elem("banner") {
+                        position: relative;
+                        display: flex;
+                        block-size: 33rem;
+                        justify-content: end;
+                        overflow: hidden;
+                        background: linear-gradient(
+                                to bottom,
+                                props.get(vars.$colors, --bg-from) 35%,
+                                props.get(vars.$colors, --bg) 85%
+                        );
+
+                        animation-name: footer-l1-ani;
+                        //animation-fill-mode: both;
+                        animation-duration: 1ms;
+                        animation-timeline: view(block 0% 0%);
+                        animation-timing-function: linear;
+                }
+
+                @include bem.elem("banner-img") {
+                        position: relative;
+                        z-index: 2;
+                        flex: 0 0 auto;
+                        display: block;
+                        block-size: 100%;
+                        margin-inline: auto;
+                        aspect-ratio: 3840 / 1600;
+                }
+
+                @include bem.elem("banner-bg") {
+                        position: absolute;
+                        inset-inline-start: 50%;
+                        inset-block-end: 0;
+                        z-index: 1;
+                        display: block;
+                        inline-size: 100%;
+                        block-size: 100%;
+                        transform: translateX(-50%);
+                }
+
+                @include bem.elem("content-wrap") {
+                        padding-block-end: props.get(iro.$core--size--400);
+                        background-color: props.get(iro.$core--transparent-colors, --black, --900);
+                }
+
+                @include bem.elem("content") {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: props.get(iro.$core--size--600);
+                }
+
+                @include bem.elem("sections") {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: props.get(iro.$core--size--400) props.get(iro.$core--size--800);
+                }
+
+                @include bem.elem("table") {
+                        display: grid;
+                        grid-template-columns: auto auto auto auto;
+                        column-gap: props.get(iro.$core--size--200);
+                }
+
+                @include bem.elem("table-row") {
+                        display: contents;
+                }
+
+                @include bem.elem("divider") {
+                        display: none;
+                }
+
+                @include bem.elem("logo") {
+                        margin-block: auto;
+                        margin-inline-start: auto;
+                }
+
+                @include iro.media--media("<=md") {
+                        @include bem.elem("content") {
+                                flex-direction: column;
+                                align-items: center;
+                        }
+
+                        @include bem.elem("divider") {
+                                display: flex;
+                                inline-size: 100%;
+                        }
+
+                        @include bem.elem("logo") {
+                                margin-inline-start: 0;
+                        }
+                }
+
+                @include iro.media--media("<=sm") {
+                        transform: translateY(calc(-1 * props.get(iro.$o-navbar--block-size)));
+
+                        @include bem.elem("banner-img") {
+                                transform: translateX(max(0rem, 19rem - 50vw));
+                        }
+                }
+        }
+}
diff --git a/src/styles/components/_site-footer.vars.scss b/src/styles/components/_site-footer.vars.scss
new file mode 100644
index 0000000..0b2f968
--- /dev/null
+++ b/src/styles/components/_site-footer.vars.scss
@@ -0,0 +1,34 @@
+@use "pkg:iro-design/core.vars" as core;
+@use "pkg:iro-design/objects/backdrop.vars" as backdrop;
+@use "pkg:iro-sass/props";
+
+$colors: props.def(
+        --site-footer,
+        (
+                --bg-from: props.get(core.$theme, --bg-l1),
+                --bg: props.get(core.$theme, --bg-l1),
+                --star: transparent,
+                --cloud: props.get(core.$theme, --base, --50),
+                --l1: props.get(core.$theme, --bg-base),
+                --dragon-awake: props.get(core.$transparent-colors, --black, --900),
+                --dragon-asleep--eye: transparent,
+                --dragon-asleep: transparent,
+                --fg: props.get(core.$transparent-colors, --black, --900),
+        ),
+        "color"
+);
+
+$colors--dark: props.def(
+        --site-footer,
+        (
+                --bg: props.get(core.$theme, --bg-l2),
+                --star: #fff,
+                --cloud: props.get(core.$theme, --base, --100),
+                --l1: props.get(core.$theme, --bg-l1),
+                --dragon-awake: transparent,
+                --dragon-asleep--eye: #fff,
+                --dragon-asleep: #000,
+                --fg: #000,
+        ),
+        "dark"
+);
diff --git a/src/styles/components/_site-header.scss b/src/styles/components/_site-header.scss
new file mode 100644
index 0000000..d23fa7c
--- /dev/null
+++ b/src/styles/components/_site-header.scss
@@ -0,0 +1,136 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "site-header.vars";
+@use "site-header.vars" as vars;
+
+@mixin styles {
+        @include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+        @include bem.component("site-header") {
+                position: sticky;
+                inset-block-start: 0;
+                z-index: props.get(vars.$z-index);
+                display: flex;
+                gap: props.get(vars.$spacing);
+                align-items: center;
+                line-height: 1.4;
+                block-size: props.get(vars.$block-size);
+                padding-inline: props.get(iro.$l-container--pad-i);
+                background-color: props.get(iro.$core--theme, --bg-l1);
+                overflow: hidden;
+                transition:
+                        background-color 0.2s ease,
+                        opacity 0.2s ease,
+                        transform 0.2s ease,
+                        visibility 0s linear 0.2s;
+
+                @include bem.at-theme("js") {
+                        background-color: transparent;
+                }
+
+                @include bem.modifier("hidden") {
+                        margin-block-start: calc(-1 * props.get(vars.$block-size));
+                        opacity: 0;
+                        visibility: hidden;
+                        transform: translateY(-0.2em);
+
+                        @include bem.is("scroll") {
+                                transition:
+                                        background-color 0.2s ease,
+                                        opacity 0.2s ease,
+                                        transform 0.2s ease,
+                                        visibility 0s linear;
+                                visibility: visible;
+                                opacity: 1;
+                                transform: none;
+                        }
+                }
+
+                @include bem.modifier("end") {
+                        background-color: props.get(iro.$core--transparent-colors, --black, --900);
+                }
+
+                @include bem.is("scroll") {
+                        background-color: props.get(iro.$core--theme, --base, --50);
+                }
+
+                @include bem.elem("logo") {
+                        @include bem.modifier("sm") {
+                                display: none;
+                        }
+                }
+
+                @include bem.elem("nav", "back") {
+                        margin-inline-end: calc(-1 * props.get(vars.$nav-pull));
+                }
+
+                @include bem.elem("back") {
+                        display: none;
+                }
+
+                @include bem.elem("spacer") {
+                        margin-inline-start: auto;
+                }
+
+                @include bem.elem("slot") {
+                        display: contents;
+
+                        @include bem.modifier("sm") {
+                                display: none;
+                        }
+                }
+
+                @include iro.media--media("<=sm") {
+                        @include bem.elem("logo") {
+                                display: none;
+
+                                @include bem.modifier("sm") {
+                                        display: block;
+                                }
+                        }
+
+                        @include bem.elem("nav") {
+                                display: none;
+                        }
+
+                        @include bem.elem("back") {
+                                display: block;
+                        }
+
+                        @include bem.elem("slot") {
+                                @include bem.modifier("end") {
+                                        display: none;
+                                }
+
+                                @include bem.modifier("sm") {
+                                        display: contents;
+                                }
+                        }
+
+                        @include bem.modifier("end") {
+                                @include bem.elem("logo") {
+                                        display: block;
+
+                                        @include bem.modifier("sm") {
+                                                display: none;
+                                        }
+                                }
+
+                                @include bem.elem("slot") {
+                                        @include bem.modifier("sm") {
+                                                display: none;
+                                        }
+                                }
+                        }
+                }
+
+                @include iro.media--media("height<=500px") {
+                        position: relative;
+                }
+        }
+}
diff --git a/src/styles/components/_site-header.vars.scss b/src/styles/components/_site-header.vars.scss
new file mode 100644
index 0000000..282e944
--- /dev/null
+++ b/src/styles/components/_site-header.vars.scss
@@ -0,0 +1,14 @@
+@use "pkg:iro-design/core.vars" as core;
+@use "pkg:iro-design/objects/backdrop.vars" as backdrop;
+@use "pkg:iro-sass/props";
+
+$z-index: props.def(--c-site-header--z-index, calc(props.get(backdrop.$z-index) - 10));
+$block-size: props.def(--c-site-header--block-size, props.get(core.$size--800));
+$spacing: props.def(--c-site-header--spacing, props.get(core.$size--500));
+$nav-pull: props.def(--c-site-header--nav-pull, props.get(core.$size--300));
+
+$spacing--md: props.def(--c-site-header--spacing, props.get(core.$size--400), "md");
+$nav-pull--md: props.def(--c-site-header--nav-pull, props.get(core.$size--200), "md");
+
+$block-size--sm: props.def(--c-site-header--block-size, props.get(core.$size--700), "sm");
+$spacing--sm: props.def(--c-site-header--spacing, props.get(core.$size--300), "sm");
diff --git a/src/styles/components/_site-nav.scss b/src/styles/components/_site-nav.scss
new file mode 100644
index 0000000..99a8afc
--- /dev/null
+++ b/src/styles/components/_site-nav.scss
@@ -0,0 +1,30 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@mixin styles {
+        @include bem.component("site-nav-placeholder") {
+                block-size: props.get(iro.$o-navbar--block-size);
+
+                @include iro.media--media(">sm") {
+                        display: none;
+                }
+        }
+
+        @include bem.component("site-nav") {
+                position: fixed;
+                inset-block-end: 0;
+                inset-inline: 0;
+                z-index: calc(props.get(iro.$o-backdrop--z-index) - 10);
+                background-color: props.get(iro.$core--transparent-colors, --black, --900);
+                //border-block-start: 1px solid props.get(iro.$core--theme, --border-mute);
+                overflow-x: auto;
+
+                @include iro.media--media(">sm") {
+                        display: none;
+                }
+        }
+}
diff --git a/src/styles/components/_subtitle.scss b/src/styles/components/_subtitle.scss
new file mode 100644
index 0000000..e9a40bb
--- /dev/null
+++ b/src/styles/components/_subtitle.scss
@@ -0,0 +1,11 @@
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+        @include bem.component("subtitle") {
+                margin-block-start: props.get(iro.$s-implicit--paragraph--margin-bs);
+                color: props.get(iro.$core--theme, --text-mute-more);
+                font-size: props.get(iro.$core--font-size--300);
+        }
+}
diff --git a/src/styles/components/_visited-indicator.scss b/src/styles/components/_visited-indicator.scss
new file mode 100644
index 0000000..7aa1f38
--- /dev/null
+++ b/src/styles/components/_visited-indicator.scss
@@ -0,0 +1,27 @@
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+        @include bem.component("with-visited-indicator") {
+                @include bem.elem("indicator") {
+                        block-size: 1.4em;
+                        color: props.get(iro.$core--theme, --text);
+
+                        &::after {
+                                content: "";
+                                display: block;
+                                block-size: 100%;
+                                inline-size: props.get(iro.$core--border-width--thick);
+                                border-radius: 10em;
+                                background-color: currentColor;
+                        }
+                }
+
+                &:visited {
+                        @include bem.elem("indicator") {
+                                color: props.get(iro.$core--theme, --border-mute);
+                        }
+                }
+        }
+}
diff --git a/src/styles/objects/_deflist.scss b/src/styles/objects/_deflist.scss
new file mode 100644
index 0000000..63ba1b9
--- /dev/null
+++ b/src/styles/objects/_deflist.scss
@@ -0,0 +1,25 @@
+@use "sass:list";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+        @include bem.object("deflist") {
+                display: grid;
+                grid-template-columns: auto 1fr;
+                gap: props.get(iro.$core--size--50) props.get(iro.$core--size--400);
+                padding: 0;
+                margin-block: props.get(iro.$s-implicit--paragraph--margin-bs) 0;
+                margin-inline: 0;
+
+                dt {
+                        font-weight: bold;
+                        color: props.get(iro.$core--theme, --heading);
+                }
+
+                dd {
+                        margin: 0;
+                }
+        }
+}
diff --git a/src/styles/objects/_message.scss b/src/styles/objects/_message.scss
new file mode 100644
index 0000000..a7c9996
--- /dev/null
+++ b/src/styles/objects/_message.scss
@@ -0,0 +1,216 @@
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "message.vars";
+@use "message.vars" as vars;
+
+@mixin styles {
+        @include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+        @include bem.object("message") {
+                display: grid;
+                position: relative;
+                grid-template-rows: auto 1fr auto;
+                grid-template-columns:
+                        auto calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x))
+                        minmax(0, 1fr);
+                grid-template-areas:
+                        "line-from avatar  main"
+                        "line-from line-to main"
+                        "line-from replies replies";
+
+                & + & {
+                        padding-block-start: props.get(vars.$spacing-outer);
+                }
+
+                @include bem.elem("line-from") {
+                        grid-area: line-from;
+                        position: relative;
+                        inline-size: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x));
+
+                        &::before,
+                        &::after {
+                                content: "";
+                                display: block;
+                                position: absolute;
+                                inset-block-start: 0;
+                                inset-inline-start: props.get(vars.$line-offset);
+                        }
+
+                        &::before {
+                                inline-size: props.get(vars.$line-width);
+                                block-size: calc(100% + props.get(vars.$spacing-outer));
+                                background-color: props.get(vars.$colors, --line);
+                        }
+
+                        &::after {
+                                inline-size: calc(
+                                        props.get(vars.$avatar-size) - props.get(vars.$line-offset) + props.get(vars.$spacing-x)
+                                );
+                                block-size: calc(0.5 * (props.get(vars.$avatar-size) - props.get(vars.$line-width)));
+                                border-block-end: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
+                                border-inline-start: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
+                                border-radius: 0 0 0 props.get(vars.$line-curve);
+                        }
+
+                        @include bem.modifier("last") {
+                                &::before {
+                                        block-size: 0;
+                                }
+                        }
+
+                        @include bem.sibling-elem("avatar") {
+                                &::before {
+                                        inset-block-start: 50%;
+                                        inset-block-end: auto;
+                                        inset-inline-start: 0;
+                                        inline-size: 50%;
+                                        block-size: props.get(vars.$line-width);
+                                        transform: translateY(-50%);
+                                }
+                        }
+                }
+
+                @include bem.elem("line-to") {
+                        grid-area: line-to;
+                        display: block;
+                        inline-size: props.get(vars.$line-width);
+                        margin-inline-start: props.get(vars.$line-offset);
+                        background-color: props.get(vars.$colors, --line);
+                }
+
+                @include bem.elem("avatar") {
+                        position: relative;
+                        grid-area: avatar;
+                        inline-size: props.get(vars.$avatar-size);
+                        block-size: props.get(vars.$avatar-size);
+                        margin-inline-end: props.get(vars.$spacing-x);
+
+                        &::before,
+                        &::after {
+                                content: "";
+                                display: block;
+                                position: absolute;
+                                z-index: -1;
+                                inset-inline-start: props.get(vars.$line-offset);
+                                inline-size: props.get(vars.$line-width);
+                                block-size: 50%;
+                                background-color: props.get(vars.$colors, --line);
+                        }
+
+                        &::before {
+                                inset-block-start: 0;
+                        }
+
+                        &::after {
+                                inset-block-end: 0;
+                        }
+
+                        @include bem.modifier("last") {
+                                &::after {
+                                        display: none;
+                                }
+                        }
+                }
+
+                @include bem.elem("avatar-dot") {
+                        grid-area: avatar;
+                        position: absolute;
+                        inset-block-start: 50%;
+                        inset-inline-start: 50%;
+                        inline-size: props.get(vars.$dot-radius);
+                        block-size: props.get(vars.$dot-radius);
+                        transform: translate(-50%, -50%);
+                        border: props.get(vars.$dot-width) solid props.get(vars.$colors, --dot, --border);
+                        border-radius: 1em;
+                        background-color: props.get(vars.$colors, --dot, --bg);
+                }
+
+                @include bem.elem("meta") {
+                        white-space: nowrap;
+                        color: props.get(vars.$colors, --meta);
+                }
+
+                @include bem.elem("main") {
+                        position: relative;
+                        grid-area: main;
+                }
+
+                @include bem.elem("replies") {
+                        grid-area: replies;
+
+                        &::before {
+                                content: "";
+                                grid-area: line;
+                                display: block;
+                                inline-size: props.get(vars.$line-width);
+                                block-size: props.get(vars.$spacing-inner);
+                                margin-inline-start: props.get(vars.$line-offset);
+                                background-color: props.get(vars.$colors, --line);
+                        }
+                }
+
+                @include bem.elem("header") {
+                        line-height: 1.4;
+
+                        @include bem.next-elem("body") {
+                                padding-block-start: props.get(vars.$spacing-y);
+                        }
+                }
+
+                @include bem.elem("body") {
+                        word-wrap: break-word;
+
+                        &::before {
+                                content: "";
+                                display: block;
+                                margin-block: -100em 100em;
+                        }
+                }
+
+                @include bem.elem("attachments") {
+                        display: grid;
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$attachment-width), 1fr));
+                        grid-auto-rows: auto;
+                        gap: props.get(vars.$spacing-x);
+                        margin-block-start: props.get(vars.$spacing-attachments);
+                }
+
+                @include bem.elem("attachment") {
+                        aspect-ratio: 3 / 2;
+                        background-color: props.get(vars.$colors, --attachment, --bg);
+                }
+
+                @include bem.modifier("expanded") {
+                        grid-template-rows: auto 1fr auto;
+                        grid-template-columns: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x)) minmax(
+                                        0,
+                                        1fr
+                                );
+                        grid-template-areas:
+                                "avatar      header"
+                                "body        body"
+                                "attachments attachments";
+
+                        @include bem.elem("header") {
+                                grid-area: header;
+                                align-self: center;
+                        }
+
+                        @include bem.elem("main") {
+                                display: contents;
+                        }
+
+                        @include bem.elem("body") {
+                                grid-area: body;
+                        }
+
+                        @include bem.elem("attachments") {
+                                grid-area: attachments;
+                        }
+                }
+        }
+}
diff --git a/src/styles/objects/_message.vars.scss b/src/styles/objects/_message.vars.scss
new file mode 100644
index 0000000..f394894
--- /dev/null
+++ b/src/styles/objects/_message.vars.scss
@@ -0,0 +1,39 @@
+@use "pkg:iro-design/core.vars" as core;
+@use "pkg:iro-design/objects/avatar.vars" as avatar;
+@use "pkg:iro-sass/props";
+
+$avatar-size: props.def(--o-message--avatar-size, props.get(avatar.$size));
+
+$dot-radius: props.def(--o-message--dot-radius, 6px);
+$dot-width: props.def(--o-message--dot-width, 4px);
+
+$spacing-x: props.def(--o-message--spacing-x, props.get(core.$size--200));
+$spacing-y: props.def(--o-message--spacing-y, props.get(core.$size--150));
+$spacing-inner: props.def(--o-message--spacing-inner, props.get(core.$size--500));
+$spacing-outer: props.def(--o-message--spacing-outer, props.get(core.$size--700));
+$spacing-attachments: props.def(--o-message--spacing-attachments, props.get(core.$size--200));
+
+$line-width: props.def(--o-message--line-width, props.get(core.$border-width--medium));
+$line-offset: props.def(
+        --o-message--line-offset,
+        calc(0.5 * props.get($avatar-size) - props.get($line-width))
+);
+$line-curve: props.def(--o-message--line-curve, props.get(core.$size--250));
+
+$attachment-width: props.def(--o-message--attachment-width, props.get(core.$size--2000));
+
+$colors: props.def(
+        --o-message,
+        (
+                --meta: props.get(core.$theme, --text-mute-more),
+                --line: props.get(core.$theme, --border),
+                --dot: (
+                        --border: props.get(core.$theme, --text-mute-more),
+                        --bg: props.get(core.$theme, --bg-base),
+                ),
+                --attachment: (
+                        --bg: props.get(core.$theme, --border-mute),
+                ),
+        ),
+        "color"
+);
diff --git a/src/styles/objects/_placeholder-box.scss b/src/styles/objects/_placeholder-box.scss
new file mode 100644
index 0000000..9be3dc8
--- /dev/null
+++ b/src/styles/objects/_placeholder-box.scss
@@ -0,0 +1,12 @@
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+        @include bem.object("placeholder-box") {
+                padding: props.get(iro.$core--size--250) props.get(iro.$core--size--300);
+                border: props.get(iro.$core--border-width--thin) dashed
+                        props.get(iro.$core--theme, --border, --mute);
+                border-radius: props.get(iro.$core--rounding);
+        }
+}
diff --git a/src/styles/objects/_toc.scss b/src/styles/objects/_toc.scss
new file mode 100644
index 0000000..aefb0c5
--- /dev/null
+++ b/src/styles/objects/_toc.scss
@@ -0,0 +1,27 @@
+@use "sass:list";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+        @include bem.object("toc") {
+                @include bem.elem("item") {
+                        @include bem.next-twin-elem {
+                                margin-block-start: props.get(iro.$core--size--50);
+                        }
+
+                        @include bem.is("active") {
+                                @include bem.elem("item-link") {
+                                        font-weight: bold;
+                                        text-decoration-line: none;
+                                        color: props.get(iro.$core--theme, --heading);
+
+                                        &:hover {
+                                                text-decoration-line: underline;
+                                        }
+                                }
+                        }
+                }
+        }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
new file mode 100644
index 0000000..75d123f
--- /dev/null
+++ b/src/styles/style.scss
@@ -0,0 +1,53 @@
+@use "./common" as iro;
+
+@include iro.layers--styles;
+@include iro.core--styles;
+@include iro.styles;
+
+@include iro.s-implicit--styles;
+@include iro.s-blockquotes--styles;
+@include iro.s-body--styles;
+@include iro.s-code--styles;
+@include iro.s-figures--styles;
+@include iro.s-headings--styles;
+@include iro.s-lists--styles;
+@include iro.s-links--styles;
+
+@include iro.l-card-list--styles;
+@include iro.l-container--styles;
+@include iro.l-flex--styles;
+@include iro.l-hlist--styles;
+@include iro.l-media--styles;
+@include iro.l-split-view--styles;
+
+@include iro.o-alert--styles;
+@include iro.o-avatar--styles;
+@include iro.o-backdrop--styles;
+@include iro.o-button--styles;
+@include iro.o-card--styles;
+@include iro.o-deflist--styles;
+@include iro.o-dialog--styles;
+@include iro.o-divider--styles;
+@include iro.o-emoji--styles;
+@include iro.o-figure--styles;
+@include iro.o-heading--styles;
+@include iro.o-icon--styles;
+@include iro.o-thumbnail--styles;
+@include iro.o-lightbox--styles;
+@include iro.o-navbar--styles;
+@include iro.o-placeholder-box--styles;
+@include iro.o-side-nav--styles;
+@include iro.o-tabbar--styles;
+@include iro.o-text-field--styles;
+@include iro.o-toc--styles;
+
+@include iro.c-home-banner--styles;
+@include iro.c-logo--styles;
+@include iro.c-site-header--styles;
+@include iro.c-site-nav--styles;
+@include iro.c-site-footer--styles;
+@include iro.c-subtitle--styles;
+@include iro.c-visited-indicator--styles;
+
+@include iro.utils--styles;
+@include iro.themes--styles;
diff --git a/src/ui/base/BaseLayout.tsx b/src/ui/base/BaseLayout.tsx
new file mode 100644
index 0000000..c57d41e
--- /dev/null
+++ b/src/ui/base/BaseLayout.tsx
@@ -0,0 +1,134 @@
+// @ts-types="corvos/mod.ts"
+import { getGenerator, type Select } from "corvos/mod.ts";
+
+import site from "@/corvos.config.ts";
+
+import { SiteFooter } from "../components/SiteFooter.tsx";
+import { SiteNav } from "../components/SiteNav.tsx";
+import { Lightbox } from "../objects/Lightbox.tsx";
+
+export interface Props {
+        page: Select<typeof site, ".html">;
+        image?: string;
+        theme?: "l1" | "l2" | null;
+        children?: JSX.Element;
+        class?: unknown;
+}
+
+export const BaseLayout = site.$.component(
+        async ({ page, theme = "l1", image: imageUrl, children, class: cls }: Props, pages) => {
+                const query = site.$.query(pages);
+
+                const stylesheet = await site.load("styles/style.scss");
+                const script = await site.load("scripts/script.ts");
+                const fonts = await site.glob("assets/**.woff2");
+                const favicon = await site.load("assets/favicon.svg");
+                const image = await site.load(
+                        imageUrl ?? "https://strapi.volpeon.ink/uploads/icon_7999cf625e.png",
+                );
+
+                const feeds = query.type(".rss").many();
+
+                return (
+                        <>
+                                {{ __html: "<!DOCTYPE html>" }}
+                                <html lang="en">
+                                        <head>
+                                                <meta charset="utf-8" />
+                                                <meta content="light dark" name="color-scheme" />
+                                                <meta content="width=device-width, initial-scale=1" name="viewport" />
+                                                <meta content="scale" name="text-scale" />
+                                                <link href={site.$.url("sitemap.xml")} rel="sitemap" />
+                                                <link href={favicon.url} rel="icon" type="image/svg+xml" />
+                                                {fonts.map((font) => (
+                                                        <link as="font" href={font.url} rel="preload" type="font/woff2" />
+                                                ))}
+
+                                                <style>@layer scope, theme, object, layout, component, utility;</style>
+                                                <link rel="stylesheet" href={stylesheet.url} />
+                                                <script src={script.url} defer />
+                                                {feeds.map((feed) => (
+                                                        <link
+                                                                rel="alternate"
+                                                                href={feed.url}
+                                                                title={feed.data.title}
+                                                                type="application/rss+xml"
+                                                        />
+                                                ))}
+                                                <title>
+                                                        {page.data.title}
+                                                        {page.data.type === "home" ? "" : " · Corvos"}
+                                                </title>
+
+                                                <meta property="og:type" content="website" />
+                                                <meta property="og:site_name" content="Corvos" />
+                                                <meta property="og:locale" content="en" />
+                                                {"description" in page.data && page.data.description && (
+                                                        <>
+                                                                <meta property="og:description" content={page.data.description} />
+                                                                <meta name="description" content={page.data.description} />
+                                                        </>
+                                                )}
+                                                <meta property="og:url" content={site.$.url("", true)} />
+                                                <meta property="og:image" content={image.url} />
+                                                <meta name="twitter:card" content={imageUrl ? "summary_large_image" : "summary"} />
+                                                <meta name="generator" content={getGenerator()} />
+                                        </head>
+                                        <body class:list={["t-no-js", { [`t-${theme}`]: theme }, cls]}>
+                                                {children}
+
+                                                <SiteFooter />
+                                                <SiteNav url={page.url} />
+                                                <Lightbox />
+                                                <svg
+                                                        version="1.1"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                                                        class="u-d-none"
+                                                >
+                                                        <title>Loading indicator</title>
+                                                        <symbol id="loading-indicator" viewBox="0 0 50 50">
+                                                                <circle
+                                                                        cx="25"
+                                                                        cy="25"
+                                                                        r="20"
+                                                                        fill="none"
+                                                                        stroke="currentColor"
+                                                                        stroke-width=".4em"
+                                                                        stroke-linecap="round"
+                                                                        stroke-dasharray="1 200"
+                                                                        stroke-dashoffset="0"
+                                                                        stroke-miterlimit="10"
+                                                                        transform-origin="center center"
+                                                                >
+                                                                        <animate
+                                                                                attributeName="stroke-dasharray"
+                                                                                keyTimes="0;0.5;1"
+                                                                                values="1 200;89 200;89 200"
+                                                                                dur="2s"
+                                                                                repeatCount="indefinite"
+                                                                        />
+                                                                        <animate
+                                                                                attributeName="stroke-dashoffset"
+                                                                                keyTimes="0;0.5;1"
+                                                                                values="0;-35;-124"
+                                                                                dur="2s"
+                                                                                repeatCount="indefinite"
+                                                                        />
+                                                                        <animateTransform
+                                                                                attributeName="transform"
+                                                                                type="rotate"
+                                                                                from="0"
+                                                                                to="360"
+                                                                                dur="1.3s"
+                                                                                repeatCount="indefinite"
+                                                                        />
+                                                                </circle>
+                                                        </symbol>
+                                                </svg>
+                                        </body>
+                                </html>
+                        </>
+                );
+        },
+);
diff --git a/src/ui/components/Logo.tsx b/src/ui/components/Logo.tsx
new file mode 100644
index 0000000..a9ec9be
--- /dev/null
+++ b/src/ui/components/Logo.tsx
@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import site from "@/corvos.config.ts";
+
+export type Props = HTMLAttributes<"a"> & {
+        size?: "sm" | "lg";
+        variant?: "static-black" | "static-white";
+};
+
+export const Logo = async ({ size, variant, class: cls, ...props }: Props) => {
+        const symbols = await site.load("assets/symbols.svg");
+
+        return (
+                <a
+                        aria-label="Home"
+                        class:list={[
+                                "c-logo",
+                                {
+                                        [`c-logo--${size}`]: size,
+                                        [`c-logo--${variant}`]: variant,
+                                },
+                                cls,
+                        ]}
+                        href={site.$.url()}
+                        rel="home"
+                        {...props}
+                >
+                        <svg class="c-logo__img">
+                                <title>Logo</title>
+                                <use href={`${symbols.url}#logo${size === "sm" ? "-sm" : ""}`} />
+                        </svg>
+                </a>
+        );
+};
diff --git a/src/ui/components/ReleaseCard.tsx b/src/ui/components/ReleaseCard.tsx
new file mode 100644
index 0000000..bffe256
--- /dev/null
+++ b/src/ui/components/ReleaseCard.tsx
@@ -0,0 +1,47 @@
+import type { Select } from "corvos";
+
+import type site from "@/corvos.config.ts";
+
+import { CardBody } from "$/ui/objects/CardBody.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+
+import { Card, type Props as CardProps } from "../objects/Card.tsx";
+
+export type Props = CardProps<"a"> & {
+        "heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+        "page": Select<typeof site, ".html", { type: "release" }>;
+};
+
+export const ReleaseCard = ({ "heading-level": headingLevel, page, ...props }: Props) => {
+        return (
+                <Card
+                        as="a"
+                        class="c-with-visited-indicator h-entry u-url"
+                        horizontal
+                        href={page.url}
+                        {...props}
+                >
+                        <CardBody class="c-with-visited-indicator__indicator u-pie-0" />
+
+                        <CardBody main>
+                                <Heading as={headingLevel} class="p-name">
+                                        <span class="u-mie-100">{page.data.title}</span>
+                                </Heading>
+                        </CardBody>
+
+                        <CardBody as="small" class="u-c-mute u-d-none@sm-lo">
+                                <ul class="l-hlist l-hlist--separated">
+                                        <li class="l-hlist__item">
+                                                <time class="dt-published" datetime={page.data.date.toISOString()}>
+                                                        {page.data.date.toLocaleDateString(undefined, {
+                                                                day: "numeric",
+                                                                month: "short",
+                                                                year: "numeric",
+                                                        })}
+                                                </time>
+                                        </li>
+                                </ul>
+                        </CardBody>
+                </Card>
+        );
+};
diff --git a/src/ui/components/SiteFooter.tsx b/src/ui/components/SiteFooter.tsx
new file mode 100644
index 0000000..8bada2e
--- /dev/null
+++ b/src/ui/components/SiteFooter.tsx
@@ -0,0 +1,39 @@
+import site from "@/corvos.config.ts";
+
+import { Container } from "../layouts/Container.tsx";
+import { Divider } from "../objects/Divider.tsx";
+import { Logo } from "./Logo.tsx";
+
+export const SiteFooter = async () => {
+        const symbols = await site.load("assets/symbols.svg");
+
+        return (
+                <footer class="c-site-footer">
+                        <div class="c-site-footer__banner">
+                                <svg class="c-site-footer__banner-img">
+                                        <use href={`${symbols.url}#site-footer`} />
+                                </svg>
+
+                                <svg class="c-site-footer__banner-bg">
+                                        <use href={`${symbols.url}#site-footer-bg`} />
+                                </svg>
+                        </div>
+
+                        <div class="c-site-footer__content-wrap t-static-white">
+                                <Container class="c-site-footer__content" fixed="150" pad-block pad-inline>
+                                        <div class="c-site-footer__sections">
+                                                <section class="c-site-footer__section s-links s-links--mark-external s-links--static-white">
+                                                        Developed by <a href="https://volpeon.ink/">Volpeon</a>
+                                                </section>
+                                        </div>
+
+                                        <Divider class="c-site-footer__divider" level="quiet" variant="static-white" />
+
+                                        <section class="c-site-footer__logo">
+                                                <Logo size="lg" variant="static-white" />
+                                        </section>
+                                </Container>
+                        </div>
+                </footer>
+        );
+};
diff --git a/src/ui/components/SiteHeader.tsx b/src/ui/components/SiteHeader.tsx
new file mode 100644
index 0000000..17831a1
--- /dev/null
+++ b/src/ui/components/SiteHeader.tsx
@@ -0,0 +1,121 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { nav } from "../../data/nav.ts";
+import { ActionButton } from "../objects/ActionButton.tsx";
+import { Navbar } from "../objects/Navbar.tsx";
+import { NavbarItem } from "../objects/NavbarItem.tsx";
+import { Logo } from "./Logo.tsx";
+
+export type Props = HTMLAttributes<"header"> & {
+        "url": string;
+        "mode"?: "compact" | "none";
+        "at-end"?: boolean;
+        "hidden"?: boolean;
+        "sm"?: JSX.Element;
+        "end"?: JSX.Element;
+        "children"?: JSX.Element;
+};
+
+export const SiteHeader = ({
+        children,
+        sm,
+        url,
+        mode,
+        "at-end": atEnd,
+        hidden,
+        end,
+        class: cls,
+        ...props
+}: Props) => {
+        const navItems = nav.map((item) => ({
+                ...item,
+                selected: new RegExp(`^${item.url.replace("/#", "/")}`).test(url),
+        }));
+
+        const parent = navItems
+                .filter((item) => item.url !== url)
+                .reduce(
+                        (parent: (typeof navItems)[number] | undefined, item) =>
+                                item.selected && item.url.length > (parent?.url.length ?? 0) ? item : parent,
+                        undefined,
+                );
+        const selected = navItems.reduce(
+                (sel, item) => (item.selected && item.url.length > sel.url.length ? item : sel),
+                {
+                        icon: "",
+                        label: "Back",
+                        selected: true,
+                        url: "/",
+                },
+        );
+
+        const variant = atEnd ? "static-white" : undefined;
+
+        return (
+                <header
+                        class:list={[
+                                "c-site-header",
+                                "l-media",
+                                { "c-site-header--end": atEnd, "c-site-header--hidden": hidden },
+                                cls,
+                        ]}
+                        {...props}
+                >
+                        <Logo class="c-site-header__logo l-media__block" variant={variant} />
+
+                        {mode !== "none" && (
+                                <>
+                                        <Navbar aria-label="Mainmenu" class="c-site-header__nav l-media__block" variant={variant}>
+                                                {mode === "compact" ? (
+                                                        <NavbarItem
+                                                                href={selected.url}
+                                                                pre={<Icon icon="arrow-left" variant="bold" />}
+                                                                selected
+                                                        >
+                                                                {selected.label}
+                                                        </NavbarItem>
+                                                ) : (
+                                                        navItems
+                                                                .filter((item) => item.url !== "/" && !item.hidden)
+                                                                .map((item) => (
+                                                                        <NavbarItem as="a" href={item.url} selected={item.selected}>
+                                                                                {item.label}
+                                                                        </NavbarItem>
+                                                                ))
+                                                )}
+                                        </Navbar>
+
+                                        {parent && (
+                                                <ActionButton
+                                                        align-block
+                                                        class="c-site-header__back l-media__block"
+                                                        href={parent.url}
+                                                        icon={<Icon icon="arrow-left" variant="bold" />}
+                                                        level="quiet"
+                                                        pill
+                                                />
+                                        )}
+                                </>
+                        )}
+
+                        {children}
+
+                        {sm && <div class="c-site-header__slot c-site-header__slot--sm">{sm}</div>}
+
+                        {end && (
+                                <>
+                                        <div class="c-site-header__spacer" />
+                                        <div class="c-site-header__slot c-site-header__slot--end">{end}</div>
+                                </>
+                        )}
+
+                        <Logo
+                                class="c-site-header__logo c-site-header__logo--sm l-media__block"
+                                size="sm"
+                                variant={variant}
+                        />
+                </header>
+        );
+};
diff --git a/src/ui/components/SiteNav.tsx b/src/ui/components/SiteNav.tsx
new file mode 100644
index 0000000..7518e3c
--- /dev/null
+++ b/src/ui/components/SiteNav.tsx
@@ -0,0 +1,38 @@
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { nav } from "../../data/nav.ts";
+import { Navbar } from "../objects/Navbar.tsx";
+import { NavbarItem } from "../objects/NavbarItem.tsx";
+
+export interface Props {
+        url: string;
+}
+
+export const SiteNav = ({ url }: Props) => {
+        const navItems = nav
+                .filter((item) => !item.hidden)
+                .map((item) => ({
+                        ...item,
+                        selected: item.url === "/" ? item.url === url : new RegExp(`^${item.url}`).test(url),
+                }));
+
+        return (
+                <>
+                        <div class="c-site-nav-placeholder"></div>
+
+                        <footer class="c-site-nav">
+                                <Navbar aria-label="Mainmenu" quiet variant="static-white">
+                                        {navItems.map((item) => (
+                                                <NavbarItem
+                                                        href={item.url}
+                                                        icon={<Icon icon={item.icon} variant={item.selected ? "fill" : "regular"} />}
+                                                        selected={item.selected}
+                                                >
+                                                        {item.label}
+                                                </NavbarItem>
+                                        ))}
+                                </Navbar>
+                        </footer>
+                </>
+        );
+};
diff --git a/src/ui/layouts/CardList.tsx b/src/ui/layouts/CardList.tsx
new file mode 100644
index 0000000..96ae642
--- /dev/null
+++ b/src/ui/layouts/CardList.tsx
@@ -0,0 +1,52 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+        "layout"?:
+                | "merge"
+                | "grid"
+                | "grid-sm"
+                | "grid-xs"
+                | "flex"
+                | "flex-sm"
+                | "flex-xs"
+                | "masonry"
+                | "masonry-h"
+                | "masonry-h-sm";
+        "quiet"?: boolean;
+        "border"?: boolean;
+        "interactive"?: boolean;
+        "no-shadow"?: boolean;
+        "no-flush"?: boolean;
+        "keyboard-nav"?: boolean;
+};
+
+export const CardList = ({
+        layout,
+        quiet,
+        border,
+        interactive,
+        "no-shadow": noShadow,
+        "no-flush": noFlush,
+        "keyboard-nav": keyboardNav,
+        class: cls,
+        ...props
+}: Props) => (
+        <div
+                class:list={[
+                        "l-card-list",
+                        {
+                                [`l-card-list--${layout}`]: layout,
+                                "l-card-list--interactive": interactive,
+                                "l-card-list--no-flush": noFlush,
+                                "l-card-list--quiet": quiet,
+                                "l-card-list--borderless": !border,
+                                "l-card-list--shadow": layout === "merge" && !noShadow,
+                                "js-keyboard-nav": keyboardNav,
+                        },
+                        cls,
+                ]}
+                data-keyboard-nav-item=".l-card-list__card"
+                data-keyboard-nav-mode="grid"
+                {...props}
+        />
+);
diff --git a/src/ui/layouts/Container.tsx b/src/ui/layouts/Container.tsx
new file mode 100644
index 0000000..7ce7ed5
--- /dev/null
+++ b/src/ui/layouts/Container.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as": Tag;
+        "pad-inline"?: boolean;
+        "pad-block"?: boolean;
+        "size"?: "sm";
+        "fixed"?: boolean | "150" | "200";
+}>;
+
+export const Container = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        class: cls,
+        "pad-inline": padInline,
+        "pad-block": padBlock,
+        fixed,
+        size,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-container",
+                        {
+                                "l-container--pad-i": padInline,
+                                "l-container--pad-b": padBlock,
+                                [`l-container--${size}`]: size,
+                                [`l-container--fixed${typeof fixed === "boolean" ? "" : `-${fixed}`}`]: fixed,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/layouts/EmojiGrid.tsx b/src/ui/layouts/EmojiGrid.tsx
new file mode 100644
index 0000000..5dc9266
--- /dev/null
+++ b/src/ui/layouts/EmojiGrid.tsx
@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+        id: string;
+        sprite: {
+                variants: { size: number; space: number }[];
+                wrap: number;
+        };
+        count: number;
+};
+
+export const EmojiGrid = ({ id, sprite, count, class: cls, ...props }: Props) => {
+        const size = sprite.variants[0]?.size ?? 48;
+        const space = sprite.variants[0]?.space ?? 2;
+        const { wrap } = sprite;
+
+        const src = `/emojis/${id}/sprite48.avif`;
+        const srcset = `/emojis/${id}/sprite48.avif 1x, /emojis/${id}/sprite96.avif 2x`;
+
+        const offsetX = (i: number) => -1 * (size + space) * (i % wrap);
+        const offsetY = (i: number) => -1 * (size + space) * Math.floor(i / wrap);
+
+        return (
+                <ul class:list={["l-emoji-grid", cls]} style={{ "--emoji-size": `${size}px` }} {...props}>
+                        {[...Array(count).keys()].map((i) => (
+                                <li>
+                                        <img
+                                                alt=""
+                                                class="l-emoji-grid__emoji"
+                                                src={src}
+                                                srcset={srcset}
+                                                width={size}
+                                                height={size}
+                                                style={{ "object-position": `${offsetX(i)}px ${offsetY(i)}px` }}
+                                        />
+                                </li>
+                        ))}
+                </ul>
+        );
+};
diff --git a/src/ui/layouts/HList.tsx b/src/ui/layouts/HList.tsx
new file mode 100644
index 0000000..c1d870a
--- /dev/null
+++ b/src/ui/layouts/HList.tsx
@@ -0,0 +1,44 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import type { Props as ActionButtonProps } from "../objects/ActionButton.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "pill"?: boolean;
+        "icon"?: boolean;
+        "separated"?: boolean;
+        "size"?: "gapless" | "sm" | "lg" | "xl";
+        "buttons-size"?: ActionButtonProps<Tag>["size"];
+        "buttons"?: boolean;
+}>;
+
+export const HList = <T extends HTMLTag = "ul">({
+        as: Tag = "ul" as T,
+        pill,
+        icon,
+        separated,
+        size,
+        "buttons-size": buttonsSize,
+        buttons,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-hlist",
+                        {
+                                "l-hlist--pill": pill,
+                                "l-hlist--icon": icon,
+                                "l-hlist--separated": separated,
+                                [`l-hlist--${size}`]: size,
+                                [`l-hlist--buttons-${buttonsSize}`]: buttonsSize,
+                                "l-hlist--buttons": buttons,
+                        },
+                        "js-keyboard-nav",
+                        cls,
+                ]}
+                data-keyboard-nav-item="li > :first-child"
+                data-keyboard-nav-mode="nav"
+                {...props}
+        />
+);
diff --git a/src/ui/layouts/SplitView.tsx b/src/ui/layouts/SplitView.tsx
new file mode 100644
index 0000000..81a55d1
--- /dev/null
+++ b/src/ui/layouts/SplitView.tsx
@@ -0,0 +1,27 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as": Tag;
+        "gapless"?: boolean;
+        "wrap-reverse"?: boolean;
+}>;
+
+export const SplitView = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        gapless,
+        "wrap-reverse": wrapReverse,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-split-view",
+                        {
+                                "l-split-view--gapless": gapless,
+                                "l-split-view--wrap-reverse": wrapReverse,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/layouts/SplitViewPanel.tsx b/src/ui/layouts/SplitViewPanel.tsx
new file mode 100644
index 0000000..7f04b44
--- /dev/null
+++ b/src/ui/layouts/SplitViewPanel.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as: Tag;
+        sticky?: boolean;
+        side?: "25";
+        min?: "50" | "100" | "200";
+        fill?: boolean;
+}>;
+
+export const SplitViewPanel = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        sticky,
+        side,
+        min,
+        fill,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-split-view__panel",
+                        {
+                                "l-split-view__panel--sticky": sticky,
+                                [`l-split-view__panel--side-${side}`]: side,
+                                [`l-split-view__panel--min-${min}`]: min,
+                                "l-split-view__panel--fill": fill,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/objects/ActionButton.tsx b/src/ui/objects/ActionButton.tsx
new file mode 100644
index 0000000..76f859f
--- /dev/null
+++ b/src/ui/objects/ActionButton.tsx
@@ -0,0 +1,61 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "label-as"?: string;
+        "pill"?: boolean;
+        "icon"?: JSX.Element;
+        "pre"?: JSX.Element;
+        "post"?: JSX.Element;
+        "highlighted"?: boolean;
+        "selected"?: boolean;
+        "wide"?: boolean;
+        "justify"?: boolean;
+        "align-block"?: boolean;
+        "level"?: "button" | "badge" | "quiet";
+        "variant"?: "accent" | "positive" | "negative" | "warning" | "static-black" | "static-white";
+        "size"?: "xs" | "sm" | "lg" | "xl";
+        "children"?: JSX.Element;
+}>;
+
+export const ActionButton = <T extends HTMLTag = "a">({
+        children,
+        as: Tag = "a" as T,
+        "label-as": Label = "span",
+        pill,
+        pre,
+        post,
+        wide,
+        justify,
+        icon,
+        "align-block": alignBlock,
+        highlighted,
+        selected,
+        level,
+        variant,
+        size,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "o-button",
+                        {
+                                "o-button--pill": pill,
+                                "o-button--wide": wide,
+                                "o-button--justify": justify,
+                                "o-button--icon": icon,
+                                "o-button--align-block": alignBlock,
+                                "is-highlighted": highlighted,
+                                "is-selected": selected,
+                                [`o-button--${level}`]: level && level !== "button",
+                                [`o-button--${variant}`]: variant,
+                                [`o-button--${size}`]: size,
+                        },
+                        cls,
+                ]}
+                {...props}
+        >
+                {pre} {icon ?? <Label class="o-button__label">{children}</Label>} {post}
+        </Tag>
+);
diff --git a/src/ui/objects/Alert.tsx b/src/ui/objects/Alert.tsx
new file mode 100644
index 0000000..f590e18
--- /dev/null
+++ b/src/ui/objects/Alert.tsx
@@ -0,0 +1,21 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as?: Tag;
+        icon?: JSX.Element;
+        variant?: "accent" | "positive" | "negative" | "warning";
+}>;
+
+export const Alert = <T extends HTMLTag = "div">({
+        children,
+        as: Tag = "div" as T,
+        variant,
+        icon,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag class:list={["o-alert", { [`o-alert--${variant}`]: variant }, cls]} {...props}>
+                {icon && <span class="u-mie-100">{icon}</span>}
+                {children}
+        </Tag>
+);
diff --git a/src/ui/objects/Avatar.tsx b/src/ui/objects/Avatar.tsx
new file mode 100644
index 0000000..459af12
--- /dev/null
+++ b/src/ui/objects/Avatar.tsx
@@ -0,0 +1,69 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import { StatusIndicator } from "$/ui/objects/StatusIndicator.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "src"?: string;
+        "icon"?: JSX.Element;
+        "children"?: JSX.Element;
+        "class"?: string;
+        "circle"?: boolean;
+        "placeholder"?: boolean;
+        "color"?: `hsl(${number}, ${number}%, ${number}%)`;
+        "color2"?: `hsl(${number}, ${number}%, ${number}%)`;
+        "color-angle"?: number | `${number}`;
+        "size"?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl";
+        "status"?: "accent" | "positive" | "negative" | "warning";
+}>;
+
+const hslRegex = /^hsl\(([\d.]+), ([\d.]+%), ([\d.]+%)\)$/;
+
+export const Avatar = <T extends HTMLTag = "div">({
+        children,
+        as: Tag = "div" as T,
+        src,
+        icon,
+        circle,
+        placeholder,
+        color,
+        color2,
+        "color-angle": colorAngle,
+        size,
+        status,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "o-avatar",
+                        {
+                                "o-avatar--circle": circle,
+                                "o-avatar--placeholder": placeholder,
+                                "o-avatar--colored": color && !color2,
+                                "o-avatar--colored-gradient": color && !!color2,
+                                [`o-avatar--${size}`]: !!size,
+                        },
+                        cls,
+                ]}
+                style={{
+                        "--o-avatar--bg-angle": colorAngle,
+                        "--o-avatar--bg-color--h": color?.match(hslRegex)?.[1],
+                        "--o-avatar--bg-color--l": color?.match(hslRegex)?.[3],
+                        "--o-avatar--bg-color--s": color?.match(hslRegex)?.[2],
+                        "--o-avatar--bg-color-2--h": color2?.match(hslRegex)?.[1],
+                        "--o-avatar--bg-color-2--l": color2?.match(hslRegex)?.[3],
+                        "--o-avatar--bg-color-2--s": color2?.match(hslRegex)?.[2],
+                }}
+                {...props}
+        >
+                {status && <StatusIndicator class="o-avatar__status" status={status} />}
+                {icon && <div class="o-avatar__icon u-ai-end u-jc-end">{icon}</div>}
+
+                {src ? (
+                        <img alt="" class="o-avatar__content" src={src} />
+                ) : (
+                        <span class="o-avatar__content">{children}</span>
+                )}
+        </Tag>
+);
diff --git a/src/ui/objects/Badge.tsx b/src/ui/objects/Badge.tsx
new file mode 100644
index 0000000..e98ef0d
--- /dev/null
+++ b/src/ui/objects/Badge.tsx
@@ -0,0 +1,19 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import type { Props as ActionButtonProps } from "./ActionButton.tsx";
+
+import { ActionButton } from "./ActionButton.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as?: Tag;
+        variant?: ActionButtonProps<Tag>["variant"];
+        pill?: boolean;
+        selected?: boolean;
+        size?: ActionButtonProps<Tag>["size"];
+        children?: JSX.Element;
+}>;
+
+export const Badge = <T extends HTMLTag = "span">({ as = "span" as T, ...props }: Props<T>) => (
+        // deno-lint-ignore no-explicit-any
+        <ActionButton as={as} level="badge" {...(props as any)} />
+);
diff --git a/src/ui/objects/Body.tsx b/src/ui/objects/Body.tsx
new file mode 100644
index 0000000..149662c
--- /dev/null
+++ b/src/ui/objects/Body.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"div">;
+
+export const Body = ({ class: cls, ...props }: Props) => (
+        <div
+                class:list={[
+                        "s-body",
+                        "s-headings",
+                        "s-headings--display",
+                        "s-links",
+                        "s-links--colored",
+                        "s-code",
+                        "s-figures",
+                        "s-blockquotes",
+                        "s-lists",
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/objects/Button.tsx b/src/ui/objects/Button.tsx
new file mode 100644
index 0000000..68e1776
--- /dev/null
+++ b/src/ui/objects/Button.tsx
@@ -0,0 +1,26 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import type { Props as ActionButtonProps } from "./ActionButton.tsx";
+
+import { ActionButton } from "./ActionButton.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as?: Tag;
+        variant?: "primary" | ActionButtonProps<Tag>["variant"];
+        size?: ActionButtonProps<Tag>["size"];
+        wide?: boolean;
+        justify?: boolean;
+        children?: JSX.Element;
+}>;
+
+export const Button = <T extends HTMLTag = "a">({ as = "a" as T, variant, ...props }: Props<T>) => (
+        <ActionButton
+                as={as}
+                label-as={variant ? "strong" : "span"}
+                pill
+                selected={!!variant}
+                variant={variant === "primary" ? undefined : variant}
+                // deno-lint-ignore no-explicit-any
+                {...(props as any)}
+        />
+);
diff --git a/src/ui/objects/Card.tsx b/src/ui/objects/Card.tsx
new file mode 100644
index 0000000..fd565e1
--- /dev/null
+++ b/src/ui/objects/Card.tsx
@@ -0,0 +1,47 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "list"?: boolean;
+        "quiet"?: boolean;
+        "thumbnail"?: boolean;
+        "border"?: boolean;
+        "no-shadow"?: boolean;
+        "horizontal"?: boolean;
+        "interactive"?: boolean;
+        "highlight"?: boolean;
+        "children"?: JSX.Element;
+}>;
+
+export const Card = <T extends HTMLTag = "article">({
+        as: Tag = "article" as T,
+        list,
+        quiet,
+        thumbnail,
+        border,
+        "no-shadow": noShadow,
+        horizontal,
+        interactive,
+        highlight,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "o-card",
+                        {
+                                "l-card-list__card": list,
+                                "o-card--borderless": !border,
+                                "o-card--horizontal": horizontal,
+                                "o-card--interactive": interactive,
+                                "o-card--highlight": highlight,
+                                "o-card--quiet": quiet,
+                                "o-card--collapsible": Tag === "details",
+                                "o-card--shadow": !noShadow,
+                                "o-card--thumbnail": thumbnail,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/objects/CardBody.tsx b/src/ui/objects/CardBody.tsx
new file mode 100644
index 0000000..aa5df3d
--- /dev/null
+++ b/src/ui/objects/CardBody.tsx
@@ -0,0 +1,32 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "list"?: boolean;
+        "main"?: boolean;
+        "no-mbs-neutralize"?: boolean;
+        "children"?: JSX.Element;
+}>;
+
+export const CardBody = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        list,
+        main,
+        "no-mbs-neutralize": noMbsNeutralize,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "o-card__body",
+                        {
+                                "o-card__body--main": main,
+                                "o-card__header": Tag === "summary",
+                                "l-card-list__card-body": list,
+                                "o-card__body--no-mbs-neutralize": noMbsNeutralize,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/objects/CardFooter.tsx b/src/ui/objects/CardFooter.tsx
new file mode 100644
index 0000000..63d74d0
--- /dev/null
+++ b/src/ui/objects/CardFooter.tsx
@@ -0,0 +1,11 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as?: Tag;
+}>;
+
+export const CardFooter = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        class: cls,
+        ...props
+}: Props<T>) => <Tag class:list={["o-card__footer", cls]} {...props} />;
diff --git a/src/ui/objects/CardImage.tsx b/src/ui/objects/CardImage.tsx
new file mode 100644
index 0000000..12b9735
--- /dev/null
+++ b/src/ui/objects/CardImage.tsx
@@ -0,0 +1,40 @@
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+import type { CSSProperties } from "https://cdn.jsdelivr.net/gh/oscarotero/ssx@0.1.14/css.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = ImageProps & {
+        "list"?: boolean;
+        "img-class"?: unknown;
+        "img-style"?: CSSProperties;
+        "aspect"?: `${number} / ${number}`;
+        "content-class"?: unknown;
+        "children"?: JSX.Element;
+};
+
+export const CardImage = ({
+        children,
+        list,
+        "img-class": imgClass,
+        aspect,
+        "content-class": contentClass,
+        alt,
+        class: cls,
+        style,
+        "img-style": imgStyle,
+        ...props
+}: Props) => (
+        <div class:list={["o-card__image", cls]} style={style}>
+                <Image
+                        class:list={["o-card__image-img", { "l-card-list__card-image": list }, imgClass]}
+                        style={{
+                                "aspect-ratio": aspect,
+                                "block-size": aspect ? "auto" : undefined,
+                                ...imgStyle,
+                        }}
+                        alt={alt}
+                        {...props}
+                />
+                {children && <div class:list={["o-card__image-overlay", contentClass]}>{children}</div>}
+        </div>
+);
diff --git a/src/ui/objects/CollapseCard.tsx b/src/ui/objects/CollapseCard.tsx
new file mode 100644
index 0000000..27e1ce2
--- /dev/null
+++ b/src/ui/objects/CollapseCard.tsx
@@ -0,0 +1,27 @@
+import { Card, type Props as CardProps } from "./Card.tsx";
+import { CardBody } from "./CardBody.tsx";
+import { Heading } from "./Heading.tsx";
+
+export type Props = CardProps<"details"> & {
+        "heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+        "title"?: JSX.Element;
+        "header"?: JSX.Element;
+};
+
+export const CollapseCard = ({
+        "heading-level": headingLevel,
+        children,
+        title,
+        header,
+        ...props
+}: Props) => (
+        <Card as="details" {...props}>
+                <CardBody as="summary">
+                        <Heading as={headingLevel} class="u-mbs-0" level="lg">
+                                {title}
+                        </Heading>
+                        {header}
+                </CardBody>
+                <CardBody>{children}</CardBody>
+        </Card>
+);
diff --git a/src/ui/objects/ContentImage.tsx b/src/ui/objects/ContentImage.tsx
new file mode 100644
index 0000000..ef45f89
--- /dev/null
+++ b/src/ui/objects/ContentImage.tsx
@@ -0,0 +1,15 @@
+import type { ClassValue } from "corvos/deps/clsx.ts";
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = Omit<ImageProps, "src"> & {
+        "src"?: string;
+        "img-class"?: ClassValue;
+};
+
+export const ContentImage = ({ src, "img-class": imgClass, ...props }: Props) => (
+        <a href={src} data-lightbox {...props}>
+                <Image src={src} width="1400" class:list={imgClass} />
+        </a>
+);
diff --git a/src/ui/objects/Deflist.tsx b/src/ui/objects/Deflist.tsx
new file mode 100644
index 0000000..53d60d6
--- /dev/null
+++ b/src/ui/objects/Deflist.tsx
@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"dl">;
+
+export const Deflist = ({ class: cls, ...props }: Props) => (
+        <dl class={`o-deflist ${cls ?? ""}`} {...props} />
+);
diff --git a/src/ui/objects/Dialog.tsx b/src/ui/objects/Dialog.tsx
new file mode 100644
index 0000000..8ab6c4f
--- /dev/null
+++ b/src/ui/objects/Dialog.tsx
@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { Container } from "../layouts/Container.tsx";
+import { ActionButton } from "./ActionButton.tsx";
+import { Divider } from "./Divider.tsx";
+import { Heading } from "./Heading.tsx";
+
+export type Props = HTMLAttributes<"dialog"> & {
+        title: string;
+        divider?: boolean;
+        children?: JSX.Element;
+};
+
+export const Dialog = ({ children, title, divider, class: cls, ...props }: Props) => (
+        <dialog popover="auto" class:list={["o-dialog is-modal", cls]} closedby="any" {...props}>
+                <Container fixed class="o-dialog__content">
+                        <header class="o-dialog__header">
+                                <Heading as="h1" class="u-mbs-0" level="xxl">
+                                        {title}
+                                </Heading>
+
+                                <ActionButton
+                                        command="close"
+                                        commandfor={props.id}
+                                        as="button"
+                                        pill
+                                        size="lg"
+                                        level="quiet"
+                                        icon={<Icon icon="x" variant="bold" />}
+                                        class="u-mis-auto"
+                                />
+                        </header>
+
+                        {divider && <Divider level="faint" class="o-dialog__divider" />}
+
+                        <div class="o-dialog__body">{children}</div>
+                </Container>
+        </dialog>
+);
diff --git a/src/ui/objects/Divider.tsx b/src/ui/objects/Divider.tsx
new file mode 100644
index 0000000..8f7efcd
--- /dev/null
+++ b/src/ui/objects/Divider.tsx
@@ -0,0 +1,51 @@
+import type { HTMLAttributes, HTMLTag } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"div" | "hr"> & {
+        "level"?: "strong" | "medium" | "quiet" | "faint";
+        "variant"?: "static-black" | "static-white";
+        "vertical"?: boolean | "dot";
+        "label-as"?: HTMLTag;
+        "children"?: JSX.Element;
+};
+
+export const Divider = ({
+        children,
+        level = "strong",
+        variant,
+        vertical,
+        "label-as": Label = "span",
+        class: cls,
+        ...props
+}: Props) =>
+        children ? (
+                <div
+                        class:list={[
+                                "o-divider",
+                                "o-divider--labelled",
+                                `o-divider--${level}`,
+                                {
+                                        [`o-divider--${variant}`]: variant,
+                                        "o-divider--vertical": vertical === true,
+                                        "o-divider--dot": vertical === "dot",
+                                },
+                                cls,
+                        ]}
+                        {...props}
+                >
+                        <Label class="o-divider__label u-mbs-0">{children}</Label>
+                </div>
+        ) : (
+                <hr
+                        class:list={[
+                                "o-divider",
+                                `o-divider--${level}`,
+                                {
+                                        [`o-divider--${variant}`]: variant,
+                                        "o-divider--vertical": vertical === true,
+                                        "o-divider--dot": vertical === "dot",
+                                },
+                                cls,
+                        ]}
+                        {...props}
+                />
+        );
diff --git a/src/ui/objects/Emoji.tsx b/src/ui/objects/Emoji.tsx
new file mode 100644
index 0000000..f04f776
--- /dev/null
+++ b/src/ui/objects/Emoji.tsx
@@ -0,0 +1,21 @@
+import site from "@/corvos.config.ts";
+
+export interface Props {
+        pack: string;
+        emoji: string;
+        size?: "125" | "150" | "200";
+        class?: string;
+}
+
+export const Emoji = site.$.component(
+        ({ pack, emoji, size, class: cls, ...props }: Props, pages) => {
+                const query = site.$.query(pages);
+                const sprite = query.type(".svg").match({ emojiPack: pack }).one();
+
+                return (
+                        <svg class:list={["o-emoji o-emoji--sprite", { [`o-emoji--${size}`]: size }, cls]} {...props}>
+                                <use href={`${sprite.url}#${emoji}`} />
+                        </svg>
+                );
+        },
+);
diff --git a/src/ui/objects/Figure.tsx b/src/ui/objects/Figure.tsx
new file mode 100644
index 0000000..7f5e20a
--- /dev/null
+++ b/src/ui/objects/Figure.tsx
@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"figure"> & {
+        children?: JSX.Element;
+        caption?: JSX.Element;
+};
+
+export const Figure = ({ children, caption, class: cls, ...props }: Props) => (
+        <figure class:list={["o-figure", cls]} {...props}>
+                {children}
+                {caption && <figcaption class="o-figure__caption">{caption}</figcaption>}
+        </figure>
+);
diff --git a/src/ui/objects/FigureCaption.tsx b/src/ui/objects/FigureCaption.tsx
new file mode 100644
index 0000000..4112170
--- /dev/null
+++ b/src/ui/objects/FigureCaption.tsx
@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"figcaption"> & {
+        children?: JSX.Element;
+};
+
+export const FigureCaption = ({ children, class: cls, ...props }: Props) => (
+        <figcaption class:list={["o-figure__caption", cls]} {...props}>
+                {children}
+        </figcaption>
+);
diff --git a/src/ui/objects/Heading.tsx b/src/ui/objects/Heading.tsx
new file mode 100644
index 0000000..089de3a
--- /dev/null
+++ b/src/ui/objects/Heading.tsx
@@ -0,0 +1,49 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as: Tag;
+        level?: "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
+        variant?: "static-black" | "static-white";
+        display?: boolean;
+        highlight?: boolean;
+        children?: JSX.Element;
+}>;
+
+const levelTagMap = {
+        lg: "h3",
+        md: "h4",
+        sm: "h5",
+        xl: "h2",
+        xs: "h6",
+        xxl: "h1",
+} as const;
+
+export const Heading = <T extends HTMLTag = "div">({
+        as,
+        children,
+        display,
+        level,
+        variant,
+        highlight,
+        class: cls,
+        ...props
+}: Props<T>) => {
+        const Tag = as ?? (level ? levelTagMap[level] : "strong");
+        return (
+                <Tag
+                        class:list={[
+                                "o-heading",
+                                {
+                                        [`o-heading--${level}`]: level,
+                                        [`o-heading--${variant}`]: variant,
+                                        "o-heading--display": display,
+                                        "u-c-heading": Tag === "strong",
+                                },
+                                cls,
+                        ]}
+                        {...props}
+                >
+                        {highlight ? <span class="o-heading__highlight">{children}</span> : children}
+                </Tag>
+        );
+};
diff --git a/src/ui/objects/Icon.tsx b/src/ui/objects/Icon.tsx
new file mode 100644
index 0000000..e8af718
--- /dev/null
+++ b/src/ui/objects/Icon.tsx
@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import site from "@/corvos.config.ts";
+
+export type Props = HTMLAttributes<"svg"> & {
+        icon: Parameters<typeof site.$.icon>[0];
+        variant?: Parameters<typeof site.$.icon>[1];
+};
+
+export const Icon = ({ icon, variant, class: cls, ...props }: Props) => (
+        <svg
+                aria-hidden="true"
+                class:list={["o-icon", cls]}
+                height="1.142857143em"
+                width="1.142857143em"
+                {...props}
+        >
+                <use href={site.$.icon(icon, variant)} />
+        </svg>
+);
diff --git a/src/ui/objects/Lightbox.tsx b/src/ui/objects/Lightbox.tsx
new file mode 100644
index 0000000..00268cc
--- /dev/null
+++ b/src/ui/objects/Lightbox.tsx
@@ -0,0 +1,122 @@
+/** Biome-ignore-all lint/a11y/useValidAnchor: <explanation> */
+/** Biome-ignore-all lint/a11y/useAltText: <explanation> */
+
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { ActionButton } from "./ActionButton.tsx";
+import { LoadingIndicator } from "./LoadingIndicator.tsx";
+import { Thumbnail } from "./Thumbnail.tsx";
+
+export type Props = HTMLAttributes<"dialog">;
+
+export const Lightbox = ({ class: cls, ...props }: Props) => (
+        <dialog
+                class:list={["o-lightbox o-lightbox--static-black is-modal t-static-white", cls]}
+                closedby="any"
+                x-id="['lightbox']"
+                x-bind:id="$id('lightbox')"
+                x-data="lightbox"
+                x-on:close="handleClose"
+                x-on:touchstart="handleTouchStart"
+                x-on:touchend="handleTouchEnd"
+                {...{
+                        "x-on:keydown.document.capture": "handleKeyDown",
+                }}
+                {...props}
+        >
+                <div x-show="items.length > 1" class="o-lightbox__info">
+                        <small class="u-mis-100 u-mie-200 u-d-none@sm-lo">
+                                <strong x-text="current + 1"></strong> <span class="u-c-mute-more u-mi-50">&#x2044;</span>{" "}
+                                <strong x-text="items.length"></strong>
+                        </small>
+                        <ActionButton
+                                x-on:click="prev"
+                                as="button"
+                                pill
+                                level="quiet"
+                                icon={<Icon icon="caret-left" variant="bold" />}
+                                variant="static-white"
+                        />
+                        <ActionButton
+                                x-on:click="next"
+                                as="button"
+                                pill
+                                level="quiet"
+                                icon={<Icon icon="caret-right" variant="bold" />}
+                                variant="static-white"
+                        />
+                </div>
+
+                <div class="o-lightbox__controls">
+                        <ActionButton
+                                x-show="zoomedFull"
+                                x-on:click="toggleZoom"
+                                as="button"
+                                class="u-mie-100"
+                                pill
+                                level="quiet"
+                                icon={<Icon icon="magnifying-glass-minus" variant="bold" />}
+                                variant="static-white"
+                        />
+                        <ActionButton
+                                x-show="!zoomedFull"
+                                x-on:click="toggleZoom"
+                                as="button"
+                                class="u-mie-100"
+                                pill
+                                level="quiet"
+                                icon={<Icon icon="magnifying-glass-plus" variant="bold" />}
+                                variant="static-white"
+                        />
+                        <ActionButton
+                                x-bind:commandfor="$id('lightbox')"
+                                command="close"
+                                as="button"
+                                pill
+                                level="quiet"
+                                icon={<Icon icon="x" variant="bold" />}
+                                variant="static-white"
+                        />
+                </div>
+
+                <img
+                        class="o-lightbox__img"
+                        x-ref="img"
+                        x-bind:src="currentItem?.src ?? ''"
+                        x-bind:srcset="currentItem?.srcset ?? ''"
+                        x-bind:alt="currentItem?.alt ?? ''"
+                        x-on:load="loading = false"
+                        x-on:mousemove="handleMouseMove"
+                        x-on:touchmove="handleTouchMove"
+                        x-on:dblclick="handleDoubleClick"
+                        x-bind:class="{ 'is-hidden': loading }"
+                        x-bind:style="{ transform: `translate(${offsetX}px, ${offsetY}px) scale(${zoom})` }"
+                        {...{
+                                "x-on:mousedown.prevent": "handleMouseDown",
+                                "x-on:mouseup.window": "handleMouseUp",
+                                "x-on:wheel.prevent": "handleScroll",
+                        }}
+                />
+
+                <div class="o-lightbox__placeholder">
+                        <LoadingIndicator />
+                </div>
+
+                <div class="o-lightbox__thumbnails" x-show="items.length > 1" x-ref="thumbnails">
+                        <template x-for="(item, i) in items">
+                                <Thumbnail
+                                        class="o-lightbox__thumbnail"
+                                        variant="static-white"
+                                        x-bind:src="item.thumbnail ?? item.src"
+                                        x-bind:srcset="item.srcset"
+                                        x-bind:alt="item.alt"
+                                        x-bind:href="item.src"
+                                        x-bind:class="{ 'is-selected': i === current }"
+                                        {...{ "x-on:click.prevent": "current = i" }}
+                                />
+                        </template>
+                </div>
+        </dialog>
+);
diff --git a/src/ui/objects/LoadingIndicator.tsx b/src/ui/objects/LoadingIndicator.tsx
new file mode 100644
index 0000000..325cbb3
--- /dev/null
+++ b/src/ui/objects/LoadingIndicator.tsx
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"svg">;
+
+export const LoadingIndicator = (props: Props) => (
+        <svg height="50" width="50" {...props}>
+                <title>Loading indicator</title>
+                <use href="#loading-indicator" />
+        </svg>
+);
diff --git a/src/ui/objects/Navbar.tsx b/src/ui/objects/Navbar.tsx
new file mode 100644
index 0000000..4439e58
--- /dev/null
+++ b/src/ui/objects/Navbar.tsx
@@ -0,0 +1,37 @@
+/** Biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: <explanation> */
+
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"nav"> & {
+        "adapt"?: boolean;
+        "quiet"?: boolean;
+        "align-block"?: boolean;
+        "variant"?: "static-black" | "static-white";
+};
+
+export const Navbar = ({
+        adapt,
+        quiet,
+        "align-block": alignBlock,
+        variant,
+        class: cls,
+        ...props
+}: Props) => (
+        <nav
+                class:list={[
+                        "o-navbar",
+                        {
+                                "o-navbar--adapt": adapt,
+                                "o-navbar--quiet": quiet,
+                                "o-navbar--align-block": alignBlock,
+                                [`o-navbar--${variant}`]: variant,
+                        },
+                        "js-keyboard-nav",
+                        cls,
+                ]}
+                data-keyboard-nav-item=".o-navbar__item"
+                data-keyboard-nav-mode="nav"
+                role="menubar"
+                {...props}
+        />
+);
diff --git a/src/ui/objects/NavbarItem.tsx b/src/ui/objects/NavbarItem.tsx
new file mode 100644
index 0000000..c0e347f
--- /dev/null
+++ b/src/ui/objects/NavbarItem.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as: Tag;
+        icon?: JSX.Element;
+        pre?: JSX.Element;
+        post?: JSX.Element;
+        selected?: boolean;
+}>;
+
+export const NavbarItem = <T extends HTMLTag = "a">({
+        children,
+        as: Tag = "a" as T,
+        icon,
+        pre,
+        post,
+        selected,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                aria-current={selected ? "page" : undefined}
+                class:list={["o-navbar__item", { "is-selected": selected }, cls]}
+                role="menuitem"
+                {...props}
+        >
+                {icon && <div class="o-navbar__item-label">{children}</div>}
+
+                <div class="o-navbar__item-content">
+                        {pre} {icon ?? <span class="o-navbar__item-content-text">{children}</span>} {post}
+                </div>
+        </Tag>
+);
diff --git a/src/ui/objects/PlaceholderBox.tsx b/src/ui/objects/PlaceholderBox.tsx
new file mode 100644
index 0000000..d64866f
--- /dev/null
+++ b/src/ui/objects/PlaceholderBox.tsx
@@ -0,0 +1,11 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as: Tag;
+}>;
+
+export const PlaceholderBox = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        class: cls,
+        ...props
+}: Props<T>) => <Tag class:list={["o-placeholder-box u-ta-center u-c-mute", cls]} {...props} />;
diff --git a/src/ui/objects/SideNav.tsx b/src/ui/objects/SideNav.tsx
new file mode 100644
index 0000000..f96ce7a
--- /dev/null
+++ b/src/ui/objects/SideNav.tsx
@@ -0,0 +1,14 @@
+/** Biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: <explanation> */
+
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"nav">;
+
+export const SideNav = ({ class: cls, ...props }: Props) => (
+        <nav
+                class:list={["o-side-nav", "js-keyboard-nav", cls]}
+                data-keyboard-nav-item=".o-side-nav__item"
+                data-keyboard-nav-mode="list"
+                {...props}
+        />
+);
diff --git a/src/ui/objects/SideNavItem.tsx b/src/ui/objects/SideNavItem.tsx
new file mode 100644
index 0000000..fb8f523
--- /dev/null
+++ b/src/ui/objects/SideNavItem.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as: Tag;
+        icon?: JSX.Element;
+        pre?: JSX.Element;
+        post?: JSX.Element;
+        selected?: boolean;
+}>;
+
+export const SideNavItem = <T extends HTMLTag = "a">({
+        children,
+        as: Tag = "a" as T,
+        icon,
+        pre,
+        post,
+        selected,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                aria-current={selected ? "location" : undefined}
+                class:list={["o-side-nav__item", { "is-selected": selected }, cls]}
+                role="menuitem"
+                {...props}
+        >
+                {icon && <div class="l-media__block o-side-nav__icon-slot">{icon}</div>}
+
+                <div class="l-media__block l-media__block--main">
+                        {pre} {children} {post}
+                </div>
+        </Tag>
+);
diff --git a/src/ui/objects/StatusIndicator.tsx b/src/ui/objects/StatusIndicator.tsx
new file mode 100644
index 0000000..06b6481
--- /dev/null
+++ b/src/ui/objects/StatusIndicator.tsx
@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"div"> & {
+        status?: "accent" | "positive" | "negative" | "warning";
+};
+
+export const StatusIndicator = ({ status, class: cls, ...props }: Props) => (
+        <div
+                class:list={[
+                        "o-status-indicator",
+                        {
+                                [`is-${status}`]: status,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/objects/Tab.tsx b/src/ui/objects/Tab.tsx
new file mode 100644
index 0000000..15c1e5d
--- /dev/null
+++ b/src/ui/objects/Tab.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"a"> & {
+        selected?: boolean;
+};
+
+export const Tab = ({ selected, class: cls, ...props }: Props) => (
+        <a
+                aria-selected={`${selected}`}
+                class:list={["o-tabbar__tab", { "is-selected": selected }, cls]}
+                role="tab"
+                {...props}
+        />
+);
diff --git a/src/ui/objects/Tabbar.tsx b/src/ui/objects/Tabbar.tsx
new file mode 100644
index 0000000..58c58fa
--- /dev/null
+++ b/src/ui/objects/Tabbar.tsx
@@ -0,0 +1,43 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"nav"> & {
+        "variant"?: "accent";
+        "quiet"?: boolean;
+        "adapt"?: boolean;
+        "tabs-class"?: unknown;
+};
+
+export const Tabbar = ({
+        children,
+        variant,
+        quiet,
+        adapt,
+        "tabs-class": tabsClass,
+        class: cls,
+        ...props
+}: Props) => (
+        <nav
+                class:list={[
+                        "o-tabbar",
+                        {
+                                [`o-tabbar--${variant}`]: variant,
+                                "o-tabbar--quiet": quiet,
+                                "o-tabbar--adapt": adapt,
+                        },
+                        "js-keyboard-nav",
+                        cls,
+                ]}
+                data-keyboard-nav-item=".o-tabbar__tab"
+                data-keyboard-nav-mode="nav"
+                {...props}
+        >
+                <div
+                        aria-label={props["aria-label"]}
+                        aria-orientation="horizontal"
+                        class:list={["o-tabbar__tabs", tabsClass]}
+                        role="tablist"
+                >
+                        {children}
+                </div>
+        </nav>
+);
diff --git a/src/ui/objects/TextField.tsx b/src/ui/objects/TextField.tsx
new file mode 100644
index 0000000..dc7893a
--- /dev/null
+++ b/src/ui/objects/TextField.tsx
@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"input"> & {
+        "pre"?: JSX.Element;
+        "post"?: JSX.Element;
+        "invalid"?: boolean;
+        "pill"?: boolean;
+        "x-model"?: string;
+};
+
+export const TextField = ({
+        pre,
+        post,
+        disabled,
+        invalid,
+        pill,
+        placeholder,
+        readonly,
+        value,
+        pattern,
+        required,
+        "x-model": xModel,
+        class: cls,
+        ...props
+}: Props) => {
+        const extended = !!pre || !!post;
+
+        return (
+                <div
+                        class:list={[
+                                "o-text-field",
+                                {
+                                        "is-disabled": disabled,
+                                        "is-invalid": invalid,
+                                        "l-media": extended,
+                                        "l-media--gapless": extended,
+                                        "o-text-field--extended": extended,
+                                        "o-text-field--pill": pill,
+                                },
+                                cls,
+                        ]}
+                        {...props}
+                >
+                        {pre}{" "}
+                        <input
+                                class="o-text-field__native"
+                                class:list={{
+                                        "l-media__block": extended,
+                                        "l-media__block--main": extended,
+                                }}
+                                disabled={disabled}
+                                pattern={pattern}
+                                placeholder={placeholder}
+                                readonly={readonly}
+                                required={required}
+                                value={value}
+                                x-model={xModel}
+                        />{" "}
+                        {post} <div class="o-text-field__bg"></div>
+                </div>
+        );
+};
diff --git a/src/ui/objects/Thumbnail.tsx b/src/ui/objects/Thumbnail.tsx
new file mode 100644
index 0000000..4ef76d3
--- /dev/null
+++ b/src/ui/objects/Thumbnail.tsx
@@ -0,0 +1,46 @@
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = HTMLAttributes<"a"> &
+        ImageProps & {
+                "x-bind:src"?: string;
+                "x-bind:srcset"?: string;
+                "x-bind:alt"?: string;
+                "variant"?: "static-black" | "static-white";
+        };
+
+export const Thumbnail = ({
+        src,
+        srcset,
+        alt,
+        "x-bind:src": xbindSrc,
+        "x-bind:srcset": xbindSrcset,
+        "x-bind:alt": xbindAlt,
+        variant,
+        class: cls,
+        widths,
+        width,
+        height,
+        densities,
+        "no-transform": noTransform,
+        ...props
+}: Props) => (
+        <a class:list={["o-thumbnail", { [`o-thumbnail--${variant}`]: variant }, cls]} {...props}>
+                <Image
+                        class="o-thumbnail__image"
+                        src={src}
+                        srcset={srcset}
+                        widths={widths as undefined}
+                        width={width}
+                        height={height}
+                        densities={densities}
+                        no-transform={noTransform}
+                        alt={alt}
+                        x-bind:src={xbindSrc}
+                        x-bind:srcset={xbindSrcset}
+                        x-bind:alt={xbindAlt}
+                />
+        </a>
+);