better formatting
This commit is contained in:
Hellings
parent
ebc85b2938
commit
a25da3fc7b
74 changed files with 6910 additions and 4861 deletions
213
index.ts
213
index.ts
|
|
@ -6,38 +6,109 @@
|
|||
*/
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { readFile } from "node:fs/promises";
|
||||
import type {
|
||||
Integration,
|
||||
Mounts,
|
||||
} from "muddle";
|
||||
import type { Integration, Mounts } from "muddle";
|
||||
import type { Views } from "muddle/views";
|
||||
|
||||
|
||||
export interface AmezingAccentPreset { name: string; light: string; dark: string }
|
||||
export interface AmezingAccentPreset {
|
||||
name: string;
|
||||
light: string;
|
||||
dark: string;
|
||||
}
|
||||
|
||||
/** Accent presets from ametrine/data/accent_presets.toml. */
|
||||
export const ACCENT_PRESETS: Record<string, AmezingAccentPreset> = {
|
||||
red: { name: "red", light: "hsl(342.0779, 72%, 58%)", dark: "hsl(345.18988, 100%, 69%)" },
|
||||
orange: { name: "orange", light: "hsl(15.771428, 74%, 54%)", dark: "hsl(19.731544, 96%, 70%)" },
|
||||
yellow: { name: "yellow", light: "hsl(34.639175, 91%, 42%)", dark: "hsl(44.70588, 100%, 70%)" },
|
||||
green: { name: "green", light: "hsl(153.7815, 61%, 38%)", dark: "hsl(90, 59%, 66%)" },
|
||||
blue: { name: "blue", light: "hsl(192, 71%, 38%)", dark: "hsl(186.42857, 71%, 69%)" },
|
||||
purple: { name: "purple", light: "hsl(254.11766, 44%, 55%)", dark: "hsl(249.88234, 77%, 78%)" },
|
||||
teal: { name: "teal", light: "hsl(180, 65%, 35%)", dark: "hsl(183, 85%, 65%)" },
|
||||
pink: { name: "pink", light: "hsl(333.88236, 69%, 58%)", dark: "hsl(336.78634, 100%, 70%)" },
|
||||
cyan: { name: "cyan", light: "hsl(195, 71%, 35%)", dark: "hsl(193.41046, 72%, 70%)" },
|
||||
indigo: { name: "indigo", light: "hsl(232.05884, 61%, 42%)", dark: "hsl(234.61538, 73%, 71%)" },
|
||||
amber: { name: "amber", light: "hsl(38.57695, 94%, 44%)", dark: "hsl(40.35484, 100%, 72%)" },
|
||||
ochrea: { name: "ochrea", light: "hsl(45.75298, 95%, 45%)", dark: "hsl(46.09091, 100%, 78%)" },
|
||||
lime: { name: "lime", light: "hsl(86.25406, 60%, 42%)", dark: "hsl(86.84211, 93%, 71%)" },
|
||||
maroon: { name: "maroon", light: "hsl(321.81819, 26%, 41%)", dark: "hsl(322.10526, 66%, 66%)" },
|
||||
navy: { name: "navy", light: "hsl(216, 44%, 38%)", dark: "hsl(218, 69%, 69%)" },
|
||||
olive: { name: "olive", light: "hsl(81, 36%, 41%)", dark: "hsl(81, 64%, 65%)" },
|
||||
slate: { name: "slate", light: "hsl(212.53197, 15%, 44%)", dark: "hsl(212.90323, 61%, 72%)" },
|
||||
red: {
|
||||
name: "red",
|
||||
light: "hsl(342.0779, 72%, 58%)",
|
||||
dark: "hsl(345.18988, 100%, 69%)",
|
||||
},
|
||||
orange: {
|
||||
name: "orange",
|
||||
light: "hsl(15.771428, 74%, 54%)",
|
||||
dark: "hsl(19.731544, 96%, 70%)",
|
||||
},
|
||||
yellow: {
|
||||
name: "yellow",
|
||||
light: "hsl(34.639175, 91%, 42%)",
|
||||
dark: "hsl(44.70588, 100%, 70%)",
|
||||
},
|
||||
green: {
|
||||
name: "green",
|
||||
light: "hsl(153.7815, 61%, 38%)",
|
||||
dark: "hsl(90, 59%, 66%)",
|
||||
},
|
||||
blue: {
|
||||
name: "blue",
|
||||
light: "hsl(192, 71%, 38%)",
|
||||
dark: "hsl(186.42857, 71%, 69%)",
|
||||
},
|
||||
purple: {
|
||||
name: "purple",
|
||||
light: "hsl(254.11766, 44%, 55%)",
|
||||
dark: "hsl(249.88234, 77%, 78%)",
|
||||
},
|
||||
teal: {
|
||||
name: "teal",
|
||||
light: "hsl(180, 65%, 35%)",
|
||||
dark: "hsl(183, 85%, 65%)",
|
||||
},
|
||||
pink: {
|
||||
name: "pink",
|
||||
light: "hsl(333.88236, 69%, 58%)",
|
||||
dark: "hsl(336.78634, 100%, 70%)",
|
||||
},
|
||||
cyan: {
|
||||
name: "cyan",
|
||||
light: "hsl(195, 71%, 35%)",
|
||||
dark: "hsl(193.41046, 72%, 70%)",
|
||||
},
|
||||
indigo: {
|
||||
name: "indigo",
|
||||
light: "hsl(232.05884, 61%, 42%)",
|
||||
dark: "hsl(234.61538, 73%, 71%)",
|
||||
},
|
||||
amber: {
|
||||
name: "amber",
|
||||
light: "hsl(38.57695, 94%, 44%)",
|
||||
dark: "hsl(40.35484, 100%, 72%)",
|
||||
},
|
||||
ochrea: {
|
||||
name: "ochrea",
|
||||
light: "hsl(45.75298, 95%, 45%)",
|
||||
dark: "hsl(46.09091, 100%, 78%)",
|
||||
},
|
||||
lime: {
|
||||
name: "lime",
|
||||
light: "hsl(86.25406, 60%, 42%)",
|
||||
dark: "hsl(86.84211, 93%, 71%)",
|
||||
},
|
||||
maroon: {
|
||||
name: "maroon",
|
||||
light: "hsl(321.81819, 26%, 41%)",
|
||||
dark: "hsl(322.10526, 66%, 66%)",
|
||||
},
|
||||
navy: {
|
||||
name: "navy",
|
||||
light: "hsl(216, 44%, 38%)",
|
||||
dark: "hsl(218, 69%, 69%)",
|
||||
},
|
||||
olive: {
|
||||
name: "olive",
|
||||
light: "hsl(81, 36%, 41%)",
|
||||
dark: "hsl(81, 64%, 65%)",
|
||||
},
|
||||
slate: {
|
||||
name: "slate",
|
||||
light: "hsl(212.53197, 15%, 44%)",
|
||||
dark: "hsl(212.90323, 61%, 72%)",
|
||||
},
|
||||
};
|
||||
|
||||
function parseHsl(value: string): [string, string, string] | undefined {
|
||||
const match = /hsl\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*\)/.exec(value);
|
||||
const match =
|
||||
/hsl\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*\)/.exec(
|
||||
value,
|
||||
);
|
||||
return match ? [match[1]!, match[2]!, match[3]!] : undefined;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +116,11 @@ function parseHsl(value: string): [string, string, string] | undefined {
|
|||
export function accentStyle(accent: string | [string, string?]): string {
|
||||
const inputs = Array.isArray(accent) ? accent : [accent];
|
||||
const light = ACCENT_PRESETS[inputs[0] ?? ""]?.light ?? inputs[0];
|
||||
const dark = ACCENT_PRESETS[inputs[1] ?? inputs[0] ?? ""]?.dark ?? inputs[1] ?? ACCENT_PRESETS[inputs[0] ?? ""]?.dark ?? inputs[0];
|
||||
const dark =
|
||||
ACCENT_PRESETS[inputs[1] ?? inputs[0] ?? ""]?.dark ??
|
||||
inputs[1] ??
|
||||
ACCENT_PRESETS[inputs[0] ?? ""]?.dark ??
|
||||
inputs[0];
|
||||
const lightHsl = parseHsl(light ?? "");
|
||||
const darkHsl = parseHsl(dark ?? "");
|
||||
if (!lightHsl || !darkHsl) throw new Error(`Unknown accent color: ${accent}`);
|
||||
|
|
@ -86,27 +161,55 @@ const COMPONENTS = [
|
|||
] as const;
|
||||
|
||||
function componentTemplates(): [string, string][] {
|
||||
return COMPONENTS.map((name) => [`amezing-${name}`, fileURLToPath(new URL(`./components/${name}.spug`, import.meta.url))]);
|
||||
return COMPONENTS.map((name) => [
|
||||
`amezing-${name}`,
|
||||
fileURLToPath(new URL(`./components/${name}.spug`, import.meta.url)),
|
||||
]);
|
||||
}
|
||||
|
||||
interface TemplateViews {
|
||||
component(name: string, component: unknown): unknown;
|
||||
engine?: { renderComponent(path: string, props: Record<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 {
|
||||
for (const [name, template] of componentTemplates()) {
|
||||
views.component(name, {
|
||||
async render(props: Record<string, unknown>, context: { locals: Record<string, unknown>; params: Record<string, string> }) {
|
||||
return views.engine!.renderComponent(template, { accentStyle: accent, ...props }, context);
|
||||
async render(
|
||||
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. */
|
||||
export function registerAmezing(views: Views, options: { accentColor?: string | [string, string?] } = {}): void {
|
||||
registerAll(views as unknown as Parameters<typeof registerAll>[0], options.accentColor ? accentStyle(options.accentColor) : undefined);
|
||||
export function registerAmezing(
|
||||
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). */
|
||||
|
|
@ -133,22 +236,44 @@ export const amezingFonts: Record<string, string> = {
|
|||
"/fonts/commit-mono.woff2": "fonts/commit-mono.woff2",
|
||||
};
|
||||
|
||||
export function amezingMount(options: { accentColor?: string | [string, string?] } = {}): Mounts {
|
||||
const accent = options.accentColor ? accentStyle(options.accentColor) : undefined;
|
||||
export function amezingMount(
|
||||
options: { accentColor?: string | [string, string?] } = {},
|
||||
): Mounts {
|
||||
const accent = options.accentColor
|
||||
? accentStyle(options.accentColor)
|
||||
: undefined;
|
||||
return {
|
||||
views: (views) => registerAll(views as unknown as Parameters<typeof registerAll>[0], accent),
|
||||
views: (views) =>
|
||||
registerAll(
|
||||
views as unknown as Parameters<typeof registerAll>[0],
|
||||
accent,
|
||||
),
|
||||
routes: (route) => {
|
||||
for (const [routePath, file] of Object.entries(amezingScripts)) {
|
||||
route("GET", `/_muddle/amezing/${routePath}`, async () =>
|
||||
new Response(await readFile(new URL(`./${file}`, import.meta.url), "utf8"), {
|
||||
headers: { "content-type": "text/javascript; charset=utf-8" },
|
||||
}));
|
||||
route(
|
||||
"GET",
|
||||
`/_muddle/amezing/${routePath}`,
|
||||
async () =>
|
||||
new Response(
|
||||
await readFile(new URL(`./${file}`, import.meta.url), "utf8"),
|
||||
{
|
||||
headers: { "content-type": "text/javascript; charset=utf-8" },
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
for (const [routePath, file] of Object.entries(amezingFonts)) {
|
||||
route("GET", routePath, async () =>
|
||||
new Response(await readFile(new URL(`./${file}`, import.meta.url)), {
|
||||
headers: { "content-type": "font/woff2" },
|
||||
}));
|
||||
route(
|
||||
"GET",
|
||||
routePath,
|
||||
async () =>
|
||||
new Response(
|
||||
await readFile(new URL(`./${file}`, import.meta.url)),
|
||||
{
|
||||
headers: { "content-type": "font/woff2" },
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
styles: { "/_muddle/amezing.css": () => amezingStyles() },
|
||||
|
|
@ -156,6 +281,8 @@ export function amezingMount(options: { accentColor?: string | [string, string?]
|
|||
}
|
||||
|
||||
/** Convenience integration. */
|
||||
export function amezingIntegration(options: { accentColor?: string | [string, string?] } = {}): Integration {
|
||||
export function amezingIntegration(
|
||||
options: { accentColor?: string | [string, string?] } = {},
|
||||
): Integration {
|
||||
return { name: "amezing", mounts: [amezingMount(options)] };
|
||||
}
|
||||
|
|
|
|||
15
package.json
15
package.json
|
|
@ -1,7 +1,12 @@
|
|||
{
|
||||
"name": "@muddle/amezing",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"exports": { ".": "./index.ts", "./styles": "./styles/ametrine.css" },
|
||||
"peerDependencies": { "muddle": "*" }
|
||||
"name": "@muddle/amezing",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./index.ts",
|
||||
"./styles": "./styles/ametrine.css"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"muddle": "*"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Converts px values to rem
|
||||
// rpx(1) --> 0.0625rem
|
||||
@function rpx($px-value) {
|
||||
@return ($px-value / 16) + rem;
|
||||
@return ($px-value / 16) + rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +1,80 @@
|
|||
@mixin icon($mode: normal) {
|
||||
@if $mode == normal {
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
text-transform: none;
|
||||
-webkit-user-select: none;
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
} @else if $mode == pseudo {
|
||||
-webkit-mask-image: var(--icon);
|
||||
-webkit-mask-size: cover;
|
||||
display: block;
|
||||
mask-image: var(--icon);
|
||||
mask-size: cover;
|
||||
background-color: currentColor;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
}
|
||||
@if $mode == normal {
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
text-transform: none;
|
||||
-webkit-user-select: none;
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
} @else if $mode == pseudo {
|
||||
-webkit-mask-image: var(--icon);
|
||||
-webkit-mask-size: cover;
|
||||
display: block;
|
||||
mask-image: var(--icon);
|
||||
mask-size: cover;
|
||||
background-color: currentColor;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gradient-fill($mode: normal) {
|
||||
@if $mode == normal {
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glow);
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
var(--accent-color),
|
||||
var(--accent-highlight)
|
||||
);
|
||||
color: var(--contrast-color);
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
} @else if $mode == hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
@if $mode == normal {
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glow);
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
var(--accent-color),
|
||||
var(--accent-highlight)
|
||||
);
|
||||
color: var(--contrast-color);
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
} @else if $mode == hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card {
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@mixin chip {
|
||||
transition:
|
||||
all var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding-inline: 0.375rem;
|
||||
text-decoration: none;
|
||||
transition: all var(--transition), transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding-inline: 0.375rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@mixin easing-mask($direction: to bottom) {
|
||||
--mask-image: linear-gradient(
|
||||
to #{$direction},
|
||||
hsl(0, 0%, 0%) 0%,
|
||||
hsla(0, 0%, 0%, 0.987) 8.1%,
|
||||
hsla(0, 0%, 0%, 0.951) 15.5%,
|
||||
hsla(0, 0%, 0%, 0.896) 22.5%,
|
||||
hsla(0, 0%, 0%, 0.825) 29%,
|
||||
hsla(0, 0%, 0%, 0.741) 35.3%,
|
||||
hsla(0, 0%, 0%, 0.648) 41.2%,
|
||||
hsla(0, 0%, 0%, 0.55) 47.1%,
|
||||
hsla(0, 0%, 0%, 0.45) 52.9%,
|
||||
hsla(0, 0%, 0%, 0.352) 58.8%,
|
||||
hsla(0, 0%, 0%, 0.259) 64.7%,
|
||||
hsla(0, 0%, 0%, 0.175) 71%,
|
||||
hsla(0, 0%, 0%, 0.104) 77.5%,
|
||||
hsla(0, 0%, 0%, 0.049) 84.5%,
|
||||
hsla(0, 0%, 0%, 0.013) 91.9%,
|
||||
hsla(0, 0%, 0%, 0) 100%
|
||||
);
|
||||
mask-image: var(--mask-image);
|
||||
-webkit-mask-image: var(--mask-image);
|
||||
--mask-image: linear-gradient(
|
||||
to #{$direction},
|
||||
hsl(0, 0%, 0%) 0%,
|
||||
hsla(0, 0%, 0%, 0.987) 8.1%,
|
||||
hsla(0, 0%, 0%, 0.951) 15.5%,
|
||||
hsla(0, 0%, 0%, 0.896) 22.5%,
|
||||
hsla(0, 0%, 0%, 0.825) 29%,
|
||||
hsla(0, 0%, 0%, 0.741) 35.3%,
|
||||
hsla(0, 0%, 0%, 0.648) 41.2%,
|
||||
hsla(0, 0%, 0%, 0.55) 47.1%,
|
||||
hsla(0, 0%, 0%, 0.45) 52.9%,
|
||||
hsla(0, 0%, 0%, 0.352) 58.8%,
|
||||
hsla(0, 0%, 0%, 0.259) 64.7%,
|
||||
hsla(0, 0%, 0%, 0.175) 71%,
|
||||
hsla(0, 0%, 0%, 0.104) 77.5%,
|
||||
hsla(0, 0%, 0%, 0.049) 84.5%,
|
||||
hsla(0, 0%, 0%, 0.013) 91.9%,
|
||||
hsla(0, 0%, 0%, 0) 100%
|
||||
);
|
||||
mask-image: var(--mask-image);
|
||||
-webkit-mask-image: var(--mask-image);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,83 +1,83 @@
|
|||
@keyframes slide-in-up {
|
||||
from {
|
||||
transform: translateY(-1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: translateY(-1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
transform: translateX(1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: translateX(1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
transform: translateX(-1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: translateX(-1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-up-longer {
|
||||
from {
|
||||
transform: translateY(-2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: translateY(-2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-down-longer {
|
||||
from {
|
||||
transform: translateY(2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: translateY(2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-left-longer {
|
||||
from {
|
||||
transform: translateX(-2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: translateX(-2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right-longer {
|
||||
from {
|
||||
transform: translateX(2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: translateX(2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-out-down-longer {
|
||||
to {
|
||||
transform: translateY(-2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(-2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes expand-up-left {
|
||||
from {
|
||||
transform: scale(0.5) translate(-1rem, -1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: scale(0.5) translate(-1rem, -1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes expand-up-right {
|
||||
from {
|
||||
transform: scale(0.5) translate(1rem, -1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: scale(0.5) translate(1rem, -1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes expand-down-left {
|
||||
from {
|
||||
transform: scale(0.5) translate(-1rem, 1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: scale(0.5) translate(-1rem, 1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes expand-down-right {
|
||||
from {
|
||||
transform: scale(0.5) translate(1rem, 1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
transform: scale(0.5) translate(1rem, 1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,58 +2,58 @@
|
|||
|
||||
// Make focused anchor not get covered by header
|
||||
:target:not(#main-content) {
|
||||
scroll-margin-block-start: 6.5rem;
|
||||
scroll-margin-block-start: 6.5rem;
|
||||
}
|
||||
|
||||
:focus-visible,
|
||||
:target:not(#main-content) {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
|
||||
@keyframes focus-in {
|
||||
from {
|
||||
outline: 0.5rem solid transparent;
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
}
|
||||
@keyframes focus-in {
|
||||
from {
|
||||
outline: 0.5rem solid transparent;
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style text selection to use accent color
|
||||
::selection {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji);
|
||||
overflow-wrap: break-word;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji);
|
||||
overflow-wrap: break-word;
|
||||
|
||||
@supports (min-height: 100dvh) {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
@supports (min-height: 100dvh) {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable blur on Firefox Mobile
|
||||
@-moz-document url-prefix() {
|
||||
@media only screen and (max-width: 960px) {
|
||||
.firefox-unblur,
|
||||
.firefox-unblur::before,
|
||||
.firefox-unblur::after {
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
.firefox-unblur,
|
||||
.firefox-unblur::before,
|
||||
.firefox-unblur::after {
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,34 +3,34 @@
|
|||
body > main,
|
||||
body > nav,
|
||||
body > footer {
|
||||
--padding: 1rem;
|
||||
margin-inline: auto;
|
||||
padding-inline: 1rem;
|
||||
max-width: calc(var(--content-width) + var(--padding) * 2);
|
||||
--padding: 1rem;
|
||||
margin-inline: auto;
|
||||
padding-inline: 1rem;
|
||||
max-width: calc(var(--content-width) + var(--padding) * 2);
|
||||
}
|
||||
|
||||
body > footer {
|
||||
margin-block-start: 4rem;
|
||||
margin-block-start: 4rem;
|
||||
}
|
||||
|
||||
body > nav {
|
||||
margin-block-end: 4rem;
|
||||
border-block-end: rpx(1) solid var(--bg-muted-2);
|
||||
margin-block-end: 4rem;
|
||||
border-block-end: rpx(1) solid var(--bg-muted-2);
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-block: 0.625rem;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-block: 0.625rem;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
li {
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,28 +4,28 @@
|
|||
*,
|
||||
:after,
|
||||
:before {
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a,
|
||||
|
|
@ -42,7 +42,7 @@ input[type="reset"],
|
|||
input[type="submit"],
|
||||
label,
|
||||
select {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
article,
|
||||
|
|
@ -60,7 +60,7 @@ rt,
|
|||
ruby,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
bdi,
|
||||
|
|
@ -69,14 +69,14 @@ meter,
|
|||
output,
|
||||
progress,
|
||||
time {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
datalist,
|
||||
dialog:not([open]),
|
||||
rp {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
embed,
|
||||
|
|
@ -86,50 +86,50 @@ object,
|
|||
picture,
|
||||
svg,
|
||||
video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:after,
|
||||
blockquote:before,
|
||||
q:after,
|
||||
q:before {
|
||||
content: none;
|
||||
content: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align: super;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: small;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
@use "../abstracts/variables" as *;
|
||||
|
||||
:root {
|
||||
@include variables(("light", "common"));
|
||||
@include variables-accent(("light", "common"));
|
||||
scrollbar-color: var(--accent-color) transparent;
|
||||
accent-color: var(--accent-color);
|
||||
@include variables(("light", "common"));
|
||||
@include variables-accent(("light", "common"));
|
||||
scrollbar-color: var(--accent-color) transparent;
|
||||
accent-color: var(--accent-color);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
& {
|
||||
@include variables("dark");
|
||||
@include variables-accent(("dark"));
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
& {
|
||||
@include variables("dark");
|
||||
@include variables-accent(("dark"));
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,25 +7,25 @@ ol,
|
|||
dl,
|
||||
blockquote,
|
||||
pre {
|
||||
margin-block: 1rem;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
margin-block: 0;
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: pretty;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:disabled,
|
||||
[aria-disabled="true"] {
|
||||
opacity: var(--disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
opacity: var(--disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -34,367 +34,363 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
transition-duration: var(--transition);
|
||||
transition-property: text-shadow, font-weight;
|
||||
margin-block: 2rem 1rem;
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1;
|
||||
font-variation-settings: "FLAR" 100;
|
||||
letter-spacing: -0.05em;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--bg-muted-1);
|
||||
text-decoration-thickness: 0.125em;
|
||||
text-wrap: balance;
|
||||
overflow-wrap: break-word;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: text-shadow, font-weight;
|
||||
margin-block: 2rem 1rem;
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1;
|
||||
font-variation-settings: "FLAR" 100;
|
||||
letter-spacing: -0.05em;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--bg-muted-1);
|
||||
text-decoration-thickness: 0.125em;
|
||||
text-wrap: balance;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&:target {
|
||||
animation: none !important;
|
||||
outline: none !important;
|
||||
font-weight: var(--font-weight-light);
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
}
|
||||
&:target {
|
||||
animation: none !important;
|
||||
outline: none !important;
|
||||
font-weight: var(--font-weight-light);
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-xxx-large);
|
||||
font-size: var(--font-size-xxx-large);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-xx-large);
|
||||
font-size: var(--font-size-xx-large);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-x-large);
|
||||
font-size: var(--font-size-x-large);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-large);
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--font-size-medium);
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: var(--font-size-xx-large);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--font-size-xx-large);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-x-large);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--font-size-x-large);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--font-size-x-small);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--font-size-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: rpx(1);
|
||||
cursor: help;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: rpx(1);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
text-align: center;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1rem 0;
|
||||
border-inline-start: 0.25rem solid var(--accent-color);
|
||||
border-start-start-radius: 0.25rem;
|
||||
border-end-start-radius: 0.25rem;
|
||||
padding-inline-start: 0.75rem;
|
||||
color: var(--fg-muted-2);
|
||||
margin: 1rem 0;
|
||||
border-inline-start: 0.25rem solid var(--accent-color);
|
||||
border-start-start-radius: 0.25rem;
|
||||
border-end-start-radius: 0.25rem;
|
||||
padding-inline-start: 0.75rem;
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--font-monospace), var(--font-ui-monospace);
|
||||
font-family: var(--font-monospace), var(--font-ui-monospace);
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.75rem 1rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
line-height: 1.25;
|
||||
margin: 1rem 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.75rem 1rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
code:not(pre code),
|
||||
mark,
|
||||
samp,
|
||||
q {
|
||||
@include chip;
|
||||
@include chip;
|
||||
}
|
||||
|
||||
code:not(pre code) {
|
||||
background-color: var(--red-bg-1);
|
||||
padding-block: rpx(3);
|
||||
color: var(--red-fg);
|
||||
font-size: var(--font-size-small);
|
||||
background-color: var(--red-bg-1);
|
||||
padding-block: rpx(3);
|
||||
color: var(--red-fg);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
mark {
|
||||
color: var(--accent-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
del {
|
||||
color: var(--red-fg);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: rpx(1);
|
||||
color: var(--red-fg);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: rpx(1);
|
||||
}
|
||||
|
||||
ins {
|
||||
color: var(--green-fg);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: rpx(1);
|
||||
color: var(--green-fg);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: rpx(1);
|
||||
}
|
||||
|
||||
samp {
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
q {
|
||||
color: var(--fg-muted-2);
|
||||
font-style: italic;
|
||||
color: var(--fg-muted-2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: var(--red-fg);
|
||||
text-decoration-thickness: rpx(1);
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: var(--red-fg);
|
||||
text-decoration-thickness: rpx(1);
|
||||
}
|
||||
|
||||
progress {
|
||||
appearance: none;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.25rem;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
color: var(--accent-color);
|
||||
appearance: none;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.25rem;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
color: var(--accent-color);
|
||||
|
||||
&:indeterminate {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
&:indeterminate {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
|
||||
&:indeterminate::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:indeterminate::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: transform, box-shadow, background-color;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
inset 0 -0.125rem 0 var(--bg-muted-2);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0 0.375rem;
|
||||
font-size: var(--font-size-small);
|
||||
display: inline-block;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: transform, box-shadow, background-color;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--bg-muted-2);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0 0.375rem;
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
// Small nice thingy, keys can be pressed!
|
||||
&:active {
|
||||
transform: translateY(0.125rem);
|
||||
box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2);
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
// Small nice thingy, keys can be pressed!
|
||||
&:active {
|
||||
transform: translateY(0.125rem);
|
||||
box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2);
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
text-decoration-color: var(--accent-highlight);
|
||||
text-decoration-thickness: rpx(1);
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
text-decoration-color: var(--accent-highlight);
|
||||
text-decoration-thickness: rpx(1);
|
||||
|
||||
&:hover {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2rem auto;
|
||||
border: 0.125rem solid var(--bg-muted-2);
|
||||
border-radius: 9999px;
|
||||
margin: 2rem auto;
|
||||
border: 0.125rem solid var(--bg-muted-2);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: 1.5rem;
|
||||
margin-block-end: 1rem;
|
||||
margin-inline-start: 1.5rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
float: inline-end;
|
||||
margin-inline-start: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
width: calc(var(--content-width) / 3);
|
||||
float: inline-end;
|
||||
margin-inline-start: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
width: calc(var(--content-width) / 3);
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
float: none;
|
||||
margin-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
float: none;
|
||||
margin-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
display: flow-root;
|
||||
transition: padding-block-end var(--transition);
|
||||
margin-block-end: 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flow-root;
|
||||
transition: padding-block-end var(--transition);
|
||||
margin-block-end: 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
&::details-content {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition-behavior: allow-discrete;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: opacity, block-size, content-visibility;
|
||||
block-size: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
&::details-content {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition-behavior: allow-discrete;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: opacity, block-size, content-visibility;
|
||||
block-size: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
padding-block-end: 1rem;
|
||||
&[open] {
|
||||
padding-block-end: 1rem;
|
||||
|
||||
&::details-content {
|
||||
opacity: 1;
|
||||
block-size: auto;
|
||||
block-size: calc-size(auto, size);
|
||||
}
|
||||
&::details-content {
|
||||
opacity: 1;
|
||||
block-size: auto;
|
||||
block-size: calc-size(auto, size);
|
||||
}
|
||||
|
||||
summary {
|
||||
color: var(--accent-color);
|
||||
summary {
|
||||
color: var(--accent-color);
|
||||
|
||||
&::before {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
&::before {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
@supports not (block-size: calc-size(auto, size)) {
|
||||
& ~ * {
|
||||
animation: slide-in-up var(--transition-bezier);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports not (block-size: calc-size(auto, size)) {
|
||||
& ~ * {
|
||||
animation: slide-in-up var(--transition-bezier);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
transition: var(--transition);
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
list-style: none;
|
||||
summary {
|
||||
transition: var(--transition);
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
list-style: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-caret-down);
|
||||
display: inline-block;
|
||||
vertical-align: rpx(-2);
|
||||
transition:
|
||||
all var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-caret-down);
|
||||
display: inline-block;
|
||||
vertical-align: rpx(-2);
|
||||
transition: all var(--transition), transform var(--transition-bezier);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > :last-child,
|
||||
& > :last-child img {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
& > :last-child,
|
||||
& > :last-child img {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-inline: 0;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-inline-start: 1.5rem;
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-block: 0.25rem;
|
||||
padding-inline-start: 0.25rem;
|
||||
margin-block: 0.25rem;
|
||||
padding-inline-start: 0.25rem;
|
||||
|
||||
&::marker {
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
&::marker {
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,100 +1,100 @@
|
|||
@use "../abstracts/mixins" as *;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
&.centered {
|
||||
justify-content: center;
|
||||
}
|
||||
&.centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&.end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.big {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
&.big {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons a,
|
||||
a.button,
|
||||
button {
|
||||
display: inline-block;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1.5rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:disabled, [aria-disabled="true"]):hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
&:not(:disabled, [aria-disabled="true"]):hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:not(:disabled, [aria-disabled="true"]):active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:not(:disabled, [aria-disabled="true"]):active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&.suggested {
|
||||
@include gradient-fill;
|
||||
&.suggested {
|
||||
@include gradient-fill;
|
||||
|
||||
&:not(:disabled, [aria-disabled="true"]):hover {
|
||||
@include gradient-fill(hover);
|
||||
}
|
||||
}
|
||||
&:not(:disabled, [aria-disabled="true"]):hover {
|
||||
@include gradient-fill(hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.subtle {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
&.subtle {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
|
||||
&:not(:disabled, [aria-disabled="true"]):hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
&:not(:disabled, [aria-disabled="true"]):hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-busy="true"] {
|
||||
animation: progress-shimmer var(--transition-long) ease-in-out alternate
|
||||
infinite;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent 50%,
|
||||
var(--bg-muted-1) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200%;
|
||||
&[aria-busy="true"] {
|
||||
animation: progress-shimmer var(--transition-long) ease-in-out alternate
|
||||
infinite;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent 50%,
|
||||
var(--bg-muted-1) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200%;
|
||||
|
||||
@keyframes progress-shimmer {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes progress-shimmer {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons.big a,
|
||||
.buttons.big button,
|
||||
a.button.big,
|
||||
button.big {
|
||||
border-radius: 9999px;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 9999px;
|
||||
padding: 0.625rem 1.25rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use "../abstracts/mixins" as *;
|
||||
|
||||
.card {
|
||||
@include card;
|
||||
@include card;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,90 +1,90 @@
|
|||
.crt,
|
||||
pre:has(code[data-crt], code[data-lang=""]) {
|
||||
position: relative;
|
||||
animation: flicker 0.25s alternate infinite;
|
||||
margin-inline: auto;
|
||||
box-shadow: var(--shadow-glow);
|
||||
background-image: var(--crt-bg);
|
||||
background-color: transparent !important;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--accent-color) !important;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
position: relative;
|
||||
animation: flicker 0.25s alternate infinite;
|
||||
margin-inline: auto;
|
||||
box-shadow: var(--shadow-glow);
|
||||
background-image: var(--crt-bg);
|
||||
background-color: transparent !important;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--accent-color) !important;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
|
||||
@keyframes flicker {
|
||||
25% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
@keyframes flicker {
|
||||
25% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
to {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: var(--scanlines-opacity);
|
||||
z-index: 1;
|
||||
animation: scanlines 0.1s linear infinite;
|
||||
background-image: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 0.125rem,
|
||||
transparent 0.125rem,
|
||||
transparent 0.25rem
|
||||
);
|
||||
background-position-y: -0.125rem;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
&::before {
|
||||
opacity: var(--scanlines-opacity);
|
||||
z-index: 1;
|
||||
animation: scanlines 0.1s linear infinite;
|
||||
background-image: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 0.125rem,
|
||||
transparent 0.125rem,
|
||||
transparent 0.25rem
|
||||
);
|
||||
background-position-y: -0.125rem;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
|
||||
@keyframes scanlines {
|
||||
to {
|
||||
background-position-y: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes scanlines {
|
||||
to {
|
||||
background-position-y: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0.05;
|
||||
animation: scanline 5s linear infinite;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
var(--accent-color) 16rem
|
||||
);
|
||||
background-position-y: -16rem;
|
||||
background-size: 100% 16rem;
|
||||
pointer-events: none;
|
||||
&::after {
|
||||
opacity: 0.05;
|
||||
animation: scanline 5s linear infinite;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
var(--accent-color) 16rem
|
||||
);
|
||||
background-position-y: -16rem;
|
||||
background-size: 100% 16rem;
|
||||
pointer-events: none;
|
||||
|
||||
@keyframes scanline {
|
||||
to {
|
||||
background-position-y: calc(100% + 16rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes scanline {
|
||||
to {
|
||||
background-position-y: calc(100% + 16rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > code {
|
||||
display: block;
|
||||
border-radius: inherit;
|
||||
padding: 0.75rem 1rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
& > code {
|
||||
display: block;
|
||||
border-radius: inherit;
|
||||
padding: 0.75rem 1rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
@use "../abstracts/mixins" as *;
|
||||
|
||||
a.external:not(:has(img, svg, video, picture, figure))::after {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-arrow-square-out);
|
||||
display: inline-block;
|
||||
vertical-align: -0.125rem;
|
||||
opacity: var(--dim-opacity);
|
||||
margin-inline-start: 0.125rem;
|
||||
font-size: max(1rem, 1em);
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-arrow-square-out);
|
||||
display: inline-block;
|
||||
vertical-align: -0.125rem;
|
||||
opacity: var(--dim-opacity);
|
||||
margin-inline-start: 0.125rem;
|
||||
font-size: max(1rem, 1em);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
iframe {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
&:fullscreen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
&:fullscreen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:-webkit-full-screen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
&:-webkit-full-screen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@use "../abstracts/mixins" as *;
|
||||
|
||||
input {
|
||||
appearance: none;
|
||||
background-color: var(--bg-muted-1);
|
||||
appearance: none;
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
|
||||
input:not([type]),
|
||||
|
|
@ -10,252 +10,250 @@ input[type="text"],
|
|||
input[type="search"],
|
||||
input[type="password"],
|
||||
input[type="submit"] {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-family: inherit;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input:not([type]),
|
||||
input[type="text"],
|
||||
input[type="search"],
|
||||
input[type="password"] {
|
||||
padding: 0.5rem 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--fg-muted-1);
|
||||
}
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--fg-muted-1);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 0.375rem 0.75rem;
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-small);
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 0.375rem 0.75rem;
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
&:enabled:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:enabled:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"],
|
||||
input[type="color"] {
|
||||
position: relative;
|
||||
transition: background-color var(--transition);
|
||||
border: 0.125rem solid var(--bg-muted-2);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
position: relative;
|
||||
transition: background-color var(--transition);
|
||||
border: 0.125rem solid var(--bg-muted-2);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
&:not(:checked):enabled:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
&:not(:checked):enabled:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
vertical-align: -0.125em;
|
||||
margin-inline-end: 0.25rem;
|
||||
vertical-align: -0.125em;
|
||||
margin-inline-end: 0.25rem;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
content: "";
|
||||
}
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition), transform var(--transition-bezier);
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border: 0.15rem solid transparent;
|
||||
background-color: var(--accent-color);
|
||||
&:checked {
|
||||
border: 0.15rem solid transparent;
|
||||
background-color: var(--accent-color);
|
||||
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
inset-block-start: 0.125rem;
|
||||
inset-inline-start: 0.125rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--contrast-color);
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
&::before {
|
||||
inset-block-start: 0.125rem;
|
||||
inset-inline-start: 0.125rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--contrast-color);
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
border-radius: calc(var(--rounded-corner-small) / 2);
|
||||
border-radius: calc(var(--rounded-corner-small) / 2);
|
||||
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-check);
|
||||
transform-origin: bottom left;
|
||||
inset-block-start: -0.125rem;
|
||||
inset-inline-start: -0.125rem;
|
||||
color: var(--contrast-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-check);
|
||||
transform-origin: bottom left;
|
||||
inset-block-start: -0.125rem;
|
||||
inset-inline-start: -0.125rem;
|
||||
color: var(--contrast-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.switch {
|
||||
vertical-align: -0.375rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
width: 2.5rem;
|
||||
height: 1.5rem;
|
||||
&.switch {
|
||||
vertical-align: -0.375rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
width: 2.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&.big {
|
||||
vertical-align: -0.625rem;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
&.big {
|
||||
vertical-align: -0.625rem;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
|
||||
&::before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: none;
|
||||
transform-origin: center;
|
||||
opacity: 1;
|
||||
mask-image: none;
|
||||
inset-block-start: 0.25rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: "";
|
||||
}
|
||||
&::before {
|
||||
transform: none;
|
||||
transform-origin: center;
|
||||
opacity: 1;
|
||||
mask-image: none;
|
||||
inset-block-start: 0.25rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--accent-color);
|
||||
&:checked {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
&::before {
|
||||
transform: translateX(1rem);
|
||||
background-color: var(--contrast-color);
|
||||
&::before {
|
||||
transform: translateX(1rem);
|
||||
background-color: var(--contrast-color);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:disabled::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
vertical-align: -0.375em;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
padding: 0.25rem;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
vertical-align: -0.375em;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
padding: 0.25rem;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
|
||||
}
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
|
||||
}
|
||||
&::-webkit-color-swatch {
|
||||
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
appearance: none;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 9999px;
|
||||
background: var(--bg-muted-1);
|
||||
padding: 0.5rem 0.25rem;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
appearance: none;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 9999px;
|
||||
background: var(--bg-muted-1);
|
||||
padding: 0.5rem 0.25rem;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
cursor: pointer;
|
||||
border-radius: 9999px;
|
||||
background: var(--accent-color);
|
||||
width: 100%;
|
||||
}
|
||||
&::-webkit-slider-runnable-track {
|
||||
cursor: pointer;
|
||||
border-radius: 9999px;
|
||||
background: var(--accent-color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
cursor: pointer;
|
||||
border-radius: 9999px;
|
||||
background: var(--accent-color);
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
}
|
||||
&::-moz-range-track {
|
||||
cursor: pointer;
|
||||
border-radius: 9999px;
|
||||
background: var(--accent-color);
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
cursor: ew-resize;
|
||||
margin-block: -0.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background-color: white;
|
||||
width: 0.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
cursor: ew-resize;
|
||||
margin-block: -0.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background-color: white;
|
||||
width: 0.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
appearance: none;
|
||||
cursor: ew-resize;
|
||||
margin-block: -0.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background-color: white;
|
||||
width: 0.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
appearance: none;
|
||||
cursor: ew-resize;
|
||||
margin-block: -0.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background-color: white;
|
||||
width: 0.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&.hollow {
|
||||
&::-webkit-slider-thumb {
|
||||
margin-block: 0;
|
||||
outline: 0.25rem solid white;
|
||||
background-color: transparent;
|
||||
height: 0.5rem;
|
||||
}
|
||||
&.hollow {
|
||||
&::-webkit-slider-thumb {
|
||||
margin-block: 0;
|
||||
outline: 0.25rem solid white;
|
||||
background-color: transparent;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
margin-block: 0;
|
||||
outline: 0.25rem solid white;
|
||||
background-color: transparent;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
margin-block: 0;
|
||||
outline: 0.25rem solid white;
|
||||
background-color: transparent;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,165 +1,165 @@
|
|||
img,
|
||||
video {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 2rem);
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 2rem);
|
||||
|
||||
&.full,
|
||||
&[src*="#full"] {
|
||||
width: 100%;
|
||||
}
|
||||
&.full,
|
||||
&[src*="#full"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
width: calc(var(--content-width) / 3);
|
||||
}
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
width: calc(var(--content-width) / 3);
|
||||
}
|
||||
|
||||
&.start,
|
||||
&[src*="#start"] {
|
||||
float: inline-start;
|
||||
transform-origin: left;
|
||||
margin-inline-end: 1rem;
|
||||
&.start,
|
||||
&[src*="#start"] {
|
||||
float: inline-start;
|
||||
transform-origin: left;
|
||||
margin-inline-end: 1rem;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.end,
|
||||
&[src*="#end"] {
|
||||
float: inline-end;
|
||||
transform-origin: right;
|
||||
margin-inline-start: 1rem;
|
||||
&.end,
|
||||
&[src*="#end"] {
|
||||
float: inline-end;
|
||||
transform-origin: right;
|
||||
margin-inline-start: 1rem;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.pixels,
|
||||
&[src*="#pixels"] {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
&.pixels,
|
||||
&[src*="#pixels"] {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
&.has-alpha,
|
||||
&[src*="#has-alpha"] {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.has-alpha,
|
||||
&[src*="#has-alpha"] {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.drop-shadow,
|
||||
&[src*="#drop-shadow"] {
|
||||
filter: var(--drop-shadow);
|
||||
}
|
||||
&.drop-shadow,
|
||||
&[src*="#drop-shadow"] {
|
||||
filter: var(--drop-shadow);
|
||||
}
|
||||
|
||||
&.spoiler,
|
||||
&[src*="#spoiler"] {
|
||||
opacity: var(--dim-opacity);
|
||||
clip-path: inset(0 0 0 0 round var(--rounded-corner));
|
||||
filter: blur(1.5rem);
|
||||
&.spoiler,
|
||||
&[src*="#spoiler"] {
|
||||
opacity: var(--dim-opacity);
|
||||
clip-path: inset(0 0 0 0 round var(--rounded-corner));
|
||||
filter: blur(1.5rem);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
clip-path: inset(
|
||||
-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small)
|
||||
);
|
||||
filter: none;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
clip-path: inset(
|
||||
-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small)
|
||||
);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&.solid,
|
||||
&[src*="#solid"] {
|
||||
clip-path: none;
|
||||
filter: brightness(0) contrast(0.5);
|
||||
box-shadow: none;
|
||||
&.solid,
|
||||
&[src*="#solid"] {
|
||||
clip-path: none;
|
||||
filter: brightness(0) contrast(0.5);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
float: none;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
float: none;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
border-radius var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
border-radius var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
|
||||
&:not(.no-hover, [src*="#no-hover"], .emoji) {
|
||||
cursor: zoom-in;
|
||||
&:not(.no-hover, [src*="#no-hover"], .emoji) {
|
||||
cursor: zoom-in;
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
transform: var(--hover);
|
||||
z-index: 1;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-raised);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
&:hover {
|
||||
position: relative;
|
||||
transform: var(--hover);
|
||||
z-index: 1;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-raised);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
transition: transform var(--transition-bezier-longer);
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
transition: transform var(--transition-bezier-longer);
|
||||
|
||||
&:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
transform-origin: center;
|
||||
transition: transform var(--transition-bezier);
|
||||
@media only screen and (max-width: 720px) {
|
||||
transform-origin: center;
|
||||
transition: transform var(--transition-bezier);
|
||||
|
||||
&:hover {
|
||||
transform: var(--hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: var(--hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-alpha,
|
||||
&[src*="#has-alpha"] {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.has-alpha,
|
||||
&[src*="#has-alpha"] {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a img:not(.no-hover, [src*="#no-hover"]) {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
video:fullscreen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
video:-webkit-full-screen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
picture {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.overflow-auto {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
|
||||
&.overshoot {
|
||||
margin-block: -1rem;
|
||||
padding-block: 1rem;
|
||||
}
|
||||
&.overshoot {
|
||||
margin-block: -1rem;
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
&.overshoot-row {
|
||||
margin-inline: -1rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
&.overshoot-row {
|
||||
margin-inline: -1rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
.overshoot {
|
||||
--mask: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
black 1rem,
|
||||
black calc(100% - 1rem),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask-image: var(--mask);
|
||||
mask-image: var(--mask);
|
||||
--mask: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
black 1rem,
|
||||
black calc(100% - 1rem),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask-image: var(--mask);
|
||||
mask-image: var(--mask);
|
||||
|
||||
&-row {
|
||||
--mask: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 1rem,
|
||||
black calc(100% - 1rem),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask-image: var(--mask);
|
||||
mask-image: var(--mask);
|
||||
}
|
||||
&-row {
|
||||
--mask: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 1rem,
|
||||
black calc(100% - 1rem),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask-image: var(--mask);
|
||||
mask-image: var(--mask);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
#skip-to-content {
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 1rem));
|
||||
z-index: 9999;
|
||||
transition:
|
||||
backdrop-filter var(--transition),
|
||||
box-shadow var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
inset-inline-start: 50vw;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.375rem 0.75rem;
|
||||
width: max-content;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 1rem));
|
||||
z-index: 9999;
|
||||
transition:
|
||||
backdrop-filter var(--transition),
|
||||
box-shadow var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
inset-inline-start: 50vw;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.375rem 0.75rem;
|
||||
width: max-content;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus-visible,
|
||||
&:focus {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transform: translateX(-50%) translateY(1rem);
|
||||
backdrop-filter: var(--blur);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
}
|
||||
&:focus-visible,
|
||||
&:focus {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transform: translateX(-50%) translateY(1rem);
|
||||
backdrop-filter: var(--blur);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
span.spoiler {
|
||||
filter: blur(0.25rem);
|
||||
transition: filter var(--transition);
|
||||
filter: blur(0.25rem);
|
||||
transition: filter var(--transition);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
filter: none;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&.solid {
|
||||
filter: none;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: transparent;
|
||||
&.solid {
|
||||
filter: none;
|
||||
transition: background-color var(--transition), color var(--transition);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: transparent;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
@use "../abstracts/functions" as *;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-block-start: none;
|
||||
color: var(--fg-muted-2);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
border-block-start: none;
|
||||
color: var(--fg-muted-2);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
&:nth-child(even) {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-block: rpx(1) solid var(--bg-muted-2);
|
||||
border-block: rpx(1) solid var(--bg-muted-2);
|
||||
|
||||
&:last-child {
|
||||
border-block-end: none;
|
||||
}
|
||||
&:last-child {
|
||||
border-block-end: none;
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-auto table {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
textarea {
|
||||
appearance: none;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
resize: none;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-family: inherit;
|
||||
appearance: none;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
resize: none;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-family: inherit;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--fg-muted-1);
|
||||
}
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--fg-muted-1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
strong.title {
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-large);
|
||||
line-height: 1;
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-large);
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
// attr() hack from https://cyrneko.eu/css-tricks.html
|
||||
@media (pointer: coarse), (hover: none) {
|
||||
.tooltip,
|
||||
abbr[title] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
.tooltip,
|
||||
abbr[title] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
z-index: 9999;
|
||||
backdrop-filter: var(--blur);
|
||||
transition:
|
||||
visibility var(--transition),
|
||||
opacity var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.125rem 0.375rem;
|
||||
width: max-content;
|
||||
content: attr(title);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transform: translateY(-0.5rem) scale(0.5);
|
||||
transform-origin: top;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
max-width: calc(var(--content-width) / 3);
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
z-index: 9999;
|
||||
backdrop-filter: var(--blur);
|
||||
transition:
|
||||
visibility var(--transition),
|
||||
opacity var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.125rem 0.375rem;
|
||||
width: max-content;
|
||||
content: attr(title);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transform: translateY(-0.5rem) scale(0.5);
|
||||
transform-origin: top;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
max-width: calc(var(--content-width) / 3);
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
&:focus::after,
|
||||
&:hover::after {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:focus::after,
|
||||
&:hover::after {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
clip-path: inset(50%) !important;
|
||||
margin: -1px !important;
|
||||
border-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
position: absolute !important;
|
||||
clip-path: inset(50%) !important;
|
||||
margin: -1px !important;
|
||||
border-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,151 +3,151 @@
|
|||
@use "../citrine/abstracts/variables" as *;
|
||||
|
||||
[class^="markdown-alert"] {
|
||||
display: flow-root;
|
||||
position: relative;
|
||||
display: flow-root;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
margin-inline-start: 1.5rem;
|
||||
content: var(--alert-title);
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
&::before {
|
||||
margin-inline-start: 1.5rem;
|
||||
content: var(--alert-title);
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--alert-icon);
|
||||
position: absolute;
|
||||
margin-inline-end: 0.25rem;
|
||||
inset-block-start: rpx(1);
|
||||
inset-inline-start: 0.75rem;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
&::after {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--alert-icon);
|
||||
position: absolute;
|
||||
margin-inline-end: 0.25rem;
|
||||
inset-block-start: rpx(1);
|
||||
inset-inline-start: 0.75rem;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
margin-block-start: 0.25rem;
|
||||
}
|
||||
& > :first-child {
|
||||
margin-block-start: 0.25rem;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
& > :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-alert {
|
||||
// GitHub flavored alerts
|
||||
&-note,
|
||||
// GitHub flavored alerts
|
||||
&-note,
|
||||
&-tip,
|
||||
&-important,
|
||||
&-warning,
|
||||
&-caution,
|
||||
// Generic colors
|
||||
&-red,
|
||||
&-red,
|
||||
&-orange,
|
||||
&-yellow,
|
||||
&-green,
|
||||
&-blue,
|
||||
&-purple {
|
||||
@include variables-accent(("light", "common"));
|
||||
@include variables-accent(("light", "common"));
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include variables-accent("dark");
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include variables-accent("dark");
|
||||
}
|
||||
}
|
||||
|
||||
&-note {
|
||||
&::before {
|
||||
content: var(--alert-note-title);
|
||||
}
|
||||
&-note {
|
||||
&::before {
|
||||
content: var(--alert-note-title);
|
||||
}
|
||||
|
||||
&::after {
|
||||
--icon: var(--icon-info);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
--icon: var(--icon-info);
|
||||
}
|
||||
}
|
||||
|
||||
&-tip {
|
||||
&::before {
|
||||
content: var(--alert-tip-title);
|
||||
}
|
||||
&-tip {
|
||||
&::before {
|
||||
content: var(--alert-tip-title);
|
||||
}
|
||||
|
||||
&::after {
|
||||
--icon: var(--icon-lightbulb);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
--icon: var(--icon-lightbulb);
|
||||
}
|
||||
}
|
||||
|
||||
&-important {
|
||||
&::before {
|
||||
content: var(--alert-important-title);
|
||||
}
|
||||
&-important {
|
||||
&::before {
|
||||
content: var(--alert-important-title);
|
||||
}
|
||||
|
||||
&::after {
|
||||
--icon: var(--icon-warning-diamond);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
--icon: var(--icon-warning-diamond);
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&::before {
|
||||
content: var(--alert-warning-title);
|
||||
}
|
||||
&-warning {
|
||||
&::before {
|
||||
content: var(--alert-warning-title);
|
||||
}
|
||||
|
||||
&::after {
|
||||
--icon: var(--icon-warning);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
--icon: var(--icon-warning);
|
||||
}
|
||||
}
|
||||
|
||||
&-caution {
|
||||
&::before {
|
||||
content: var(--alert-caution-title);
|
||||
}
|
||||
&-caution {
|
||||
&::before {
|
||||
content: var(--alert-caution-title);
|
||||
}
|
||||
|
||||
&::after {
|
||||
--icon: var(--icon-warning-octagon);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
--icon: var(--icon-warning-octagon);
|
||||
}
|
||||
}
|
||||
|
||||
&-caution,
|
||||
&-red {
|
||||
--accent-h: var(--red-h);
|
||||
--accent-s: var(--red-s);
|
||||
--accent-l: var(--red-l);
|
||||
--accent-color: var(--red-fg);
|
||||
}
|
||||
&-caution,
|
||||
&-red {
|
||||
--accent-h: var(--red-h);
|
||||
--accent-s: var(--red-s);
|
||||
--accent-l: var(--red-l);
|
||||
--accent-color: var(--red-fg);
|
||||
}
|
||||
|
||||
&-orange {
|
||||
--accent-h: var(--orange-h);
|
||||
--accent-s: var(--orange-s);
|
||||
--accent-l: var(--orange-l);
|
||||
--accent-color: var(--orange-fg);
|
||||
}
|
||||
&-orange {
|
||||
--accent-h: var(--orange-h);
|
||||
--accent-s: var(--orange-s);
|
||||
--accent-l: var(--orange-l);
|
||||
--accent-color: var(--orange-fg);
|
||||
}
|
||||
|
||||
&-warning,
|
||||
&-yellow {
|
||||
--accent-h: var(--yellow-h);
|
||||
--accent-s: var(--yellow-s);
|
||||
--accent-l: var(--yellow-l);
|
||||
--accent-color: var(--yellow-fg);
|
||||
}
|
||||
&-warning,
|
||||
&-yellow {
|
||||
--accent-h: var(--yellow-h);
|
||||
--accent-s: var(--yellow-s);
|
||||
--accent-l: var(--yellow-l);
|
||||
--accent-color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
&-tip,
|
||||
&-green {
|
||||
--accent-h: var(--green-h);
|
||||
--accent-s: var(--green-s);
|
||||
--accent-l: var(--green-l);
|
||||
--accent-color: var(--green-fg);
|
||||
}
|
||||
&-tip,
|
||||
&-green {
|
||||
--accent-h: var(--green-h);
|
||||
--accent-s: var(--green-s);
|
||||
--accent-l: var(--green-l);
|
||||
--accent-color: var(--green-fg);
|
||||
}
|
||||
|
||||
&-note,
|
||||
&-blue {
|
||||
--accent-h: var(--blue-h);
|
||||
--accent-s: var(--blue-s);
|
||||
--accent-l: var(--blue-l);
|
||||
--accent-color: var(--blue-fg);
|
||||
}
|
||||
&-note,
|
||||
&-blue {
|
||||
--accent-h: var(--blue-h);
|
||||
--accent-s: var(--blue-s);
|
||||
--accent-l: var(--blue-l);
|
||||
--accent-color: var(--blue-fg);
|
||||
}
|
||||
|
||||
&-important,
|
||||
&-purple {
|
||||
--accent-h: var(--purple-h);
|
||||
--accent-s: var(--purple-s);
|
||||
--accent-l: var(--purple-l);
|
||||
--accent-color: var(--purple-fg);
|
||||
}
|
||||
&-important,
|
||||
&-purple {
|
||||
--accent-h: var(--purple-h);
|
||||
--accent-s: var(--purple-s);
|
||||
--accent-l: var(--purple-l);
|
||||
--accent-color: var(--purple-fg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,71 @@
|
|||
@use "../citrine/abstracts/functions" as *;
|
||||
|
||||
.article-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-block-end: 2rem;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-block-end: 2rem;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
.items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem 0.5rem;
|
||||
}
|
||||
.items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
.item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: var(--font-size-small);
|
||||
text-decoration-color: transparent;
|
||||
a {
|
||||
color: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: var(--font-size-small);
|
||||
text-decoration-color: transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration-style: solid;
|
||||
text-decoration-color: var(--fg-muted-1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
text-decoration-style: solid;
|
||||
text-decoration-color: var(--fg-muted-1);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
cursor: help;
|
||||
}
|
||||
.tooltip {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.icon {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.375rem;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.icon {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.375rem;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5rem;
|
||||
margin: 0;
|
||||
border-block-start: rpx(1) solid var(--bg-muted-2);
|
||||
padding-inline-start: 0;
|
||||
padding-block-start: 0.5rem;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5rem;
|
||||
margin: 0;
|
||||
border-block-start: rpx(1) solid var(--bg-muted-2);
|
||||
padding-inline-start: 0;
|
||||
padding-block-start: 0.5rem;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-block: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
margin-block: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a::before {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
a::before {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,252 +3,254 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.article-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(calc(var(--content-width) / 2.5), 1fr)
|
||||
);
|
||||
gap: 1rem;
|
||||
margin-block-start: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(calc(var(--content-width) / 2.5), 1fr)
|
||||
);
|
||||
gap: 1rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
&.categories article {
|
||||
position: relative;
|
||||
&.categories article {
|
||||
position: relative;
|
||||
|
||||
&:hover .icon:last-child {
|
||||
transform: translateY(-50%) rotate(-10deg) scale(1.5);
|
||||
}
|
||||
&:hover .icon:last-child {
|
||||
transform: translateY(-50%) rotate(-10deg) scale(1.5);
|
||||
}
|
||||
|
||||
.icon:last-child {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
z-index: -1;
|
||||
transition: transform var(--transition-bezier);
|
||||
inset-block-start: 50%;
|
||||
inset-inline-end: -3rem;
|
||||
color: var(--bg-muted-1);
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
.icon:last-child {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
z-index: -1;
|
||||
transition: transform var(--transition-bezier);
|
||||
inset-block-start: 50%;
|
||||
inset-inline-end: -3rem;
|
||||
color: var(--bg-muted-1);
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
article {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.draft {
|
||||
opacity: var(--disabled-opacity);
|
||||
filter: grayscale(1);
|
||||
transition-duration: var(--transition);
|
||||
transition-property: opacity, filter;
|
||||
&.draft {
|
||||
opacity: var(--disabled-opacity);
|
||||
filter: grayscale(1);
|
||||
transition-duration: var(--transition);
|
||||
transition-property: opacity, filter;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-banner.has-accent-color {
|
||||
background-image: var(--bg-overlay), var(--blurnail);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
&.has-banner.has-accent-color {
|
||||
background-image: var(--bg-overlay), var(--blurnail);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.has-accent-color {
|
||||
@include variables-accent(("light", "common"));
|
||||
&.has-accent-color {
|
||||
@include variables-accent(("light", "common"));
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
& {
|
||||
@include variables-accent("dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
& {
|
||||
@include variables-accent("dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
& > div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
|
||||
& > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
& > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
border-inline-start: 0.25rem solid;
|
||||
border-start-start-radius: 0.25rem;
|
||||
border-end-start-radius: 0.25rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
text-decoration: none;
|
||||
h3 {
|
||||
margin: 0;
|
||||
border-inline-start: 0.25rem solid;
|
||||
border-start-start-radius: 0.25rem;
|
||||
border-end-start-radius: 0.25rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
content: " →";
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
content: " →";
|
||||
}
|
||||
}
|
||||
|
||||
.description p {
|
||||
margin-block-end: 0.75rem;
|
||||
}
|
||||
.description p {
|
||||
margin-block-end: 0.75rem;
|
||||
}
|
||||
|
||||
.open-post {
|
||||
@include easing-mask(bottom);
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-block-end: -2rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 0;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
.open-post {
|
||||
@include easing-mask(bottom);
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-block-end: -2rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 0;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: var(--shade-color);
|
||||
}
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: var(--shade-color);
|
||||
}
|
||||
|
||||
img {
|
||||
transform: var(--hover);
|
||||
filter: blur(0.25rem);
|
||||
}
|
||||
img {
|
||||
transform: var(--hover);
|
||||
filter: blur(0.25rem);
|
||||
}
|
||||
|
||||
.icon {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active img {
|
||||
transform: none;
|
||||
}
|
||||
&:active img {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transition: background-color var(--transition);
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transition: background-color var(--transition);
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: transform, filter;
|
||||
margin: 0;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: transform, filter;
|
||||
margin: 0;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
transition:
|
||||
transform var(--transition-bezier),
|
||||
opacity var(--transition);
|
||||
color: white;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
transition:
|
||||
transform var(--transition-bezier),
|
||||
opacity var(--transition);
|
||||
color: white;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.article-details {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
margin-block-end: 0;
|
||||
.article-details {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
margin-block-end: 0;
|
||||
|
||||
.tags {
|
||||
margin-block-start: auto;
|
||||
margin-block-end: -0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
margin-block-start: auto;
|
||||
margin-block-end: -0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paginator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 4rem;
|
||||
|
||||
&:has(a.paginator-item.previous:active) .paginator-counter {
|
||||
border-start-start-radius: 1rem;
|
||||
border-end-start-radius: 1rem;
|
||||
}
|
||||
&:has(a.paginator-item.previous:active) .paginator-counter {
|
||||
border-start-start-radius: 1rem;
|
||||
border-end-start-radius: 1rem;
|
||||
}
|
||||
|
||||
&:has(a.paginator-item.next:active) .paginator-counter {
|
||||
border-start-end-radius: 1rem;
|
||||
border-end-end-radius: 1rem;
|
||||
}
|
||||
&:has(a.paginator-item.next:active) .paginator-counter {
|
||||
border-start-end-radius: 1rem;
|
||||
border-end-end-radius: 1rem;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: inline-block;
|
||||
transition:
|
||||
border-radius var(--transition),
|
||||
border-start-end-radius var(--transition),
|
||||
border-end-end-radius var(--transition),
|
||||
border-start-start-radius var(--transition),
|
||||
border-end-start-radius var(--transition),
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 1rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.5rem;
|
||||
color: var(--accent-color);
|
||||
line-height: 0;
|
||||
text-decoration: none;
|
||||
&-item {
|
||||
display: inline-block;
|
||||
transition:
|
||||
border-radius var(--transition),
|
||||
border-start-end-radius var(--transition),
|
||||
border-end-end-radius var(--transition),
|
||||
border-start-start-radius var(--transition),
|
||||
border-end-start-radius var(--transition),
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 1rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.5rem;
|
||||
color: var(--accent-color);
|
||||
line-height: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:not([aria-disabled="true"]):hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
&:not([aria-disabled="true"]):hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
|
||||
&:not([aria-disabled="true"]):active {
|
||||
transform: var(--active);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
&:not([aria-disabled="true"]):active {
|
||||
transform: var(--active);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&-previous {
|
||||
border-start-end-radius: var(--rounded-corner-small);
|
||||
border-end-end-radius: var(--rounded-corner-small);
|
||||
}
|
||||
&-previous {
|
||||
border-start-end-radius: var(--rounded-corner-small);
|
||||
border-end-end-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
&-next {
|
||||
border-start-start-radius: var(--rounded-corner-small);
|
||||
border-end-start-radius: var(--rounded-corner-small);
|
||||
}
|
||||
}
|
||||
&-next {
|
||||
border-start-start-radius: var(--rounded-corner-small);
|
||||
border-end-start-radius: var(--rounded-corner-small);
|
||||
}
|
||||
}
|
||||
|
||||
&-counter {
|
||||
@include gradient-fill;
|
||||
display: inline-block;
|
||||
transition: var(--transition-bezier);
|
||||
transition-property:
|
||||
border-start-start-radius, border-end-start-radius,
|
||||
border-start-end-radius, border-end-end-radius;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
&-counter {
|
||||
@include gradient-fill;
|
||||
display: inline-block;
|
||||
transition: var(--transition-bezier);
|
||||
transition-property:
|
||||
border-start-start-radius,
|
||||
border-end-start-radius,
|
||||
border-start-end-radius,
|
||||
border-end-end-radius;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,66 @@
|
|||
.article-nav {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 0.75rem 1rem;
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
&-item {
|
||||
flex: 1;
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 0.75rem 1rem;
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
background-color: var(--bg-muted-1);
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
background-color: var(--bg-muted-1);
|
||||
|
||||
.article-title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.article-title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&.prev {
|
||||
text-align: start;
|
||||
&.prev {
|
||||
text-align: start;
|
||||
|
||||
.nav-arrow::before {
|
||||
content: "← ";
|
||||
}
|
||||
}
|
||||
.nav-arrow::before {
|
||||
content: "← ";
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
text-align: end;
|
||||
&.next {
|
||||
text-align: end;
|
||||
|
||||
.nav-arrow::after {
|
||||
content: " →";
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-arrow::after {
|
||||
content: " →";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
margin-block-end: 0.5rem;
|
||||
color: var(--fg-muted-2);
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
.nav-arrow {
|
||||
margin-block-end: 0.5rem;
|
||||
color: var(--fg-muted-2);
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
display: block;
|
||||
transition: color var(--transition);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--fg-muted-1);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.article-title {
|
||||
display: block;
|
||||
transition: color var(--transition);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--fg-muted-1);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,41 +2,41 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.audio-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--accent-bg-1);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier),
|
||||
box-shadow var(--transition);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--accent-bg-1);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier),
|
||||
box-shadow var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-bg-2);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--accent-bg-2);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.audio-button-label {
|
||||
display: none;
|
||||
.audio-button-label {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,39 +3,39 @@
|
|||
|
||||
// Who doesn't like a party popper mid article?
|
||||
.audio {
|
||||
@include chip;
|
||||
padding-block: 0;
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-medium);
|
||||
@include chip;
|
||||
padding-block: 0;
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-medium);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color) !important;
|
||||
&:hover {
|
||||
color: var(--accent-color) !important;
|
||||
|
||||
.icon {
|
||||
animation: speaker var(--transition-long) ease-out infinite;
|
||||
.icon {
|
||||
animation: speaker var(--transition-long) ease-out infinite;
|
||||
|
||||
@keyframes speaker {
|
||||
from {
|
||||
--icon: var(--icon-speaker-none);
|
||||
}
|
||||
@keyframes speaker {
|
||||
from {
|
||||
--icon: var(--icon-speaker-none);
|
||||
}
|
||||
|
||||
50% {
|
||||
--icon: var(--icon-speaker-low);
|
||||
}
|
||||
50% {
|
||||
--icon: var(--icon-speaker-low);
|
||||
}
|
||||
|
||||
to {
|
||||
--icon: var(--icon-speaker-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
to {
|
||||
--icon: var(--icon-speaker-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: rpx(-3);
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
.icon {
|
||||
vertical-align: rpx(-3);
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,98 +1,98 @@
|
|||
@use "../citrine/abstracts/functions" as *;
|
||||
|
||||
body.has-banner {
|
||||
background-image: var(--bg-overlay), var(--blurnail);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-image: var(--bg-overlay), var(--blurnail);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#banner {
|
||||
--mask: linear-gradient(black calc(100% - 2rem), transparent);
|
||||
-webkit-mask-image: var(--mask);
|
||||
display: flex;
|
||||
grid-area: banner;
|
||||
justify-content: center;
|
||||
mask-image: var(--mask);
|
||||
margin-block-end: -2.5rem;
|
||||
padding-block: 3.25rem 2.5rem;
|
||||
width: 100%;
|
||||
--mask: linear-gradient(black calc(100% - 2rem), transparent);
|
||||
-webkit-mask-image: var(--mask);
|
||||
display: flex;
|
||||
grid-area: banner;
|
||||
justify-content: center;
|
||||
mask-image: var(--mask);
|
||||
margin-block-end: -2.5rem;
|
||||
padding-block: 3.25rem 2.5rem;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
margin-inline: 1rem;
|
||||
aspect-ratio: 2 / 1;
|
||||
width: 100%;
|
||||
max-width: var(--content-width);
|
||||
}
|
||||
div {
|
||||
position: relative;
|
||||
margin-inline: 1rem;
|
||||
aspect-ratio: 2 / 1;
|
||||
width: 100%;
|
||||
max-width: var(--content-width);
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
inset: 0;
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0 !important;
|
||||
aspect-ratio: 2 / 1;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
inset: 0;
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0 !important;
|
||||
aspect-ratio: 2 / 1;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
img:nth-of-type(1) {
|
||||
opacity: var(--dim-opacity);
|
||||
z-index: -1;
|
||||
filter: blur(1.5rem);
|
||||
animation: banner-glow-load calc(0.525s + var(--transition-long));
|
||||
inset-block-start: 1rem;
|
||||
img:nth-of-type(1) {
|
||||
opacity: var(--dim-opacity);
|
||||
z-index: -1;
|
||||
filter: blur(1.5rem);
|
||||
animation: banner-glow-load calc(0.525s + var(--transition-long));
|
||||
inset-block-start: 1rem;
|
||||
|
||||
@keyframes banner-glow-load {
|
||||
from,
|
||||
52.5% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes banner-glow-load {
|
||||
from,
|
||||
52.5% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img:nth-of-type(2) {
|
||||
transform-origin: bottom;
|
||||
animation: banner-load calc(0.525s + var(--transition-longer));
|
||||
img:nth-of-type(2) {
|
||||
transform-origin: bottom;
|
||||
animation: banner-load calc(0.525s + var(--transition-longer));
|
||||
|
||||
@keyframes banner-load {
|
||||
from,
|
||||
52.5% {
|
||||
transform: translateY(2rem) scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes banner-load {
|
||||
from,
|
||||
52.5% {
|
||||
transform: translateY(2rem) scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + #main-content {
|
||||
margin-block-start: 0;
|
||||
& + #main-content {
|
||||
margin-block-start: 0;
|
||||
|
||||
article > h1:first-of-type,
|
||||
h1:first-of-type {
|
||||
margin-inline: -1rem;
|
||||
margin-block: 0;
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
|
||||
padding: 1rem;
|
||||
width: unset;
|
||||
-webkit-backdrop-filter: blur(1rem);
|
||||
backdrop-filter: blur(1rem);
|
||||
animation: banner-heading calc(0.525s + var(--transition-longer));
|
||||
box-shadow: inset 0 rpx(1) 0 var(--accent-highlight);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-muted-1),
|
||||
transparent 50%
|
||||
);
|
||||
background-size: auto 200%;
|
||||
text-decoration: none;
|
||||
article > h1:first-of-type,
|
||||
h1:first-of-type {
|
||||
margin-inline: -1rem;
|
||||
margin-block: 0;
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
|
||||
padding: 1rem;
|
||||
width: unset;
|
||||
-webkit-backdrop-filter: blur(1rem);
|
||||
backdrop-filter: blur(1rem);
|
||||
animation: banner-heading calc(0.525s + var(--transition-longer));
|
||||
box-shadow: inset 0 rpx(1) 0 var(--accent-highlight);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-muted-1),
|
||||
transparent 50%
|
||||
);
|
||||
background-size: auto 200%;
|
||||
text-decoration: none;
|
||||
|
||||
@keyframes banner-heading {
|
||||
from,
|
||||
52.5% {
|
||||
box-shadow: none;
|
||||
background-position-y: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes banner-heading {
|
||||
from,
|
||||
52.5% {
|
||||
box-shadow: none;
|
||||
background-position-y: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,458 +2,458 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
#comments {
|
||||
#qrcode {
|
||||
float: inline-end;
|
||||
cursor: help;
|
||||
box-sizing: content-box;
|
||||
margin-inline-start: 1rem;
|
||||
margin-block-start: 3rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: white;
|
||||
padding: 0.75rem;
|
||||
width: rpx(116);
|
||||
height: rpx(116);
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#comments-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
#comments-status {
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-x-large);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: grid;
|
||||
// grid-template-columns: min-content;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas:
|
||||
"avatar header "
|
||||
"...... post "
|
||||
"...... media "
|
||||
"...... card "
|
||||
"...... interactions";
|
||||
column-gap: 1rem;
|
||||
justify-items: start;
|
||||
animation: slide-in-right var(--transition-bezier);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
animation: slide-in-left var(--transition-bezier);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
grid-template-areas:
|
||||
"avatar header "
|
||||
"post post "
|
||||
"media media "
|
||||
"card card "
|
||||
"interactions interactions";
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
&.comment-reply {
|
||||
position: relative;
|
||||
border-inline-start: 0.25rem solid var(--bg-muted-2);
|
||||
border-start-start-radius: 0.25rem;
|
||||
border-end-start-radius: 0.25rem;
|
||||
padding-inline-start: 1rem;
|
||||
|
||||
&:has(+ .comment-reply) {
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
& + .comment-reply {
|
||||
margin-block-start: -2rem;
|
||||
border-start-start-radius: 0;
|
||||
padding-block-start: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
grid-area: avatar;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
transition: transform var(--transition-bezier);
|
||||
margin: 0;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(10deg) var(--hover);
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention {
|
||||
@include chip;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ellipsis::after {
|
||||
content: "…";
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
grid-area: header;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
color: var(--fg-muted-1);
|
||||
line-height: 1;
|
||||
|
||||
.display,
|
||||
.instance {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.display {
|
||||
color: var(--fg-color);
|
||||
line-height: 1.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
.emoji {
|
||||
cursor: unset;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.instance {
|
||||
margin-block-start: 0.25rem;
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-x-small);
|
||||
|
||||
&.op {
|
||||
cursor: help;
|
||||
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-seal-check);
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
margin-inline-end: 0.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
margin-block-start: 0.25rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-size: var(--font-size-x-small);
|
||||
text-decoration-color: transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration-style: solid;
|
||||
text-decoration-color: inherit;
|
||||
}
|
||||
|
||||
&::after {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--bg-muted-1) 0.5rem,
|
||||
var(--bg-muted-1) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--bg-color) 0.5rem,
|
||||
var(--bg-color) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--contrast-color),
|
||||
var(--contrast-color) 0.25rem,
|
||||
var(--accent-color) 0.25rem,
|
||||
var(--accent-color) 0.5rem
|
||||
);
|
||||
width: 100%;
|
||||
|
||||
summary {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
justify-self: stretch;
|
||||
margin-block-start: 1rem;
|
||||
padding: 0;
|
||||
|
||||
:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
grid-area: media;
|
||||
gap: 0.5rem;
|
||||
margin-block-start: 1rem;
|
||||
|
||||
img,
|
||||
video {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-card {
|
||||
grid-area: card;
|
||||
transition: transform var(--transition-bezier);
|
||||
margin-block-start: 1rem;
|
||||
width: min(calc(var(--content-width) / 2), 100%);
|
||||
font-weight: var(--font-weight-normal);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: var(--hover);
|
||||
box-shadow: var(--edge-highlight), var(--shadow-raised);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner)
|
||||
var(--rounded-corner-small) var(--rounded-corner-small);
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
|
||||
& + figcaption {
|
||||
border-radius: var(--rounded-corner-small)
|
||||
var(--rounded-corner-small) var(--rounded-corner)
|
||||
var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: border-radius, background-color;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
color: var(--fg-color);
|
||||
font-size: var(--font-size-medium);
|
||||
text-align: start;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
grid-area: interactions;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 1rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.boosts,
|
||||
.faves,
|
||||
.reaction {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.boosts,
|
||||
.faves {
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
border-radius var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
border-radius: rpx(18);
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
vertical-align: rpx(-2);
|
||||
transition: transform var(--transition-bezier);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
border-radius: rpx(18);
|
||||
}
|
||||
}
|
||||
|
||||
.boosts {
|
||||
border-start-end-radius: var(--rounded-corner-small);
|
||||
border-end-end-radius: var(--rounded-corner-small);
|
||||
padding-inline-end: 0.625rem;
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
--icon: var(--icon-repeat);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--purple-bg-1);
|
||||
|
||||
.icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faves {
|
||||
border-start-start-radius: var(--rounded-corner-small);
|
||||
border-end-start-radius: var(--rounded-corner-small);
|
||||
padding-inline-start: 0.625rem;
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
--icon: var(--icon-star);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--yellow-bg-1);
|
||||
|
||||
.icon {
|
||||
transform: rotate(72deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reactions {
|
||||
display: flex;
|
||||
// flex-wrap: nowrap;
|
||||
gap: 0.25rem;
|
||||
margin: -0.5rem -1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
|
||||
.reaction {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
cursor: zoom-in;
|
||||
border: rpx(1) solid var(--bg-muted-2);
|
||||
border-radius: rpx(19);
|
||||
|
||||
&:hover .emoji {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
span {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#qrcode {
|
||||
float: inline-end;
|
||||
cursor: help;
|
||||
box-sizing: content-box;
|
||||
margin-inline-start: 1rem;
|
||||
margin-block-start: 3rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: white;
|
||||
padding: 0.75rem;
|
||||
width: rpx(116);
|
||||
height: rpx(116);
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#comments-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
#comments-status {
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-x-large);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: grid;
|
||||
// grid-template-columns: min-content;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas:
|
||||
"avatar header "
|
||||
"...... post "
|
||||
"...... media "
|
||||
"...... card "
|
||||
"...... interactions";
|
||||
column-gap: 1rem;
|
||||
justify-items: start;
|
||||
animation: slide-in-right var(--transition-bezier);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
animation: slide-in-left var(--transition-bezier);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
grid-template-areas:
|
||||
"avatar header "
|
||||
"post post "
|
||||
"media media "
|
||||
"card card "
|
||||
"interactions interactions";
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
&.comment-reply {
|
||||
position: relative;
|
||||
border-inline-start: 0.25rem solid var(--bg-muted-2);
|
||||
border-start-start-radius: 0.25rem;
|
||||
border-end-start-radius: 0.25rem;
|
||||
padding-inline-start: 1rem;
|
||||
|
||||
&:has(+ .comment-reply) {
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
& + .comment-reply {
|
||||
margin-block-start: -2rem;
|
||||
border-start-start-radius: 0;
|
||||
padding-block-start: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
grid-area: avatar;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
transition: transform var(--transition-bezier);
|
||||
margin: 0;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(10deg) var(--hover);
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention {
|
||||
@include chip;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ellipsis::after {
|
||||
content: "…";
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
grid-area: header;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
color: var(--fg-muted-1);
|
||||
line-height: 1;
|
||||
|
||||
.display,
|
||||
.instance {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.display {
|
||||
color: var(--fg-color);
|
||||
line-height: 1.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
.emoji {
|
||||
cursor: unset;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.instance {
|
||||
margin-block-start: 0.25rem;
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
font-size: var(--font-size-x-small);
|
||||
|
||||
&.op {
|
||||
cursor: help;
|
||||
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-seal-check);
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
margin-inline-end: 0.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
margin-block-start: 0.25rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-size: var(--font-size-x-small);
|
||||
text-decoration-color: transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration-style: solid;
|
||||
text-decoration-color: inherit;
|
||||
}
|
||||
|
||||
&::after {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--bg-muted-1) 0.5rem,
|
||||
var(--bg-muted-1) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--bg-color) 0.5rem,
|
||||
var(--bg-color) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--contrast-color),
|
||||
var(--contrast-color) 0.25rem,
|
||||
var(--accent-color) 0.25rem,
|
||||
var(--accent-color) 0.5rem
|
||||
);
|
||||
width: 100%;
|
||||
|
||||
summary {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
justify-self: stretch;
|
||||
margin-block-start: 1rem;
|
||||
padding: 0;
|
||||
|
||||
:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
grid-area: media;
|
||||
gap: 0.5rem;
|
||||
margin-block-start: 1rem;
|
||||
|
||||
img,
|
||||
video {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-card {
|
||||
grid-area: card;
|
||||
transition: transform var(--transition-bezier);
|
||||
margin-block-start: 1rem;
|
||||
width: min(calc(var(--content-width) / 2), 100%);
|
||||
font-weight: var(--font-weight-normal);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: var(--hover);
|
||||
box-shadow: var(--edge-highlight), var(--shadow-raised);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner)
|
||||
var(--rounded-corner-small) var(--rounded-corner-small);
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
|
||||
& + figcaption {
|
||||
border-radius: var(--rounded-corner-small)
|
||||
var(--rounded-corner-small) var(--rounded-corner)
|
||||
var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
transition-duration: var(--transition);
|
||||
transition-property: border-radius, background-color;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 1rem;
|
||||
color: var(--fg-color);
|
||||
font-size: var(--font-size-medium);
|
||||
text-align: start;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
grid-area: interactions;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 1rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.boosts,
|
||||
.faves,
|
||||
.reaction {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.boosts,
|
||||
.faves {
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
border-radius var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
border-radius: rpx(18);
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
vertical-align: rpx(-2);
|
||||
transition: transform var(--transition-bezier);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
border-radius: rpx(18);
|
||||
}
|
||||
}
|
||||
|
||||
.boosts {
|
||||
border-start-end-radius: var(--rounded-corner-small);
|
||||
border-end-end-radius: var(--rounded-corner-small);
|
||||
padding-inline-end: 0.625rem;
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
--icon: var(--icon-repeat);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--purple-bg-1);
|
||||
|
||||
.icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faves {
|
||||
border-start-start-radius: var(--rounded-corner-small);
|
||||
border-end-start-radius: var(--rounded-corner-small);
|
||||
padding-inline-start: 0.625rem;
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
--icon: var(--icon-star);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--yellow-bg-1);
|
||||
|
||||
.icon {
|
||||
transform: rotate(72deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reactions {
|
||||
display: flex;
|
||||
// flex-wrap: nowrap;
|
||||
gap: 0.25rem;
|
||||
margin: -0.5rem -1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
|
||||
.reaction {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
cursor: zoom-in;
|
||||
border: rpx(1) solid var(--bg-muted-2);
|
||||
border-radius: rpx(19);
|
||||
|
||||
&:hover .emoji {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
span {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,19 +2,17 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.deanchor {
|
||||
display: inline;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--fg-muted-2);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition);
|
||||
display: inline;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--fg-muted-2);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color var(--transition), color var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-1);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
.emoji {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
transition: transform var(--transition-bezier);
|
||||
cursor: zoom-in;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
transition: transform var(--transition-bezier);
|
||||
cursor: zoom-in;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
&.big {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
&.big {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,61 +2,61 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.footnotes-list p {
|
||||
margin-block: 0;
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.footnote-reference {
|
||||
display: inline-flex;
|
||||
vertical-align: baseline;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
outline-offset calc(var(--transition-long) * 3),
|
||||
transform var(--transition-bezier);
|
||||
margin-inline-start: 0.25rem;
|
||||
outline-offset: calc(var(--content-width) / 2) !important;
|
||||
border-radius: 0.6875em;
|
||||
background-color: var(--fg-muted-1);
|
||||
// width: 1.375em;
|
||||
line-height: 1.375em;
|
||||
display: inline-flex;
|
||||
vertical-align: baseline;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
outline-offset calc(var(--transition-long) * 3),
|
||||
transform var(--transition-bezier);
|
||||
margin-inline-start: 0.25rem;
|
||||
outline-offset: calc(var(--content-width) / 2) !important;
|
||||
border-radius: 0.6875em;
|
||||
background-color: var(--fg-muted-1);
|
||||
// width: 1.375em;
|
||||
line-height: 1.375em;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
a::after {
|
||||
mask-position: center rpx(18);
|
||||
}
|
||||
}
|
||||
a::after {
|
||||
mask-position: center rpx(18);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:target {
|
||||
animation: none !important;
|
||||
outline-offset: rpx(-3) !important;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
&:target {
|
||||
animation: none !important;
|
||||
outline-offset: rpx(-3) !important;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
border-radius: inherit;
|
||||
padding-inline: rpx(9) rpx(6);
|
||||
color: var(--bg-color);
|
||||
font-size: var(--font-size-small);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
a {
|
||||
flex: 1;
|
||||
border-radius: inherit;
|
||||
padding-inline: rpx(9) rpx(6);
|
||||
color: var(--bg-color);
|
||||
font-size: var(--font-size-small);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
&::after {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-caret-down);
|
||||
display: inline-block;
|
||||
vertical-align: rpx(-7);
|
||||
mask-position: center;
|
||||
mask-size: 1em;
|
||||
transition: mask-position var(--transition);
|
||||
margin-inline-start: 0.25rem;
|
||||
height: rpx(22);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
@include icon(pseudo);
|
||||
--icon: var(--icon-caret-down);
|
||||
display: inline-block;
|
||||
vertical-align: rpx(-7);
|
||||
mask-position: center;
|
||||
mask-size: 1em;
|
||||
transition: mask-position var(--transition);
|
||||
margin-inline-start: 0.25rem;
|
||||
height: rpx(22);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,49 +2,47 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.fuse {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-width: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-width: 30rem;
|
||||
|
||||
.fuse-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--bg-muted-2);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-color);
|
||||
font-size: var(--font-size-medium);
|
||||
transition:
|
||||
border-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
.fuse-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--bg-muted-2);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-color);
|
||||
font-size: var(--font-size-medium);
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
.fuse-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
.fuse-result {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
text-decoration: none;
|
||||
color: var(--fg-color);
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
padding-left var(--transition);
|
||||
.fuse-result {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
text-decoration: none;
|
||||
color: var(--fg-color);
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
padding-left var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
.giallo:has(.giallo-ln) {
|
||||
padding-inline: 0;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.giallo-l {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.giallo-ln {
|
||||
display: inline-block;
|
||||
margin-right: 1ch;
|
||||
min-width: 3ch;
|
||||
user-select: none;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
margin-right: 1ch;
|
||||
min-width: 3ch;
|
||||
user-select: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.icon {
|
||||
@include icon;
|
||||
@include icon;
|
||||
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
}
|
||||
&::before {
|
||||
@include icon(pseudo);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
iframe {
|
||||
&.vimeo-embed,
|
||||
&.youtube-embed {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
&.vimeo-embed,
|
||||
&.youtube-embed {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
.marquee {
|
||||
margin-inline: -1rem;
|
||||
padding-inline: 1rem;
|
||||
overflow: hidden;
|
||||
margin-inline: -1rem;
|
||||
padding-inline: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.overshoot-row > * {
|
||||
animation: marquee-scroll
|
||||
calc((var(--text-width) + var(--container-width)) / 40 * 1s) linear
|
||||
infinite;
|
||||
&.overshoot-row > * {
|
||||
animation: marquee-scroll
|
||||
calc((var(--text-width) + var(--container-width)) / 40 * 1s) linear
|
||||
infinite;
|
||||
|
||||
@keyframes marquee-scroll {
|
||||
0%,
|
||||
10% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@keyframes marquee-scroll {
|
||||
0%,
|
||||
10% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
45%,
|
||||
55% {
|
||||
transform: translateX(
|
||||
calc((var(--container-width) - var(--text-width)) * 1px)
|
||||
);
|
||||
}
|
||||
45%,
|
||||
55% {
|
||||
transform: translateX(
|
||||
calc((var(--container-width) - var(--text-width)) * 1px)
|
||||
);
|
||||
}
|
||||
|
||||
90%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
& > * {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
picture#not-found {
|
||||
display: block;
|
||||
display: block;
|
||||
|
||||
img {
|
||||
width: 8rem;
|
||||
}
|
||||
img {
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img#not-found {
|
||||
width: 8rem;
|
||||
width: 8rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,141 +1,141 @@
|
|||
@use "../citrine/abstracts/functions" as *;
|
||||
|
||||
.pre-container {
|
||||
position: relative;
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
position: relative;
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: border-block-end-color var(--transition);
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
|
||||
border-block-end: rpx(1) solid transparent;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent 50%,
|
||||
var(--bg-muted-neutral-1) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200%;
|
||||
padding: 0.25rem;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: border-block-end-color var(--transition);
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
|
||||
border-block-end: rpx(1) solid transparent;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent 50%,
|
||||
var(--bg-muted-neutral-1) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200%;
|
||||
padding: 0.25rem;
|
||||
|
||||
&:not(.z-l-code),
|
||||
&:not(.z-d-code) {
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--accent-color);
|
||||
&:not(.z-l-code),
|
||||
&:not(.z-d-code) {
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--accent-color);
|
||||
|
||||
button:hover {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-block-end-color: var(--bg-muted-1);
|
||||
&.active {
|
||||
border-block-end-color: var(--bg-muted-1);
|
||||
|
||||
button {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-inline-start: 0.75rem;
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
span {
|
||||
margin-inline-start: 0.75rem;
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
color: inherit;
|
||||
line-height: 0;
|
||||
button {
|
||||
position: relative;
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
color: inherit;
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-neutral-1);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-neutral-1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition:
|
||||
opacity var(--transition-longer),
|
||||
transform var(--transition-bezier-longer);
|
||||
font-size: 1rem;
|
||||
.icon {
|
||||
transition:
|
||||
opacity var(--transition-longer),
|
||||
transform var(--transition-bezier-longer);
|
||||
font-size: 1rem;
|
||||
|
||||
&.copy {
|
||||
--icon: var(--icon-copy);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
&.copy {
|
||||
--icon: var(--icon-copy);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
&.check {
|
||||
--icon: var(--icon-check-square-offset);
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
transform-origin: top right;
|
||||
opacity: 0;
|
||||
inset: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.check {
|
||||
--icon: var(--icon-check-square-offset);
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
transform-origin: top right;
|
||||
opacity: 0;
|
||||
inset: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
animation: active-shimmer var(--transition-long);
|
||||
border-block-end-color: var(--bg-muted-neutral-1);
|
||||
&.active {
|
||||
animation: active-shimmer var(--transition-long);
|
||||
border-block-end-color: var(--bg-muted-neutral-1);
|
||||
|
||||
button {
|
||||
opacity: 1;
|
||||
button {
|
||||
opacity: 1;
|
||||
|
||||
.icon.copy {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
.icon.copy {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon.check {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.icon.check {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes active-shimmer {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes active-shimmer {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,72 +2,70 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.search-fuse {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
|
||||
&-input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
color: var(--fg-muted-2);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
color var(--transition),
|
||||
opacity var(--transition-bezier);
|
||||
opacity: 0.7;
|
||||
}
|
||||
&-icon {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
color: var(--fg-muted-2);
|
||||
pointer-events: none;
|
||||
transition: color var(--transition), opacity var(--transition-bezier);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--bg-muted-2);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-color);
|
||||
font-size: var(--font-size-medium);
|
||||
transition:
|
||||
border-color var(--transition),
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition);
|
||||
&-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--bg-muted-2);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-color);
|
||||
font-size: var(--font-size-medium);
|
||||
transition:
|
||||
border-color var(--transition),
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px var(--accent-bg-1), 0 0 0 4px var(--accent-color);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
&::placeholder {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
&-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
.search-fuse-result {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
text-decoration: none;
|
||||
color: var(--fg-color);
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
padding-left var(--transition);
|
||||
.search-fuse-result {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
text-decoration: none;
|
||||
color: var(--fg-color);
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
padding-left var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,128 +1,124 @@
|
|||
#search-modal {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
transition:
|
||||
visibility var(--transition),
|
||||
opacity var(--transition);
|
||||
inset: 0;
|
||||
background-color: var(--shade-color);
|
||||
padding-block-start: 15vh;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
transition: visibility var(--transition), opacity var(--transition);
|
||||
inset: 0;
|
||||
background-color: var(--shade-color);
|
||||
padding-block-start: 15vh;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
||||
#search-modal-content {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
#search-modal-content {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
transform: var(--hover);
|
||||
backdrop-filter: var(--blur);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transition:
|
||||
border-radius var(--transition),
|
||||
padding var(--transition),
|
||||
max-width var(--transition),
|
||||
transform var(--transition-bezier-longer);
|
||||
margin: -0.5rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 2.25rem 2.25rem 1.75rem 1.75rem;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
max-width: calc(var(--content-width) / 1.5);
|
||||
overflow: hidden;
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
transform: var(--hover);
|
||||
backdrop-filter: var(--blur);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transition:
|
||||
border-radius var(--transition),
|
||||
padding var(--transition),
|
||||
max-width var(--transition),
|
||||
transform var(--transition-bezier-longer);
|
||||
margin: -0.5rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 2.25rem 2.25rem 1.75rem 1.75rem;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
max-width: calc(var(--content-width) / 1.5);
|
||||
overflow: hidden;
|
||||
|
||||
&:has(#search-results:empty) {
|
||||
border-radius: 1.75rem;
|
||||
padding: 0.5rem;
|
||||
max-width: calc(var(--content-width) / 2);
|
||||
}
|
||||
&:has(#search-results:empty) {
|
||||
border-radius: 1.75rem;
|
||||
padding: 0.5rem;
|
||||
max-width: calc(var(--content-width) / 2);
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
#search-input {
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 9999px;
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
#search-input {
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 9999px;
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
|
||||
&:placeholder-shown + div .icon {
|
||||
transform: none;
|
||||
opacity: var(--disabled-opacity);
|
||||
pointer-events: all;
|
||||
}
|
||||
&:placeholder-shown + div .icon {
|
||||
transform: none;
|
||||
opacity: var(--disabled-opacity);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
& + div .icon {
|
||||
position: absolute;
|
||||
transform: translateX(0.5rem);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
cursor: help;
|
||||
inset-block-start: 0.625rem;
|
||||
inset-inline-end: 1rem;
|
||||
pointer-events: none;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
& + div .icon {
|
||||
position: absolute;
|
||||
transform: translateX(0.5rem);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition), transform var(--transition-bezier);
|
||||
cursor: help;
|
||||
inset-block-start: 0.625rem;
|
||||
inset-inline-end: 1rem;
|
||||
pointer-events: none;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
#search-results {
|
||||
display: none;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin: -1rem;
|
||||
padding: 1rem;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
#search-results {
|
||||
display: none;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin: -1rem;
|
||||
padding: 1rem;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
|
||||
.item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.75rem 1rem;
|
||||
.item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&::after {
|
||||
content: " →";
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: " →";
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-block-start: 0.25rem;
|
||||
border-block-start: rpx(1) solid var(--bg-muted-2);
|
||||
padding-block-start: 0.25rem;
|
||||
color: var(--fg-muted-2);
|
||||
span {
|
||||
margin-block-start: 0.25rem;
|
||||
border-block-start: rpx(1) solid var(--bg-muted-2);
|
||||
padding-block-start: 0.25rem;
|
||||
color: var(--fg-muted-2);
|
||||
|
||||
strong {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
strong {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
#skip-to-content {
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 1rem));
|
||||
z-index: 9999;
|
||||
transition:
|
||||
backdrop-filter var(--transition),
|
||||
box-shadow var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
inset-inline-start: 50vw;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.375rem 0.75rem;
|
||||
width: max-content;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 1rem));
|
||||
z-index: 9999;
|
||||
transition:
|
||||
backdrop-filter var(--transition),
|
||||
box-shadow var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
inset-inline-start: 50vw;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.375rem 0.75rem;
|
||||
width: max-content;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus-visible,
|
||||
&:focus {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transform: translateX(-50%) translateY(1rem);
|
||||
backdrop-filter: var(--blur);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
}
|
||||
&:focus-visible,
|
||||
&:focus {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
transform: translateX(-50%) translateY(1rem);
|
||||
backdrop-filter: var(--blur);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,61 +1,61 @@
|
|||
@use "../citrine/abstracts/functions" as *;
|
||||
|
||||
.statement-container {
|
||||
margin: 1rem 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 1rem;
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
margin-block-start: 0.5rem;
|
||||
}
|
||||
& > :nth-child(2) {
|
||||
margin-block-start: 0.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
.title {
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
|
||||
.icon {
|
||||
vertical-align: rpx(-2);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
vertical-align: rpx(-2);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.archive {
|
||||
--accent-color: var(--purple-fg);
|
||||
--accent-highlight: hsla(
|
||||
var(--purple-h),
|
||||
var(--purple-s),
|
||||
var(--purple-l),
|
||||
var(--disabled-opacity)
|
||||
);
|
||||
background-color: var(--purple-bg-1);
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
&.archive {
|
||||
--accent-color: var(--purple-fg);
|
||||
--accent-highlight: hsla(
|
||||
var(--purple-h),
|
||||
var(--purple-s),
|
||||
var(--purple-l),
|
||||
var(--disabled-opacity)
|
||||
);
|
||||
background-color: var(--purple-bg-1);
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
&.disclaimer {
|
||||
--accent-color: var(--red-fg);
|
||||
--accent-highlight: hsla(
|
||||
var(--red-h),
|
||||
var(--red-s),
|
||||
var(--red-l),
|
||||
var(--disabled-opacity)
|
||||
);
|
||||
background-color: var(--red-bg-1);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
&.disclaimer {
|
||||
--accent-color: var(--red-fg);
|
||||
--accent-highlight: hsla(
|
||||
var(--red-h),
|
||||
var(--red-s),
|
||||
var(--red-l),
|
||||
var(--disabled-opacity)
|
||||
);
|
||||
background-color: var(--red-bg-1);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
&.trigger {
|
||||
--accent-color: var(--yellow-fg);
|
||||
--accent-highlight: hsla(
|
||||
var(--yellow-h),
|
||||
var(--yellow-s),
|
||||
var(--yellow-l),
|
||||
var(--disabled-opacity)
|
||||
);
|
||||
background-color: var(--yellow-bg-1);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
&.trigger {
|
||||
--accent-color: var(--yellow-fg);
|
||||
--accent-highlight: hsla(
|
||||
var(--yellow-h),
|
||||
var(--yellow-s),
|
||||
var(--yellow-l),
|
||||
var(--disabled-opacity)
|
||||
);
|
||||
background-color: var(--yellow-bg-1);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,59 @@
|
|||
@use "../citrine/abstracts/functions" as *;
|
||||
|
||||
#tag-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 1rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.25rem;
|
||||
padding-inline-start: 0.75rem;
|
||||
color: var(--fg-muted-1);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1.5rem;
|
||||
text-decoration: none;
|
||||
a {
|
||||
display: flex;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 1rem;
|
||||
background-color: var(--bg-muted-1);
|
||||
padding: 0.25rem;
|
||||
padding-inline-start: 0.75rem;
|
||||
color: var(--fg-muted-1);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
}
|
||||
&::before {
|
||||
content: "#";
|
||||
}
|
||||
|
||||
.counter {
|
||||
transition: inherit;
|
||||
margin-inline-start: 0.375rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: inherit;
|
||||
background-color: inherit;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.counter {
|
||||
transition: inherit;
|
||||
margin-inline-start: 0.375rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: inherit;
|
||||
background-color: inherit;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,47 +4,47 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:hover .zola-anchor {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover .zola-anchor {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:has(.zola-anchor) {
|
||||
position: relative;
|
||||
}
|
||||
&:has(.zola-anchor) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.zola-anchor {
|
||||
position: absolute;
|
||||
transform: translateX(0.25em);
|
||||
opacity: 0;
|
||||
transition:
|
||||
color var(--transition),
|
||||
opacity var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
inset-inline-start: -1.25em;
|
||||
padding-inline-end: 0.25em;
|
||||
color: var(--fg-muted-1);
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
transform: translateX(0.25em);
|
||||
opacity: 0;
|
||||
transition:
|
||||
color var(--transition),
|
||||
opacity var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
inset-inline-start: -1.25em;
|
||||
padding-inline-end: 0.25em;
|
||||
color: var(--fg-muted-1);
|
||||
line-height: 1;
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:target .zola-anchor {
|
||||
transform: none;
|
||||
opacity: var(--disabled-opacity);
|
||||
transform: none;
|
||||
opacity: var(--disabled-opacity);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,55 @@
|
|||
// Based on https://github.com/welpo/tabi/blob/68c35b02f8c09e21ecff48f61bad6da3d96ce337/sass/parts/_zola-error.scss
|
||||
|
||||
body > div:last-child:has(div:last-child[style]:not([class]):not([id])) {
|
||||
z-index: 9999 !important;
|
||||
background-color: var(--shade-color) !important;
|
||||
z-index: 9999 !important;
|
||||
background-color: var(--shade-color) !important;
|
||||
}
|
||||
|
||||
body > div:last-child > div:last-child[style]:not([class]):not([id]) {
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: calc(var(--rounded-corner) + 1rem) !important;
|
||||
background-color: hsla(
|
||||
var(--red-h),
|
||||
calc(var(--red-s) - var(--red-s) * 0.7),
|
||||
calc(var(--red-l) + (100% - var(--red-l)) * 0.9),
|
||||
var(--dim-opacity)
|
||||
) !important;
|
||||
padding: 1rem !important;
|
||||
width: fit-content;
|
||||
max-width: calc(100% - 2rem);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
backdrop-filter: var(--blur);
|
||||
filter: none !important;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: calc(var(--rounded-corner) + 1rem) !important;
|
||||
background-color: hsla(
|
||||
var(--red-h),
|
||||
calc(var(--red-s) - var(--red-s) * 0.7),
|
||||
calc(var(--red-l) + (100% - var(--red-l)) * 0.9),
|
||||
var(--dim-opacity)
|
||||
) !important;
|
||||
padding: 1rem !important;
|
||||
width: fit-content;
|
||||
max-width: calc(100% - 2rem);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
backdrop-filter: var(--blur);
|
||||
filter: none !important;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
& {
|
||||
background-color: hsla(
|
||||
var(--red-h),
|
||||
calc(var(--red-s) - var(--red-s) * 0.6),
|
||||
calc(var(--red-l) - var(--red-l) * 0.8),
|
||||
var(--dim-opacity)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
& {
|
||||
background-color: hsla(
|
||||
var(--red-h),
|
||||
calc(var(--red-s) - var(--red-s) * 0.6),
|
||||
calc(var(--red-l) - var(--red-l) * 0.8),
|
||||
var(--dim-opacity)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body
|
||||
> div:last-child
|
||||
> div:last-child[style]:not([class]):not([id])
|
||||
> p[style]:first-child {
|
||||
margin-block-end: 1rem !important;
|
||||
color: var(--red-fg) !important;
|
||||
font-weight: var(--font-weight-semi-bold) !important;
|
||||
font-size: var(--font-size-large) !important;
|
||||
> div:last-child
|
||||
> div:last-child[style]:not([class]):not([id])
|
||||
> p[style]:first-child {
|
||||
margin-block-end: 1rem !important;
|
||||
color: var(--red-fg) !important;
|
||||
font-weight: var(--font-weight-semi-bold) !important;
|
||||
font-size: var(--font-size-large) !important;
|
||||
}
|
||||
|
||||
body
|
||||
> div:last-child
|
||||
> div:last-child[style]:not([class]):not([id])
|
||||
> pre[style]:last-child {
|
||||
border-radius: var(--rounded-corner) !important;
|
||||
background-color: var(--red-bg-1) !important;
|
||||
padding: 0.75rem 1rem !important;
|
||||
color: var(--red-fg) !important;
|
||||
font-weight: var(--font-weight-normal) !important;
|
||||
> div:last-child
|
||||
> div:last-child[style]:not([class]):not([id])
|
||||
> pre[style]:last-child {
|
||||
border-radius: var(--rounded-corner) !important;
|
||||
background-color: var(--red-bg-1) !important;
|
||||
padding: 0.75rem 1rem !important;
|
||||
color: var(--red-fg) !important;
|
||||
font-weight: var(--font-weight-normal) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,51 +2,51 @@ $commissioner-version: "1.012.1";
|
|||
$commit-mono-version: "1.143";
|
||||
|
||||
:root {
|
||||
--font-sans-serif: "Commissioner";
|
||||
--font-monospace: "Commit Mono";
|
||||
--font-sans-serif: "Commissioner";
|
||||
--font-monospace: "Commit Mono";
|
||||
}
|
||||
|
||||
// Commissioner
|
||||
@font-face {
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}")
|
||||
format("woff2");
|
||||
font-family: "Commissioner";
|
||||
font-display: swap;
|
||||
// Fix vertical alignment,
|
||||
// See https://github.com/kosbarts/Commissioner/issues/55
|
||||
ascent-override: 96.3%;
|
||||
descent-override: 25%;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}")
|
||||
format("woff2");
|
||||
font-family: "Commissioner";
|
||||
font-display: swap;
|
||||
// Fix vertical alignment,
|
||||
// See https://github.com/kosbarts/Commissioner/issues/55
|
||||
ascent-override: 96.3%;
|
||||
descent-override: 25%;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}")
|
||||
format("woff2");
|
||||
font-family: "Commissioner";
|
||||
font-display: swap;
|
||||
font-variation-settings: "slnt" -12;
|
||||
// Ditto
|
||||
ascent-override: 96.3%;
|
||||
descent-override: 25%;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commissioner.woff2?v=#{$commissioner-version}")
|
||||
format("woff2");
|
||||
font-family: "Commissioner";
|
||||
font-display: swap;
|
||||
font-variation-settings: "slnt" -12;
|
||||
// Ditto
|
||||
ascent-override: 96.3%;
|
||||
descent-override: 25%;
|
||||
}
|
||||
|
||||
// Commit Mono
|
||||
@font-face {
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2");
|
||||
font-family: "Commit Mono";
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2");
|
||||
font-family: "Commit Mono";
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2");
|
||||
font-family: "Commit Mono";
|
||||
font-display: swap;
|
||||
font-variation-settings: "ital" 1;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
src: url("/fonts/commit-mono.woff2?v=#{$commit-mono-version}") format("woff2");
|
||||
font-family: "Commit Mono";
|
||||
font-display: swap;
|
||||
font-variation-settings: "ital" 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,139 +2,137 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
#site-footer {
|
||||
--padding: 1rem;
|
||||
display: flex;
|
||||
grid-area: footer;
|
||||
gap: 1rem;
|
||||
margin-block: 3.25rem 1rem;
|
||||
border-block-start: rpx(1) solid var(--bg-muted-2);
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: calc(var(--content-width) + var(--padding) * 2);
|
||||
--padding: 1rem;
|
||||
display: flex;
|
||||
grid-area: footer;
|
||||
gap: 1rem;
|
||||
margin-block: 3.25rem 1rem;
|
||||
border-block-start: rpx(1) solid var(--bg-muted-2);
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: calc(var(--content-width) + var(--padding) * 2);
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
& > div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
text-align: end;
|
||||
&:nth-of-type(2) {
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
text-align: end;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
align-items: normal;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
align-items: normal;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.external::after {
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
a.external::after {
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
@include chip;
|
||||
display: inline-block;
|
||||
line-height: 1.5rem;
|
||||
.link {
|
||||
@include chip;
|
||||
display: inline-block;
|
||||
line-height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
// IMO it's pretty cute
|
||||
.webrings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
}
|
||||
// IMO it's pretty cute
|
||||
.webrings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.webring {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
.webring {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
|
||||
.random,
|
||||
.previous,
|
||||
.next {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 9999px;
|
||||
padding: 0.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.random,
|
||||
.previous,
|
||||
.next {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 9999px;
|
||||
padding: 0.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: var(--fg-muted-1);
|
||||
font-size: var(--font-size-xx-small);
|
||||
font-family: var(--font-monospace);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.timestamp {
|
||||
color: var(--fg-muted-1);
|
||||
font-size: var(--font-size-xx-small);
|
||||
font-family: var(--font-monospace);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
.socials {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
justify-content: normal;
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
justify-content: normal;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
li {
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
transition:
|
||||
color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
height: fit-content;
|
||||
color: var(--fg-muted-1);
|
||||
a {
|
||||
display: flex;
|
||||
transition: color var(--transition), transform var(--transition-bezier);
|
||||
height: fit-content;
|
||||
color: var(--fg-muted-1);
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
fill: currentColor;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.full-bleed {
|
||||
transform: translateX(-50%);
|
||||
margin-inline-start: 50%;
|
||||
width: calc(100vw - var(--sidebar-width));
|
||||
transform: translateX(-50%);
|
||||
margin-inline-start: 50%;
|
||||
width: calc(100vw - var(--sidebar-width));
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
width: calc(100vw - 3.5rem);
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
width: calc(100vw - 3.5rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
body {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-template-columns: var(--sidebar-width) 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
"sidebar banner"
|
||||
"sidebar main "
|
||||
"sidebar footer";
|
||||
justify-items: center;
|
||||
transition: grid-template-columns var(--transition);
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-template-columns: var(--sidebar-width) 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
"sidebar banner"
|
||||
"sidebar main "
|
||||
"sidebar footer";
|
||||
justify-items: center;
|
||||
transition: grid-template-columns var(--transition);
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
grid-template-columns: 0 1fr;
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
grid-template-columns: 0 1fr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,346 +2,344 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
#site-header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
grid-area: header;
|
||||
// height: 3rem;
|
||||
justify-content: space-between;
|
||||
// flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
z-index: 2;
|
||||
// height: 3.75rem;
|
||||
inset-block-start: 0;
|
||||
// padding: 0.5rem 0.75rem;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
grid-area: header;
|
||||
// height: 3rem;
|
||||
justify-content: space-between;
|
||||
// flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
z-index: 2;
|
||||
// height: 3.75rem;
|
||||
inset-block-start: 0;
|
||||
// padding: 0.5rem 0.75rem;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@include easing-mask(bottom);
|
||||
inset-block-end: -100%;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@include easing-mask(bottom);
|
||||
inset-block-end: -100%;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: -2;
|
||||
backdrop-filter: var(--blur);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
}
|
||||
&::before {
|
||||
z-index: -2;
|
||||
backdrop-filter: var(--blur);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
}
|
||||
|
||||
&::after {
|
||||
z-index: -1;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
&::after {
|
||||
z-index: -1;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-inline: 0.75rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 2rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.title {
|
||||
margin-inline: 0.75rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--fg-muted-2);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 2rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
// margin-inline-start: auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 1.125rem;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.25rem;
|
||||
list-style: none;
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
// margin-inline-start: auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 1.125rem;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.25rem;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
flex: 0;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
li {
|
||||
flex: 0;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
& > li {
|
||||
height: fit-content;
|
||||
line-height: 0;
|
||||
}
|
||||
& > li {
|
||||
height: fit-content;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
details {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
line-height: inherit;
|
||||
button,
|
||||
details {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
line-height: inherit;
|
||||
|
||||
.icon {
|
||||
margin-inline-end: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
margin-inline-end: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
summary {
|
||||
border-radius: 50%;
|
||||
padding: 0.375rem;
|
||||
button,
|
||||
summary {
|
||||
border-radius: 50%;
|
||||
padding: 0.375rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
details {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
button {
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
|
||||
summary {
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
summary {
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-block-end: 0;
|
||||
details {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-block-end: 0;
|
||||
|
||||
&::details-content {
|
||||
block-size: auto;
|
||||
}
|
||||
&::details-content {
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
&::details-content {
|
||||
block-size: auto;
|
||||
}
|
||||
&[open] {
|
||||
&::details-content {
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
summary {
|
||||
color: var(--fg-muted-1);
|
||||
summary {
|
||||
color: var(--fg-muted-1);
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (block-size: calc-size(auto, size)) {
|
||||
summary ~ * {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports not (block-size: calc-size(auto, size)) {
|
||||
summary ~ * {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons .dropdown {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
transform-origin: top right;
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
animation: expand-up-right var(--transition-bezier);
|
||||
inset-block-start: calc(100% + 0.75rem);
|
||||
inset-inline-end: -0.25rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: calc(var(--rounded-corner) + 0.25rem);
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.25rem;
|
||||
width: max-content;
|
||||
min-width: 8rem;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
transform-origin: top right;
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
animation: expand-up-right var(--transition-bezier);
|
||||
inset-block-start: calc(100% + 0.75rem);
|
||||
inset-inline-end: -0.25rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: calc(var(--rounded-corner) + 0.25rem);
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.25rem;
|
||||
width: max-content;
|
||||
min-width: 8rem;
|
||||
list-style: none;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: top left;
|
||||
animation: expand-up-left var(--transition-bezier);
|
||||
}
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: top left;
|
||||
animation: expand-up-left var(--transition-bezier);
|
||||
}
|
||||
|
||||
li {
|
||||
flex: 1;
|
||||
}
|
||||
li {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: transparent;
|
||||
padding: 0.375rem 0.75rem;
|
||||
width: 100%;
|
||||
a {
|
||||
box-shadow: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: transparent;
|
||||
padding: 0.375rem 0.75rem;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1) !important;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-sidebar-controls {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 0.25rem;
|
||||
transition:
|
||||
width var(--transition),
|
||||
visibility var(--transition);
|
||||
margin-block: 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 1.125rem;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.25rem;
|
||||
height: fit-content;
|
||||
line-height: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 0.25rem;
|
||||
transition: width var(--transition), visibility var(--transition);
|
||||
margin-block: 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 1.125rem;
|
||||
background-color: var(--glass-bg-1);
|
||||
padding: 0.25rem;
|
||||
height: fit-content;
|
||||
line-height: 0;
|
||||
list-style: none;
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
width: 2.25rem;
|
||||
@media only screen and (max-width: 960px) {
|
||||
width: 2.25rem;
|
||||
|
||||
&:has(#expand-sidebar:checked) {
|
||||
width: 6.25rem;
|
||||
&:has(#expand-sidebar:checked) {
|
||||
width: 6.25rem;
|
||||
|
||||
#site-sidebar-modes {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
#site-sidebar-modes {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-block: 0;
|
||||
padding-inline-start: 0;
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
padding: 0.375rem;
|
||||
height: fit-content;
|
||||
color: var(--fg-muted-1);
|
||||
line-height: 0;
|
||||
label {
|
||||
display: inline-block;
|
||||
transition:
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
transform var(--transition-bezier);
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
padding: 0.375rem;
|
||||
height: fit-content;
|
||||
color: var(--fg-muted-1);
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--bg-muted-1);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
& + label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
input[type="radio"] {
|
||||
& + label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
@include gradient-fill;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
transition:
|
||||
opacity var(--transition),
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition);
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
@include gradient-fill;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
transition:
|
||||
opacity var(--transition),
|
||||
box-shadow var(--transition),
|
||||
background-color var(--transition);
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
color: var(--contrast-color);
|
||||
&:checked + label {
|
||||
color: var(--contrast-color);
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
&:hover::before {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&:focus-visible + label {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&:focus-visible + label {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
&:focus + label {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
&:focus + label {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#expand-sidebar-li {
|
||||
display: none;
|
||||
#expand-sidebar-li {
|
||||
display: none;
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-sidebar-modes {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
transform-origin: left;
|
||||
transition:
|
||||
visibility var(--transition),
|
||||
opacity var(--transition),
|
||||
transform var(--transition);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
transform-origin: left;
|
||||
transition:
|
||||
visibility var(--transition),
|
||||
opacity var(--transition),
|
||||
transform var(--transition);
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
transform: translateX(-2.25rem);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
transform: translateX(-2.25rem);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,59 @@
|
|||
#main-content {
|
||||
--padding: 1rem;
|
||||
grid-area: main;
|
||||
transform-origin: 50% 50vh;
|
||||
animation: fade-in-zoom var(--transition-bezier-longer);
|
||||
margin-block-start: 3.25rem;
|
||||
padding-inline: 1rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: calc(var(--content-width) + var(--padding) * 2);
|
||||
--padding: 1rem;
|
||||
grid-area: main;
|
||||
transform-origin: 50% 50vh;
|
||||
animation: fade-in-zoom var(--transition-bezier-longer);
|
||||
margin-block-start: 3.25rem;
|
||||
padding-inline: 1rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: calc(var(--content-width) + var(--padding) * 2);
|
||||
|
||||
@supports (transform-origin: 50% 50dvh) {
|
||||
transform-origin: 50% 50dvh;
|
||||
}
|
||||
@supports (transform-origin: 50% 50dvh) {
|
||||
transform-origin: 50% 50dvh;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
& > :first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
& > :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
@keyframes fade-in-zoom {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fade-in-zoom {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Don't play animation when jumping to section
|
||||
:target ~ #main-content {
|
||||
animation-name: none;
|
||||
animation-name: none;
|
||||
}
|
||||
|
||||
// Loading animation when going up in the sidebar
|
||||
#↑:target ~ #main-content,
|
||||
#up:target ~ #main-content {
|
||||
animation-name: slide-in-up-longer;
|
||||
animation-name: slide-in-up-longer;
|
||||
}
|
||||
|
||||
// Loading animation when going down in the sidebar
|
||||
#↓:target ~ #main-content,
|
||||
#down:target ~ #main-content {
|
||||
animation-name: slide-in-down-longer;
|
||||
animation-name: slide-in-down-longer;
|
||||
}
|
||||
|
||||
// Loading animation when going to the previous article
|
||||
#←:target ~ #main-content,
|
||||
#left:target ~ #main-content {
|
||||
animation-name: slide-in-left-longer;
|
||||
animation-name: slide-in-left-longer;
|
||||
}
|
||||
|
||||
// Loading animation when going to the next article
|
||||
#→:target ~ #main-content,
|
||||
#right:target ~ #main-content {
|
||||
animation-name: slide-in-right-longer;
|
||||
animation-name: slide-in-right-longer;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -2,43 +2,43 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
#site-sidebar-header {
|
||||
transform-origin: rpx(18) 50%;
|
||||
border-radius: var(--rounded-corner);
|
||||
transform-origin: rpx(18) 50%;
|
||||
border-radius: var(--rounded-corner);
|
||||
|
||||
img,
|
||||
.icon {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
img,
|
||||
.icon {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 0.375rem;
|
||||
}
|
||||
.icon {
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
div {
|
||||
gap: 0;
|
||||
line-height: 1.125;
|
||||
}
|
||||
div {
|
||||
gap: 0;
|
||||
line-height: 1.125;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-nav {
|
||||
a {
|
||||
transform-origin: rpx(18) 50%;
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 0.25rem;
|
||||
a {
|
||||
transform-origin: rpx(18) 50%;
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 0.25rem;
|
||||
|
||||
&.new .icon::after {
|
||||
inset-block-start: rpx(-2);
|
||||
inset-inline-end: rpx(-2);
|
||||
}
|
||||
}
|
||||
&.new .icon::after {
|
||||
inset-block-start: rpx(-2);
|
||||
inset-inline-end: rpx(-2);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
padding: 0.375rem;
|
||||
}
|
||||
.icon {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
padding: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
@use "../citrine/abstracts/functions" as *;
|
||||
|
||||
:root {
|
||||
--color-opacity-1: 0.15;
|
||||
--color-opacity-2: 0.25;
|
||||
--edge-highlight: 0 0 0 transparent;
|
||||
--shadow: 0 0 0 transparent;
|
||||
--shadow-raised: 0 0 0 transparent;
|
||||
--shadow-glass: 0 0 0 transparent;
|
||||
--shadow-glow: 0 0 0 transparent;
|
||||
--color-opacity-1: 0.15;
|
||||
--color-opacity-2: 0.25;
|
||||
--edge-highlight: 0 0 0 transparent;
|
||||
--shadow: 0 0 0 transparent;
|
||||
--shadow-raised: 0 0 0 transparent;
|
||||
--shadow-glass: 0 0 0 transparent;
|
||||
--shadow-glow: 0 0 0 transparent;
|
||||
}
|
||||
|
||||
.buttons .suggested,
|
||||
#site-nav a.active .icon {
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
background-color: var(--accent-color);
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
background-color: var(--accent-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.buttons .suggested:hover {
|
||||
opacity: var(--dim-opacity);
|
||||
opacity: var(--dim-opacity);
|
||||
}
|
||||
|
||||
.crt {
|
||||
outline: rpx(1) solid var(--bg-muted-2);
|
||||
outline: rpx(1) solid var(--bg-muted-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
@use "../citrine/abstracts/mixins" as *;
|
||||
|
||||
.article-details .tags {
|
||||
gap: 0.25rem;
|
||||
margin-block-end: 0 !important;
|
||||
gap: 0.25rem;
|
||||
margin-block-end: 0 !important;
|
||||
|
||||
a {
|
||||
@include chip;
|
||||
display: flex;
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
line-height: 1.5rem;
|
||||
a {
|
||||
@include chip;
|
||||
display: flex;
|
||||
color: var(--fg-muted-1);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
line-height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-muted-2);
|
||||
color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,29 +2,29 @@
|
|||
@use "../citrine/abstracts/functions" as *;
|
||||
|
||||
#site-nav {
|
||||
a,
|
||||
label,
|
||||
button,
|
||||
summary {
|
||||
outline: rpx(1) solid var(--bg-muted-2);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-muted-2),
|
||||
var(--bg-muted-1) 50%,
|
||||
transparent 50%,
|
||||
var(--bg-muted-2)
|
||||
);
|
||||
a,
|
||||
label,
|
||||
button,
|
||||
summary {
|
||||
outline: rpx(1) solid var(--bg-muted-2);
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-muted-2),
|
||||
var(--bg-muted-1) 50%,
|
||||
transparent 50%,
|
||||
var(--bg-muted-2)
|
||||
);
|
||||
|
||||
.icon {
|
||||
background-image: conic-gradient(
|
||||
var(--bg-muted-2),
|
||||
var(--bg-muted-1) 33%,
|
||||
transparent,
|
||||
var(--bg-muted-2) 66%,
|
||||
transparent,
|
||||
var(--bg-muted-2)
|
||||
);
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
background-image: conic-gradient(
|
||||
var(--bg-muted-2),
|
||||
var(--bg-muted-1) 33%,
|
||||
transparent,
|
||||
var(--bg-muted-2) 66%,
|
||||
transparent,
|
||||
var(--bg-muted-2)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
const audioButtons = document.querySelectorAll(".audio");
|
||||
|
||||
audioButtons.forEach((button) => {
|
||||
button.addEventListener("click", (event) => playAudio(button.dataset.audio));
|
||||
button.addEventListener("click", (event) => playAudio(button.dataset.audio));
|
||||
});
|
||||
|
||||
function playAudio(url) {
|
||||
new Audio(url).play();
|
||||
new Audio(url).play();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
const closable = document.querySelectorAll("details.closable");
|
||||
|
||||
closable.forEach((detail) => {
|
||||
detail.addEventListener("toggle", () => {
|
||||
if (detail.open) setTargetDetail(detail);
|
||||
});
|
||||
detail.addEventListener("toggle", () => {
|
||||
if (detail.open) setTargetDetail(detail);
|
||||
});
|
||||
});
|
||||
|
||||
function setTargetDetail(targetDetail) {
|
||||
closable.forEach((detail) => {
|
||||
if (detail !== targetDetail) {
|
||||
detail.open = false;
|
||||
}
|
||||
});
|
||||
closable.forEach((detail) => {
|
||||
if (detail !== targetDetail) {
|
||||
detail.open = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("click", function (event) {
|
||||
const isClickInsideDetail = [...closable].some((detail) =>
|
||||
detail.contains(event.target),
|
||||
);
|
||||
const isClickInsideDetail = [...closable].some((detail) =>
|
||||
detail.contains(event.target),
|
||||
);
|
||||
|
||||
if (!isClickInsideDetail) {
|
||||
closable.forEach((detail) => {
|
||||
detail.open = false;
|
||||
});
|
||||
}
|
||||
if (!isClickInsideDetail) {
|
||||
closable.forEach((detail) => {
|
||||
detail.open = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const expandSidebar = document.getElementById("expand-sidebar");
|
||||
const mainContent = document.getElementById("main-content");
|
||||
|
||||
mainContent.addEventListener("click", () => {
|
||||
if (expandSidebar.checked) expandSidebar.checked = false;
|
||||
if (expandSidebar.checked) expandSidebar.checked = false;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
const main = document.querySelector("#main-content");
|
||||
|
||||
main.addEventListener("animationend", () => {
|
||||
const hash = decodeURIComponent(location.hash);
|
||||
if (
|
||||
["#↑", "#↓", "#←", "#→", "#up", "#down", "#left", "#right"].includes(hash)
|
||||
) {
|
||||
history.replaceState(null, "", " ");
|
||||
}
|
||||
const hash = decodeURIComponent(location.hash);
|
||||
if (
|
||||
["#↑", "#↓", "#←", "#→", "#up", "#down", "#left", "#right"].includes(hash)
|
||||
) {
|
||||
history.replaceState(null, "", " ");
|
||||
}
|
||||
});
|
||||
|
|
|
|||
1928
scripts/fuse.js
1928
scripts/fuse.js
File diff suppressed because one or more lines are too long
|
|
@ -1,25 +1,25 @@
|
|||
function updateMarquees() {
|
||||
document.querySelectorAll(".marquee").forEach((container) => {
|
||||
const text = container.firstElementChild;
|
||||
if (!text) return;
|
||||
document.querySelectorAll(".marquee").forEach((container) => {
|
||||
const text = container.firstElementChild;
|
||||
if (!text) return;
|
||||
|
||||
const style = getComputedStyle(container);
|
||||
const paddingLeft = parseFloat(style.paddingLeft);
|
||||
const paddingRight = parseFloat(style.paddingRight);
|
||||
const style = getComputedStyle(container);
|
||||
const paddingLeft = parseFloat(style.paddingLeft);
|
||||
const paddingRight = parseFloat(style.paddingRight);
|
||||
|
||||
const containerInnerWidth =
|
||||
container.clientWidth - paddingLeft - paddingRight;
|
||||
const containerInnerWidth =
|
||||
container.clientWidth - paddingLeft - paddingRight;
|
||||
|
||||
const textWidth = text.offsetWidth;
|
||||
const textWidth = text.offsetWidth;
|
||||
|
||||
text.style.setProperty("--text-width", `${textWidth}`);
|
||||
text.style.setProperty("--container-width", `${containerInnerWidth}`);
|
||||
text.style.setProperty("--text-width", `${textWidth}`);
|
||||
text.style.setProperty("--container-width", `${containerInnerWidth}`);
|
||||
|
||||
container.classList.toggle(
|
||||
"overshoot-row",
|
||||
textWidth > containerInnerWidth,
|
||||
);
|
||||
});
|
||||
container.classList.toggle(
|
||||
"overshoot-row",
|
||||
textWidth > containerInnerWidth,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("load", updateMarquees);
|
||||
|
|
|
|||
|
|
@ -3,21 +3,21 @@ const items = document.querySelectorAll(".music .carousel > li");
|
|||
const links = document.querySelectorAll(".music-paginator li a");
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
links.forEach((a) => a.classList.remove("active"));
|
||||
const active = document.querySelector(
|
||||
`.music-paginator a[href="#${entry.target.id}"]`,
|
||||
);
|
||||
active?.classList.add("active");
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
root: carousel,
|
||||
threshold: 0.6,
|
||||
},
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
links.forEach((a) => a.classList.remove("active"));
|
||||
const active = document.querySelector(
|
||||
`.music-paginator a[href="#${entry.target.id}"]`,
|
||||
);
|
||||
active?.classList.add("active");
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
root: carousel,
|
||||
threshold: 0.6,
|
||||
},
|
||||
);
|
||||
|
||||
items.forEach((item) => observer.observe(item));
|
||||
|
|
|
|||
|
|
@ -3,176 +3,188 @@ let searchSetup = false;
|
|||
let fuse;
|
||||
|
||||
async function initIndex() {
|
||||
if (searchSetup) return;
|
||||
if (searchSetup) return;
|
||||
|
||||
let data;
|
||||
if (typeof window.searchIndex !== "undefined") {
|
||||
data = window.searchIndex;
|
||||
} else {
|
||||
const response = await fetch(
|
||||
`/search_index.${document.documentElement.lang}.json`,
|
||||
);
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
data = await response.json();
|
||||
}
|
||||
let data;
|
||||
if (typeof window.searchIndex !== "undefined") {
|
||||
data = window.searchIndex;
|
||||
} else {
|
||||
const response = await fetch(
|
||||
`/search_index.${document.documentElement.lang}.json`,
|
||||
);
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
data = await response.json();
|
||||
}
|
||||
|
||||
const options = {
|
||||
includeScore: false,
|
||||
includeMatches: true,
|
||||
ignoreLocation: true,
|
||||
threshold: 0.15,
|
||||
keys: [
|
||||
{ name: "title", weight: 3 },
|
||||
{ name: "description", weight: 2 },
|
||||
{ name: "body", weight: 1 },
|
||||
],
|
||||
};
|
||||
const options = {
|
||||
includeScore: false,
|
||||
includeMatches: true,
|
||||
ignoreLocation: true,
|
||||
threshold: 0.15,
|
||||
keys: [
|
||||
{ name: "title", weight: 3 },
|
||||
{ name: "description", weight: 2 },
|
||||
{ name: "body", weight: 1 },
|
||||
],
|
||||
};
|
||||
|
||||
fuse = new Fuse(data, options);
|
||||
searchSetup = true;
|
||||
fuse = new Fuse(data, options);
|
||||
searchSetup = true;
|
||||
|
||||
console.log("Search index initialized successfully");
|
||||
console.log("Search index initialized successfully");
|
||||
}
|
||||
|
||||
function debounce(actual_fn, wait) {
|
||||
let timeoutId;
|
||||
let timeoutId;
|
||||
|
||||
return (...args) => {
|
||||
clearTimeout(timeoutId);
|
||||
return (...args) => {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
actual_fn(...args);
|
||||
}, wait);
|
||||
};
|
||||
timeoutId = setTimeout(() => {
|
||||
actual_fn(...args);
|
||||
}, wait);
|
||||
};
|
||||
}
|
||||
|
||||
function initSearch() {
|
||||
const searchModal = document.getElementById("search-modal"); // Full-screen modal
|
||||
const searchModalContent = document.getElementById("search-modal-content"); // Actual modal box
|
||||
const searchInput = document.getElementById("search-input"); // Search input
|
||||
const searchResults = document.getElementById("search-results"); // Search results
|
||||
const searchButton = document.getElementById("search"); // Search button
|
||||
const MAX_ITEMS = 10;
|
||||
const MAX_RESULTS = 4;
|
||||
const searchModal = document.getElementById("search-modal"); // Full-screen modal
|
||||
const searchModalContent = document.getElementById("search-modal-content"); // Actual modal box
|
||||
const searchInput = document.getElementById("search-input"); // Search input
|
||||
const searchResults = document.getElementById("search-results"); // Search results
|
||||
const searchButton = document.getElementById("search"); // Search button
|
||||
const MAX_ITEMS = 10;
|
||||
const MAX_RESULTS = 4;
|
||||
|
||||
let currentTerm = "";
|
||||
let currentTerm = "";
|
||||
|
||||
// Open search modal when clicking the search button
|
||||
if (searchButton) {
|
||||
searchButton.addEventListener("click", function () {
|
||||
searchModal.classList.add("active");
|
||||
initIndex();
|
||||
searchModal.addEventListener(
|
||||
"transitionend",
|
||||
function handler() {
|
||||
searchInput.focus();
|
||||
searchModal.removeEventListener("transitionend", handler);
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
});
|
||||
}
|
||||
// Open search modal when clicking the search button
|
||||
if (searchButton) {
|
||||
searchButton.addEventListener("click", function () {
|
||||
searchModal.classList.add("active");
|
||||
initIndex();
|
||||
searchModal.addEventListener(
|
||||
"transitionend",
|
||||
function handler() {
|
||||
searchInput.focus();
|
||||
searchModal.removeEventListener("transitionend", handler);
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// Open search modal on "/" key press
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (
|
||||
event.key === "/" &&
|
||||
document.activeElement.tagName !== "INPUT" &&
|
||||
document.activeElement.tagName !== "TEXTAREA"
|
||||
) {
|
||||
event.preventDefault();
|
||||
initIndex();
|
||||
searchModal.classList.add("active");
|
||||
searchModal.addEventListener(
|
||||
"transitionend",
|
||||
function handler() {
|
||||
searchInput.focus();
|
||||
searchModal.removeEventListener("transitionend", handler);
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
}
|
||||
});
|
||||
// Open search modal on "/" key press
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (
|
||||
event.key === "/" &&
|
||||
document.activeElement.tagName !== "INPUT" &&
|
||||
document.activeElement.tagName !== "TEXTAREA"
|
||||
) {
|
||||
event.preventDefault();
|
||||
initIndex();
|
||||
searchModal.classList.add("active");
|
||||
searchModal.addEventListener(
|
||||
"transitionend",
|
||||
function handler() {
|
||||
searchInput.focus();
|
||||
searchModal.removeEventListener("transitionend", handler);
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Close search modal on Escape key
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
searchModal.classList.remove("active");
|
||||
}
|
||||
});
|
||||
// Close search modal on Escape key
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
searchModal.classList.remove("active");
|
||||
}
|
||||
});
|
||||
|
||||
// Close search modal when clicking outside search-modal-content
|
||||
searchModal.addEventListener("click", function (e) {
|
||||
if (!searchModalContent.contains(e.target)) {
|
||||
searchModal.classList.remove("active");
|
||||
}
|
||||
});
|
||||
// Close search modal when clicking outside search-modal-content
|
||||
searchModal.addEventListener("click", function (e) {
|
||||
if (!searchModalContent.contains(e.target)) {
|
||||
searchModal.classList.remove("active");
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent clicks inside modal content from closing it
|
||||
searchModalContent.addEventListener("click", function (e) {
|
||||
e.stopPropagation(); // Stops event from reaching searchModal click handler
|
||||
});
|
||||
// Prevent clicks inside modal content from closing it
|
||||
searchModalContent.addEventListener("click", function (e) {
|
||||
e.stopPropagation(); // Stops event from reaching searchModal click handler
|
||||
});
|
||||
|
||||
// Search input event
|
||||
searchInput.addEventListener(
|
||||
"keyup",
|
||||
debounce(async function () {
|
||||
var term = searchInput.value.trim();
|
||||
if (term === currentTerm) return;
|
||||
// Search input event
|
||||
searchInput.addEventListener(
|
||||
"keyup",
|
||||
debounce(async function () {
|
||||
var term = searchInput.value.trim();
|
||||
if (term === currentTerm) return;
|
||||
|
||||
searchResults.style.display = term === "" ? "none" : "flex";
|
||||
searchResults.innerHTML = ""; // Clear previous results
|
||||
currentTerm = term;
|
||||
if (term === "") return;
|
||||
searchResults.style.display = term === "" ? "none" : "flex";
|
||||
searchResults.innerHTML = ""; // Clear previous results
|
||||
currentTerm = term;
|
||||
if (term === "") return;
|
||||
|
||||
await initIndex();
|
||||
var results = fuse.search(term, { limit: MAX_ITEMS });
|
||||
if (results.length === 0) {
|
||||
searchResults.style.display = "none";
|
||||
return;
|
||||
}
|
||||
await initIndex();
|
||||
var results = fuse.search(term, { limit: MAX_ITEMS });
|
||||
if (results.length === 0) {
|
||||
searchResults.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
// Insert formatted search result items
|
||||
for (const result of results) {
|
||||
searchResults.innerHTML += makeTeaser(result, term);
|
||||
}
|
||||
}, 150),
|
||||
);
|
||||
// Insert formatted search result items
|
||||
for (const result of results) {
|
||||
searchResults.innerHTML += makeTeaser(result, term);
|
||||
}
|
||||
}, 150),
|
||||
);
|
||||
|
||||
function makeTeaser(result, searchVal) {
|
||||
const TEASER_SIZE = 20;
|
||||
let output = `<div class="search-result item"><a class="result-title" href=${result.item.url}>${result.item.title}</a>`;
|
||||
function makeTeaser(result, searchVal) {
|
||||
const TEASER_SIZE = 20;
|
||||
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) {
|
||||
if (match.key === "title") continue;
|
||||
for (const match of result.matches) {
|
||||
if (match.key === "title") continue;
|
||||
|
||||
const indices = match.indices.sort((a, b) => Math.abs(a[1] - a[0] - searchVal.length) - Math.abs(b[1] - b[0] - searchVal.length)).slice(0, MAX_RESULTS);
|
||||
const value = match.value;
|
||||
const indices = match.indices
|
||||
.sort(
|
||||
(a, b) =>
|
||||
Math.abs(a[1] - a[0] - searchVal.length) -
|
||||
Math.abs(b[1] - b[0] - searchVal.length),
|
||||
)
|
||||
.slice(0, MAX_RESULTS);
|
||||
const value = match.value;
|
||||
|
||||
for (const ind of indices) {
|
||||
const start = Math.max(0, ind[0] - TEASER_SIZE);
|
||||
const end = Math.min(value.length - 1, ind[1] + TEASER_SIZE);
|
||||
output += "<span>"
|
||||
+ value.substring(start, ind[0])
|
||||
+ `<strong>${value.substring(ind[0], ind[1] + 1)}</strong>`
|
||||
+ value.substring(ind[1] + 1, end)
|
||||
+ "</span>";
|
||||
}
|
||||
for (const ind of indices) {
|
||||
const start = Math.max(0, ind[0] - TEASER_SIZE);
|
||||
const end = Math.min(value.length - 1, ind[1] + TEASER_SIZE);
|
||||
output +=
|
||||
"<span>" +
|
||||
value.substring(start, ind[0]) +
|
||||
`<strong>${value.substring(ind[0], ind[1] + 1)}</strong>` +
|
||||
value.substring(ind[1] + 1, end) +
|
||||
"</span>";
|
||||
}
|
||||
|
||||
if (match.indices.length > MAX_RESULTS) {
|
||||
const moreMatchesText = document.getElementById("more-matches-text").textContent;
|
||||
output += `<span class="more-matches">${moreMatchesText}</span>`.replace("$MATCHES", `+${match.indices.length - MAX_RESULTS}`);
|
||||
}
|
||||
}
|
||||
return output + "</div>";
|
||||
}
|
||||
if (match.indices.length > MAX_RESULTS) {
|
||||
const moreMatchesText =
|
||||
document.getElementById("more-matches-text").textContent;
|
||||
output +=
|
||||
`<span class="more-matches">${moreMatchesText}</span>`.replace(
|
||||
"$MATCHES",
|
||||
`+${match.indices.length - MAX_RESULTS}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
return output + "</div>";
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
document.readyState === "complete" ||
|
||||
(document.readyState !== "loading" && !document.documentElement.doScroll)
|
||||
document.readyState === "complete" ||
|
||||
(document.readyState !== "loading" && !document.documentElement.doScroll)
|
||||
) {
|
||||
initSearch();
|
||||
initSearch();
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", initSearch);
|
||||
document.addEventListener("DOMContentLoaded", initSearch);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
:root {
|
||||
--alert-note-title: "Note";
|
||||
--alert-tip-title: "Tip";
|
||||
--alert-important-title: "Important";
|
||||
--alert-warning-title: "Warning";
|
||||
--alert-caution-title: "Caution";
|
||||
--alert-note-title: "Note";
|
||||
--alert-tip-title: "Tip";
|
||||
--alert-important-title: "Important";
|
||||
--alert-warning-title: "Warning";
|
||||
--alert-caution-title: "Caution";
|
||||
|
||||
--font-sans-serif: "Commissioner";
|
||||
--font-system-ui: ui-sans-serif, system-ui, sans-serif;
|
||||
--font-emoji: "Noto Color Emoji";
|
||||
--font-monospace: "Commit Mono";
|
||||
--font-sans-serif: "Commissioner";
|
||||
--font-system-ui: ui-sans-serif, system-ui, sans-serif;
|
||||
--font-emoji: "Noto Color Emoji";
|
||||
--font-monospace: "Commit Mono";
|
||||
|
||||
--icon-info: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/info.svg");
|
||||
--icon-lightbulb: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/lightbulb.svg");
|
||||
--icon-warning-diamond: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-diamond.svg");
|
||||
--icon-warning: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning.svg");
|
||||
--icon-warning-octagon: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-octagon.svg");
|
||||
--icon-copy: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/copy.svg");
|
||||
--icon-check-square-offset: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/check-square-offset.svg");
|
||||
--icon-info: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/info.svg");
|
||||
--icon-lightbulb: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/lightbulb.svg");
|
||||
--icon-warning-diamond: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-diamond.svg");
|
||||
--icon-warning: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning.svg");
|
||||
--icon-warning-octagon: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/warning-octagon.svg");
|
||||
--icon-copy: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/copy.svg");
|
||||
--icon-check-square-offset: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/check-square-offset.svg");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue