161 lines
3.2 KiB
CSS
161 lines
3.2 KiB
CSS
:root {
|
|
--ratio: 1.5;
|
|
--s-5: calc(var(--s-4) / var(--ratio));
|
|
--s-4: calc(var(--s-3) / var(--ratio));
|
|
--s-3: calc(var(--s-2) / var(--ratio));
|
|
--s-2: calc(var(--s-1) / var(--ratio));
|
|
--s-1: calc(var(--s0) / var(--ratio));
|
|
--s0: 1rem;
|
|
--s1: calc(var(--s0) * var(--ratio));
|
|
--s2: calc(var(--s1) * var(--ratio));
|
|
--s3: calc(var(--s2) * var(--ratio));
|
|
--s4: calc(var(--s3) * var(--ratio));
|
|
--s5: calc(var(--s4) * var(--ratio));
|
|
--measure: 60ch;
|
|
/* System font stack, see: https://systemfontstack.com/ */
|
|
font-family:
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
avenir next,
|
|
avenir,
|
|
segoe ui,
|
|
helvetica neue,
|
|
helvetica,
|
|
Cantarell,
|
|
Ubuntu,
|
|
roboto,
|
|
noto,
|
|
arial,
|
|
sans-serif;
|
|
font-size: calc(1rem + 0.5vw);
|
|
line-height: var(--ratio);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
max-inline-size: var(--measure);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
div,
|
|
header,
|
|
nav,
|
|
main,
|
|
footer {
|
|
max-inline-size: none;
|
|
}
|
|
|
|
/* Button */
|
|
.button,
|
|
button {
|
|
--_background: var(--background, #ccc);
|
|
--_color: var(--color, #000);
|
|
/* NOTE(toby3d): reset everything */
|
|
all: unset;
|
|
/* NOTE(toby3d): start from scratch */
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
align-items: baseline;
|
|
appearance: none;
|
|
background: var(--_background);
|
|
border-radius: 0.3125em;
|
|
border: 0;
|
|
color: var(--_color);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
justify-content: center;
|
|
min-width: 6.25em;
|
|
padding: 0.625em 1em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button[href*='liberapay.com'],
|
|
button[href*='liberapay.com'] {
|
|
--background: #f6c915;
|
|
--color: #1a171b;
|
|
}
|
|
|
|
.button[href*='paypal.me'],
|
|
button[href*='paypal.me'] {
|
|
--background: #ffd140;
|
|
--color: #001435;
|
|
}
|
|
|
|
.button .icon,
|
|
.button svg,
|
|
button .icon,
|
|
button svg {
|
|
margin-inline-end: 0.25rem;
|
|
height: 0.75em;
|
|
height: 1cap;
|
|
width: 0.75em;
|
|
width: 1cap;
|
|
}
|
|
|
|
/* Button behavior, see: https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/ */
|
|
.button:hover,
|
|
button:hover {
|
|
/* TODO(toby3d): better color mathing with good WCAG grading */
|
|
--background: #1d49aa;
|
|
}
|
|
|
|
/* See: https://bitsofco.de/when-is-focus-visible-visible/ */
|
|
.button:focus-visible,
|
|
.button:focus,
|
|
button:focus-visible,
|
|
button:focus {
|
|
outline: 4px solid #cbd6ee;
|
|
}
|
|
|
|
/* See: https://bitsofco.de/when-is-focus-visible-visible/ */
|
|
.button:focus:not(:focus-visible),
|
|
button:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
.button:active,
|
|
button:active {
|
|
/* TODO(toby3d): better color mathing with good WCAG grading */
|
|
--background: green;
|
|
}
|
|
|
|
.button:not([href]),
|
|
button[disabled] {
|
|
/* TODO(toby3d): better color mathing with good WCAG grading */
|
|
--background: #6c7589;
|
|
--color: #d2d5db;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.button:not([href]) .icon,
|
|
.button:not([href]) svg,
|
|
button[disabled] .icon,
|
|
button[disabled] svg {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
/* Cluster */
|
|
.cluster {
|
|
--_align: var(--align, flex-start);
|
|
--_justify: var(--justify, flex-start);
|
|
--_space: var(--space, var(--s1));
|
|
align-items: var(--_align);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--_space);
|
|
justify-content: var(--_justify);
|
|
}
|
|
|
|
/* Utilities */
|
|
.list-style-type\:none {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.padding-inline-start\:unset {
|
|
padding-inline-start: unset;
|
|
}
|