109 lines
No EOL
2.7 KiB
CSS
109 lines
No EOL
2.7 KiB
CSS
:root {
|
|
--hue: 182.77deg;
|
|
--accent-ofset: 180;
|
|
|
|
--primary-100: oklch(from var(--primary-500) .95 c h);
|
|
--primary-300: oklch(from var(--primary-500) .9 c h);
|
|
--primary-500: light-dark(oklch(.7503 0.117 var(--hue)), oklch(.8549 0.1149 var(--hue)));
|
|
--primary-700: oklch(from var(--primary-500) .7 c h);
|
|
--primary-900: oklch(from var(--primary-500) .6 c h);
|
|
|
|
--secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
|
|
--secondary-300: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
|
|
--secondary-500: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
|
|
--secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
|
|
--secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
|
|
|
|
--surface-300: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
|
|
--surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
|
|
--surface-500: oklch(from var(--surface-400) calc(l + .025) c h);
|
|
--surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
|
|
--surface-700: oklch(from var(--surface-600) calc(l + .025) c h);
|
|
|
|
--text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h));
|
|
--text-2: oklch(from var(--text-1) calc(l + .1) c h);
|
|
|
|
--info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));
|
|
--fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3));
|
|
--warn: light-dark(oklch(.82 .18 78.9), oklch(.82 .18 78.9));
|
|
--succ: light-dark(oklch(.86 .28 150), oklch(.86 .28 150));
|
|
|
|
--radii-s: .125em;
|
|
--radii-m: .25em;
|
|
--radii-l: .5em;
|
|
--radii-xl: 1em;
|
|
|
|
--text-s: .8rem;
|
|
--text-m: 1rem;
|
|
--text-l: 1.25rem;
|
|
--text-xl: 1.6rem;
|
|
--text-xxl: 2rem;
|
|
|
|
--padding-s: .25em;
|
|
--padding-m: .5em;
|
|
--padding-l: .75em;
|
|
--padding-xl: 1em;
|
|
--padding-xxl: 1.5em;
|
|
}
|
|
|
|
html {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
overflow: clip;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
overflow: clip;
|
|
|
|
display: grid;
|
|
grid: 100% / 100%;
|
|
|
|
background-color: var(--surface-300);
|
|
color: var(--text-2);
|
|
accent-color: var(--primary-500);
|
|
|
|
margin: 0;
|
|
|
|
font-family: sans-serif;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid var(--info);
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-500);
|
|
}
|
|
|
|
h1 {
|
|
color: var(--text-1);
|
|
text-transform: uppercase;
|
|
font-size: 4rem;
|
|
font-weight: 100;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.35;
|
|
margin: 0;
|
|
}
|
|
|
|
code {
|
|
padding-inline: var(--padding-s);
|
|
background-color: var(--surface-500);
|
|
border: 1px solid var(--surface-700);
|
|
border-radius: var(--radii-m);
|
|
}
|
|
|
|
@property --hue {
|
|
syntax: '<angle>';
|
|
inherits: false;
|
|
initial-value: 0deg;
|
|
} |