109 lines
2.3 KiB
CSS
109 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
@config "../../tailwind.config.js";
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: "DepartureMono";
|
|
src: url("/fonts/DepartureMono-Regular.woff") format("woff");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "FiraCode";
|
|
src: url("/fonts/FiraCode-Regular.woff") format("woff");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "FiraCode";
|
|
src: url("/fonts/FiraCode-Bold.woff") format("woff");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
html {
|
|
overflow-y: scroll;
|
|
color-scheme: light;
|
|
background-color: oklch(87.1% 0.006 286.286);
|
|
font-family: "FiraCode", monospace;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
background-color: oklch(21% 0.006 285.885);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
@apply h-full w-full antialiased;
|
|
@apply bg-white dark:bg-zinc-900;
|
|
@apply text-black/75 dark:text-white/75;
|
|
}
|
|
|
|
body {
|
|
@apply relative flex flex-col;
|
|
}
|
|
|
|
main {
|
|
@apply flex flex-col flex-1 bg-zinc-300 dark:bg-zinc-900;
|
|
}
|
|
|
|
header {
|
|
@apply border-b;
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
header:not(.scrolled) {
|
|
@apply bg-transparent border-transparent;
|
|
}
|
|
|
|
header.scrolled {
|
|
@apply bg-zinc-200/75 dark:bg-zinc-950/50;
|
|
@apply border-black/10 dark:border-white/25;
|
|
@apply backdrop-blur-sm saturate-200;
|
|
}
|
|
|
|
article {
|
|
@apply prose dark:prose-invert max-w-full pb-12;
|
|
}
|
|
|
|
.page-heading {
|
|
@apply font-semibold text-black dark:text-white;
|
|
}
|
|
|
|
.blend {
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
.animate {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
animation: fadeInUp 1s forwards;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
article img {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|