badbl0cks
0350a4b8e3
Introduce reset.css and theme.css and refactor style.css to import them via layers; add Unscii font files and preload links. Add RSS XSL/CSS and a css-test page; remove legacy snes.min.css. Tweak BaseLayout and contact layout (preloads, grid gaps). Rename index.astro to parallax.astro and created new basic index page. Improve input styles and contact form placeholders
144 lines
3.7 KiB
CSS
144 lines
3.7 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) {
|
|
:root {
|
|
--color-fg: #404040;
|
|
--color-bg: #f4f4f4;
|
|
--color-accent: crimson;
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--color-fg: white;
|
|
--color-bg: black;
|
|
--color-accent: cyan;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) and (prefers-contrast: more) {
|
|
:root {
|
|
--color-fg: black;
|
|
--color-bg: white;
|
|
--color-accent: firebrick;
|
|
}
|
|
}
|
|
}
|