From a25da3fc7b20fc198b12535aa4ff002d6d199cd7 Mon Sep 17 00:00:00 2001 From: Hellings Date: Fri, 23 Oct 2026 09:12:49 -0400 Subject: [PATCH] better formatting --- README.md | 2 +- index.ts | 213 +- package.json | 15 +- sass/citrine/abstracts/_functions.scss | 2 +- sass/citrine/abstracts/_mixins.scss | 134 +- sass/citrine/abstracts/_variables.scss | 1073 +++++---- sass/citrine/base/_animations.scss | 96 +- sass/citrine/base/_base.scss | 68 +- sass/citrine/base/_layout.scss | 42 +- sass/citrine/base/_reset.scss | 62 +- sass/citrine/base/_root.scss | 28 +- sass/citrine/base/_typography.scss | 466 ++-- sass/citrine/components/_buttons.scss | 146 +- sass/citrine/components/_card.scss | 2 +- sass/citrine/components/_crt.scss | 154 +- sass/citrine/components/_external.scss | 14 +- sass/citrine/components/_iframe.scss | 32 +- sass/citrine/components/_input.scss | 386 ++-- sass/citrine/components/_media.scss | 252 +-- sass/citrine/components/_overflow-auto.scss | 18 +- sass/citrine/components/_overshoot.scss | 40 +- sass/citrine/components/_skip-to-content.scss | 40 +- sass/citrine/components/_spoiler.scss | 38 +- sass/citrine/components/_table.scss | 36 +- sass/citrine/components/_textarea.scss | 28 +- sass/citrine/components/_title.scss | 6 +- sass/citrine/components/_tooltip.scss | 72 +- sass/citrine/components/_visually-hidden.scss | 18 +- sass/components/_alerts.scss | 226 +- sass/components/_article-details.scss | 116 +- sass/components/_article-list.scss | 426 ++-- sass/components/_article-nav.scss | 106 +- sass/components/_audio-button.scss | 64 +- sass/components/_audio.scss | 56 +- sass/components/_banner.scss | 164 +- sass/components/_comments.scss | 908 ++++---- sass/components/_deanchor.scss | 26 +- sass/components/_emoji.scss | 34 +- sass/components/_footnotes.scss | 96 +- sass/components/_fuse.scss | 78 +- sass/components/_giallo.scss | 16 +- sass/components/_icon.scss | 8 +- sass/components/_iframe.scss | 8 +- sass/components/_index.scss | 2 +- sass/components/_marquee.scss | 56 +- sass/components/_not-found.scss | 10 +- sass/components/_pre-container.scss | 232 +- sass/components/_search-fuse.scss | 118 +- sass/components/_search-modal.scss | 220 +- sass/components/_skip-to-content.scss | 40 +- sass/components/_statements.scss | 100 +- sass/components/_tag-chips.scss | 98 +- sass/components/_zola-anchor.scss | 64 +- sass/components/_zola-error.scss | 82 +- sass/fonts.scss | 66 +- sass/layout/_footer.scss | 226 +- sass/layout/_full-bleed.scss | 18 +- sass/layout/_grid.scss | 26 +- sass/layout/_header.scss | 574 +++-- sass/layout/_index.scss | 2 +- sass/layout/_main-content.scss | 58 +- sass/layout/_sidebar.scss | 1428 ++++++------ sass/mods/_compact-sidebar.scss | 60 +- sass/mods/_flat.scss | 26 +- sass/mods/_pill-tags.scss | 38 +- sass/mods/_skeuomorphic.scss | 48 +- scripts/audio-button.js | 4 +- scripts/closable.js | 34 +- scripts/deanchor.js | 12 +- scripts/fuse.js | 1928 ++++++++++++++++- scripts/marquee.js | 32 +- scripts/paginator.js | 30 +- scripts/search-fuse.js | 292 +-- styles/vars.css | 32 +- 74 files changed, 6910 insertions(+), 4861 deletions(-) diff --git a/README.md b/README.md index 76e888b..dd31c3a 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # @muddle/amezing -Port of the Ametrine theme (by Daudix) as a muddle module. \ No newline at end of file +Port of the Ametrine theme (by Daudix) as a muddle module. diff --git a/index.ts b/index.ts index 2c358c5..5c1371e 100644 --- a/index.ts +++ b/index.ts @@ -6,38 +6,109 @@ */ import { fileURLToPath } from "node:url"; import { readFile } from "node:fs/promises"; -import type { - Integration, - Mounts, -} from "muddle"; +import type { Integration, Mounts } from "muddle"; import type { Views } from "muddle/views"; - -export interface AmezingAccentPreset { name: string; light: string; dark: string } +export interface AmezingAccentPreset { + name: string; + light: string; + dark: string; +} /** Accent presets from ametrine/data/accent_presets.toml. */ export const ACCENT_PRESETS: Record = { - red: { name: "red", light: "hsl(342.0779, 72%, 58%)", dark: "hsl(345.18988, 100%, 69%)" }, - orange: { name: "orange", light: "hsl(15.771428, 74%, 54%)", dark: "hsl(19.731544, 96%, 70%)" }, - yellow: { name: "yellow", light: "hsl(34.639175, 91%, 42%)", dark: "hsl(44.70588, 100%, 70%)" }, - green: { name: "green", light: "hsl(153.7815, 61%, 38%)", dark: "hsl(90, 59%, 66%)" }, - blue: { name: "blue", light: "hsl(192, 71%, 38%)", dark: "hsl(186.42857, 71%, 69%)" }, - purple: { name: "purple", light: "hsl(254.11766, 44%, 55%)", dark: "hsl(249.88234, 77%, 78%)" }, - teal: { name: "teal", light: "hsl(180, 65%, 35%)", dark: "hsl(183, 85%, 65%)" }, - pink: { name: "pink", light: "hsl(333.88236, 69%, 58%)", dark: "hsl(336.78634, 100%, 70%)" }, - cyan: { name: "cyan", light: "hsl(195, 71%, 35%)", dark: "hsl(193.41046, 72%, 70%)" }, - indigo: { name: "indigo", light: "hsl(232.05884, 61%, 42%)", dark: "hsl(234.61538, 73%, 71%)" }, - amber: { name: "amber", light: "hsl(38.57695, 94%, 44%)", dark: "hsl(40.35484, 100%, 72%)" }, - ochrea: { name: "ochrea", light: "hsl(45.75298, 95%, 45%)", dark: "hsl(46.09091, 100%, 78%)" }, - lime: { name: "lime", light: "hsl(86.25406, 60%, 42%)", dark: "hsl(86.84211, 93%, 71%)" }, - maroon: { name: "maroon", light: "hsl(321.81819, 26%, 41%)", dark: "hsl(322.10526, 66%, 66%)" }, - navy: { name: "navy", light: "hsl(216, 44%, 38%)", dark: "hsl(218, 69%, 69%)" }, - olive: { name: "olive", light: "hsl(81, 36%, 41%)", dark: "hsl(81, 64%, 65%)" }, - slate: { name: "slate", light: "hsl(212.53197, 15%, 44%)", dark: "hsl(212.90323, 61%, 72%)" }, + red: { + name: "red", + light: "hsl(342.0779, 72%, 58%)", + dark: "hsl(345.18988, 100%, 69%)", + }, + orange: { + name: "orange", + light: "hsl(15.771428, 74%, 54%)", + dark: "hsl(19.731544, 96%, 70%)", + }, + yellow: { + name: "yellow", + light: "hsl(34.639175, 91%, 42%)", + dark: "hsl(44.70588, 100%, 70%)", + }, + green: { + name: "green", + light: "hsl(153.7815, 61%, 38%)", + dark: "hsl(90, 59%, 66%)", + }, + blue: { + name: "blue", + light: "hsl(192, 71%, 38%)", + dark: "hsl(186.42857, 71%, 69%)", + }, + purple: { + name: "purple", + light: "hsl(254.11766, 44%, 55%)", + dark: "hsl(249.88234, 77%, 78%)", + }, + teal: { + name: "teal", + light: "hsl(180, 65%, 35%)", + dark: "hsl(183, 85%, 65%)", + }, + pink: { + name: "pink", + light: "hsl(333.88236, 69%, 58%)", + dark: "hsl(336.78634, 100%, 70%)", + }, + cyan: { + name: "cyan", + light: "hsl(195, 71%, 35%)", + dark: "hsl(193.41046, 72%, 70%)", + }, + indigo: { + name: "indigo", + light: "hsl(232.05884, 61%, 42%)", + dark: "hsl(234.61538, 73%, 71%)", + }, + amber: { + name: "amber", + light: "hsl(38.57695, 94%, 44%)", + dark: "hsl(40.35484, 100%, 72%)", + }, + ochrea: { + name: "ochrea", + light: "hsl(45.75298, 95%, 45%)", + dark: "hsl(46.09091, 100%, 78%)", + }, + lime: { + name: "lime", + light: "hsl(86.25406, 60%, 42%)", + dark: "hsl(86.84211, 93%, 71%)", + }, + maroon: { + name: "maroon", + light: "hsl(321.81819, 26%, 41%)", + dark: "hsl(322.10526, 66%, 66%)", + }, + navy: { + name: "navy", + light: "hsl(216, 44%, 38%)", + dark: "hsl(218, 69%, 69%)", + }, + olive: { + name: "olive", + light: "hsl(81, 36%, 41%)", + dark: "hsl(81, 64%, 65%)", + }, + slate: { + name: "slate", + light: "hsl(212.53197, 15%, 44%)", + dark: "hsl(212.90323, 61%, 72%)", + }, }; function parseHsl(value: string): [string, string, string] | undefined { - const match = /hsl\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*\)/.exec(value); + const match = + /hsl\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*\)/.exec( + value, + ); return match ? [match[1]!, match[2]!, match[3]!] : undefined; } @@ -45,7 +116,11 @@ function parseHsl(value: string): [string, string, string] | undefined { export function accentStyle(accent: string | [string, string?]): string { const inputs = Array.isArray(accent) ? accent : [accent]; const light = ACCENT_PRESETS[inputs[0] ?? ""]?.light ?? inputs[0]; - const dark = ACCENT_PRESETS[inputs[1] ?? inputs[0] ?? ""]?.dark ?? inputs[1] ?? ACCENT_PRESETS[inputs[0] ?? ""]?.dark ?? inputs[0]; + const dark = + ACCENT_PRESETS[inputs[1] ?? inputs[0] ?? ""]?.dark ?? + inputs[1] ?? + ACCENT_PRESETS[inputs[0] ?? ""]?.dark ?? + inputs[0]; const lightHsl = parseHsl(light ?? ""); const darkHsl = parseHsl(dark ?? ""); if (!lightHsl || !darkHsl) throw new Error(`Unknown accent color: ${accent}`); @@ -86,27 +161,55 @@ const COMPONENTS = [ ] as const; function componentTemplates(): [string, string][] { - return COMPONENTS.map((name) => [`amezing-${name}`, fileURLToPath(new URL(`./components/${name}.spug`, import.meta.url))]); + return COMPONENTS.map((name) => [ + `amezing-${name}`, + fileURLToPath(new URL(`./components/${name}.spug`, import.meta.url)), + ]); } interface TemplateViews { component(name: string, component: unknown): unknown; - engine?: { renderComponent(path: string, props: Record, context: { locals: Record; params: Record }): Promise }; + engine?: { + renderComponent( + path: string, + props: Record, + context: { + locals: Record; + params: Record; + }, + ): Promise; + }; } function registerAll(views: TemplateViews, accent: string | undefined): void { for (const [name, template] of componentTemplates()) { views.component(name, { - async render(props: Record, context: { locals: Record; params: Record }) { - return views.engine!.renderComponent(template, { accentStyle: accent, ...props }, context); + async render( + props: Record, + context: { + locals: Record; + params: Record; + }, + ) { + return views.engine!.renderComponent( + template, + { accentStyle: accent, ...props }, + context, + ); }, }); } } /** Registers the Ametrine components on the views registry. */ -export function registerAmezing(views: Views, options: { accentColor?: string | [string, string?] } = {}): void { - registerAll(views as unknown as Parameters[0], options.accentColor ? accentStyle(options.accentColor) : undefined); +export function registerAmezing( + views: Views, + options: { accentColor?: string | [string, string?] } = {}, +): void { + registerAll( + views as unknown as Parameters[0], + options.accentColor ? accentStyle(options.accentColor) : undefined, + ); } /** Compiled theme stylesheet (Citrine base + Ametrine layout). */ @@ -133,22 +236,44 @@ export const amezingFonts: Record = { "/fonts/commit-mono.woff2": "fonts/commit-mono.woff2", }; -export function amezingMount(options: { accentColor?: string | [string, string?] } = {}): Mounts { - const accent = options.accentColor ? accentStyle(options.accentColor) : undefined; +export function amezingMount( + options: { accentColor?: string | [string, string?] } = {}, +): Mounts { + const accent = options.accentColor + ? accentStyle(options.accentColor) + : undefined; return { - views: (views) => registerAll(views as unknown as Parameters[0], accent), + views: (views) => + registerAll( + views as unknown as Parameters[0], + accent, + ), routes: (route) => { for (const [routePath, file] of Object.entries(amezingScripts)) { - route("GET", `/_muddle/amezing/${routePath}`, async () => - new Response(await readFile(new URL(`./${file}`, import.meta.url), "utf8"), { - headers: { "content-type": "text/javascript; charset=utf-8" }, - })); + route( + "GET", + `/_muddle/amezing/${routePath}`, + async () => + new Response( + await readFile(new URL(`./${file}`, import.meta.url), "utf8"), + { + headers: { "content-type": "text/javascript; charset=utf-8" }, + }, + ), + ); } for (const [routePath, file] of Object.entries(amezingFonts)) { - route("GET", routePath, async () => - new Response(await readFile(new URL(`./${file}`, import.meta.url)), { - headers: { "content-type": "font/woff2" }, - })); + route( + "GET", + routePath, + async () => + new Response( + await readFile(new URL(`./${file}`, import.meta.url)), + { + headers: { "content-type": "font/woff2" }, + }, + ), + ); } }, styles: { "/_muddle/amezing.css": () => amezingStyles() }, @@ -156,6 +281,8 @@ export function amezingMount(options: { accentColor?: string | [string, string?] } /** Convenience integration. */ -export function amezingIntegration(options: { accentColor?: string | [string, string?] } = {}): Integration { +export function amezingIntegration( + options: { accentColor?: string | [string, string?] } = {}, +): Integration { return { name: "amezing", mounts: [amezingMount(options)] }; } diff --git a/package.json b/package.json index f153655..698c0a9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,12 @@ { - "name": "@muddle/amezing", - "version": "0.1.0", - "type": "module", - "exports": { ".": "./index.ts", "./styles": "./styles/ametrine.css" }, - "peerDependencies": { "muddle": "*" } + "name": "@muddle/amezing", + "version": "0.1.0", + "type": "module", + "exports": { + ".": "./index.ts", + "./styles": "./styles/ametrine.css" + }, + "peerDependencies": { + "muddle": "*" + } } diff --git a/sass/citrine/abstracts/_functions.scss b/sass/citrine/abstracts/_functions.scss index dc7e8f9..12da3e6 100644 --- a/sass/citrine/abstracts/_functions.scss +++ b/sass/citrine/abstracts/_functions.scss @@ -1,5 +1,5 @@ // Converts px values to rem // rpx(1) --> 0.0625rem @function rpx($px-value) { - @return ($px-value / 16) + rem; + @return ($px-value / 16) + rem; } diff --git a/sass/citrine/abstracts/_mixins.scss b/sass/citrine/abstracts/_mixins.scss index 6a0739b..d1b4527 100644 --- a/sass/citrine/abstracts/_mixins.scss +++ b/sass/citrine/abstracts/_mixins.scss @@ -1,82 +1,80 @@ @mixin icon($mode: normal) { - @if $mode == normal { - font-style: normal; - font-variant: normal; - font-weight: normal; - line-height: 1; - user-select: none; - text-transform: none; - -webkit-user-select: none; - display: inline-block; - box-sizing: content-box; - } @else if $mode == pseudo { - -webkit-mask-image: var(--icon); - -webkit-mask-size: cover; - display: block; - mask-image: var(--icon); - mask-size: cover; - background-color: currentColor; - width: 1em; - height: 1em; - content: ""; - } + @if $mode == normal { + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 1; + user-select: none; + text-transform: none; + -webkit-user-select: none; + display: inline-block; + box-sizing: content-box; + } @else if $mode == pseudo { + -webkit-mask-image: var(--icon); + -webkit-mask-size: cover; + display: block; + mask-image: var(--icon); + mask-size: cover; + background-color: currentColor; + width: 1em; + height: 1em; + content: ""; + } } @mixin gradient-fill($mode: normal) { - @if $mode == normal { - box-shadow: var(--edge-highlight), var(--shadow-glow); - background-image: linear-gradient( - to bottom right, - var(--accent-color), - var(--accent-highlight) - ); - color: var(--contrast-color); - text-shadow: var(--text-shadow-glow); - } @else if $mode == hover { - box-shadow: var(--edge-highlight); - background-color: var(--accent-color); - color: var(--contrast-color); - } + @if $mode == normal { + box-shadow: var(--edge-highlight), var(--shadow-glow); + background-image: linear-gradient( + to bottom right, + var(--accent-color), + var(--accent-highlight) + ); + color: var(--contrast-color); + text-shadow: var(--text-shadow-glow); + } @else if $mode == hover { + box-shadow: var(--edge-highlight); + background-color: var(--accent-color); + color: var(--contrast-color); + } } @mixin card { - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 1rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 1rem; } @mixin chip { - transition: - all var(--transition), - transform var(--transition-bezier); - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner-small); - background-color: var(--bg-muted-1); - padding-inline: 0.375rem; - text-decoration: none; + transition: all var(--transition), transform var(--transition-bezier); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner-small); + background-color: var(--bg-muted-1); + padding-inline: 0.375rem; + text-decoration: none; } @mixin easing-mask($direction: to bottom) { - --mask-image: linear-gradient( - to #{$direction}, - hsl(0, 0%, 0%) 0%, - hsla(0, 0%, 0%, 0.987) 8.1%, - hsla(0, 0%, 0%, 0.951) 15.5%, - hsla(0, 0%, 0%, 0.896) 22.5%, - hsla(0, 0%, 0%, 0.825) 29%, - hsla(0, 0%, 0%, 0.741) 35.3%, - hsla(0, 0%, 0%, 0.648) 41.2%, - hsla(0, 0%, 0%, 0.55) 47.1%, - hsla(0, 0%, 0%, 0.45) 52.9%, - hsla(0, 0%, 0%, 0.352) 58.8%, - hsla(0, 0%, 0%, 0.259) 64.7%, - hsla(0, 0%, 0%, 0.175) 71%, - hsla(0, 0%, 0%, 0.104) 77.5%, - hsla(0, 0%, 0%, 0.049) 84.5%, - hsla(0, 0%, 0%, 0.013) 91.9%, - hsla(0, 0%, 0%, 0) 100% - ); - mask-image: var(--mask-image); - -webkit-mask-image: var(--mask-image); + --mask-image: linear-gradient( + to #{$direction}, + hsl(0, 0%, 0%) 0%, + hsla(0, 0%, 0%, 0.987) 8.1%, + hsla(0, 0%, 0%, 0.951) 15.5%, + hsla(0, 0%, 0%, 0.896) 22.5%, + hsla(0, 0%, 0%, 0.825) 29%, + hsla(0, 0%, 0%, 0.741) 35.3%, + hsla(0, 0%, 0%, 0.648) 41.2%, + hsla(0, 0%, 0%, 0.55) 47.1%, + hsla(0, 0%, 0%, 0.45) 52.9%, + hsla(0, 0%, 0%, 0.352) 58.8%, + hsla(0, 0%, 0%, 0.259) 64.7%, + hsla(0, 0%, 0%, 0.175) 71%, + hsla(0, 0%, 0%, 0.104) 77.5%, + hsla(0, 0%, 0%, 0.049) 84.5%, + hsla(0, 0%, 0%, 0.013) 91.9%, + hsla(0, 0%, 0%, 0) 100% + ); + mask-image: var(--mask-image); + -webkit-mask-image: var(--mask-image); } diff --git a/sass/citrine/abstracts/_variables.scss b/sass/citrine/abstracts/_variables.scss index 0a7019d..4e0ae94 100644 --- a/sass/citrine/abstracts/_variables.scss +++ b/sass/citrine/abstracts/_variables.scss @@ -2,569 +2,564 @@ @use "mixins" as *; @mixin variables($modes: "light") { - @each $mode in $modes { - @if $mode == "light" { - // COLORS - --bg-overlay: linear-gradient( - rgba(255, 255, 255, var(--dim-opacity)), - rgba(255, 255, 255, var(--dim-opacity)) - ); - --fg-color: #29242a; - --fg-contrast: #fcfcfa; - --red-fg: hsl(342.0779, 72%, 58%); - --red-h: 342.0779; - --red-s: 72%; - --red-l: 58%; - --orange-fg: hsl(15.771428, 74%, 54%); - --orange-h: 15.771428; - --orange-s: 74%; - --orange-l: 54%; - --yellow-fg: hsl(34.639175, 91%, 42%); - --yellow-h: 34.639175; - --yellow-s: 91%; - --yellow-l: 42%; - --green-fg: hsl(153.7815, 61%, 38%); - --green-h: 153.7815; - --green-s: 61%; - --green-l: 38%; - --blue-fg: hsl(192, 71%, 38%); - --blue-h: 192; - --blue-s: 71%; - --blue-l: 38%; - --purple-fg: hsl(254.11766, 44%, 55%); - --purple-h: 254.11766; - --purple-s: 44%; - --purple-l: 55%; - --red-bg-1: hsla( - var(--red-h), - var(--red-s), - var(--red-l), - var(--color-opacity-1) - ); - --red-bg-2: hsla( - var(--red-h), - var(--red-s), - var(--red-l), - var(--color-opacity-2) - ); - --orange-bg-1: hsla( - var(--orange-h), - var(--orange-s), - var(--orange-l), - var(--color-opacity-1) - ); - --orange-bg-2: hsla( - var(--orange-h), - var(--orange-s), - var(--orange-l), - var(--color-opacity-2) - ); - --yellow-bg-1: hsla( - var(--yellow-h), - var(--yellow-s), - var(--yellow-l), - var(--color-opacity-1) - ); - --yellow-bg-2: hsla( - var(--yellow-h), - var(--yellow-s), - var(--yellow-l), - var(--color-opacity-2) - ); - --green-bg-1: hsla( - var(--green-h), - var(--green-s), - var(--green-l), - var(--color-opacity-1) - ); - --green-bg-2: hsla( - var(--green-h), - var(--green-s), - var(--green-l), - var(--color-opacity-2) - ); - --blue-bg-1: hsla( - var(--blue-h), - var(--blue-s), - var(--blue-l), - var(--color-opacity-1) - ); - --blue-bg-2: hsla( - var(--blue-h), - var(--blue-s), - var(--blue-l), - var(--color-opacity-2) - ); - --purple-bg-1: hsla( - var(--purple-h), - var(--purple-s), - var(--purple-l), - var(--color-opacity-1) - ); - --purple-bg-2: hsla( - var(--purple-h), - var(--purple-s), - var(--purple-l), - var(--color-opacity-2) - ); - --red-fg-muted-1: hsla( - var(--red-h), - var(--red-s), - calc(var(--red-l) - var(--red-l) * 0.85), - var(--fg-muted-1-opacity) - ); - --red-fg-muted-2: hsla( - var(--red-h), - var(--red-s), - calc(var(--red-l) - var(--red-l) * 0.85), - var(--fg-muted-2-opacity) - ); - --orange-fg-muted-1: hsla( - var(--orange-h), - var(--orange-s), - calc(var(--orange-l) - var(--orange-l) * 0.85), - var(--fg-muted-1-opacity) - ); - --orange-fg-muted-2: hsla( - var(--orange-h), - var(--orange-s), - calc(var(--orange-l) - var(--orange-l) * 0.85), - var(--fg-muted-2-opacity) - ); - --yellow-fg-muted-1: hsla( - var(--yellow-h), - var(--yellow-s), - calc(var(--yellow-l) - var(--yellow-l) * 0.85), - var(--fg-muted-1-opacity) - ); - --yellow-fg-muted-2: hsla( - var(--yellow-h), - var(--yellow-s), - calc(var(--yellow-l) - var(--yellow-l) * 0.85), - var(--fg-muted-2-opacity) - ); - --green-fg-muted-1: hsla( - var(--green-h), - var(--green-s), - calc(var(--green-l) - var(--green-l) * 0.85), - var(--fg-muted-1-opacity) - ); - --green-fg-muted-2: hsla( - var(--green-h), - var(--green-s), - calc(var(--green-l) - var(--green-l) * 0.85), - var(--fg-muted-2-opacity) - ); - --blue-fg-muted-1: hsla( - var(--blue-h), - var(--blue-s), - calc(var(--blue-l) - var(--blue-l) * 0.85), - var(--fg-muted-1-opacity) - ); - --blue-fg-muted-2: hsla( - var(--blue-h), - var(--blue-s), - calc(var(--blue-l) - var(--blue-l) * 0.85), - var(--fg-muted-2-opacity) - ); - --purple-fg-muted-1: hsla( - var(--purple-h), - var(--purple-s), - calc(var(--purple-l) - var(--purple-l) * 0.85), - var(--fg-muted-1-opacity) - ); - --purple-fg-muted-2: hsla( - var(--purple-h), - var(--purple-s), - calc(var(--purple-l) - var(--purple-l) * 0.85), - var(--fg-muted-2-opacity) - ); - --shade-color: rgba(0, 0, 0, 0.07); + @each $mode in $modes { + @if $mode == "light" { + // COLORS + --bg-overlay: linear-gradient( + rgba(255, 255, 255, var(--dim-opacity)), + rgba(255, 255, 255, var(--dim-opacity)) + ); + --fg-color: #29242a; + --fg-contrast: #fcfcfa; + --red-fg: hsl(342.0779, 72%, 58%); + --red-h: 342.0779; + --red-s: 72%; + --red-l: 58%; + --orange-fg: hsl(15.771428, 74%, 54%); + --orange-h: 15.771428; + --orange-s: 74%; + --orange-l: 54%; + --yellow-fg: hsl(34.639175, 91%, 42%); + --yellow-h: 34.639175; + --yellow-s: 91%; + --yellow-l: 42%; + --green-fg: hsl(153.7815, 61%, 38%); + --green-h: 153.7815; + --green-s: 61%; + --green-l: 38%; + --blue-fg: hsl(192, 71%, 38%); + --blue-h: 192; + --blue-s: 71%; + --blue-l: 38%; + --purple-fg: hsl(254.11766, 44%, 55%); + --purple-h: 254.11766; + --purple-s: 44%; + --purple-l: 55%; + --red-bg-1: hsla( + var(--red-h), + var(--red-s), + var(--red-l), + var(--color-opacity-1) + ); + --red-bg-2: hsla( + var(--red-h), + var(--red-s), + var(--red-l), + var(--color-opacity-2) + ); + --orange-bg-1: hsla( + var(--orange-h), + var(--orange-s), + var(--orange-l), + var(--color-opacity-1) + ); + --orange-bg-2: hsla( + var(--orange-h), + var(--orange-s), + var(--orange-l), + var(--color-opacity-2) + ); + --yellow-bg-1: hsla( + var(--yellow-h), + var(--yellow-s), + var(--yellow-l), + var(--color-opacity-1) + ); + --yellow-bg-2: hsla( + var(--yellow-h), + var(--yellow-s), + var(--yellow-l), + var(--color-opacity-2) + ); + --green-bg-1: hsla( + var(--green-h), + var(--green-s), + var(--green-l), + var(--color-opacity-1) + ); + --green-bg-2: hsla( + var(--green-h), + var(--green-s), + var(--green-l), + var(--color-opacity-2) + ); + --blue-bg-1: hsla( + var(--blue-h), + var(--blue-s), + var(--blue-l), + var(--color-opacity-1) + ); + --blue-bg-2: hsla( + var(--blue-h), + var(--blue-s), + var(--blue-l), + var(--color-opacity-2) + ); + --purple-bg-1: hsla( + var(--purple-h), + var(--purple-s), + var(--purple-l), + var(--color-opacity-1) + ); + --purple-bg-2: hsla( + var(--purple-h), + var(--purple-s), + var(--purple-l), + var(--color-opacity-2) + ); + --red-fg-muted-1: hsla( + var(--red-h), + var(--red-s), + calc(var(--red-l) - var(--red-l) * 0.85), + var(--fg-muted-1-opacity) + ); + --red-fg-muted-2: hsla( + var(--red-h), + var(--red-s), + calc(var(--red-l) - var(--red-l) * 0.85), + var(--fg-muted-2-opacity) + ); + --orange-fg-muted-1: hsla( + var(--orange-h), + var(--orange-s), + calc(var(--orange-l) - var(--orange-l) * 0.85), + var(--fg-muted-1-opacity) + ); + --orange-fg-muted-2: hsla( + var(--orange-h), + var(--orange-s), + calc(var(--orange-l) - var(--orange-l) * 0.85), + var(--fg-muted-2-opacity) + ); + --yellow-fg-muted-1: hsla( + var(--yellow-h), + var(--yellow-s), + calc(var(--yellow-l) - var(--yellow-l) * 0.85), + var(--fg-muted-1-opacity) + ); + --yellow-fg-muted-2: hsla( + var(--yellow-h), + var(--yellow-s), + calc(var(--yellow-l) - var(--yellow-l) * 0.85), + var(--fg-muted-2-opacity) + ); + --green-fg-muted-1: hsla( + var(--green-h), + var(--green-s), + calc(var(--green-l) - var(--green-l) * 0.85), + var(--fg-muted-1-opacity) + ); + --green-fg-muted-2: hsla( + var(--green-h), + var(--green-s), + calc(var(--green-l) - var(--green-l) * 0.85), + var(--fg-muted-2-opacity) + ); + --blue-fg-muted-1: hsla( + var(--blue-h), + var(--blue-s), + calc(var(--blue-l) - var(--blue-l) * 0.85), + var(--fg-muted-1-opacity) + ); + --blue-fg-muted-2: hsla( + var(--blue-h), + var(--blue-s), + calc(var(--blue-l) - var(--blue-l) * 0.85), + var(--fg-muted-2-opacity) + ); + --purple-fg-muted-1: hsla( + var(--purple-h), + var(--purple-s), + calc(var(--purple-l) - var(--purple-l) * 0.85), + var(--fg-muted-1-opacity) + ); + --purple-fg-muted-2: hsla( + var(--purple-h), + var(--purple-s), + calc(var(--purple-l) - var(--purple-l) * 0.85), + var(--fg-muted-2-opacity) + ); + --shade-color: rgba(0, 0, 0, 0.07); - // COLORS (NEUTRAL) - --bg-muted-neutral-1: rgba(0, 0, 0, var(--color-opacity-1)); - --bg-muted-neutral-2: rgba(0, 0, 0, var(--color-opacity-2)); - --fg-muted-neutral-1: rgba(0, 0, 0, var(--fg-muted-1-opacity)); - --fg-muted-neutral-2: rgba(0, 0, 0, var(--fg-muted-2-opacity)); + // COLORS (NEUTRAL) + --bg-muted-neutral-1: rgba(0, 0, 0, var(--color-opacity-1)); + --bg-muted-neutral-2: rgba(0, 0, 0, var(--color-opacity-2)); + --fg-muted-neutral-1: rgba(0, 0, 0, var(--fg-muted-1-opacity)); + --fg-muted-neutral-2: rgba(0, 0, 0, var(--fg-muted-2-opacity)); - // OPACITY - --scanlines-opacity: 0.4; - --fg-muted-1-opacity: 0.5; - --fg-muted-2-opacity: 0.6; + // OPACITY + --scanlines-opacity: 0.4; + --fg-muted-1-opacity: 0.5; + --fg-muted-2-opacity: 0.6; - // SHADOWS - --edge-highlight: inset - 0 - #{rpx(-1)} - 0 - rgba(0, 0, 0, var(--color-opacity-1)); - } @else if $mode == "dark" { - // COLORS - --bg-overlay: linear-gradient( - rgba(0, 0, 0, var(--dim-opacity)), - rgba(0, 0, 0, var(--dim-opacity)) - ); - --fg-color: #fcfcfa; - --fg-contrast: #29242a; - --red-fg: hsl(345.18988, 100%, 69%); - --red-h: 345.18988; - --red-s: 100%; - --red-l: 69%; - --orange-fg: hsl(19.731544, 96%, 70%); - --orange-h: 19.731544; - --orange-s: 96%; - --orange-l: 70%; - --yellow-fg: hsl(44.70588, 100%, 70%); - --yellow-h: 44.70588; - --yellow-s: 100%; - --yellow-l: 70%; - --green-fg: hsl(90, 59%, 66%); - --green-h: 90; - --green-s: 59%; - --green-l: 66%; - --blue-fg: hsl(186.42857, 71%, 69%); - --blue-h: 186.42857; - --blue-s: 71%; - --blue-l: 69%; - --purple-fg: hsl(249.88234, 77%, 78%); - --purple-h: 249.88234; - --purple-s: 77%; - --purple-l: 78%; + // SHADOWS + --edge-highlight: inset + 0 + #{rpx(-1)} + 0 + rgba(0, 0, 0, var(--color-opacity-1)); + } @else if $mode == "dark" { + // COLORS + --bg-overlay: linear-gradient( + rgba(0, 0, 0, var(--dim-opacity)), + rgba(0, 0, 0, var(--dim-opacity)) + ); + --fg-color: #fcfcfa; + --fg-contrast: #29242a; + --red-fg: hsl(345.18988, 100%, 69%); + --red-h: 345.18988; + --red-s: 100%; + --red-l: 69%; + --orange-fg: hsl(19.731544, 96%, 70%); + --orange-h: 19.731544; + --orange-s: 96%; + --orange-l: 70%; + --yellow-fg: hsl(44.70588, 100%, 70%); + --yellow-h: 44.70588; + --yellow-s: 100%; + --yellow-l: 70%; + --green-fg: hsl(90, 59%, 66%); + --green-h: 90; + --green-s: 59%; + --green-l: 66%; + --blue-fg: hsl(186.42857, 71%, 69%); + --blue-h: 186.42857; + --blue-s: 71%; + --blue-l: 69%; + --purple-fg: hsl(249.88234, 77%, 78%); + --purple-h: 249.88234; + --purple-s: 77%; + --purple-l: 78%; - --red-fg-muted-1: hsla( - var(--red-h), - var(--red-s), - calc(var(--red-l) + (100% - var(--red-l)) * 0.85), - var(--fg-muted-1-opacity) - ); - --red-fg-muted-2: hsla( - var(--red-h), - var(--red-s), - calc(var(--red-l) + (100% - var(--red-l)) * 0.85), - var(--fg-muted-2-opacity) - ); - --orange-fg-muted-1: hsla( - var(--orange-h), - var(--orange-s), - calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85), - var(--fg-muted-1-opacity) - ); - --orange-fg-muted-2: hsla( - var(--orange-h), - var(--orange-s), - calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85), - var(--fg-muted-2-opacity) - ); - --yellow-fg-muted-1: hsla( - var(--yellow-h), - var(--yellow-s), - calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85), - var(--fg-muted-1-opacity) - ); - --yellow-fg-muted-2: hsla( - var(--yellow-h), - var(--yellow-s), - calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85), - var(--fg-muted-2-opacity) - ); - --green-fg-muted-1: hsla( - var(--green-h), - var(--green-s), - calc(var(--green-l) + (100% - var(--green-l)) * 0.85), - var(--fg-muted-1-opacity) - ); - --green-fg-muted-2: hsla( - var(--green-h), - var(--green-s), - calc(var(--green-l) + (100% - var(--green-l)) * 0.85), - var(--fg-muted-2-opacity) - ); - --blue-fg-muted-1: hsla( - var(--blue-h), - var(--blue-s), - calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85), - var(--fg-muted-1-opacity) - ); - --blue-fg-muted-2: hsla( - var(--blue-h), - var(--blue-s), - calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85), - var(--fg-muted-2-opacity) - ); - --purple-fg-muted-1: hsla( - var(--purple-h), - var(--purple-s), - calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85), - var(--fg-muted-1-opacity) - ); - --purple-fg-muted-2: hsla( - var(--purple-h), - var(--purple-s), - calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85), - var(--fg-muted-2-opacity) - ); - --shade-color: rgba(0, 0, 0, 0.25); + --red-fg-muted-1: hsla( + var(--red-h), + var(--red-s), + calc(var(--red-l) + (100% - var(--red-l)) * 0.85), + var(--fg-muted-1-opacity) + ); + --red-fg-muted-2: hsla( + var(--red-h), + var(--red-s), + calc(var(--red-l) + (100% - var(--red-l)) * 0.85), + var(--fg-muted-2-opacity) + ); + --orange-fg-muted-1: hsla( + var(--orange-h), + var(--orange-s), + calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85), + var(--fg-muted-1-opacity) + ); + --orange-fg-muted-2: hsla( + var(--orange-h), + var(--orange-s), + calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85), + var(--fg-muted-2-opacity) + ); + --yellow-fg-muted-1: hsla( + var(--yellow-h), + var(--yellow-s), + calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85), + var(--fg-muted-1-opacity) + ); + --yellow-fg-muted-2: hsla( + var(--yellow-h), + var(--yellow-s), + calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85), + var(--fg-muted-2-opacity) + ); + --green-fg-muted-1: hsla( + var(--green-h), + var(--green-s), + calc(var(--green-l) + (100% - var(--green-l)) * 0.85), + var(--fg-muted-1-opacity) + ); + --green-fg-muted-2: hsla( + var(--green-h), + var(--green-s), + calc(var(--green-l) + (100% - var(--green-l)) * 0.85), + var(--fg-muted-2-opacity) + ); + --blue-fg-muted-1: hsla( + var(--blue-h), + var(--blue-s), + calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85), + var(--fg-muted-1-opacity) + ); + --blue-fg-muted-2: hsla( + var(--blue-h), + var(--blue-s), + calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85), + var(--fg-muted-2-opacity) + ); + --purple-fg-muted-1: hsla( + var(--purple-h), + var(--purple-s), + calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85), + var(--fg-muted-1-opacity) + ); + --purple-fg-muted-2: hsla( + var(--purple-h), + var(--purple-s), + calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85), + var(--fg-muted-2-opacity) + ); + --shade-color: rgba(0, 0, 0, 0.25); - // COLORS (NEUTRAL) - --bg-muted-neutral-1: rgba(255, 255, 255, var(--color-opacity-1)); - --bg-muted-neutral-2: rgba(255, 255, 255, var(--color-opacity-2)); - --fg-muted-neutral-1: rgba(255, 255, 255, var(--fg-muted-1-opacity)); - --fg-muted-neutral-2: rgba(255, 255, 255, var(--fg-muted-2-opacity)); + // COLORS (NEUTRAL) + --bg-muted-neutral-1: rgba(255, 255, 255, var(--color-opacity-1)); + --bg-muted-neutral-2: rgba(255, 255, 255, var(--color-opacity-2)); + --fg-muted-neutral-1: rgba(255, 255, 255, var(--fg-muted-1-opacity)); + --fg-muted-neutral-2: rgba(255, 255, 255, var(--fg-muted-2-opacity)); - // OPACITY - --scanlines-opacity: 1; - --fg-muted-1-opacity: 0.6; - --fg-muted-2-opacity: 0.7; + // OPACITY + --scanlines-opacity: 1; + --fg-muted-1-opacity: 0.6; + --fg-muted-2-opacity: 0.7; - // SHADOWS - --edge-highlight: inset - 0 - #{rpx(1)} - 0 - rgba(255, 255, 255, var(--color-opacity-1)); - } @else if $mode == "common" { - // WIDTHS - --content-width: #{rpx(720)}; - --sidebar-width: clamp( - calc(var(--content-width) / 3), - 20vw, - calc(var(--content-width) / 2) - ); + // SHADOWS + --edge-highlight: inset + 0 + #{rpx(1)} + 0 + rgba(255, 255, 255, var(--color-opacity-1)); + } @else if $mode == "common" { + // WIDTHS + --content-width: #{rpx(720)}; + --sidebar-width: clamp( + calc(var(--content-width) / 3), + 20vw, + calc(var(--content-width) / 2) + ); - // CORNERS - --rounded-corner: 0.75rem; - --rounded-corner-small: 0.5rem; + // CORNERS + --rounded-corner: 0.75rem; + --rounded-corner-small: 0.5rem; - // FILTERS - --blur: blur(0.75rem) saturate(180%); - --printed: contrast(2) brightness(0.75) grayscale(1); - --drop-shadow: drop-shadow(0 0.08rem 0.1rem rgba(0, 0, 0, 0.35)) - drop-shadow(0 0.4rem 0.7rem rgba(0, 0, 0, 0.18)); + // FILTERS + --blur: blur(0.75rem) saturate(180%); + --printed: contrast(2) brightness(0.75) grayscale(1); + --drop-shadow: drop-shadow(0 0.08rem 0.1rem rgba(0, 0, 0, 0.35)) + drop-shadow(0 0.4rem 0.7rem rgba(0, 0, 0, 0.18)); - // FONTS - --font-system-ui: system-ui, sans-serif; - --font-ui-monospace: ui-monospace, monospace; - --font-emoji: - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; + // FONTS + --font-system-ui: system-ui, sans-serif; + --font-ui-monospace: ui-monospace, monospace; + --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; - // FONT SIZES - --font-size-xx-small: 0.625rem; - --font-size-x-small: 0.75rem; - --font-size-small: 0.875rem; - --font-size-medium: 1rem; - --font-size-large: 1.25rem; - --font-size-x-large: 1.5rem; - --font-size-xx-large: 2rem; - --font-size-xxx-large: 3rem; + // FONT SIZES + --font-size-xx-small: 0.625rem; + --font-size-x-small: 0.75rem; + --font-size-small: 0.875rem; + --font-size-medium: 1rem; + --font-size-large: 1.25rem; + --font-size-x-large: 1.5rem; + --font-size-xx-large: 2rem; + --font-size-xxx-large: 3rem; - // FONT WEIGHTS - --font-weight-thin: 100; - --font-weight-extra-light: 200; - --font-weight-light: 300; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semi-bold: 600; - --font-weight-bold: 700; - --font-weight-extra-bold: 800; - --font-weight-black: 900; + // FONT WEIGHTS + --font-weight-thin: 100; + --font-weight-extra-light: 200; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semi-bold: 600; + --font-weight-bold: 700; + --font-weight-extra-bold: 800; + --font-weight-black: 900; - // OPACITY - --color-opacity-1: 0.1; - --color-opacity-2: 0.2; - --dim-opacity: 0.8; - --disabled-opacity: 0.4; + // OPACITY + --color-opacity-1: 0.1; + --color-opacity-2: 0.2; + --dim-opacity: 0.8; + --disabled-opacity: 0.4; - // SHADOWS - --shadow: - 0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.03), - 0 #{rpx(1)} #{rpx(3)} #{rpx(1)} rgba(0, 0, 0, 0.07), - 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.03); - --shadow-inset: - inset 0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.03), - inset 0 #{rpx(1)} #{rpx(3)} #{rpx(1)} rgba(0, 0, 0, 0.07), - inset 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.03); - --shadow-raised: - 0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.06), - 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.14), - 0 #{rpx(4)} #{rpx(12)} #{rpx(4)} rgba(0, 0, 0, 0.06); - --shadow-glass: 0 #{rpx(6)} #{rpx(12)} #{rpx(-6)} rgba(0, 0, 0, 0.1); + // SHADOWS + --shadow: 0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.03), + 0 #{rpx(1)} #{rpx(3)} #{rpx(1)} rgba(0, 0, 0, 0.07), + 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.03); + --shadow-inset: inset 0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.03), + inset 0 #{rpx(1)} #{rpx(3)} #{rpx(1)} rgba(0, 0, 0, 0.07), + inset 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.03); + --shadow-raised: 0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.06), + 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.14), + 0 #{rpx(4)} #{rpx(12)} #{rpx(4)} rgba(0, 0, 0, 0.06); + --shadow-glass: 0 #{rpx(6)} #{rpx(12)} #{rpx(-6)} rgba(0, 0, 0, 0.1); - // STATES - --hover: scale(1.1); - --active: scale(0.9); + // STATES + --hover: scale(1.1); + --active: scale(0.9); - // TRANSITIONS - --transition: 0.2s; - --transition-longer: 0.4s; - --transition-long: 0.8s; - --transition-bezier: 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28); - --transition-bezier-longer: 0.525s cubic-bezier(0.17, 0.89, 0.32, 1.28); + // TRANSITIONS + --transition: 0.2s; + --transition-longer: 0.4s; + --transition-long: 0.8s; + --transition-bezier: 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28); + --transition-bezier-longer: 0.525s cubic-bezier(0.17, 0.89, 0.32, 1.28); - // ICONS - --icon-arrow-square-out: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M228%2C104a12%2C12%2C0%2C0%2C1-24%2C0V69l-59.51%2C59.51a12%2C12%2C0%2C0%2C1-17-17L187%2C52H152a12%2C12%2C0%2C0%2C1%2C0-24h64a12%2C12%2C0%2C0%2C1%2C12%2C12Zm-44%2C24a12%2C12%2C0%2C0%2C0-12%2C12v64H52V84h64a12%2C12%2C0%2C0%2C0%2C0-24H48A20%2C20%2C0%2C0%2C0%2C28%2C80V208a20%2C20%2C0%2C0%2C0%2C20%2C20H176a20%2C20%2C0%2C0%2C0%2C20-20V140A12%2C12%2C0%2C0%2C0%2C184%2C128Z%22/%3E%3C/svg%3E); - --icon-caret-down: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M216.49%2C104.49l-80%2C80a12%2C12%2C0%2C0%2C1-17%2C0l-80-80a12%2C12%2C0%2C0%2C1%2C17-17L128%2C159l71.51-71.52a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22/%3E%3C/svg%3E); - --icon-check: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232.49%2C80.49l-128%2C128a12%2C12%2C0%2C0%2C1-17%2C0l-56-56a12%2C12%2C0%2C1%2C1%2C17-17L96%2C183%2C215.51%2C63.51a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22/%3E%3C/svg%3E); - } - } + // ICONS + --icon-arrow-square-out: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M228%2C104a12%2C12%2C0%2C0%2C1-24%2C0V69l-59.51%2C59.51a12%2C12%2C0%2C0%2C1-17-17L187%2C52H152a12%2C12%2C0%2C0%2C1%2C0-24h64a12%2C12%2C0%2C0%2C1%2C12%2C12Zm-44%2C24a12%2C12%2C0%2C0%2C0-12%2C12v64H52V84h64a12%2C12%2C0%2C0%2C0%2C0-24H48A20%2C20%2C0%2C0%2C0%2C28%2C80V208a20%2C20%2C0%2C0%2C0%2C20%2C20H176a20%2C20%2C0%2C0%2C0%2C20-20V140A12%2C12%2C0%2C0%2C0%2C184%2C128Z%22/%3E%3C/svg%3E); + --icon-caret-down: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M216.49%2C104.49l-80%2C80a12%2C12%2C0%2C0%2C1-17%2C0l-80-80a12%2C12%2C0%2C0%2C1%2C17-17L128%2C159l71.51-71.52a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22/%3E%3C/svg%3E); + --icon-check: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232.49%2C80.49l-128%2C128a12%2C12%2C0%2C0%2C1-17%2C0l-56-56a12%2C12%2C0%2C1%2C1%2C17-17L96%2C183%2C215.51%2C63.51a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22/%3E%3C/svg%3E); + } + } } @mixin variables-accent($modes: "light") { - @each $mode in $modes { - @if $mode == "light" { - --accent-color: hsl( - var(--accent-light-h), - var(--accent-light-s), - var(--accent-light-l) - ); - --accent-h: var(--accent-light-h); - --accent-s: var(--accent-light-s); - --accent-l: var(--accent-light-l); + @each $mode in $modes { + @if $mode == "light" { + --accent-color: hsl( + var(--accent-light-h), + var(--accent-light-s), + var(--accent-light-l) + ); + --accent-h: var(--accent-light-h); + --accent-s: var(--accent-light-s); + --accent-l: var(--accent-light-l); - --bg-color: hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.6), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8) - ); - --fg-muted-1: hsla( - var(--accent-h), - var(--accent-s), - calc(var(--accent-l) - var(--accent-l) * 0.85), - var(--fg-muted-1-opacity) - ); - --fg-muted-2: hsla( - var(--accent-h), - var(--accent-s), - calc(var(--accent-l) - var(--accent-l) * 0.85), - var(--fg-muted-2-opacity) - ); - --glass-bg-1: hsla( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.7), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9), - var(--dim-opacity) - ); - --glass-bg-2: hsla( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.6), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8), - var(--dim-opacity) - ); - --crt-bg: radial-gradient( - hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.5), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9) - ), - hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.5), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75) - ) - 80%, - hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.5), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.65) - ) - ); - } @else if $mode == "dark" { - --accent-color: hsl( - var(--accent-dark-h), - var(--accent-dark-s), - var(--accent-dark-l) - ); - --accent-h: var(--accent-dark-h); - --accent-s: var(--accent-dark-s); - --accent-l: var(--accent-dark-l); + --bg-color: hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.6), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8) + ); + --fg-muted-1: hsla( + var(--accent-h), + var(--accent-s), + calc(var(--accent-l) - var(--accent-l) * 0.85), + var(--fg-muted-1-opacity) + ); + --fg-muted-2: hsla( + var(--accent-h), + var(--accent-s), + calc(var(--accent-l) - var(--accent-l) * 0.85), + var(--fg-muted-2-opacity) + ); + --glass-bg-1: hsla( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.7), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9), + var(--dim-opacity) + ); + --glass-bg-2: hsla( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.6), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8), + var(--dim-opacity) + ); + --crt-bg: radial-gradient( + hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.5), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9) + ), + hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.5), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75) + ) + 80%, + hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.5), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.65) + ) + ); + } @else if $mode == "dark" { + --accent-color: hsl( + var(--accent-dark-h), + var(--accent-dark-s), + var(--accent-dark-l) + ); + --accent-h: var(--accent-dark-h); + --accent-s: var(--accent-dark-s); + --accent-l: var(--accent-dark-l); - --bg-color: hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.7), - calc(var(--accent-l) - var(--accent-l) * 0.9) - ); - --fg-muted-1: hsla( - var(--accent-h), - var(--accent-s), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85), - var(--fg-muted-1-opacity) - ); - --fg-muted-2: hsla( - var(--accent-h), - var(--accent-s), - calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85), - var(--fg-muted-2-opacity) - ); - --glass-bg-1: hsla( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.6), - calc(var(--accent-l) - var(--accent-l) * 0.8), - var(--dim-opacity) - ); - --glass-bg-2: hsla( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.5), - calc(var(--accent-l) - var(--accent-l) * 0.7), - var(--dim-opacity) - ); - --crt-bg: radial-gradient( - hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.5), - calc(var(--accent-l) - var(--accent-l) * 0.7) - ), - hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.5), - calc(var(--accent-l) - var(--accent-l) * 0.9) - ) - 80%, - hsl( - var(--accent-h), - calc(var(--accent-s) - var(--accent-s) * 0.5), - calc(var(--accent-l) - var(--accent-l) * 0.95) - ) - ); - } @else if $mode == "common" { - // COLORS - --accent-highlight: hsla( - var(--accent-h), - var(--accent-s), - var(--accent-l), - var(--disabled-opacity) - ); + --bg-color: hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.7), + calc(var(--accent-l) - var(--accent-l) * 0.9) + ); + --fg-muted-1: hsla( + var(--accent-h), + var(--accent-s), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85), + var(--fg-muted-1-opacity) + ); + --fg-muted-2: hsla( + var(--accent-h), + var(--accent-s), + calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85), + var(--fg-muted-2-opacity) + ); + --glass-bg-1: hsla( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.6), + calc(var(--accent-l) - var(--accent-l) * 0.8), + var(--dim-opacity) + ); + --glass-bg-2: hsla( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.5), + calc(var(--accent-l) - var(--accent-l) * 0.7), + var(--dim-opacity) + ); + --crt-bg: radial-gradient( + hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.5), + calc(var(--accent-l) - var(--accent-l) * 0.7) + ), + hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.5), + calc(var(--accent-l) - var(--accent-l) * 0.9) + ) + 80%, + hsl( + var(--accent-h), + calc(var(--accent-s) - var(--accent-s) * 0.5), + calc(var(--accent-l) - var(--accent-l) * 0.95) + ) + ); + } @else if $mode == "common" { + // COLORS + --accent-highlight: hsla( + var(--accent-h), + var(--accent-s), + var(--accent-l), + var(--disabled-opacity) + ); - // TODO: put this all in sub-mixins - --bg-muted-1: hsla( - var(--accent-h), - var(--accent-s), - var(--accent-l), - var(--color-opacity-1) - ); + // TODO: put this all in sub-mixins + --bg-muted-1: hsla( + var(--accent-h), + var(--accent-s), + var(--accent-l), + var(--color-opacity-1) + ); - --bg-muted-2: hsla( - var(--accent-h), - var(--accent-s), - var(--accent-l), - var(--color-opacity-2) - ); + --bg-muted-2: hsla( + var(--accent-h), + var(--accent-s), + var(--accent-l), + var(--color-opacity-2) + ); - // CONTRAST COLOR - --l: clamp(0, (l / 0.623 - 1) * -infinity, 1); - --a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l)))); - --contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a)); + // CONTRAST COLOR + --l: clamp(0, (l / 0.623 - 1) * -infinity, 1); + --a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l)))); + --contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a)); - // SHADOWS - --shadow-glow: - 0 0 0 #{rpx(1)} var(--bg-muted-2), - 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} var(--bg-muted-1), - 0 #{rpx(4)} #{rpx(24)} #{rpx(4)} var(--bg-muted-2); - --shadow-glow-inset: - inset 0 0 0 #{rpx(1)} var(--bg-muted-2), - inset 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} var(--bg-muted-1), - inset 0 #{rpx(4)} #{rpx(24)} #{rpx(4)} var(--bg-muted-2); - --text-shadow-glow: - var(--bg-muted-2) 0 0 #{rpx(4)}, var(--accent-color) 0 0 #{rpx(12)}; - } - } + // SHADOWS + --shadow-glow: 0 0 0 #{rpx(1)} var(--bg-muted-2), + 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} var(--bg-muted-1), + 0 #{rpx(4)} #{rpx(24)} #{rpx(4)} var(--bg-muted-2); + --shadow-glow-inset: inset 0 0 0 #{rpx(1)} var(--bg-muted-2), + inset 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} var(--bg-muted-1), + inset 0 #{rpx(4)} #{rpx(24)} #{rpx(4)} var(--bg-muted-2); + --text-shadow-glow: var(--bg-muted-2) 0 0 #{rpx(4)}, var( + --accent-color + ) 0 0 #{rpx(12)}; + } + } } diff --git a/sass/citrine/base/_animations.scss b/sass/citrine/base/_animations.scss index 1c61ed2..18cd3a1 100644 --- a/sass/citrine/base/_animations.scss +++ b/sass/citrine/base/_animations.scss @@ -1,83 +1,83 @@ @keyframes slide-in-up { - from { - transform: translateY(-1rem); - opacity: 0; - } + from { + transform: translateY(-1rem); + opacity: 0; + } } @keyframes slide-in-left { - from { - transform: translateX(1rem); - opacity: 0; - } + from { + transform: translateX(1rem); + opacity: 0; + } } @keyframes slide-in-right { - from { - transform: translateX(-1rem); - opacity: 0; - } + from { + transform: translateX(-1rem); + opacity: 0; + } } @keyframes slide-in-up-longer { - from { - transform: translateY(-2rem); - opacity: 0; - } + from { + transform: translateY(-2rem); + opacity: 0; + } } @keyframes slide-in-down-longer { - from { - transform: translateY(2rem); - opacity: 0; - } + from { + transform: translateY(2rem); + opacity: 0; + } } @keyframes slide-in-left-longer { - from { - transform: translateX(-2rem); - opacity: 0; - } + from { + transform: translateX(-2rem); + opacity: 0; + } } @keyframes slide-in-right-longer { - from { - transform: translateX(2rem); - opacity: 0; - } + from { + transform: translateX(2rem); + opacity: 0; + } } @keyframes slide-out-down-longer { - to { - transform: translateY(-2rem); - opacity: 0; - } + to { + transform: translateY(-2rem); + opacity: 0; + } } @keyframes expand-up-left { - from { - transform: scale(0.5) translate(-1rem, -1rem); - opacity: 0; - } + from { + transform: scale(0.5) translate(-1rem, -1rem); + opacity: 0; + } } @keyframes expand-up-right { - from { - transform: scale(0.5) translate(1rem, -1rem); - opacity: 0; - } + from { + transform: scale(0.5) translate(1rem, -1rem); + opacity: 0; + } } @keyframes expand-down-left { - from { - transform: scale(0.5) translate(-1rem, 1rem); - opacity: 0; - } + from { + transform: scale(0.5) translate(-1rem, 1rem); + opacity: 0; + } } @keyframes expand-down-right { - from { - transform: scale(0.5) translate(1rem, 1rem); - opacity: 0; - } + from { + transform: scale(0.5) translate(1rem, 1rem); + opacity: 0; + } } diff --git a/sass/citrine/base/_base.scss b/sass/citrine/base/_base.scss index 01ea5eb..9908737 100644 --- a/sass/citrine/base/_base.scss +++ b/sass/citrine/base/_base.scss @@ -2,58 +2,58 @@ // Make focused anchor not get covered by header :target:not(#main-content) { - scroll-margin-block-start: 6.5rem; + scroll-margin-block-start: 6.5rem; } :focus-visible, :target:not(#main-content) { - animation: focus-in var(--transition); - outline: 0.125rem solid var(--accent-color); - outline-offset: 0.125rem; + animation: focus-in var(--transition); + outline: 0.125rem solid var(--accent-color); + outline-offset: 0.125rem; - @keyframes focus-in { - from { - outline: 0.5rem solid transparent; - outline-offset: 0.25rem; - } - } + @keyframes focus-in { + from { + outline: 0.5rem solid transparent; + outline-offset: 0.25rem; + } + } } // Style text selection to use accent color ::selection { - background-color: var(--accent-color); - color: var(--contrast-color); + background-color: var(--accent-color); + color: var(--contrast-color); } body { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background-color: var(--bg-color); - color: var(--fg-color); - font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji); - overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: var(--bg-color); + color: var(--fg-color); + font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji); + overflow-wrap: break-word; - @supports (min-height: 100dvh) { - min-height: 100dvh; - } + @supports (min-height: 100dvh) { + min-height: 100dvh; + } } @media (prefers-reduced-motion) { - *, - *::before, - *::after { - animation-duration: 0s !important; - transition-duration: 0s !important; - } + *, + *::before, + *::after { + animation-duration: 0s !important; + transition-duration: 0s !important; + } } // Disable blur on Firefox Mobile @-moz-document url-prefix() { - @media only screen and (max-width: 960px) { - .firefox-unblur, - .firefox-unblur::before, - .firefox-unblur::after { - backdrop-filter: none !important; - } - } + @media only screen and (max-width: 960px) { + .firefox-unblur, + .firefox-unblur::before, + .firefox-unblur::after { + backdrop-filter: none !important; + } + } } diff --git a/sass/citrine/base/_layout.scss b/sass/citrine/base/_layout.scss index ffbe1e5..01cd500 100644 --- a/sass/citrine/base/_layout.scss +++ b/sass/citrine/base/_layout.scss @@ -3,34 +3,34 @@ body > main, body > nav, body > footer { - --padding: 1rem; - margin-inline: auto; - padding-inline: 1rem; - max-width: calc(var(--content-width) + var(--padding) * 2); + --padding: 1rem; + margin-inline: auto; + padding-inline: 1rem; + max-width: calc(var(--content-width) + var(--padding) * 2); } body > footer { - margin-block-start: 4rem; + margin-block-start: 4rem; } body > nav { - margin-block-end: 4rem; - border-block-end: rpx(1) solid var(--bg-muted-2); + margin-block-end: 4rem; + border-block-end: rpx(1) solid var(--bg-muted-2); - ul { - display: flex; - gap: 0.25rem; - margin-block: 0.625rem; - padding-inline-start: 0; - list-style: none; + ul { + display: flex; + gap: 0.25rem; + margin-block: 0.625rem; + padding-inline-start: 0; + list-style: none; - @media only screen and (max-width: 480px) { - flex-direction: column; - } - } + @media only screen and (max-width: 480px) { + flex-direction: column; + } + } - li { - margin-block: 0; - padding-inline-start: 0; - } + li { + margin-block: 0; + padding-inline-start: 0; + } } diff --git a/sass/citrine/base/_reset.scss b/sass/citrine/base/_reset.scss index 2365866..68c8c87 100644 --- a/sass/citrine/base/_reset.scss +++ b/sass/citrine/base/_reset.scss @@ -4,28 +4,28 @@ *, :after, :before { - vertical-align: baseline; - box-sizing: border-box; - margin: 0; - border: none; - background: none; - padding: 0; - color: inherit; - font: inherit; - -webkit-tap-highlight-color: transparent; + vertical-align: baseline; + box-sizing: border-box; + margin: 0; + border: none; + background: none; + padding: 0; + color: inherit; + font: inherit; + -webkit-tap-highlight-color: transparent; } button, select { - appearance: none; + appearance: none; } body { - -webkit-text-size-adjust: none; - text-size-adjust: none; - width: 100%; - min-height: 100vh; - line-height: 1.5; + -webkit-text-size-adjust: none; + text-size-adjust: none; + width: 100%; + min-height: 100vh; + line-height: 1.5; } a, @@ -42,7 +42,7 @@ input[type="reset"], input[type="submit"], label, select { - cursor: pointer; + cursor: pointer; } article, @@ -60,7 +60,7 @@ rt, ruby, section, summary { - display: block; + display: block; } bdi, @@ -69,14 +69,14 @@ meter, output, progress, time { - display: inline-block; + display: inline-block; } [hidden], datalist, dialog:not([open]), rp { - display: none !important; + display: none !important; } embed, @@ -86,50 +86,50 @@ object, picture, svg, video { - display: block; - max-width: 100%; - height: auto; + display: block; + max-width: 100%; + height: auto; } blockquote, q { - quotes: none; + quotes: none; } blockquote:after, blockquote:before, q:after, q:before { - content: none; + content: none; } strong { - font-weight: 700; + font-weight: 700; } em { - font-style: italic; + font-style: italic; } code, kbd, pre, samp { - font-family: monospace; + font-family: monospace; } sub { - vertical-align: sub; + vertical-align: sub; } sup { - vertical-align: super; + vertical-align: super; } small { - font-size: small; + font-size: small; } table { - border-collapse: collapse; + border-collapse: collapse; } diff --git a/sass/citrine/base/_root.scss b/sass/citrine/base/_root.scss index e245c1d..5cb1ff3 100644 --- a/sass/citrine/base/_root.scss +++ b/sass/citrine/base/_root.scss @@ -1,20 +1,20 @@ @use "../abstracts/variables" as *; :root { - @include variables(("light", "common")); - @include variables-accent(("light", "common")); - scrollbar-color: var(--accent-color) transparent; - accent-color: var(--accent-color); + @include variables(("light", "common")); + @include variables-accent(("light", "common")); + scrollbar-color: var(--accent-color) transparent; + accent-color: var(--accent-color); - @media (prefers-reduced-motion: no-preference) { - scroll-behavior: smooth; - } + @media (prefers-reduced-motion: no-preference) { + scroll-behavior: smooth; + } - @media (prefers-color-scheme: dark) { - & { - @include variables("dark"); - @include variables-accent(("dark")); - color-scheme: dark; - } - } + @media (prefers-color-scheme: dark) { + & { + @include variables("dark"); + @include variables-accent(("dark")); + color-scheme: dark; + } + } } diff --git a/sass/citrine/base/_typography.scss b/sass/citrine/base/_typography.scss index 0415adb..d32dc5b 100644 --- a/sass/citrine/base/_typography.scss +++ b/sass/citrine/base/_typography.scss @@ -7,25 +7,25 @@ ol, dl, blockquote, pre { - margin-block: 1rem; + margin-block: 1rem; } ul ul, ul ol, ol ul, ol ol { - margin-block: 0; + margin-block: 0; } p { - text-wrap: pretty; - overflow-wrap: break-word; + text-wrap: pretty; + overflow-wrap: break-word; } :disabled, [aria-disabled="true"] { - opacity: var(--disabled-opacity); - cursor: not-allowed; + opacity: var(--disabled-opacity); + cursor: not-allowed; } h1, @@ -34,367 +34,363 @@ h3, h4, h5, h6 { - transition-duration: var(--transition); - transition-property: text-shadow, font-weight; - margin-block: 2rem 1rem; - color: var(--accent-color); - font-weight: var(--font-weight-bold); - line-height: 1; - font-variation-settings: "FLAR" 100; - letter-spacing: -0.05em; - text-decoration: underline; - text-decoration-color: var(--bg-muted-1); - text-decoration-thickness: 0.125em; - text-wrap: balance; - overflow-wrap: break-word; + transition-duration: var(--transition); + transition-property: text-shadow, font-weight; + margin-block: 2rem 1rem; + color: var(--accent-color); + font-weight: var(--font-weight-bold); + line-height: 1; + font-variation-settings: "FLAR" 100; + letter-spacing: -0.05em; + text-decoration: underline; + text-decoration-color: var(--bg-muted-1); + text-decoration-thickness: 0.125em; + text-wrap: balance; + overflow-wrap: break-word; - &:target { - animation: none !important; - outline: none !important; - font-weight: var(--font-weight-light); - text-shadow: var(--text-shadow-glow); - } + &:target { + animation: none !important; + outline: none !important; + font-weight: var(--font-weight-light); + text-shadow: var(--text-shadow-glow); + } } h1 { - font-size: var(--font-size-xxx-large); + font-size: var(--font-size-xxx-large); } h2 { - font-size: var(--font-size-xx-large); + font-size: var(--font-size-xx-large); } h3 { - font-size: var(--font-size-x-large); + font-size: var(--font-size-x-large); } h4 { - font-size: var(--font-size-large); + font-size: var(--font-size-large); } h5 { - font-size: var(--font-size-medium); + font-size: var(--font-size-medium); } h6 { - font-size: var(--font-size-small); + font-size: var(--font-size-small); } @media only screen and (max-width: 480px) { - h1 { - font-size: var(--font-size-xx-large); - } + h1 { + font-size: var(--font-size-xx-large); + } - h2 { - font-size: var(--font-size-x-large); - } + h2 { + font-size: var(--font-size-x-large); + } - h3 { - font-size: var(--font-size-large); - } + h3 { + font-size: var(--font-size-large); + } - h4 { - font-size: var(--font-size-medium); - } + h4 { + font-size: var(--font-size-medium); + } - h5 { - font-size: var(--font-size-small); - } + h5 { + font-size: var(--font-size-small); + } - h6 { - font-size: var(--font-size-x-small); - } + h6 { + font-size: var(--font-size-x-small); + } } small { - color: var(--fg-muted-2); - font-size: var(--font-size-small); + color: var(--fg-muted-2); + font-size: var(--font-size-small); } abbr[title] { - cursor: help; - text-decoration: underline; - text-decoration-style: dotted; - text-decoration-thickness: rpx(1); + cursor: help; + text-decoration: underline; + text-decoration-style: dotted; + text-decoration-thickness: rpx(1); } figcaption { - color: var(--fg-muted-2); - font-size: var(--font-size-small); - text-align: center; + color: var(--fg-muted-2); + font-size: var(--font-size-small); + text-align: center; } blockquote { - margin: 1rem 0; - border-inline-start: 0.25rem solid var(--accent-color); - border-start-start-radius: 0.25rem; - border-end-start-radius: 0.25rem; - padding-inline-start: 0.75rem; - color: var(--fg-muted-2); + margin: 1rem 0; + border-inline-start: 0.25rem solid var(--accent-color); + border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; + padding-inline-start: 0.75rem; + color: var(--fg-muted-2); } pre, code, kbd, samp { - font-family: var(--font-monospace), var(--font-ui-monospace); + font-family: var(--font-monospace), var(--font-ui-monospace); } pre { - margin: 1rem 0; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 0.75rem 1rem; - overflow-x: auto; - scrollbar-width: thin; - line-height: 1.25; + margin: 1rem 0; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 0.75rem 1rem; + overflow-x: auto; + scrollbar-width: thin; + line-height: 1.25; } code:not(pre code), mark, samp, q { - @include chip; + @include chip; } code:not(pre code) { - background-color: var(--red-bg-1); - padding-block: rpx(3); - color: var(--red-fg); - font-size: var(--font-size-small); + background-color: var(--red-bg-1); + padding-block: rpx(3); + color: var(--red-fg); + font-size: var(--font-size-small); } mark { - color: var(--accent-color); + color: var(--accent-color); } del { - color: var(--red-fg); - text-decoration: line-through; - text-decoration-thickness: rpx(1); + color: var(--red-fg); + text-decoration: line-through; + text-decoration-thickness: rpx(1); } ins { - color: var(--green-fg); - text-decoration: underline; - text-decoration-thickness: rpx(1); + color: var(--green-fg); + text-decoration: underline; + text-decoration-thickness: rpx(1); } samp { - color: var(--fg-muted-2); - font-size: var(--font-size-small); + color: var(--fg-muted-2); + font-size: var(--font-size-small); } q { - color: var(--fg-muted-2); - font-style: italic; + color: var(--fg-muted-2); + font-style: italic; } u { - text-decoration: underline; - text-decoration-style: wavy; - text-decoration-color: var(--red-fg); - text-decoration-thickness: rpx(1); + text-decoration: underline; + text-decoration-style: wavy; + text-decoration-color: var(--red-fg); + text-decoration-thickness: rpx(1); } progress { - appearance: none; - box-shadow: var(--edge-highlight); - border: none; - border-radius: 9999px; - background-color: var(--bg-muted-1); - padding: 0.25rem; - width: 100%; - height: 1rem; - color: var(--accent-color); + appearance: none; + box-shadow: var(--edge-highlight); + border: none; + border-radius: 9999px; + background-color: var(--bg-muted-1); + padding: 0.25rem; + width: 100%; + height: 1rem; + color: var(--accent-color); - &:indeterminate { - background-color: var(--bg-muted-1); - } + &:indeterminate { + background-color: var(--bg-muted-1); + } - &:indeterminate::-moz-progress-bar { - background-color: transparent; - } + &:indeterminate::-moz-progress-bar { + background-color: transparent; + } - &::-webkit-progress-bar { - background-color: transparent; - } + &::-webkit-progress-bar { + background-color: transparent; + } - &::-moz-progress-bar { - border-radius: 9999px; - background-color: var(--accent-color); - } + &::-moz-progress-bar { + border-radius: 9999px; + background-color: var(--accent-color); + } - &::-webkit-progress-value { - border-radius: 9999px; - background-color: var(--accent-color); - } + &::-webkit-progress-value { + border-radius: 9999px; + background-color: var(--accent-color); + } } kbd { - display: inline-block; - transition-duration: var(--transition); - transition-property: transform, box-shadow, background-color; - cursor: pointer; - box-shadow: - var(--edge-highlight), - inset 0 -0.125rem 0 var(--bg-muted-2); - border-radius: var(--rounded-corner-small); - background-color: var(--bg-muted-1); - padding: 0 0.375rem; - font-size: var(--font-size-small); + display: inline-block; + transition-duration: var(--transition); + transition-property: transform, box-shadow, background-color; + cursor: pointer; + box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--bg-muted-2); + border-radius: var(--rounded-corner-small); + background-color: var(--bg-muted-1); + padding: 0 0.375rem; + font-size: var(--font-size-small); - // Small nice thingy, keys can be pressed! - &:active { - transform: translateY(0.125rem); - box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2); - background-color: var(--bg-muted-2); - } + // Small nice thingy, keys can be pressed! + &:active { + transform: translateY(0.125rem); + box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2); + background-color: var(--bg-muted-2); + } } a { - color: var(--accent-color); - font-weight: var(--font-weight-semi-bold); - text-decoration-color: var(--accent-highlight); - text-decoration-thickness: rpx(1); + color: var(--accent-color); + font-weight: var(--font-weight-semi-bold); + text-decoration-color: var(--accent-highlight); + text-decoration-thickness: rpx(1); - &:hover { - text-decoration-style: wavy; - } + &:hover { + text-decoration-style: wavy; + } } hr { - margin: 2rem auto; - border: 0.125rem solid var(--bg-muted-2); - border-radius: 9999px; + margin: 2rem auto; + border: 0.125rem solid var(--bg-muted-2); + border-radius: 9999px; } dt { - font-weight: var(--font-weight-semi-bold); + font-weight: var(--font-weight-semi-bold); } dd { - margin-inline-start: 1.5rem; - margin-block-end: 1rem; + margin-inline-start: 1.5rem; + margin-block-end: 1rem; } aside { - float: inline-end; - margin-inline-start: 1rem; - margin-block-end: 1rem; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 1rem; - width: calc(var(--content-width) / 3); + float: inline-end; + margin-inline-start: 1rem; + margin-block-end: 1rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 1rem; + width: calc(var(--content-width) / 3); - @media only screen and (max-width: 720px) { - float: none; - margin-inline-start: 0; - width: 100%; - } + @media only screen and (max-width: 720px) { + float: none; + margin-inline-start: 0; + width: 100%; + } - :first-child { - margin-block-start: 0; - } + :first-child { + margin-block-start: 0; + } - :last-child { - margin-block-end: 0; - } + :last-child { + margin-block-end: 0; + } } details { - display: flow-root; - transition: padding-block-end var(--transition); - margin-block-end: 1rem; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 0.75rem 1rem; + display: flow-root; + transition: padding-block-end var(--transition); + margin-block-end: 1rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 0.75rem 1rem; - &::details-content { - display: block; - opacity: 0; - transition-behavior: allow-discrete; - transition-duration: var(--transition); - transition-property: opacity, block-size, content-visibility; - block-size: 0; - overflow: hidden; - } + &::details-content { + display: block; + opacity: 0; + transition-behavior: allow-discrete; + transition-duration: var(--transition); + transition-property: opacity, block-size, content-visibility; + block-size: 0; + overflow: hidden; + } - &[open] { - padding-block-end: 1rem; + &[open] { + padding-block-end: 1rem; - &::details-content { - opacity: 1; - block-size: auto; - block-size: calc-size(auto, size); - } + &::details-content { + opacity: 1; + block-size: auto; + block-size: calc-size(auto, size); + } - summary { - color: var(--accent-color); + summary { + color: var(--accent-color); - &::before { - transform: scaleY(-1); - } + &::before { + transform: scaleY(-1); + } - @supports not (block-size: calc-size(auto, size)) { - & ~ * { - animation: slide-in-up var(--transition-bezier); - } - } - } - } + @supports not (block-size: calc-size(auto, size)) { + & ~ * { + animation: slide-in-up var(--transition-bezier); + } + } + } + } - summary { - transition: var(--transition); - color: var(--fg-muted-1); - font-weight: var(--font-weight-semi-bold); - list-style: none; + summary { + transition: var(--transition); + color: var(--fg-muted-1); + font-weight: var(--font-weight-semi-bold); + list-style: none; - &::-webkit-details-marker { - display: none; - } + &::-webkit-details-marker { + display: none; + } - &::before { - @include icon(pseudo); - --icon: var(--icon-caret-down); - display: inline-block; - vertical-align: rpx(-2); - transition: - all var(--transition), - transform var(--transition-bezier); - margin-inline-end: 0.25rem; - } - } + &::before { + @include icon(pseudo); + --icon: var(--icon-caret-down); + display: inline-block; + vertical-align: rpx(-2); + transition: all var(--transition), transform var(--transition-bezier); + margin-inline-end: 0.25rem; + } + } - & > :last-child, - & > :last-child img { - margin-block-end: 0; - } + & > :last-child, + & > :last-child img { + margin-block-end: 0; + } } figure { - margin-inline: 0; + margin-inline: 0; } ol, ul { - padding-inline-start: 1.5rem; + padding-inline-start: 1.5rem; } li { - margin-block: 0.25rem; - padding-inline-start: 0.25rem; + margin-block: 0.25rem; + padding-inline-start: 0.25rem; - &::marker { - color: var(--accent-color); - font-weight: var(--font-weight-semi-bold); - } + &::marker { + color: var(--accent-color); + font-weight: var(--font-weight-semi-bold); + } } b, strong { - font-weight: var(--font-weight-semi-bold); + font-weight: var(--font-weight-semi-bold); } diff --git a/sass/citrine/components/_buttons.scss b/sass/citrine/components/_buttons.scss index 9667b7e..d34526b 100644 --- a/sass/citrine/components/_buttons.scss +++ b/sass/citrine/components/_buttons.scss @@ -1,100 +1,100 @@ @use "../abstracts/mixins" as *; .buttons { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - gap: 0.25rem; - margin-block-start: 2rem; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 0.25rem; + margin-block-start: 2rem; - &.centered { - justify-content: center; - } + &.centered { + justify-content: center; + } - &.start { - justify-content: flex-start; - } + &.start { + justify-content: flex-start; + } - &.end { - justify-content: flex-end; - } + &.end { + justify-content: flex-end; + } - &.big { - gap: 0.5rem; - } + &.big { + gap: 0.5rem; + } } .buttons a, a.button, button { - display: inline-block; - transition: - background-color var(--transition), - color var(--transition), - box-shadow var(--transition), - transform var(--transition-bezier); - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 0.5rem 1rem; - color: var(--fg-muted-1); - font-weight: var(--font-weight-semi-bold); - font-size: var(--font-size-small); - line-height: 1.5rem; - text-decoration: none; + display: inline-block; + transition: + background-color var(--transition), + color var(--transition), + box-shadow var(--transition), + transform var(--transition-bezier); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 0.5rem 1rem; + color: var(--fg-muted-1); + font-weight: var(--font-weight-semi-bold); + font-size: var(--font-size-small); + line-height: 1.5rem; + text-decoration: none; - &:not(:disabled, [aria-disabled="true"]):hover { - background-color: var(--bg-muted-2); - color: var(--fg-muted-2); - } + &:not(:disabled, [aria-disabled="true"]):hover { + background-color: var(--bg-muted-2); + color: var(--fg-muted-2); + } - &:not(:disabled, [aria-disabled="true"]):active { - transform: var(--active); - } + &:not(:disabled, [aria-disabled="true"]):active { + transform: var(--active); + } - &.suggested { - @include gradient-fill; + &.suggested { + @include gradient-fill; - &:not(:disabled, [aria-disabled="true"]):hover { - @include gradient-fill(hover); - } - } + &:not(:disabled, [aria-disabled="true"]):hover { + @include gradient-fill(hover); + } + } - &.subtle { - box-shadow: none; - background-color: transparent; + &.subtle { + box-shadow: none; + background-color: transparent; - &:not(:disabled, [aria-disabled="true"]):hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - color: var(--fg-muted-2); - } - } + &:not(:disabled, [aria-disabled="true"]):hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + color: var(--fg-muted-2); + } + } - &[aria-busy="true"] { - animation: progress-shimmer var(--transition-long) ease-in-out alternate - infinite; - background-image: linear-gradient( - to right, - transparent 50%, - var(--bg-muted-1) 75%, - transparent 100% - ); - background-size: 200%; + &[aria-busy="true"] { + animation: progress-shimmer var(--transition-long) ease-in-out alternate + infinite; + background-image: linear-gradient( + to right, + transparent 50%, + var(--bg-muted-1) 75%, + transparent 100% + ); + background-size: 200%; - @keyframes progress-shimmer { - to { - background-position-x: -200%; - } - } - } + @keyframes progress-shimmer { + to { + background-position-x: -200%; + } + } + } } .buttons.big a, .buttons.big button, a.button.big, button.big { - border-radius: 9999px; - padding: 0.625rem 1.25rem; + border-radius: 9999px; + padding: 0.625rem 1.25rem; } diff --git a/sass/citrine/components/_card.scss b/sass/citrine/components/_card.scss index 6b39ea9..bd58534 100644 --- a/sass/citrine/components/_card.scss +++ b/sass/citrine/components/_card.scss @@ -1,5 +1,5 @@ @use "../abstracts/mixins" as *; .card { - @include card; + @include card; } diff --git a/sass/citrine/components/_crt.scss b/sass/citrine/components/_crt.scss index 5ea199c..c94f517 100644 --- a/sass/citrine/components/_crt.scss +++ b/sass/citrine/components/_crt.scss @@ -1,90 +1,90 @@ .crt, pre:has(code[data-crt], code[data-lang=""]) { - position: relative; - animation: flicker 0.25s alternate infinite; - margin-inline: auto; - box-shadow: var(--shadow-glow); - background-image: var(--crt-bg); - background-color: transparent !important; - padding: 0; - width: fit-content; - max-width: 100%; - overflow: hidden; - color: var(--accent-color) !important; - font-weight: var(--font-weight-medium); - text-shadow: var(--text-shadow-glow); + position: relative; + animation: flicker 0.25s alternate infinite; + margin-inline: auto; + box-shadow: var(--shadow-glow); + background-image: var(--crt-bg); + background-color: transparent !important; + padding: 0; + width: fit-content; + max-width: 100%; + overflow: hidden; + color: var(--accent-color) !important; + font-weight: var(--font-weight-medium); + text-shadow: var(--text-shadow-glow); - @keyframes flicker { - 25% { - opacity: 0.95; - } + @keyframes flicker { + 25% { + opacity: 0.95; + } - 50% { - opacity: 0.85; - } + 50% { + opacity: 0.85; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - to { - opacity: 0.9; - } - } + to { + opacity: 0.9; + } + } - &::before, - &::after { - position: absolute; - inset: 0; - content: ""; - } + &::before, + &::after { + position: absolute; + inset: 0; + content: ""; + } - &::before { - opacity: var(--scanlines-opacity); - z-index: 1; - animation: scanlines 0.1s linear infinite; - background-image: repeating-linear-gradient( - to bottom, - rgba(0, 0, 0, 0.25), - rgba(0, 0, 0, 0.25) 0.125rem, - transparent 0.125rem, - transparent 0.25rem - ); - background-position-y: -0.125rem; - background-repeat: no-repeat; - pointer-events: none; + &::before { + opacity: var(--scanlines-opacity); + z-index: 1; + animation: scanlines 0.1s linear infinite; + background-image: repeating-linear-gradient( + to bottom, + rgba(0, 0, 0, 0.25), + rgba(0, 0, 0, 0.25) 0.125rem, + transparent 0.125rem, + transparent 0.25rem + ); + background-position-y: -0.125rem; + background-repeat: no-repeat; + pointer-events: none; - @keyframes scanlines { - to { - background-position-y: 0.125rem; - } - } - } + @keyframes scanlines { + to { + background-position-y: 0.125rem; + } + } + } - &::after { - opacity: 0.05; - animation: scanline 5s linear infinite; - background-image: linear-gradient( - to bottom, - transparent, - var(--accent-color) 16rem - ); - background-position-y: -16rem; - background-size: 100% 16rem; - pointer-events: none; + &::after { + opacity: 0.05; + animation: scanline 5s linear infinite; + background-image: linear-gradient( + to bottom, + transparent, + var(--accent-color) 16rem + ); + background-position-y: -16rem; + background-size: 100% 16rem; + pointer-events: none; - @keyframes scanline { - to { - background-position-y: calc(100% + 16rem); - } - } - } + @keyframes scanline { + to { + background-position-y: calc(100% + 16rem); + } + } + } - & > code { - display: block; - border-radius: inherit; - padding: 0.75rem 1rem; - overflow-x: auto; - scrollbar-width: thin; - } + & > code { + display: block; + border-radius: inherit; + padding: 0.75rem 1rem; + overflow-x: auto; + scrollbar-width: thin; + } } diff --git a/sass/citrine/components/_external.scss b/sass/citrine/components/_external.scss index 494f317..a26a1da 100644 --- a/sass/citrine/components/_external.scss +++ b/sass/citrine/components/_external.scss @@ -2,11 +2,11 @@ @use "../abstracts/mixins" as *; a.external:not(:has(img, svg, video, picture, figure))::after { - @include icon(pseudo); - --icon: var(--icon-arrow-square-out); - display: inline-block; - vertical-align: -0.125rem; - opacity: var(--dim-opacity); - margin-inline-start: 0.125rem; - font-size: max(1rem, 1em); + @include icon(pseudo); + --icon: var(--icon-arrow-square-out); + display: inline-block; + vertical-align: -0.125rem; + opacity: var(--dim-opacity); + margin-inline-start: 0.125rem; + font-size: max(1rem, 1em); } diff --git a/sass/citrine/components/_iframe.scss b/sass/citrine/components/_iframe.scss index 2334efe..169b895 100644 --- a/sass/citrine/components/_iframe.scss +++ b/sass/citrine/components/_iframe.scss @@ -1,20 +1,20 @@ iframe { - display: block; - margin: 1rem auto; - box-shadow: var(--edge-highlight), var(--shadow); - border: none; - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - width: 100%; - max-width: 100%; + display: block; + margin: 1rem auto; + box-shadow: var(--edge-highlight), var(--shadow); + border: none; + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + width: 100%; + max-width: 100%; - &:fullscreen { - box-shadow: none; - border-radius: 0; - } + &:fullscreen { + box-shadow: none; + border-radius: 0; + } - &:-webkit-full-screen { - box-shadow: none; - border-radius: 0; - } + &:-webkit-full-screen { + box-shadow: none; + border-radius: 0; + } } diff --git a/sass/citrine/components/_input.scss b/sass/citrine/components/_input.scss index d696a13..c87b8ef 100644 --- a/sass/citrine/components/_input.scss +++ b/sass/citrine/components/_input.scss @@ -1,8 +1,8 @@ @use "../abstracts/mixins" as *; input { - appearance: none; - background-color: var(--bg-muted-1); + appearance: none; + background-color: var(--bg-muted-1); } input:not([type]), @@ -10,252 +10,250 @@ input[type="text"], input[type="search"], input[type="password"], input[type="submit"] { - box-shadow: var(--edge-highlight); - border: none; - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - font-size: inherit; - line-height: inherit; - font-family: inherit; + box-shadow: var(--edge-highlight); + border: none; + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + font-size: inherit; + line-height: inherit; + font-family: inherit; } input:not([type]), input[type="text"], input[type="search"], input[type="password"] { - padding: 0.5rem 0.75rem; - width: 100%; + padding: 0.5rem 0.75rem; + width: 100%; - &::placeholder { - opacity: 1; - color: var(--fg-muted-1); - } + &::placeholder { + opacity: 1; + color: var(--fg-muted-1); + } } input[type="submit"] { - transition: - background-color var(--transition), - transform var(--transition-bezier); - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - padding: 0.375rem 0.75rem; - color: var(--fg-muted-1); - font-weight: var(--font-weight-semi-bold); - font-size: var(--font-size-small); + transition: + background-color var(--transition), + transform var(--transition-bezier); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + padding: 0.375rem 0.75rem; + color: var(--fg-muted-1); + font-weight: var(--font-weight-semi-bold); + font-size: var(--font-size-small); - &:enabled:hover { - background-color: var(--bg-muted-2); - } + &:enabled:hover { + background-color: var(--bg-muted-2); + } - &:enabled:active { - transform: var(--active); - } + &:enabled:active { + transform: var(--active); + } } input[type="radio"], input[type="checkbox"], input[type="color"] { - position: relative; - transition: background-color var(--transition); - border: 0.125rem solid var(--bg-muted-2); - width: 1rem; - height: 1rem; + position: relative; + transition: background-color var(--transition); + border: 0.125rem solid var(--bg-muted-2); + width: 1rem; + height: 1rem; - &:not(:checked):enabled:hover { - background-color: var(--bg-muted-2); - } + &:not(:checked):enabled:hover { + background-color: var(--bg-muted-2); + } } input[type="radio"], input[type="checkbox"] { - vertical-align: -0.125em; - margin-inline-end: 0.25rem; + vertical-align: -0.125em; + margin-inline-end: 0.25rem; - &::before { - display: block; - position: absolute; - transform: scale(0.5); - opacity: 0; - transition: - opacity var(--transition), - transform var(--transition-bezier); - content: ""; - } + &::before { + display: block; + position: absolute; + transform: scale(0.5); + opacity: 0; + transition: opacity var(--transition), transform var(--transition-bezier); + content: ""; + } - &:checked { - border: 0.15rem solid transparent; - background-color: var(--accent-color); + &:checked { + border: 0.15rem solid transparent; + background-color: var(--accent-color); - &::before { - transform: scale(1); - opacity: 1; - } - } + &::before { + transform: scale(1); + opacity: 1; + } + } } input[type="radio"] { - border-radius: 50%; + border-radius: 50%; - &::before { - inset-block-start: 0.125rem; - inset-inline-start: 0.125rem; - border-radius: 50%; - background-color: var(--contrast-color); - width: 0.5rem; - height: 0.5rem; - } + &::before { + inset-block-start: 0.125rem; + inset-inline-start: 0.125rem; + border-radius: 50%; + background-color: var(--contrast-color); + width: 0.5rem; + height: 0.5rem; + } } input[type="checkbox"] { - border-radius: calc(var(--rounded-corner-small) / 2); + border-radius: calc(var(--rounded-corner-small) / 2); - &::before { - @include icon(pseudo); - --icon: var(--icon-check); - transform-origin: bottom left; - inset-block-start: -0.125rem; - inset-inline-start: -0.125rem; - color: var(--contrast-color); - font-size: 1rem; - } + &::before { + @include icon(pseudo); + --icon: var(--icon-check); + transform-origin: bottom left; + inset-block-start: -0.125rem; + inset-inline-start: -0.125rem; + color: var(--contrast-color); + font-size: 1rem; + } - &.switch { - vertical-align: -0.375rem; - box-shadow: var(--edge-highlight); - border: none; - border-radius: 9999px; - width: 2.5rem; - height: 1.5rem; + &.switch { + vertical-align: -0.375rem; + box-shadow: var(--edge-highlight); + border: none; + border-radius: 9999px; + width: 2.5rem; + height: 1.5rem; - &.big { - vertical-align: -0.625rem; - width: 3rem; - height: 2rem; + &.big { + vertical-align: -0.625rem; + width: 3rem; + height: 2rem; - &::before { - width: 1.5rem; - height: 1.5rem; - } - } + &::before { + width: 1.5rem; + height: 1.5rem; + } + } - &::before { - transform: none; - transform-origin: center; - opacity: 1; - mask-image: none; - inset-block-start: 0.25rem; - inset-inline-start: 0.25rem; - box-shadow: var(--shadow); - border-radius: 50%; - background-color: white; - width: 1rem; - height: 1rem; - content: ""; - } + &::before { + transform: none; + transform-origin: center; + opacity: 1; + mask-image: none; + inset-block-start: 0.25rem; + inset-inline-start: 0.25rem; + box-shadow: var(--shadow); + border-radius: 50%; + background-color: white; + width: 1rem; + height: 1rem; + content: ""; + } - &:checked { - background-color: var(--accent-color); + &:checked { + background-color: var(--accent-color); - &::before { - transform: translateX(1rem); - background-color: var(--contrast-color); + &::before { + transform: translateX(1rem); + background-color: var(--contrast-color); - :root[dir*="rtl"] & { - transform: translateX(-1rem); - } - } - } + :root[dir*="rtl"] & { + transform: translateX(-1rem); + } + } + } - &:disabled::before { - box-shadow: none; - } - } + &:disabled::before { + box-shadow: none; + } + } } input[type="color"] { - vertical-align: -0.375em; - box-shadow: var(--edge-highlight); - border: none; - border-radius: var(--rounded-corner-small); - padding: 0.25rem; - width: 3rem; - height: 2rem; + vertical-align: -0.375em; + box-shadow: var(--edge-highlight); + border: none; + border-radius: var(--rounded-corner-small); + padding: 0.25rem; + width: 3rem; + height: 2rem; - &::-moz-color-swatch { - border: none; - border-radius: calc(var(--rounded-corner-small) - 0.25rem); - } + &::-moz-color-swatch { + border: none; + border-radius: calc(var(--rounded-corner-small) - 0.25rem); + } - &::-webkit-color-swatch-wrapper { - padding: 0; - } + &::-webkit-color-swatch-wrapper { + padding: 0; + } - &::-webkit-color-swatch { - border-radius: calc(var(--rounded-corner-small) - 0.25rem); - } + &::-webkit-color-swatch { + border-radius: calc(var(--rounded-corner-small) - 0.25rem); + } } input[type="range"] { - appearance: none; - box-shadow: var(--edge-highlight); - border-radius: 9999px; - background: var(--bg-muted-1); - padding: 0.5rem 0.25rem; - width: 100%; - height: 1rem; + appearance: none; + box-shadow: var(--edge-highlight); + border-radius: 9999px; + background: var(--bg-muted-1); + padding: 0.5rem 0.25rem; + width: 100%; + height: 1rem; - &::-webkit-slider-runnable-track { - cursor: pointer; - border-radius: 9999px; - background: var(--accent-color); - width: 100%; - } + &::-webkit-slider-runnable-track { + cursor: pointer; + border-radius: 9999px; + background: var(--accent-color); + width: 100%; + } - &::-moz-range-track { - cursor: pointer; - border-radius: 9999px; - background: var(--accent-color); - width: 100%; - height: 0.5rem; - } + &::-moz-range-track { + cursor: pointer; + border-radius: 9999px; + background: var(--accent-color); + width: 100%; + height: 0.5rem; + } - &::-webkit-slider-thumb { - appearance: none; - cursor: ew-resize; - margin-block: -0.5rem; - box-shadow: var(--shadow); - border: none; - border-radius: 0.25rem; - background-color: white; - width: 0.5rem; - height: 1.5rem; - } + &::-webkit-slider-thumb { + appearance: none; + cursor: ew-resize; + margin-block: -0.5rem; + box-shadow: var(--shadow); + border: none; + border-radius: 0.25rem; + background-color: white; + width: 0.5rem; + height: 1.5rem; + } - &::-moz-range-thumb { - appearance: none; - cursor: ew-resize; - margin-block: -0.5rem; - box-shadow: var(--shadow); - border: none; - border-radius: 0.25rem; - background-color: white; - width: 0.5rem; - height: 1.5rem; - } + &::-moz-range-thumb { + appearance: none; + cursor: ew-resize; + margin-block: -0.5rem; + box-shadow: var(--shadow); + border: none; + border-radius: 0.25rem; + background-color: white; + width: 0.5rem; + height: 1.5rem; + } - &.hollow { - &::-webkit-slider-thumb { - margin-block: 0; - outline: 0.25rem solid white; - background-color: transparent; - height: 0.5rem; - } + &.hollow { + &::-webkit-slider-thumb { + margin-block: 0; + outline: 0.25rem solid white; + background-color: transparent; + height: 0.5rem; + } - &::-moz-range-thumb { - margin-block: 0; - outline: 0.25rem solid white; - background-color: transparent; - height: 0.5rem; - } - } + &::-moz-range-thumb { + margin-block: 0; + outline: 0.25rem solid white; + background-color: transparent; + height: 0.5rem; + } + } } diff --git a/sass/citrine/components/_media.scss b/sass/citrine/components/_media.scss index 3409071..ca51dda 100644 --- a/sass/citrine/components/_media.scss +++ b/sass/citrine/components/_media.scss @@ -1,165 +1,165 @@ img, video { - display: block; - margin: 1rem auto; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - max-width: 100%; - max-height: calc(100vh - 2rem); + display: block; + margin: 1rem auto; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + max-width: 100%; + max-height: calc(100vh - 2rem); - &.full, - &[src*="#full"] { - width: 100%; - } + &.full, + &[src*="#full"] { + width: 100%; + } - &.start, - &.end, - &[src*="#start"], - &[src*="#end"] { - width: calc(var(--content-width) / 3); - } + &.start, + &.end, + &[src*="#start"], + &[src*="#end"] { + width: calc(var(--content-width) / 3); + } - &.start, - &[src*="#start"] { - float: inline-start; - transform-origin: left; - margin-inline-end: 1rem; + &.start, + &[src*="#start"] { + float: inline-start; + transform-origin: left; + margin-inline-end: 1rem; - :root[dir*="rtl"] & { - transform-origin: right; - } - } + :root[dir*="rtl"] & { + transform-origin: right; + } + } - &.end, - &[src*="#end"] { - float: inline-end; - transform-origin: right; - margin-inline-start: 1rem; + &.end, + &[src*="#end"] { + float: inline-end; + transform-origin: right; + margin-inline-start: 1rem; - :root[dir*="rtl"] & { - transform-origin: left; - } - } + :root[dir*="rtl"] & { + transform-origin: left; + } + } - &.pixels, - &[src*="#pixels"] { - image-rendering: pixelated; - } + &.pixels, + &[src*="#pixels"] { + image-rendering: pixelated; + } - &.has-alpha, - &[src*="#has-alpha"] { - box-shadow: none; - border-radius: 0; - background-color: transparent; - } + &.has-alpha, + &[src*="#has-alpha"] { + box-shadow: none; + border-radius: 0; + background-color: transparent; + } - &.drop-shadow, - &[src*="#drop-shadow"] { - filter: var(--drop-shadow); - } + &.drop-shadow, + &[src*="#drop-shadow"] { + filter: var(--drop-shadow); + } - &.spoiler, - &[src*="#spoiler"] { - opacity: var(--dim-opacity); - clip-path: inset(0 0 0 0 round var(--rounded-corner)); - filter: blur(1.5rem); + &.spoiler, + &[src*="#spoiler"] { + opacity: var(--dim-opacity); + clip-path: inset(0 0 0 0 round var(--rounded-corner)); + filter: blur(1.5rem); - &:hover, - &:active { - opacity: 1; - clip-path: inset( - -0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small) - ); - filter: none; - } + &:hover, + &:active { + opacity: 1; + clip-path: inset( + -0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small) + ); + filter: none; + } - &.solid, - &[src*="#solid"] { - clip-path: none; - filter: brightness(0) contrast(0.5); - box-shadow: none; + &.solid, + &[src*="#solid"] { + clip-path: none; + filter: brightness(0) contrast(0.5); + box-shadow: none; - &:hover, - &:active { - filter: none; - } - } - } + &:hover, + &:active { + filter: none; + } + } + } - @media only screen and (max-width: 720px) { - &.start, - &.end, - &[src*="#start"], - &[src*="#end"] { - float: none; - margin-inline-start: auto; - margin-inline-end: auto; - width: auto; - } - } + @media only screen and (max-width: 720px) { + &.start, + &.end, + &[src*="#start"], + &[src*="#end"] { + float: none; + margin-inline-start: auto; + margin-inline-end: auto; + width: auto; + } + } } img { - transition: - box-shadow var(--transition), - border-radius var(--transition), - transform var(--transition-bezier); + transition: + box-shadow var(--transition), + border-radius var(--transition), + transform var(--transition-bezier); - &:not(.no-hover, [src*="#no-hover"], .emoji) { - cursor: zoom-in; + &:not(.no-hover, [src*="#no-hover"], .emoji) { + cursor: zoom-in; - &:hover { - position: relative; - transform: var(--hover); - z-index: 1; - box-shadow: var(--edge-highlight), var(--shadow-raised); - border-radius: var(--rounded-corner-small); - } + &:hover { + position: relative; + transform: var(--hover); + z-index: 1; + box-shadow: var(--edge-highlight), var(--shadow-raised); + border-radius: var(--rounded-corner-small); + } - &.start, - &.end, - &[src*="#start"], - &[src*="#end"] { - transition: transform var(--transition-bezier-longer); + &.start, + &.end, + &[src*="#start"], + &[src*="#end"] { + transition: transform var(--transition-bezier-longer); - &:hover { - transform: scale(2); - } + &:hover { + transform: scale(2); + } - @media only screen and (max-width: 720px) { - transform-origin: center; - transition: transform var(--transition-bezier); + @media only screen and (max-width: 720px) { + transform-origin: center; + transition: transform var(--transition-bezier); - &:hover { - transform: var(--hover); - } - } - } + &:hover { + transform: var(--hover); + } + } + } - &.has-alpha, - &[src*="#has-alpha"] { - &:hover { - box-shadow: none; - } - } - } + &.has-alpha, + &[src*="#has-alpha"] { + &:hover { + box-shadow: none; + } + } + } } a img:not(.no-hover, [src*="#no-hover"]) { - cursor: pointer; + cursor: pointer; } video:fullscreen { - box-shadow: none; - border-radius: 0; + box-shadow: none; + border-radius: 0; } video:-webkit-full-screen { - box-shadow: none; - border-radius: 0; + box-shadow: none; + border-radius: 0; } picture { - display: inline-block; + display: inline-block; } diff --git a/sass/citrine/components/_overflow-auto.scss b/sass/citrine/components/_overflow-auto.scss index 712ba4b..20076ea 100644 --- a/sass/citrine/components/_overflow-auto.scss +++ b/sass/citrine/components/_overflow-auto.scss @@ -1,13 +1,13 @@ .overflow-auto { - overflow: auto; + overflow: auto; - &.overshoot { - margin-block: -1rem; - padding-block: 1rem; - } + &.overshoot { + margin-block: -1rem; + padding-block: 1rem; + } - &.overshoot-row { - margin-inline: -1rem; - padding-inline: 1rem; - } + &.overshoot-row { + margin-inline: -1rem; + padding-inline: 1rem; + } } diff --git a/sass/citrine/components/_overshoot.scss b/sass/citrine/components/_overshoot.scss index af8447f..6b71153 100644 --- a/sass/citrine/components/_overshoot.scss +++ b/sass/citrine/components/_overshoot.scss @@ -1,23 +1,23 @@ .overshoot { - --mask: linear-gradient( - to bottom, - transparent, - black 1rem, - black calc(100% - 1rem), - transparent - ); - -webkit-mask-image: var(--mask); - mask-image: var(--mask); + --mask: linear-gradient( + to bottom, + transparent, + black 1rem, + black calc(100% - 1rem), + transparent + ); + -webkit-mask-image: var(--mask); + mask-image: var(--mask); - &-row { - --mask: linear-gradient( - to right, - transparent, - black 1rem, - black calc(100% - 1rem), - transparent - ); - -webkit-mask-image: var(--mask); - mask-image: var(--mask); - } + &-row { + --mask: linear-gradient( + to right, + transparent, + black 1rem, + black calc(100% - 1rem), + transparent + ); + -webkit-mask-image: var(--mask); + mask-image: var(--mask); + } } diff --git a/sass/citrine/components/_skip-to-content.scss b/sass/citrine/components/_skip-to-content.scss index 1e217af..d2c64fe 100644 --- a/sass/citrine/components/_skip-to-content.scss +++ b/sass/citrine/components/_skip-to-content.scss @@ -1,23 +1,23 @@ #skip-to-content { - position: absolute; - transform: translateX(-50%) translateY(calc(-100% - 1rem)); - z-index: 9999; - transition: - backdrop-filter var(--transition), - box-shadow var(--transition), - transform var(--transition-bezier); - inset-inline-start: 50vw; - border-radius: 9999px; - background-color: var(--glass-bg-1); - padding: 0.375rem 0.75rem; - width: max-content; - text-decoration: none; + position: absolute; + transform: translateX(-50%) translateY(calc(-100% - 1rem)); + z-index: 9999; + transition: + backdrop-filter var(--transition), + box-shadow var(--transition), + transform var(--transition-bezier); + inset-inline-start: 50vw; + border-radius: 9999px; + background-color: var(--glass-bg-1); + padding: 0.375rem 0.75rem; + width: max-content; + text-decoration: none; - &:focus-visible, - &:focus { - -webkit-backdrop-filter: var(--blur); - transform: translateX(-50%) translateY(1rem); - backdrop-filter: var(--blur); - box-shadow: var(--edge-highlight), var(--shadow); - } + &:focus-visible, + &:focus { + -webkit-backdrop-filter: var(--blur); + transform: translateX(-50%) translateY(1rem); + backdrop-filter: var(--blur); + box-shadow: var(--edge-highlight), var(--shadow); + } } diff --git a/sass/citrine/components/_spoiler.scss b/sass/citrine/components/_spoiler.scss index 3b3c91b..5c95170 100644 --- a/sass/citrine/components/_spoiler.scss +++ b/sass/citrine/components/_spoiler.scss @@ -1,25 +1,23 @@ span.spoiler { - filter: blur(0.25rem); - transition: filter var(--transition); + filter: blur(0.25rem); + transition: filter var(--transition); - &:focus, - &:hover { - filter: none; - } + &:focus, + &:hover { + filter: none; + } - &.solid { - filter: none; - transition: - background-color var(--transition), - color var(--transition); - border-radius: var(--rounded-corner-small); - background-color: var(--fg-muted-1); - color: transparent; + &.solid { + filter: none; + transition: background-color var(--transition), color var(--transition); + border-radius: var(--rounded-corner-small); + background-color: var(--fg-muted-1); + color: transparent; - &:focus, - &:hover { - background-color: transparent; - color: inherit; - } - } + &:focus, + &:hover { + background-color: transparent; + color: inherit; + } + } } diff --git a/sass/citrine/components/_table.scss b/sass/citrine/components/_table.scss index 569a914..bda5f24 100644 --- a/sass/citrine/components/_table.scss +++ b/sass/citrine/components/_table.scss @@ -1,36 +1,36 @@ @use "../abstracts/functions" as *; table { - width: 100%; - overflow: hidden; + width: 100%; + overflow: hidden; } thead { - border-block-start: none; - color: var(--fg-muted-2); - font-weight: var(--font-weight-semi-bold); + border-block-start: none; + color: var(--fg-muted-2); + font-weight: var(--font-weight-semi-bold); } tr { - &:nth-child(even) { - background-color: var(--bg-muted-1); - } + &:nth-child(even) { + background-color: var(--bg-muted-1); + } - th, - td { - padding: 0.5rem 1rem; - } + th, + td { + padding: 0.5rem 1rem; + } } tbody tr { - border-block: rpx(1) solid var(--bg-muted-2); + border-block: rpx(1) solid var(--bg-muted-2); - &:last-child { - border-block-end: none; - } + &:last-child { + border-block-end: none; + } } .overflow-auto table { - width: max-content; - min-width: 100%; + width: max-content; + min-width: 100%; } diff --git a/sass/citrine/components/_textarea.scss b/sass/citrine/components/_textarea.scss index 58c355a..8405801 100644 --- a/sass/citrine/components/_textarea.scss +++ b/sass/citrine/components/_textarea.scss @@ -1,17 +1,17 @@ textarea { - appearance: none; - box-shadow: var(--edge-highlight); - border: none; - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 1rem; - resize: none; - font-size: inherit; - line-height: inherit; - font-family: inherit; + appearance: none; + box-shadow: var(--edge-highlight); + border: none; + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 1rem; + resize: none; + font-size: inherit; + line-height: inherit; + font-family: inherit; - &::placeholder { - opacity: 1; - color: var(--fg-muted-1); - } + &::placeholder { + opacity: 1; + color: var(--fg-muted-1); + } } diff --git a/sass/citrine/components/_title.scss b/sass/citrine/components/_title.scss index 16b8c89..a874e60 100644 --- a/sass/citrine/components/_title.scss +++ b/sass/citrine/components/_title.scss @@ -1,5 +1,5 @@ strong.title { - color: var(--accent-color); - font-size: var(--font-size-large); - line-height: 1; + color: var(--accent-color); + font-size: var(--font-size-large); + line-height: 1; } diff --git a/sass/citrine/components/_tooltip.scss b/sass/citrine/components/_tooltip.scss index 72aa4c1..8ba5533 100644 --- a/sass/citrine/components/_tooltip.scss +++ b/sass/citrine/components/_tooltip.scss @@ -1,41 +1,41 @@ // attr() hack from https://cyrneko.eu/css-tricks.html @media (pointer: coarse), (hover: none) { - .tooltip, - abbr[title] { - display: inline-flex; - position: relative; - justify-content: center; + .tooltip, + abbr[title] { + display: inline-flex; + position: relative; + justify-content: center; - &::after { - position: absolute; - top: calc(100% + 0.25rem); - z-index: 9999; - backdrop-filter: var(--blur); - transition: - visibility var(--transition), - opacity var(--transition), - transform var(--transition-bezier); - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner-small); - background-color: var(--glass-bg-1); - padding: 0.125rem 0.375rem; - width: max-content; - content: attr(title); - -webkit-backdrop-filter: var(--blur); - transform: translateY(-0.5rem) scale(0.5); - transform-origin: top; - visibility: hidden; - opacity: 0; - max-width: calc(var(--content-width) / 3); - color: var(--fg-muted-2); - font-size: var(--font-size-small); - } + &::after { + position: absolute; + top: calc(100% + 0.25rem); + z-index: 9999; + backdrop-filter: var(--blur); + transition: + visibility var(--transition), + opacity var(--transition), + transform var(--transition-bezier); + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner-small); + background-color: var(--glass-bg-1); + padding: 0.125rem 0.375rem; + width: max-content; + content: attr(title); + -webkit-backdrop-filter: var(--blur); + transform: translateY(-0.5rem) scale(0.5); + transform-origin: top; + visibility: hidden; + opacity: 0; + max-width: calc(var(--content-width) / 3); + color: var(--fg-muted-2); + font-size: var(--font-size-small); + } - &:focus::after, - &:hover::after { - transform: none; - visibility: visible; - opacity: 1; - } - } + &:focus::after, + &:hover::after { + transform: none; + visibility: visible; + opacity: 1; + } + } } diff --git a/sass/citrine/components/_visually-hidden.scss b/sass/citrine/components/_visually-hidden.scss index fbf292a..9646fa7 100644 --- a/sass/citrine/components/_visually-hidden.scss +++ b/sass/citrine/components/_visually-hidden.scss @@ -1,11 +1,11 @@ .visually-hidden { - position: absolute !important; - clip-path: inset(50%) !important; - margin: -1px !important; - border-width: 0 !important; - padding: 0 !important; - width: 1px !important; - height: 1px !important; - overflow: hidden !important; - white-space: nowrap !important; + position: absolute !important; + clip-path: inset(50%) !important; + margin: -1px !important; + border-width: 0 !important; + padding: 0 !important; + width: 1px !important; + height: 1px !important; + overflow: hidden !important; + white-space: nowrap !important; } diff --git a/sass/components/_alerts.scss b/sass/components/_alerts.scss index d9f5ed5..c4132f7 100644 --- a/sass/components/_alerts.scss +++ b/sass/components/_alerts.scss @@ -3,151 +3,151 @@ @use "../citrine/abstracts/variables" as *; [class^="markdown-alert"] { - display: flow-root; - position: relative; + display: flow-root; + position: relative; - &::before { - margin-inline-start: 1.5rem; - content: var(--alert-title); - color: var(--accent-color); - font-weight: var(--font-weight-semi-bold); - } + &::before { + margin-inline-start: 1.5rem; + content: var(--alert-title); + color: var(--accent-color); + font-weight: var(--font-weight-semi-bold); + } - &::after { - @include icon(pseudo); - --icon: var(--alert-icon); - position: absolute; - margin-inline-end: 0.25rem; - inset-block-start: rpx(1); - inset-inline-start: 0.75rem; - color: var(--accent-color); - font-size: 1.25rem; - } + &::after { + @include icon(pseudo); + --icon: var(--alert-icon); + position: absolute; + margin-inline-end: 0.25rem; + inset-block-start: rpx(1); + inset-inline-start: 0.75rem; + color: var(--accent-color); + font-size: 1.25rem; + } - & > :first-child { - margin-block-start: 0.25rem; - } + & > :first-child { + margin-block-start: 0.25rem; + } - & > :last-child { - margin-block-end: 0; - } + & > :last-child { + margin-block-end: 0; + } } .markdown-alert { - // GitHub flavored alerts - &-note, + // GitHub flavored alerts + &-note, &-tip, &-important, &-warning, &-caution, // Generic colors - &-red, + &-red, &-orange, &-yellow, &-green, &-blue, &-purple { - @include variables-accent(("light", "common")); + @include variables-accent(("light", "common")); - @media (prefers-color-scheme: dark) { - @include variables-accent("dark"); - } - } + @media (prefers-color-scheme: dark) { + @include variables-accent("dark"); + } + } - &-note { - &::before { - content: var(--alert-note-title); - } + &-note { + &::before { + content: var(--alert-note-title); + } - &::after { - --icon: var(--icon-info); - } - } + &::after { + --icon: var(--icon-info); + } + } - &-tip { - &::before { - content: var(--alert-tip-title); - } + &-tip { + &::before { + content: var(--alert-tip-title); + } - &::after { - --icon: var(--icon-lightbulb); - } - } + &::after { + --icon: var(--icon-lightbulb); + } + } - &-important { - &::before { - content: var(--alert-important-title); - } + &-important { + &::before { + content: var(--alert-important-title); + } - &::after { - --icon: var(--icon-warning-diamond); - } - } + &::after { + --icon: var(--icon-warning-diamond); + } + } - &-warning { - &::before { - content: var(--alert-warning-title); - } + &-warning { + &::before { + content: var(--alert-warning-title); + } - &::after { - --icon: var(--icon-warning); - } - } + &::after { + --icon: var(--icon-warning); + } + } - &-caution { - &::before { - content: var(--alert-caution-title); - } + &-caution { + &::before { + content: var(--alert-caution-title); + } - &::after { - --icon: var(--icon-warning-octagon); - } - } + &::after { + --icon: var(--icon-warning-octagon); + } + } - &-caution, - &-red { - --accent-h: var(--red-h); - --accent-s: var(--red-s); - --accent-l: var(--red-l); - --accent-color: var(--red-fg); - } + &-caution, + &-red { + --accent-h: var(--red-h); + --accent-s: var(--red-s); + --accent-l: var(--red-l); + --accent-color: var(--red-fg); + } - &-orange { - --accent-h: var(--orange-h); - --accent-s: var(--orange-s); - --accent-l: var(--orange-l); - --accent-color: var(--orange-fg); - } + &-orange { + --accent-h: var(--orange-h); + --accent-s: var(--orange-s); + --accent-l: var(--orange-l); + --accent-color: var(--orange-fg); + } - &-warning, - &-yellow { - --accent-h: var(--yellow-h); - --accent-s: var(--yellow-s); - --accent-l: var(--yellow-l); - --accent-color: var(--yellow-fg); - } + &-warning, + &-yellow { + --accent-h: var(--yellow-h); + --accent-s: var(--yellow-s); + --accent-l: var(--yellow-l); + --accent-color: var(--yellow-fg); + } - &-tip, - &-green { - --accent-h: var(--green-h); - --accent-s: var(--green-s); - --accent-l: var(--green-l); - --accent-color: var(--green-fg); - } + &-tip, + &-green { + --accent-h: var(--green-h); + --accent-s: var(--green-s); + --accent-l: var(--green-l); + --accent-color: var(--green-fg); + } - &-note, - &-blue { - --accent-h: var(--blue-h); - --accent-s: var(--blue-s); - --accent-l: var(--blue-l); - --accent-color: var(--blue-fg); - } + &-note, + &-blue { + --accent-h: var(--blue-h); + --accent-s: var(--blue-s); + --accent-l: var(--blue-l); + --accent-color: var(--blue-fg); + } - &-important, - &-purple { - --accent-h: var(--purple-h); - --accent-s: var(--purple-s); - --accent-l: var(--purple-l); - --accent-color: var(--purple-fg); - } + &-important, + &-purple { + --accent-h: var(--purple-h); + --accent-s: var(--purple-s); + --accent-l: var(--purple-l); + --accent-color: var(--purple-fg); + } } diff --git a/sass/components/_article-details.scss b/sass/components/_article-details.scss index b3ca1ff..765baf5 100644 --- a/sass/components/_article-details.scss +++ b/sass/components/_article-details.scss @@ -1,71 +1,71 @@ @use "../citrine/abstracts/functions" as *; .article-details { - display: flex; - flex-direction: column; - gap: 0.75rem; - margin-block-end: 2rem; - color: var(--fg-muted-2); - font-size: var(--font-size-small); + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-block-end: 2rem; + color: var(--fg-muted-2); + font-size: var(--font-size-small); - .items { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - gap: 0.25rem 0.5rem; - } + .items { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 0.25rem 0.5rem; + } - .item { - display: inline-flex; - align-items: center; - gap: 0.375rem; - border-radius: var(--rounded-corner-small); - } + .item { + display: inline-flex; + align-items: center; + gap: 0.375rem; + border-radius: var(--rounded-corner-small); + } - a { - color: inherit; - font-weight: var(--font-weight-normal); - font-size: var(--font-size-small); - text-decoration-color: transparent; + a { + color: inherit; + font-weight: var(--font-weight-normal); + font-size: var(--font-size-small); + text-decoration-color: transparent; - &:hover { - text-decoration-style: solid; - text-decoration-color: var(--fg-muted-1); - } - } + &:hover { + text-decoration-style: solid; + text-decoration-color: var(--fg-muted-1); + } + } - .tooltip { - cursor: help; - } + .tooltip { + cursor: help; + } - .icon { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner-small); - background-color: var(--bg-muted-1); - padding: 0.375rem; - color: var(--accent-color); - font-size: 1.25rem; - } + .icon { + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner-small); + background-color: var(--bg-muted-1); + padding: 0.375rem; + color: var(--accent-color); + font-size: 1.25rem; + } - .tags { - display: flex; - flex-wrap: wrap; - gap: 0 0.5rem; - margin: 0; - border-block-start: rpx(1) solid var(--bg-muted-2); - padding-inline-start: 0; - padding-block-start: 0.5rem; - width: 100%; - list-style: none; + .tags { + display: flex; + flex-wrap: wrap; + gap: 0 0.5rem; + margin: 0; + border-block-start: rpx(1) solid var(--bg-muted-2); + padding-inline-start: 0; + padding-block-start: 0.5rem; + width: 100%; + list-style: none; - li { - display: flex; - margin-block: 0; - padding: 0; - } + li { + display: flex; + margin-block: 0; + padding: 0; + } - a::before { - content: "#"; - } - } + a::before { + content: "#"; + } + } } diff --git a/sass/components/_article-list.scss b/sass/components/_article-list.scss index e597ecc..7126273 100644 --- a/sass/components/_article-list.scss +++ b/sass/components/_article-list.scss @@ -3,252 +3,254 @@ @use "../citrine/abstracts/mixins" as *; .article-list { - display: grid; - grid-template-columns: repeat( - auto-fill, - minmax(calc(var(--content-width) / 2.5), 1fr) - ); - gap: 1rem; - margin-block-start: 2rem; + display: grid; + grid-template-columns: repeat( + auto-fill, + minmax(calc(var(--content-width) / 2.5), 1fr) + ); + gap: 1rem; + margin-block-start: 2rem; - &.categories article { - position: relative; + &.categories article { + position: relative; - &:hover .icon:last-child { - transform: translateY(-50%) rotate(-10deg) scale(1.5); - } + &:hover .icon:last-child { + transform: translateY(-50%) rotate(-10deg) scale(1.5); + } - .icon:last-child { - position: absolute; - transform: translateY(-50%); - z-index: -1; - transition: transform var(--transition-bezier); - inset-block-start: 50%; - inset-inline-end: -3rem; - color: var(--bg-muted-1); - font-size: 12rem; - } - } + .icon:last-child { + position: absolute; + transform: translateY(-50%); + z-index: -1; + transition: transform var(--transition-bezier); + inset-block-start: 50%; + inset-inline-end: -3rem; + color: var(--bg-muted-1); + font-size: 12rem; + } + } - article { - display: flex; - position: relative; - flex-direction: column; - justify-content: space-between; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: 1.25rem; - background-color: var(--bg-muted-1); - padding: 0; - overflow: hidden; + article { + display: flex; + position: relative; + flex-direction: column; + justify-content: space-between; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: 1.25rem; + background-color: var(--bg-muted-1); + padding: 0; + overflow: hidden; - &.draft { - opacity: var(--disabled-opacity); - filter: grayscale(1); - transition-duration: var(--transition); - transition-property: opacity, filter; + &.draft { + opacity: var(--disabled-opacity); + filter: grayscale(1); + transition-duration: var(--transition); + transition-property: opacity, filter; - &:hover { - opacity: 1; - filter: none; - } - } + &:hover { + opacity: 1; + filter: none; + } + } - &.has-banner.has-accent-color { - background-image: var(--bg-overlay), var(--blurnail); - background-position: center; - background-size: cover; - } + &.has-banner.has-accent-color { + background-image: var(--bg-overlay), var(--blurnail); + background-position: center; + background-size: cover; + } - &.has-accent-color { - @include variables-accent(("light", "common")); + &.has-accent-color { + @include variables-accent(("light", "common")); - @media (prefers-color-scheme: dark) { - & { - @include variables-accent("dark"); - } - } - } + @media (prefers-color-scheme: dark) { + & { + @include variables-accent("dark"); + } + } + } - & > div { - display: flex; - flex: 1; - flex-direction: column; - margin: 1rem; + & > div { + display: flex; + flex: 1; + flex-direction: column; + margin: 1rem; - & > a { - text-decoration: none; - } - } + & > a { + text-decoration: none; + } + } - h3 { - margin: 0; - border-inline-start: 0.25rem solid; - border-start-start-radius: 0.25rem; - border-end-start-radius: 0.25rem; - padding-inline-start: 0.5rem; - color: var(--accent-color); - font-weight: var(--font-weight-semi-bold); - text-decoration: none; + h3 { + margin: 0; + border-inline-start: 0.25rem solid; + border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; + padding-inline-start: 0.5rem; + color: var(--accent-color); + font-weight: var(--font-weight-semi-bold); + text-decoration: none; - &:hover::after { - opacity: 1; - } + &:hover::after { + opacity: 1; + } - &::after { - opacity: 0; - transition: opacity var(--transition); - content: " →"; - } - } + &::after { + opacity: 0; + transition: opacity var(--transition); + content: " →"; + } + } - .description p { - margin-block-end: 0.75rem; - } + .description p { + margin-block-end: 0.75rem; + } - .open-post { - @include easing-mask(bottom); - display: flex; - position: relative; - justify-content: center; - align-items: center; - margin-block-end: -2rem; - box-shadow: var(--edge-highlight); - border-radius: 0; - aspect-ratio: 2 / 1; - overflow: hidden; - text-decoration: none; + .open-post { + @include easing-mask(bottom); + display: flex; + position: relative; + justify-content: center; + align-items: center; + margin-block-end: -2rem; + box-shadow: var(--edge-highlight); + border-radius: 0; + aspect-ratio: 2 / 1; + overflow: hidden; + text-decoration: none; - &:hover { - &::before { - background-color: var(--shade-color); - } + &:hover { + &::before { + background-color: var(--shade-color); + } - img { - transform: var(--hover); - filter: blur(0.25rem); - } + img { + transform: var(--hover); + filter: blur(0.25rem); + } - .icon { - transform: none; - opacity: 1; - } - } + .icon { + transform: none; + opacity: 1; + } + } - &:active img { - transform: none; - } + &:active img { + transform: none; + } - &::before { - position: absolute; - z-index: 1; - transition: background-color var(--transition); - inset: 0; - border-radius: inherit; - content: ""; - } + &::before { + position: absolute; + z-index: 1; + transition: background-color var(--transition); + inset: 0; + border-radius: inherit; + content: ""; + } - img { - position: absolute; - transition-duration: var(--transition); - transition-property: transform, filter; - margin: 0; - inset: 0; - width: 100%; - height: 100%; - object-fit: cover; - } + img { + position: absolute; + transition-duration: var(--transition); + transition-property: transform, filter; + margin: 0; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + } - .icon { - transform: scale(1.5); - opacity: 0; - z-index: 1; - transition: - transform var(--transition-bezier), - opacity var(--transition); - color: white; - font-size: 1.25rem; - } - } + .icon { + transform: scale(1.5); + opacity: 0; + z-index: 1; + transition: + transform var(--transition-bezier), + opacity var(--transition); + color: white; + font-size: 1.25rem; + } + } - .article-details { - flex: 1; - justify-content: flex-end; - margin-block-end: 0; + .article-details { + flex: 1; + justify-content: flex-end; + margin-block-end: 0; - .tags { - margin-block-start: auto; - margin-block-end: -0.25rem; - } - } - } + .tags { + margin-block-start: auto; + margin-block-end: -0.25rem; + } + } + } } .paginator { - display: flex; - justify-content: center; - align-items: center; - gap: 0.25rem; - margin-block-start: 4rem; + display: flex; + justify-content: center; + align-items: center; + gap: 0.25rem; + margin-block-start: 4rem; - &:has(a.paginator-item.previous:active) .paginator-counter { - border-start-start-radius: 1rem; - border-end-start-radius: 1rem; - } + &:has(a.paginator-item.previous:active) .paginator-counter { + border-start-start-radius: 1rem; + border-end-start-radius: 1rem; + } - &:has(a.paginator-item.next:active) .paginator-counter { - border-start-end-radius: 1rem; - border-end-end-radius: 1rem; - } + &:has(a.paginator-item.next:active) .paginator-counter { + border-start-end-radius: 1rem; + border-end-end-radius: 1rem; + } - &-item { - display: inline-block; - transition: - border-radius var(--transition), - border-start-end-radius var(--transition), - border-end-end-radius var(--transition), - border-start-start-radius var(--transition), - border-end-start-radius var(--transition), - background-color var(--transition), - transform var(--transition-bezier); - box-shadow: var(--edge-highlight); - border-radius: 1rem; - background-color: var(--bg-muted-1); - padding: 0.5rem; - color: var(--accent-color); - line-height: 0; - text-decoration: none; + &-item { + display: inline-block; + transition: + border-radius var(--transition), + border-start-end-radius var(--transition), + border-end-end-radius var(--transition), + border-start-start-radius var(--transition), + border-end-start-radius var(--transition), + background-color var(--transition), + transform var(--transition-bezier); + box-shadow: var(--edge-highlight); + border-radius: 1rem; + background-color: var(--bg-muted-1); + padding: 0.5rem; + color: var(--accent-color); + line-height: 0; + text-decoration: none; - &:not([aria-disabled="true"]):hover { - background-color: var(--bg-muted-2); - } + &:not([aria-disabled="true"]):hover { + background-color: var(--bg-muted-2); + } - &:not([aria-disabled="true"]):active { - transform: var(--active); - border-radius: 1rem; - } + &:not([aria-disabled="true"]):active { + transform: var(--active); + border-radius: 1rem; + } - &-previous { - border-start-end-radius: var(--rounded-corner-small); - border-end-end-radius: var(--rounded-corner-small); - } + &-previous { + border-start-end-radius: var(--rounded-corner-small); + border-end-end-radius: var(--rounded-corner-small); + } - &-next { - border-start-start-radius: var(--rounded-corner-small); - border-end-start-radius: var(--rounded-corner-small); - } - } + &-next { + border-start-start-radius: var(--rounded-corner-small); + border-end-start-radius: var(--rounded-corner-small); + } + } - &-counter { - @include gradient-fill; - display: inline-block; - transition: var(--transition-bezier); - transition-property: - border-start-start-radius, border-end-start-radius, - border-start-end-radius, border-end-end-radius; - border-radius: var(--rounded-corner-small); - background-color: var(--bg-muted-1); - padding: 0.25rem 0.5rem; - font-weight: var(--font-weight-semi-bold); - font-variant-numeric: tabular-nums; - } + &-counter { + @include gradient-fill; + display: inline-block; + transition: var(--transition-bezier); + transition-property: + border-start-start-radius, + border-end-start-radius, + border-start-end-radius, + border-end-end-radius; + border-radius: var(--rounded-corner-small); + background-color: var(--bg-muted-1); + padding: 0.25rem 0.5rem; + font-weight: var(--font-weight-semi-bold); + font-variant-numeric: tabular-nums; + } } diff --git a/sass/components/_article-nav.scss b/sass/components/_article-nav.scss index 217e350..71ca968 100644 --- a/sass/components/_article-nav.scss +++ b/sass/components/_article-nav.scss @@ -1,66 +1,66 @@ .article-nav { - display: flex; - gap: 0.25rem; + display: flex; + gap: 0.25rem; - @media only screen and (max-width: 720px) { - flex-direction: column; - } + @media only screen and (max-width: 720px) { + flex-direction: column; + } - &-item { - flex: 1; - transition: - box-shadow var(--transition), - background-color var(--transition), - transform var(--transition-bezier); - border-radius: var(--rounded-corner); - padding: 0.75rem 1rem; - min-width: 0; - text-decoration: none; + &-item { + flex: 1; + transition: + box-shadow var(--transition), + background-color var(--transition), + transform var(--transition-bezier); + border-radius: var(--rounded-corner); + padding: 0.75rem 1rem; + min-width: 0; + text-decoration: none; - &:hover { - box-shadow: var(--edge-highlight), var(--shadow); - background-color: var(--bg-muted-1); + &:hover { + box-shadow: var(--edge-highlight), var(--shadow); + background-color: var(--bg-muted-1); - .article-title { - color: var(--accent-color); - } - } + .article-title { + color: var(--accent-color); + } + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &.prev { - text-align: start; + &.prev { + text-align: start; - .nav-arrow::before { - content: "← "; - } - } + .nav-arrow::before { + content: "← "; + } + } - &.next { - text-align: end; + &.next { + text-align: end; - .nav-arrow::after { - content: " →"; - } - } - } + .nav-arrow::after { + content: " →"; + } + } + } - .nav-arrow { - margin-block-end: 0.5rem; - color: var(--fg-muted-2); - font-weight: var(--font-weight-normal); - font-size: var(--font-size-small); - } + .nav-arrow { + margin-block-end: 0.5rem; + color: var(--fg-muted-2); + font-weight: var(--font-weight-normal); + font-size: var(--font-size-small); + } - .article-title { - display: block; - transition: color var(--transition); - max-width: 100%; - overflow: hidden; - color: var(--fg-muted-1); - text-overflow: ellipsis; - white-space: nowrap; - } + .article-title { + display: block; + transition: color var(--transition); + max-width: 100%; + overflow: hidden; + color: var(--fg-muted-1); + text-overflow: ellipsis; + white-space: nowrap; + } } diff --git a/sass/components/_audio-button.scss b/sass/components/_audio-button.scss index 1f4fe43..56b3a81 100644 --- a/sass/components/_audio-button.scss +++ b/sass/components/_audio-button.scss @@ -2,41 +2,41 @@ @use "../citrine/abstracts/mixins" as *; .audio-button { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 0.5rem; - font-size: var(--font-size-small); - font-weight: var(--font-weight-semi-bold); - color: var(--accent-color); - background-color: var(--accent-bg-1); - border: none; - cursor: pointer; - transition: - background-color var(--transition), - transform var(--transition-bezier), - box-shadow var(--transition); + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-size: var(--font-size-small); + font-weight: var(--font-weight-semi-bold); + color: var(--accent-color); + background-color: var(--accent-bg-1); + border: none; + cursor: pointer; + transition: + background-color var(--transition), + transform var(--transition-bezier), + box-shadow var(--transition); - &:hover { - background-color: var(--accent-bg-2); - transform: scale(1.03); - } + &:hover { + background-color: var(--accent-bg-2); + transform: scale(1.03); + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &:focus-visible { - outline: 0.125rem solid var(--accent-color); - outline-offset: 0.25rem; - } + &:focus-visible { + outline: 0.125rem solid var(--accent-color); + outline-offset: 0.25rem; + } - .audio-button-label { - display: none; + .audio-button-label { + display: none; - @media (min-width: 480px) { - display: inline; - } - } + @media (min-width: 480px) { + display: inline; + } + } } diff --git a/sass/components/_audio.scss b/sass/components/_audio.scss index 18d8397..7b549a7 100644 --- a/sass/components/_audio.scss +++ b/sass/components/_audio.scss @@ -3,39 +3,39 @@ // Who doesn't like a party popper mid article? .audio { - @include chip; - padding-block: 0; - color: var(--accent-color); - font-size: var(--font-size-medium); + @include chip; + padding-block: 0; + color: var(--accent-color); + font-size: var(--font-size-medium); - &:hover { - color: var(--accent-color) !important; + &:hover { + color: var(--accent-color) !important; - .icon { - animation: speaker var(--transition-long) ease-out infinite; + .icon { + animation: speaker var(--transition-long) ease-out infinite; - @keyframes speaker { - from { - --icon: var(--icon-speaker-none); - } + @keyframes speaker { + from { + --icon: var(--icon-speaker-none); + } - 50% { - --icon: var(--icon-speaker-low); - } + 50% { + --icon: var(--icon-speaker-low); + } - to { - --icon: var(--icon-speaker-high); - } - } - } - } + to { + --icon: var(--icon-speaker-high); + } + } + } + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - .icon { - vertical-align: rpx(-3); - margin-inline-start: 0.25rem; - } + .icon { + vertical-align: rpx(-3); + margin-inline-start: 0.25rem; + } } diff --git a/sass/components/_banner.scss b/sass/components/_banner.scss index e261d07..d15fbd9 100644 --- a/sass/components/_banner.scss +++ b/sass/components/_banner.scss @@ -1,98 +1,98 @@ @use "../citrine/abstracts/functions" as *; body.has-banner { - background-image: var(--bg-overlay), var(--blurnail); - background-position: center; - background-size: cover; - background-attachment: fixed; + background-image: var(--bg-overlay), var(--blurnail); + background-position: center; + background-size: cover; + background-attachment: fixed; } #banner { - --mask: linear-gradient(black calc(100% - 2rem), transparent); - -webkit-mask-image: var(--mask); - display: flex; - grid-area: banner; - justify-content: center; - mask-image: var(--mask); - margin-block-end: -2.5rem; - padding-block: 3.25rem 2.5rem; - width: 100%; + --mask: linear-gradient(black calc(100% - 2rem), transparent); + -webkit-mask-image: var(--mask); + display: flex; + grid-area: banner; + justify-content: center; + mask-image: var(--mask); + margin-block-end: -2.5rem; + padding-block: 3.25rem 2.5rem; + width: 100%; - div { - position: relative; - margin-inline: 1rem; - aspect-ratio: 2 / 1; - width: 100%; - max-width: var(--content-width); - } + div { + position: relative; + margin-inline: 1rem; + aspect-ratio: 2 / 1; + width: 100%; + max-width: var(--content-width); + } - img { - position: absolute; - margin: 0; - inset: 0; - border-radius: var(--rounded-corner) var(--rounded-corner) 0 0 !important; - aspect-ratio: 2 / 1; - width: 100%; - object-fit: cover; - } + img { + position: absolute; + margin: 0; + inset: 0; + border-radius: var(--rounded-corner) var(--rounded-corner) 0 0 !important; + aspect-ratio: 2 / 1; + width: 100%; + object-fit: cover; + } - img:nth-of-type(1) { - opacity: var(--dim-opacity); - z-index: -1; - filter: blur(1.5rem); - animation: banner-glow-load calc(0.525s + var(--transition-long)); - inset-block-start: 1rem; + img:nth-of-type(1) { + opacity: var(--dim-opacity); + z-index: -1; + filter: blur(1.5rem); + animation: banner-glow-load calc(0.525s + var(--transition-long)); + inset-block-start: 1rem; - @keyframes banner-glow-load { - from, - 52.5% { - opacity: 0; - } - } - } + @keyframes banner-glow-load { + from, + 52.5% { + opacity: 0; + } + } + } - img:nth-of-type(2) { - transform-origin: bottom; - animation: banner-load calc(0.525s + var(--transition-longer)); + img:nth-of-type(2) { + transform-origin: bottom; + animation: banner-load calc(0.525s + var(--transition-longer)); - @keyframes banner-load { - from, - 52.5% { - transform: translateY(2rem) scale(0.95); - opacity: 0; - } - } - } + @keyframes banner-load { + from, + 52.5% { + transform: translateY(2rem) scale(0.95); + opacity: 0; + } + } + } - & + #main-content { - margin-block-start: 0; + & + #main-content { + margin-block-start: 0; - article > h1:first-of-type, - h1:first-of-type { - margin-inline: -1rem; - margin-block: 0; - border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; - padding: 1rem; - width: unset; - -webkit-backdrop-filter: blur(1rem); - backdrop-filter: blur(1rem); - animation: banner-heading calc(0.525s + var(--transition-longer)); - box-shadow: inset 0 rpx(1) 0 var(--accent-highlight); - background-image: linear-gradient( - to bottom, - var(--bg-muted-1), - transparent 50% - ); - background-size: auto 200%; - text-decoration: none; + article > h1:first-of-type, + h1:first-of-type { + margin-inline: -1rem; + margin-block: 0; + border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; + padding: 1rem; + width: unset; + -webkit-backdrop-filter: blur(1rem); + backdrop-filter: blur(1rem); + animation: banner-heading calc(0.525s + var(--transition-longer)); + box-shadow: inset 0 rpx(1) 0 var(--accent-highlight); + background-image: linear-gradient( + to bottom, + var(--bg-muted-1), + transparent 50% + ); + background-size: auto 200%; + text-decoration: none; - @keyframes banner-heading { - from, - 52.5% { - box-shadow: none; - background-position-y: 100%; - } - } - } - } + @keyframes banner-heading { + from, + 52.5% { + box-shadow: none; + background-position-y: 100%; + } + } + } + } } diff --git a/sass/components/_comments.scss b/sass/components/_comments.scss index e5cc946..be2f364 100644 --- a/sass/components/_comments.scss +++ b/sass/components/_comments.scss @@ -2,458 +2,458 @@ @use "../citrine/abstracts/mixins" as *; #comments { - #qrcode { - float: inline-end; - cursor: help; - box-sizing: content-box; - margin-inline-start: 1rem; - margin-block-start: 3rem; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - background-color: white; - padding: 0.75rem; - width: rpx(116); - height: rpx(116); - - svg { - pointer-events: none; - } - - @media only screen and (max-width: 720px) { - display: none; - } - } - - #comments-wrapper { - display: flex; - flex-direction: column; - gap: 2rem; - margin-block-start: 2rem; - - #comments-status { - color: var(--fg-muted-1); - font-weight: var(--font-weight-semi-bold); - font-size: var(--font-size-x-large); - text-align: center; - } - - .comment { - display: grid; - // grid-template-columns: min-content; - grid-template-columns: auto 1fr; - grid-template-areas: - "avatar header " - "...... post " - "...... media " - "...... card " - "...... interactions"; - column-gap: 1rem; - justify-items: start; - animation: slide-in-right var(--transition-bezier); - - :root[dir*="rtl"] & { - animation: slide-in-left var(--transition-bezier); - } - - @media only screen and (max-width: 720px) { - grid-template-areas: - "avatar header " - "post post " - "media media " - "card card " - "interactions interactions"; - align-items: start; - } - - &.comment-reply { - position: relative; - border-inline-start: 0.25rem solid var(--bg-muted-2); - border-start-start-radius: 0.25rem; - border-end-start-radius: 0.25rem; - padding-inline-start: 1rem; - - &:has(+ .comment-reply) { - border-end-start-radius: 0; - } - - & + .comment-reply { - margin-block-start: -2rem; - border-start-start-radius: 0; - padding-block-start: 2rem; - } - } - - .avatar-link { - grid-area: avatar; - width: 4rem; - height: 4rem; - - @media only screen and (max-width: 480px) { - width: 3rem; - height: 3rem; - } - - .avatar { - transition: transform var(--transition-bezier); - margin: 0; - background-size: cover; - width: 100%; - height: 100%; - - &:hover { - transform: rotate(10deg) var(--hover); - border-radius: var(--rounded-corner); - } - - &:active { - transform: var(--active); - } - } - } - - .mention { - @include chip; - display: inline-block; - - &:hover { - background-color: var(--bg-muted-2); - } - - &:active { - transform: var(--active); - } - } - - .invisible { - display: none; - } - - .ellipsis::after { - content: "…"; - } - - header { - display: flex; - grid-area: header; - flex-direction: column; - width: 100%; - min-width: 0; - color: var(--fg-muted-1); - line-height: 1; - - .display, - .instance { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .display { - color: var(--fg-color); - line-height: 1.5rem; - text-decoration: none; - - .emoji { - cursor: unset; - - &:hover { - transform: none; - } - } - } - - .instance { - margin-block-start: 0.25rem; - font-weight: var(--font-weight-semi-bold); - font-size: var(--font-size-x-small); - - &.op { - cursor: help; - - &::before { - @include icon(pseudo); - --icon: var(--icon-seal-check); - display: inline-block; - vertical-align: text-top; - margin-inline-end: 0.25rem; - font-size: 1rem; - } - } - } - - .timestamp { - margin-block-start: 0.25rem; - - a { - color: inherit; - font-size: var(--font-size-x-small); - text-decoration-color: transparent; - - &:hover { - text-decoration-style: solid; - text-decoration-color: inherit; - } - - &::after { - vertical-align: top; - } - } - } - } - - details { - border-radius: var(--rounded-corner-small); - background-image: - linear-gradient( - to right, - transparent, - transparent 0.5rem, - var(--bg-muted-1) 0.5rem, - var(--bg-muted-1) calc(100% - 0.5rem), - transparent calc(100% - 0.5rem), - transparent - ), - linear-gradient( - to right, - transparent, - transparent 0.5rem, - var(--bg-color) 0.5rem, - var(--bg-color) calc(100% - 0.5rem), - transparent calc(100% - 0.5rem), - transparent - ), - repeating-linear-gradient( - 45deg, - var(--contrast-color), - var(--contrast-color) 0.25rem, - var(--accent-color) 0.25rem, - var(--accent-color) 0.5rem - ); - width: 100%; - - summary { - border-radius: 0; - background-image: none; - } - } - - main { - grid-area: post; - justify-self: stretch; - margin-block-start: 1rem; - padding: 0; - - :first-child { - margin-block-start: 0; - } - - :last-child { - margin-block-end: 0; - } - } - - .attachments { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); - grid-area: media; - gap: 0.5rem; - margin-block-start: 1rem; - - img, - video { - margin: 0; - } - } - - .meta-card { - grid-area: card; - transition: transform var(--transition-bezier); - margin-block-start: 1rem; - width: min(calc(var(--content-width) / 2), 100%); - font-weight: var(--font-weight-normal); - text-decoration: none; - - &:hover { - img { - transform: var(--hover); - box-shadow: var(--edge-highlight), var(--shadow-raised); - border-radius: var(--rounded-corner-small); - } - - figcaption { - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-2); - } - } - - &:active { - transform: var(--active); - } - - figure { - display: flex; - flex-direction: column; - gap: 0.25rem; - margin: 0; - - img { - margin: 0; - border-radius: var(--rounded-corner) var(--rounded-corner) - var(--rounded-corner-small) var(--rounded-corner-small); - aspect-ratio: 16 / 9; - object-fit: cover; - - & + figcaption { - border-radius: var(--rounded-corner-small) - var(--rounded-corner-small) var(--rounded-corner) - var(--rounded-corner); - } - } - - figcaption { - display: flex; - flex-direction: column; - gap: 0.25rem; - transition-duration: var(--transition); - transition-property: border-radius, background-color; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 1rem; - color: var(--fg-color); - font-size: var(--font-size-medium); - text-align: start; - - p { - margin: 0; - color: var(--fg-muted-2); - font-size: var(--font-size-small); - } - } - } - } - - footer { - display: flex; - grid-area: interactions; - align-items: center; - gap: 0.25rem; - margin-block-start: 1rem; - width: 100%; - min-width: 0; - - @media only screen and (max-width: 480px) { - flex-wrap: wrap; - } - - .boosts, - .faves, - .reaction { - padding: 0.375rem 0.75rem; - font-variant-numeric: tabular-nums; - white-space: nowrap; - } - - .boosts, - .faves { - transition: - box-shadow var(--transition), - border-radius var(--transition), - transform var(--transition-bezier); - border-radius: rpx(18); - text-decoration: none; - - .icon { - vertical-align: rpx(-2); - transition: transform var(--transition-bezier); - margin-inline-end: 0.25rem; - } - - &:hover { - box-shadow: var(--edge-highlight); - text-decoration: none; - } - - &:active { - transform: var(--active); - border-radius: rpx(18); - } - } - - .boosts { - border-start-end-radius: var(--rounded-corner-small); - border-end-end-radius: var(--rounded-corner-small); - padding-inline-end: 0.625rem; - color: var(--purple-fg); - - .icon { - --icon: var(--icon-repeat); - } - - &:hover { - background-color: var(--purple-bg-1); - - .icon { - transform: rotate(180deg); - } - } - } - - .faves { - border-start-start-radius: var(--rounded-corner-small); - border-end-start-radius: var(--rounded-corner-small); - padding-inline-start: 0.625rem; - color: var(--yellow-fg); - - .icon { - --icon: var(--icon-star); - } - - &:hover { - background-color: var(--yellow-bg-1); - - .icon { - transform: rotate(72deg); - } - } - } - - .reactions { - display: flex; - // flex-wrap: nowrap; - gap: 0.25rem; - margin: -0.5rem -1rem; - padding: 0.5rem 1rem; - min-width: 0; - overflow-x: auto; - scrollbar-width: none; - color: var(--accent-color); - font-weight: var(--font-weight-semi-bold); - - .reaction { - display: flex; - flex-shrink: 0; - align-items: center; - gap: 0.25rem; - cursor: zoom-in; - border: rpx(1) solid var(--bg-muted-2); - border-radius: rpx(19); - - &:hover .emoji { - transform: scale(2); - } - - .emoji { - cursor: unset; - } - - span { - font-variant-numeric: tabular-nums; - } - } - } - } - } - } + #qrcode { + float: inline-end; + cursor: help; + box-sizing: content-box; + margin-inline-start: 1rem; + margin-block-start: 3rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + background-color: white; + padding: 0.75rem; + width: rpx(116); + height: rpx(116); + + svg { + pointer-events: none; + } + + @media only screen and (max-width: 720px) { + display: none; + } + } + + #comments-wrapper { + display: flex; + flex-direction: column; + gap: 2rem; + margin-block-start: 2rem; + + #comments-status { + color: var(--fg-muted-1); + font-weight: var(--font-weight-semi-bold); + font-size: var(--font-size-x-large); + text-align: center; + } + + .comment { + display: grid; + // grid-template-columns: min-content; + grid-template-columns: auto 1fr; + grid-template-areas: + "avatar header " + "...... post " + "...... media " + "...... card " + "...... interactions"; + column-gap: 1rem; + justify-items: start; + animation: slide-in-right var(--transition-bezier); + + :root[dir*="rtl"] & { + animation: slide-in-left var(--transition-bezier); + } + + @media only screen and (max-width: 720px) { + grid-template-areas: + "avatar header " + "post post " + "media media " + "card card " + "interactions interactions"; + align-items: start; + } + + &.comment-reply { + position: relative; + border-inline-start: 0.25rem solid var(--bg-muted-2); + border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; + padding-inline-start: 1rem; + + &:has(+ .comment-reply) { + border-end-start-radius: 0; + } + + & + .comment-reply { + margin-block-start: -2rem; + border-start-start-radius: 0; + padding-block-start: 2rem; + } + } + + .avatar-link { + grid-area: avatar; + width: 4rem; + height: 4rem; + + @media only screen and (max-width: 480px) { + width: 3rem; + height: 3rem; + } + + .avatar { + transition: transform var(--transition-bezier); + margin: 0; + background-size: cover; + width: 100%; + height: 100%; + + &:hover { + transform: rotate(10deg) var(--hover); + border-radius: var(--rounded-corner); + } + + &:active { + transform: var(--active); + } + } + } + + .mention { + @include chip; + display: inline-block; + + &:hover { + background-color: var(--bg-muted-2); + } + + &:active { + transform: var(--active); + } + } + + .invisible { + display: none; + } + + .ellipsis::after { + content: "…"; + } + + header { + display: flex; + grid-area: header; + flex-direction: column; + width: 100%; + min-width: 0; + color: var(--fg-muted-1); + line-height: 1; + + .display, + .instance { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .display { + color: var(--fg-color); + line-height: 1.5rem; + text-decoration: none; + + .emoji { + cursor: unset; + + &:hover { + transform: none; + } + } + } + + .instance { + margin-block-start: 0.25rem; + font-weight: var(--font-weight-semi-bold); + font-size: var(--font-size-x-small); + + &.op { + cursor: help; + + &::before { + @include icon(pseudo); + --icon: var(--icon-seal-check); + display: inline-block; + vertical-align: text-top; + margin-inline-end: 0.25rem; + font-size: 1rem; + } + } + } + + .timestamp { + margin-block-start: 0.25rem; + + a { + color: inherit; + font-size: var(--font-size-x-small); + text-decoration-color: transparent; + + &:hover { + text-decoration-style: solid; + text-decoration-color: inherit; + } + + &::after { + vertical-align: top; + } + } + } + } + + details { + border-radius: var(--rounded-corner-small); + background-image: + linear-gradient( + to right, + transparent, + transparent 0.5rem, + var(--bg-muted-1) 0.5rem, + var(--bg-muted-1) calc(100% - 0.5rem), + transparent calc(100% - 0.5rem), + transparent + ), + linear-gradient( + to right, + transparent, + transparent 0.5rem, + var(--bg-color) 0.5rem, + var(--bg-color) calc(100% - 0.5rem), + transparent calc(100% - 0.5rem), + transparent + ), + repeating-linear-gradient( + 45deg, + var(--contrast-color), + var(--contrast-color) 0.25rem, + var(--accent-color) 0.25rem, + var(--accent-color) 0.5rem + ); + width: 100%; + + summary { + border-radius: 0; + background-image: none; + } + } + + main { + grid-area: post; + justify-self: stretch; + margin-block-start: 1rem; + padding: 0; + + :first-child { + margin-block-start: 0; + } + + :last-child { + margin-block-end: 0; + } + } + + .attachments { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); + grid-area: media; + gap: 0.5rem; + margin-block-start: 1rem; + + img, + video { + margin: 0; + } + } + + .meta-card { + grid-area: card; + transition: transform var(--transition-bezier); + margin-block-start: 1rem; + width: min(calc(var(--content-width) / 2), 100%); + font-weight: var(--font-weight-normal); + text-decoration: none; + + &:hover { + img { + transform: var(--hover); + box-shadow: var(--edge-highlight), var(--shadow-raised); + border-radius: var(--rounded-corner-small); + } + + figcaption { + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-2); + } + } + + &:active { + transform: var(--active); + } + + figure { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin: 0; + + img { + margin: 0; + border-radius: var(--rounded-corner) var(--rounded-corner) + var(--rounded-corner-small) var(--rounded-corner-small); + aspect-ratio: 16 / 9; + object-fit: cover; + + & + figcaption { + border-radius: var(--rounded-corner-small) + var(--rounded-corner-small) var(--rounded-corner) + var(--rounded-corner); + } + } + + figcaption { + display: flex; + flex-direction: column; + gap: 0.25rem; + transition-duration: var(--transition); + transition-property: border-radius, background-color; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 1rem; + color: var(--fg-color); + font-size: var(--font-size-medium); + text-align: start; + + p { + margin: 0; + color: var(--fg-muted-2); + font-size: var(--font-size-small); + } + } + } + } + + footer { + display: flex; + grid-area: interactions; + align-items: center; + gap: 0.25rem; + margin-block-start: 1rem; + width: 100%; + min-width: 0; + + @media only screen and (max-width: 480px) { + flex-wrap: wrap; + } + + .boosts, + .faves, + .reaction { + padding: 0.375rem 0.75rem; + font-variant-numeric: tabular-nums; + white-space: nowrap; + } + + .boosts, + .faves { + transition: + box-shadow var(--transition), + border-radius var(--transition), + transform var(--transition-bezier); + border-radius: rpx(18); + text-decoration: none; + + .icon { + vertical-align: rpx(-2); + transition: transform var(--transition-bezier); + margin-inline-end: 0.25rem; + } + + &:hover { + box-shadow: var(--edge-highlight); + text-decoration: none; + } + + &:active { + transform: var(--active); + border-radius: rpx(18); + } + } + + .boosts { + border-start-end-radius: var(--rounded-corner-small); + border-end-end-radius: var(--rounded-corner-small); + padding-inline-end: 0.625rem; + color: var(--purple-fg); + + .icon { + --icon: var(--icon-repeat); + } + + &:hover { + background-color: var(--purple-bg-1); + + .icon { + transform: rotate(180deg); + } + } + } + + .faves { + border-start-start-radius: var(--rounded-corner-small); + border-end-start-radius: var(--rounded-corner-small); + padding-inline-start: 0.625rem; + color: var(--yellow-fg); + + .icon { + --icon: var(--icon-star); + } + + &:hover { + background-color: var(--yellow-bg-1); + + .icon { + transform: rotate(72deg); + } + } + } + + .reactions { + display: flex; + // flex-wrap: nowrap; + gap: 0.25rem; + margin: -0.5rem -1rem; + padding: 0.5rem 1rem; + min-width: 0; + overflow-x: auto; + scrollbar-width: none; + color: var(--accent-color); + font-weight: var(--font-weight-semi-bold); + + .reaction { + display: flex; + flex-shrink: 0; + align-items: center; + gap: 0.25rem; + cursor: zoom-in; + border: rpx(1) solid var(--bg-muted-2); + border-radius: rpx(19); + + &:hover .emoji { + transform: scale(2); + } + + .emoji { + cursor: unset; + } + + span { + font-variant-numeric: tabular-nums; + } + } + } + } + } + } } diff --git a/sass/components/_deanchor.scss b/sass/components/_deanchor.scss index 1fd7c89..b378a4a 100644 --- a/sass/components/_deanchor.scss +++ b/sass/components/_deanchor.scss @@ -2,19 +2,17 @@ @use "../citrine/abstracts/mixins" as *; .deanchor { - display: inline; - font-family: var(--font-family-mono); - font-size: var(--font-size-small); - color: var(--fg-muted-2); - background-color: var(--bg-muted-1); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - transition: - background-color var(--transition), - color var(--transition); + display: inline; + font-family: var(--font-family-mono); + font-size: var(--font-size-small); + color: var(--fg-muted-2); + background-color: var(--bg-muted-1); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + transition: background-color var(--transition), color var(--transition); - &:hover { - background-color: var(--bg-muted-2); - color: var(--fg-muted-1); - } + &:hover { + background-color: var(--bg-muted-2); + color: var(--fg-muted-1); + } } diff --git a/sass/components/_emoji.scss b/sass/components/_emoji.scss index 93570ae..4c39a3a 100644 --- a/sass/components/_emoji.scss +++ b/sass/components/_emoji.scss @@ -1,21 +1,21 @@ .emoji { - display: inline-block; - vertical-align: bottom; - transition: transform var(--transition-bezier); - cursor: zoom-in; - margin: 0; - box-shadow: none; - border-radius: 0; - background-color: transparent; - width: 1.5rem; - height: 1.5rem; + display: inline-block; + vertical-align: bottom; + transition: transform var(--transition-bezier); + cursor: zoom-in; + margin: 0; + box-shadow: none; + border-radius: 0; + background-color: transparent; + width: 1.5rem; + height: 1.5rem; - &:hover { - transform: scale(2); - } + &:hover { + transform: scale(2); + } - &.big { - width: 3rem; - height: 3rem; - } + &.big { + width: 3rem; + height: 3rem; + } } diff --git a/sass/components/_footnotes.scss b/sass/components/_footnotes.scss index c083897..d149cd3 100644 --- a/sass/components/_footnotes.scss +++ b/sass/components/_footnotes.scss @@ -2,61 +2,61 @@ @use "../citrine/abstracts/mixins" as *; .footnotes-list p { - margin-block: 0; + margin-block: 0; } .footnote-reference { - display: inline-flex; - vertical-align: baseline; - transition: - background-color var(--transition), - outline-offset calc(var(--transition-long) * 3), - transform var(--transition-bezier); - margin-inline-start: 0.25rem; - outline-offset: calc(var(--content-width) / 2) !important; - border-radius: 0.6875em; - background-color: var(--fg-muted-1); - // width: 1.375em; - line-height: 1.375em; + display: inline-flex; + vertical-align: baseline; + transition: + background-color var(--transition), + outline-offset calc(var(--transition-long) * 3), + transform var(--transition-bezier); + margin-inline-start: 0.25rem; + outline-offset: calc(var(--content-width) / 2) !important; + border-radius: 0.6875em; + background-color: var(--fg-muted-1); + // width: 1.375em; + line-height: 1.375em; - &:hover { - background-color: var(--accent-color); + &:hover { + background-color: var(--accent-color); - a::after { - mask-position: center rpx(18); - } - } + a::after { + mask-position: center rpx(18); + } + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &:target { - animation: none !important; - outline-offset: rpx(-3) !important; - background-color: var(--accent-color); - } + &:target { + animation: none !important; + outline-offset: rpx(-3) !important; + background-color: var(--accent-color); + } - a { - flex: 1; - border-radius: inherit; - padding-inline: rpx(9) rpx(6); - color: var(--bg-color); - font-size: var(--font-size-small); - font-variant-numeric: tabular-nums; - text-align: center; - text-decoration: none; + a { + flex: 1; + border-radius: inherit; + padding-inline: rpx(9) rpx(6); + color: var(--bg-color); + font-size: var(--font-size-small); + font-variant-numeric: tabular-nums; + text-align: center; + text-decoration: none; - &::after { - @include icon(pseudo); - --icon: var(--icon-caret-down); - display: inline-block; - vertical-align: rpx(-7); - mask-position: center; - mask-size: 1em; - transition: mask-position var(--transition); - margin-inline-start: 0.25rem; - height: rpx(22); - } - } + &::after { + @include icon(pseudo); + --icon: var(--icon-caret-down); + display: inline-block; + vertical-align: rpx(-7); + mask-position: center; + mask-size: 1em; + transition: mask-position var(--transition); + margin-inline-start: 0.25rem; + height: rpx(22); + } + } } diff --git a/sass/components/_fuse.scss b/sass/components/_fuse.scss index 494ef74..19f85d0 100644 --- a/sass/components/_fuse.scss +++ b/sass/components/_fuse.scss @@ -2,49 +2,47 @@ @use "../citrine/abstracts/mixins" as *; .fuse { - display: flex; - flex-direction: column; - gap: 0.5rem; - max-width: 30rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + max-width: 30rem; - .fuse-input { - width: 100%; - padding: 0.75rem 1rem; - border-radius: 0.5rem; - border: 1px solid var(--bg-muted-2); - background-color: var(--bg-muted-1); - color: var(--fg-color); - font-size: var(--font-size-medium); - transition: - border-color var(--transition), - box-shadow var(--transition); + .fuse-input { + width: 100%; + padding: 0.75rem 1rem; + border-radius: 0.5rem; + border: 1px solid var(--bg-muted-2); + background-color: var(--bg-muted-1); + color: var(--fg-color); + font-size: var(--font-size-medium); + transition: border-color var(--transition), box-shadow var(--transition); - &:focus { - outline: none; - border-color: var(--accent-color); - box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color); - } - } + &:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color); + } + } - .fuse-results { - display: flex; - flex-direction: column; - gap: 0.25rem; + .fuse-results { + display: flex; + flex-direction: column; + gap: 0.25rem; - .fuse-result { - padding: 0.5rem 0.75rem; - border-radius: 0.25rem; - background-color: var(--bg-muted-1); - text-decoration: none; - color: var(--fg-color); - transition: - background-color var(--transition), - padding-left var(--transition); + .fuse-result { + padding: 0.5rem 0.75rem; + border-radius: 0.25rem; + background-color: var(--bg-muted-1); + text-decoration: none; + color: var(--fg-color); + transition: + background-color var(--transition), + padding-left var(--transition); - &:hover { - background-color: var(--bg-muted-2); - padding-left: 1rem; - } - } - } + &:hover { + background-color: var(--bg-muted-2); + padding-left: 1rem; + } + } + } } diff --git a/sass/components/_giallo.scss b/sass/components/_giallo.scss index 0c228b4..85a1a83 100644 --- a/sass/components/_giallo.scss +++ b/sass/components/_giallo.scss @@ -1,16 +1,16 @@ .giallo:has(.giallo-ln) { - padding-inline: 0; + padding-inline: 0; } .giallo-l { - display: inline-block; - width: 100%; + display: inline-block; + width: 100%; } .giallo-ln { - display: inline-block; - margin-right: 1ch; - min-width: 3ch; - user-select: none; - text-align: right; + display: inline-block; + margin-right: 1ch; + min-width: 3ch; + user-select: none; + text-align: right; } diff --git a/sass/components/_icon.scss b/sass/components/_icon.scss index 6768a12..b0e7def 100644 --- a/sass/components/_icon.scss +++ b/sass/components/_icon.scss @@ -1,9 +1,9 @@ @use "../citrine/abstracts/mixins" as *; .icon { - @include icon; + @include icon; - &::before { - @include icon(pseudo); - } + &::before { + @include icon(pseudo); + } } diff --git a/sass/components/_iframe.scss b/sass/components/_iframe.scss index 550da8d..fb57f31 100644 --- a/sass/components/_iframe.scss +++ b/sass/components/_iframe.scss @@ -1,6 +1,6 @@ iframe { - &.vimeo-embed, - &.youtube-embed { - aspect-ratio: 16 / 9; - } + &.vimeo-embed, + &.youtube-embed { + aspect-ratio: 16 / 9; + } } diff --git a/sass/components/_index.scss b/sass/components/_index.scss index 61889d1..d63d4d8 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -22,4 +22,4 @@ @use "audio-button"; @use "deanchor"; @use "fuse"; -@use "search-fuse"; \ No newline at end of file +@use "search-fuse"; diff --git a/sass/components/_marquee.scss b/sass/components/_marquee.scss index e995c33..34ad15b 100644 --- a/sass/components/_marquee.scss +++ b/sass/components/_marquee.scss @@ -1,35 +1,35 @@ .marquee { - margin-inline: -1rem; - padding-inline: 1rem; - overflow: hidden; + margin-inline: -1rem; + padding-inline: 1rem; + overflow: hidden; - &.overshoot-row > * { - animation: marquee-scroll - calc((var(--text-width) + var(--container-width)) / 40 * 1s) linear - infinite; + &.overshoot-row > * { + animation: marquee-scroll + calc((var(--text-width) + var(--container-width)) / 40 * 1s) linear + infinite; - @keyframes marquee-scroll { - 0%, - 10% { - transform: translateX(0); - } + @keyframes marquee-scroll { + 0%, + 10% { + transform: translateX(0); + } - 45%, - 55% { - transform: translateX( - calc((var(--container-width) - var(--text-width)) * 1px) - ); - } + 45%, + 55% { + transform: translateX( + calc((var(--container-width) - var(--text-width)) * 1px) + ); + } - 90%, - 100% { - transform: translateX(0); - } - } - } + 90%, + 100% { + transform: translateX(0); + } + } + } - & > * { - display: inline-block; - white-space: nowrap; - } + & > * { + display: inline-block; + white-space: nowrap; + } } diff --git a/sass/components/_not-found.scss b/sass/components/_not-found.scss index 34b92bf..6cc76b3 100644 --- a/sass/components/_not-found.scss +++ b/sass/components/_not-found.scss @@ -1,11 +1,11 @@ picture#not-found { - display: block; + display: block; - img { - width: 8rem; - } + img { + width: 8rem; + } } img#not-found { - width: 8rem; + width: 8rem; } diff --git a/sass/components/_pre-container.scss b/sass/components/_pre-container.scss index d011d77..e553914 100644 --- a/sass/components/_pre-container.scss +++ b/sass/components/_pre-container.scss @@ -1,141 +1,141 @@ @use "../citrine/abstracts/functions" as *; .pre-container { - position: relative; - margin: 1rem 0 1rem; - box-shadow: var(--shadow); - border-radius: var(--rounded-corner); + position: relative; + margin: 1rem 0 1rem; + box-shadow: var(--shadow); + border-radius: var(--rounded-corner); - &::after { - position: absolute; - inset: 0; - box-shadow: var(--edge-highlight); - border-radius: inherit; - pointer-events: none; - content: ""; - } + &::after { + position: absolute; + inset: 0; + box-shadow: var(--edge-highlight); + border-radius: inherit; + pointer-events: none; + content: ""; + } - .header { - display: flex; - justify-content: space-between; - align-items: center; - transition: border-block-end-color var(--transition); - border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; - border-block-end: rpx(1) solid transparent; - background-image: linear-gradient( - to right, - transparent 50%, - var(--bg-muted-neutral-1) 75%, - transparent 100% - ); - background-size: 200%; - padding: 0.25rem; + .header { + display: flex; + justify-content: space-between; + align-items: center; + transition: border-block-end-color var(--transition); + border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; + border-block-end: rpx(1) solid transparent; + background-image: linear-gradient( + to right, + transparent 50%, + var(--bg-muted-neutral-1) 75%, + transparent 100% + ); + background-size: 200%; + padding: 0.25rem; - &:not(.z-l-code), - &:not(.z-d-code) { - background-color: var(--bg-muted-1); - color: var(--accent-color); + &:not(.z-l-code), + &:not(.z-d-code) { + background-color: var(--bg-muted-1); + color: var(--accent-color); - button:hover { - background-color: var(--bg-muted-1); - } + button:hover { + background-color: var(--bg-muted-1); + } - &.active { - border-block-end-color: var(--bg-muted-1); + &.active { + border-block-end-color: var(--bg-muted-1); - button { - background-color: var(--bg-muted-1); - } - } - } + button { + background-color: var(--bg-muted-1); + } + } + } - span { - margin-inline-start: 0.75rem; - font-weight: var(--font-weight-semi-bold); - } + span { + margin-inline-start: 0.75rem; + font-weight: var(--font-weight-semi-bold); + } - button { - position: relative; - transition: - box-shadow var(--transition), - background-color var(--transition), - transform var(--transition-bezier); - cursor: pointer; - box-shadow: none; - border-radius: var(--rounded-corner-small); - background-color: transparent; - padding: 0.5rem; - color: inherit; - line-height: 0; + button { + position: relative; + transition: + box-shadow var(--transition), + background-color var(--transition), + transform var(--transition-bezier); + cursor: pointer; + box-shadow: none; + border-radius: var(--rounded-corner-small); + background-color: transparent; + padding: 0.5rem; + color: inherit; + line-height: 0; - &:hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-neutral-1); - } + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-neutral-1); + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &:disabled { - cursor: not-allowed; + &:disabled { + cursor: not-allowed; - &:active { - transform: none; - } - } + &:active { + transform: none; + } + } - .icon { - transition: - opacity var(--transition-longer), - transform var(--transition-bezier-longer); - font-size: 1rem; + .icon { + transition: + opacity var(--transition-longer), + transform var(--transition-bezier-longer); + font-size: 1rem; - &.copy { - --icon: var(--icon-copy); - transform-origin: bottom left; - } + &.copy { + --icon: var(--icon-copy); + transform-origin: bottom left; + } - &.check { - --icon: var(--icon-check-square-offset); - position: absolute; - transform: scale(0.5); - transform-origin: top right; - opacity: 0; - inset: 0.5rem; - } - } - } + &.check { + --icon: var(--icon-check-square-offset); + position: absolute; + transform: scale(0.5); + transform-origin: top right; + opacity: 0; + inset: 0.5rem; + } + } + } - &.active { - animation: active-shimmer var(--transition-long); - border-block-end-color: var(--bg-muted-neutral-1); + &.active { + animation: active-shimmer var(--transition-long); + border-block-end-color: var(--bg-muted-neutral-1); - button { - opacity: 1; + button { + opacity: 1; - .icon.copy { - transform: scale(0.5); - opacity: 0; - } + .icon.copy { + transform: scale(0.5); + opacity: 0; + } - .icon.check { - transform: none; - opacity: 1; - } - } + .icon.check { + transform: none; + opacity: 1; + } + } - @keyframes active-shimmer { - to { - background-position-x: -200%; - } - } - } - } + @keyframes active-shimmer { + to { + background-position-x: -200%; + } + } + } + } - pre { - margin: 0; - box-shadow: none; - border-radius: 0 0 var(--rounded-corner) var(--rounded-corner); - } + pre { + margin: 0; + box-shadow: none; + border-radius: 0 0 var(--rounded-corner) var(--rounded-corner); + } } diff --git a/sass/components/_search-fuse.scss b/sass/components/_search-fuse.scss index 20bb5c2..c20e120 100644 --- a/sass/components/_search-fuse.scss +++ b/sass/components/_search-fuse.scss @@ -2,72 +2,70 @@ @use "../citrine/abstracts/mixins" as *; .search-fuse { - display: flex; - flex-direction: column; - gap: 0.75rem; - max-width: 40rem; - margin: 0 auto; + display: flex; + flex-direction: column; + gap: 0.75rem; + max-width: 40rem; + margin: 0 auto; - &-input-wrap { - position: relative; - display: flex; - align-items: center; - } + &-input-wrap { + position: relative; + display: flex; + align-items: center; + } - &-icon { - position: absolute; - left: 0.75rem; - color: var(--fg-muted-2); - pointer-events: none; - transition: - color var(--transition), - opacity var(--transition-bezier); - opacity: 0.7; - } + &-icon { + position: absolute; + left: 0.75rem; + color: var(--fg-muted-2); + pointer-events: none; + transition: color var(--transition), opacity var(--transition-bezier); + opacity: 0.7; + } - &-input { - width: 100%; - padding: 0.75rem 1rem 0.75rem 2.5rem; - border-radius: 0.5rem; - border: 1px solid var(--bg-muted-2); - background-color: var(--bg-muted-1); - color: var(--fg-color); - font-size: var(--font-size-medium); - transition: - border-color var(--transition), - box-shadow var(--transition), - background-color var(--transition); + &-input { + width: 100%; + padding: 0.75rem 1rem 0.75rem 2.5rem; + border-radius: 0.5rem; + border: 1px solid var(--bg-muted-2); + background-color: var(--bg-muted-1); + color: var(--fg-color); + font-size: var(--font-size-medium); + transition: + border-color var(--transition), + box-shadow var(--transition), + background-color var(--transition); - &:focus { - outline: none; - border-color: var(--accent-color); - box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color); - } + &:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color); + } - &::placeholder { - color: var(--fg-muted-2); - } - } + &::placeholder { + color: var(--fg-muted-2); + } + } - &-results { - display: flex; - flex-direction: column; - gap: 0.25rem; + &-results { + display: flex; + flex-direction: column; + gap: 0.25rem; - .search-fuse-result { - padding: 0.5rem 0.75rem; - border-radius: 0.25rem; - background-color: var(--bg-muted-1); - text-decoration: none; - color: var(--fg-color); - transition: - background-color var(--transition), - padding-left var(--transition); + .search-fuse-result { + padding: 0.5rem 0.75rem; + border-radius: 0.25rem; + background-color: var(--bg-muted-1); + text-decoration: none; + color: var(--fg-color); + transition: + background-color var(--transition), + padding-left var(--transition); - &:hover { - background-color: var(--bg-muted-2); - padding-left: 1rem; - } - } - } + &:hover { + background-color: var(--bg-muted-2); + padding-left: 1rem; + } + } + } } diff --git a/sass/components/_search-modal.scss b/sass/components/_search-modal.scss index 2174293..6c97222 100644 --- a/sass/components/_search-modal.scss +++ b/sass/components/_search-modal.scss @@ -1,128 +1,124 @@ #search-modal { - display: flex; - position: fixed; - flex-direction: column; - align-items: center; - visibility: hidden; - opacity: 0; - z-index: 9999; - transition: - visibility var(--transition), - opacity var(--transition); - inset: 0; - background-color: var(--shade-color); - padding-block-start: 15vh; - width: 100%; - height: 100vh; + display: flex; + position: fixed; + flex-direction: column; + align-items: center; + visibility: hidden; + opacity: 0; + z-index: 9999; + transition: visibility var(--transition), opacity var(--transition); + inset: 0; + background-color: var(--shade-color); + padding-block-start: 15vh; + width: 100%; + height: 100vh; - &.active { - visibility: visible; - opacity: 1; + &.active { + visibility: visible; + opacity: 1; - #search-modal-content { - transform: none; - } - } + #search-modal-content { + transform: none; + } + } - &-content { - display: flex; - flex-direction: column; - gap: 1rem; - transform: var(--hover); - backdrop-filter: var(--blur); - -webkit-backdrop-filter: var(--blur); - transition: - border-radius var(--transition), - padding var(--transition), - max-width var(--transition), - transform var(--transition-bezier-longer); - margin: -0.5rem; - box-shadow: var(--edge-highlight), var(--shadow-glass); - border-radius: 2.25rem 2.25rem 1.75rem 1.75rem; - background-color: var(--glass-bg-1); - padding: 1rem; - width: calc(100% - 2rem); - max-width: calc(var(--content-width) / 1.5); - overflow: hidden; + &-content { + display: flex; + flex-direction: column; + gap: 1rem; + transform: var(--hover); + backdrop-filter: var(--blur); + -webkit-backdrop-filter: var(--blur); + transition: + border-radius var(--transition), + padding var(--transition), + max-width var(--transition), + transform var(--transition-bezier-longer); + margin: -0.5rem; + box-shadow: var(--edge-highlight), var(--shadow-glass); + border-radius: 2.25rem 2.25rem 1.75rem 1.75rem; + background-color: var(--glass-bg-1); + padding: 1rem; + width: calc(100% - 2rem); + max-width: calc(var(--content-width) / 1.5); + overflow: hidden; - &:has(#search-results:empty) { - border-radius: 1.75rem; - padding: 0.5rem; - max-width: calc(var(--content-width) / 2); - } + &:has(#search-results:empty) { + border-radius: 1.75rem; + padding: 0.5rem; + max-width: calc(var(--content-width) / 2); + } - & > div { - position: relative; - } - } + & > div { + position: relative; + } + } - #search-input { - flex-shrink: 0; - box-shadow: var(--edge-highlight); - border-radius: 9999px; - padding: 0 1rem; - width: 100%; - height: 2.5rem; + #search-input { + flex-shrink: 0; + box-shadow: var(--edge-highlight); + border-radius: 9999px; + padding: 0 1rem; + width: 100%; + height: 2.5rem; - &:placeholder-shown + div .icon { - transform: none; - opacity: var(--disabled-opacity); - pointer-events: all; - } + &:placeholder-shown + div .icon { + transform: none; + opacity: var(--disabled-opacity); + pointer-events: all; + } - & + div .icon { - position: absolute; - transform: translateX(0.5rem); - opacity: 0; - transition: - opacity var(--transition), - transform var(--transition-bezier); - cursor: help; - inset-block-start: 0.625rem; - inset-inline-end: 1rem; - pointer-events: none; - color: var(--fg-muted-2); - font-size: 1.25rem; - } - } + & + div .icon { + position: absolute; + transform: translateX(0.5rem); + opacity: 0; + transition: opacity var(--transition), transform var(--transition-bezier); + cursor: help; + inset-block-start: 0.625rem; + inset-inline-end: 1rem; + pointer-events: none; + color: var(--fg-muted-2); + font-size: 1.25rem; + } + } - #search-results { - display: none; - flex: 1; - flex-direction: column; - gap: 0.5rem; - margin: -1rem; - padding: 1rem; - max-height: 50vh; - overflow: auto; - scrollbar-width: thin; + #search-results { + display: none; + flex: 1; + flex-direction: column; + gap: 0.5rem; + margin: -1rem; + padding: 1rem; + max-height: 50vh; + overflow: auto; + scrollbar-width: thin; - .item { - display: inline-flex; - flex-direction: column; - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - background-color: var(--bg-muted-1); - padding: 0.75rem 1rem; + .item { + display: inline-flex; + flex-direction: column; + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--bg-muted-1); + padding: 0.75rem 1rem; - a { - text-decoration: none; + a { + text-decoration: none; - &::after { - content: " →"; - } - } + &::after { + content: " →"; + } + } - span { - margin-block-start: 0.25rem; - border-block-start: rpx(1) solid var(--bg-muted-2); - padding-block-start: 0.25rem; - color: var(--fg-muted-2); + span { + margin-block-start: 0.25rem; + border-block-start: rpx(1) solid var(--bg-muted-2); + padding-block-start: 0.25rem; + color: var(--fg-muted-2); - strong { - color: var(--fg-color); - } - } - } - } + strong { + color: var(--fg-color); + } + } + } + } } diff --git a/sass/components/_skip-to-content.scss b/sass/components/_skip-to-content.scss index 1e217af..d2c64fe 100644 --- a/sass/components/_skip-to-content.scss +++ b/sass/components/_skip-to-content.scss @@ -1,23 +1,23 @@ #skip-to-content { - position: absolute; - transform: translateX(-50%) translateY(calc(-100% - 1rem)); - z-index: 9999; - transition: - backdrop-filter var(--transition), - box-shadow var(--transition), - transform var(--transition-bezier); - inset-inline-start: 50vw; - border-radius: 9999px; - background-color: var(--glass-bg-1); - padding: 0.375rem 0.75rem; - width: max-content; - text-decoration: none; + position: absolute; + transform: translateX(-50%) translateY(calc(-100% - 1rem)); + z-index: 9999; + transition: + backdrop-filter var(--transition), + box-shadow var(--transition), + transform var(--transition-bezier); + inset-inline-start: 50vw; + border-radius: 9999px; + background-color: var(--glass-bg-1); + padding: 0.375rem 0.75rem; + width: max-content; + text-decoration: none; - &:focus-visible, - &:focus { - -webkit-backdrop-filter: var(--blur); - transform: translateX(-50%) translateY(1rem); - backdrop-filter: var(--blur); - box-shadow: var(--edge-highlight), var(--shadow); - } + &:focus-visible, + &:focus { + -webkit-backdrop-filter: var(--blur); + transform: translateX(-50%) translateY(1rem); + backdrop-filter: var(--blur); + box-shadow: var(--edge-highlight), var(--shadow); + } } diff --git a/sass/components/_statements.scss b/sass/components/_statements.scss index f76e587..e23128a 100644 --- a/sass/components/_statements.scss +++ b/sass/components/_statements.scss @@ -1,61 +1,61 @@ @use "../citrine/abstracts/functions" as *; .statement-container { - margin: 1rem 0; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - padding: 1rem; + margin: 1rem 0; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + padding: 1rem; - :last-child { - margin-block-end: 0; - } + :last-child { + margin-block-end: 0; + } - & > :nth-child(2) { - margin-block-start: 0.5rem; - } + & > :nth-child(2) { + margin-block-start: 0.5rem; + } - .title { - font-weight: var(--font-weight-semi-bold); + .title { + font-weight: var(--font-weight-semi-bold); - .icon { - vertical-align: rpx(-2); - margin-inline-end: 0.25rem; - } - } + .icon { + vertical-align: rpx(-2); + margin-inline-end: 0.25rem; + } + } - &.archive { - --accent-color: var(--purple-fg); - --accent-highlight: hsla( - var(--purple-h), - var(--purple-s), - var(--purple-l), - var(--disabled-opacity) - ); - background-color: var(--purple-bg-1); - color: var(--purple-fg); - } + &.archive { + --accent-color: var(--purple-fg); + --accent-highlight: hsla( + var(--purple-h), + var(--purple-s), + var(--purple-l), + var(--disabled-opacity) + ); + background-color: var(--purple-bg-1); + color: var(--purple-fg); + } - &.disclaimer { - --accent-color: var(--red-fg); - --accent-highlight: hsla( - var(--red-h), - var(--red-s), - var(--red-l), - var(--disabled-opacity) - ); - background-color: var(--red-bg-1); - color: var(--red-fg); - } + &.disclaimer { + --accent-color: var(--red-fg); + --accent-highlight: hsla( + var(--red-h), + var(--red-s), + var(--red-l), + var(--disabled-opacity) + ); + background-color: var(--red-bg-1); + color: var(--red-fg); + } - &.trigger { - --accent-color: var(--yellow-fg); - --accent-highlight: hsla( - var(--yellow-h), - var(--yellow-s), - var(--yellow-l), - var(--disabled-opacity) - ); - background-color: var(--yellow-bg-1); - color: var(--yellow-fg); - } + &.trigger { + --accent-color: var(--yellow-fg); + --accent-highlight: hsla( + var(--yellow-h), + var(--yellow-s), + var(--yellow-l), + var(--disabled-opacity) + ); + background-color: var(--yellow-bg-1); + color: var(--yellow-fg); + } } diff --git a/sass/components/_tag-chips.scss b/sass/components/_tag-chips.scss index df38adc..cb009bf 100644 --- a/sass/components/_tag-chips.scss +++ b/sass/components/_tag-chips.scss @@ -1,59 +1,59 @@ @use "../citrine/abstracts/functions" as *; #tag-chips { - display: flex; - flex-wrap: wrap; - gap: 0.25rem; - margin: 0; - padding-inline-start: 0; - list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin: 0; + padding-inline-start: 0; + list-style: none; - li { - display: flex; - margin-block: 0; - padding-inline-start: 0; - } + li { + display: flex; + margin-block: 0; + padding-inline-start: 0; + } - a { - display: flex; - transition: - background-color var(--transition), - color var(--transition), - transform var(--transition-bezier); - box-shadow: var(--edge-highlight); - border-radius: 1rem; - background-color: var(--bg-muted-1); - padding: 0.25rem; - padding-inline-start: 0.75rem; - color: var(--fg-muted-1); - font-size: var(--font-size-small); - line-height: 1.5rem; - text-decoration: none; + a { + display: flex; + transition: + background-color var(--transition), + color var(--transition), + transform var(--transition-bezier); + box-shadow: var(--edge-highlight); + border-radius: 1rem; + background-color: var(--bg-muted-1); + padding: 0.25rem; + padding-inline-start: 0.75rem; + color: var(--fg-muted-1); + font-size: var(--font-size-small); + line-height: 1.5rem; + text-decoration: none; - &:hover { - background-color: var(--bg-muted-2); - color: var(--fg-muted-2); - } + &:hover { + background-color: var(--bg-muted-2); + color: var(--fg-muted-2); + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &::before { - content: "#"; - } + &::before { + content: "#"; + } - .counter { - transition: inherit; - margin-inline-start: 0.375rem; - box-shadow: var(--edge-highlight); - border-radius: inherit; - background-color: inherit; - aspect-ratio: 1 / 1; - height: 1.5rem; - line-height: 1.5rem; - font-variant-numeric: tabular-nums; - text-align: center; - } - } + .counter { + transition: inherit; + margin-inline-start: 0.375rem; + box-shadow: var(--edge-highlight); + border-radius: inherit; + background-color: inherit; + aspect-ratio: 1 / 1; + height: 1.5rem; + line-height: 1.5rem; + font-variant-numeric: tabular-nums; + text-align: center; + } + } } diff --git a/sass/components/_zola-anchor.scss b/sass/components/_zola-anchor.scss index f942600..e62fe50 100644 --- a/sass/components/_zola-anchor.scss +++ b/sass/components/_zola-anchor.scss @@ -4,47 +4,47 @@ h3, h4, h5, h6 { - &:hover .zola-anchor { - transform: none; - opacity: 1; - } + &:hover .zola-anchor { + transform: none; + opacity: 1; + } - &:has(.zola-anchor) { - position: relative; - } + &:has(.zola-anchor) { + position: relative; + } } .zola-anchor { - position: absolute; - transform: translateX(0.25em); - opacity: 0; - transition: - color var(--transition), - opacity var(--transition), - transform var(--transition-bezier); - inset-inline-start: -1.25em; - padding-inline-end: 0.25em; - color: var(--fg-muted-1); - line-height: 1; + position: absolute; + transform: translateX(0.25em); + opacity: 0; + transition: + color var(--transition), + opacity var(--transition), + transform var(--transition-bezier); + inset-inline-start: -1.25em; + padding-inline-end: 0.25em; + color: var(--fg-muted-1); + line-height: 1; - @media only screen and (max-width: 720px) { - display: none; - } + @media only screen and (max-width: 720px) { + display: none; + } - &:hover { - color: var(--fg-muted-2); - } + &:hover { + color: var(--fg-muted-2); + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &:focus-visible { - opacity: 1; - } + &:focus-visible { + opacity: 1; + } } :target .zola-anchor { - transform: none; - opacity: var(--disabled-opacity); + transform: none; + opacity: var(--disabled-opacity); } diff --git a/sass/components/_zola-error.scss b/sass/components/_zola-error.scss index 433f6cc..45bb82c 100644 --- a/sass/components/_zola-error.scss +++ b/sass/components/_zola-error.scss @@ -1,55 +1,55 @@ // Based on https://github.com/welpo/tabi/blob/68c35b02f8c09e21ecff48f61bad6da3d96ce337/sass/parts/_zola-error.scss body > div:last-child:has(div:last-child[style]:not([class]):not([id])) { - z-index: 9999 !important; - background-color: var(--shade-color) !important; + z-index: 9999 !important; + background-color: var(--shade-color) !important; } body > div:last-child > div:last-child[style]:not([class]):not([id]) { - box-shadow: var(--edge-highlight), var(--shadow-glass); - border-radius: calc(var(--rounded-corner) + 1rem) !important; - background-color: hsla( - var(--red-h), - calc(var(--red-s) - var(--red-s) * 0.7), - calc(var(--red-l) + (100% - var(--red-l)) * 0.9), - var(--dim-opacity) - ) !important; - padding: 1rem !important; - width: fit-content; - max-width: calc(100% - 2rem); - -webkit-backdrop-filter: var(--blur); - backdrop-filter: var(--blur); - filter: none !important; + box-shadow: var(--edge-highlight), var(--shadow-glass); + border-radius: calc(var(--rounded-corner) + 1rem) !important; + background-color: hsla( + var(--red-h), + calc(var(--red-s) - var(--red-s) * 0.7), + calc(var(--red-l) + (100% - var(--red-l)) * 0.9), + var(--dim-opacity) + ) !important; + padding: 1rem !important; + width: fit-content; + max-width: calc(100% - 2rem); + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); + filter: none !important; - @media (prefers-color-scheme: dark) { - & { - background-color: hsla( - var(--red-h), - calc(var(--red-s) - var(--red-s) * 0.6), - calc(var(--red-l) - var(--red-l) * 0.8), - var(--dim-opacity) - ) !important; - } - } + @media (prefers-color-scheme: dark) { + & { + background-color: hsla( + var(--red-h), + calc(var(--red-s) - var(--red-s) * 0.6), + calc(var(--red-l) - var(--red-l) * 0.8), + var(--dim-opacity) + ) !important; + } + } } body - > div:last-child - > div:last-child[style]:not([class]):not([id]) - > p[style]:first-child { - margin-block-end: 1rem !important; - color: var(--red-fg) !important; - font-weight: var(--font-weight-semi-bold) !important; - font-size: var(--font-size-large) !important; + > div:last-child + > div:last-child[style]:not([class]):not([id]) + > p[style]:first-child { + margin-block-end: 1rem !important; + color: var(--red-fg) !important; + font-weight: var(--font-weight-semi-bold) !important; + font-size: var(--font-size-large) !important; } body - > div:last-child - > div:last-child[style]:not([class]):not([id]) - > pre[style]:last-child { - border-radius: var(--rounded-corner) !important; - background-color: var(--red-bg-1) !important; - padding: 0.75rem 1rem !important; - color: var(--red-fg) !important; - font-weight: var(--font-weight-normal) !important; + > div:last-child + > div:last-child[style]:not([class]):not([id]) + > pre[style]:last-child { + border-radius: var(--rounded-corner) !important; + background-color: var(--red-bg-1) !important; + padding: 0.75rem 1rem !important; + color: var(--red-fg) !important; + font-weight: var(--font-weight-normal) !important; } diff --git a/sass/fonts.scss b/sass/fonts.scss index a148e87..8dee45e 100644 --- a/sass/fonts.scss +++ b/sass/fonts.scss @@ -2,51 +2,51 @@ $commissioner-version: "1.012.1"; $commit-mono-version: "1.143"; :root { - --font-sans-serif: "Commissioner"; - --font-monospace: "Commit Mono"; + --font-sans-serif: "Commissioner"; + --font-monospace: "Commit Mono"; } // Commissioner @font-face { - font-style: normal; - font-weight: 100 900; - src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}") - format("woff2"); - font-family: "Commissioner"; - font-display: swap; - // Fix vertical alignment, - // See https://github.com/kosbarts/Commissioner/issues/55 - ascent-override: 96.3%; - descent-override: 25%; + font-style: normal; + font-weight: 100 900; + src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}") + format("woff2"); + font-family: "Commissioner"; + font-display: swap; + // Fix vertical alignment, + // See https://github.com/kosbarts/Commissioner/issues/55 + ascent-override: 96.3%; + descent-override: 25%; } @font-face { - font-style: italic; - font-weight: 100 900; - src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}") - format("woff2"); - font-family: "Commissioner"; - font-display: swap; - font-variation-settings: "slnt" -12; - // Ditto - ascent-override: 96.3%; - descent-override: 25%; + font-style: italic; + font-weight: 100 900; + src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}") + format("woff2"); + font-family: "Commissioner"; + font-display: swap; + font-variation-settings: "slnt" -12; + // Ditto + ascent-override: 96.3%; + descent-override: 25%; } // Commit Mono @font-face { - font-style: normal; - font-weight: 100 900; - src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2"); - font-family: "Commit Mono"; - font-display: swap; + font-style: normal; + font-weight: 100 900; + src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2"); + font-family: "Commit Mono"; + font-display: swap; } @font-face { - font-style: italic; - font-weight: 100 900; - src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2"); - font-family: "Commit Mono"; - font-display: swap; - font-variation-settings: "ital" 1; + font-style: italic; + font-weight: 100 900; + src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2"); + font-family: "Commit Mono"; + font-display: swap; + font-variation-settings: "ital" 1; } diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss index 25a09fe..379c856 100644 --- a/sass/layout/_footer.scss +++ b/sass/layout/_footer.scss @@ -2,139 +2,137 @@ @use "../citrine/abstracts/mixins" as *; #site-footer { - --padding: 1rem; - display: flex; - grid-area: footer; - gap: 1rem; - margin-block: 3.25rem 1rem; - border-block-start: rpx(1) solid var(--bg-muted-2); - padding: 1rem; - width: 100%; - min-width: 0; - max-width: calc(var(--content-width) + var(--padding) * 2); + --padding: 1rem; + display: flex; + grid-area: footer; + gap: 1rem; + margin-block: 3.25rem 1rem; + border-block-start: rpx(1) solid var(--bg-muted-2); + padding: 1rem; + width: 100%; + min-width: 0; + max-width: calc(var(--content-width) + var(--padding) * 2); - @media only screen and (max-width: 480px) { - flex-direction: column-reverse; - } + @media only screen and (max-width: 480px) { + flex-direction: column-reverse; + } - & > div { - display: flex; - flex: 1; - flex-direction: column; - gap: 1rem; + & > div { + display: flex; + flex: 1; + flex-direction: column; + gap: 1rem; - p { - margin: 0; - } + p { + margin: 0; + } - &:nth-of-type(1) { - color: var(--fg-muted-2); - font-size: var(--font-size-small); - } + &:nth-of-type(1) { + color: var(--fg-muted-2); + font-size: var(--font-size-small); + } - &:nth-of-type(2) { - justify-content: space-between; - align-items: flex-end; - text-align: end; + &:nth-of-type(2) { + justify-content: space-between; + align-items: flex-end; + text-align: end; - @media only screen and (max-width: 480px) { - align-items: normal; - text-align: start; - } - } - } + @media only screen and (max-width: 480px) { + align-items: normal; + text-align: start; + } + } + } - a.external::after { - margin-inline-start: 0.25rem; - } + a.external::after { + margin-inline-start: 0.25rem; + } - .link { - @include chip; - display: inline-block; - line-height: 1.5rem; + .link { + @include chip; + display: inline-block; + line-height: 1.5rem; - &:hover { - background-color: var(--bg-muted-2); - } + &:hover { + background-color: var(--bg-muted-2); + } - &:active { - transform: var(--active); - } - } + &:active { + transform: var(--active); + } + } - // IMO it's pretty cute - .webrings { - display: flex; - flex-direction: column; - gap: 0.25rem; - margin-block: 0; - padding-inline-start: 0; - list-style: none; - } + // IMO it's pretty cute + .webrings { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-block: 0; + padding-inline-start: 0; + list-style: none; + } - .webring { - display: flex; - gap: 0.25rem; - margin-block: 0; - padding-inline-start: 0; + .webring { + display: flex; + gap: 0.25rem; + margin-block: 0; + padding-inline-start: 0; - .random, - .previous, - .next { - display: inline-flex; - justify-content: center; - align-items: center; - border-radius: 9999px; - padding: 0.25rem; - font-size: 1rem; - } - } + .random, + .previous, + .next { + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 9999px; + padding: 0.25rem; + font-size: 1rem; + } + } - .timestamp { - color: var(--fg-muted-1); - font-size: var(--font-size-xx-small); - font-family: var(--font-monospace); - text-transform: uppercase; - } + .timestamp { + color: var(--fg-muted-1); + font-size: var(--font-size-xx-small); + font-family: var(--font-monospace); + text-transform: uppercase; + } - .socials { - display: flex; - justify-content: flex-end; - gap: 0.75rem; - margin: 0; - padding-inline-start: 0; - list-style: none; + .socials { + display: flex; + justify-content: flex-end; + gap: 0.75rem; + margin: 0; + padding-inline-start: 0; + list-style: none; - @media only screen and (max-width: 480px) { - justify-content: normal; - } + @media only screen and (max-width: 480px) { + justify-content: normal; + } - li { - margin-block: 0; - padding-inline-start: 0; - } + li { + margin-block: 0; + padding-inline-start: 0; + } - a { - display: flex; - transition: - color var(--transition), - transform var(--transition-bezier); - height: fit-content; - color: var(--fg-muted-1); + a { + display: flex; + transition: color var(--transition), transform var(--transition-bezier); + height: fit-content; + color: var(--fg-muted-1); - &:hover { - color: var(--fg-muted-2); - } + &:hover { + color: var(--fg-muted-2); + } - &:active { - transform: var(--active); - } - } + &:active { + transform: var(--active); + } + } - svg { - fill: currentColor; - width: 1.5rem; - height: 1.5rem; - } - } + svg { + fill: currentColor; + width: 1.5rem; + height: 1.5rem; + } + } } diff --git a/sass/layout/_full-bleed.scss b/sass/layout/_full-bleed.scss index 85e9fd3..2405261 100644 --- a/sass/layout/_full-bleed.scss +++ b/sass/layout/_full-bleed.scss @@ -1,13 +1,13 @@ .full-bleed { - transform: translateX(-50%); - margin-inline-start: 50%; - width: calc(100vw - var(--sidebar-width)); + transform: translateX(-50%); + margin-inline-start: 50%; + width: calc(100vw - var(--sidebar-width)); - :root[dir*="rtl"] & { - transform: translateX(50%); - } + :root[dir*="rtl"] & { + transform: translateX(50%); + } - @media only screen and (max-width: 960px) { - width: calc(100vw - 3.5rem); - } + @media only screen and (max-width: 960px) { + width: calc(100vw - 3.5rem); + } } diff --git a/sass/layout/_grid.scss b/sass/layout/_grid.scss index 6a8b9db..40f85f8 100644 --- a/sass/layout/_grid.scss +++ b/sass/layout/_grid.scss @@ -1,16 +1,16 @@ body { - display: grid; - grid-template-rows: auto auto 1fr auto; - grid-template-columns: var(--sidebar-width) 1fr; - grid-template-areas: - "sidebar header" - "sidebar banner" - "sidebar main " - "sidebar footer"; - justify-items: center; - transition: grid-template-columns var(--transition); + display: grid; + grid-template-rows: auto auto 1fr auto; + grid-template-columns: var(--sidebar-width) 1fr; + grid-template-areas: + "sidebar header" + "sidebar banner" + "sidebar main " + "sidebar footer"; + justify-items: center; + transition: grid-template-columns var(--transition); - @media only screen and (max-width: 960px) { - grid-template-columns: 0 1fr; - } + @media only screen and (max-width: 960px) { + grid-template-columns: 0 1fr; + } } diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss index 0ecab63..5e240a7 100644 --- a/sass/layout/_header.scss +++ b/sass/layout/_header.scss @@ -2,346 +2,344 @@ @use "../citrine/abstracts/mixins" as *; #site-header { - display: flex; - position: sticky; - grid-area: header; - // height: 3rem; - justify-content: space-between; - // flex-wrap: nowrap; - align-items: center; - gap: 0.25rem; - z-index: 2; - // height: 3.75rem; - inset-block-start: 0; - // padding: 0.5rem 0.75rem; - padding: 0.5rem; - width: 100%; - min-width: 0; + display: flex; + position: sticky; + grid-area: header; + // height: 3rem; + justify-content: space-between; + // flex-wrap: nowrap; + align-items: center; + gap: 0.25rem; + z-index: 2; + // height: 3.75rem; + inset-block-start: 0; + // padding: 0.5rem 0.75rem; + padding: 0.5rem; + width: 100%; + min-width: 0; - &::before, - &::after { - position: absolute; - inset: 0; - @include easing-mask(bottom); - inset-block-end: -100%; - pointer-events: none; - content: ""; - } + &::before, + &::after { + position: absolute; + inset: 0; + @include easing-mask(bottom); + inset-block-end: -100%; + pointer-events: none; + content: ""; + } - &::before { - z-index: -2; - backdrop-filter: var(--blur); - -webkit-backdrop-filter: var(--blur); - } + &::before { + z-index: -2; + backdrop-filter: var(--blur); + -webkit-backdrop-filter: var(--blur); + } - &::after { - z-index: -1; - background-color: var(--bg-color); - } + &::after { + z-index: -1; + background-color: var(--bg-color); + } - .title { - margin-inline: 0.75rem; - min-width: 0; - overflow: hidden; - color: var(--fg-muted-2); - font-size: var(--font-size-small); - line-height: 2rem; - text-overflow: ellipsis; - white-space: nowrap; - } + .title { + margin-inline: 0.75rem; + min-width: 0; + overflow: hidden; + color: var(--fg-muted-2); + font-size: var(--font-size-small); + line-height: 2rem; + text-overflow: ellipsis; + white-space: nowrap; + } - .buttons { - display: flex; - flex-wrap: nowrap; - gap: 0.25rem; - margin: 0; - // margin-inline-start: auto; - box-shadow: var(--edge-highlight), var(--shadow-glass); - border-radius: 1.125rem; - background-color: var(--glass-bg-1); - padding: 0.25rem; - list-style: none; + .buttons { + display: flex; + flex-wrap: nowrap; + gap: 0.25rem; + margin: 0; + // margin-inline-start: auto; + box-shadow: var(--edge-highlight), var(--shadow-glass); + border-radius: 1.125rem; + background-color: var(--glass-bg-1); + padding: 0.25rem; + list-style: none; - li { - flex: 0; - margin-block: 0; - padding-inline-start: 0; - } + li { + flex: 0; + margin-block: 0; + padding-inline-start: 0; + } - & > li { - height: fit-content; - line-height: 0; - } + & > li { + height: fit-content; + line-height: 0; + } - button, - details { - box-shadow: none; - background-color: transparent; - line-height: inherit; + button, + details { + box-shadow: none; + background-color: transparent; + line-height: inherit; - .icon { - margin-inline-end: 0; - box-shadow: none; - background-color: transparent; - padding: 0; - } - } + .icon { + margin-inline-end: 0; + box-shadow: none; + background-color: transparent; + padding: 0; + } + } - button, - summary { - border-radius: 50%; - padding: 0.375rem; + button, + summary { + border-radius: 50%; + padding: 0.375rem; - &:hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - color: var(--fg-muted-2); - } + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + color: var(--fg-muted-2); + } - &:active { - transform: var(--active); - } - } + &:active { + transform: var(--active); + } + } - details { - box-shadow: none; - border-radius: 0; - padding: 0; - } + details { + box-shadow: none; + border-radius: 0; + padding: 0; + } - button { - font-size: var(--font-size-medium); - } + button { + font-size: var(--font-size-medium); + } - summary { - &:hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - } + summary { + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + } - &::before { - display: none; - } - } + &::before { + display: none; + } + } - details { - display: block; - position: relative; - margin-block-end: 0; + details { + display: block; + position: relative; + margin-block-end: 0; - &::details-content { - block-size: auto; - } + &::details-content { + block-size: auto; + } - &[open] { - &::details-content { - block-size: auto; - } + &[open] { + &::details-content { + block-size: auto; + } - summary { - color: var(--fg-muted-1); + summary { + color: var(--fg-muted-1); - &:hover { - color: var(--fg-muted-2); - } - } + &:hover { + color: var(--fg-muted-2); + } + } - @supports not (block-size: calc-size(auto, size)) { - summary ~ * { - animation: none; - } - } - } - } - } + @supports not (block-size: calc-size(auto, size)) { + summary ~ * { + animation: none; + } + } + } + } + } } .buttons .dropdown { - display: flex; - position: absolute; - flex-direction: column; - gap: 0.25rem; - transform-origin: top right; - z-index: 1; - backdrop-filter: var(--blur); - -webkit-backdrop-filter: var(--blur); - animation: expand-up-right var(--transition-bezier); - inset-block-start: calc(100% + 0.75rem); - inset-inline-end: -0.25rem; - box-shadow: var(--edge-highlight), var(--shadow-glass); - border-radius: calc(var(--rounded-corner) + 0.25rem); - background-color: var(--glass-bg-1); - padding: 0.25rem; - width: max-content; - min-width: 8rem; - list-style: none; + display: flex; + position: absolute; + flex-direction: column; + gap: 0.25rem; + transform-origin: top right; + z-index: 1; + backdrop-filter: var(--blur); + -webkit-backdrop-filter: var(--blur); + animation: expand-up-right var(--transition-bezier); + inset-block-start: calc(100% + 0.75rem); + inset-inline-end: -0.25rem; + box-shadow: var(--edge-highlight), var(--shadow-glass); + border-radius: calc(var(--rounded-corner) + 0.25rem); + background-color: var(--glass-bg-1); + padding: 0.25rem; + width: max-content; + min-width: 8rem; + list-style: none; - :root[dir*="rtl"] & { - transform-origin: top left; - animation: expand-up-left var(--transition-bezier); - } + :root[dir*="rtl"] & { + transform-origin: top left; + animation: expand-up-left var(--transition-bezier); + } - li { - flex: 1; - } + li { + flex: 1; + } - a { - box-shadow: none; - border-radius: var(--rounded-corner); - background-color: transparent; - padding: 0.375rem 0.75rem; - width: 100%; + a { + box-shadow: none; + border-radius: var(--rounded-corner); + background-color: transparent; + padding: 0.375rem 0.75rem; + width: 100%; - &:hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1) !important; - } - } + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1) !important; + } + } } #site-sidebar-controls { - display: flex; - flex-shrink: 0; - gap: 0.25rem; - transition: - width var(--transition), - visibility var(--transition); - margin-block: 0; - box-shadow: var(--edge-highlight), var(--shadow-glass); - border-radius: 1.125rem; - background-color: var(--glass-bg-1); - padding: 0.25rem; - height: fit-content; - line-height: 0; - list-style: none; + display: flex; + flex-shrink: 0; + gap: 0.25rem; + transition: width var(--transition), visibility var(--transition); + margin-block: 0; + box-shadow: var(--edge-highlight), var(--shadow-glass); + border-radius: 1.125rem; + background-color: var(--glass-bg-1); + padding: 0.25rem; + height: fit-content; + line-height: 0; + list-style: none; - @media only screen and (max-width: 960px) { - width: 2.25rem; + @media only screen and (max-width: 960px) { + width: 2.25rem; - &:has(#expand-sidebar:checked) { - width: 6.25rem; + &:has(#expand-sidebar:checked) { + width: 6.25rem; - #site-sidebar-modes { - transform: none; - visibility: visible; - opacity: 1; - } - } - } + #site-sidebar-modes { + transform: none; + visibility: visible; + opacity: 1; + } + } + } - ul { - padding-inline-start: 0; - list-style: none; - } + ul { + padding-inline-start: 0; + list-style: none; + } - li { - display: inline-block; - margin-block: 0; - padding-inline-start: 0; + li { + display: inline-block; + margin-block: 0; + padding-inline-start: 0; - label { - display: inline-block; - transition: - box-shadow var(--transition), - background-color var(--transition), - color var(--transition), - transform var(--transition-bezier); - cursor: pointer; - border-radius: 50%; - padding: 0.375rem; - height: fit-content; - color: var(--fg-muted-1); - line-height: 0; + label { + display: inline-block; + transition: + box-shadow var(--transition), + background-color var(--transition), + color var(--transition), + transform var(--transition-bezier); + cursor: pointer; + border-radius: 50%; + padding: 0.375rem; + height: fit-content; + color: var(--fg-muted-1); + line-height: 0; - &:hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - color: var(--fg-muted-2); - } + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + color: var(--fg-muted-2); + } - &:active { - transform: var(--active); - } - } + &:active { + transform: var(--active); + } + } - input[type="radio"] { - & + label { - position: relative; - z-index: 1; + input[type="radio"] { + & + label { + position: relative; + z-index: 1; - &::before { - @include gradient-fill; - position: absolute; - opacity: 0; - z-index: -1; - transition: - opacity var(--transition), - box-shadow var(--transition), - background-color var(--transition); - inset: 0; - border-radius: inherit; - content: ""; - } - } + &::before { + @include gradient-fill; + position: absolute; + opacity: 0; + z-index: -1; + transition: + opacity var(--transition), + box-shadow var(--transition), + background-color var(--transition); + inset: 0; + border-radius: inherit; + content: ""; + } + } - &:checked + label { - color: var(--contrast-color); + &:checked + label { + color: var(--contrast-color); - &:hover { - box-shadow: none; - background-color: transparent; - } + &:hover { + box-shadow: none; + background-color: transparent; + } - &:hover::before { - box-shadow: var(--edge-highlight); - background-color: var(--accent-color); - } + &:hover::before { + box-shadow: var(--edge-highlight); + background-color: var(--accent-color); + } - &::before { - opacity: 1; - } - } - } + &::before { + opacity: 1; + } + } + } - input[type="radio"], - input[type="checkbox"] { - &:focus-visible + label { - animation: focus-in var(--transition); - outline: 0.125rem solid var(--accent-color); - outline-offset: 0.125rem; - } + input[type="radio"], + input[type="checkbox"] { + &:focus-visible + label { + animation: focus-in var(--transition); + outline: 0.125rem solid var(--accent-color); + outline-offset: 0.125rem; + } - @supports not selector(:focus-visible) { - &:focus + label { - animation: focus-in var(--transition); - outline: 0.125rem solid var(--accent-color); - outline-offset: 0.125rem; - } - } - } - } + @supports not selector(:focus-visible) { + &:focus + label { + animation: focus-in var(--transition); + outline: 0.125rem solid var(--accent-color); + outline-offset: 0.125rem; + } + } + } + } - #expand-sidebar-li { - display: none; + #expand-sidebar-li { + display: none; - @media only screen and (max-width: 960px) { - display: inline-block; - } - } + @media only screen and (max-width: 960px) { + display: inline-block; + } + } } #site-sidebar-modes { - display: flex; - gap: 0.25rem; - transform-origin: left; - transition: - visibility var(--transition), - opacity var(--transition), - transform var(--transition); + display: flex; + gap: 0.25rem; + transform-origin: left; + transition: + visibility var(--transition), + opacity var(--transition), + transform var(--transition); - @media only screen and (max-width: 960px) { - transform: translateX(-2.25rem); - visibility: hidden; - opacity: 0; - } + @media only screen and (max-width: 960px) { + transform: translateX(-2.25rem); + visibility: hidden; + opacity: 0; + } } diff --git a/sass/layout/_index.scss b/sass/layout/_index.scss index b6da0b7..0534650 100644 --- a/sass/layout/_index.scss +++ b/sass/layout/_index.scss @@ -3,4 +3,4 @@ @use "grid"; @use "header"; @use "main-content"; -@use "sidebar"; \ No newline at end of file +@use "sidebar"; diff --git a/sass/layout/_main-content.scss b/sass/layout/_main-content.scss index 1c7c3b7..c94a475 100644 --- a/sass/layout/_main-content.scss +++ b/sass/layout/_main-content.scss @@ -1,59 +1,59 @@ #main-content { - --padding: 1rem; - grid-area: main; - transform-origin: 50% 50vh; - animation: fade-in-zoom var(--transition-bezier-longer); - margin-block-start: 3.25rem; - padding-inline: 1rem; - width: 100%; - min-width: 0; - max-width: calc(var(--content-width) + var(--padding) * 2); + --padding: 1rem; + grid-area: main; + transform-origin: 50% 50vh; + animation: fade-in-zoom var(--transition-bezier-longer); + margin-block-start: 3.25rem; + padding-inline: 1rem; + width: 100%; + min-width: 0; + max-width: calc(var(--content-width) + var(--padding) * 2); - @supports (transform-origin: 50% 50dvh) { - transform-origin: 50% 50dvh; - } + @supports (transform-origin: 50% 50dvh) { + transform-origin: 50% 50dvh; + } - & > :first-child { - margin-block-start: 0; - } + & > :first-child { + margin-block-start: 0; + } - & > :last-child { - margin-block-end: 0; - } + & > :last-child { + margin-block-end: 0; + } - @keyframes fade-in-zoom { - from { - transform: scale(0.95); - opacity: 0; - } - } + @keyframes fade-in-zoom { + from { + transform: scale(0.95); + opacity: 0; + } + } } // Don't play animation when jumping to section :target ~ #main-content { - animation-name: none; + animation-name: none; } // Loading animation when going up in the sidebar #↑:target ~ #main-content, #up:target ~ #main-content { - animation-name: slide-in-up-longer; + animation-name: slide-in-up-longer; } // Loading animation when going down in the sidebar #↓:target ~ #main-content, #down:target ~ #main-content { - animation-name: slide-in-down-longer; + animation-name: slide-in-down-longer; } // Loading animation when going to the previous article #←:target ~ #main-content, #left:target ~ #main-content { - animation-name: slide-in-left-longer; + animation-name: slide-in-left-longer; } // Loading animation when going to the next article #→:target ~ #main-content, #right:target ~ #main-content { - animation-name: slide-in-right-longer; + animation-name: slide-in-right-longer; } diff --git a/sass/layout/_sidebar.scss b/sass/layout/_sidebar.scss index 6f7655e..a801b81 100644 --- a/sass/layout/_sidebar.scss +++ b/sass/layout/_sidebar.scss @@ -2,774 +2,780 @@ @use "../citrine/abstracts/mixins" as *; #site-sidebar { - display: flex; - position: sticky; - grid-area: sidebar; - flex-direction: column; - z-index: 3; - transition-duration: var(--transition); - transition-property: - visibility, transform, inset-block-start, box-shadow, border-inline-end, - border-start-end-radius, border-end-end-radius, height; - inset-block-start: 0; - inset-inline-start: 0; - border-inline-end: rpx(1) solid var(--bg-muted-2); - width: var(--sidebar-width); - height: 100vh; + display: flex; + position: sticky; + grid-area: sidebar; + flex-direction: column; + z-index: 3; + transition-duration: var(--transition); + transition-property: + visibility, + transform, + inset-block-start, + box-shadow, + border-inline-end, + border-start-end-radius, + border-end-end-radius, + height; + inset-block-start: 0; + inset-inline-start: 0; + border-inline-end: rpx(1) solid var(--bg-muted-2); + width: var(--sidebar-width); + height: 100vh; - @supports (height: 100dvh) { - height: 100dvh; - } + @supports (height: 100dvh) { + height: 100dvh; + } - @media only screen and (max-width: 960px) { - transform: translateX(-100%); - visibility: hidden; - inset-block-start: 3.25rem; - box-shadow: var(--edge-highlight), var(--shadow); - border-inline-end: 0 solid transparent; - border-start-end-radius: var(--rounded-corner); - border-end-end-radius: var(--rounded-corner); - height: calc(100vh - 3.75rem); + @media only screen and (max-width: 960px) { + transform: translateX(-100%); + visibility: hidden; + inset-block-start: 3.25rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-inline-end: 0 solid transparent; + border-start-end-radius: var(--rounded-corner); + border-end-end-radius: var(--rounded-corner); + height: calc(100vh - 3.75rem); - :root[dir*="rtl"] & { - transform: translateX(100%); - } + :root[dir*="rtl"] & { + transform: translateX(100%); + } - @supports (height: 100dvh) { - height: calc(100dvh - 3.75rem); - } + @supports (height: 100dvh) { + height: calc(100dvh - 3.75rem); + } - #site-header:has(#expand-sidebar:checked) ~ & { - transform: none; - visibility: visible; - backdrop-filter: var(--blur); - -webkit-backdrop-filter: var(--blur); - background-color: var(--glass-bg-1); - } - } + #site-header:has(#expand-sidebar:checked) ~ & { + transform: none; + visibility: visible; + backdrop-filter: var(--blur); + -webkit-backdrop-filter: var(--blur); + background-color: var(--glass-bg-1); + } + } - &-content { - display: flex; - position: relative; - flex: 1; - overflow: hidden; - } + &-content { + display: flex; + position: relative; + flex: 1; + overflow: hidden; + } } #site-sidebar-header { - display: flex; - align-items: center; - transform-origin: rpx(22) 50%; - transition: - box-shadow var(--transition), - background-color var(--transition), - color var(--transition), - transform var(--transition-bezier); - margin: 1rem; - margin-block-end: 0; - border-radius: 1.375rem; - padding: 0.25rem; - padding-inline-end: 0.75rem; - min-width: 0; - color: var(--fg-muted-1); - text-decoration: none; + display: flex; + align-items: center; + transform-origin: rpx(22) 50%; + transition: + box-shadow var(--transition), + background-color var(--transition), + color var(--transition), + transform var(--transition-bezier); + margin: 1rem; + margin-block-end: 0; + border-radius: 1.375rem; + padding: 0.25rem; + padding-inline-end: 0.75rem; + min-width: 0; + color: var(--fg-muted-1); + text-decoration: none; - &:hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - color: var(--fg-muted-2); + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + color: var(--fg-muted-2); - .icon { - background-color: var(--bg-muted-2); - } - } + .icon { + background-color: var(--bg-muted-2); + } + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - img { - margin: 0; - } + img { + margin: 0; + } - img, - .icon { - margin-inline-end: 0.5rem; - border-radius: 50%; - } + img, + .icon { + margin-inline-end: 0.5rem; + border-radius: 50%; + } - img { - width: 2.25rem; - height: 2.25rem; - } + img { + width: 2.25rem; + height: 2.25rem; + } - .icon { - transition: background-color var(--transition); - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - padding: 0.5rem; - font-size: 1.25rem; - } + .icon { + transition: background-color var(--transition); + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + padding: 0.5rem; + font-size: 1.25rem; + } - div { - display: flex; - flex: 1; - flex-direction: column; - gap: 0.125rem; - min-width: 0; - line-height: 1.25; + div { + display: flex; + flex: 1; + flex-direction: column; + gap: 0.125rem; + min-width: 0; + line-height: 1.25; - span:nth-of-type(1) { - overflow: hidden; - font-size: var(--font-size-small); - text-overflow: ellipsis; - white-space: nowrap; - } + span:nth-of-type(1) { + overflow: hidden; + font-size: var(--font-size-small); + text-overflow: ellipsis; + white-space: nowrap; + } - span:nth-of-type(2) { - font-weight: var(--font-weight-normal); - font-size: var(--font-size-x-small); - } - } + span:nth-of-type(2) { + font-weight: var(--font-weight-normal); + font-size: var(--font-size-x-small); + } + } } #sidebar-nav, #sidebar-meta { - display: flex; - flex: 1; - flex-direction: column; - transition: - visibility var(--transition), - opacity var(--transition), - filter var(--transition), - transform var(--transition-bezier); - padding: 1rem; - width: var(--sidebar-width); - min-width: 100%; - overflow: hidden auto; - scrollbar-width: thin; + display: flex; + flex: 1; + flex-direction: column; + transition: + visibility var(--transition), + opacity var(--transition), + filter var(--transition), + transform var(--transition-bezier); + padding: 1rem; + width: var(--sidebar-width); + min-width: 100%; + overflow: hidden auto; + scrollbar-width: thin; } #site-header:has(#site-sidebar-modes #mode-meta:checked) + #site-sidebar { - #sidebar-nav { - transform: perspective(var(--content-width)) rotateY(15deg); - opacity: var(--disabled-opacity); - filter: blur(0.25rem); - } + #sidebar-nav { + transform: perspective(var(--content-width)) rotateY(15deg); + opacity: var(--disabled-opacity); + filter: blur(0.25rem); + } - #sidebar-meta { - transform: perspective(var(--content-width)); - visibility: visible; - opacity: 1; - filter: none; - } + #sidebar-meta { + transform: perspective(var(--content-width)); + visibility: visible; + opacity: 1; + filter: none; + } } #sidebar-nav { - transform: perspective(var(--content-width)); - transform-origin: left; + transform: perspective(var(--content-width)); + transform-origin: left; - :root[dir*="rtl"] & { - transform-origin: right; - } + :root[dir*="rtl"] & { + transform-origin: right; + } - a { - display: flex; - flex: 1; - align-items: center; - transform-origin: rpx(22) 50%; - transition: - box-shadow var(--transition), - background-color var(--transition), - color var(--transition), - transform var(--transition-bezier); - border-radius: 1.375rem; - padding: 0.25rem; - padding-inline-end: 0.75rem; - overflow: hidden; - color: var(--fg-muted-1); - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; + a { + display: flex; + flex: 1; + align-items: center; + transform-origin: rpx(22) 50%; + transition: + box-shadow var(--transition), + background-color var(--transition), + color var(--transition), + transform var(--transition-bezier); + border-radius: 1.375rem; + padding: 0.25rem; + padding-inline-end: 0.75rem; + overflow: hidden; + color: var(--fg-muted-1); + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; - &:hover { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - color: var(--fg-muted-2); + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + color: var(--fg-muted-2); - .icon { - background-color: var(--bg-muted-2); - } - } + .icon { + background-color: var(--bg-muted-2); + } + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &[aria-current="page"] { - box-shadow: var(--edge-highlight); - background-color: var(--bg-muted-1); - color: var(--accent-color); + &[aria-current="page"] { + box-shadow: var(--edge-highlight); + background-color: var(--bg-muted-1); + color: var(--accent-color); - .icon { - @include gradient-fill; - text-shadow: none; - } + .icon { + @include gradient-fill; + text-shadow: none; + } - &:hover { - background-color: var(--bg-muted-2); + &:hover { + background-color: var(--bg-muted-2); - .icon { - @include gradient-fill(hover); - } - } - } + .icon { + @include gradient-fill(hover); + } + } + } - &.new .icon { - position: relative; + &.new .icon { + position: relative; - &::after { - position: absolute; - inset-block-start: rpx(1); - inset-inline-end: rpx(1); - border-radius: 50%; - background-color: var(--accent-color); - width: 0.75rem; - height: 0.75rem; - content: ""; - } - } - } + &::after { + position: absolute; + inset-block-start: rpx(1); + inset-inline-end: rpx(1); + border-radius: 50%; + background-color: var(--accent-color); + width: 0.75rem; + height: 0.75rem; + content: ""; + } + } + } - .icon { - transition: - background-color var(--transition), - color var(--transition), - box-shadow var(--transition); - margin-inline-end: 0.5rem; - box-shadow: var(--edge-highlight); - border-radius: 50%; - background-color: var(--bg-muted-1); - padding: 0.5rem; - font-size: 1.25rem; + .icon { + transition: + background-color var(--transition), + color var(--transition), + box-shadow var(--transition); + margin-inline-end: 0.5rem; + box-shadow: var(--edge-highlight); + border-radius: 50%; + background-color: var(--bg-muted-1); + padding: 0.5rem; + font-size: 1.25rem; - &.fallback { - width: 1.25rem; - font-weight: var(--font-weight-semi-bold); - font-size: var(--font-size-medium); - line-height: 1.25rem; - font-family: var(--font-monospace); - text-align: center; + &.fallback { + width: 1.25rem; + font-weight: var(--font-weight-semi-bold); + font-size: var(--font-size-medium); + line-height: 1.25rem; + font-family: var(--font-monospace); + text-align: center; - &::before { - content: none; - } - } - } + &::before { + content: none; + } + } + } - details { - flex: 1; - margin-block-end: 0; - box-shadow: none; - border-radius: 0; - background-color: transparent; - padding: 0; + details { + flex: 1; + margin-block-end: 0; + box-shadow: none; + border-radius: 0; + background-color: transparent; + padding: 0; - &[open] { - summary { - transform: none; - opacity: 1; - box-shadow: none; - background-color: transparent; + &[open] { + summary { + transform: none; + opacity: 1; + box-shadow: none; + background-color: transparent; - &::before { - transform: none; - } + &::before { + transform: none; + } - @supports not (block-size: calc-size(auto, size)) { - & ~ * { - animation: none; - } - } - } - } + @supports not (block-size: calc-size(auto, size)) { + & ~ * { + animation: none; + } + } + } + } - summary { - display: flex; - position: relative; - align-items: center; - border-radius: 0; - padding: 0.75rem 0; - color: var(--fg-muted-1); - font-weight: var(--font-weight-normal); - font-size: var(--font-size-small); - line-height: var(--font-size-small); - white-space: nowrap; + summary { + display: flex; + position: relative; + align-items: center; + border-radius: 0; + padding: 0.75rem 0; + color: var(--fg-muted-1); + font-weight: var(--font-weight-normal); + font-size: var(--font-size-small); + line-height: var(--font-size-small); + white-space: nowrap; - &:hover { - box-shadow: none; - background-color: transparent; - } + &:hover { + box-shadow: none; + background-color: transparent; + } - &:active { - transform: none; - } + &:active { + transform: none; + } - &::before { - position: absolute; - transform: rotate(-90deg); - transition: transform var(--transition-bezier); - margin-inline-end: 0; - inset-block: 0.5rem; - inset-inline-end: 0; - font-size: 1rem; - } + &::before { + position: absolute; + transform: rotate(-90deg); + transition: transform var(--transition-bezier); + margin-inline-end: 0; + inset-block: 0.5rem; + inset-inline-end: 0; + font-size: 1rem; + } - .line { - flex: 1; - margin-inline: 0.5rem 1.5rem; - background-color: var(--bg-muted-2); - height: rpx(1); - } - } + .line { + flex: 1; + margin-inline: 0.5rem 1.5rem; + background-color: var(--bg-muted-2); + height: rpx(1); + } + } - ul { - margin-block: 0; - } - } + ul { + margin-block: 0; + } + } - ul { - display: flex; - flex-direction: column; - gap: 0.25rem; - margin-block: auto; - padding-inline-start: 0; - list-style: none; - } + ul { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-block: auto; + padding-inline-start: 0; + list-style: none; + } - li { - display: flex; - transition: width var(--transition); - margin-block: 0; - padding-inline-start: 0; - width: 100%; - } + li { + display: flex; + transition: width var(--transition); + margin-block: 0; + padding-inline-start: 0; + width: 100%; + } } #sidebar-meta { - position: absolute; - transform: perspective(var(--content-width)) rotateY(-30deg); - transform-origin: left; - visibility: hidden; - opacity: 0; - filter: blur(0.25rem); - inset: 0; - - :root[dir*="rtl"] & { - transform-origin: right; - } - - &:has(> div:empty) { - .status-page { - display: flex; - } - - & > div { - display: none; - } - } - - & > div { - display: flex; - flex-direction: column; - gap: 1rem; - margin-block: auto; - } - - .card { - background-color: var(--glass-bg-1); - } - - .while-writing { - display: inherit; - position: relative; - flex-direction: inherit; - gap: inherit; - margin: calc(-0.25rem - rpx(1)); - margin-block-start: 1rem; - border: rpx(1) solid var(--bg-muted-2); - border-block-start: none; - border-end-start-radius: calc(var(--rounded-corner) + 0.25rem + #{rpx(1)}); - border-end-end-radius: calc(var(--rounded-corner) + 0.25rem + #{rpx(1)}); - padding: 0.25rem; - - .card-title { - display: flex; - position: absolute; - gap: 0.25rem; - inset-block-start: calc(var(--rounded-corner-small) * -1); - inset-inline: rpx(-1); - height: var(--rounded-corner-small); - - .line { - border: rpx(1) solid var(--bg-muted-2); - border-block-end: none; - } - - .line:nth-of-type(1) { - border-inline-end: none; - border-start-start-radius: var(--rounded-corner); - width: var(--rounded-corner); - } - - .line:nth-of-type(2) { - flex: 1; - border-inline-start: none; - border-start-end-radius: var(--rounded-corner); - } - - .title { - color: var(--fg-muted-2); - font-size: var(--font-size-small); - line-height: 0; - } - } - } - - .weather { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - border-radius: 1.375rem; - padding: 0.25rem; - padding-inline-end: 1.25rem; - line-height: 1; - - &.cloudy { - animation: perlin 12s linear infinite; - background-image: url("/weather/perlin.png"); - - @media (prefers-color-scheme: dark) { - background-image: url("/weather/perlin-dark.png"); - } - } - - &.showers { - animation: rain 3s linear infinite; - background-image: url("/weather/rain.svg"); - - @media (prefers-color-scheme: dark) { - background-image: url("/weather/rain-dark.svg"); - } - } - - &.snowing { - animation: snow 12s linear infinite; - background-image: url("/weather/snow.svg"); - - @media (prefers-color-scheme: dark) { - background-image: url("/weather/snow-dark.svg"); - } - } - - div { - display: flex; - align-items: center; - gap: 0.5rem; - } - - .title { - color: inherit; - font-size: var(--font-size-medium); - } - - .icon { - box-shadow: var(--edge-highlight); - border-radius: 50%; - background-color: var(--bg-muted-1); - padding: 0.5rem; - font-size: 1.25rem; - } - - .condition { - color: var(--fg-muted-2); - font-size: var(--font-size-small); - } - - @keyframes rain { - to { - background-position: 256px 320px; - } - } - - @keyframes perlin { - to { - background-position: -256px -64px; - } - } - - @keyframes snow { - to { - background-position: 256px 512px; - } - } - } - - .music { - display: flex; - position: relative; - flex-direction: column; - gap: 0.5rem; - border-radius: 1rem; - - &::after { - position: absolute; - z-index: 1; - inset: 0; - box-shadow: var(--edge-highlight); - border-radius: inherit; - max-height: 5rem; - pointer-events: none; - content: ""; - } - - .carousel { - scroll-snap-type: x mandatory; - -webkit-overflow-scrolling: touch; - display: flex; - margin-block: 0; - box-shadow: var(--shadow); - border-radius: inherit; - background-color: var(--glass-bg-1); - padding-inline-start: 0; - overflow-x: auto; - scroll-behavior: smooth; - scrollbar-width: none; - list-style: none; - - li { - display: flex; - position: relative; - flex-shrink: 0; - gap: 1rem; - margin-block: 0; - outline: none; - padding: 0.5rem; - width: 100%; - overflow: hidden; - scroll-snap-align: start; - - &.has-cover { - animation: cover-alternate 60s ease-in-out infinite; - background-image: var(--bg-overlay), var(--blurnail); - background-position: center; - background-size: 2000%; - - @keyframes cover-alternate { - // X 100% - // Y ┌─────────────┐ - // │ 1,9 │ - // │ 8 2 │ - // │ 3,7 │ - // │ 6 4 │ - // │ 5 │ - // 100% └─────────────┘ - - from { - background-position: 50% 0%; - } - - 12.5% { - background-position: 100% 25%; - } - - 25% { - background-position: 50% 50%; - } - - 37.5% { - background-position: 100% 75%; - } - - 50% { - background-position: 50% 100%; - } - - 62.5% { - background-position: 0% 75%; - } - - 75% { - background-position: 50% 50%; - } - - 87.5% { - background-position: 0% 25%; - } - - to { - background-position: 50% 0%; - } - } - - .music-type { - color: var(--fg-muted-neutral-1); - } - - .music-artist { - color: var(--fg-muted-neutral-2); - } - } - - & > div { - display: flex; - flex: 1; - flex-direction: column; - justify-content: space-between; - gap: 0.25rem; - margin-inline-end: 0.5rem; - margin-block: 0.25rem; - min-width: 0; - min-width: 0; - line-height: 1; - } - - a { - position: absolute; - z-index: 1; - inset: 0; - border-radius: inherit; - } - } - } - - .music-type { - color: var(--fg-muted-1); - font-size: var(--font-size-xx-small); - } - - .music-artist { - color: var(--fg-muted-2); - font-size: var(--font-size-small); - } - - .title { - color: var(--fg-color); - font-size: var(--font-size-medium); - } - - img { - margin: 0; - border-radius: var(--rounded-corner-small); - } - - &-paginator { - display: flex; - justify-content: center; - gap: 0.25rem; - margin-inline: 1rem; - margin-block: 0; - padding-inline-start: 0; - list-style: none; - - li { - display: flex; - margin-block: 0; - padding-inline-start: 0; - height: 0.75rem; - } - - a { - transition: - width var(--transition), - height var(--transition), - background-color var(--transition), - transform var(--transition-bezier); - margin-block: auto; - border-radius: 0.375rem; - background-color: var(--fg-muted-1); - width: 1.5rem; - height: 0.375rem; - - &:hover { - background-color: var(--fg-muted-2); - } - - &:active { - transform: var(--active); - } - - &.active { - background-color: var(--fg-color); - width: 0.75rem; - height: 0.75rem; - } - } - } - } - - .toc { - display: flex; - flex-direction: column; - max-height: calc(var(--content-width) / 3); - - @media only screen and (max-width: 720px) { - max-height: calc(var(--content-width) / 2); - } - - .title { - margin-block-end: 1rem; - } - - .overshoot { - flex: 1; - margin: -1rem; - padding: 1rem; - overflow: auto; - scrollbar-width: thin; - - ul { - margin-block: 0; - padding-inline-start: 1rem; - color: var(--fg-muted-1); - font-size: var(--font-size-small); - } - - li { - margin-block: 0; - padding-inline-start: 0; - - &::marker { - color: inherit; - } - } - - a { - color: inherit; - text-decoration: none; - } - } - } - - .status-page { - display: none; - margin-block: auto; - text-align: center; - - .title, - p { - color: var(--fg-muted-2); - } - - .icon { - margin-inline: auto; - color: var(--fg-muted-1); - font-size: 3rem; - } - - p { - margin-block: 0; - } - } + position: absolute; + transform: perspective(var(--content-width)) rotateY(-30deg); + transform-origin: left; + visibility: hidden; + opacity: 0; + filter: blur(0.25rem); + inset: 0; + + :root[dir*="rtl"] & { + transform-origin: right; + } + + &:has(> div:empty) { + .status-page { + display: flex; + } + + & > div { + display: none; + } + } + + & > div { + display: flex; + flex-direction: column; + gap: 1rem; + margin-block: auto; + } + + .card { + background-color: var(--glass-bg-1); + } + + .while-writing { + display: inherit; + position: relative; + flex-direction: inherit; + gap: inherit; + margin: calc(-0.25rem - rpx(1)); + margin-block-start: 1rem; + border: rpx(1) solid var(--bg-muted-2); + border-block-start: none; + border-end-start-radius: calc(var(--rounded-corner) + 0.25rem + #{rpx(1)}); + border-end-end-radius: calc(var(--rounded-corner) + 0.25rem + #{rpx(1)}); + padding: 0.25rem; + + .card-title { + display: flex; + position: absolute; + gap: 0.25rem; + inset-block-start: calc(var(--rounded-corner-small) * -1); + inset-inline: rpx(-1); + height: var(--rounded-corner-small); + + .line { + border: rpx(1) solid var(--bg-muted-2); + border-block-end: none; + } + + .line:nth-of-type(1) { + border-inline-end: none; + border-start-start-radius: var(--rounded-corner); + width: var(--rounded-corner); + } + + .line:nth-of-type(2) { + flex: 1; + border-inline-start: none; + border-start-end-radius: var(--rounded-corner); + } + + .title { + color: var(--fg-muted-2); + font-size: var(--font-size-small); + line-height: 0; + } + } + } + + .weather { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + border-radius: 1.375rem; + padding: 0.25rem; + padding-inline-end: 1.25rem; + line-height: 1; + + &.cloudy { + animation: perlin 12s linear infinite; + background-image: url("/weather/perlin.png"); + + @media (prefers-color-scheme: dark) { + background-image: url("/weather/perlin-dark.png"); + } + } + + &.showers { + animation: rain 3s linear infinite; + background-image: url("/weather/rain.svg"); + + @media (prefers-color-scheme: dark) { + background-image: url("/weather/rain-dark.svg"); + } + } + + &.snowing { + animation: snow 12s linear infinite; + background-image: url("/weather/snow.svg"); + + @media (prefers-color-scheme: dark) { + background-image: url("/weather/snow-dark.svg"); + } + } + + div { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .title { + color: inherit; + font-size: var(--font-size-medium); + } + + .icon { + box-shadow: var(--edge-highlight); + border-radius: 50%; + background-color: var(--bg-muted-1); + padding: 0.5rem; + font-size: 1.25rem; + } + + .condition { + color: var(--fg-muted-2); + font-size: var(--font-size-small); + } + + @keyframes rain { + to { + background-position: 256px 320px; + } + } + + @keyframes perlin { + to { + background-position: -256px -64px; + } + } + + @keyframes snow { + to { + background-position: 256px 512px; + } + } + } + + .music { + display: flex; + position: relative; + flex-direction: column; + gap: 0.5rem; + border-radius: 1rem; + + &::after { + position: absolute; + z-index: 1; + inset: 0; + box-shadow: var(--edge-highlight); + border-radius: inherit; + max-height: 5rem; + pointer-events: none; + content: ""; + } + + .carousel { + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + display: flex; + margin-block: 0; + box-shadow: var(--shadow); + border-radius: inherit; + background-color: var(--glass-bg-1); + padding-inline-start: 0; + overflow-x: auto; + scroll-behavior: smooth; + scrollbar-width: none; + list-style: none; + + li { + display: flex; + position: relative; + flex-shrink: 0; + gap: 1rem; + margin-block: 0; + outline: none; + padding: 0.5rem; + width: 100%; + overflow: hidden; + scroll-snap-align: start; + + &.has-cover { + animation: cover-alternate 60s ease-in-out infinite; + background-image: var(--bg-overlay), var(--blurnail); + background-position: center; + background-size: 2000%; + + @keyframes cover-alternate { + // X 100% + // Y ┌─────────────┐ + // │ 1,9 │ + // │ 8 2 │ + // │ 3,7 │ + // │ 6 4 │ + // │ 5 │ + // 100% └─────────────┘ + + from { + background-position: 50% 0%; + } + + 12.5% { + background-position: 100% 25%; + } + + 25% { + background-position: 50% 50%; + } + + 37.5% { + background-position: 100% 75%; + } + + 50% { + background-position: 50% 100%; + } + + 62.5% { + background-position: 0% 75%; + } + + 75% { + background-position: 50% 50%; + } + + 87.5% { + background-position: 0% 25%; + } + + to { + background-position: 50% 0%; + } + } + + .music-type { + color: var(--fg-muted-neutral-1); + } + + .music-artist { + color: var(--fg-muted-neutral-2); + } + } + + & > div { + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-between; + gap: 0.25rem; + margin-inline-end: 0.5rem; + margin-block: 0.25rem; + min-width: 0; + min-width: 0; + line-height: 1; + } + + a { + position: absolute; + z-index: 1; + inset: 0; + border-radius: inherit; + } + } + } + + .music-type { + color: var(--fg-muted-1); + font-size: var(--font-size-xx-small); + } + + .music-artist { + color: var(--fg-muted-2); + font-size: var(--font-size-small); + } + + .title { + color: var(--fg-color); + font-size: var(--font-size-medium); + } + + img { + margin: 0; + border-radius: var(--rounded-corner-small); + } + + &-paginator { + display: flex; + justify-content: center; + gap: 0.25rem; + margin-inline: 1rem; + margin-block: 0; + padding-inline-start: 0; + list-style: none; + + li { + display: flex; + margin-block: 0; + padding-inline-start: 0; + height: 0.75rem; + } + + a { + transition: + width var(--transition), + height var(--transition), + background-color var(--transition), + transform var(--transition-bezier); + margin-block: auto; + border-radius: 0.375rem; + background-color: var(--fg-muted-1); + width: 1.5rem; + height: 0.375rem; + + &:hover { + background-color: var(--fg-muted-2); + } + + &:active { + transform: var(--active); + } + + &.active { + background-color: var(--fg-color); + width: 0.75rem; + height: 0.75rem; + } + } + } + } + + .toc { + display: flex; + flex-direction: column; + max-height: calc(var(--content-width) / 3); + + @media only screen and (max-width: 720px) { + max-height: calc(var(--content-width) / 2); + } + + .title { + margin-block-end: 1rem; + } + + .overshoot { + flex: 1; + margin: -1rem; + padding: 1rem; + overflow: auto; + scrollbar-width: thin; + + ul { + margin-block: 0; + padding-inline-start: 1rem; + color: var(--fg-muted-1); + font-size: var(--font-size-small); + } + + li { + margin-block: 0; + padding-inline-start: 0; + + &::marker { + color: inherit; + } + } + + a { + color: inherit; + text-decoration: none; + } + } + } + + .status-page { + display: none; + margin-block: auto; + text-align: center; + + .title, + p { + color: var(--fg-muted-2); + } + + .icon { + margin-inline: auto; + color: var(--fg-muted-1); + font-size: 3rem; + } + + p { + margin-block: 0; + } + } } diff --git a/sass/mods/_compact-sidebar.scss b/sass/mods/_compact-sidebar.scss index 3169af3..91eafa7 100644 --- a/sass/mods/_compact-sidebar.scss +++ b/sass/mods/_compact-sidebar.scss @@ -2,43 +2,43 @@ @use "../citrine/abstracts/mixins" as *; #site-sidebar-header { - transform-origin: rpx(18) 50%; - border-radius: var(--rounded-corner); + transform-origin: rpx(18) 50%; + border-radius: var(--rounded-corner); - img, - .icon { - border-radius: var(--rounded-corner-small); - } + img, + .icon { + border-radius: var(--rounded-corner-small); + } - img { - width: 2rem; - height: 2rem; - } + img { + width: 2rem; + height: 2rem; + } - .icon { - padding: 0.375rem; - } + .icon { + padding: 0.375rem; + } - div { - gap: 0; - line-height: 1.125; - } + div { + gap: 0; + line-height: 1.125; + } } #sidebar-nav { - a { - transform-origin: rpx(18) 50%; - border-radius: var(--rounded-corner); - padding: 0.25rem; + a { + transform-origin: rpx(18) 50%; + border-radius: var(--rounded-corner); + padding: 0.25rem; - &.new .icon::after { - inset-block-start: rpx(-2); - inset-inline-end: rpx(-2); - } - } + &.new .icon::after { + inset-block-start: rpx(-2); + inset-inline-end: rpx(-2); + } + } - .icon { - border-radius: var(--rounded-corner-small); - padding: 0.375rem; - } + .icon { + border-radius: var(--rounded-corner-small); + padding: 0.375rem; + } } diff --git a/sass/mods/_flat.scss b/sass/mods/_flat.scss index 92e04da..7b73cde 100644 --- a/sass/mods/_flat.scss +++ b/sass/mods/_flat.scss @@ -1,27 +1,27 @@ @use "../citrine/abstracts/functions" as *; :root { - --color-opacity-1: 0.15; - --color-opacity-2: 0.25; - --edge-highlight: 0 0 0 transparent; - --shadow: 0 0 0 transparent; - --shadow-raised: 0 0 0 transparent; - --shadow-glass: 0 0 0 transparent; - --shadow-glow: 0 0 0 transparent; + --color-opacity-1: 0.15; + --color-opacity-2: 0.25; + --edge-highlight: 0 0 0 transparent; + --shadow: 0 0 0 transparent; + --shadow-raised: 0 0 0 transparent; + --shadow-glass: 0 0 0 transparent; + --shadow-glow: 0 0 0 transparent; } .buttons .suggested, #site-nav a.active .icon { - box-shadow: none; - background-image: none; - background-color: var(--accent-color); - text-shadow: none; + box-shadow: none; + background-image: none; + background-color: var(--accent-color); + text-shadow: none; } .buttons .suggested:hover { - opacity: var(--dim-opacity); + opacity: var(--dim-opacity); } .crt { - outline: rpx(1) solid var(--bg-muted-2); + outline: rpx(1) solid var(--bg-muted-2); } diff --git a/sass/mods/_pill-tags.scss b/sass/mods/_pill-tags.scss index 37985cf..0dc78ff 100644 --- a/sass/mods/_pill-tags.scss +++ b/sass/mods/_pill-tags.scss @@ -1,27 +1,27 @@ @use "../citrine/abstracts/mixins" as *; .article-details .tags { - gap: 0.25rem; - margin-block-end: 0 !important; + gap: 0.25rem; + margin-block-end: 0 !important; - a { - @include chip; - display: flex; - color: var(--fg-muted-1); - font-weight: var(--font-weight-semi-bold); - line-height: 1.5rem; + a { + @include chip; + display: flex; + color: var(--fg-muted-1); + font-weight: var(--font-weight-semi-bold); + line-height: 1.5rem; - &:hover { - background-color: var(--bg-muted-2); - color: var(--fg-muted-2); - } + &:hover { + background-color: var(--bg-muted-2); + color: var(--fg-muted-2); + } - &:active { - transform: var(--active); - } + &:active { + transform: var(--active); + } - &::before { - content: none; - } - } + &::before { + content: none; + } + } } diff --git a/sass/mods/_skeuomorphic.scss b/sass/mods/_skeuomorphic.scss index 7b382ea..0328d25 100644 --- a/sass/mods/_skeuomorphic.scss +++ b/sass/mods/_skeuomorphic.scss @@ -2,29 +2,29 @@ @use "../citrine/abstracts/functions" as *; #site-nav { - a, - label, - button, - summary { - outline: rpx(1) solid var(--bg-muted-2); - box-shadow: var(--edge-highlight), var(--shadow); - background-image: linear-gradient( - to bottom, - var(--bg-muted-2), - var(--bg-muted-1) 50%, - transparent 50%, - var(--bg-muted-2) - ); + a, + label, + button, + summary { + outline: rpx(1) solid var(--bg-muted-2); + box-shadow: var(--edge-highlight), var(--shadow); + background-image: linear-gradient( + to bottom, + var(--bg-muted-2), + var(--bg-muted-1) 50%, + transparent 50%, + var(--bg-muted-2) + ); - .icon { - background-image: conic-gradient( - var(--bg-muted-2), - var(--bg-muted-1) 33%, - transparent, - var(--bg-muted-2) 66%, - transparent, - var(--bg-muted-2) - ); - } - } + .icon { + background-image: conic-gradient( + var(--bg-muted-2), + var(--bg-muted-1) 33%, + transparent, + var(--bg-muted-2) 66%, + transparent, + var(--bg-muted-2) + ); + } + } } diff --git a/scripts/audio-button.js b/scripts/audio-button.js index e76d3fc..60368ab 100644 --- a/scripts/audio-button.js +++ b/scripts/audio-button.js @@ -1,9 +1,9 @@ const audioButtons = document.querySelectorAll(".audio"); audioButtons.forEach((button) => { - button.addEventListener("click", (event) => playAudio(button.dataset.audio)); + button.addEventListener("click", (event) => playAudio(button.dataset.audio)); }); function playAudio(url) { - new Audio(url).play(); + new Audio(url).play(); } diff --git a/scripts/closable.js b/scripts/closable.js index a28774c..f65ad13 100644 --- a/scripts/closable.js +++ b/scripts/closable.js @@ -1,34 +1,34 @@ const closable = document.querySelectorAll("details.closable"); closable.forEach((detail) => { - detail.addEventListener("toggle", () => { - if (detail.open) setTargetDetail(detail); - }); + detail.addEventListener("toggle", () => { + if (detail.open) setTargetDetail(detail); + }); }); function setTargetDetail(targetDetail) { - closable.forEach((detail) => { - if (detail !== targetDetail) { - detail.open = false; - } - }); + closable.forEach((detail) => { + if (detail !== targetDetail) { + detail.open = false; + } + }); } document.addEventListener("click", function (event) { - const isClickInsideDetail = [...closable].some((detail) => - detail.contains(event.target), - ); + const isClickInsideDetail = [...closable].some((detail) => + detail.contains(event.target), + ); - if (!isClickInsideDetail) { - closable.forEach((detail) => { - detail.open = false; - }); - } + if (!isClickInsideDetail) { + closable.forEach((detail) => { + detail.open = false; + }); + } }); const expandSidebar = document.getElementById("expand-sidebar"); const mainContent = document.getElementById("main-content"); mainContent.addEventListener("click", () => { - if (expandSidebar.checked) expandSidebar.checked = false; + if (expandSidebar.checked) expandSidebar.checked = false; }); diff --git a/scripts/deanchor.js b/scripts/deanchor.js index 94fbee5..2726e89 100644 --- a/scripts/deanchor.js +++ b/scripts/deanchor.js @@ -1,10 +1,10 @@ const main = document.querySelector("#main-content"); main.addEventListener("animationend", () => { - const hash = decodeURIComponent(location.hash); - if ( - ["#↑", "#↓", "#←", "#→", "#up", "#down", "#left", "#right"].includes(hash) - ) { - history.replaceState(null, "", " "); - } + const hash = decodeURIComponent(location.hash); + if ( + ["#↑", "#↓", "#←", "#→", "#up", "#down", "#left", "#right"].includes(hash) + ) { + history.replaceState(null, "", " "); + } }); diff --git a/scripts/fuse.js b/scripts/fuse.js index 4357f5a..5b930ca 100644 --- a/scripts/fuse.js +++ b/scripts/fuse.js @@ -6,4 +6,1930 @@ * * http://www.apache.org/licenses/LICENSE-2.0 */ -var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n0&&void 0!==arguments[0]?arguments[0]:{},n=t.getFn,i=void 0===n?j.getFn:n,u=t.fieldNormWeight,o=void 0===u?j.fieldNormWeight:u;r(this,e),this.norm=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3,n=new Map,r=Math.pow(10,t);return{get:function(t){var i=t.match(L).length;if(n.has(i))return n.get(i);var u=1/Math.pow(i,.5*e),o=parseFloat(Math.round(u*r)/r);return n.set(i,o),o},clear:function(){n.clear()}}}(o,3),this.getFn=i,this.isCreated=!1,this.setIndexRecords()}return u(e,[{key:"setSources",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.docs=e}},{key:"setIndexRecords",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.records=e}},{key:"setKeys",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.keys=t,this._keysMap={},t.forEach((function(t,n){e._keysMap[t.id]=n}))}},{key:"create",value:function(){var e=this;!this.isCreated&&this.docs.length&&(this.isCreated=!0,A(this.docs[0])?this.docs.forEach((function(t,n){e._addString(t,n)})):this.docs.forEach((function(t,n){e._addObject(t,n)})),this.norm.clear())}},{key:"add",value:function(e){var t=this.size();A(e)?this._addString(e,t):this._addObject(e,t)}},{key:"removeAt",value:function(e){this.records.splice(e,1);for(var t=e,n=this.size();t=0;t-=1)this.records.splice(e[t],1);for(var n=0,r=this.records.length;n2&&void 0!==arguments[2]?arguments[2]:{},r=n.getFn,i=void 0===r?j.getFn:r,u=n.fieldNormWeight,o=void 0===u?j.fieldNormWeight:u,c=new I({getFn:i,fieldNormWeight:o});return c.setKeys(e.map(_)),c.setSources(t),c.create(),c}var $=32;function R(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i=r.location,u=void 0===i?j.location:i,o=r.distance,c=void 0===o?j.distance:o,s=r.threshold,a=void 0===s?j.threshold:s,h=r.findAllMatches,l=void 0===h?j.findAllMatches:h,f=r.minMatchCharLength,d=void 0===f?j.minMatchCharLength:f,v=r.includeMatches,g=void 0===v?j.includeMatches:v,y=r.ignoreLocation,p=void 0===y?j.ignoreLocation:y;if(t.length>$)throw new Error("Pattern length exceeds max of ".concat($,"."));for(var A,m=t.length,C=e.length,k=Math.max(0,Math.min(u,C)),F=a,b=k,M=function(e,t){var n=e/m;if(p)return n;var r=Math.abs(k-t);return c?n+r/c:r?1:n},E=d>1||g,D=E?Array(C):[];(A=e.indexOf(t,b))>-1;){var B=M(0,A);if(F=Math.min(B,F),b=A+m,E)for(var x=0;x=R;z-=1){var T=z-1,K=n[e[T]];if(E&&(D[T]=+!!K),W[z]=(W[z+1]<<1|1)&K,L&&(W[z]|=(_[z+1]|_[z])<<1|1|_[z+1]),W[z]&O&&(S=M(L,T))<=F){if(F=S,(b=T)<=k)break;R=Math.max(1,2*k-b)}}if(M(L+1,k)>F)break;_=W}var U={isMatch:b>=0,score:Math.max(.001,S)};if(E){var q=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:j.minMatchCharLength,n=[],r=-1,i=-1,u=0,o=e.length;u=t&&n.push([r,i]),r=-1)}return e[u-1]&&u-r>=t&&n.push([r,u-1]),n}(D,d);q.length?g&&(U.indices=q):U.isMatch=!1}return U}function P(e){for(var t={},n=0,r=e.length;n1&&void 0!==arguments[1]?arguments[1]:{},u=i.location,o=void 0===u?j.location:u,c=i.threshold,s=void 0===c?j.threshold:c,a=i.distance,h=void 0===a?j.distance:a,l=i.includeMatches,f=void 0===l?j.includeMatches:l,d=i.findAllMatches,v=void 0===d?j.findAllMatches:d,g=i.minMatchCharLength,y=void 0===g?j.minMatchCharLength:g,p=i.isCaseSensitive,A=void 0===p?j.isCaseSensitive:p,m=i.ignoreDiacritics,C=void 0===m?j.ignoreDiacritics:m,k=i.ignoreLocation,F=void 0===k?j.ignoreLocation:k;if(r(this,e),this.options={location:o,threshold:s,distance:h,includeMatches:f,findAllMatches:v,minMatchCharLength:y,isCaseSensitive:A,ignoreDiacritics:C,ignoreLocation:F},t=A?t:t.toLowerCase(),t=C?W(t):t,this.pattern=t,this.chunks=[],this.pattern.length){var b=function(e,t){n.chunks.push({pattern:e,alphabet:P(e),startIndex:t})},M=this.pattern.length;if(M>$){for(var E=0,D=M%$,B=M-D;E1&&void 0!==arguments[1]?arguments[1]:{},o=u.location,c=void 0===o?j.location:o,s=u.threshold,a=void 0===s?j.threshold:s,h=u.distance,l=void 0===h?j.distance:h,f=u.includeMatches,d=void 0===f?j.includeMatches:f,v=u.findAllMatches,g=void 0===v?j.findAllMatches:v,y=u.minMatchCharLength,p=void 0===y?j.minMatchCharLength:y,A=u.isCaseSensitive,m=void 0===A?j.isCaseSensitive:A,C=u.ignoreDiacritics,k=void 0===C?j.ignoreDiacritics:C,F=u.ignoreLocation,b=void 0===F?j.ignoreLocation:F;return r(this,n),(i=t.call(this,e))._bitapSearch=new z(e,{location:c,threshold:a,distance:l,includeMatches:d,findAllMatches:g,minMatchCharLength:p,isCaseSensitive:m,ignoreDiacritics:k,ignoreLocation:b}),i}return u(n,[{key:"search",value:function(e){return this._bitapSearch.searchIn(e)}}],[{key:"type",get:function(){return"fuzzy"}},{key:"multiRegex",get:function(){return/^"(.*)"$/}},{key:"singleRegex",get:function(){return/^(.*)$/}}]),n}(T),X=function(e){c(n,e);var t=l(n);function n(e){return r(this,n),t.call(this,e)}return u(n,[{key:"search",value:function(e){for(var t,n=0,r=[],i=this.pattern.length;(t=e.indexOf(this.pattern,n))>-1;)n=t+i,r.push([t,n-1]);var u=!!r.length;return{isMatch:u,score:u?0:1,indices:r}}}],[{key:"type",get:function(){return"include"}},{key:"multiRegex",get:function(){return/^'"(.*)"$/}},{key:"singleRegex",get:function(){return/^'(.*)$/}}]),n}(T),Y=[U,X,J,Q,G,V,q,H],Z=Y.length,ee=/ +(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,te=new Set([H.type,X.type]),ne=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isCaseSensitive,u=void 0===i?j.isCaseSensitive:i,o=n.ignoreDiacritics,c=void 0===o?j.ignoreDiacritics:o,s=n.includeMatches,a=void 0===s?j.includeMatches:s,h=n.minMatchCharLength,l=void 0===h?j.minMatchCharLength:h,f=n.ignoreLocation,d=void 0===f?j.ignoreLocation:f,v=n.findAllMatches,g=void 0===v?j.findAllMatches:v,y=n.location,p=void 0===y?j.location:y,A=n.threshold,m=void 0===A?j.threshold:A,C=n.distance,k=void 0===C?j.distance:C;r(this,e),this.query=null,this.options={isCaseSensitive:u,ignoreDiacritics:c,includeMatches:a,minMatchCharLength:l,findAllMatches:g,ignoreLocation:d,location:p,threshold:m,distance:k},t=u?t:t.toLowerCase(),t=c?W(t):t,this.pattern=t,this.query=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e.split("|").map((function(e){for(var n=e.trim().split(ee).filter((function(e){return e&&!!e.trim()})),r=[],i=0,u=n.length;i2&&void 0!==arguments[2]?arguments[2]:{}).auto,r=void 0===n||n;return he(e)||(e=le(e)),function e(n){var i=Object.keys(n),u=function(e){return!!e[se]}(n);if(!u&&i.length>1&&!he(n))return e(le(n));if(function(e){return!g(e)&&k(e)&&!he(e)}(n)){var o=u?n[se]:i[0],c=u?n[ae]:n[o];if(!A(c))throw new Error(function(e){return"Invalid value for key ".concat(e)}(o));var s={keyId:w(o),pattern:c};return r&&(s.searcher=ue(c,t)),s}var a={children:[],operator:i[0]};return i.forEach((function(t){var r=n[t];g(r)&&r.forEach((function(t){a.children.push(e(t))}))})),a}(e)}function de(e,t){var n=t.ignoreFieldNorm,r=void 0===n?j.ignoreFieldNorm:n,i=1;e.matches.forEach((function(e){var t=e.key,n=e.norm,u=e.score,o=t?t.weight:null;i*=Math.pow(0===u&&o?Number.EPSILON:u,(o||1)*(r?1:n))})),e.score=i}var ve=function(){function e(t){r(this,e),this.limit=t,this.heap=[]}return u(e,[{key:"size",get:function(){return this.heap.length}},{key:"shouldInsert",value:function(e){return this.size0;){var n=e-1>>1;if(t[e].score<=t[n].score)break;var r=t[e];t[e]=t[n],t[n]=r,e=n}}},{key:"_sinkDown",value:function(e){var t=this.heap,n=t.length,r=e;do{var i=2*(e=r)+1,u=2*e+2;if(it[r].score&&(r=i),ut[r].score&&(r=u),r!==e){var o=t[e];t[e]=t[r],t[r]=o}}while(r!==e)}}]),e}();function ge(e,t){var n=e.matches;t.matches=[],F(n)&&n.forEach((function(e){if(F(e.indices)&&e.indices.length){var n={indices:e.indices,value:e.value};e.key&&(n.key=e.key.src),e.idx>-1&&(n.refIndex=e.idx),t.matches.push(n)}}))}function ye(e,t){t.score=e.score}var pe=function(){function e(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=arguments.length>2?arguments[2]:void 0;r(this,e),this.options=t(t({},j),i),this.options.useExtendedSearch,this._keyStore=new x(this.options.keys),this.setCollection(n,u),this._lastQuery=null,this._lastSearcher=null}return u(e,[{key:"_getSearcher",value:function(e){if(this._lastQuery===e)return this._lastSearcher;var t=ue(e,this.options);return this._lastQuery=e,this._lastSearcher=t,t}},{key:"setCollection",value:function(e,t){if(this._docs=e,t&&!(t instanceof I))throw new Error("Incorrect 'index' type");this._myIndex=t||N(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}},{key:"add",value:function(e){F(e)&&(this._docs.push(e),this._myIndex.add(e))}},{key:"remove",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){return!1},t=[],n=[],r=0,i=this._docs.length;r=0;u-=1)this._docs.splice(n[u],1);this._myIndex.removeAll(n)}return t}},{key:"removeAt",value:function(e){this._docs.splice(e,1),this._myIndex.removeAt(e)}},{key:"getIndex",value:function(){return this._myIndex}},{key:"search",value:function(e){var t,n=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).limit,r=void 0===n?-1:n,i=this.options,u=i.includeMatches,o=i.includeScore,c=i.shouldSort,s=i.sortFn,a=i.ignoreFieldNorm;if(m(r)&&r>0&&A(e)){var h=new ve(r);A(this._docs[0])?this._searchStringList(e,{heap:h,ignoreFieldNorm:a}):this._searchObjectList(e,{heap:h,ignoreFieldNorm:a}),t=h.extractSorted(s)}else(function(e,t){var n=t.ignoreFieldNorm,r=void 0===n?j.ignoreFieldNorm:n;e.forEach((function(e){de(e,{ignoreFieldNorm:r})}))})(t=A(e)?A(this._docs[0])?this._searchStringList(e):this._searchObjectList(e):this._searchLogical(e),{ignoreFieldNorm:a}),c&&t.sort(s),m(r)&&r>-1&&(t=t.slice(0,r));return function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.includeMatches,i=void 0===r?j.includeMatches:r,u=n.includeScore,o=void 0===u?j.includeScore:u,c=[];return i&&c.push(ge),o&&c.push(ye),e.map((function(e){var n=e.idx,r={item:t[n],refIndex:n};return c.length&&c.forEach((function(t){t(e,r)})),r}))}(t,this._docs,{includeMatches:u,includeScore:o})}},{key:"_searchStringList",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.heap,r=t.ignoreFieldNorm,i=this._getSearcher(e),u=this._myIndex.records,o=n?null:[];return u.forEach((function(e){var t=e.v,u=e.i,c=e.n;if(F(t)){var s=i.searchIn(t),a=s.isMatch,h=s.score,l=s.indices;if(a){var f={item:t,idx:u,matches:[{score:h,value:t,norm:c,indices:l}]};n?(de(f,{ignoreFieldNorm:r}),n.shouldInsert(f.score)&&n.insert(f)):o.push(f)}}})),o}},{key:"_searchLogical",value:function(e){var t=this,n=fe(e,this.options),r=function e(n,r,i){if(!n.children){var u=n.keyId,o=n.searcher,c=t._findMatches({key:t._keyStore.get(u),value:t._myIndex.getValueForItemAtKeyId(r,u),searcher:o});return c&&c.length?[{idx:i,item:r,matches:c}]:[]}for(var s=[],a=0,h=n.children.length;a1&&void 0!==arguments[1]?arguments[1]:{},r=n.heap,i=n.ignoreFieldNorm,u=this._getSearcher(e),o=this._myIndex,c=o.keys,s=o.records,a=r?null:[];return s.forEach((function(e){var n=e.$,o=e.i;if(F(n)){var s=[];if(c.forEach((function(e,r){s.push.apply(s,f(t._findMatches({key:e,value:n[r],searcher:u})))})),s.length){var h={idx:o,item:n,matches:s};r?(de(h,{ignoreFieldNorm:i}),r.shouldInsert(h.score)&&r.insert(h)):a.push(h)}}})),a}},{key:"_findMatches",value:function(e){var t=e.key,n=e.value,r=e.searcher;if(!F(n))return[];var i=[];if(g(n))n.forEach((function(e){var n=e.v,u=e.i,o=e.n;if(F(n)){var c=r.searchIn(n),s=c.isMatch,a=c.score,h=c.indices;s&&i.push({score:a,key:t,value:n,idx:u,norm:o,indices:h})}}));else{var u=n.v,o=n.n,c=r.searchIn(u),s=c.isMatch,a=c.score,h=c.indices;s&&i.push({score:a,key:t,value:u,norm:o,indices:h})}return i}}]),e}();return pe.version="7.2.0",pe.createIndex=N,pe.parseIndex=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.getFn,r=void 0===n?j.getFn:n,i=t.fieldNormWeight,u=void 0===i?j.fieldNormWeight:i,o=e.keys,c=e.records,s=new I({getFn:r,fieldNormWeight:u});return s.setKeys(o),s.setIndexRecords(c),s},pe.config=j,ie(ne),pe.use=function(){for(var e=arguments.length,t=new Array(e),n=0;n e.length) && (t = e.length); + for (var n = 0, r = new Array(t); n < t; n++) r[n] = e[n]; + return r; + } + function v(e) { + var t = (function (e, t) { + if ("object" != typeof e || null === e) return e; + var n = e[Symbol.toPrimitive]; + if (void 0 !== n) { + var r = n.call(e, t || "default"); + if ("object" != typeof r) return r; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return ("string" === t ? String : Number)(e); + })(e, "string"); + return "symbol" == typeof t ? t : String(t); + } + function g(e) { + return Array.isArray ? Array.isArray(e) : "[object Array]" === M(e); + } + var y = 1 / 0; + function p(e) { + return null == e + ? "" + : (function (e) { + if ("string" == typeof e) return e; + var t = e + ""; + return "0" == t && 1 / e == -y ? "-0" : t; + })(e); + } + function A(e) { + return "string" == typeof e; + } + function m(e) { + return "number" == typeof e; + } + function C(e) { + return ( + !0 === e || + !1 === e || + ((function (e) { + return k(e) && null !== e; + })(e) && + "[object Boolean]" == M(e)) + ); + } + function k(e) { + return "object" === n(e); + } + function F(e) { + return null != e; + } + function b(e) { + return !e.trim().length; + } + function M(e) { + return null == e + ? void 0 === e + ? "[object Undefined]" + : "[object Null]" + : Object.prototype.toString.call(e); + } + var E = function (e) { + return "Missing ".concat(e, " property in key"); + }, + D = function (e) { + return "Property 'weight' in key '".concat( + e, + "' must be a positive integer", + ); + }, + B = Object.prototype.hasOwnProperty, + x = (function () { + function e(t) { + var n = this; + r(this, e), (this._keys = []), (this._keyMap = {}); + var i = 0; + t.forEach(function (e) { + var t = _(e); + n._keys.push(t), (n._keyMap[t.id] = t), (i += t.weight); + }), + this._keys.forEach(function (e) { + e.weight /= i; + }); + } + return ( + u(e, [ + { + key: "get", + value: function (e) { + return this._keyMap[e]; + }, + }, + { + key: "keys", + value: function () { + return this._keys; + }, + }, + { + key: "toJSON", + value: function () { + return JSON.stringify(this._keys); + }, + }, + ]), + e + ); + })(); + function _(e) { + var t = null, + n = null, + r = null, + i = 1, + u = null; + if (A(e) || g(e)) (r = e), (t = S(e)), (n = w(e)); + else { + if (!B.call(e, "name")) throw new Error(E("name")); + var o = e.name; + if (((r = o), B.call(e, "weight") && (i = e.weight) <= 0)) + throw new Error(D(o)); + (t = S(o)), (n = w(o)), (u = e.getFn); + } + return { path: t, id: n, weight: i, src: r, getFn: u }; + } + function S(e) { + return g(e) ? e : e.split("."); + } + function w(e) { + return g(e) ? e.join(".") : e; + } + var O = { + useExtendedSearch: !1, + getFn: function (e, t) { + var n = [], + r = !1; + return ( + (function e(t, i, u, o) { + if (F(t)) + if (i[u]) { + var c = t[i[u]]; + if (!F(c)) return; + if (u === i.length - 1 && (A(c) || m(c) || C(c))) + n.push(void 0 !== o ? { v: p(c), i: o } : p(c)); + else if (g(c)) { + r = !0; + for (var s = 0, a = c.length; s < a; s += 1) + e(c[s], i, u + 1, s); + } else i.length && e(c, i, u + 1, o); + } else n.push(void 0 !== o ? { v: t, i: o } : t); + })(e, A(t) ? t.split(".") : t, 0), + r ? n : n[0] + ); + }, + ignoreLocation: !1, + ignoreFieldNorm: !1, + fieldNormWeight: 1, + }, + j = t( + t( + t( + t( + {}, + { + isCaseSensitive: !1, + ignoreDiacritics: !1, + includeScore: !1, + keys: [], + shouldSort: !0, + sortFn: function (e, t) { + return e.score === t.score + ? e.idx < t.idx + ? -1 + : 1 + : e.score < t.score + ? -1 + : 1; + }, + }, + ), + { includeMatches: !1, findAllMatches: !1, minMatchCharLength: 1 }, + ), + { location: 0, threshold: 0.6, distance: 100 }, + ), + O, + ), + L = /[^ ]+/g, + I = (function () { + function e() { + var t = + arguments.length > 0 && void 0 !== arguments[0] + ? arguments[0] + : {}, + n = t.getFn, + i = void 0 === n ? j.getFn : n, + u = t.fieldNormWeight, + o = void 0 === u ? j.fieldNormWeight : u; + r(this, e), + (this.norm = (function () { + var e = + arguments.length > 0 && void 0 !== arguments[0] + ? arguments[0] + : 1, + t = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : 3, + n = new Map(), + r = Math.pow(10, t); + return { + get: function (t) { + var i = t.match(L).length; + if (n.has(i)) return n.get(i); + var u = 1 / Math.pow(i, 0.5 * e), + o = parseFloat(Math.round(u * r) / r); + return (n.set(i, o), o); + }, + clear: function () { + n.clear(); + }, + }; + })(o, 3)), + (this.getFn = i), + (this.isCreated = !1), + this.setIndexRecords(); + } + return ( + u(e, [ + { + key: "setSources", + value: function () { + var e = + arguments.length > 0 && void 0 !== arguments[0] + ? arguments[0] + : []; + this.docs = e; + }, + }, + { + key: "setIndexRecords", + value: function () { + var e = + arguments.length > 0 && void 0 !== arguments[0] + ? arguments[0] + : []; + this.records = e; + }, + }, + { + key: "setKeys", + value: function () { + var e = this, + t = + arguments.length > 0 && void 0 !== arguments[0] + ? arguments[0] + : []; + (this.keys = t), + (this._keysMap = {}), + t.forEach(function (t, n) { + e._keysMap[t.id] = n; + }); + }, + }, + { + key: "create", + value: function () { + var e = this; + !this.isCreated && + this.docs.length && + ((this.isCreated = !0), + A(this.docs[0]) + ? this.docs.forEach(function (t, n) { + e._addString(t, n); + }) + : this.docs.forEach(function (t, n) { + e._addObject(t, n); + }), + this.norm.clear()); + }, + }, + { + key: "add", + value: function (e) { + var t = this.size(); + A(e) ? this._addString(e, t) : this._addObject(e, t); + }, + }, + { + key: "removeAt", + value: function (e) { + this.records.splice(e, 1); + for (var t = e, n = this.size(); t < n; t += 1) + this.records[t].i -= 1; + }, + }, + { + key: "removeAll", + value: function (e) { + for (var t = e.length - 1; t >= 0; t -= 1) + this.records.splice(e[t], 1); + for (var n = 0, r = this.records.length; n < r; n += 1) + this.records[n].i = n; + }, + }, + { + key: "getValueForItemAtKeyId", + value: function (e, t) { + return e[this._keysMap[t]]; + }, + }, + { + key: "size", + value: function () { + return this.records.length; + }, + }, + { + key: "_addString", + value: function (e, t) { + if (F(e) && !b(e)) { + var n = { v: e, i: t, n: this.norm.get(e) }; + this.records.push(n); + } + }, + }, + { + key: "_addObject", + value: function (e, t) { + var n = this, + r = { i: t, $: {} }; + this.keys.forEach(function (t, i) { + var u = t.getFn ? t.getFn(e) : n.getFn(e, t.path); + if (F(u)) + if (g(u)) { + for (var o = [], c = 0, s = u.length; c < s; c += 1) { + var a = u[c]; + if (F(a)) + if (A(a)) { + if (!b(a)) { + var h = { v: a, i: c, n: n.norm.get(a) }; + o.push(h); + } + } else if (A(a.v) && !b(a.v)) { + var l = { v: a.v, i: a.i, n: n.norm.get(a.v) }; + o.push(l); + } + } + r.$[i] = o; + } else if (A(u) && !b(u)) { + var f = { v: u, n: n.norm.get(u) }; + r.$[i] = f; + } + }), + this.records.push(r); + }, + }, + { + key: "toJSON", + value: function () { + return { keys: this.keys, records: this.records }; + }, + }, + ]), + e + ); + })(); + function N(e, t) { + var n = + arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {}, + r = n.getFn, + i = void 0 === r ? j.getFn : r, + u = n.fieldNormWeight, + o = void 0 === u ? j.fieldNormWeight : u, + c = new I({ getFn: i, fieldNormWeight: o }); + return (c.setKeys(e.map(_)), c.setSources(t), c.create(), c); + } + var $ = 32; + function R(e, t, n) { + var r = + arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {}, + i = r.location, + u = void 0 === i ? j.location : i, + o = r.distance, + c = void 0 === o ? j.distance : o, + s = r.threshold, + a = void 0 === s ? j.threshold : s, + h = r.findAllMatches, + l = void 0 === h ? j.findAllMatches : h, + f = r.minMatchCharLength, + d = void 0 === f ? j.minMatchCharLength : f, + v = r.includeMatches, + g = void 0 === v ? j.includeMatches : v, + y = r.ignoreLocation, + p = void 0 === y ? j.ignoreLocation : y; + if (t.length > $) + throw new Error("Pattern length exceeds max of ".concat($, ".")); + for ( + var A, + m = t.length, + C = e.length, + k = Math.max(0, Math.min(u, C)), + F = a, + b = k, + M = function (e, t) { + var n = e / m; + if (p) return n; + var r = Math.abs(k - t); + return c ? n + r / c : r ? 1 : n; + }, + E = d > 1 || g, + D = E ? Array(C) : []; + (A = e.indexOf(t, b)) > -1; + ) { + var B = M(0, A); + if (((F = Math.min(B, F)), (b = A + m), E)) + for (var x = 0; x < m; ) (D[A + x] = 1), (x += 1); + } + b = -1; + for ( + var _ = [], S = 1, w = m + C, O = 1 << (m - 1), L = 0; + L < m; + L += 1 + ) { + for (var I = 0, N = w; I < N; ) + M(L, k + N) <= F ? (I = N) : (w = N), + (N = Math.floor((w - I) / 2 + I)); + w = N; + var R = Math.max(1, k - N + 1), + P = l ? C : Math.min(k + N, C) + m, + W = Array(P + 2); + W[P + 1] = (1 << L) - 1; + for (var z = P; z >= R; z -= 1) { + var T = z - 1, + K = n[e[T]]; + if ( + (E && (D[T] = +!!K), + (W[z] = ((W[z + 1] << 1) | 1) & K), + L && (W[z] |= ((_[z + 1] | _[z]) << 1) | 1 | _[z + 1]), + W[z] & O && (S = M(L, T)) <= F) + ) { + if (((F = S), (b = T) <= k)) break; + R = Math.max(1, 2 * k - b); + } + } + if (M(L + 1, k) > F) break; + _ = W; + } + var U = { isMatch: b >= 0, score: Math.max(0.001, S) }; + if (E) { + var q = (function () { + for ( + var e = + arguments.length > 0 && void 0 !== arguments[0] + ? arguments[0] + : [], + t = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : j.minMatchCharLength, + n = [], + r = -1, + i = -1, + u = 0, + o = e.length; + u < o; + u += 1 + ) { + var c = e[u]; + c && -1 === r + ? (r = u) + : c || + -1 === r || + ((i = u - 1) - r + 1 >= t && n.push([r, i]), (r = -1)); + } + return (e[u - 1] && u - r >= t && n.push([r, u - 1]), n); + })(D, d); + q.length ? g && (U.indices = q) : (U.isMatch = !1); + } + return U; + } + function P(e) { + for (var t = {}, n = 0, r = e.length; n < r; n += 1) { + var i = e.charAt(n); + t[i] = (t[i] || 0) | (1 << (r - n - 1)); + } + return t; + } + var W = String.prototype.normalize + ? function (e) { + return e + .normalize("NFD") + .replace( + /[\u0300-\u036F\u0483-\u0489\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u0610-\u061A\u064B-\u065F\u0670\u06D6-\u06DC\u06DF-\u06E4\u06E7\u06E8\u06EA-\u06ED\u0711\u0730-\u074A\u07A6-\u07B0\u07EB-\u07F3\u07FD\u0816-\u0819\u081B-\u0823\u0825-\u0827\u0829-\u082D\u0859-\u085B\u08D3-\u08E1\u08E3-\u0903\u093A-\u093C\u093E-\u094F\u0951-\u0957\u0962\u0963\u0981-\u0983\u09BC\u09BE-\u09C4\u09C7\u09C8\u09CB-\u09CD\u09D7\u09E2\u09E3\u09FE\u0A01-\u0A03\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A70\u0A71\u0A75\u0A81-\u0A83\u0ABC\u0ABE-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AE2\u0AE3\u0AFA-\u0AFF\u0B01-\u0B03\u0B3C\u0B3E-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B62\u0B63\u0B82\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD7\u0C00-\u0C04\u0C3E-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C62\u0C63\u0C81-\u0C83\u0CBC\u0CBE-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CE2\u0CE3\u0D00-\u0D03\u0D3B\u0D3C\u0D3E-\u0D44\u0D46-\u0D48\u0D4A-\u0D4D\u0D57\u0D62\u0D63\u0D82\u0D83\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DF2\u0DF3\u0E31\u0E34-\u0E3A\u0E47-\u0E4E\u0EB1\u0EB4-\u0EB9\u0EBB\u0EBC\u0EC8-\u0ECD\u0F18\u0F19\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F71-\u0F84\u0F86\u0F87\u0F8D-\u0F97\u0F99-\u0FBC\u0FC6\u102B-\u103E\u1056-\u1059\u105E-\u1060\u1062-\u1064\u1067-\u106D\u1071-\u1074\u1082-\u108D\u108F\u109A-\u109D\u135D-\u135F\u1712-\u1714\u1732-\u1734\u1752\u1753\u1772\u1773\u17B4-\u17D3\u17DD\u180B-\u180D\u1885\u1886\u18A9\u1920-\u192B\u1930-\u193B\u1A17-\u1A1B\u1A55-\u1A5E\u1A60-\u1A7C\u1A7F\u1AB0-\u1ABE\u1B00-\u1B04\u1B34-\u1B44\u1B6B-\u1B73\u1B80-\u1B82\u1BA1-\u1BAD\u1BE6-\u1BF3\u1C24-\u1C37\u1CD0-\u1CD2\u1CD4-\u1CE8\u1CED\u1CF2-\u1CF4\u1CF7-\u1CF9\u1DC0-\u1DF9\u1DFB-\u1DFF\u20D0-\u20F0\u2CEF-\u2CF1\u2D7F\u2DE0-\u2DFF\u302A-\u302F\u3099\u309A\uA66F-\uA672\uA674-\uA67D\uA69E\uA69F\uA6F0\uA6F1\uA802\uA806\uA80B\uA823-\uA827\uA880\uA881\uA8B4-\uA8C5\uA8E0-\uA8F1\uA8FF\uA926-\uA92D\uA947-\uA953\uA980-\uA983\uA9B3-\uA9C0\uA9E5\uAA29-\uAA36\uAA43\uAA4C\uAA4D\uAA7B-\uAA7D\uAAB0\uAAB2-\uAAB4\uAAB7\uAAB8\uAABE\uAABF\uAAC1\uAAEB-\uAAEF\uAAF5\uAAF6\uABE3-\uABEA\uABEC\uABED\uFB1E\uFE00-\uFE0F\uFE20-\uFE2F]/g, + "", + ); + } + : function (e) { + return e; + }, + z = (function () { + function e(t) { + var n = this, + i = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : {}, + u = i.location, + o = void 0 === u ? j.location : u, + c = i.threshold, + s = void 0 === c ? j.threshold : c, + a = i.distance, + h = void 0 === a ? j.distance : a, + l = i.includeMatches, + f = void 0 === l ? j.includeMatches : l, + d = i.findAllMatches, + v = void 0 === d ? j.findAllMatches : d, + g = i.minMatchCharLength, + y = void 0 === g ? j.minMatchCharLength : g, + p = i.isCaseSensitive, + A = void 0 === p ? j.isCaseSensitive : p, + m = i.ignoreDiacritics, + C = void 0 === m ? j.ignoreDiacritics : m, + k = i.ignoreLocation, + F = void 0 === k ? j.ignoreLocation : k; + if ( + (r(this, e), + (this.options = { + location: o, + threshold: s, + distance: h, + includeMatches: f, + findAllMatches: v, + minMatchCharLength: y, + isCaseSensitive: A, + ignoreDiacritics: C, + ignoreLocation: F, + }), + (t = A ? t : t.toLowerCase()), + (t = C ? W(t) : t), + (this.pattern = t), + (this.chunks = []), + this.pattern.length) + ) { + var b = function (e, t) { + n.chunks.push({ pattern: e, alphabet: P(e), startIndex: t }); + }, + M = this.pattern.length; + if (M > $) { + for (var E = 0, D = M % $, B = M - D; E < B; ) + b(this.pattern.substr(E, $), E), (E += $); + if (D) { + var x = M - $; + b(this.pattern.substr(x), x); + } + } else b(this.pattern, 0); + } + } + return ( + u(e, [ + { + key: "searchIn", + value: function (e) { + var t = this.options, + n = t.isCaseSensitive, + r = t.ignoreDiacritics, + i = t.includeMatches; + if ( + ((e = n ? e : e.toLowerCase()), + (e = r ? W(e) : e), + this.pattern === e) + ) { + var u = { isMatch: !0, score: 0 }; + return (i && (u.indices = [[0, e.length - 1]]), u); + } + var o = this.options, + c = o.location, + s = o.distance, + a = o.threshold, + h = o.findAllMatches, + l = o.minMatchCharLength, + d = o.ignoreLocation, + v = [], + g = 0, + y = !1; + this.chunks.forEach(function (t) { + var n = t.pattern, + r = t.alphabet, + u = t.startIndex, + o = R(e, n, r, { + location: c + u, + distance: s, + threshold: a, + findAllMatches: h, + minMatchCharLength: l, + includeMatches: i, + ignoreLocation: d, + }), + p = o.isMatch, + A = o.score, + m = o.indices; + p && (y = !0), (g += A), p && m && v.push.apply(v, f(m)); + }); + var p = { isMatch: y, score: y ? g / this.chunks.length : 1 }; + return ( + y && + i && + (p.indices = (function (e) { + if (e.length <= 1) return e; + e.sort(function (e, t) { + return e[0] - t[0] || e[1] - t[1]; + }); + for (var t = [e[0]], n = 1, r = e.length; n < r; n += 1) { + var i = t[t.length - 1], + u = e[n]; + u[0] <= i[1] + 1 + ? (i[1] = Math.max(i[1], u[1])) + : t.push(u); + } + return t; + })(v)), + p + ); + }, + }, + ]), + e + ); + })(), + T = (function () { + function e(t) { + r(this, e), (this.pattern = t); + } + return ( + u( + e, + [{ key: "search", value: function () {} }], + [ + { + key: "isMultiMatch", + value: function (e) { + return K(e, this.multiRegex); + }, + }, + { + key: "isSingleMatch", + value: function (e) { + return K(e, this.singleRegex); + }, + }, + ], + ), + e + ); + })(); + function K(e, t) { + var n = e.match(t); + return n ? n[1] : null; + } + var U = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + return (r(this, n), t.call(this, e)); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + var t = e === this.pattern; + return { + isMatch: t, + score: t ? 0 : 1, + indices: [0, this.pattern.length - 1], + }; + }, + }, + ], + [ + { + key: "type", + get: function () { + return "exact"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^="(.*)"$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^=(.*)$/; + }, + }, + ], + ), + n + ); + })(T), + q = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + return (r(this, n), t.call(this, e)); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + var t = -1 === e.indexOf(this.pattern); + return { + isMatch: t, + score: t ? 0 : 1, + indices: [0, e.length - 1], + }; + }, + }, + ], + [ + { + key: "type", + get: function () { + return "inverse-exact"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^!"(.*)"$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^!(.*)$/; + }, + }, + ], + ), + n + ); + })(T), + J = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + return (r(this, n), t.call(this, e)); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + var t = e.startsWith(this.pattern); + return { + isMatch: t, + score: t ? 0 : 1, + indices: [0, this.pattern.length - 1], + }; + }, + }, + ], + [ + { + key: "type", + get: function () { + return "prefix-exact"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^\^"(.*)"$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^\^(.*)$/; + }, + }, + ], + ), + n + ); + })(T), + Q = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + return (r(this, n), t.call(this, e)); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + var t = !e.startsWith(this.pattern); + return { + isMatch: t, + score: t ? 0 : 1, + indices: [0, e.length - 1], + }; + }, + }, + ], + [ + { + key: "type", + get: function () { + return "inverse-prefix-exact"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^!\^"(.*)"$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^!\^(.*)$/; + }, + }, + ], + ), + n + ); + })(T), + V = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + return (r(this, n), t.call(this, e)); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + var t = e.endsWith(this.pattern); + return { + isMatch: t, + score: t ? 0 : 1, + indices: [e.length - this.pattern.length, e.length - 1], + }; + }, + }, + ], + [ + { + key: "type", + get: function () { + return "suffix-exact"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^"(.*)"\$$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^(.*)\$$/; + }, + }, + ], + ), + n + ); + })(T), + G = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + return (r(this, n), t.call(this, e)); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + var t = !e.endsWith(this.pattern); + return { + isMatch: t, + score: t ? 0 : 1, + indices: [0, e.length - 1], + }; + }, + }, + ], + [ + { + key: "type", + get: function () { + return "inverse-suffix-exact"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^!"(.*)"\$$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^!(.*)\$$/; + }, + }, + ], + ), + n + ); + })(T), + H = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + var i, + u = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : {}, + o = u.location, + c = void 0 === o ? j.location : o, + s = u.threshold, + a = void 0 === s ? j.threshold : s, + h = u.distance, + l = void 0 === h ? j.distance : h, + f = u.includeMatches, + d = void 0 === f ? j.includeMatches : f, + v = u.findAllMatches, + g = void 0 === v ? j.findAllMatches : v, + y = u.minMatchCharLength, + p = void 0 === y ? j.minMatchCharLength : y, + A = u.isCaseSensitive, + m = void 0 === A ? j.isCaseSensitive : A, + C = u.ignoreDiacritics, + k = void 0 === C ? j.ignoreDiacritics : C, + F = u.ignoreLocation, + b = void 0 === F ? j.ignoreLocation : F; + return ( + r(this, n), + ((i = t.call(this, e))._bitapSearch = new z(e, { + location: c, + threshold: a, + distance: l, + includeMatches: d, + findAllMatches: g, + minMatchCharLength: p, + isCaseSensitive: m, + ignoreDiacritics: k, + ignoreLocation: b, + })), + i + ); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + return this._bitapSearch.searchIn(e); + }, + }, + ], + [ + { + key: "type", + get: function () { + return "fuzzy"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^"(.*)"$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^(.*)$/; + }, + }, + ], + ), + n + ); + })(T), + X = (function (e) { + c(n, e); + var t = l(n); + function n(e) { + return (r(this, n), t.call(this, e)); + } + return ( + u( + n, + [ + { + key: "search", + value: function (e) { + for ( + var t, n = 0, r = [], i = this.pattern.length; + (t = e.indexOf(this.pattern, n)) > -1; + ) + (n = t + i), r.push([t, n - 1]); + var u = !!r.length; + return { isMatch: u, score: u ? 0 : 1, indices: r }; + }, + }, + ], + [ + { + key: "type", + get: function () { + return "include"; + }, + }, + { + key: "multiRegex", + get: function () { + return /^'"(.*)"$/; + }, + }, + { + key: "singleRegex", + get: function () { + return /^'(.*)$/; + }, + }, + ], + ), + n + ); + })(T), + Y = [U, X, J, Q, G, V, q, H], + Z = Y.length, + ee = / +(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/, + te = new Set([H.type, X.type]), + ne = (function () { + function e(t) { + var n = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : {}, + i = n.isCaseSensitive, + u = void 0 === i ? j.isCaseSensitive : i, + o = n.ignoreDiacritics, + c = void 0 === o ? j.ignoreDiacritics : o, + s = n.includeMatches, + a = void 0 === s ? j.includeMatches : s, + h = n.minMatchCharLength, + l = void 0 === h ? j.minMatchCharLength : h, + f = n.ignoreLocation, + d = void 0 === f ? j.ignoreLocation : f, + v = n.findAllMatches, + g = void 0 === v ? j.findAllMatches : v, + y = n.location, + p = void 0 === y ? j.location : y, + A = n.threshold, + m = void 0 === A ? j.threshold : A, + C = n.distance, + k = void 0 === C ? j.distance : C; + r(this, e), + (this.query = null), + (this.options = { + isCaseSensitive: u, + ignoreDiacritics: c, + includeMatches: a, + minMatchCharLength: l, + findAllMatches: g, + ignoreLocation: d, + location: p, + threshold: m, + distance: k, + }), + (t = u ? t : t.toLowerCase()), + (t = c ? W(t) : t), + (this.pattern = t), + (this.query = (function (e) { + var t = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : {}; + return e.split("|").map(function (e) { + for ( + var n = e + .trim() + .split(ee) + .filter(function (e) { + return e && !!e.trim(); + }), + r = [], + i = 0, + u = n.length; + i < u; + i += 1 + ) { + for (var o = n[i], c = !1, s = -1; !c && ++s < Z; ) { + var a = Y[s], + h = a.isMultiMatch(o); + h && (r.push(new a(h, t)), (c = !0)); + } + if (!c) + for (s = -1; ++s < Z; ) { + var l = Y[s], + f = l.isSingleMatch(o); + if (f) { + r.push(new l(f, t)); + break; + } + } + } + return r; + }); + })(this.pattern, this.options)); + } + return ( + u( + e, + [ + { + key: "searchIn", + value: function (e) { + var t = this.query; + if (!t) return { isMatch: !1, score: 1 }; + var n = this.options, + r = n.includeMatches, + i = n.isCaseSensitive, + u = n.ignoreDiacritics; + (e = i ? e : e.toLowerCase()), (e = u ? W(e) : e); + for ( + var o = 0, c = [], s = 0, a = 0, h = t.length; + a < h; + a += 1 + ) { + var l = t[a]; + (c.length = 0), (o = 0); + for (var d = 0, v = l.length; d < v; d += 1) { + var g = l[d], + y = g.search(e), + p = y.isMatch, + A = y.indices, + m = y.score; + if (!p) { + (s = 0), (o = 0), (c.length = 0); + break; + } + if (((o += 1), (s += m), r)) { + var C = g.constructor.type; + te.has(C) ? c.push.apply(c, f(A)) : c.push(A); + } + } + if (o) { + var k = { isMatch: !0, score: s / o }; + return (r && (k.indices = c), k); + } + } + return { isMatch: !1, score: 1 }; + }, + }, + ], + [ + { + key: "condition", + value: function (e, t) { + return t.useExtendedSearch; + }, + }, + ], + ), + e + ); + })(), + re = []; + function ie() { + re.push.apply(re, arguments); + } + function ue(e, t) { + for (var n = 0, r = re.length; n < r; n += 1) { + var i = re[n]; + if (i.condition(e, t)) return new i(e, t); + } + return new z(e, t); + } + var oe = "$and", + ce = "$or", + se = "$path", + ae = "$val", + he = function (e) { + return !(!e[oe] && !e[ce]); + }, + le = function (e) { + return o( + {}, + oe, + Object.keys(e).map(function (t) { + return o({}, t, e[t]); + }), + ); + }; + function fe(e, t) { + var n = ( + arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {} + ).auto, + r = void 0 === n || n; + return ( + he(e) || (e = le(e)), + (function e(n) { + var i = Object.keys(n), + u = (function (e) { + return !!e[se]; + })(n); + if (!u && i.length > 1 && !he(n)) return e(le(n)); + if ( + (function (e) { + return !g(e) && k(e) && !he(e); + })(n) + ) { + var o = u ? n[se] : i[0], + c = u ? n[ae] : n[o]; + if (!A(c)) + throw new Error( + (function (e) { + return "Invalid value for key ".concat(e); + })(o), + ); + var s = { keyId: w(o), pattern: c }; + return (r && (s.searcher = ue(c, t)), s); + } + var a = { children: [], operator: i[0] }; + return ( + i.forEach(function (t) { + var r = n[t]; + g(r) && + r.forEach(function (t) { + a.children.push(e(t)); + }); + }), + a + ); + })(e) + ); + } + function de(e, t) { + var n = t.ignoreFieldNorm, + r = void 0 === n ? j.ignoreFieldNorm : n, + i = 1; + e.matches.forEach(function (e) { + var t = e.key, + n = e.norm, + u = e.score, + o = t ? t.weight : null; + i *= Math.pow( + 0 === u && o ? Number.EPSILON : u, + (o || 1) * (r ? 1 : n), + ); + }), + (e.score = i); + } + var ve = (function () { + function e(t) { + r(this, e), (this.limit = t), (this.heap = []); + } + return ( + u(e, [ + { + key: "size", + get: function () { + return this.heap.length; + }, + }, + { + key: "shouldInsert", + value: function (e) { + return this.size < this.limit || e < this.heap[0].score; + }, + }, + { + key: "insert", + value: function (e) { + this.size < this.limit + ? (this.heap.push(e), this._bubbleUp(this.size - 1)) + : e.score < this.heap[0].score && + ((this.heap[0] = e), this._sinkDown(0)); + }, + }, + { + key: "extractSorted", + value: function (e) { + return this.heap.sort(e); + }, + }, + { + key: "_bubbleUp", + value: function (e) { + for (var t = this.heap; e > 0; ) { + var n = (e - 1) >> 1; + if (t[e].score <= t[n].score) break; + var r = t[e]; + (t[e] = t[n]), (t[n] = r), (e = n); + } + }, + }, + { + key: "_sinkDown", + value: function (e) { + var t = this.heap, + n = t.length, + r = e; + do { + var i = 2 * (e = r) + 1, + u = 2 * e + 2; + if ( + (i < n && t[i].score > t[r].score && (r = i), + u < n && t[u].score > t[r].score && (r = u), + r !== e) + ) { + var o = t[e]; + (t[e] = t[r]), (t[r] = o); + } + } while (r !== e); + }, + }, + ]), + e + ); + })(); + function ge(e, t) { + var n = e.matches; + (t.matches = []), + F(n) && + n.forEach(function (e) { + if (F(e.indices) && e.indices.length) { + var n = { indices: e.indices, value: e.value }; + e.key && (n.key = e.key.src), + e.idx > -1 && (n.refIndex = e.idx), + t.matches.push(n); + } + }); + } + function ye(e, t) { + t.score = e.score; + } + var pe = (function () { + function e(n) { + var i = + arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, + u = arguments.length > 2 ? arguments[2] : void 0; + r(this, e), + (this.options = t(t({}, j), i)), + this.options.useExtendedSearch, + (this._keyStore = new x(this.options.keys)), + this.setCollection(n, u), + (this._lastQuery = null), + (this._lastSearcher = null); + } + return ( + u(e, [ + { + key: "_getSearcher", + value: function (e) { + if (this._lastQuery === e) return this._lastSearcher; + var t = ue(e, this.options); + return ((this._lastQuery = e), (this._lastSearcher = t), t); + }, + }, + { + key: "setCollection", + value: function (e, t) { + if (((this._docs = e), t && !(t instanceof I))) + throw new Error("Incorrect 'index' type"); + this._myIndex = + t || + N(this.options.keys, this._docs, { + getFn: this.options.getFn, + fieldNormWeight: this.options.fieldNormWeight, + }); + }, + }, + { + key: "add", + value: function (e) { + F(e) && (this._docs.push(e), this._myIndex.add(e)); + }, + }, + { + key: "remove", + value: function () { + for ( + var e = + arguments.length > 0 && void 0 !== arguments[0] + ? arguments[0] + : function () { + return !1; + }, + t = [], + n = [], + r = 0, + i = this._docs.length; + r < i; + r += 1 + ) + e(this._docs[r], r) && (t.push(this._docs[r]), n.push(r)); + if (n.length) { + for (var u = n.length - 1; u >= 0; u -= 1) + this._docs.splice(n[u], 1); + this._myIndex.removeAll(n); + } + return t; + }, + }, + { + key: "removeAt", + value: function (e) { + this._docs.splice(e, 1), this._myIndex.removeAt(e); + }, + }, + { + key: "getIndex", + value: function () { + return this._myIndex; + }, + }, + { + key: "search", + value: function (e) { + var t, + n = ( + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : {} + ).limit, + r = void 0 === n ? -1 : n, + i = this.options, + u = i.includeMatches, + o = i.includeScore, + c = i.shouldSort, + s = i.sortFn, + a = i.ignoreFieldNorm; + if (m(r) && r > 0 && A(e)) { + var h = new ve(r); + A(this._docs[0]) + ? this._searchStringList(e, { heap: h, ignoreFieldNorm: a }) + : this._searchObjectList(e, { heap: h, ignoreFieldNorm: a }), + (t = h.extractSorted(s)); + } else + (function (e, t) { + var n = t.ignoreFieldNorm, + r = void 0 === n ? j.ignoreFieldNorm : n; + e.forEach(function (e) { + de(e, { ignoreFieldNorm: r }); + }); + })( + (t = A(e) + ? A(this._docs[0]) + ? this._searchStringList(e) + : this._searchObjectList(e) + : this._searchLogical(e)), + { ignoreFieldNorm: a }, + ), + c && t.sort(s), + m(r) && r > -1 && (t = t.slice(0, r)); + return (function (e, t) { + var n = + arguments.length > 2 && void 0 !== arguments[2] + ? arguments[2] + : {}, + r = n.includeMatches, + i = void 0 === r ? j.includeMatches : r, + u = n.includeScore, + o = void 0 === u ? j.includeScore : u, + c = []; + return ( + i && c.push(ge), + o && c.push(ye), + e.map(function (e) { + var n = e.idx, + r = { item: t[n], refIndex: n }; + return ( + c.length && + c.forEach(function (t) { + t(e, r); + }), + r + ); + }) + ); + })(t, this._docs, { includeMatches: u, includeScore: o }); + }, + }, + { + key: "_searchStringList", + value: function (e) { + var t = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : {}, + n = t.heap, + r = t.ignoreFieldNorm, + i = this._getSearcher(e), + u = this._myIndex.records, + o = n ? null : []; + return ( + u.forEach(function (e) { + var t = e.v, + u = e.i, + c = e.n; + if (F(t)) { + var s = i.searchIn(t), + a = s.isMatch, + h = s.score, + l = s.indices; + if (a) { + var f = { + item: t, + idx: u, + matches: [{ score: h, value: t, norm: c, indices: l }], + }; + n + ? (de(f, { ignoreFieldNorm: r }), + n.shouldInsert(f.score) && n.insert(f)) + : o.push(f); + } + } + }), + o + ); + }, + }, + { + key: "_searchLogical", + value: function (e) { + var t = this, + n = fe(e, this.options), + r = function e(n, r, i) { + if (!n.children) { + var u = n.keyId, + o = n.searcher, + c = t._findMatches({ + key: t._keyStore.get(u), + value: t._myIndex.getValueForItemAtKeyId(r, u), + searcher: o, + }); + return c && c.length + ? [{ idx: i, item: r, matches: c }] + : []; + } + for ( + var s = [], a = 0, h = n.children.length; + a < h; + a += 1 + ) { + var l = e(n.children[a], r, i); + if (l.length) s.push.apply(s, f(l)); + else if (n.operator === oe) return []; + } + return s; + }, + i = this._myIndex.records, + u = new Map(), + o = []; + return ( + i.forEach(function (e) { + var t = e.$, + i = e.i; + if (F(t)) { + var c = r(n, t, i); + c.length && + (u.has(i) || + (u.set(i, { idx: i, item: t, matches: [] }), + o.push(u.get(i))), + c.forEach(function (e) { + var t, + n = e.matches; + (t = u.get(i).matches).push.apply(t, f(n)); + })); + } + }), + o + ); + }, + }, + { + key: "_searchObjectList", + value: function (e) { + var t = this, + n = + arguments.length > 1 && void 0 !== arguments[1] + ? arguments[1] + : {}, + r = n.heap, + i = n.ignoreFieldNorm, + u = this._getSearcher(e), + o = this._myIndex, + c = o.keys, + s = o.records, + a = r ? null : []; + return ( + s.forEach(function (e) { + var n = e.$, + o = e.i; + if (F(n)) { + var s = []; + if ( + (c.forEach(function (e, r) { + s.push.apply( + s, + f( + t._findMatches({ + key: e, + value: n[r], + searcher: u, + }), + ), + ); + }), + s.length) + ) { + var h = { idx: o, item: n, matches: s }; + r + ? (de(h, { ignoreFieldNorm: i }), + r.shouldInsert(h.score) && r.insert(h)) + : a.push(h); + } + } + }), + a + ); + }, + }, + { + key: "_findMatches", + value: function (e) { + var t = e.key, + n = e.value, + r = e.searcher; + if (!F(n)) return []; + var i = []; + if (g(n)) + n.forEach(function (e) { + var n = e.v, + u = e.i, + o = e.n; + if (F(n)) { + var c = r.searchIn(n), + s = c.isMatch, + a = c.score, + h = c.indices; + s && + i.push({ + score: a, + key: t, + value: n, + idx: u, + norm: o, + indices: h, + }); + } + }); + else { + var u = n.v, + o = n.n, + c = r.searchIn(u), + s = c.isMatch, + a = c.score, + h = c.indices; + s && + i.push({ score: a, key: t, value: u, norm: o, indices: h }); + } + return i; + }, + }, + ]), + e + ); + })(); + return ( + (pe.version = "7.2.0"), + (pe.createIndex = N), + (pe.parseIndex = function (e) { + var t = + arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, + n = t.getFn, + r = void 0 === n ? j.getFn : n, + i = t.fieldNormWeight, + u = void 0 === i ? j.fieldNormWeight : i, + o = e.keys, + c = e.records, + s = new I({ getFn: r, fieldNormWeight: u }); + return (s.setKeys(o), s.setIndexRecords(c), s); + }), + (pe.config = j), + ie(ne), + (pe.use = function () { + for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++) + t[n] = arguments[n]; + t.forEach(function (e) { + return ie(e); + }); + }), + pe + ); + }), + "object" == typeof exports && "undefined" != typeof module + ? (module.exports = t()) + : "function" == typeof define && define.amd + ? define(t) + : ((e = "undefined" != typeof globalThis ? globalThis : e || self).Fuse = + t()); diff --git a/scripts/marquee.js b/scripts/marquee.js index ad6e9de..82499b6 100644 --- a/scripts/marquee.js +++ b/scripts/marquee.js @@ -1,25 +1,25 @@ function updateMarquees() { - document.querySelectorAll(".marquee").forEach((container) => { - const text = container.firstElementChild; - if (!text) return; + document.querySelectorAll(".marquee").forEach((container) => { + const text = container.firstElementChild; + if (!text) return; - const style = getComputedStyle(container); - const paddingLeft = parseFloat(style.paddingLeft); - const paddingRight = parseFloat(style.paddingRight); + const style = getComputedStyle(container); + const paddingLeft = parseFloat(style.paddingLeft); + const paddingRight = parseFloat(style.paddingRight); - const containerInnerWidth = - container.clientWidth - paddingLeft - paddingRight; + const containerInnerWidth = + container.clientWidth - paddingLeft - paddingRight; - const textWidth = text.offsetWidth; + const textWidth = text.offsetWidth; - text.style.setProperty("--text-width", `${textWidth}`); - text.style.setProperty("--container-width", `${containerInnerWidth}`); + text.style.setProperty("--text-width", `${textWidth}`); + text.style.setProperty("--container-width", `${containerInnerWidth}`); - container.classList.toggle( - "overshoot-row", - textWidth > containerInnerWidth, - ); - }); + container.classList.toggle( + "overshoot-row", + textWidth > containerInnerWidth, + ); + }); } window.addEventListener("load", updateMarquees); diff --git a/scripts/paginator.js b/scripts/paginator.js index 334f85e..7226b6c 100644 --- a/scripts/paginator.js +++ b/scripts/paginator.js @@ -3,21 +3,21 @@ const items = document.querySelectorAll(".music .carousel > li"); const links = document.querySelectorAll(".music-paginator li a"); const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - links.forEach((a) => a.classList.remove("active")); - const active = document.querySelector( - `.music-paginator a[href="#${entry.target.id}"]`, - ); - active?.classList.add("active"); - } - }); - }, - { - root: carousel, - threshold: 0.6, - }, + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + links.forEach((a) => a.classList.remove("active")); + const active = document.querySelector( + `.music-paginator a[href="#${entry.target.id}"]`, + ); + active?.classList.add("active"); + } + }); + }, + { + root: carousel, + threshold: 0.6, + }, ); items.forEach((item) => observer.observe(item)); diff --git a/scripts/search-fuse.js b/scripts/search-fuse.js index df56e7d..9a03269 100644 --- a/scripts/search-fuse.js +++ b/scripts/search-fuse.js @@ -3,176 +3,188 @@ let searchSetup = false; let fuse; async function initIndex() { - if (searchSetup) return; + if (searchSetup) return; - let data; - if (typeof window.searchIndex !== "undefined") { - data = window.searchIndex; - } else { - const response = await fetch( - `/search_index.${document.documentElement.lang}.json`, - ); - if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); - data = await response.json(); - } + let data; + if (typeof window.searchIndex !== "undefined") { + data = window.searchIndex; + } else { + const response = await fetch( + `/search_index.${document.documentElement.lang}.json`, + ); + if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); + data = await response.json(); + } - const options = { - includeScore: false, - includeMatches: true, - ignoreLocation: true, - threshold: 0.15, - keys: [ - { name: "title", weight: 3 }, - { name: "description", weight: 2 }, - { name: "body", weight: 1 }, - ], - }; + const options = { + includeScore: false, + includeMatches: true, + ignoreLocation: true, + threshold: 0.15, + keys: [ + { name: "title", weight: 3 }, + { name: "description", weight: 2 }, + { name: "body", weight: 1 }, + ], + }; - fuse = new Fuse(data, options); - searchSetup = true; + fuse = new Fuse(data, options); + searchSetup = true; - console.log("Search index initialized successfully"); + console.log("Search index initialized successfully"); } function debounce(actual_fn, wait) { - let timeoutId; + let timeoutId; - return (...args) => { - clearTimeout(timeoutId); + return (...args) => { + clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - actual_fn(...args); - }, wait); - }; + timeoutId = setTimeout(() => { + actual_fn(...args); + }, wait); + }; } function initSearch() { - const searchModal = document.getElementById("search-modal"); // Full-screen modal - const searchModalContent = document.getElementById("search-modal-content"); // Actual modal box - const searchInput = document.getElementById("search-input"); // Search input - const searchResults = document.getElementById("search-results"); // Search results - const searchButton = document.getElementById("search"); // Search button - const MAX_ITEMS = 10; - const MAX_RESULTS = 4; + const searchModal = document.getElementById("search-modal"); // Full-screen modal + const searchModalContent = document.getElementById("search-modal-content"); // Actual modal box + const searchInput = document.getElementById("search-input"); // Search input + const searchResults = document.getElementById("search-results"); // Search results + const searchButton = document.getElementById("search"); // Search button + const MAX_ITEMS = 10; + const MAX_RESULTS = 4; - let currentTerm = ""; + let currentTerm = ""; - // Open search modal when clicking the search button - if (searchButton) { - searchButton.addEventListener("click", function () { - searchModal.classList.add("active"); - initIndex(); - searchModal.addEventListener( - "transitionend", - function handler() { - searchInput.focus(); - searchModal.removeEventListener("transitionend", handler); - }, - { once: true }, - ); - }); - } + // Open search modal when clicking the search button + if (searchButton) { + searchButton.addEventListener("click", function () { + searchModal.classList.add("active"); + initIndex(); + searchModal.addEventListener( + "transitionend", + function handler() { + searchInput.focus(); + searchModal.removeEventListener("transitionend", handler); + }, + { once: true }, + ); + }); + } - // Open search modal on "/" key press - window.addEventListener("keydown", (event) => { - if ( - event.key === "/" && - document.activeElement.tagName !== "INPUT" && - document.activeElement.tagName !== "TEXTAREA" - ) { - event.preventDefault(); - initIndex(); - searchModal.classList.add("active"); - searchModal.addEventListener( - "transitionend", - function handler() { - searchInput.focus(); - searchModal.removeEventListener("transitionend", handler); - }, - { once: true }, - ); - } - }); + // Open search modal on "/" key press + window.addEventListener("keydown", (event) => { + if ( + event.key === "/" && + document.activeElement.tagName !== "INPUT" && + document.activeElement.tagName !== "TEXTAREA" + ) { + event.preventDefault(); + initIndex(); + searchModal.classList.add("active"); + searchModal.addEventListener( + "transitionend", + function handler() { + searchInput.focus(); + searchModal.removeEventListener("transitionend", handler); + }, + { once: true }, + ); + } + }); - // Close search modal on Escape key - window.addEventListener("keydown", (event) => { - if (event.key === "Escape") { - searchModal.classList.remove("active"); - } - }); + // Close search modal on Escape key + window.addEventListener("keydown", (event) => { + if (event.key === "Escape") { + searchModal.classList.remove("active"); + } + }); - // Close search modal when clicking outside search-modal-content - searchModal.addEventListener("click", function (e) { - if (!searchModalContent.contains(e.target)) { - searchModal.classList.remove("active"); - } - }); + // Close search modal when clicking outside search-modal-content + searchModal.addEventListener("click", function (e) { + if (!searchModalContent.contains(e.target)) { + searchModal.classList.remove("active"); + } + }); - // Prevent clicks inside modal content from closing it - searchModalContent.addEventListener("click", function (e) { - e.stopPropagation(); // Stops event from reaching searchModal click handler - }); + // Prevent clicks inside modal content from closing it + searchModalContent.addEventListener("click", function (e) { + e.stopPropagation(); // Stops event from reaching searchModal click handler + }); - // Search input event - searchInput.addEventListener( - "keyup", - debounce(async function () { - var term = searchInput.value.trim(); - if (term === currentTerm) return; + // Search input event + searchInput.addEventListener( + "keyup", + debounce(async function () { + var term = searchInput.value.trim(); + if (term === currentTerm) return; - searchResults.style.display = term === "" ? "none" : "flex"; - searchResults.innerHTML = ""; // Clear previous results - currentTerm = term; - if (term === "") return; + searchResults.style.display = term === "" ? "none" : "flex"; + searchResults.innerHTML = ""; // Clear previous results + currentTerm = term; + if (term === "") return; - await initIndex(); - var results = fuse.search(term, { limit: MAX_ITEMS }); - if (results.length === 0) { - searchResults.style.display = "none"; - return; - } + await initIndex(); + var results = fuse.search(term, { limit: MAX_ITEMS }); + if (results.length === 0) { + searchResults.style.display = "none"; + return; + } - // Insert formatted search result items - for (const result of results) { - searchResults.innerHTML += makeTeaser(result, term); - } - }, 150), - ); + // Insert formatted search result items + for (const result of results) { + searchResults.innerHTML += makeTeaser(result, term); + } + }, 150), + ); - function makeTeaser(result, searchVal) { - const TEASER_SIZE = 20; - let output = `
${result.item.title}`; + function makeTeaser(result, searchVal) { + const TEASER_SIZE = 20; + let output = `
${result.item.title}`; - for (const match of result.matches) { - if (match.key === "title") continue; + for (const match of result.matches) { + if (match.key === "title") continue; - const indices = match.indices.sort((a, b) => Math.abs(a[1] - a[0] - searchVal.length) - Math.abs(b[1] - b[0] - searchVal.length)).slice(0, MAX_RESULTS); - const value = match.value; + const indices = match.indices + .sort( + (a, b) => + Math.abs(a[1] - a[0] - searchVal.length) - + Math.abs(b[1] - b[0] - searchVal.length), + ) + .slice(0, MAX_RESULTS); + const value = match.value; - for (const ind of indices) { - const start = Math.max(0, ind[0] - TEASER_SIZE); - const end = Math.min(value.length - 1, ind[1] + TEASER_SIZE); - output += "" - + value.substring(start, ind[0]) - + `${value.substring(ind[0], ind[1] + 1)}` - + value.substring(ind[1] + 1, end) - + ""; - } + for (const ind of indices) { + const start = Math.max(0, ind[0] - TEASER_SIZE); + const end = Math.min(value.length - 1, ind[1] + TEASER_SIZE); + output += + "" + + value.substring(start, ind[0]) + + `${value.substring(ind[0], ind[1] + 1)}` + + value.substring(ind[1] + 1, end) + + ""; + } - if (match.indices.length > MAX_RESULTS) { - const moreMatchesText = document.getElementById("more-matches-text").textContent; - output += `${moreMatchesText}`.replace("$MATCHES", `+${match.indices.length - MAX_RESULTS}`); - } - } - return output + "
"; - } + if (match.indices.length > MAX_RESULTS) { + const moreMatchesText = + document.getElementById("more-matches-text").textContent; + output += + `${moreMatchesText}`.replace( + "$MATCHES", + `+${match.indices.length - MAX_RESULTS}`, + ); + } + } + return output + "
"; + } } if ( - document.readyState === "complete" || - (document.readyState !== "loading" && !document.documentElement.doScroll) + document.readyState === "complete" || + (document.readyState !== "loading" && !document.documentElement.doScroll) ) { - initSearch(); + initSearch(); } else { - document.addEventListener("DOMContentLoaded", initSearch); + document.addEventListener("DOMContentLoaded", initSearch); } diff --git a/styles/vars.css b/styles/vars.css index 82e9b14..5d7a026 100644 --- a/styles/vars.css +++ b/styles/vars.css @@ -1,20 +1,20 @@ :root { - --alert-note-title: "Note"; - --alert-tip-title: "Tip"; - --alert-important-title: "Important"; - --alert-warning-title: "Warning"; - --alert-caution-title: "Caution"; + --alert-note-title: "Note"; + --alert-tip-title: "Tip"; + --alert-important-title: "Important"; + --alert-warning-title: "Warning"; + --alert-caution-title: "Caution"; - --font-sans-serif: "Commissioner"; - --font-system-ui: ui-sans-serif, system-ui, sans-serif; - --font-emoji: "Noto Color Emoji"; - --font-monospace: "Commit Mono"; + --font-sans-serif: "Commissioner"; + --font-system-ui: ui-sans-serif, system-ui, sans-serif; + --font-emoji: "Noto Color Emoji"; + --font-monospace: "Commit Mono"; - --icon-info: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/info.svg"); - --icon-lightbulb: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/lightbulb.svg"); - --icon-warning-diamond: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-diamond.svg"); - --icon-warning: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning.svg"); - --icon-warning-octagon: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-octagon.svg"); - --icon-copy: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/copy.svg"); - --icon-check-square-offset: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/check-square-offset.svg"); + --icon-info: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/info.svg"); + --icon-lightbulb: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/lightbulb.svg"); + --icon-warning-diamond: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-diamond.svg"); + --icon-warning: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning.svg"); + --icon-warning-octagon: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-octagon.svg"); + --icon-copy: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/copy.svg"); + --icon-check-square-offset: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/check-square-offset.svg"); }