82 lines
2.5 KiB
CSS
82 lines
2.5 KiB
CSS
@font-face {
|
|
font-family: "Cal Sans";
|
|
font-style: normal;
|
|
src: url("/assets/fonts/CalSans.woff2") format("woff2"),
|
|
url("/assets/fonts/CalSans.woff") format("woff"),
|
|
url("/assets/fonts/CalSans.ttf") format("truetype"),
|
|
}
|
|
@font-face {
|
|
font-family: "Karla";
|
|
font-style: normal;
|
|
src: url("/assets/fonts/KarlaVF.woff2") format("woff2"),
|
|
url("/assets/fonts/KarlaVF.ttf") format("truetype"),
|
|
url("/assets/fonts/KarlaMedium.otf") format("opentype");
|
|
}
|
|
@font-face {
|
|
font-family: "Karla";
|
|
font-style: italic;
|
|
src: url("/assets/fonts/KarlaItalicVF.woff2") format("woff2"),
|
|
url("/assets/fonts/KarlaItalicVF.ttf") format("truetype"),
|
|
url("/assets/fonts/KarlaItalicMedium.otf") format("opentype");
|
|
}
|
|
|
|
:root * {
|
|
--black: #000000;
|
|
--white: #ffffff;
|
|
|
|
--cyan: #00ffff;
|
|
--purple: #ff00ff;
|
|
|
|
--background-00: var(--black);
|
|
--foreground-00: var(--white);
|
|
--accent-00: var(--white);
|
|
|
|
--cal-sans: "Cal Sans", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
|
--sans: "Karla", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
@keyframes slide-enter {
|
|
0% {
|
|
opacity:0;
|
|
transform: translateY(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.slide-enter > * {
|
|
--stagger: var(--stagger, 0ms);
|
|
--delay: var(--delay, 150ms);
|
|
--start: var(--start, 0ms);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.slide-enter > * {
|
|
animation: slide-enter 1s both 1;
|
|
animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
|
|
}
|
|
}
|
|
|
|
.slide-enter > *:nth-child(1) { --stagger: 1; }
|
|
.slide-enter > *:nth-child(2) { --stagger: 2; }
|
|
.slide-enter > *:nth-child(3) { --stagger: 3; }
|
|
.slide-enter > *:nth-child(4) { --stagger: 4; }
|
|
.slide-enter > *:nth-child(5) { --stagger: 5; }
|
|
.slide-enter > *:nth-child(6) { --stagger: 6; }
|
|
.slide-enter > *:nth-child(7) { --stagger: 7; }
|
|
.slide-enter > *:nth-child(8) { --stagger: 8; }
|
|
.slide-enter > *:nth-child(9) { --stagger: 9; }
|
|
.slide-enter > *:nth-child(10) { --stagger: 10; }
|
|
.slide-enter > *:nth-child(11) { --stagger: 11; }
|
|
.slide-enter > *:nth-child(12) { --stagger: 12; }
|
|
.slide-enter > *:nth-child(13) { --stagger: 13; }
|
|
.slide-enter > *:nth-child(14) { --stagger: 14; }
|
|
.slide-enter > *:nth-child(15) { --stagger: 15; }
|
|
.slide-enter > *:nth-child(16) { --stagger: 16; }
|
|
.slide-enter > *:nth-child(17) { --stagger: 17; }
|
|
.slide-enter > *:nth-child(18) { --stagger: 18; }
|
|
.slide-enter > *:nth-child(19) { --stagger: 19; }
|
|
.slide-enter > *:nth-child(20) { --stagger: 20; }
|