Troy
90ef859c50
* begin switching to tailwind v4 * remove old tw config file * convert colors back to hex * move all content out of tw config * fixed colors * better match colors * remove abnormally large margins
120 lines
2.5 KiB
CSS
120 lines
2.5 KiB
CSS
@import "@fontsource-variable/red-hat-mono";
|
|
@import "@fontsource-variable/outfit";
|
|
@import "@fontsource/borel";
|
|
|
|
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@theme inline {
|
|
--color-primary: var(--primary);
|
|
--color-secondary: var(--secondary);
|
|
--color-tertiary: var(--tertiary);
|
|
--color-accent: var(--accent);
|
|
}
|
|
|
|
@theme {
|
|
--font-sans: "Outfit Variable", "sans-serif";
|
|
--font-mono: "Red Hat Mono Variable", "monospace";
|
|
|
|
--animate-reveal: reveal 0.3s forwards ease-in-out;
|
|
--animate-logo: logo 0.5s forwards ease-out;
|
|
--animate-gradient-x: gradient-x 6s ease infinite;
|
|
--animate-gradient-y: gradient-y 6s ease infinite;
|
|
--animate-gradient-xy: gradient-xy 6s ease infinite;
|
|
@keyframes reveal {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
filter: blur(4px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
filter: blur(0px);
|
|
}
|
|
}
|
|
@keyframes logo {
|
|
0% {
|
|
transform: translateY(100%);
|
|
color: var(--primary);
|
|
}
|
|
100% {
|
|
transform: translateY(0%);
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
@keyframes gradient-x {
|
|
0%,
|
|
100% {
|
|
background-size: 200% 200%;
|
|
background-position: left center;
|
|
}
|
|
50% {
|
|
background-size: 200% 200%;
|
|
background-position: right center;
|
|
}
|
|
}
|
|
@keyframes gradient-y {
|
|
0%,
|
|
100% {
|
|
background-size: 400% 400%;
|
|
background-position: center top;
|
|
}
|
|
50% {
|
|
background-size: 200% 200%;
|
|
background-position: center center;
|
|
}
|
|
}
|
|
@keyframes gradient-xy {
|
|
0%,
|
|
100% {
|
|
background-size: 400% 400%;
|
|
background-position: left center;
|
|
}
|
|
50% {
|
|
background-size: 200% 200%;
|
|
background-position: right center;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--primary: oklch(99% 0 0);
|
|
--secondary: oklch(15% 0 0);
|
|
--tertiary: oklch(40% 0 0);
|
|
--accent: oklch(25% 0 0);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--primary: oklch(0% 0 0);
|
|
--secondary: oklch(95% 0 0);
|
|
--tertiary: oklch(60% 0 0);
|
|
--accent: oklch(75% 0 0);
|
|
}
|
|
|
|
.astro-code,
|
|
.astro-code span {
|
|
color: var(--shiki-dark) !important;
|
|
background-color: var(--shiki-dark-bg) !important;
|
|
font-style: var(--shiki-dark-font-style) !important;
|
|
font-weight: var(--shiki-dark-font-weight) !important;
|
|
text-decoration: var(--shiki-dark-text-decoration) !important;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
background: none;
|
|
color: black;
|
|
}
|
|
header,
|
|
footer,
|
|
main {
|
|
max-width: unset !important;
|
|
}
|
|
header,
|
|
footer {
|
|
display: none;
|
|
}
|
|
}
|