module Xssmaze::Assets

Overview

Static CSS/JS for the index page. Served separately from the catalog HTML so browsers can cache them independently.

Visual language is "ember": the maze at night. A warm near-black ground (brown-shifted, not blue-shifted, so it never reads as generic dark mode) carrying a single ember accent that only lights the corridor the cursor is in. Nested levels hang off hairline corridor rails rather than bullets.

Every colour is a custom property so the two themes stay in lockstep; components never reference a raw hex value. Both themes are checked against WCAG AA: --text/--muted/--dim/--ember/--inert all clear 4.5:1 on --bg, and --edge (interactive control borders) clears the 3:1 of WCAG 1.4.11. --rail is deliberately below that: it draws decorative structure, never a boundary the user has to perceive.

Defined in:

assets.cr

Constant Summary

FAVICON_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <style>\n path { stroke: #9f5518; }\n @media (prefers-color-scheme: dark) { path { stroke: #d9853b; } }\n </style>\n <path d=\"M12 12 L12 9 L15 9 L15 15 L9 15 L9 6 L18 6 L18 18 L6 18 L6 3 L21 3\"\n fill=\"none\" stroke-width=\"1.7\" stroke-linecap=\"square\" stroke-linejoin=\"miter\"/>\n</svg>"

The brand mark: a square unicursal spiral, i.e. a maze reduced to one unbroken corridor. Reused as the favicon, where currentColor cannot help, so the two themes are resolved inside the file.

INDEX_CSS = " :root {\n --bg: #ebe8e4;\n --bg-blur: rgba(235, 232, 228, .88);\n --surface: #f5f3f0;\n --rail: #cdc7c0;\n --edge: #87837f;\n --text: #1a1816;\n --muted: #514b46;\n --dim: #6e6862;\n --ember: #9f5518;\n --ember-sf: rgba(159, 85, 24, .10);\n --ember-line: rgba(159, 85, 24, .42);\n --inert: #5d6a74;\n --inert-line: rgba(93, 106, 116, .45);\n --radius: 3px;\n --bar-h: 53px;\n --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n color-scheme: light;\n }\n @media (prefers-color-scheme: dark) {\n :root {\n --bg: #100f0e;\n --bg-blur: rgba(16, 15, 14, .88);\n --surface: #191715;\n --rail: #322d28;\n --edge: #635f5c;\n --text: #e8e2d9;\n --muted: #a39c92;\n --dim: #807a74;\n --ember: #d9853b;\n --ember-sf: rgba(217, 133, 59, .12);\n --ember-line: rgba(217, 133, 59, .42);\n --inert: #7f8f9a;\n --inert-line: rgba(127, 143, 154, .45);\n color-scheme: dark;\n }\n }\n :root[data-theme=\"dark\"] {\n --bg: #100f0e;\n --bg-blur: rgba(16, 15, 14, .88);\n --surface: #191715;\n --rail: #322d28;\n --edge: #635f5c;\n --text: #e8e2d9;\n --muted: #a39c92;\n --dim: #807a74;\n --ember: #d9853b;\n --ember-sf: rgba(217, 133, 59, .12);\n --ember-line: rgba(217, 133, 59, .42);\n --inert: #7f8f9a;\n --inert-line: rgba(127, 143, 154, .45);\n color-scheme: dark;\n }\n :root[data-theme=\"light\"] {\n --bg: #ebe8e4;\n --bg-blur: rgba(235, 232, 228, .88);\n --surface: #f5f3f0;\n --rail: #cdc7c0;\n --edge: #87837f;\n --text: #1a1816;\n --muted: #514b46;\n --dim: #6e6862;\n --ember: #9f5518;\n --ember-sf: rgba(159, 85, 24, .10);\n --ember-line: rgba(159, 85, 24, .42);\n --inert: #5d6a74;\n --inert-line: rgba(93, 106, 116, .45);\n color-scheme: light;\n }\n\n * { box-sizing: border-box; }\n\n body {\n margin: 0;\n background: var(--bg);\n color: var(--text);\n font-family: var(--sans);\n font-size: 15px;\n line-height: 1.55;\n -webkit-font-smoothing: antialiased;\n }\n\n a { color: inherit; }\n :focus-visible {\n outline: 2px solid var(--ember);\n outline-offset: 2px;\n border-radius: var(--radius);\n }\n\n .shell { max-width: 1240px; margin: 0 auto; padding: 0 28px; }\n\n /* ---------- header ---------- */\n\n .top { padding: 44px 0 26px; }\n\n .brandline {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 32px;\n flex-wrap: wrap;\n }\n\n .brand { display: flex; align-items: center; gap: 14px; }\n\n .mark { width: 38px; height: 38px; flex: none; color: var(--ember); }\n .mark path {\n stroke: currentColor;\n stroke-width: 1.6;\n fill: none;\n stroke-linecap: square;\n stroke-linejoin: miter;\n stroke-dasharray: 120;\n stroke-dashoffset: 120;\n animation: thread 1.5s cubic-bezier(.65, 0, .35, 1) forwards;\n }\n @keyframes thread { to { stroke-dashoffset: 0; } }\n @media (prefers-reduced-motion: reduce) {\n .mark path { animation: none; stroke-dashoffset: 0; }\n }\n\n .wordmark {\n margin: 0;\n font-size: 29px;\n font-weight: 620;\n letter-spacing: -.017em;\n line-height: 1.1;\n }\n .subline {\n margin: 2px 0 0;\n font-size: 10.5px;\n letter-spacing: .17em;\n text-transform: uppercase;\n color: var(--dim);\n }\n\n .readout {\n display: flex;\n gap: 26px;\n padding-top: 4px;\n font-family: var(--mono);\n font-variant-numeric: tabular-nums;\n }\n .readout div { text-align: right; }\n .readout b {\n display: block;\n font-size: 21px;\n font-weight: 500;\n letter-spacing: -.02em;\n line-height: 1.15;\n }\n .readout span {\n font-size: 10.5px;\n letter-spacing: .1em;\n text-transform: uppercase;\n color: var(--dim);\n }\n\n .lede { margin: 22px 0 0; max-width: 60ch; color: var(--muted); font-size: 15.5px; }\n\n .params {\n margin: 14px 0 0;\n font-size: 12.5px;\n color: var(--dim);\n display: flex;\n align-items: baseline;\n gap: 7px;\n flex-wrap: wrap;\n }\n .params code {\n font-family: var(--mono);\n color: var(--muted);\n background: var(--surface);\n border: 1px solid var(--rail);\n border-radius: var(--radius);\n padding: 1px 6px;\n font-size: 11.5px;\n }\n\n /* ---------- control bar ---------- */\n\n .bar {\n position: sticky;\n top: 0;\n z-index: 20;\n margin-top: 30px;\n background: var(--bg-blur);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-top: 1px solid var(--rail);\n border-bottom: 1px solid var(--rail);\n }\n @media (prefers-reduced-transparency: reduce) {\n .bar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }\n }\n\n .bar-in {\n max-width: 1240px;\n margin: 0 auto;\n padding: 11px 28px;\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n /* Interactive controls use --edge, not the lighter corridor hairline:\n a control boundary has to clear WCAG 1.4.11 (3:1) where a decorative\n rail does not. */\n #search {\n flex: 1 1 260px;\n min-width: 0;\n background: var(--surface);\n border: 1px solid var(--edge);\n border-radius: var(--radius);\n color: var(--text);\n padding: 8px 11px;\n font-family: var(--mono);\n font-size: 13px;\n }\n #search::placeholder { color: var(--dim); }\n #search:focus {\n outline: none;\n border-color: var(--ember);\n box-shadow: 0 0 0 3px var(--ember-sf);\n }\n\n .chips { display: flex; gap: 6px; flex-wrap: wrap; }\n .chip {\n appearance: none;\n background: transparent;\n border: 1px solid var(--edge);\n border-radius: var(--radius);\n color: var(--muted);\n padding: 6px 10px;\n font-family: var(--mono);\n font-size: 11px;\n letter-spacing: .045em;\n cursor: pointer;\n transition: color .14s, border-color .14s, background .14s;\n }\n .chip:hover { color: var(--text); border-color: var(--muted); }\n .chip[aria-pressed=\"true\"] {\n color: var(--ember);\n border-color: var(--ember);\n background: var(--ember-sf);\n }\n\n .tally {\n margin: 0 0 0 auto;\n font-family: var(--mono);\n font-variant-numeric: tabular-nums;\n font-size: 11.5px;\n letter-spacing: .04em;\n color: var(--dim);\n white-space: nowrap;\n }\n .tally b { color: var(--text); font-weight: 500; }\n\n .theme {\n appearance: none;\n background: transparent;\n border: 1px solid var(--edge);\n border-radius: var(--radius);\n color: var(--muted);\n width: 30px;\n height: 30px;\n cursor: pointer;\n font-size: 13px;\n line-height: 1;\n flex: none;\n }\n .theme:hover { color: var(--text); border-color: var(--muted); }\n\n /* ---------- layout ---------- */\n\n .layout {\n display: grid;\n grid-template-columns: 1fr;\n gap: 34px;\n padding: 30px 0 70px;\n }\n @media (min-width: 1040px) {\n .layout { grid-template-columns: 186px 1fr; gap: 46px; }\n }\n\n .rail-nav { display: none; }\n @media (min-width: 1040px) {\n .rail-nav {\n display: block;\n position: sticky;\n top: calc(var(--bar-h) + 20px);\n align-self: start;\n max-height: calc(100dvh - var(--bar-h) - 46px);\n overflow-y: auto;\n }\n }\n .rail-nav h2 {\n margin: 0 0 12px;\n font-size: 10.5px;\n letter-spacing: .13em;\n text-transform: uppercase;\n color: var(--dim);\n font-weight: 500;\n }\n .rail-nav a {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n padding: 4px 0;\n font-family: var(--mono);\n font-size: 12.5px;\n color: var(--muted);\n text-decoration: none;\n }\n .rail-nav a:hover { color: var(--ember); }\n .rail-nav a i {\n font-style: normal;\n color: var(--dim);\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n }\n\n /* ---------- corridor list ---------- */\n\n .cat { margin-bottom: 30px; }\n\n .cat-head {\n display: flex;\n align-items: baseline;\n gap: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--rail);\n }\n .cat-head h2 {\n margin: 0;\n font-size: 13px;\n font-weight: 500;\n letter-spacing: .1em;\n text-transform: uppercase;\n color: var(--text);\n }\n .cat-head .count {\n font-family: var(--mono);\n font-variant-numeric: tabular-nums;\n font-size: 11.5px;\n color: var(--dim);\n }\n\n .rows {\n list-style: none;\n margin: 0;\n padding: 0 0 0 17px;\n border-left: 1px solid var(--rail);\n }\n\n .maze {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: 2px 14px;\n padding: 7px 0 7px 4px;\n align-items: baseline;\n }\n /* the corridor branch off the rail */\n .maze::before {\n content: '';\n position: absolute;\n left: -17px;\n top: 13px;\n width: 13px;\n height: 1px;\n background: var(--rail);\n transition: background .14s;\n }\n .maze:hover::before { background: var(--ember); }\n\n @media (min-width: 760px) {\n .maze {\n grid-template-columns: 27ch minmax(0, 1fr) auto;\n gap: 14px;\n padding: 5px 0 5px 4px;\n }\n .maze::before { top: 12px; }\n }\n\n .maze a {\n font-family: var(--mono);\n font-size: 12.5px;\n text-decoration: none;\n color: var(--text);\n justify-self: start;\n border-bottom: 1px solid transparent;\n overflow-wrap: anywhere;\n transition: color .14s, border-color .14s;\n }\n .maze a:hover { color: var(--ember); border-bottom-color: var(--ember); }\n\n .desc { color: var(--muted); font-size: 13.5px; min-width: 0; }\n\n .meta { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }\n .tag {\n font-family: var(--mono);\n font-size: 10px;\n letter-spacing: .05em;\n padding: 1px 5px;\n border-radius: var(--radius);\n border: 1px solid var(--rail);\n color: var(--dim);\n white-space: nowrap;\n }\n .tag.cls { color: var(--muted); }\n .tag.client { color: var(--ember); border-color: var(--ember-line); }\n .tag.method { color: var(--text); border-color: var(--edge); }\n\n /* Controls read as inert: a cool cast against the warm ground, so a true\n negative is legible as \"not a target\" without relying on colour alone\n (the class tag still spells it out). */\n .maze.control a { color: var(--inert); }\n .maze.control a:hover { color: var(--inert); border-bottom-color: var(--inert); }\n .maze.control:hover::before { background: var(--inert); }\n .maze.control .desc { color: var(--dim); }\n .maze.control .tag.cls { color: var(--inert); border-color: var(--inert-line); }\n\n .hidden { display: none !important; }\n\n .empty { padding: 46px 4px; color: var(--muted); }\n .empty b { display: block; color: var(--text); font-weight: 500; margin-bottom: 6px; }\n .empty code { font-family: var(--mono); color: var(--ember); }\n\n /* ---------- footer ---------- */\n\n .foot {\n border-top: 1px solid var(--rail);\n padding: 22px 0 60px;\n display: flex;\n gap: 8px 18px;\n flex-wrap: wrap;\n align-items: baseline;\n }\n .foot span {\n color: var(--dim);\n letter-spacing: .1em;\n text-transform: uppercase;\n font-size: 10.5px;\n }\n .foot a {\n font-family: var(--mono);\n font-size: 12px;\n color: var(--muted);\n text-decoration: none;\n border-bottom: 1px solid transparent;\n }\n .foot a:hover { color: var(--ember); border-bottom-color: var(--ember); }\n\n /* ---------- 404 ---------- */\n\n .notfound { padding: 90px 0 110px; max-width: 62ch; }\n .notfound h1 {\n margin: 0;\n font-size: 52px;\n font-weight: 620;\n letter-spacing: -.03em;\n line-height: 1;\n }\n .notfound p { margin: 20px 0 0; color: var(--muted); }\n .notfound .path {\n font-family: var(--mono);\n font-size: 13px;\n color: var(--ember);\n background: var(--surface);\n border: 1px solid var(--rail);\n border-radius: var(--radius);\n padding: 1px 6px;\n overflow-wrap: anywhere;\n }\n .notfound a { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-line); }\n .notfound a:hover { border-bottom-color: var(--ember); }\n\n @media (max-width: 600px) {\n .shell { padding: 0 16px; }\n .bar-in { padding: 10px 16px; }\n .top { padding: 30px 0 20px; }\n .wordmark { font-size: 25px; }\n .readout { gap: 18px; }\n .notfound { padding: 60px 0 80px; }\n }"

INDEX_JS = " (function () {\n var input = document.getElementById('search');\n if (!input) return;\n var totalEl = document.getElementById('stat-visible');\n var emptyEl = document.getElementById('empty');\n\n // Walk the DOM once at startup and cache each category with its own\n // rows plus their pre-lowercased haystack. The previous version called\n // querySelectorAll once per category on every keystroke, which is ~175\n // full subtree scans per character typed.\n //\n // `props` is padded with spaces on both sides so a chip can match a\n // whole token ('control') without also matching a longer token that\n // merely contains it ('non-xss-control').\n var groups = [].map.call(document.querySelectorAll('.cat'), function (cat) {\n var rows = [].map.call(cat.querySelectorAll('.maze'), function (el) {\n return {\n el: el,\n hay: el.getAttribute('data-hay') || '',\n props: ' ' + (el.getAttribute('data-p') || '') + ' '\n };\n });\n return { el: cat, rows: rows };\n });\n\n // Active chip tokens, kept as a flat array so the hot loop allocates\n // nothing per keystroke.\n var keys = [];\n\n function apply() {\n var q = input.value.toLowerCase().trim();\n var visible = 0;\n for (var i = 0; i < groups.length; i++) {\n var group = groups[i];\n var shown = 0;\n for (var j = 0; j < group.rows.length; j++) {\n var row = group.rows[j];\n var match = q === '' || row.hay.indexOf(q) !== -1;\n for (var k = 0; match && k < keys.length; k++) {\n if (row.props.indexOf(keys[k]) === -1) match = false;\n }\n row.el.classList.toggle('hidden', !match);\n if (match) shown++;\n }\n group.el.classList.toggle('hidden', shown === 0);\n visible += shown;\n }\n if (totalEl) totalEl.textContent = visible;\n if (emptyEl) emptyEl.classList.toggle('hidden', visible !== 0);\n }\n\n input.addEventListener('input', apply);\n\n [].forEach.call(document.querySelectorAll('.chip'), function (chip) {\n chip.addEventListener('click', function () {\n var on = chip.getAttribute('aria-pressed') !== 'true';\n chip.setAttribute('aria-pressed', on ? 'true' : 'false');\n var token = ' ' + chip.getAttribute('data-filter') + ' ';\n var at = keys.indexOf(token);\n if (on && at === -1) keys.push(token);\n if (!on && at !== -1) keys.splice(at, 1);\n apply();\n });\n });\n\n document.addEventListener('keydown', function (e) {\n if (e.key === '/' && document.activeElement !== input) {\n e.preventDefault();\n input.focus();\n } else if (e.key === 'Escape' && document.activeElement === input) {\n input.value = '';\n apply();\n input.blur();\n }\n });\n\n var toggle = document.getElementById('theme');\n if (toggle) {\n toggle.addEventListener('click', function () {\n var root = document.documentElement;\n var now = root.getAttribute('data-theme');\n if (!now) {\n now = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n var next = now === 'dark' ? 'light' : 'dark';\n root.setAttribute('data-theme', next);\n try { localStorage.setItem('xssmaze-theme', next); } catch (err) { /* private mode */ }\n });\n }\n\n // Re-apply on load so a value restored by the browser (back/forward,\n // autofill) is reflected instead of showing an unfiltered list.\n if (input.value) apply();\n })();"

MARK_SVG = "<svg class='mark' viewBox='0 0 24 24' aria-hidden='true'><path d='M12 12 L12 9 L15 9 L15 15 L9 15 L9 6 L18 6 L18 18 L6 18 L6 3 L21 3'/></svg>"

Inline copy of the same mark for the header. Styled by .mark in CSS so it inherits the accent and the draw animation.

THEME_BOOT_JS = "try{var t=localStorage.getItem('xssmaze-theme');if(t)document.documentElement.setAttribute('data-theme',t)}catch(e){}"

Runs before first paint so a stored theme choice does not flash the system theme first. Kept tiny and inlined into for that reason.