mdl/amezing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better formatting

Browse source
This commit is contained in:
Hellings 2026-10-23 09:12:49 -04:00
parent ebc85b2938
commit a25da3fc7b
74 changed files with 6910 additions and 4861 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
index.ts
View file

@ -6,38 +6,109 @@
*/ */
import { fileURLToPath } from "node:url"; import { fileURLToPath } from "node:url";
import { readFile } from "node:fs/promises"; import { readFile } from "node:fs/promises";
import type { import type { Integration, Mounts } from "muddle";
Integration,
Mounts,
} from "muddle";
import type { Views } from "muddle/views"; import type { Views } from "muddle/views";
export interface AmezingAccentPreset {
export interface AmezingAccentPreset { name: string; light: string; dark: string } name: string;
light: string;
dark: string;
}
/** Accent presets from ametrine/data/accent_presets.toml. */ /** Accent presets from ametrine/data/accent_presets.toml. */
export const ACCENT_PRESETS: Record<string, AmezingAccentPreset> = { export const ACCENT_PRESETS: Record<string, AmezingAccentPreset> = {
red: { name: "red", light: "hsl(342.0779, 72%, 58%)", dark: "hsl(345.18988, 100%, 69%)" }, red: {
orange: { name: "orange", light: "hsl(15.771428, 74%, 54%)", dark: "hsl(19.731544, 96%, 70%)" }, name: "red",
yellow: { name: "yellow", light: "hsl(34.639175, 91%, 42%)", dark: "hsl(44.70588, 100%, 70%)" }, light: "hsl(342.0779, 72%, 58%)",
green: { name: "green", light: "hsl(153.7815, 61%, 38%)", dark: "hsl(90, 59%, 66%)" }, dark: "hsl(345.18988, 100%, 69%)",
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%)" }, orange: {
teal: { name: "teal", light: "hsl(180, 65%, 35%)", dark: "hsl(183, 85%, 65%)" }, name: "orange",
pink: { name: "pink", light: "hsl(333.88236, 69%, 58%)", dark: "hsl(336.78634, 100%, 70%)" }, light: "hsl(15.771428, 74%, 54%)",
cyan: { name: "cyan", light: "hsl(195, 71%, 35%)", dark: "hsl(193.41046, 72%, 70%)" }, dark: "hsl(19.731544, 96%, 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%)" }, yellow: {
ochrea: { name: "ochrea", light: "hsl(45.75298, 95%, 45%)", dark: "hsl(46.09091, 100%, 78%)" }, name: "yellow",
lime: { name: "lime", light: "hsl(86.25406, 60%, 42%)", dark: "hsl(86.84211, 93%, 71%)" }, light: "hsl(34.639175, 91%, 42%)",
maroon: { name: "maroon", light: "hsl(321.81819, 26%, 41%)", dark: "hsl(322.10526, 66%, 66%)" }, dark: "hsl(44.70588, 100%, 70%)",
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%)" }, green: {
slate: { name: "slate", light: "hsl(212.53197, 15%, 44%)", dark: "hsl(212.90323, 61%, 72%)" }, 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 { 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; 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 { export function accentStyle(accent: string | [string, string?]): string {
const inputs = Array.isArray(accent) ? accent : [accent]; const inputs = Array.isArray(accent) ? accent : [accent];
const light = ACCENT_PRESETS[inputs[0] ?? ""]?.light ?? inputs[0]; 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 lightHsl = parseHsl(light ?? "");
const darkHsl = parseHsl(dark ?? ""); const darkHsl = parseHsl(dark ?? "");
if (!lightHsl || !darkHsl) throw new Error(`Unknown accent color: ${accent}`); if (!lightHsl || !darkHsl) throw new Error(`Unknown accent color: ${accent}`);
@ -86,27 +161,55 @@ const COMPONENTS = [
] as const; ] as const;
function componentTemplates(): [string, string][] { 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 { interface TemplateViews {
component(name: string, component: unknown): unknown; component(name: string, component: unknown): unknown;
engine?: { renderComponent(path: string, props: Record<string, unknown>, context: { locals: Record<string, unknown>; params: Record<string, string> }): Promise<string> }; engine?: {
renderComponent(
path: string,
props: Record<string, unknown>,
context: {
locals: Record<string, unknown>;
params: Record<string, string>;
},
): Promise<string>;
};
} }
function registerAll(views: TemplateViews, accent: string | undefined): void { function registerAll(views: TemplateViews, accent: string | undefined): void {
for (const [name, template] of componentTemplates()) { for (const [name, template] of componentTemplates()) {
views.component(name, { views.component(name, {
async render(props: Record<string, unknown>, context: { locals: Record<string, unknown>; params: Record<string, string> }) { async render(
return views.engine!.renderComponent(template, { accentStyle: accent, ...props }, context); props: Record<string, unknown>,
context: {
locals: Record<string, unknown>;
params: Record<string, string>;
},
) {
return views.engine!.renderComponent(
template,
{ accentStyle: accent, ...props },
context,
);
}, },
}); });
} }
} }
/** Registers the Ametrine components on the views registry. */ /** Registers the Ametrine components on the views registry. */
export function registerAmezing(views: Views, options: { accentColor?: string | [string, string?] } = {}): void { export function registerAmezing(
registerAll(views as unknown as Parameters<typeof registerAll>[0], options.accentColor ? accentStyle(options.accentColor) : undefined); views: Views,
options: { accentColor?: string | [string, string?] } = {},
): void {
registerAll(
views as unknown as Parameters<typeof registerAll>[0],
options.accentColor ? accentStyle(options.accentColor) : undefined,
);
} }
/** Compiled theme stylesheet (Citrine base + Ametrine layout). */ /** Compiled theme stylesheet (Citrine base + Ametrine layout). */
@ -133,22 +236,44 @@ export const amezingFonts: Record<string, string> = {
"/fonts/commit-mono.woff2": "fonts/commit-mono.woff2", "/fonts/commit-mono.woff2": "fonts/commit-mono.woff2",
}; };
export function amezingMount(options: { accentColor?: string | [string, string?] } = {}): Mounts { export function amezingMount(
const accent = options.accentColor ? accentStyle(options.accentColor) : undefined; options: { accentColor?: string | [string, string?] } = {},
): Mounts {
const accent = options.accentColor
? accentStyle(options.accentColor)
: undefined;
return { return {
views: (views) => registerAll(views as unknown as Parameters<typeof registerAll>[0], accent), views: (views) =>
registerAll(
views as unknown as Parameters<typeof registerAll>[0],
accent,
),
routes: (route) => { routes: (route) => {
for (const [routePath, file] of Object.entries(amezingScripts)) { for (const [routePath, file] of Object.entries(amezingScripts)) {
route("GET", `/_muddle/amezing/${routePath}`, async () => route(
new Response(await readFile(new URL(`./${file}`, import.meta.url), "utf8"), { "GET",
headers: { "content-type": "text/javascript; charset=utf-8" }, `/_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)) { for (const [routePath, file] of Object.entries(amezingFonts)) {
route("GET", routePath, async () => route(
new Response(await readFile(new URL(`./${file}`, import.meta.url)), { "GET",
headers: { "content-type": "font/woff2" }, routePath,
})); async () =>
new Response(
await readFile(new URL(`./${file}`, import.meta.url)),
{
headers: { "content-type": "font/woff2" },
},
),
);
} }
}, },
styles: { "/_muddle/amezing.css": () => amezingStyles() }, styles: { "/_muddle/amezing.css": () => amezingStyles() },
@ -156,6 +281,8 @@ export function amezingMount(options: { accentColor?: string | [string, string?]
} }
/** Convenience integration. */ /** 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)] }; return { name: "amezing", mounts: [amezingMount(options)] };
} }

15
package.json
View file

@ -1,7 +1,12 @@
{ {
"name": "@muddle/amezing", "name": "@muddle/amezing",
"version": "0.1.0", "version": "0.1.0",
"type": "module", "type": "module",
"exports": { ".": "./index.ts", "./styles": "./styles/ametrine.css" }, "exports": {
"peerDependencies": { "muddle": "*" } ".": "./index.ts",
"./styles": "./styles/ametrine.css"
},
"peerDependencies": {
"muddle": "*"
}
} }

2
sass/citrine/abstracts/_functions.scss
View file

@ -1,5 +1,5 @@
// Converts px values to rem // Converts px values to rem
// rpx(1) --> 0.0625rem // rpx(1) --> 0.0625rem
@function rpx($px-value) { @function rpx($px-value) {
@return ($px-value / 16) + rem; @return ($px-value / 16) + rem;
} }

134
sass/citrine/abstracts/_mixins.scss
View file

@ -1,82 +1,80 @@
@mixin icon($mode: normal) { @mixin icon($mode: normal) {
@if $mode == normal { @if $mode == normal {
font-style: normal; font-style: normal;
font-variant: normal; font-variant: normal;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
user-select: none; user-select: none;
text-transform: none; text-transform: none;
-webkit-user-select: none; -webkit-user-select: none;
display: inline-block; display: inline-block;
box-sizing: content-box; box-sizing: content-box;
} @else if $mode == pseudo { } @else if $mode == pseudo {
-webkit-mask-image: var(--icon); -webkit-mask-image: var(--icon);
-webkit-mask-size: cover; -webkit-mask-size: cover;
display: block; display: block;
mask-image: var(--icon); mask-image: var(--icon);
mask-size: cover; mask-size: cover;
background-color: currentColor; background-color: currentColor;
width: 1em; width: 1em;
height: 1em; height: 1em;
content: ""; content: "";
} }
} }
@mixin gradient-fill($mode: normal) { @mixin gradient-fill($mode: normal) {
@if $mode == normal { @if $mode == normal {
box-shadow: var(--edge-highlight), var(--shadow-glow); box-shadow: var(--edge-highlight), var(--shadow-glow);
background-image: linear-gradient( background-image: linear-gradient(
to bottom right, to bottom right,
var(--accent-color), var(--accent-color),
var(--accent-highlight) var(--accent-highlight)
); );
color: var(--contrast-color); color: var(--contrast-color);
text-shadow: var(--text-shadow-glow); text-shadow: var(--text-shadow-glow);
} @else if $mode == hover { } @else if $mode == hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
} }
} }
@mixin card { @mixin card {
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 1rem; padding: 1rem;
} }
@mixin chip { @mixin chip {
transition: transition: all var(--transition), transform var(--transition-bezier);
all var(--transition), box-shadow: var(--edge-highlight);
transform var(--transition-bezier); border-radius: var(--rounded-corner-small);
box-shadow: var(--edge-highlight); background-color: var(--bg-muted-1);
border-radius: var(--rounded-corner-small); padding-inline: 0.375rem;
background-color: var(--bg-muted-1); text-decoration: none;
padding-inline: 0.375rem;
text-decoration: none;
} }
@mixin easing-mask($direction: to bottom) { @mixin easing-mask($direction: to bottom) {
--mask-image: linear-gradient( --mask-image: linear-gradient(
to #{$direction}, to #{$direction},
hsl(0, 0%, 0%) 0%, hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.987) 8.1%, hsla(0, 0%, 0%, 0.987) 8.1%,
hsla(0, 0%, 0%, 0.951) 15.5%, hsla(0, 0%, 0%, 0.951) 15.5%,
hsla(0, 0%, 0%, 0.896) 22.5%, hsla(0, 0%, 0%, 0.896) 22.5%,
hsla(0, 0%, 0%, 0.825) 29%, hsla(0, 0%, 0%, 0.825) 29%,
hsla(0, 0%, 0%, 0.741) 35.3%, hsla(0, 0%, 0%, 0.741) 35.3%,
hsla(0, 0%, 0%, 0.648) 41.2%, hsla(0, 0%, 0%, 0.648) 41.2%,
hsla(0, 0%, 0%, 0.55) 47.1%, hsla(0, 0%, 0%, 0.55) 47.1%,
hsla(0, 0%, 0%, 0.45) 52.9%, hsla(0, 0%, 0%, 0.45) 52.9%,
hsla(0, 0%, 0%, 0.352) 58.8%, hsla(0, 0%, 0%, 0.352) 58.8%,
hsla(0, 0%, 0%, 0.259) 64.7%, hsla(0, 0%, 0%, 0.259) 64.7%,
hsla(0, 0%, 0%, 0.175) 71%, hsla(0, 0%, 0%, 0.175) 71%,
hsla(0, 0%, 0%, 0.104) 77.5%, hsla(0, 0%, 0%, 0.104) 77.5%,
hsla(0, 0%, 0%, 0.049) 84.5%, hsla(0, 0%, 0%, 0.049) 84.5%,
hsla(0, 0%, 0%, 0.013) 91.9%, hsla(0, 0%, 0%, 0.013) 91.9%,
hsla(0, 0%, 0%, 0) 100% hsla(0, 0%, 0%, 0) 100%
); );
mask-image: var(--mask-image); mask-image: var(--mask-image);
-webkit-mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image);
} }

1073
sass/citrine/abstracts/_variables.scss
View file

File diff suppressed because it is too large Load diff

96
sass/citrine/base/_animations.scss
View file

@ -1,83 +1,83 @@
@keyframes slide-in-up { @keyframes slide-in-up {
from { from {
transform: translateY(-1rem); transform: translateY(-1rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-in-left { @keyframes slide-in-left {
from { from {
transform: translateX(1rem); transform: translateX(1rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-in-right { @keyframes slide-in-right {
from { from {
transform: translateX(-1rem); transform: translateX(-1rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-in-up-longer { @keyframes slide-in-up-longer {
from { from {
transform: translateY(-2rem); transform: translateY(-2rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-in-down-longer { @keyframes slide-in-down-longer {
from { from {
transform: translateY(2rem); transform: translateY(2rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-in-left-longer { @keyframes slide-in-left-longer {
from { from {
transform: translateX(-2rem); transform: translateX(-2rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-in-right-longer { @keyframes slide-in-right-longer {
from { from {
transform: translateX(2rem); transform: translateX(2rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-out-down-longer { @keyframes slide-out-down-longer {
to { to {
transform: translateY(-2rem); transform: translateY(-2rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes expand-up-left { @keyframes expand-up-left {
from { from {
transform: scale(0.5) translate(-1rem, -1rem); transform: scale(0.5) translate(-1rem, -1rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes expand-up-right { @keyframes expand-up-right {
from { from {
transform: scale(0.5) translate(1rem, -1rem); transform: scale(0.5) translate(1rem, -1rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes expand-down-left { @keyframes expand-down-left {
from { from {
transform: scale(0.5) translate(-1rem, 1rem); transform: scale(0.5) translate(-1rem, 1rem);
opacity: 0; opacity: 0;
} }
} }
@keyframes expand-down-right { @keyframes expand-down-right {
from { from {
transform: scale(0.5) translate(1rem, 1rem); transform: scale(0.5) translate(1rem, 1rem);
opacity: 0; opacity: 0;
} }
} }

68
sass/citrine/base/_base.scss
View file

@ -2,58 +2,58 @@
// Make focused anchor not get covered by header // Make focused anchor not get covered by header
:target:not(#main-content) { :target:not(#main-content) {
scroll-margin-block-start: 6.5rem; scroll-margin-block-start: 6.5rem;
} }
:focus-visible, :focus-visible,
:target:not(#main-content) { :target:not(#main-content) {
animation: focus-in var(--transition); animation: focus-in var(--transition);
outline: 0.125rem solid var(--accent-color); outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem; outline-offset: 0.125rem;
@keyframes focus-in { @keyframes focus-in {
from { from {
outline: 0.5rem solid transparent; outline: 0.5rem solid transparent;
outline-offset: 0.25rem; outline-offset: 0.25rem;
} }
} }
} }
// Style text selection to use accent color // Style text selection to use accent color
::selection { ::selection {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
} }
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--fg-color); color: var(--fg-color);
font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji); font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji);
overflow-wrap: break-word; overflow-wrap: break-word;
@supports (min-height: 100dvh) { @supports (min-height: 100dvh) {
min-height: 100dvh; min-height: 100dvh;
} }
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
*, *,
*::before, *::before,
*::after { *::after {
animation-duration: 0s !important; animation-duration: 0s !important;
transition-duration: 0s !important; transition-duration: 0s !important;
} }
} }
// Disable blur on Firefox Mobile // Disable blur on Firefox Mobile
@-moz-document url-prefix() { @-moz-document url-prefix() {
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.firefox-unblur, .firefox-unblur,
.firefox-unblur::before, .firefox-unblur::before,
.firefox-unblur::after { .firefox-unblur::after {
backdrop-filter: none !important; backdrop-filter: none !important;
} }
} }
} }

42
sass/citrine/base/_layout.scss
View file

@ -3,34 +3,34 @@
body > main, body > main,
body > nav, body > nav,
body > footer { body > footer {
--padding: 1rem; --padding: 1rem;
margin-inline: auto; margin-inline: auto;
padding-inline: 1rem; padding-inline: 1rem;
max-width: calc(var(--content-width) + var(--padding) * 2); max-width: calc(var(--content-width) + var(--padding) * 2);
} }
body > footer { body > footer {
margin-block-start: 4rem; margin-block-start: 4rem;
} }
body > nav { body > nav {
margin-block-end: 4rem; margin-block-end: 4rem;
border-block-end: rpx(1) solid var(--bg-muted-2); border-block-end: rpx(1) solid var(--bg-muted-2);
ul { ul {
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
margin-block: 0.625rem; margin-block: 0.625rem;
padding-inline-start: 0; padding-inline-start: 0;
list-style: none; list-style: none;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
flex-direction: column; flex-direction: column;
} }
} }
li { li {
margin-block: 0; margin-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
} }
} }

62
sass/citrine/base/_reset.scss
View file

@ -4,28 +4,28 @@
*, *,
:after, :after,
:before { :before {
vertical-align: baseline; vertical-align: baseline;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
border: none; border: none;
background: none; background: none;
padding: 0; padding: 0;
color: inherit; color: inherit;
font: inherit; font: inherit;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
button, button,
select { select {
appearance: none; appearance: none;
} }
body { body {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
text-size-adjust: none; text-size-adjust: none;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
line-height: 1.5; line-height: 1.5;
} }
a, a,
@ -42,7 +42,7 @@ input[type="reset"],
input[type="submit"], input[type="submit"],
label, label,
select { select {
cursor: pointer; cursor: pointer;
} }
article, article,
@ -60,7 +60,7 @@ rt,
ruby, ruby,
section, section,
summary { summary {
display: block; display: block;
} }
bdi, bdi,
@ -69,14 +69,14 @@ meter,
output, output,
progress, progress,
time { time {
display: inline-block; display: inline-block;
} }
[hidden], [hidden],
datalist, datalist,
dialog:not([open]), dialog:not([open]),
rp { rp {
display: none !important; display: none !important;
} }
embed, embed,
@ -86,50 +86,50 @@ object,
picture, picture,
svg, svg,
video { video {
display: block; display: block;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
blockquote, blockquote,
q { q {
quotes: none; quotes: none;
} }
blockquote:after, blockquote:after,
blockquote:before, blockquote:before,
q:after, q:after,
q:before { q:before {
content: none; content: none;
} }
strong { strong {
font-weight: 700; font-weight: 700;
} }
em { em {
font-style: italic; font-style: italic;
} }
code, code,
kbd, kbd,
pre, pre,
samp { samp {
font-family: monospace; font-family: monospace;
} }
sub { sub {
vertical-align: sub; vertical-align: sub;
} }
sup { sup {
vertical-align: super; vertical-align: super;
} }
small { small {
font-size: small; font-size: small;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
} }

28
sass/citrine/base/_root.scss
View file

@ -1,20 +1,20 @@
@use "../abstracts/variables" as *; @use "../abstracts/variables" as *;
:root { :root {
@include variables(("light", "common")); @include variables(("light", "common"));
@include variables-accent(("light", "common")); @include variables-accent(("light", "common"));
scrollbar-color: var(--accent-color) transparent; scrollbar-color: var(--accent-color) transparent;
accent-color: var(--accent-color); accent-color: var(--accent-color);
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
& { & {
@include variables("dark"); @include variables("dark");
@include variables-accent(("dark")); @include variables-accent(("dark"));
color-scheme: dark; color-scheme: dark;
} }
} }
} }

466
sass/citrine/base/_typography.scss
View file

@ -7,25 +7,25 @@ ol,
dl, dl,
blockquote, blockquote,
pre { pre {
margin-block: 1rem; margin-block: 1rem;
} }
ul ul, ul ul,
ul ol, ul ol,
ol ul, ol ul,
ol ol { ol ol {
margin-block: 0; margin-block: 0;
} }
p { p {
text-wrap: pretty; text-wrap: pretty;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
:disabled, :disabled,
[aria-disabled="true"] { [aria-disabled="true"] {
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
cursor: not-allowed; cursor: not-allowed;
} }
h1, h1,
@ -34,367 +34,363 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
transition-duration: var(--transition); transition-duration: var(--transition);
transition-property: text-shadow, font-weight; transition-property: text-shadow, font-weight;
margin-block: 2rem 1rem; margin-block: 2rem 1rem;
color: var(--accent-color); color: var(--accent-color);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: 1; line-height: 1;
font-variation-settings: "FLAR" 100; font-variation-settings: "FLAR" 100;
letter-spacing: -0.05em; letter-spacing: -0.05em;
text-decoration: underline; text-decoration: underline;
text-decoration-color: var(--bg-muted-1); text-decoration-color: var(--bg-muted-1);
text-decoration-thickness: 0.125em; text-decoration-thickness: 0.125em;
text-wrap: balance; text-wrap: balance;
overflow-wrap: break-word; overflow-wrap: break-word;
&:target { &:target {
animation: none !important; animation: none !important;
outline: none !important; outline: none !important;
font-weight: var(--font-weight-light); font-weight: var(--font-weight-light);
text-shadow: var(--text-shadow-glow); text-shadow: var(--text-shadow-glow);
} }
} }
h1 { h1 {
font-size: var(--font-size-xxx-large); font-size: var(--font-size-xxx-large);
} }
h2 { h2 {
font-size: var(--font-size-xx-large); font-size: var(--font-size-xx-large);
} }
h3 { h3 {
font-size: var(--font-size-x-large); font-size: var(--font-size-x-large);
} }
h4 { h4 {
font-size: var(--font-size-large); font-size: var(--font-size-large);
} }
h5 { h5 {
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
} }
h6 { h6 {
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
h1 { h1 {
font-size: var(--font-size-xx-large); font-size: var(--font-size-xx-large);
} }
h2 { h2 {
font-size: var(--font-size-x-large); font-size: var(--font-size-x-large);
} }
h3 { h3 {
font-size: var(--font-size-large); font-size: var(--font-size-large);
} }
h4 { h4 {
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
} }
h5 { h5 {
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
h6 { h6 {
font-size: var(--font-size-x-small); font-size: var(--font-size-x-small);
} }
} }
small { small {
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
abbr[title] { abbr[title] {
cursor: help; cursor: help;
text-decoration: underline; text-decoration: underline;
text-decoration-style: dotted; text-decoration-style: dotted;
text-decoration-thickness: rpx(1); text-decoration-thickness: rpx(1);
} }
figcaption { figcaption {
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
text-align: center; text-align: center;
} }
blockquote { blockquote {
margin: 1rem 0; margin: 1rem 0;
border-inline-start: 0.25rem solid var(--accent-color); border-inline-start: 0.25rem solid var(--accent-color);
border-start-start-radius: 0.25rem; border-start-start-radius: 0.25rem;
border-end-start-radius: 0.25rem; border-end-start-radius: 0.25rem;
padding-inline-start: 0.75rem; padding-inline-start: 0.75rem;
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
pre, pre,
code, code,
kbd, kbd,
samp { samp {
font-family: var(--font-monospace), var(--font-ui-monospace); font-family: var(--font-monospace), var(--font-ui-monospace);
} }
pre { pre {
margin: 1rem 0; margin: 1rem 0;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
overflow-x: auto; overflow-x: auto;
scrollbar-width: thin; scrollbar-width: thin;
line-height: 1.25; line-height: 1.25;
} }
code:not(pre code), code:not(pre code),
mark, mark,
samp, samp,
q { q {
@include chip; @include chip;
} }
code:not(pre code) { code:not(pre code) {
background-color: var(--red-bg-1); background-color: var(--red-bg-1);
padding-block: rpx(3); padding-block: rpx(3);
color: var(--red-fg); color: var(--red-fg);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
mark { mark {
color: var(--accent-color); color: var(--accent-color);
} }
del { del {
color: var(--red-fg); color: var(--red-fg);
text-decoration: line-through; text-decoration: line-through;
text-decoration-thickness: rpx(1); text-decoration-thickness: rpx(1);
} }
ins { ins {
color: var(--green-fg); color: var(--green-fg);
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: rpx(1); text-decoration-thickness: rpx(1);
} }
samp { samp {
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
q { q {
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-style: italic; font-style: italic;
} }
u { u {
text-decoration: underline; text-decoration: underline;
text-decoration-style: wavy; text-decoration-style: wavy;
text-decoration-color: var(--red-fg); text-decoration-color: var(--red-fg);
text-decoration-thickness: rpx(1); text-decoration-thickness: rpx(1);
} }
progress { progress {
appearance: none; appearance: none;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.25rem; padding: 0.25rem;
width: 100%; width: 100%;
height: 1rem; height: 1rem;
color: var(--accent-color); color: var(--accent-color);
&:indeterminate { &:indeterminate {
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
} }
&:indeterminate::-moz-progress-bar { &:indeterminate::-moz-progress-bar {
background-color: transparent; background-color: transparent;
} }
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: transparent; background-color: transparent;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: 9999px; border-radius: 9999px;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: 9999px; border-radius: 9999px;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
} }
kbd { kbd {
display: inline-block; display: inline-block;
transition-duration: var(--transition); transition-duration: var(--transition);
transition-property: transform, box-shadow, background-color; transition-property: transform, box-shadow, background-color;
cursor: pointer; cursor: pointer;
box-shadow: box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--bg-muted-2);
var(--edge-highlight), border-radius: var(--rounded-corner-small);
inset 0 -0.125rem 0 var(--bg-muted-2); background-color: var(--bg-muted-1);
border-radius: var(--rounded-corner-small); padding: 0 0.375rem;
background-color: var(--bg-muted-1); font-size: var(--font-size-small);
padding: 0 0.375rem;
font-size: var(--font-size-small);
// Small nice thingy, keys can be pressed! // Small nice thingy, keys can be pressed!
&:active { &:active {
transform: translateY(0.125rem); transform: translateY(0.125rem);
box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2); box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2);
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
} }
} }
a { a {
color: var(--accent-color); color: var(--accent-color);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
text-decoration-color: var(--accent-highlight); text-decoration-color: var(--accent-highlight);
text-decoration-thickness: rpx(1); text-decoration-thickness: rpx(1);
&:hover { &:hover {
text-decoration-style: wavy; text-decoration-style: wavy;
} }
} }
hr { hr {
margin: 2rem auto; margin: 2rem auto;
border: 0.125rem solid var(--bg-muted-2); border: 0.125rem solid var(--bg-muted-2);
border-radius: 9999px; border-radius: 9999px;
} }
dt { dt {
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
} }
dd { dd {
margin-inline-start: 1.5rem; margin-inline-start: 1.5rem;
margin-block-end: 1rem; margin-block-end: 1rem;
} }
aside { aside {
float: inline-end; float: inline-end;
margin-inline-start: 1rem; margin-inline-start: 1rem;
margin-block-end: 1rem; margin-block-end: 1rem;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 1rem; padding: 1rem;
width: calc(var(--content-width) / 3); width: calc(var(--content-width) / 3);
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
float: none; float: none;
margin-inline-start: 0; margin-inline-start: 0;
width: 100%; width: 100%;
} }
:first-child { :first-child {
margin-block-start: 0; margin-block-start: 0;
} }
:last-child { :last-child {
margin-block-end: 0; margin-block-end: 0;
} }
} }
details { details {
display: flow-root; display: flow-root;
transition: padding-block-end var(--transition); transition: padding-block-end var(--transition);
margin-block-end: 1rem; margin-block-end: 1rem;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
&::details-content { &::details-content {
display: block; display: block;
opacity: 0; opacity: 0;
transition-behavior: allow-discrete; transition-behavior: allow-discrete;
transition-duration: var(--transition); transition-duration: var(--transition);
transition-property: opacity, block-size, content-visibility; transition-property: opacity, block-size, content-visibility;
block-size: 0; block-size: 0;
overflow: hidden; overflow: hidden;
} }
&[open] { &[open] {
padding-block-end: 1rem; padding-block-end: 1rem;
&::details-content { &::details-content {
opacity: 1; opacity: 1;
block-size: auto; block-size: auto;
block-size: calc-size(auto, size); block-size: calc-size(auto, size);
} }
summary { summary {
color: var(--accent-color); color: var(--accent-color);
&::before { &::before {
transform: scaleY(-1); transform: scaleY(-1);
} }
@supports not (block-size: calc-size(auto, size)) { @supports not (block-size: calc-size(auto, size)) {
& ~ * { & ~ * {
animation: slide-in-up var(--transition-bezier); animation: slide-in-up var(--transition-bezier);
} }
} }
} }
} }
summary { summary {
transition: var(--transition); transition: var(--transition);
color: var(--fg-muted-1); color: var(--fg-muted-1);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
list-style: none; list-style: none;
&::-webkit-details-marker { &::-webkit-details-marker {
display: none; display: none;
} }
&::before { &::before {
@include icon(pseudo); @include icon(pseudo);
--icon: var(--icon-caret-down); --icon: var(--icon-caret-down);
display: inline-block; display: inline-block;
vertical-align: rpx(-2); vertical-align: rpx(-2);
transition: transition: all var(--transition), transform var(--transition-bezier);
all var(--transition), margin-inline-end: 0.25rem;
transform var(--transition-bezier); }
margin-inline-end: 0.25rem; }
}
}
& > :last-child, & > :last-child,
& > :last-child img { & > :last-child img {
margin-block-end: 0; margin-block-end: 0;
} }
} }
figure { figure {
margin-inline: 0; margin-inline: 0;
} }
ol, ol,
ul { ul {
padding-inline-start: 1.5rem; padding-inline-start: 1.5rem;
} }
li { li {
margin-block: 0.25rem; margin-block: 0.25rem;
padding-inline-start: 0.25rem; padding-inline-start: 0.25rem;
&::marker { &::marker {
color: var(--accent-color); color: var(--accent-color);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
} }
} }
b, b,
strong { strong {
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
} }

146
sass/citrine/components/_buttons.scss
View file

@ -1,100 +1,100 @@
@use "../abstracts/mixins" as *; @use "../abstracts/mixins" as *;
.buttons { .buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
margin-block-start: 2rem; margin-block-start: 2rem;
&.centered { &.centered {
justify-content: center; justify-content: center;
} }
&.start { &.start {
justify-content: flex-start; justify-content: flex-start;
} }
&.end { &.end {
justify-content: flex-end; justify-content: flex-end;
} }
&.big { &.big {
gap: 0.5rem; gap: 0.5rem;
} }
} }
.buttons a, .buttons a,
a.button, a.button,
button { button {
display: inline-block; display: inline-block;
transition: transition:
background-color var(--transition), background-color var(--transition),
color var(--transition), color var(--transition),
box-shadow var(--transition), box-shadow var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
color: var(--fg-muted-1); color: var(--fg-muted-1);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
font-size: var(--font-size-small); font-size: var(--font-size-small);
line-height: 1.5rem; line-height: 1.5rem;
text-decoration: none; text-decoration: none;
&:not(:disabled, [aria-disabled="true"]):hover { &:not(:disabled, [aria-disabled="true"]):hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
&:not(:disabled, [aria-disabled="true"]):active { &:not(:disabled, [aria-disabled="true"]):active {
transform: var(--active); transform: var(--active);
} }
&.suggested { &.suggested {
@include gradient-fill; @include gradient-fill;
&:not(:disabled, [aria-disabled="true"]):hover { &:not(:disabled, [aria-disabled="true"]):hover {
@include gradient-fill(hover); @include gradient-fill(hover);
} }
} }
&.subtle { &.subtle {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
&:not(:disabled, [aria-disabled="true"]):hover { &:not(:disabled, [aria-disabled="true"]):hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
} }
&[aria-busy="true"] { &[aria-busy="true"] {
animation: progress-shimmer var(--transition-long) ease-in-out alternate animation: progress-shimmer var(--transition-long) ease-in-out alternate
infinite; infinite;
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
transparent 50%, transparent 50%,
var(--bg-muted-1) 75%, var(--bg-muted-1) 75%,
transparent 100% transparent 100%
); );
background-size: 200%; background-size: 200%;
@keyframes progress-shimmer { @keyframes progress-shimmer {
to { to {
background-position-x: -200%; background-position-x: -200%;
} }
} }
} }
} }
.buttons.big a, .buttons.big a,
.buttons.big button, .buttons.big button,
a.button.big, a.button.big,
button.big { button.big {
border-radius: 9999px; border-radius: 9999px;
padding: 0.625rem 1.25rem; padding: 0.625rem 1.25rem;
} }

2
sass/citrine/components/_card.scss
View file

@ -1,5 +1,5 @@
@use "../abstracts/mixins" as *; @use "../abstracts/mixins" as *;
.card { .card {
@include card; @include card;
} }

154
sass/citrine/components/_crt.scss
View file

@ -1,90 +1,90 @@
.crt, .crt,
pre:has(code[data-crt], code[data-lang=""]) { pre:has(code[data-crt], code[data-lang=""]) {
position: relative; position: relative;
animation: flicker 0.25s alternate infinite; animation: flicker 0.25s alternate infinite;
margin-inline: auto; margin-inline: auto;
box-shadow: var(--shadow-glow); box-shadow: var(--shadow-glow);
background-image: var(--crt-bg); background-image: var(--crt-bg);
background-color: transparent !important; background-color: transparent !important;
padding: 0; padding: 0;
width: fit-content; width: fit-content;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
color: var(--accent-color) !important; color: var(--accent-color) !important;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
text-shadow: var(--text-shadow-glow); text-shadow: var(--text-shadow-glow);
@keyframes flicker { @keyframes flicker {
25% { 25% {
opacity: 0.95; opacity: 0.95;
} }
50% { 50% {
opacity: 0.85; opacity: 0.85;
} }
75% { 75% {
opacity: 1; opacity: 1;
} }
to { to {
opacity: 0.9; opacity: 0.9;
} }
} }
&::before, &::before,
&::after { &::after {
position: absolute; position: absolute;
inset: 0; inset: 0;
content: ""; content: "";
} }
&::before { &::before {
opacity: var(--scanlines-opacity); opacity: var(--scanlines-opacity);
z-index: 1; z-index: 1;
animation: scanlines 0.1s linear infinite; animation: scanlines 0.1s linear infinite;
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25) 0.125rem, rgba(0, 0, 0, 0.25) 0.125rem,
transparent 0.125rem, transparent 0.125rem,
transparent 0.25rem transparent 0.25rem
); );
background-position-y: -0.125rem; background-position-y: -0.125rem;
background-repeat: no-repeat; background-repeat: no-repeat;
pointer-events: none; pointer-events: none;
@keyframes scanlines { @keyframes scanlines {
to { to {
background-position-y: 0.125rem; background-position-y: 0.125rem;
} }
} }
} }
&::after { &::after {
opacity: 0.05; opacity: 0.05;
animation: scanline 5s linear infinite; animation: scanline 5s linear infinite;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
transparent, transparent,
var(--accent-color) 16rem var(--accent-color) 16rem
); );
background-position-y: -16rem; background-position-y: -16rem;
background-size: 100% 16rem; background-size: 100% 16rem;
pointer-events: none; pointer-events: none;
@keyframes scanline { @keyframes scanline {
to { to {
background-position-y: calc(100% + 16rem); background-position-y: calc(100% + 16rem);
} }
} }
} }
& > code { & > code {
display: block; display: block;
border-radius: inherit; border-radius: inherit;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
overflow-x: auto; overflow-x: auto;
scrollbar-width: thin; scrollbar-width: thin;
} }
} }

14
sass/citrine/components/_external.scss
View file

@ -2,11 +2,11 @@
@use "../abstracts/mixins" as *; @use "../abstracts/mixins" as *;
a.external:not(:has(img, svg, video, picture, figure))::after { a.external:not(:has(img, svg, video, picture, figure))::after {
@include icon(pseudo); @include icon(pseudo);
--icon: var(--icon-arrow-square-out); --icon: var(--icon-arrow-square-out);
display: inline-block; display: inline-block;
vertical-align: -0.125rem; vertical-align: -0.125rem;
opacity: var(--dim-opacity); opacity: var(--dim-opacity);
margin-inline-start: 0.125rem; margin-inline-start: 0.125rem;
font-size: max(1rem, 1em); font-size: max(1rem, 1em);
} }

32
sass/citrine/components/_iframe.scss
View file

@ -1,20 +1,20 @@
iframe { iframe {
display: block; display: block;
margin: 1rem auto; margin: 1rem auto;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border: none; border: none;
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
&:fullscreen { &:fullscreen {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
} }
&:-webkit-full-screen { &:-webkit-full-screen {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
} }
} }

386
sass/citrine/components/_input.scss
View file

@ -1,8 +1,8 @@
@use "../abstracts/mixins" as *; @use "../abstracts/mixins" as *;
input { input {
appearance: none; appearance: none;
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
} }
input:not([type]), input:not([type]),
@ -10,252 +10,250 @@ input[type="text"],
input[type="search"], input[type="search"],
input[type="password"], input[type="password"],
input[type="submit"] { input[type="submit"] {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none; border: none;
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
font-family: inherit; font-family: inherit;
} }
input:not([type]), input:not([type]),
input[type="text"], input[type="text"],
input[type="search"], input[type="search"],
input[type="password"] { input[type="password"] {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
width: 100%; width: 100%;
&::placeholder { &::placeholder {
opacity: 1; opacity: 1;
color: var(--fg-muted-1); color: var(--fg-muted-1);
} }
} }
input[type="submit"] { input[type="submit"] {
transition: transition:
background-color var(--transition), background-color var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
color: var(--fg-muted-1); color: var(--fg-muted-1);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
font-size: var(--font-size-small); font-size: var(--font-size-small);
&:enabled:hover { &:enabled:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
} }
&:enabled:active { &:enabled:active {
transform: var(--active); transform: var(--active);
} }
} }
input[type="radio"], input[type="radio"],
input[type="checkbox"], input[type="checkbox"],
input[type="color"] { input[type="color"] {
position: relative; position: relative;
transition: background-color var(--transition); transition: background-color var(--transition);
border: 0.125rem solid var(--bg-muted-2); border: 0.125rem solid var(--bg-muted-2);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
&:not(:checked):enabled:hover { &:not(:checked):enabled:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
} }
} }
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
vertical-align: -0.125em; vertical-align: -0.125em;
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
&::before { &::before {
display: block; display: block;
position: absolute; position: absolute;
transform: scale(0.5); transform: scale(0.5);
opacity: 0; opacity: 0;
transition: transition: opacity var(--transition), transform var(--transition-bezier);
opacity var(--transition), content: "";
transform var(--transition-bezier); }
content: "";
}
&:checked { &:checked {
border: 0.15rem solid transparent; border: 0.15rem solid transparent;
background-color: var(--accent-color); background-color: var(--accent-color);
&::before { &::before {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
} }
} }
input[type="radio"] { input[type="radio"] {
border-radius: 50%; border-radius: 50%;
&::before { &::before {
inset-block-start: 0.125rem; inset-block-start: 0.125rem;
inset-inline-start: 0.125rem; inset-inline-start: 0.125rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--contrast-color); background-color: var(--contrast-color);
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
} }
input[type="checkbox"] { input[type="checkbox"] {
border-radius: calc(var(--rounded-corner-small) / 2); border-radius: calc(var(--rounded-corner-small) / 2);
&::before { &::before {
@include icon(pseudo); @include icon(pseudo);
--icon: var(--icon-check); --icon: var(--icon-check);
transform-origin: bottom left; transform-origin: bottom left;
inset-block-start: -0.125rem; inset-block-start: -0.125rem;
inset-inline-start: -0.125rem; inset-inline-start: -0.125rem;
color: var(--contrast-color); color: var(--contrast-color);
font-size: 1rem; font-size: 1rem;
} }
&.switch { &.switch {
vertical-align: -0.375rem; vertical-align: -0.375rem;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
width: 2.5rem; width: 2.5rem;
height: 1.5rem; height: 1.5rem;
&.big { &.big {
vertical-align: -0.625rem; vertical-align: -0.625rem;
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
&::before { &::before {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
} }
} }
&::before { &::before {
transform: none; transform: none;
transform-origin: center; transform-origin: center;
opacity: 1; opacity: 1;
mask-image: none; mask-image: none;
inset-block-start: 0.25rem; inset-block-start: 0.25rem;
inset-inline-start: 0.25rem; inset-inline-start: 0.25rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
content: ""; content: "";
} }
&:checked { &:checked {
background-color: var(--accent-color); background-color: var(--accent-color);
&::before { &::before {
transform: translateX(1rem); transform: translateX(1rem);
background-color: var(--contrast-color); background-color: var(--contrast-color);
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
transform: translateX(-1rem); transform: translateX(-1rem);
} }
} }
} }
&:disabled::before { &:disabled::before {
box-shadow: none; box-shadow: none;
} }
} }
} }
input[type="color"] { input[type="color"] {
vertical-align: -0.375em; vertical-align: -0.375em;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none; border: none;
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
padding: 0.25rem; padding: 0.25rem;
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
&::-moz-color-swatch { &::-moz-color-swatch {
border: none; border: none;
border-radius: calc(var(--rounded-corner-small) - 0.25rem); border-radius: calc(var(--rounded-corner-small) - 0.25rem);
} }
&::-webkit-color-swatch-wrapper { &::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
&::-webkit-color-swatch { &::-webkit-color-swatch {
border-radius: calc(var(--rounded-corner-small) - 0.25rem); border-radius: calc(var(--rounded-corner-small) - 0.25rem);
} }
} }
input[type="range"] { input[type="range"] {
appearance: none; appearance: none;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 9999px; border-radius: 9999px;
background: var(--bg-muted-1); background: var(--bg-muted-1);
padding: 0.5rem 0.25rem; padding: 0.5rem 0.25rem;
width: 100%; width: 100%;
height: 1rem; height: 1rem;
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
cursor: pointer; cursor: pointer;
border-radius: 9999px; border-radius: 9999px;
background: var(--accent-color); background: var(--accent-color);
width: 100%; width: 100%;
} }
&::-moz-range-track { &::-moz-range-track {
cursor: pointer; cursor: pointer;
border-radius: 9999px; border-radius: 9999px;
background: var(--accent-color); background: var(--accent-color);
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
appearance: none; appearance: none;
cursor: ew-resize; cursor: ew-resize;
margin-block: -0.5rem; margin-block: -0.5rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: none; border: none;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: white; background-color: white;
width: 0.5rem; width: 0.5rem;
height: 1.5rem; height: 1.5rem;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
appearance: none; appearance: none;
cursor: ew-resize; cursor: ew-resize;
margin-block: -0.5rem; margin-block: -0.5rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: none; border: none;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: white; background-color: white;
width: 0.5rem; width: 0.5rem;
height: 1.5rem; height: 1.5rem;
} }
&.hollow { &.hollow {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
margin-block: 0; margin-block: 0;
outline: 0.25rem solid white; outline: 0.25rem solid white;
background-color: transparent; background-color: transparent;
height: 0.5rem; height: 0.5rem;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
margin-block: 0; margin-block: 0;
outline: 0.25rem solid white; outline: 0.25rem solid white;
background-color: transparent; background-color: transparent;
height: 0.5rem; height: 0.5rem;
} }
} }
} }

252
sass/citrine/components/_media.scss
View file

@ -1,165 +1,165 @@
img, img,
video { video {
display: block; display: block;
margin: 1rem auto; margin: 1rem auto;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
max-width: 100%; max-width: 100%;
max-height: calc(100vh - 2rem); max-height: calc(100vh - 2rem);
&.full, &.full,
&[src*="#full"] { &[src*="#full"] {
width: 100%; width: 100%;
} }
&.start, &.start,
&.end, &.end,
&[src*="#start"], &[src*="#start"],
&[src*="#end"] { &[src*="#end"] {
width: calc(var(--content-width) / 3); width: calc(var(--content-width) / 3);
} }
&.start, &.start,
&[src*="#start"] { &[src*="#start"] {
float: inline-start; float: inline-start;
transform-origin: left; transform-origin: left;
margin-inline-end: 1rem; margin-inline-end: 1rem;
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
transform-origin: right; transform-origin: right;
} }
} }
&.end, &.end,
&[src*="#end"] { &[src*="#end"] {
float: inline-end; float: inline-end;
transform-origin: right; transform-origin: right;
margin-inline-start: 1rem; margin-inline-start: 1rem;
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
transform-origin: left; transform-origin: left;
} }
} }
&.pixels, &.pixels,
&[src*="#pixels"] { &[src*="#pixels"] {
image-rendering: pixelated; image-rendering: pixelated;
} }
&.has-alpha, &.has-alpha,
&[src*="#has-alpha"] { &[src*="#has-alpha"] {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
} }
&.drop-shadow, &.drop-shadow,
&[src*="#drop-shadow"] { &[src*="#drop-shadow"] {
filter: var(--drop-shadow); filter: var(--drop-shadow);
} }
&.spoiler, &.spoiler,
&[src*="#spoiler"] { &[src*="#spoiler"] {
opacity: var(--dim-opacity); opacity: var(--dim-opacity);
clip-path: inset(0 0 0 0 round var(--rounded-corner)); clip-path: inset(0 0 0 0 round var(--rounded-corner));
filter: blur(1.5rem); filter: blur(1.5rem);
&:hover, &:hover,
&:active { &:active {
opacity: 1; opacity: 1;
clip-path: inset( clip-path: inset(
-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small) -0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small)
); );
filter: none; filter: none;
} }
&.solid, &.solid,
&[src*="#solid"] { &[src*="#solid"] {
clip-path: none; clip-path: none;
filter: brightness(0) contrast(0.5); filter: brightness(0) contrast(0.5);
box-shadow: none; box-shadow: none;
&:hover, &:hover,
&:active { &:active {
filter: none; filter: none;
} }
} }
} }
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
&.start, &.start,
&.end, &.end,
&[src*="#start"], &[src*="#start"],
&[src*="#end"] { &[src*="#end"] {
float: none; float: none;
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
width: auto; width: auto;
} }
} }
} }
img { img {
transition: transition:
box-shadow var(--transition), box-shadow var(--transition),
border-radius var(--transition), border-radius var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
&:not(.no-hover, [src*="#no-hover"], .emoji) { &:not(.no-hover, [src*="#no-hover"], .emoji) {
cursor: zoom-in; cursor: zoom-in;
&:hover { &:hover {
position: relative; position: relative;
transform: var(--hover); transform: var(--hover);
z-index: 1; z-index: 1;
box-shadow: var(--edge-highlight), var(--shadow-raised); box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
} }
&.start, &.start,
&.end, &.end,
&[src*="#start"], &[src*="#start"],
&[src*="#end"] { &[src*="#end"] {
transition: transform var(--transition-bezier-longer); transition: transform var(--transition-bezier-longer);
&:hover { &:hover {
transform: scale(2); transform: scale(2);
} }
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
transform-origin: center; transform-origin: center;
transition: transform var(--transition-bezier); transition: transform var(--transition-bezier);
&:hover { &:hover {
transform: var(--hover); transform: var(--hover);
} }
} }
} }
&.has-alpha, &.has-alpha,
&[src*="#has-alpha"] { &[src*="#has-alpha"] {
&:hover { &:hover {
box-shadow: none; box-shadow: none;
} }
} }
} }
} }
a img:not(.no-hover, [src*="#no-hover"]) { a img:not(.no-hover, [src*="#no-hover"]) {
cursor: pointer; cursor: pointer;
} }
video:fullscreen { video:fullscreen {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
} }
video:-webkit-full-screen { video:-webkit-full-screen {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
} }
picture { picture {
display: inline-block; display: inline-block;
} }

18
sass/citrine/components/_overflow-auto.scss
View file

@ -1,13 +1,13 @@
.overflow-auto { .overflow-auto {
overflow: auto; overflow: auto;
&.overshoot { &.overshoot {
margin-block: -1rem; margin-block: -1rem;
padding-block: 1rem; padding-block: 1rem;
} }
&.overshoot-row { &.overshoot-row {
margin-inline: -1rem; margin-inline: -1rem;
padding-inline: 1rem; padding-inline: 1rem;
} }
} }

40
sass/citrine/components/_overshoot.scss
View file

@ -1,23 +1,23 @@
.overshoot { .overshoot {
--mask: linear-gradient( --mask: linear-gradient(
to bottom, to bottom,
transparent, transparent,
black 1rem, black 1rem,
black calc(100% - 1rem), black calc(100% - 1rem),
transparent transparent
); );
-webkit-mask-image: var(--mask); -webkit-mask-image: var(--mask);
mask-image: var(--mask); mask-image: var(--mask);
&-row { &-row {
--mask: linear-gradient( --mask: linear-gradient(
to right, to right,
transparent, transparent,
black 1rem, black 1rem,
black calc(100% - 1rem), black calc(100% - 1rem),
transparent transparent
); );
-webkit-mask-image: var(--mask); -webkit-mask-image: var(--mask);
mask-image: var(--mask); mask-image: var(--mask);
} }
} }

40
sass/citrine/components/_skip-to-content.scss
View file

@ -1,23 +1,23 @@
#skip-to-content { #skip-to-content {
position: absolute; position: absolute;
transform: translateX(-50%) translateY(calc(-100% - 1rem)); transform: translateX(-50%) translateY(calc(-100% - 1rem));
z-index: 9999; z-index: 9999;
transition: transition:
backdrop-filter var(--transition), backdrop-filter var(--transition),
box-shadow var(--transition), box-shadow var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
inset-inline-start: 50vw; inset-inline-start: 50vw;
border-radius: 9999px; border-radius: 9999px;
background-color: var(--glass-bg-1); background-color: var(--glass-bg-1);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
width: max-content; width: max-content;
text-decoration: none; text-decoration: none;
&:focus-visible, &:focus-visible,
&:focus { &:focus {
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
transform: translateX(-50%) translateY(1rem); transform: translateX(-50%) translateY(1rem);
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
} }
} }

38
sass/citrine/components/_spoiler.scss
View file

@ -1,25 +1,23 @@
span.spoiler { span.spoiler {
filter: blur(0.25rem); filter: blur(0.25rem);
transition: filter var(--transition); transition: filter var(--transition);
&:focus, &:focus,
&:hover { &:hover {
filter: none; filter: none;
} }
&.solid { &.solid {
filter: none; filter: none;
transition: transition: background-color var(--transition), color var(--transition);
background-color var(--transition), border-radius: var(--rounded-corner-small);
color var(--transition); background-color: var(--fg-muted-1);
border-radius: var(--rounded-corner-small); color: transparent;
background-color: var(--fg-muted-1);
color: transparent;
&:focus, &:focus,
&:hover { &:hover {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
} }
} }
} }

36
sass/citrine/components/_table.scss
View file

@ -1,36 +1,36 @@
@use "../abstracts/functions" as *; @use "../abstracts/functions" as *;
table { table {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
thead { thead {
border-block-start: none; border-block-start: none;
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
} }
tr { tr {
&:nth-child(even) { &:nth-child(even) {
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
} }
th, th,
td { td {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
} }
tbody tr { tbody tr {
border-block: rpx(1) solid var(--bg-muted-2); border-block: rpx(1) solid var(--bg-muted-2);
&:last-child { &:last-child {
border-block-end: none; border-block-end: none;
} }
} }
.overflow-auto table { .overflow-auto table {
width: max-content; width: max-content;
min-width: 100%; min-width: 100%;
} }

28
sass/citrine/components/_textarea.scss
View file

@ -1,17 +1,17 @@
textarea { textarea {
appearance: none; appearance: none;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none; border: none;
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 1rem; padding: 1rem;
resize: none; resize: none;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
font-family: inherit; font-family: inherit;
&::placeholder { &::placeholder {
opacity: 1; opacity: 1;
color: var(--fg-muted-1); color: var(--fg-muted-1);
} }
} }

6
sass/citrine/components/_title.scss
View file

@ -1,5 +1,5 @@
strong.title { strong.title {
color: var(--accent-color); color: var(--accent-color);
font-size: var(--font-size-large); font-size: var(--font-size-large);
line-height: 1; line-height: 1;
} }

72
sass/citrine/components/_tooltip.scss
View file

@ -1,41 +1,41 @@
// attr() hack from https://cyrneko.eu/css-tricks.html // attr() hack from https://cyrneko.eu/css-tricks.html
@media (pointer: coarse), (hover: none) { @media (pointer: coarse), (hover: none) {
.tooltip, .tooltip,
abbr[title] { abbr[title] {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
justify-content: center; justify-content: center;
&::after { &::after {
position: absolute; position: absolute;
top: calc(100% + 0.25rem); top: calc(100% + 0.25rem);
z-index: 9999; z-index: 9999;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
transition: transition:
visibility var(--transition), visibility var(--transition),
opacity var(--transition), opacity var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-color: var(--glass-bg-1); background-color: var(--glass-bg-1);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
width: max-content; width: max-content;
content: attr(title); content: attr(title);
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
transform: translateY(-0.5rem) scale(0.5); transform: translateY(-0.5rem) scale(0.5);
transform-origin: top; transform-origin: top;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
max-width: calc(var(--content-width) / 3); max-width: calc(var(--content-width) / 3);
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
&:focus::after, &:focus::after,
&:hover::after { &:hover::after {
transform: none; transform: none;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
} }
} }

18
sass/citrine/components/_visually-hidden.scss
View file

@ -1,11 +1,11 @@
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
clip-path: inset(50%) !important; clip-path: inset(50%) !important;
margin: -1px !important; margin: -1px !important;
border-width: 0 !important; border-width: 0 !important;
padding: 0 !important; padding: 0 !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
overflow: hidden !important; overflow: hidden !important;
white-space: nowrap !important; white-space: nowrap !important;
} }

226
sass/components/_alerts.scss
View file

@ -3,151 +3,151 @@
@use "../citrine/abstracts/variables" as *; @use "../citrine/abstracts/variables" as *;
[class^="markdown-alert"] { [class^="markdown-alert"] {
display: flow-root; display: flow-root;
position: relative; position: relative;
&::before { &::before {
margin-inline-start: 1.5rem; margin-inline-start: 1.5rem;
content: var(--alert-title); content: var(--alert-title);
color: var(--accent-color); color: var(--accent-color);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
} }
&::after { &::after {
@include icon(pseudo); @include icon(pseudo);
--icon: var(--alert-icon); --icon: var(--alert-icon);
position: absolute; position: absolute;
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
inset-block-start: rpx(1); inset-block-start: rpx(1);
inset-inline-start: 0.75rem; inset-inline-start: 0.75rem;
color: var(--accent-color); color: var(--accent-color);
font-size: 1.25rem; font-size: 1.25rem;
} }
& > :first-child { & > :first-child {
margin-block-start: 0.25rem; margin-block-start: 0.25rem;
} }
& > :last-child { & > :last-child {
margin-block-end: 0; margin-block-end: 0;
} }
} }
.markdown-alert { .markdown-alert {
// GitHub flavored alerts // GitHub flavored alerts
&-note, &-note,
&-tip, &-tip,
&-important, &-important,
&-warning, &-warning,
&-caution, &-caution,
// Generic colors // Generic colors
&-red, &-red,
&-orange, &-orange,
&-yellow, &-yellow,
&-green, &-green,
&-blue, &-blue,
&-purple { &-purple {
@include variables-accent(("light", "common")); @include variables-accent(("light", "common"));
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@include variables-accent("dark"); @include variables-accent("dark");
} }
} }
&-note { &-note {
&::before { &::before {
content: var(--alert-note-title); content: var(--alert-note-title);
} }
&::after { &::after {
--icon: var(--icon-info); --icon: var(--icon-info);
} }
} }
&-tip { &-tip {
&::before { &::before {
content: var(--alert-tip-title); content: var(--alert-tip-title);
} }
&::after { &::after {
--icon: var(--icon-lightbulb); --icon: var(--icon-lightbulb);
} }
} }
&-important { &-important {
&::before { &::before {
content: var(--alert-important-title); content: var(--alert-important-title);
} }
&::after { &::after {
--icon: var(--icon-warning-diamond); --icon: var(--icon-warning-diamond);
} }
} }
&-warning { &-warning {
&::before { &::before {
content: var(--alert-warning-title); content: var(--alert-warning-title);
} }
&::after { &::after {
--icon: var(--icon-warning); --icon: var(--icon-warning);
} }
} }
&-caution { &-caution {
&::before { &::before {
content: var(--alert-caution-title); content: var(--alert-caution-title);
} }
&::after { &::after {
--icon: var(--icon-warning-octagon); --icon: var(--icon-warning-octagon);
} }
} }
&-caution, &-caution,
&-red { &-red {
--accent-h: var(--red-h); --accent-h: var(--red-h);
--accent-s: var(--red-s); --accent-s: var(--red-s);
--accent-l: var(--red-l); --accent-l: var(--red-l);
--accent-color: var(--red-fg); --accent-color: var(--red-fg);
} }
&-orange { &-orange {
--accent-h: var(--orange-h); --accent-h: var(--orange-h);
--accent-s: var(--orange-s); --accent-s: var(--orange-s);
--accent-l: var(--orange-l); --accent-l: var(--orange-l);
--accent-color: var(--orange-fg); --accent-color: var(--orange-fg);
} }
&-warning, &-warning,
&-yellow { &-yellow {
--accent-h: var(--yellow-h); --accent-h: var(--yellow-h);
--accent-s: var(--yellow-s); --accent-s: var(--yellow-s);
--accent-l: var(--yellow-l); --accent-l: var(--yellow-l);
--accent-color: var(--yellow-fg); --accent-color: var(--yellow-fg);
} }
&-tip, &-tip,
&-green { &-green {
--accent-h: var(--green-h); --accent-h: var(--green-h);
--accent-s: var(--green-s); --accent-s: var(--green-s);
--accent-l: var(--green-l); --accent-l: var(--green-l);
--accent-color: var(--green-fg); --accent-color: var(--green-fg);
} }
&-note, &-note,
&-blue { &-blue {
--accent-h: var(--blue-h); --accent-h: var(--blue-h);
--accent-s: var(--blue-s); --accent-s: var(--blue-s);
--accent-l: var(--blue-l); --accent-l: var(--blue-l);
--accent-color: var(--blue-fg); --accent-color: var(--blue-fg);
} }
&-important, &-important,
&-purple { &-purple {
--accent-h: var(--purple-h); --accent-h: var(--purple-h);
--accent-s: var(--purple-s); --accent-s: var(--purple-s);
--accent-l: var(--purple-l); --accent-l: var(--purple-l);
--accent-color: var(--purple-fg); --accent-color: var(--purple-fg);
} }
} }

116
sass/components/_article-details.scss
View file

@ -1,71 +1,71 @@
@use "../citrine/abstracts/functions" as *; @use "../citrine/abstracts/functions" as *;
.article-details { .article-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
margin-block-end: 2rem; margin-block-end: 2rem;
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
.items { .items {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
gap: 0.25rem 0.5rem; gap: 0.25rem 0.5rem;
} }
.item { .item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
} }
a { a {
color: inherit; color: inherit;
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
font-size: var(--font-size-small); font-size: var(--font-size-small);
text-decoration-color: transparent; text-decoration-color: transparent;
&:hover { &:hover {
text-decoration-style: solid; text-decoration-style: solid;
text-decoration-color: var(--fg-muted-1); text-decoration-color: var(--fg-muted-1);
} }
} }
.tooltip { .tooltip {
cursor: help; cursor: help;
} }
.icon { .icon {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.375rem; padding: 0.375rem;
color: var(--accent-color); color: var(--accent-color);
font-size: 1.25rem; font-size: 1.25rem;
} }
.tags { .tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0 0.5rem; gap: 0 0.5rem;
margin: 0; margin: 0;
border-block-start: rpx(1) solid var(--bg-muted-2); border-block-start: rpx(1) solid var(--bg-muted-2);
padding-inline-start: 0; padding-inline-start: 0;
padding-block-start: 0.5rem; padding-block-start: 0.5rem;
width: 100%; width: 100%;
list-style: none; list-style: none;
li { li {
display: flex; display: flex;
margin-block: 0; margin-block: 0;
padding: 0; padding: 0;
} }
a::before { a::before {
content: "#"; content: "#";
} }
} }
} }

426
sass/components/_article-list.scss
View file

@ -3,252 +3,254 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.article-list { .article-list {
display: grid; display: grid;
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fill, auto-fill,
minmax(calc(var(--content-width) / 2.5), 1fr) minmax(calc(var(--content-width) / 2.5), 1fr)
); );
gap: 1rem; gap: 1rem;
margin-block-start: 2rem; margin-block-start: 2rem;
&.categories article { &.categories article {
position: relative; position: relative;
&:hover .icon:last-child { &:hover .icon:last-child {
transform: translateY(-50%) rotate(-10deg) scale(1.5); transform: translateY(-50%) rotate(-10deg) scale(1.5);
} }
.icon:last-child { .icon:last-child {
position: absolute; position: absolute;
transform: translateY(-50%); transform: translateY(-50%);
z-index: -1; z-index: -1;
transition: transform var(--transition-bezier); transition: transform var(--transition-bezier);
inset-block-start: 50%; inset-block-start: 50%;
inset-inline-end: -3rem; inset-inline-end: -3rem;
color: var(--bg-muted-1); color: var(--bg-muted-1);
font-size: 12rem; font-size: 12rem;
} }
} }
article { article {
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: 1.25rem; border-radius: 1.25rem;
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
&.draft { &.draft {
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
filter: grayscale(1); filter: grayscale(1);
transition-duration: var(--transition); transition-duration: var(--transition);
transition-property: opacity, filter; transition-property: opacity, filter;
&:hover { &:hover {
opacity: 1; opacity: 1;
filter: none; filter: none;
} }
} }
&.has-banner.has-accent-color { &.has-banner.has-accent-color {
background-image: var(--bg-overlay), var(--blurnail); background-image: var(--bg-overlay), var(--blurnail);
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
&.has-accent-color { &.has-accent-color {
@include variables-accent(("light", "common")); @include variables-accent(("light", "common"));
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
& { & {
@include variables-accent("dark"); @include variables-accent("dark");
} }
} }
} }
& > div { & > div {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
margin: 1rem; margin: 1rem;
& > a { & > a {
text-decoration: none; text-decoration: none;
} }
} }
h3 { h3 {
margin: 0; margin: 0;
border-inline-start: 0.25rem solid; border-inline-start: 0.25rem solid;
border-start-start-radius: 0.25rem; border-start-start-radius: 0.25rem;
border-end-start-radius: 0.25rem; border-end-start-radius: 0.25rem;
padding-inline-start: 0.5rem; padding-inline-start: 0.5rem;
color: var(--accent-color); color: var(--accent-color);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
text-decoration: none; text-decoration: none;
&:hover::after { &:hover::after {
opacity: 1; opacity: 1;
} }
&::after { &::after {
opacity: 0; opacity: 0;
transition: opacity var(--transition); transition: opacity var(--transition);
content: " →"; content: " →";
} }
} }
.description p { .description p {
margin-block-end: 0.75rem; margin-block-end: 0.75rem;
} }
.open-post { .open-post {
@include easing-mask(bottom); @include easing-mask(bottom);
display: flex; display: flex;
position: relative; position: relative;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-block-end: -2rem; margin-block-end: -2rem;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 0; border-radius: 0;
aspect-ratio: 2 / 1; aspect-ratio: 2 / 1;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
&::before { &::before {
background-color: var(--shade-color); background-color: var(--shade-color);
} }
img { img {
transform: var(--hover); transform: var(--hover);
filter: blur(0.25rem); filter: blur(0.25rem);
} }
.icon { .icon {
transform: none; transform: none;
opacity: 1; opacity: 1;
} }
} }
&:active img { &:active img {
transform: none; transform: none;
} }
&::before { &::before {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
transition: background-color var(--transition); transition: background-color var(--transition);
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
content: ""; content: "";
} }
img { img {
position: absolute; position: absolute;
transition-duration: var(--transition); transition-duration: var(--transition);
transition-property: transform, filter; transition-property: transform, filter;
margin: 0; margin: 0;
inset: 0; inset: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.icon { .icon {
transform: scale(1.5); transform: scale(1.5);
opacity: 0; opacity: 0;
z-index: 1; z-index: 1;
transition: transition:
transform var(--transition-bezier), transform var(--transition-bezier),
opacity var(--transition); opacity var(--transition);
color: white; color: white;
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
.article-details { .article-details {
flex: 1; flex: 1;
justify-content: flex-end; justify-content: flex-end;
margin-block-end: 0; margin-block-end: 0;
.tags { .tags {
margin-block-start: auto; margin-block-start: auto;
margin-block-end: -0.25rem; margin-block-end: -0.25rem;
} }
} }
} }
} }
.paginator { .paginator {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
margin-block-start: 4rem; margin-block-start: 4rem;
&:has(a.paginator-item.previous:active) .paginator-counter { &:has(a.paginator-item.previous:active) .paginator-counter {
border-start-start-radius: 1rem; border-start-start-radius: 1rem;
border-end-start-radius: 1rem; border-end-start-radius: 1rem;
} }
&:has(a.paginator-item.next:active) .paginator-counter { &:has(a.paginator-item.next:active) .paginator-counter {
border-start-end-radius: 1rem; border-start-end-radius: 1rem;
border-end-end-radius: 1rem; border-end-end-radius: 1rem;
} }
&-item { &-item {
display: inline-block; display: inline-block;
transition: transition:
border-radius var(--transition), border-radius var(--transition),
border-start-end-radius var(--transition), border-start-end-radius var(--transition),
border-end-end-radius var(--transition), border-end-end-radius var(--transition),
border-start-start-radius var(--transition), border-start-start-radius var(--transition),
border-end-start-radius var(--transition), border-end-start-radius var(--transition),
background-color var(--transition), background-color var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 1rem; border-radius: 1rem;
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.5rem; padding: 0.5rem;
color: var(--accent-color); color: var(--accent-color);
line-height: 0; line-height: 0;
text-decoration: none; text-decoration: none;
&:not([aria-disabled="true"]):hover { &:not([aria-disabled="true"]):hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
} }
&:not([aria-disabled="true"]):active { &:not([aria-disabled="true"]):active {
transform: var(--active); transform: var(--active);
border-radius: 1rem; border-radius: 1rem;
} }
&-previous { &-previous {
border-start-end-radius: var(--rounded-corner-small); border-start-end-radius: var(--rounded-corner-small);
border-end-end-radius: var(--rounded-corner-small); border-end-end-radius: var(--rounded-corner-small);
} }
&-next { &-next {
border-start-start-radius: var(--rounded-corner-small); border-start-start-radius: var(--rounded-corner-small);
border-end-start-radius: var(--rounded-corner-small); border-end-start-radius: var(--rounded-corner-small);
} }
} }
&-counter { &-counter {
@include gradient-fill; @include gradient-fill;
display: inline-block; display: inline-block;
transition: var(--transition-bezier); transition: var(--transition-bezier);
transition-property: transition-property:
border-start-start-radius, border-end-start-radius, border-start-start-radius,
border-start-end-radius, border-end-end-radius; border-end-start-radius,
border-radius: var(--rounded-corner-small); border-start-end-radius,
background-color: var(--bg-muted-1); border-end-end-radius;
padding: 0.25rem 0.5rem; border-radius: var(--rounded-corner-small);
font-weight: var(--font-weight-semi-bold); background-color: var(--bg-muted-1);
font-variant-numeric: tabular-nums; padding: 0.25rem 0.5rem;
} font-weight: var(--font-weight-semi-bold);
font-variant-numeric: tabular-nums;
}
} }

106
sass/components/_article-nav.scss
View file

@ -1,66 +1,66 @@
.article-nav { .article-nav {
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
flex-direction: column; flex-direction: column;
} }
&-item { &-item {
flex: 1; flex: 1;
transition: transition:
box-shadow var(--transition), box-shadow var(--transition),
background-color var(--transition), background-color var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
min-width: 0; min-width: 0;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
.article-title { .article-title {
color: var(--accent-color); color: var(--accent-color);
} }
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
&.prev { &.prev {
text-align: start; text-align: start;
.nav-arrow::before { .nav-arrow::before {
content: "← "; content: "← ";
} }
} }
&.next { &.next {
text-align: end; text-align: end;
.nav-arrow::after { .nav-arrow::after {
content: " →"; content: " →";
} }
} }
} }
.nav-arrow { .nav-arrow {
margin-block-end: 0.5rem; margin-block-end: 0.5rem;
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
.article-title { .article-title {
display: block; display: block;
transition: color var(--transition); transition: color var(--transition);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
color: var(--fg-muted-1); color: var(--fg-muted-1);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }

64
sass/components/_audio-button.scss
View file

@ -2,41 +2,41 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.audio-button { .audio-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
color: var(--accent-color); color: var(--accent-color);
background-color: var(--accent-bg-1); background-color: var(--accent-bg-1);
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: transition:
background-color var(--transition), background-color var(--transition),
transform var(--transition-bezier), transform var(--transition-bezier),
box-shadow var(--transition); box-shadow var(--transition);
&:hover { &:hover {
background-color: var(--accent-bg-2); background-color: var(--accent-bg-2);
transform: scale(1.03); transform: scale(1.03);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
&:focus-visible { &:focus-visible {
outline: 0.125rem solid var(--accent-color); outline: 0.125rem solid var(--accent-color);
outline-offset: 0.25rem; outline-offset: 0.25rem;
} }
.audio-button-label { .audio-button-label {
display: none; display: none;
@media (min-width: 480px) { @media (min-width: 480px) {
display: inline; display: inline;
} }
} }
} }

56
sass/components/_audio.scss
View file

@ -3,39 +3,39 @@
// Who doesn't like a party popper mid article? // Who doesn't like a party popper mid article?
.audio { .audio {
@include chip; @include chip;
padding-block: 0; padding-block: 0;
color: var(--accent-color); color: var(--accent-color);
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
&:hover { &:hover {
color: var(--accent-color) !important; color: var(--accent-color) !important;
.icon { .icon {
animation: speaker var(--transition-long) ease-out infinite; animation: speaker var(--transition-long) ease-out infinite;
@keyframes speaker { @keyframes speaker {
from { from {
--icon: var(--icon-speaker-none); --icon: var(--icon-speaker-none);
} }
50% { 50% {
--icon: var(--icon-speaker-low); --icon: var(--icon-speaker-low);
} }
to { to {
--icon: var(--icon-speaker-high); --icon: var(--icon-speaker-high);
} }
} }
} }
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
.icon { .icon {
vertical-align: rpx(-3); vertical-align: rpx(-3);
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
} }
} }

164
sass/components/_banner.scss
View file

@ -1,98 +1,98 @@
@use "../citrine/abstracts/functions" as *; @use "../citrine/abstracts/functions" as *;
body.has-banner { body.has-banner {
background-image: var(--bg-overlay), var(--blurnail); background-image: var(--bg-overlay), var(--blurnail);
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
} }
#banner { #banner {
--mask: linear-gradient(black calc(100% - 2rem), transparent); --mask: linear-gradient(black calc(100% - 2rem), transparent);
-webkit-mask-image: var(--mask); -webkit-mask-image: var(--mask);
display: flex; display: flex;
grid-area: banner; grid-area: banner;
justify-content: center; justify-content: center;
mask-image: var(--mask); mask-image: var(--mask);
margin-block-end: -2.5rem; margin-block-end: -2.5rem;
padding-block: 3.25rem 2.5rem; padding-block: 3.25rem 2.5rem;
width: 100%; width: 100%;
div { div {
position: relative; position: relative;
margin-inline: 1rem; margin-inline: 1rem;
aspect-ratio: 2 / 1; aspect-ratio: 2 / 1;
width: 100%; width: 100%;
max-width: var(--content-width); max-width: var(--content-width);
} }
img { img {
position: absolute; position: absolute;
margin: 0; margin: 0;
inset: 0; inset: 0;
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0 !important; border-radius: var(--rounded-corner) var(--rounded-corner) 0 0 !important;
aspect-ratio: 2 / 1; aspect-ratio: 2 / 1;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }
img:nth-of-type(1) { img:nth-of-type(1) {
opacity: var(--dim-opacity); opacity: var(--dim-opacity);
z-index: -1; z-index: -1;
filter: blur(1.5rem); filter: blur(1.5rem);
animation: banner-glow-load calc(0.525s + var(--transition-long)); animation: banner-glow-load calc(0.525s + var(--transition-long));
inset-block-start: 1rem; inset-block-start: 1rem;
@keyframes banner-glow-load { @keyframes banner-glow-load {
from, from,
52.5% { 52.5% {
opacity: 0; opacity: 0;
} }
} }
} }
img:nth-of-type(2) { img:nth-of-type(2) {
transform-origin: bottom; transform-origin: bottom;
animation: banner-load calc(0.525s + var(--transition-longer)); animation: banner-load calc(0.525s + var(--transition-longer));
@keyframes banner-load { @keyframes banner-load {
from, from,
52.5% { 52.5% {
transform: translateY(2rem) scale(0.95); transform: translateY(2rem) scale(0.95);
opacity: 0; opacity: 0;
} }
} }
} }
& + #main-content { & + #main-content {
margin-block-start: 0; margin-block-start: 0;
article > h1:first-of-type, article > h1:first-of-type,
h1:first-of-type { h1:first-of-type {
margin-inline: -1rem; margin-inline: -1rem;
margin-block: 0; margin-block: 0;
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
padding: 1rem; padding: 1rem;
width: unset; width: unset;
-webkit-backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);
backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
animation: banner-heading calc(0.525s + var(--transition-longer)); animation: banner-heading calc(0.525s + var(--transition-longer));
box-shadow: inset 0 rpx(1) 0 var(--accent-highlight); box-shadow: inset 0 rpx(1) 0 var(--accent-highlight);
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
var(--bg-muted-1), var(--bg-muted-1),
transparent 50% transparent 50%
); );
background-size: auto 200%; background-size: auto 200%;
text-decoration: none; text-decoration: none;
@keyframes banner-heading { @keyframes banner-heading {
from, from,
52.5% { 52.5% {
box-shadow: none; box-shadow: none;
background-position-y: 100%; background-position-y: 100%;
} }
} }
} }
} }
} }

908
sass/components/_comments.scss
View file

@ -2,458 +2,458 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
#comments { #comments {
#qrcode { #qrcode {
float: inline-end; float: inline-end;
cursor: help; cursor: help;
box-sizing: content-box; box-sizing: content-box;
margin-inline-start: 1rem; margin-inline-start: 1rem;
margin-block-start: 3rem; margin-block-start: 3rem;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: white; background-color: white;
padding: 0.75rem; padding: 0.75rem;
width: rpx(116); width: rpx(116);
height: rpx(116); height: rpx(116);
svg { svg {
pointer-events: none; pointer-events: none;
} }
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
display: none; display: none;
} }
} }
#comments-wrapper { #comments-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
margin-block-start: 2rem; margin-block-start: 2rem;
#comments-status { #comments-status {
color: var(--fg-muted-1); color: var(--fg-muted-1);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
font-size: var(--font-size-x-large); font-size: var(--font-size-x-large);
text-align: center; text-align: center;
} }
.comment { .comment {
display: grid; display: grid;
// grid-template-columns: min-content; // grid-template-columns: min-content;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: grid-template-areas:
"avatar header " "avatar header "
"...... post " "...... post "
"...... media " "...... media "
"...... card " "...... card "
"...... interactions"; "...... interactions";
column-gap: 1rem; column-gap: 1rem;
justify-items: start; justify-items: start;
animation: slide-in-right var(--transition-bezier); animation: slide-in-right var(--transition-bezier);
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
animation: slide-in-left var(--transition-bezier); animation: slide-in-left var(--transition-bezier);
} }
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
grid-template-areas: grid-template-areas:
"avatar header " "avatar header "
"post post " "post post "
"media media " "media media "
"card card " "card card "
"interactions interactions"; "interactions interactions";
align-items: start; align-items: start;
} }
&.comment-reply { &.comment-reply {
position: relative; position: relative;
border-inline-start: 0.25rem solid var(--bg-muted-2); border-inline-start: 0.25rem solid var(--bg-muted-2);
border-start-start-radius: 0.25rem; border-start-start-radius: 0.25rem;
border-end-start-radius: 0.25rem; border-end-start-radius: 0.25rem;
padding-inline-start: 1rem; padding-inline-start: 1rem;
&:has(+ .comment-reply) { &:has(+ .comment-reply) {
border-end-start-radius: 0; border-end-start-radius: 0;
} }
& + .comment-reply { & + .comment-reply {
margin-block-start: -2rem; margin-block-start: -2rem;
border-start-start-radius: 0; border-start-start-radius: 0;
padding-block-start: 2rem; padding-block-start: 2rem;
} }
} }
.avatar-link { .avatar-link {
grid-area: avatar; grid-area: avatar;
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
.avatar { .avatar {
transition: transform var(--transition-bezier); transition: transform var(--transition-bezier);
margin: 0; margin: 0;
background-size: cover; background-size: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
&:hover { &:hover {
transform: rotate(10deg) var(--hover); transform: rotate(10deg) var(--hover);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
} }
} }
.mention { .mention {
@include chip; @include chip;
display: inline-block; display: inline-block;
&:hover { &:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
} }
.invisible { .invisible {
display: none; display: none;
} }
.ellipsis::after { .ellipsis::after {
content: "…"; content: "…";
} }
header { header {
display: flex; display: flex;
grid-area: header; grid-area: header;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
color: var(--fg-muted-1); color: var(--fg-muted-1);
line-height: 1; line-height: 1;
.display, .display,
.instance { .instance {
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.display { .display {
color: var(--fg-color); color: var(--fg-color);
line-height: 1.5rem; line-height: 1.5rem;
text-decoration: none; text-decoration: none;
.emoji { .emoji {
cursor: unset; cursor: unset;
&:hover { &:hover {
transform: none; transform: none;
} }
} }
} }
.instance { .instance {
margin-block-start: 0.25rem; margin-block-start: 0.25rem;
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
font-size: var(--font-size-x-small); font-size: var(--font-size-x-small);
&.op { &.op {
cursor: help; cursor: help;
&::before { &::before {
@include icon(pseudo); @include icon(pseudo);
--icon: var(--icon-seal-check); --icon: var(--icon-seal-check);
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
font-size: 1rem; font-size: 1rem;
} }
} }
} }
.timestamp { .timestamp {
margin-block-start: 0.25rem; margin-block-start: 0.25rem;
a { a {
color: inherit; color: inherit;
font-size: var(--font-size-x-small); font-size: var(--font-size-x-small);
text-decoration-color: transparent; text-decoration-color: transparent;
&:hover { &:hover {
text-decoration-style: solid; text-decoration-style: solid;
text-decoration-color: inherit; text-decoration-color: inherit;
} }
&::after { &::after {
vertical-align: top; vertical-align: top;
} }
} }
} }
} }
details { details {
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-image: background-image:
linear-gradient( linear-gradient(
to right, to right,
transparent, transparent,
transparent 0.5rem, transparent 0.5rem,
var(--bg-muted-1) 0.5rem, var(--bg-muted-1) 0.5rem,
var(--bg-muted-1) calc(100% - 0.5rem), var(--bg-muted-1) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem), transparent calc(100% - 0.5rem),
transparent transparent
), ),
linear-gradient( linear-gradient(
to right, to right,
transparent, transparent,
transparent 0.5rem, transparent 0.5rem,
var(--bg-color) 0.5rem, var(--bg-color) 0.5rem,
var(--bg-color) calc(100% - 0.5rem), var(--bg-color) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem), transparent calc(100% - 0.5rem),
transparent transparent
), ),
repeating-linear-gradient( repeating-linear-gradient(
45deg, 45deg,
var(--contrast-color), var(--contrast-color),
var(--contrast-color) 0.25rem, var(--contrast-color) 0.25rem,
var(--accent-color) 0.25rem, var(--accent-color) 0.25rem,
var(--accent-color) 0.5rem var(--accent-color) 0.5rem
); );
width: 100%; width: 100%;
summary { summary {
border-radius: 0; border-radius: 0;
background-image: none; background-image: none;
} }
} }
main { main {
grid-area: post; grid-area: post;
justify-self: stretch; justify-self: stretch;
margin-block-start: 1rem; margin-block-start: 1rem;
padding: 0; padding: 0;
:first-child { :first-child {
margin-block-start: 0; margin-block-start: 0;
} }
:last-child { :last-child {
margin-block-end: 0; margin-block-end: 0;
} }
} }
.attachments { .attachments {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-area: media; grid-area: media;
gap: 0.5rem; gap: 0.5rem;
margin-block-start: 1rem; margin-block-start: 1rem;
img, img,
video { video {
margin: 0; margin: 0;
} }
} }
.meta-card { .meta-card {
grid-area: card; grid-area: card;
transition: transform var(--transition-bezier); transition: transform var(--transition-bezier);
margin-block-start: 1rem; margin-block-start: 1rem;
width: min(calc(var(--content-width) / 2), 100%); width: min(calc(var(--content-width) / 2), 100%);
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
img { img {
transform: var(--hover); transform: var(--hover);
box-shadow: var(--edge-highlight), var(--shadow-raised); box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
} }
figcaption { figcaption {
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
} }
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
figure { figure {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
margin: 0; margin: 0;
img { img {
margin: 0; margin: 0;
border-radius: var(--rounded-corner) var(--rounded-corner) border-radius: var(--rounded-corner) var(--rounded-corner)
var(--rounded-corner-small) var(--rounded-corner-small); var(--rounded-corner-small) var(--rounded-corner-small);
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
object-fit: cover; object-fit: cover;
& + figcaption { & + figcaption {
border-radius: var(--rounded-corner-small) border-radius: var(--rounded-corner-small)
var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner-small) var(--rounded-corner)
var(--rounded-corner); var(--rounded-corner);
} }
} }
figcaption { figcaption {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
transition-duration: var(--transition); transition-duration: var(--transition);
transition-property: border-radius, background-color; transition-property: border-radius, background-color;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 1rem; padding: 1rem;
color: var(--fg-color); color: var(--fg-color);
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
text-align: start; text-align: start;
p { p {
margin: 0; margin: 0;
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
} }
} }
} }
footer { footer {
display: flex; display: flex;
grid-area: interactions; grid-area: interactions;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
margin-block-start: 1rem; margin-block-start: 1rem;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
flex-wrap: wrap; flex-wrap: wrap;
} }
.boosts, .boosts,
.faves, .faves,
.reaction { .reaction {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
white-space: nowrap; white-space: nowrap;
} }
.boosts, .boosts,
.faves { .faves {
transition: transition:
box-shadow var(--transition), box-shadow var(--transition),
border-radius var(--transition), border-radius var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
border-radius: rpx(18); border-radius: rpx(18);
text-decoration: none; text-decoration: none;
.icon { .icon {
vertical-align: rpx(-2); vertical-align: rpx(-2);
transition: transform var(--transition-bezier); transition: transform var(--transition-bezier);
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
} }
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
text-decoration: none; text-decoration: none;
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
border-radius: rpx(18); border-radius: rpx(18);
} }
} }
.boosts { .boosts {
border-start-end-radius: var(--rounded-corner-small); border-start-end-radius: var(--rounded-corner-small);
border-end-end-radius: var(--rounded-corner-small); border-end-end-radius: var(--rounded-corner-small);
padding-inline-end: 0.625rem; padding-inline-end: 0.625rem;
color: var(--purple-fg); color: var(--purple-fg);
.icon { .icon {
--icon: var(--icon-repeat); --icon: var(--icon-repeat);
} }
&:hover { &:hover {
background-color: var(--purple-bg-1); background-color: var(--purple-bg-1);
.icon { .icon {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
.faves { .faves {
border-start-start-radius: var(--rounded-corner-small); border-start-start-radius: var(--rounded-corner-small);
border-end-start-radius: var(--rounded-corner-small); border-end-start-radius: var(--rounded-corner-small);
padding-inline-start: 0.625rem; padding-inline-start: 0.625rem;
color: var(--yellow-fg); color: var(--yellow-fg);
.icon { .icon {
--icon: var(--icon-star); --icon: var(--icon-star);
} }
&:hover { &:hover {
background-color: var(--yellow-bg-1); background-color: var(--yellow-bg-1);
.icon { .icon {
transform: rotate(72deg); transform: rotate(72deg);
} }
} }
} }
.reactions { .reactions {
display: flex; display: flex;
// flex-wrap: nowrap; // flex-wrap: nowrap;
gap: 0.25rem; gap: 0.25rem;
margin: -0.5rem -1rem; margin: -0.5rem -1rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
min-width: 0; min-width: 0;
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
color: var(--accent-color); color: var(--accent-color);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
.reaction { .reaction {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
cursor: zoom-in; cursor: zoom-in;
border: rpx(1) solid var(--bg-muted-2); border: rpx(1) solid var(--bg-muted-2);
border-radius: rpx(19); border-radius: rpx(19);
&:hover .emoji { &:hover .emoji {
transform: scale(2); transform: scale(2);
} }
.emoji { .emoji {
cursor: unset; cursor: unset;
} }
span { span {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
} }
} }
} }
} }
} }
} }

26
sass/components/_deanchor.scss
View file

@ -2,19 +2,17 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.deanchor { .deanchor {
display: inline; display: inline;
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--fg-muted-2); color: var(--fg-muted-2);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: transition: background-color var(--transition), color var(--transition);
background-color var(--transition),
color var(--transition);
&:hover { &:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
color: var(--fg-muted-1); color: var(--fg-muted-1);
} }
} }

34
sass/components/_emoji.scss
View file

@ -1,21 +1,21 @@
.emoji { .emoji {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
transition: transform var(--transition-bezier); transition: transform var(--transition-bezier);
cursor: zoom-in; cursor: zoom-in;
margin: 0; margin: 0;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
&:hover { &:hover {
transform: scale(2); transform: scale(2);
} }
&.big { &.big {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
} }

96
sass/components/_footnotes.scss
View file

@ -2,61 +2,61 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.footnotes-list p { .footnotes-list p {
margin-block: 0; margin-block: 0;
} }
.footnote-reference { .footnote-reference {
display: inline-flex; display: inline-flex;
vertical-align: baseline; vertical-align: baseline;
transition: transition:
background-color var(--transition), background-color var(--transition),
outline-offset calc(var(--transition-long) * 3), outline-offset calc(var(--transition-long) * 3),
transform var(--transition-bezier); transform var(--transition-bezier);
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
outline-offset: calc(var(--content-width) / 2) !important; outline-offset: calc(var(--content-width) / 2) !important;
border-radius: 0.6875em; border-radius: 0.6875em;
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
// width: 1.375em; // width: 1.375em;
line-height: 1.375em; line-height: 1.375em;
&:hover { &:hover {
background-color: var(--accent-color); background-color: var(--accent-color);
a::after { a::after {
mask-position: center rpx(18); mask-position: center rpx(18);
} }
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
&:target { &:target {
animation: none !important; animation: none !important;
outline-offset: rpx(-3) !important; outline-offset: rpx(-3) !important;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
a { a {
flex: 1; flex: 1;
border-radius: inherit; border-radius: inherit;
padding-inline: rpx(9) rpx(6); padding-inline: rpx(9) rpx(6);
color: var(--bg-color); color: var(--bg-color);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
&::after { &::after {
@include icon(pseudo); @include icon(pseudo);
--icon: var(--icon-caret-down); --icon: var(--icon-caret-down);
display: inline-block; display: inline-block;
vertical-align: rpx(-7); vertical-align: rpx(-7);
mask-position: center; mask-position: center;
mask-size: 1em; mask-size: 1em;
transition: mask-position var(--transition); transition: mask-position var(--transition);
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
height: rpx(22); height: rpx(22);
} }
} }
} }

78
sass/components/_fuse.scss
View file

@ -2,49 +2,47 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.fuse { .fuse {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
max-width: 30rem; max-width: 30rem;
.fuse-input { .fuse-input {
width: 100%; width: 100%;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid var(--bg-muted-2); border: 1px solid var(--bg-muted-2);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
color: var(--fg-color); color: var(--fg-color);
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
transition: transition: border-color var(--transition), box-shadow var(--transition);
border-color var(--transition),
box-shadow var(--transition);
&:focus { &:focus {
outline: none; outline: none;
border-color: var(--accent-color); border-color: var(--accent-color);
box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color); box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color);
} }
} }
.fuse-results { .fuse-results {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
.fuse-result { .fuse-result {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
text-decoration: none; text-decoration: none;
color: var(--fg-color); color: var(--fg-color);
transition: transition:
background-color var(--transition), background-color var(--transition),
padding-left var(--transition); padding-left var(--transition);
&:hover { &:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
padding-left: 1rem; padding-left: 1rem;
} }
} }
} }
} }

16
sass/components/_giallo.scss
View file

@ -1,16 +1,16 @@
.giallo:has(.giallo-ln) { .giallo:has(.giallo-ln) {
padding-inline: 0; padding-inline: 0;
} }
.giallo-l { .giallo-l {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
.giallo-ln { .giallo-ln {
display: inline-block; display: inline-block;
margin-right: 1ch; margin-right: 1ch;
min-width: 3ch; min-width: 3ch;
user-select: none; user-select: none;
text-align: right; text-align: right;
} }

8
sass/components/_icon.scss
View file

@ -1,9 +1,9 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.icon { .icon {
@include icon; @include icon;
&::before { &::before {
@include icon(pseudo); @include icon(pseudo);
} }
} }

8
sass/components/_iframe.scss
View file

@ -1,6 +1,6 @@
iframe { iframe {
&.vimeo-embed, &.vimeo-embed,
&.youtube-embed { &.youtube-embed {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
} }

56
sass/components/_marquee.scss
View file

@ -1,35 +1,35 @@
.marquee { .marquee {
margin-inline: -1rem; margin-inline: -1rem;
padding-inline: 1rem; padding-inline: 1rem;
overflow: hidden; overflow: hidden;
&.overshoot-row > * { &.overshoot-row > * {
animation: marquee-scroll animation: marquee-scroll
calc((var(--text-width) + var(--container-width)) / 40 * 1s) linear calc((var(--text-width) + var(--container-width)) / 40 * 1s) linear
infinite; infinite;
@keyframes marquee-scroll { @keyframes marquee-scroll {
0%, 0%,
10% { 10% {
transform: translateX(0); transform: translateX(0);
} }
45%, 45%,
55% { 55% {
transform: translateX( transform: translateX(
calc((var(--container-width) - var(--text-width)) * 1px) calc((var(--container-width) - var(--text-width)) * 1px)
); );
} }
90%, 90%,
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
} }
} }
& > * { & > * {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
} }
} }

10
sass/components/_not-found.scss
View file

@ -1,11 +1,11 @@
picture#not-found { picture#not-found {
display: block; display: block;
img { img {
width: 8rem; width: 8rem;
} }
} }
img#not-found { img#not-found {
width: 8rem; width: 8rem;
} }

232
sass/components/_pre-container.scss
View file

@ -1,141 +1,141 @@
@use "../citrine/abstracts/functions" as *; @use "../citrine/abstracts/functions" as *;
.pre-container { .pre-container {
position: relative; position: relative;
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
&::after { &::after {
position: absolute; position: absolute;
inset: 0; inset: 0;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: inherit; border-radius: inherit;
pointer-events: none; pointer-events: none;
content: ""; content: "";
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: border-block-end-color var(--transition); transition: border-block-end-color var(--transition);
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
border-block-end: rpx(1) solid transparent; border-block-end: rpx(1) solid transparent;
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
transparent 50%, transparent 50%,
var(--bg-muted-neutral-1) 75%, var(--bg-muted-neutral-1) 75%,
transparent 100% transparent 100%
); );
background-size: 200%; background-size: 200%;
padding: 0.25rem; padding: 0.25rem;
&:not(.z-l-code), &:not(.z-l-code),
&:not(.z-d-code) { &:not(.z-d-code) {
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
color: var(--accent-color); color: var(--accent-color);
button:hover { button:hover {
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
} }
&.active { &.active {
border-block-end-color: var(--bg-muted-1); border-block-end-color: var(--bg-muted-1);
button { button {
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
} }
} }
} }
span { span {
margin-inline-start: 0.75rem; margin-inline-start: 0.75rem;
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
} }
button { button {
position: relative; position: relative;
transition: transition:
box-shadow var(--transition), box-shadow var(--transition),
background-color var(--transition), background-color var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
cursor: pointer; cursor: pointer;
box-shadow: none; box-shadow: none;
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-color: transparent; background-color: transparent;
padding: 0.5rem; padding: 0.5rem;
color: inherit; color: inherit;
line-height: 0; line-height: 0;
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--bg-muted-neutral-1); background-color: var(--bg-muted-neutral-1);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
&:active { &:active {
transform: none; transform: none;
} }
} }
.icon { .icon {
transition: transition:
opacity var(--transition-longer), opacity var(--transition-longer),
transform var(--transition-bezier-longer); transform var(--transition-bezier-longer);
font-size: 1rem; font-size: 1rem;
&.copy { &.copy {
--icon: var(--icon-copy); --icon: var(--icon-copy);
transform-origin: bottom left; transform-origin: bottom left;
} }
&.check { &.check {
--icon: var(--icon-check-square-offset); --icon: var(--icon-check-square-offset);
position: absolute; position: absolute;
transform: scale(0.5); transform: scale(0.5);
transform-origin: top right; transform-origin: top right;
opacity: 0; opacity: 0;
inset: 0.5rem; inset: 0.5rem;
} }
} }
} }
&.active { &.active {
animation: active-shimmer var(--transition-long); animation: active-shimmer var(--transition-long);
border-block-end-color: var(--bg-muted-neutral-1); border-block-end-color: var(--bg-muted-neutral-1);
button { button {
opacity: 1; opacity: 1;
.icon.copy { .icon.copy {
transform: scale(0.5); transform: scale(0.5);
opacity: 0; opacity: 0;
} }
.icon.check { .icon.check {
transform: none; transform: none;
opacity: 1; opacity: 1;
} }
} }
@keyframes active-shimmer { @keyframes active-shimmer {
to { to {
background-position-x: -200%; background-position-x: -200%;
} }
} }
} }
} }
pre { pre {
margin: 0; margin: 0;
box-shadow: none; box-shadow: none;
border-radius: 0 0 var(--rounded-corner) var(--rounded-corner); border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
} }
} }

118
sass/components/_search-fuse.scss
View file

@ -2,72 +2,70 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.search-fuse { .search-fuse {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
max-width: 40rem; max-width: 40rem;
margin: 0 auto; margin: 0 auto;
&-input-wrap { &-input-wrap {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
&-icon { &-icon {
position: absolute; position: absolute;
left: 0.75rem; left: 0.75rem;
color: var(--fg-muted-2); color: var(--fg-muted-2);
pointer-events: none; pointer-events: none;
transition: transition: color var(--transition), opacity var(--transition-bezier);
color var(--transition), opacity: 0.7;
opacity var(--transition-bezier); }
opacity: 0.7;
}
&-input { &-input {
width: 100%; width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem; padding: 0.75rem 1rem 0.75rem 2.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid var(--bg-muted-2); border: 1px solid var(--bg-muted-2);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
color: var(--fg-color); color: var(--fg-color);
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
transition: transition:
border-color var(--transition), border-color var(--transition),
box-shadow var(--transition), box-shadow var(--transition),
background-color var(--transition); background-color var(--transition);
&:focus { &:focus {
outline: none; outline: none;
border-color: var(--accent-color); border-color: var(--accent-color);
box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color); box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color);
} }
&::placeholder { &::placeholder {
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
} }
&-results { &-results {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
.search-fuse-result { .search-fuse-result {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
text-decoration: none; text-decoration: none;
color: var(--fg-color); color: var(--fg-color);
transition: transition:
background-color var(--transition), background-color var(--transition),
padding-left var(--transition); padding-left var(--transition);
&:hover { &:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
padding-left: 1rem; padding-left: 1rem;
} }
} }
} }
} }

220
sass/components/_search-modal.scss
View file

@ -1,128 +1,124 @@
#search-modal { #search-modal {
display: flex; display: flex;
position: fixed; position: fixed;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
z-index: 9999; z-index: 9999;
transition: transition: visibility var(--transition), opacity var(--transition);
visibility var(--transition), inset: 0;
opacity var(--transition); background-color: var(--shade-color);
inset: 0; padding-block-start: 15vh;
background-color: var(--shade-color); width: 100%;
padding-block-start: 15vh; height: 100vh;
width: 100%;
height: 100vh;
&.active { &.active {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
#search-modal-content { #search-modal-content {
transform: none; transform: none;
} }
} }
&-content { &-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
transform: var(--hover); transform: var(--hover);
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
transition: transition:
border-radius var(--transition), border-radius var(--transition),
padding var(--transition), padding var(--transition),
max-width var(--transition), max-width var(--transition),
transform var(--transition-bezier-longer); transform var(--transition-bezier-longer);
margin: -0.5rem; margin: -0.5rem;
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 2.25rem 2.25rem 1.75rem 1.75rem; border-radius: 2.25rem 2.25rem 1.75rem 1.75rem;
background-color: var(--glass-bg-1); background-color: var(--glass-bg-1);
padding: 1rem; padding: 1rem;
width: calc(100% - 2rem); width: calc(100% - 2rem);
max-width: calc(var(--content-width) / 1.5); max-width: calc(var(--content-width) / 1.5);
overflow: hidden; overflow: hidden;
&:has(#search-results:empty) { &:has(#search-results:empty) {
border-radius: 1.75rem; border-radius: 1.75rem;
padding: 0.5rem; padding: 0.5rem;
max-width: calc(var(--content-width) / 2); max-width: calc(var(--content-width) / 2);
} }
& > div { & > div {
position: relative; position: relative;
} }
} }
#search-input { #search-input {
flex-shrink: 0; flex-shrink: 0;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 9999px; border-radius: 9999px;
padding: 0 1rem; padding: 0 1rem;
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
&:placeholder-shown + div .icon { &:placeholder-shown + div .icon {
transform: none; transform: none;
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
pointer-events: all; pointer-events: all;
} }
& + div .icon { & + div .icon {
position: absolute; position: absolute;
transform: translateX(0.5rem); transform: translateX(0.5rem);
opacity: 0; opacity: 0;
transition: transition: opacity var(--transition), transform var(--transition-bezier);
opacity var(--transition), cursor: help;
transform var(--transition-bezier); inset-block-start: 0.625rem;
cursor: help; inset-inline-end: 1rem;
inset-block-start: 0.625rem; pointer-events: none;
inset-inline-end: 1rem; color: var(--fg-muted-2);
pointer-events: none; font-size: 1.25rem;
color: var(--fg-muted-2); }
font-size: 1.25rem; }
}
}
#search-results { #search-results {
display: none; display: none;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
margin: -1rem; margin: -1rem;
padding: 1rem; padding: 1rem;
max-height: 50vh; max-height: 50vh;
overflow: auto; overflow: auto;
scrollbar-width: thin; scrollbar-width: thin;
.item { .item {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
a { a {
text-decoration: none; text-decoration: none;
&::after { &::after {
content: " →"; content: " →";
} }
} }
span { span {
margin-block-start: 0.25rem; margin-block-start: 0.25rem;
border-block-start: rpx(1) solid var(--bg-muted-2); border-block-start: rpx(1) solid var(--bg-muted-2);
padding-block-start: 0.25rem; padding-block-start: 0.25rem;
color: var(--fg-muted-2); color: var(--fg-muted-2);
strong { strong {
color: var(--fg-color); color: var(--fg-color);
} }
} }
} }
} }
} }

40
sass/components/_skip-to-content.scss
View file

@ -1,23 +1,23 @@
#skip-to-content { #skip-to-content {
position: absolute; position: absolute;
transform: translateX(-50%) translateY(calc(-100% - 1rem)); transform: translateX(-50%) translateY(calc(-100% - 1rem));
z-index: 9999; z-index: 9999;
transition: transition:
backdrop-filter var(--transition), backdrop-filter var(--transition),
box-shadow var(--transition), box-shadow var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
inset-inline-start: 50vw; inset-inline-start: 50vw;
border-radius: 9999px; border-radius: 9999px;
background-color: var(--glass-bg-1); background-color: var(--glass-bg-1);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
width: max-content; width: max-content;
text-decoration: none; text-decoration: none;
&:focus-visible, &:focus-visible,
&:focus { &:focus {
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
transform: translateX(-50%) translateY(1rem); transform: translateX(-50%) translateY(1rem);
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
} }
} }

100
sass/components/_statements.scss
View file

@ -1,61 +1,61 @@
@use "../citrine/abstracts/functions" as *; @use "../citrine/abstracts/functions" as *;
.statement-container { .statement-container {
margin: 1rem 0; margin: 1rem 0;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
padding: 1rem; padding: 1rem;
:last-child { :last-child {
margin-block-end: 0; margin-block-end: 0;
} }
& > :nth-child(2) { & > :nth-child(2) {
margin-block-start: 0.5rem; margin-block-start: 0.5rem;
} }
.title { .title {
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
.icon { .icon {
vertical-align: rpx(-2); vertical-align: rpx(-2);
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
} }
} }
&.archive { &.archive {
--accent-color: var(--purple-fg); --accent-color: var(--purple-fg);
--accent-highlight: hsla( --accent-highlight: hsla(
var(--purple-h), var(--purple-h),
var(--purple-s), var(--purple-s),
var(--purple-l), var(--purple-l),
var(--disabled-opacity) var(--disabled-opacity)
); );
background-color: var(--purple-bg-1); background-color: var(--purple-bg-1);
color: var(--purple-fg); color: var(--purple-fg);
} }
&.disclaimer { &.disclaimer {
--accent-color: var(--red-fg); --accent-color: var(--red-fg);
--accent-highlight: hsla( --accent-highlight: hsla(
var(--red-h), var(--red-h),
var(--red-s), var(--red-s),
var(--red-l), var(--red-l),
var(--disabled-opacity) var(--disabled-opacity)
); );
background-color: var(--red-bg-1); background-color: var(--red-bg-1);
color: var(--red-fg); color: var(--red-fg);
} }
&.trigger { &.trigger {
--accent-color: var(--yellow-fg); --accent-color: var(--yellow-fg);
--accent-highlight: hsla( --accent-highlight: hsla(
var(--yellow-h), var(--yellow-h),
var(--yellow-s), var(--yellow-s),
var(--yellow-l), var(--yellow-l),
var(--disabled-opacity) var(--disabled-opacity)
); );
background-color: var(--yellow-bg-1); background-color: var(--yellow-bg-1);
color: var(--yellow-fg); color: var(--yellow-fg);
} }
} }

98
sass/components/_tag-chips.scss
View file

@ -1,59 +1,59 @@
@use "../citrine/abstracts/functions" as *; @use "../citrine/abstracts/functions" as *;
#tag-chips { #tag-chips {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem; gap: 0.25rem;
margin: 0; margin: 0;
padding-inline-start: 0; padding-inline-start: 0;
list-style: none; list-style: none;
li { li {
display: flex; display: flex;
margin-block: 0; margin-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
} }
a { a {
display: flex; display: flex;
transition: transition:
background-color var(--transition), background-color var(--transition),
color var(--transition), color var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 1rem; border-radius: 1rem;
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
padding: 0.25rem; padding: 0.25rem;
padding-inline-start: 0.75rem; padding-inline-start: 0.75rem;
color: var(--fg-muted-1); color: var(--fg-muted-1);
font-size: var(--font-size-small); font-size: var(--font-size-small);
line-height: 1.5rem; line-height: 1.5rem;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
&::before { &::before {
content: "#"; content: "#";
} }
.counter { .counter {
transition: inherit; transition: inherit;
margin-inline-start: 0.375rem; margin-inline-start: 0.375rem;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: inherit; border-radius: inherit;
background-color: inherit; background-color: inherit;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
height: 1.5rem; height: 1.5rem;
line-height: 1.5rem; line-height: 1.5rem;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-align: center; text-align: center;
} }
} }
} }

64
sass/components/_zola-anchor.scss
View file

@ -4,47 +4,47 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
&:hover .zola-anchor { &:hover .zola-anchor {
transform: none; transform: none;
opacity: 1; opacity: 1;
} }
&:has(.zola-anchor) { &:has(.zola-anchor) {
position: relative; position: relative;
} }
} }
.zola-anchor { .zola-anchor {
position: absolute; position: absolute;
transform: translateX(0.25em); transform: translateX(0.25em);
opacity: 0; opacity: 0;
transition: transition:
color var(--transition), color var(--transition),
opacity var(--transition), opacity var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
inset-inline-start: -1.25em; inset-inline-start: -1.25em;
padding-inline-end: 0.25em; padding-inline-end: 0.25em;
color: var(--fg-muted-1); color: var(--fg-muted-1);
line-height: 1; line-height: 1;
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
display: none; display: none;
} }
&:hover { &:hover {
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
&:focus-visible { &:focus-visible {
opacity: 1; opacity: 1;
} }
} }
:target .zola-anchor { :target .zola-anchor {
transform: none; transform: none;
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
} }

82
sass/components/_zola-error.scss
View file

@ -1,55 +1,55 @@
// Based on https://github.com/welpo/tabi/blob/68c35b02f8c09e21ecff48f61bad6da3d96ce337/sass/parts/_zola-error.scss // 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])) { body > div:last-child:has(div:last-child[style]:not([class]):not([id])) {
z-index: 9999 !important; z-index: 9999 !important;
background-color: var(--shade-color) !important; background-color: var(--shade-color) !important;
} }
body > div:last-child > div:last-child[style]:not([class]):not([id]) { body > div:last-child > div:last-child[style]:not([class]):not([id]) {
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: calc(var(--rounded-corner) + 1rem) !important; border-radius: calc(var(--rounded-corner) + 1rem) !important;
background-color: hsla( background-color: hsla(
var(--red-h), var(--red-h),
calc(var(--red-s) - var(--red-s) * 0.7), calc(var(--red-s) - var(--red-s) * 0.7),
calc(var(--red-l) + (100% - var(--red-l)) * 0.9), calc(var(--red-l) + (100% - var(--red-l)) * 0.9),
var(--dim-opacity) var(--dim-opacity)
) !important; ) !important;
padding: 1rem !important; padding: 1rem !important;
width: fit-content; width: fit-content;
max-width: calc(100% - 2rem); max-width: calc(100% - 2rem);
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
filter: none !important; filter: none !important;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
& { & {
background-color: hsla( background-color: hsla(
var(--red-h), var(--red-h),
calc(var(--red-s) - var(--red-s) * 0.6), calc(var(--red-s) - var(--red-s) * 0.6),
calc(var(--red-l) - var(--red-l) * 0.8), calc(var(--red-l) - var(--red-l) * 0.8),
var(--dim-opacity) var(--dim-opacity)
) !important; ) !important;
} }
} }
} }
body body
> div:last-child > div:last-child
> div:last-child[style]:not([class]):not([id]) > div:last-child[style]:not([class]):not([id])
> p[style]:first-child { > p[style]:first-child {
margin-block-end: 1rem !important; margin-block-end: 1rem !important;
color: var(--red-fg) !important; color: var(--red-fg) !important;
font-weight: var(--font-weight-semi-bold) !important; font-weight: var(--font-weight-semi-bold) !important;
font-size: var(--font-size-large) !important; font-size: var(--font-size-large) !important;
} }
body body
> div:last-child > div:last-child
> div:last-child[style]:not([class]):not([id]) > div:last-child[style]:not([class]):not([id])
> pre[style]:last-child { > pre[style]:last-child {
border-radius: var(--rounded-corner) !important; border-radius: var(--rounded-corner) !important;
background-color: var(--red-bg-1) !important; background-color: var(--red-bg-1) !important;
padding: 0.75rem 1rem !important; padding: 0.75rem 1rem !important;
color: var(--red-fg) !important; color: var(--red-fg) !important;
font-weight: var(--font-weight-normal) !important; font-weight: var(--font-weight-normal) !important;
} }

66
sass/fonts.scss
View file

@ -2,51 +2,51 @@ $commissioner-version: "1.012.1";
$commit-mono-version: "1.143"; $commit-mono-version: "1.143";
:root { :root {
--font-sans-serif: "Commissioner"; --font-sans-serif: "Commissioner";
--font-monospace: "Commit Mono"; --font-monospace: "Commit Mono";
} }
// Commissioner // Commissioner
@font-face { @font-face {
font-style: normal; font-style: normal;
font-weight: 100 900; font-weight: 100 900;
src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}") src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}")
format("woff2"); format("woff2");
font-family: "Commissioner"; font-family: "Commissioner";
font-display: swap; font-display: swap;
// Fix vertical alignment, // Fix vertical alignment,
// See https://github.com/kosbarts/Commissioner/issues/55 // See https://github.com/kosbarts/Commissioner/issues/55
ascent-override: 96.3%; ascent-override: 96.3%;
descent-override: 25%; descent-override: 25%;
} }
@font-face { @font-face {
font-style: italic; font-style: italic;
font-weight: 100 900; font-weight: 100 900;
src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}") src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}")
format("woff2"); format("woff2");
font-family: "Commissioner"; font-family: "Commissioner";
font-display: swap; font-display: swap;
font-variation-settings: "slnt" -12; font-variation-settings: "slnt" -12;
// Ditto // Ditto
ascent-override: 96.3%; ascent-override: 96.3%;
descent-override: 25%; descent-override: 25%;
} }
// Commit Mono // Commit Mono
@font-face { @font-face {
font-style: normal; font-style: normal;
font-weight: 100 900; font-weight: 100 900;
src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2"); src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2");
font-family: "Commit Mono"; font-family: "Commit Mono";
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-style: italic; font-style: italic;
font-weight: 100 900; font-weight: 100 900;
src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2"); src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2");
font-family: "Commit Mono"; font-family: "Commit Mono";
font-display: swap; font-display: swap;
font-variation-settings: "ital" 1; font-variation-settings: "ital" 1;
} }

226
sass/layout/_footer.scss
View file

@ -2,139 +2,137 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
#site-footer { #site-footer {
--padding: 1rem; --padding: 1rem;
display: flex; display: flex;
grid-area: footer; grid-area: footer;
gap: 1rem; gap: 1rem;
margin-block: 3.25rem 1rem; margin-block: 3.25rem 1rem;
border-block-start: rpx(1) solid var(--bg-muted-2); border-block-start: rpx(1) solid var(--bg-muted-2);
padding: 1rem; padding: 1rem;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: calc(var(--content-width) + var(--padding) * 2); max-width: calc(var(--content-width) + var(--padding) * 2);
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
& > div { & > div {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
p { p {
margin: 0; margin: 0;
} }
&:nth-of-type(1) { &:nth-of-type(1) {
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
&:nth-of-type(2) { &:nth-of-type(2) {
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
text-align: end; text-align: end;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
align-items: normal; align-items: normal;
text-align: start; text-align: start;
} }
} }
} }
a.external::after { a.external::after {
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
} }
.link { .link {
@include chip; @include chip;
display: inline-block; display: inline-block;
line-height: 1.5rem; line-height: 1.5rem;
&:hover { &:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
} }
// IMO it's pretty cute // IMO it's pretty cute
.webrings { .webrings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
margin-block: 0; margin-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
list-style: none; list-style: none;
} }
.webring { .webring {
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
margin-block: 0; margin-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
.random, .random,
.previous, .previous,
.next { .next {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 9999px; border-radius: 9999px;
padding: 0.25rem; padding: 0.25rem;
font-size: 1rem; font-size: 1rem;
} }
} }
.timestamp { .timestamp {
color: var(--fg-muted-1); color: var(--fg-muted-1);
font-size: var(--font-size-xx-small); font-size: var(--font-size-xx-small);
font-family: var(--font-monospace); font-family: var(--font-monospace);
text-transform: uppercase; text-transform: uppercase;
} }
.socials { .socials {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 0.75rem;
margin: 0; margin: 0;
padding-inline-start: 0; padding-inline-start: 0;
list-style: none; list-style: none;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
justify-content: normal; justify-content: normal;
} }
li { li {
margin-block: 0; margin-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
} }
a { a {
display: flex; display: flex;
transition: transition: color var(--transition), transform var(--transition-bezier);
color var(--transition), height: fit-content;
transform var(--transition-bezier); color: var(--fg-muted-1);
height: fit-content;
color: var(--fg-muted-1);
&:hover { &:hover {
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
} }
svg { svg {
fill: currentColor; fill: currentColor;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
} }
} }
} }

18
sass/layout/_full-bleed.scss
View file

@ -1,13 +1,13 @@
.full-bleed { .full-bleed {
transform: translateX(-50%); transform: translateX(-50%);
margin-inline-start: 50%; margin-inline-start: 50%;
width: calc(100vw - var(--sidebar-width)); width: calc(100vw - var(--sidebar-width));
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
transform: translateX(50%); transform: translateX(50%);
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
width: calc(100vw - 3.5rem); width: calc(100vw - 3.5rem);
} }
} }

26
sass/layout/_grid.scss
View file

@ -1,16 +1,16 @@
body { body {
display: grid; display: grid;
grid-template-rows: auto auto 1fr auto; grid-template-rows: auto auto 1fr auto;
grid-template-columns: var(--sidebar-width) 1fr; grid-template-columns: var(--sidebar-width) 1fr;
grid-template-areas: grid-template-areas:
"sidebar header" "sidebar header"
"sidebar banner" "sidebar banner"
"sidebar main " "sidebar main "
"sidebar footer"; "sidebar footer";
justify-items: center; justify-items: center;
transition: grid-template-columns var(--transition); transition: grid-template-columns var(--transition);
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
grid-template-columns: 0 1fr; grid-template-columns: 0 1fr;
} }
} }

574
sass/layout/_header.scss
View file

@ -2,346 +2,344 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
#site-header { #site-header {
display: flex; display: flex;
position: sticky; position: sticky;
grid-area: header; grid-area: header;
// height: 3rem; // height: 3rem;
justify-content: space-between; justify-content: space-between;
// flex-wrap: nowrap; // flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
z-index: 2; z-index: 2;
// height: 3.75rem; // height: 3.75rem;
inset-block-start: 0; inset-block-start: 0;
// padding: 0.5rem 0.75rem; // padding: 0.5rem 0.75rem;
padding: 0.5rem; padding: 0.5rem;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
&::before, &::before,
&::after { &::after {
position: absolute; position: absolute;
inset: 0; inset: 0;
@include easing-mask(bottom); @include easing-mask(bottom);
inset-block-end: -100%; inset-block-end: -100%;
pointer-events: none; pointer-events: none;
content: ""; content: "";
} }
&::before { &::before {
z-index: -2; z-index: -2;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
} }
&::after { &::after {
z-index: -1; z-index: -1;
background-color: var(--bg-color); background-color: var(--bg-color);
} }
.title { .title {
margin-inline: 0.75rem; margin-inline: 0.75rem;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
color: var(--fg-muted-2); color: var(--fg-muted-2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
line-height: 2rem; line-height: 2rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.buttons { .buttons {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 0.25rem; gap: 0.25rem;
margin: 0; margin: 0;
// margin-inline-start: auto; // margin-inline-start: auto;
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.125rem; border-radius: 1.125rem;
background-color: var(--glass-bg-1); background-color: var(--glass-bg-1);
padding: 0.25rem; padding: 0.25rem;
list-style: none; list-style: none;
li { li {
flex: 0; flex: 0;
margin-block: 0; margin-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
} }
& > li { & > li {
height: fit-content; height: fit-content;
line-height: 0; line-height: 0;
} }
button, button,
details { details {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
line-height: inherit; line-height: inherit;
.icon { .icon {
margin-inline-end: 0; margin-inline-end: 0;
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
} }
} }
button, button,
summary { summary {
border-radius: 50%; border-radius: 50%;
padding: 0.375rem; padding: 0.375rem;
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
} }
details { details {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
padding: 0; padding: 0;
} }
button { button {
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
} }
summary { summary {
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
} }
&::before { &::before {
display: none; display: none;
} }
} }
details { details {
display: block; display: block;
position: relative; position: relative;
margin-block-end: 0; margin-block-end: 0;
&::details-content { &::details-content {
block-size: auto; block-size: auto;
} }
&[open] { &[open] {
&::details-content { &::details-content {
block-size: auto; block-size: auto;
} }
summary { summary {
color: var(--fg-muted-1); color: var(--fg-muted-1);
&:hover { &:hover {
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
} }
@supports not (block-size: calc-size(auto, size)) { @supports not (block-size: calc-size(auto, size)) {
summary ~ * { summary ~ * {
animation: none; animation: none;
} }
} }
} }
} }
} }
} }
.buttons .dropdown { .buttons .dropdown {
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
transform-origin: top right; transform-origin: top right;
z-index: 1; z-index: 1;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
animation: expand-up-right var(--transition-bezier); animation: expand-up-right var(--transition-bezier);
inset-block-start: calc(100% + 0.75rem); inset-block-start: calc(100% + 0.75rem);
inset-inline-end: -0.25rem; inset-inline-end: -0.25rem;
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: calc(var(--rounded-corner) + 0.25rem); border-radius: calc(var(--rounded-corner) + 0.25rem);
background-color: var(--glass-bg-1); background-color: var(--glass-bg-1);
padding: 0.25rem; padding: 0.25rem;
width: max-content; width: max-content;
min-width: 8rem; min-width: 8rem;
list-style: none; list-style: none;
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
transform-origin: top left; transform-origin: top left;
animation: expand-up-left var(--transition-bezier); animation: expand-up-left var(--transition-bezier);
} }
li { li {
flex: 1; flex: 1;
} }
a { a {
box-shadow: none; box-shadow: none;
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: transparent; background-color: transparent;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
width: 100%; width: 100%;
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--bg-muted-1) !important; background-color: var(--bg-muted-1) !important;
} }
} }
} }
#site-sidebar-controls { #site-sidebar-controls {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
gap: 0.25rem; gap: 0.25rem;
transition: transition: width var(--transition), visibility var(--transition);
width var(--transition), margin-block: 0;
visibility var(--transition); box-shadow: var(--edge-highlight), var(--shadow-glass);
margin-block: 0; border-radius: 1.125rem;
box-shadow: var(--edge-highlight), var(--shadow-glass); background-color: var(--glass-bg-1);
border-radius: 1.125rem; padding: 0.25rem;
background-color: var(--glass-bg-1); height: fit-content;
padding: 0.25rem; line-height: 0;
height: fit-content; list-style: none;
line-height: 0;
list-style: none;
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
width: 2.25rem; width: 2.25rem;
&:has(#expand-sidebar:checked) { &:has(#expand-sidebar:checked) {
width: 6.25rem; width: 6.25rem;
#site-sidebar-modes { #site-sidebar-modes {
transform: none; transform: none;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
} }
} }
ul { ul {
padding-inline-start: 0; padding-inline-start: 0;
list-style: none; list-style: none;
} }
li { li {
display: inline-block; display: inline-block;
margin-block: 0; margin-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
label { label {
display: inline-block; display: inline-block;
transition: transition:
box-shadow var(--transition), box-shadow var(--transition),
background-color var(--transition), background-color var(--transition),
color var(--transition), color var(--transition),
transform var(--transition-bezier); transform var(--transition-bezier);
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
padding: 0.375rem; padding: 0.375rem;
height: fit-content; height: fit-content;
color: var(--fg-muted-1); color: var(--fg-muted-1);
line-height: 0; line-height: 0;
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--bg-muted-1); background-color: var(--bg-muted-1);
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
} }
input[type="radio"] { input[type="radio"] {
& + label { & + label {
position: relative; position: relative;
z-index: 1; z-index: 1;
&::before { &::before {
@include gradient-fill; @include gradient-fill;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
z-index: -1; z-index: -1;
transition: transition:
opacity var(--transition), opacity var(--transition),
box-shadow var(--transition), box-shadow var(--transition),
background-color var(--transition); background-color var(--transition);
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
content: ""; content: "";
} }
} }
&:checked + label { &:checked + label {
color: var(--contrast-color); color: var(--contrast-color);
&:hover { &:hover {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
} }
&:hover::before { &:hover::before {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--accent-color); background-color: var(--accent-color);
} }
&::before { &::before {
opacity: 1; opacity: 1;
} }
} }
} }
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
&:focus-visible + label { &:focus-visible + label {
animation: focus-in var(--transition); animation: focus-in var(--transition);
outline: 0.125rem solid var(--accent-color); outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem; outline-offset: 0.125rem;
} }
@supports not selector(:focus-visible) { @supports not selector(:focus-visible) {
&:focus + label { &:focus + label {
animation: focus-in var(--transition); animation: focus-in var(--transition);
outline: 0.125rem solid var(--accent-color); outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem; outline-offset: 0.125rem;
} }
} }
} }
} }
#expand-sidebar-li { #expand-sidebar-li {
display: none; display: none;
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
display: inline-block; display: inline-block;
} }
} }
} }
#site-sidebar-modes { #site-sidebar-modes {
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
transform-origin: left; transform-origin: left;
transition: transition:
visibility var(--transition), visibility var(--transition),
opacity var(--transition), opacity var(--transition),
transform var(--transition); transform var(--transition);
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
transform: translateX(-2.25rem); transform: translateX(-2.25rem);
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
} }

58
sass/layout/_main-content.scss
View file

@ -1,59 +1,59 @@
#main-content { #main-content {
--padding: 1rem; --padding: 1rem;
grid-area: main; grid-area: main;
transform-origin: 50% 50vh; transform-origin: 50% 50vh;
animation: fade-in-zoom var(--transition-bezier-longer); animation: fade-in-zoom var(--transition-bezier-longer);
margin-block-start: 3.25rem; margin-block-start: 3.25rem;
padding-inline: 1rem; padding-inline: 1rem;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: calc(var(--content-width) + var(--padding) * 2); max-width: calc(var(--content-width) + var(--padding) * 2);
@supports (transform-origin: 50% 50dvh) { @supports (transform-origin: 50% 50dvh) {
transform-origin: 50% 50dvh; transform-origin: 50% 50dvh;
} }
& > :first-child { & > :first-child {
margin-block-start: 0; margin-block-start: 0;
} }
& > :last-child { & > :last-child {
margin-block-end: 0; margin-block-end: 0;
} }
@keyframes fade-in-zoom { @keyframes fade-in-zoom {
from { from {
transform: scale(0.95); transform: scale(0.95);
opacity: 0; opacity: 0;
} }
} }
} }
// Don't play animation when jumping to section // Don't play animation when jumping to section
:target ~ #main-content { :target ~ #main-content {
animation-name: none; animation-name: none;
} }
// Loading animation when going up in the sidebar // Loading animation when going up in the sidebar
#↑:target ~ #main-content, #↑:target ~ #main-content,
#up: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 // Loading animation when going down in the sidebar
#↓:target ~ #main-content, #↓:target ~ #main-content,
#down: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 // Loading animation when going to the previous article
#←:target ~ #main-content, #←:target ~ #main-content,
#left: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 // Loading animation when going to the next article
#→:target ~ #main-content, #→:target ~ #main-content,
#right:target ~ #main-content { #right:target ~ #main-content {
animation-name: slide-in-right-longer; animation-name: slide-in-right-longer;
} }

1428
sass/layout/_sidebar.scss
View file

File diff suppressed because it is too large Load diff

60
sass/mods/_compact-sidebar.scss
View file

@ -2,43 +2,43 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
#site-sidebar-header { #site-sidebar-header {
transform-origin: rpx(18) 50%; transform-origin: rpx(18) 50%;
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
img, img,
.icon { .icon {
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
} }
img { img {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
} }
.icon { .icon {
padding: 0.375rem; padding: 0.375rem;
} }
div { div {
gap: 0; gap: 0;
line-height: 1.125; line-height: 1.125;
} }
} }
#sidebar-nav { #sidebar-nav {
a { a {
transform-origin: rpx(18) 50%; transform-origin: rpx(18) 50%;
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
padding: 0.25rem; padding: 0.25rem;
&.new .icon::after { &.new .icon::after {
inset-block-start: rpx(-2); inset-block-start: rpx(-2);
inset-inline-end: rpx(-2); inset-inline-end: rpx(-2);
} }
} }
.icon { .icon {
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
padding: 0.375rem; padding: 0.375rem;
} }
} }

26
sass/mods/_flat.scss
View file

@ -1,27 +1,27 @@
@use "../citrine/abstracts/functions" as *; @use "../citrine/abstracts/functions" as *;
:root { :root {
--color-opacity-1: 0.15; --color-opacity-1: 0.15;
--color-opacity-2: 0.25; --color-opacity-2: 0.25;
--edge-highlight: 0 0 0 transparent; --edge-highlight: 0 0 0 transparent;
--shadow: 0 0 0 transparent; --shadow: 0 0 0 transparent;
--shadow-raised: 0 0 0 transparent; --shadow-raised: 0 0 0 transparent;
--shadow-glass: 0 0 0 transparent; --shadow-glass: 0 0 0 transparent;
--shadow-glow: 0 0 0 transparent; --shadow-glow: 0 0 0 transparent;
} }
.buttons .suggested, .buttons .suggested,
#site-nav a.active .icon { #site-nav a.active .icon {
box-shadow: none; box-shadow: none;
background-image: none; background-image: none;
background-color: var(--accent-color); background-color: var(--accent-color);
text-shadow: none; text-shadow: none;
} }
.buttons .suggested:hover { .buttons .suggested:hover {
opacity: var(--dim-opacity); opacity: var(--dim-opacity);
} }
.crt { .crt {
outline: rpx(1) solid var(--bg-muted-2); outline: rpx(1) solid var(--bg-muted-2);
} }

38
sass/mods/_pill-tags.scss
View file

@ -1,27 +1,27 @@
@use "../citrine/abstracts/mixins" as *; @use "../citrine/abstracts/mixins" as *;
.article-details .tags { .article-details .tags {
gap: 0.25rem; gap: 0.25rem;
margin-block-end: 0 !important; margin-block-end: 0 !important;
a { a {
@include chip; @include chip;
display: flex; display: flex;
color: var(--fg-muted-1); color: var(--fg-muted-1);
font-weight: var(--font-weight-semi-bold); font-weight: var(--font-weight-semi-bold);
line-height: 1.5rem; line-height: 1.5rem;
&:hover { &:hover {
background-color: var(--bg-muted-2); background-color: var(--bg-muted-2);
color: var(--fg-muted-2); color: var(--fg-muted-2);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
&::before { &::before {
content: none; content: none;
} }
} }
} }

48
sass/mods/_skeuomorphic.scss
View file

@ -2,29 +2,29 @@
@use "../citrine/abstracts/functions" as *; @use "../citrine/abstracts/functions" as *;
#site-nav { #site-nav {
a, a,
label, label,
button, button,
summary { summary {
outline: rpx(1) solid var(--bg-muted-2); outline: rpx(1) solid var(--bg-muted-2);
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
var(--bg-muted-2), var(--bg-muted-2),
var(--bg-muted-1) 50%, var(--bg-muted-1) 50%,
transparent 50%, transparent 50%,
var(--bg-muted-2) var(--bg-muted-2)
); );
.icon { .icon {
background-image: conic-gradient( background-image: conic-gradient(
var(--bg-muted-2), var(--bg-muted-2),
var(--bg-muted-1) 33%, var(--bg-muted-1) 33%,
transparent, transparent,
var(--bg-muted-2) 66%, var(--bg-muted-2) 66%,
transparent, transparent,
var(--bg-muted-2) var(--bg-muted-2)
); );
} }
} }
} }

4
scripts/audio-button.js
View file

@ -1,9 +1,9 @@
const audioButtons = document.querySelectorAll(".audio"); const audioButtons = document.querySelectorAll(".audio");
audioButtons.forEach((button) => { audioButtons.forEach((button) => {
button.addEventListener("click", (event) => playAudio(button.dataset.audio)); button.addEventListener("click", (event) => playAudio(button.dataset.audio));
}); });
function playAudio(url) { function playAudio(url) {
new Audio(url).play(); new Audio(url).play();
} }

34
scripts/closable.js
View file

@ -1,34 +1,34 @@
const closable = document.querySelectorAll("details.closable"); const closable = document.querySelectorAll("details.closable");
closable.forEach((detail) => { closable.forEach((detail) => {
detail.addEventListener("toggle", () => { detail.addEventListener("toggle", () => {
if (detail.open) setTargetDetail(detail); if (detail.open) setTargetDetail(detail);
}); });
}); });
function setTargetDetail(targetDetail) { function setTargetDetail(targetDetail) {
closable.forEach((detail) => { closable.forEach((detail) => {
if (detail !== targetDetail) { if (detail !== targetDetail) {
detail.open = false; detail.open = false;
} }
}); });
} }
document.addEventListener("click", function (event) { document.addEventListener("click", function (event) {
const isClickInsideDetail = [...closable].some((detail) => const isClickInsideDetail = [...closable].some((detail) =>
detail.contains(event.target), detail.contains(event.target),
); );
if (!isClickInsideDetail) { if (!isClickInsideDetail) {
closable.forEach((detail) => { closable.forEach((detail) => {
detail.open = false; detail.open = false;
}); });
} }
}); });
const expandSidebar = document.getElementById("expand-sidebar"); const expandSidebar = document.getElementById("expand-sidebar");
const mainContent = document.getElementById("main-content"); const mainContent = document.getElementById("main-content");
mainContent.addEventListener("click", () => { mainContent.addEventListener("click", () => {
if (expandSidebar.checked) expandSidebar.checked = false; if (expandSidebar.checked) expandSidebar.checked = false;
}); });

12
scripts/deanchor.js
View file

@ -1,10 +1,10 @@
const main = document.querySelector("#main-content"); const main = document.querySelector("#main-content");
main.addEventListener("animationend", () => { main.addEventListener("animationend", () => {
const hash = decodeURIComponent(location.hash); const hash = decodeURIComponent(location.hash);
if ( if (
["#↑", "#↓", "#←", "#→", "#up", "#down", "#left", "#right"].includes(hash) ["#↑", "#↓", "#←", "#→", "#up", "#down", "#left", "#right"].includes(hash)
) { ) {
history.replaceState(null, "", " "); history.replaceState(null, "", " ");
} }
}); });

1928
scripts/fuse.js
View file

File diff suppressed because one or more lines are too long

32
scripts/marquee.js
View file

@ -1,25 +1,25 @@
function updateMarquees() { function updateMarquees() {
document.querySelectorAll(".marquee").forEach((container) => { document.querySelectorAll(".marquee").forEach((container) => {
const text = container.firstElementChild; const text = container.firstElementChild;
if (!text) return; if (!text) return;
const style = getComputedStyle(container); const style = getComputedStyle(container);
const paddingLeft = parseFloat(style.paddingLeft); const paddingLeft = parseFloat(style.paddingLeft);
const paddingRight = parseFloat(style.paddingRight); const paddingRight = parseFloat(style.paddingRight);
const containerInnerWidth = const containerInnerWidth =
container.clientWidth - paddingLeft - paddingRight; container.clientWidth - paddingLeft - paddingRight;
const textWidth = text.offsetWidth; const textWidth = text.offsetWidth;
text.style.setProperty("--text-width", `${textWidth}`); text.style.setProperty("--text-width", `${textWidth}`);
text.style.setProperty("--container-width", `${containerInnerWidth}`); text.style.setProperty("--container-width", `${containerInnerWidth}`);
container.classList.toggle( container.classList.toggle(
"overshoot-row", "overshoot-row",
textWidth > containerInnerWidth, textWidth > containerInnerWidth,
); );
}); });
} }
window.addEventListener("load", updateMarquees); window.addEventListener("load", updateMarquees);

30
scripts/paginator.js
View file

@ -3,21 +3,21 @@ const items = document.querySelectorAll(".music .carousel > li");
const links = document.querySelectorAll(".music-paginator li a"); const links = document.querySelectorAll(".music-paginator li a");
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
links.forEach((a) => a.classList.remove("active")); links.forEach((a) => a.classList.remove("active"));
const active = document.querySelector( const active = document.querySelector(
`.music-paginator a[href="#${entry.target.id}"]`, `.music-paginator a[href="#${entry.target.id}"]`,
); );
active?.classList.add("active"); active?.classList.add("active");
} }
}); });
}, },
{ {
root: carousel, root: carousel,
threshold: 0.6, threshold: 0.6,
}, },
); );
items.forEach((item) => observer.observe(item)); items.forEach((item) => observer.observe(item));

292
scripts/search-fuse.js
View file

@ -3,176 +3,188 @@ let searchSetup = false;
let fuse; let fuse;
async function initIndex() { async function initIndex() {
if (searchSetup) return; if (searchSetup) return;
let data; let data;
if (typeof window.searchIndex !== "undefined") { if (typeof window.searchIndex !== "undefined") {
data = window.searchIndex; data = window.searchIndex;
} else { } else {
const response = await fetch( const response = await fetch(
`/search_index.${document.documentElement.lang}.json`, `/search_index.${document.documentElement.lang}.json`,
); );
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
data = await response.json(); data = await response.json();
} }
const options = { const options = {
includeScore: false, includeScore: false,
includeMatches: true, includeMatches: true,
ignoreLocation: true, ignoreLocation: true,
threshold: 0.15, threshold: 0.15,
keys: [ keys: [
{ name: "title", weight: 3 }, { name: "title", weight: 3 },
{ name: "description", weight: 2 }, { name: "description", weight: 2 },
{ name: "body", weight: 1 }, { name: "body", weight: 1 },
], ],
}; };
fuse = new Fuse(data, options); fuse = new Fuse(data, options);
searchSetup = true; searchSetup = true;
console.log("Search index initialized successfully"); console.log("Search index initialized successfully");
} }
function debounce(actual_fn, wait) { function debounce(actual_fn, wait) {
let timeoutId; let timeoutId;
return (...args) => { return (...args) => {
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = setTimeout(() => { timeoutId = setTimeout(() => {
actual_fn(...args); actual_fn(...args);
}, wait); }, wait);
}; };
} }
function initSearch() { function initSearch() {
const searchModal = document.getElementById("search-modal"); // Full-screen modal const searchModal = document.getElementById("search-modal"); // Full-screen modal
const searchModalContent = document.getElementById("search-modal-content"); // Actual modal box const searchModalContent = document.getElementById("search-modal-content"); // Actual modal box
const searchInput = document.getElementById("search-input"); // Search input const searchInput = document.getElementById("search-input"); // Search input
const searchResults = document.getElementById("search-results"); // Search results const searchResults = document.getElementById("search-results"); // Search results
const searchButton = document.getElementById("search"); // Search button const searchButton = document.getElementById("search"); // Search button
const MAX_ITEMS = 10; const MAX_ITEMS = 10;
const MAX_RESULTS = 4; const MAX_RESULTS = 4;
let currentTerm = ""; let currentTerm = "";
// Open search modal when clicking the search button // Open search modal when clicking the search button
if (searchButton) { if (searchButton) {
searchButton.addEventListener("click", function () { searchButton.addEventListener("click", function () {
searchModal.classList.add("active"); searchModal.classList.add("active");
initIndex(); initIndex();
searchModal.addEventListener( searchModal.addEventListener(
"transitionend", "transitionend",
function handler() { function handler() {
searchInput.focus(); searchInput.focus();
searchModal.removeEventListener("transitionend", handler); searchModal.removeEventListener("transitionend", handler);
}, },
{ once: true }, { once: true },
); );
}); });
} }
// Open search modal on "/" key press // Open search modal on "/" key press
window.addEventListener("keydown", (event) => { window.addEventListener("keydown", (event) => {
if ( if (
event.key === "/" && event.key === "/" &&
document.activeElement.tagName !== "INPUT" && document.activeElement.tagName !== "INPUT" &&
document.activeElement.tagName !== "TEXTAREA" document.activeElement.tagName !== "TEXTAREA"
) { ) {
event.preventDefault(); event.preventDefault();
initIndex(); initIndex();
searchModal.classList.add("active"); searchModal.classList.add("active");
searchModal.addEventListener( searchModal.addEventListener(
"transitionend", "transitionend",
function handler() { function handler() {
searchInput.focus(); searchInput.focus();
searchModal.removeEventListener("transitionend", handler); searchModal.removeEventListener("transitionend", handler);
}, },
{ once: true }, { once: true },
); );
} }
}); });
// Close search modal on Escape key // Close search modal on Escape key
window.addEventListener("keydown", (event) => { window.addEventListener("keydown", (event) => {
if (event.key === "Escape") { if (event.key === "Escape") {
searchModal.classList.remove("active"); searchModal.classList.remove("active");
} }
}); });
// Close search modal when clicking outside search-modal-content // Close search modal when clicking outside search-modal-content
searchModal.addEventListener("click", function (e) { searchModal.addEventListener("click", function (e) {
if (!searchModalContent.contains(e.target)) { if (!searchModalContent.contains(e.target)) {
searchModal.classList.remove("active"); searchModal.classList.remove("active");
} }
}); });
// Prevent clicks inside modal content from closing it // Prevent clicks inside modal content from closing it
searchModalContent.addEventListener("click", function (e) { searchModalContent.addEventListener("click", function (e) {
e.stopPropagation(); // Stops event from reaching searchModal click handler e.stopPropagation(); // Stops event from reaching searchModal click handler
}); });
// Search input event // Search input event
searchInput.addEventListener( searchInput.addEventListener(
"keyup", "keyup",
debounce(async function () { debounce(async function () {
var term = searchInput.value.trim(); var term = searchInput.value.trim();
if (term === currentTerm) return; if (term === currentTerm) return;
searchResults.style.display = term === "" ? "none" : "flex"; searchResults.style.display = term === "" ? "none" : "flex";
searchResults.innerHTML = ""; // Clear previous results searchResults.innerHTML = ""; // Clear previous results
currentTerm = term; currentTerm = term;
if (term === "") return; if (term === "") return;
await initIndex(); await initIndex();
var results = fuse.search(term, { limit: MAX_ITEMS }); var results = fuse.search(term, { limit: MAX_ITEMS });
if (results.length === 0) { if (results.length === 0) {
searchResults.style.display = "none"; searchResults.style.display = "none";
return; return;
} }
// Insert formatted search result items // Insert formatted search result items
for (const result of results) { for (const result of results) {
searchResults.innerHTML += makeTeaser(result, term); searchResults.innerHTML += makeTeaser(result, term);
} }
}, 150), }, 150),
); );
function makeTeaser(result, searchVal) { function makeTeaser(result, searchVal) {
const TEASER_SIZE = 20; const TEASER_SIZE = 20;
let output = `<div class="search-result item"><a class="result-title" href=${result.item.url}>${result.item.title}</a>`; let output = `<div class="search-result item"><a class="result-title" href=${result.item.url}>${result.item.title}</a>`;
for (const match of result.matches) { for (const match of result.matches) {
if (match.key === "title") continue; 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 indices = match.indices
const value = match.value; .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) { for (const ind of indices) {
const start = Math.max(0, ind[0] - TEASER_SIZE); const start = Math.max(0, ind[0] - TEASER_SIZE);
const end = Math.min(value.length - 1, ind[1] + TEASER_SIZE); const end = Math.min(value.length - 1, ind[1] + TEASER_SIZE);
output += "<span>" output +=
+ value.substring(start, ind[0]) "<span>" +
+ `<strong>${value.substring(ind[0], ind[1] + 1)}</strong>` value.substring(start, ind[0]) +
+ value.substring(ind[1] + 1, end) `<strong>${value.substring(ind[0], ind[1] + 1)}</strong>` +
+ "</span>"; value.substring(ind[1] + 1, end) +
} "</span>";
}
if (match.indices.length > MAX_RESULTS) { if (match.indices.length > MAX_RESULTS) {
const moreMatchesText = document.getElementById("more-matches-text").textContent; const moreMatchesText =
output += `<span class="more-matches">${moreMatchesText}</span>`.replace("$MATCHES", `+${match.indices.length - MAX_RESULTS}`); document.getElementById("more-matches-text").textContent;
} output +=
} `<span class="more-matches">${moreMatchesText}</span>`.replace(
return output + "</div>"; "$MATCHES",
} `+${match.indices.length - MAX_RESULTS}`,
);
}
}
return output + "</div>";
}
} }
if ( if (
document.readyState === "complete" || document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll) (document.readyState !== "loading" && !document.documentElement.doScroll)
) { ) {
initSearch(); initSearch();
} else { } else {
document.addEventListener("DOMContentLoaded", initSearch); document.addEventListener("DOMContentLoaded", initSearch);
} }

32
styles/vars.css
View file

@ -1,20 +1,20 @@
:root { :root {
--alert-note-title: "Note"; --alert-note-title: "Note";
--alert-tip-title: "Tip"; --alert-tip-title: "Tip";
--alert-important-title: "Important"; --alert-important-title: "Important";
--alert-warning-title: "Warning"; --alert-warning-title: "Warning";
--alert-caution-title: "Caution"; --alert-caution-title: "Caution";
--font-sans-serif: "Commissioner"; --font-sans-serif: "Commissioner";
--font-system-ui: ui-sans-serif, system-ui, sans-serif; --font-system-ui: ui-sans-serif, system-ui, sans-serif;
--font-emoji: "Noto Color Emoji"; --font-emoji: "Noto Color Emoji";
--font-monospace: "Commit Mono"; --font-monospace: "Commit Mono";
--icon-info: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/info.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-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-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: 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-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-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-check-square-offset: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/check-square-offset.svg");
} }