badbl0cks
8783e401f8
All checks were successful
Build And Deploy / build-and-deploy (push) Successful in 1m23s
prefers-color-scheme and prefers-contrast
126 lines
3.4 KiB
CSS
126 lines
3.4 KiB
CSS
/*
|
|
Inspired by:
|
|
- Mike Mai @ https://mikemai.net/
|
|
- David Bushell @ https://dbushell.com/
|
|
- Viznut @ http://viznut.fi/
|
|
*/
|
|
@layer reset, config, font, utilities, theme;
|
|
@import "reset.css" layer(reset);
|
|
@import "theme.css" layer(theme);
|
|
|
|
@font-face {
|
|
font-family: "unscii16";
|
|
src:
|
|
url("unscii-16.woff") format("woff"),
|
|
url("unscii-16.ttf") format("ttf");
|
|
}
|
|
@font-face {
|
|
font-family: "unscii8";
|
|
src:
|
|
url("unscii-8.woff") format("woff"),
|
|
url("unscii-8.ttf") format("ttf");
|
|
}
|
|
|
|
@layer font {
|
|
:root {
|
|
/* Traditional point sizes for 16px font */
|
|
--pt-double-canon: 3.75rem; /*60px*/
|
|
--pt-canon: 3.25rem; /*52px*/
|
|
--pt-double-great-primer: 2.5rem; /*40px*/
|
|
--pt-double-english: 2rem; /*32px*/
|
|
--pt-double-pica: 1.75rem; /*28px*/
|
|
--pt-paragon: 1.5rem; /*24px*/
|
|
--pt-great-primer: 1.375rem; /*22px*/
|
|
--pt-english: 1.125rem; /*18px*/
|
|
--pt-pica: 1rem; /*16px*/
|
|
--pt-small-pica: 0.875rem; /*14px*/
|
|
--pt-long-primer: 0.75rem; /*12px*/
|
|
--pt-bourgeois: 0.625rem; /*10px*/
|
|
--pt-minion: 0.5rem; /*8px*/
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.hidden {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@layer config {
|
|
:root {
|
|
/* Color */
|
|
--color-fg: oklch(1 0 0);
|
|
--color-mg: oklch(0.5 0 0);
|
|
--color-bg: oklch(0 0 0);
|
|
--color-accent: oklch(0.6 0.18 142.5);
|
|
--color-accent-bright: oklch(0.8 0.18 142.5);
|
|
--color-glow: oklch(0.8328 0 0);
|
|
--color-accent-transparent: oklch(0.6 0.18 142.5 / 50%);
|
|
|
|
/* Spacing */
|
|
--gutter-large: clamp(3ch, 2.5vmax, 3.75ch);
|
|
--stack-large: clamp(1.25ex, 2.5vmax, 1.75ex);
|
|
--gutter-small: clamp(0.5ch, 1vmax, 1ch);
|
|
--stack-small: clamp(0.25ex, 0.5vmax, 0.5ex);
|
|
--line-length: 75ch;
|
|
--page-max-inline-size: min(
|
|
var(--line-length),
|
|
100dvi - var(--gutter-large) * 2
|
|
);
|
|
--page-padding-inline: calc((100dvi - var(--page-max-inline-size)) / 2);
|
|
|
|
/* Typography */
|
|
--font: unscii16, "Courier New", monospace;
|
|
--font-alternative: unscii8, "Courier New", monospace;
|
|
--font-weight: 400;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 900;
|
|
--font-size-min: 100%;
|
|
--font-size-max: 150%;
|
|
--font-size-clamp: clamp(
|
|
var(--font-size-min),
|
|
var(--font-size-min) * 0.9 + 0.5dvi,
|
|
var(--font-size-max)
|
|
);
|
|
--leading: 1.4;
|
|
|
|
/* Traditional point sizes for 12px font */
|
|
--pt-double-canon: 4.666rem; /*56px*/
|
|
--pt-canon: 3.999rem; /*48px*/
|
|
--pt-double-great-primer: 2.999rem; /*36px*/
|
|
--pt-double-english: 2.333rem; /*28px*/
|
|
--pt-double-pica: 2rem; /*24px*/
|
|
--pt-paragon: 1.666rem; /*20px*/
|
|
--pt-great-primer: 1.5rem; /*18px*/
|
|
--pt-english: 1.166rem; /*14px*/
|
|
--pt-pica: 1rem; /*12px*/
|
|
--pt-small-pica: 0.916rem; /*11px*/
|
|
--pt-long-primer: 0.833rem; /*10px*/
|
|
--pt-bourgeois: 0.75rem; /*9px*/
|
|
--pt-minion: 0.583rem; /*7px*/
|
|
|
|
font-size: var(--font-size-clamp);
|
|
font: -apple-system-body;
|
|
font-family: var(--font);
|
|
font-weight: var(--font-weight);
|
|
line-height: var(--leading);
|
|
color: var(--color-fg);
|
|
background-color: var(--color-bg);
|
|
accent-color: var(--color-accent);
|
|
color-scheme: dark light;
|
|
}
|
|
|
|
@supports (font: -apple-system-body) and
|
|
(not (-webkit-touch-callout: default)) {
|
|
:root {
|
|
font-size: var(--font-size-clamp);
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {}
|
|
|
|
@media (prefers-contrast: more) {}
|
|
|
|
@media (prefers-reduced-motion: reduce) {}
|
|
}
|