210 lines
4.0 KiB
CSS
210 lines
4.0 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);
|
|
color-scheme: light;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
max-inline-size: var(--measure);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
div,
|
|
header,
|
|
nav,
|
|
main,
|
|
footer {
|
|
max-inline-size: none;
|
|
}
|
|
|
|
svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
/* Input */
|
|
input,
|
|
select {
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Button */
|
|
.button,
|
|
button {
|
|
--_background: var(--background, hsl(0, 0%, 80%));
|
|
--_color: var(--color, hsl(0, 0%, 0%));
|
|
/* NOTE(toby3d): reset everything */
|
|
all: unset;
|
|
/* NOTE(toby3d): start from scratch */
|
|
align-items: center;
|
|
background: var(--_background);
|
|
border-radius: 0.3125em;
|
|
color: var(--_color);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
justify-content: center;
|
|
list-style: 1.1;
|
|
min-width: 6.25em;
|
|
padding: 0.625em 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.button[href*='liberapay.com'],
|
|
button[href*='liberapay.com'] {
|
|
--background: hsl(48, 93%, 52%);
|
|
--color: hsl(285, 8%, 10%);
|
|
}
|
|
|
|
.button[href*='paypal.me'],
|
|
button[href*='paypal.me'] {
|
|
--background: hsl(46, 100%, 63%);
|
|
--color: hsl(217, 100%, 10%);
|
|
}
|
|
|
|
.button[href*='yoomoney.ru'],
|
|
button[href*='yoomoney.ru'] {
|
|
--background: hsl(264, 98%, 62%);
|
|
--color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.button[href*='ko-fi.com'],
|
|
button[href*='ko-fi.com'] {
|
|
--background: hsl(199, 100%, 42%);
|
|
--color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.button[href*='donationalerts.com'],
|
|
button[href*='donationalerts.com'] {
|
|
--background: hsl(30, 94%, 49%);
|
|
--color: hsl(0, 0%, 95%);
|
|
}
|
|
|
|
.with-icon .icon,
|
|
.button .icon,
|
|
.button svg,
|
|
button .icon,
|
|
button svg {
|
|
height: 0.8lh;
|
|
margin-inline-end: 0.25rem;
|
|
width: auto;
|
|
}
|
|
|
|
/* 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: hsl(0, 0%, 60%);
|
|
--color: hsl(0, 0%, 15%);
|
|
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);
|
|
}
|
|
|
|
/* Blocks */
|
|
.visually-hidden {
|
|
clip-path: inset(100%);
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
}
|
|
|
|
.form {
|
|
--space: 1cap;
|
|
}
|
|
|
|
.form__amount {
|
|
width: 7ch;
|
|
}
|
|
|
|
/* Utilities */
|
|
.list-style-type\:none {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.padding-inline-start\:unset {
|
|
padding-inline-start: unset;
|
|
}
|
|
|
|
.display\:none,
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|