130 lines
2.9 KiB
CSS
130 lines
2.9 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
|
|
@import "tailwindcss";
|
|
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
|
|
|
@theme {
|
|
--color-primary: #ff2d00;
|
|
--color-primary-50: oklch(1 0.244 31.9);
|
|
--color-primary-100: oklch(0.91 0.244 31.9);
|
|
--color-primary-200: oklch(0.84 0.244 31.9);
|
|
--color-primary-300: oklch(0.77 0.244 31.9);
|
|
--color-primary-400: oklch(0.7 0.244 31.9);
|
|
--color-primary-500: #ff2d00;
|
|
--color-primary-600: oklch(0.55 0.244 31.9);
|
|
--color-primary-700: oklch(0.45 0.244 31.9);
|
|
--color-primary-800: oklch(0.35 0.244 31.9);
|
|
--color-primary-900: oklch(0.18 0.244 31.9);
|
|
--color-primary-950: oklch(0.09 0.244 31.9);
|
|
|
|
--font-header: "Lutschine Bold", sans-serif;
|
|
--font-header-alt: "Lutschine Regular", sans-serif;
|
|
--font-body: "Roboto", sans-serif;
|
|
--font-mono: "Fira Code", monospace;
|
|
|
|
--animate-floaty: floaty 18s forwards linear infinite;
|
|
|
|
@keyframes floaty {
|
|
from {
|
|
transform: rotate(0deg) translateX(16px) rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg) translateX(16px) rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
--animate-wiggle: wiggle 1s ease-in-out infinite;
|
|
|
|
@keyframes wiggle {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
50% {
|
|
transform: rotate(3deg);
|
|
}
|
|
}
|
|
|
|
--animate-scrolling-awards: scrolling-awards 24s linear infinite;
|
|
|
|
@keyframes scrolling-awards {
|
|
0% {
|
|
transform: translateY(1%);
|
|
}
|
|
1% {
|
|
transform: translateY(0.95%);
|
|
}
|
|
3% {
|
|
transform: translateY(0.7%);
|
|
}
|
|
85% {
|
|
transform: translateY(-50%);
|
|
}
|
|
88% {
|
|
transform: translateY(-50.5%);
|
|
}
|
|
89% {
|
|
transform: translateY(-50.4%);
|
|
}
|
|
96% {
|
|
transform: translateY(0.95%);
|
|
}
|
|
100% {
|
|
transform: translateY(1%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: "Lutschine Bold";
|
|
src: url("/fonts/lutschine-bold.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Lutschine Regular";
|
|
src: url("/fonts/lutschine-regular.otf") format("opentype");
|
|
}
|
|
|
|
html {
|
|
font-family: "Roboto", sans-serif;
|
|
@apply text-gray-600 dark:text-white;
|
|
}
|
|
|
|
.astro-code {
|
|
@apply overflow-auto;
|
|
}
|
|
|
|
.astro-code code {
|
|
counter-reset: step;
|
|
counter-increment: step 0;
|
|
|
|
@apply text-sm;
|
|
@apply block;
|
|
@apply w-fit min-w-full;
|
|
}
|
|
|
|
.astro-code code .line {
|
|
@apply inline-block;
|
|
@apply w-full;
|
|
@apply pr-8;
|
|
@apply bg-white dark:bg-gray-100;
|
|
}
|
|
|
|
.astro-code code .line::before {
|
|
content: counter(step);
|
|
counter-increment: step;
|
|
|
|
@apply w-10;
|
|
@apply mr-2 ml-auto pt-1 pr-2 pb-1;
|
|
@apply inline-block;
|
|
@apply text-right;
|
|
|
|
@apply sticky;
|
|
@apply left-0;
|
|
@apply z-10;
|
|
|
|
@apply bg-gray-200;
|
|
}
|
|
}
|