171 lines
3.6 KiB
CSS
171 lines
3.6 KiB
CSS
@font-face {
|
|
font-family: 'Adjusted Lucida Bright Fallback';
|
|
src: local(Lucida Bright);
|
|
size-adjust: 113%;
|
|
ascent-override: normal;
|
|
descent-override: 13%;
|
|
line-gap-override: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Adjusted Verdana Fallback';
|
|
src: local(Verdana);
|
|
size-adjust: 93.5%;
|
|
ascent-override: 123%;
|
|
descent-override: 48%;
|
|
line-gap-override: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Adjusted Courier New Fallback';
|
|
src: local(Courier New);
|
|
size-adjust: 100%;
|
|
ascent-override: 93%;
|
|
descent-override: 37%;
|
|
line-gap-override: normal;
|
|
}
|
|
|
|
:root {
|
|
/* font */
|
|
--_font-size: var(--font-size-1);
|
|
--_font-family: 'MuseoModerno', 'Adjusted Verdana Fallback', sans-serif;
|
|
--_font-family-accent: 'Hepta Slab', 'Adjusted Lucida Bright Fallback',
|
|
serif;
|
|
--_font-family-code: 'Fira Code', 'Adjusted Courier New Fallback', monospace;
|
|
--_font-color: var(--choco-12);
|
|
|
|
/* border */
|
|
--_border-size: var(--border-size-2);
|
|
|
|
/* size */
|
|
--_gap: var(--size-3);
|
|
--_gap-half: calc(var(--_gap) / 2);
|
|
--_wide-screen: 1400px;
|
|
--_small-screen: 800px;
|
|
--_readable-screen: max(80dvw, var(--_small-screen));
|
|
|
|
/* color */
|
|
--_accent-color: var(--lime-6);
|
|
--_translucent: hsl(from var(--_font-color) h s l / 0.1);
|
|
|
|
/* other */
|
|
--_background-color: var(--sand-0);
|
|
--_background-image: url('assets/css_bg_stardust_alpha_30.png');
|
|
--_blur: var(--size-3);
|
|
--_transition-delay: 0.2s;
|
|
|
|
/* global styles */
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:has(body:not([data-theme='light'])) {
|
|
--_font-color: var(--choco-1);
|
|
--_accent-color: var(--lime-11);
|
|
--_background-color: var(--sand-12);
|
|
}
|
|
}
|
|
|
|
:root:has(body[data-theme='dark']) {
|
|
--_font-color: var(--choco-1);
|
|
--_accent-color: var(--lime-11);
|
|
--_background-color: var(--sand-12);
|
|
}
|
|
|
|
body {
|
|
color: var(--_font-color);
|
|
font-family: var(--_font-family);
|
|
font-size: var(--_font-size);
|
|
accent-color: var(--_accent-color);
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--_background-image) repeat top left / 800px;
|
|
background-color: var(--_background-color);
|
|
|
|
transition-property: background-color var(--_transition-delay) ease;
|
|
transition-duration: var(--_transition-delay);
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
button {
|
|
font-family: var(--_font-family-accent);
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
font-family: var(--_font-family-code);
|
|
}
|
|
|
|
h1 {
|
|
margin-block: var(--_gap);
|
|
}
|
|
|
|
label {
|
|
display: grid;
|
|
gap: var(--_gap-half);
|
|
}
|
|
|
|
input {
|
|
transition: all var(--_transition-delay) ease;
|
|
}
|
|
|
|
input:not([type='radio']):not([type='checkbox']) {
|
|
padding: var(--_gap-half);
|
|
border: var(--_border-size) solid var(--_translucent);
|
|
background-color: var(--_translucent);
|
|
color: hsl(from var(--_font-color) h s l / 0.8);
|
|
}
|
|
|
|
input:not([type='radio']):not([type='checkbox']):focus {
|
|
background-color: var(--_background-color);
|
|
color: var(--_font-color);
|
|
}
|
|
|
|
input[type='radio'],
|
|
input[type='checkbox'] {
|
|
width: calc(1.5 * var(--_gap));
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.cta,
|
|
.button {
|
|
text-decoration: none;
|
|
background-color: var(--_accent-color);
|
|
color: var(--sand-0);
|
|
width: 100%;
|
|
font-size: 120%;
|
|
height: fit-content;
|
|
padding: var(--_gap-half);
|
|
font-family: var(--_font-family-accent);
|
|
border: var(--_border-size) solid var(--_accent-color);
|
|
transition: all var(--_transition-delay) ease;
|
|
display: inline-block;
|
|
outline: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.cta:hover,
|
|
.cta:focus-visible,
|
|
.button:hover,
|
|
.button:focus-visible {
|
|
background-color: var(--lime-1);
|
|
color: var(--_accent-color);
|
|
box-shadow: 0 0 0 0 var(--_accent-color);
|
|
}
|
|
|
|
.cta:active {
|
|
box-shadow: 0 0 180px 20px var(--_accent-color);
|
|
}
|
|
|
|
.cta {
|
|
width: fit-content;
|
|
font-size: 150%;
|
|
padding: 1rem 2rem;
|
|
}
|