Something went wrong. Try again.
Experiment to rebuild Diffuse using web applets.
Something went wrong. Try again.
1.8 kB · 106 lines
CSS
at broadcast
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107@import "../variables.css";
:root { font-family: "Inter", sans-serif; font-size: var(--fs-base);
/* Colors */ --color-1: oklch(4.1308% 0.25306 109.22); --color-2: oklch(98.369% 0.01834 67.664); --color-3: oklch(26.787% 0.00168 186.65); --accent: oklch(86.947% 0.25527 28.789);
--bg-color: var(--color-2); --text-color: var(--color-1);}
@media (prefers-color-scheme: dark) { :root { --bg-color: var(--color-3); --text-color: var(--color-2); }}
@supports (font-variation-settings: normal) { :root { font-family: "InterVariable", sans-serif; font-feature-settings: "zero" 2, "ss03" 2; font-optical-sizing: auto; }}
body { background-color: var(--bg-color); color: var(--text-color);}
header,main { margin: var(--space-md) var(--space-lg);}
a { color: inherit; text-underline-offset: 6px;}
h1 svg { fill: oklch(from var(--bg-color) calc(l - 0.5) c h); opacity: 0.125;
@media (prefers-color-scheme: dark) { & { fill: var(--text-color); opacity: 0.25; } }}
h2 { /* color: oklch(from var(--bg-color) calc(l - 0.25) c h); */ color: var(--accent);
font-size: var(--fs-xl); font-weight: 900; letter-spacing: -0.0125em; line-height: 1; margin: var(--space-2xl) 0 var(--space-md); text-transform: uppercase;}
h3 { font-size: var(--fs-md); font-weight: 800; line-height: 1; margin: var(--space-xl) 0 var(--space-sm); text-transform: uppercase;}
h2 + h3 { margin-top: var(--space-md);}
ul,ol { padding-left: var(--space-md);}
p,ul,ol { margin: var(--space-sm) 0; max-width: var(--container-sm);}
.columns { display: flex; flex-wrap: wrap; gap: 0 var(--space-3xl);}
.applet { min-width: min(var(--container-xs), 100%); width: 32.5%;}