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

better formatting

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

2
README.md
View file

@ -1,3 +1,3 @@
# @muddle/amezing
Port of the Ametrine theme (by Daudix) as a muddle module.
Port of the Ametrine theme (by Daudix) as a muddle module.

213
index.ts
View file

@ -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
View file

@ -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": "*"
}
}

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

@ -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;
}

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

@ -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);
}

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

File diff suppressed because it is too large Load diff

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

@ -1,83 +1,83 @@
@keyframes slide-in-up {
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;
}
}

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

@ -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;
}
}
}

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

@ -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;
}
}

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

@ -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;
}

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

@ -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;
}
}
}

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

@ -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);
}

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

@ -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;
}

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

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

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

@ -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;
}
}

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

@ -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);
}

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

@ -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;
}
}

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

@ -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;
}
}
}

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

@ -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;
}

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

@ -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;
}
}

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

@ -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);
}
}

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

@ -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);
}
}

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

@ -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;
}
}
}

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

@ -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%;
}

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

@ -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);
}
}

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

@ -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;
}

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

@ -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;
}
}
}

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

@ -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;
}

226
sass/components/_alerts.scss
View file

@ -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);
}
}

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

@ -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: "#";
}
}
}

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

@ -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;
}
}

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

@ -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;
}
}

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

@ -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;
}
}
}

56
sass/components/_audio.scss
View file

@ -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;
}
}

164
sass/components/_banner.scss
View file

@ -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%;
}
}
}
}
}

908
sass/components/_comments.scss
View file

@ -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;
}
}
}
}
}
}
}

26
sass/components/_deanchor.scss
View file

@ -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);
}
}

34
sass/components/_emoji.scss
View file

@ -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;
}
}

96
sass/components/_footnotes.scss
View file

@ -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);
}
}
}

78
sass/components/_fuse.scss
View file

@ -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;
}
}
}
}

16
sass/components/_giallo.scss
View file

@ -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;
}

8
sass/components/_icon.scss
View file

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

8
sass/components/_iframe.scss
View file

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

2
sass/components/_index.scss
View file

@ -22,4 +22,4 @@
@use "audio-button";
@use "deanchor";
@use "fuse";
@use "search-fuse";
@use "search-fuse";

56
sass/components/_marquee.scss
View file

@ -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;
}
}

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

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

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

@ -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);
}
}

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

@ -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;
}
}
}
}

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

@ -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);
}
}
}
}
}

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

@ -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);
}
}

100
sass/components/_statements.scss
View file

@ -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);
}
}

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

@ -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;
}
}
}

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

@ -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);
}

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

@ -1,55 +1,55 @@
// Based on https://github.com/welpo/tabi/blob/68c35b02f8c09e21ecff48f61bad6da3d96ce337/sass/parts/_zola-error.scss
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;
}

66
sass/fonts.scss
View file

@ -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;
}

226
sass/layout/_footer.scss
View file

@ -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;
}
}
}

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

@ -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);
}
}

26
sass/layout/_grid.scss
View file

@ -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;
}
}

574
sass/layout/_header.scss
View file

@ -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;
}
}

2
sass/layout/_index.scss
View file

@ -3,4 +3,4 @@
@use "grid";
@use "header";
@use "main-content";
@use "sidebar";
@use "sidebar";

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

@ -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;
}

1428
sass/layout/_sidebar.scss
View file

File diff suppressed because it is too large Load diff

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

@ -2,43 +2,43 @@
@use "../citrine/abstracts/mixins" as *;
#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;
}
}

26
sass/mods/_flat.scss
View file

@ -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);
}

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

@ -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;
}
}
}

48
sass/mods/_skeuomorphic.scss
View file

@ -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)
);
}
}
}

4
scripts/audio-button.js
View file

@ -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();
}

34
scripts/closable.js
View file

@ -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;
});

12
scripts/deanchor.js
View file

@ -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
View file

File diff suppressed because one or more lines are too long

32
scripts/marquee.js
View file

@ -1,25 +1,25 @@
function updateMarquees() {
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);

30
scripts/paginator.js
View file

@ -3,21 +3,21 @@ const items = document.querySelectorAll(".music .carousel > li");
const links = document.querySelectorAll(".music-paginator li a");
const 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));

292
scripts/search-fuse.js
View file

@ -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);
}

32
styles/vars.css
View file

@ -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");
}