convert colors back to hex
This commit is contained in:
parent
9a9f9926e8
commit
497de100b2
2 changed files with 80 additions and 87 deletions
|
@ -4,6 +4,7 @@
|
|||
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
@config "../../tailwind.config.ts";
|
||||
|
||||
@theme inline {
|
||||
--color-primary: var(--primary);
|
||||
|
@ -13,23 +14,23 @@
|
|||
}
|
||||
|
||||
@theme {
|
||||
--font-sans: "Outfit Variable", "sans-serif";
|
||||
--font-mono: "Red Hat Mono Variable", "monospace";
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: 0deg 0% 99%;
|
||||
--secondary: 0deg 0% 13%;
|
||||
--tertiary: 0deg 0% 45%;
|
||||
--accent: 0deg 0% 39%;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--primary: 0deg 0% 0%;
|
||||
--secondary: 0deg 0% 93%;
|
||||
--tertiary: 0deg 0% 50%;
|
||||
--accent: 0deg 0% 71%;
|
||||
--primary: #fcfcfc;
|
||||
--secondary: #212121;
|
||||
--tertiary: #737373;
|
||||
--accent: #636363;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--primary: #000000;
|
||||
--secondary: #ededed;
|
||||
--tertiary: #737373;
|
||||
--accent: #636363;
|
||||
|
||||
.astro-code,
|
||||
.astro-code span {
|
||||
color: var(--shiki-dark) !important;
|
||||
|
@ -56,79 +57,3 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
export default {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["'Outfit Variable'", ...defaultTheme.fontFamily.sans],
|
||||
serif: [...defaultTheme.fontFamily.serif],
|
||||
mono: ["'Red Hat Mono Variable'", ...defaultTheme.fontFamily.mono],
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
reveal: "reveal 0.3s forwards ease-in-out",
|
||||
logo: "logo 0.5s forwards ease-out",
|
||||
"gradient-x": "gradient-x 6s ease infinite",
|
||||
"gradient-y": "gradient-y 6s ease infinite",
|
||||
"gradient-xy": "gradient-xy 6s ease infinite",
|
||||
},
|
||||
keyframes: {
|
||||
reveal: {
|
||||
"0%": {
|
||||
transform: "translateY(20px)",
|
||||
opacity: "0",
|
||||
filter: "blur(4px)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(0px)",
|
||||
opacity: "1",
|
||||
filter: "blur(0px)",
|
||||
},
|
||||
},
|
||||
logo: {
|
||||
"0%": {
|
||||
transform: "translateY(100%)",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(0%)",
|
||||
color: "hsl(var(--secondary))",
|
||||
},
|
||||
},
|
||||
"gradient-y": {
|
||||
"0%, 100%": {
|
||||
"background-size": "400% 400%",
|
||||
"background-position": "center top",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "center center",
|
||||
},
|
||||
},
|
||||
"gradient-x": {
|
||||
"0%, 100%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "left center",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "right center",
|
||||
},
|
||||
},
|
||||
"gradient-xy": {
|
||||
"0%, 100%": {
|
||||
"background-size": "400% 400%",
|
||||
"background-position": "left center",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "right center",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
} satisfies Config;
|
||||
*/
|
||||
|
|
68
tailwind.config.ts
Normal file
68
tailwind.config.ts
Normal file
|
@ -0,0 +1,68 @@
|
|||
import type { Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
animation: {
|
||||
reveal: "reveal 0.3s forwards ease-in-out",
|
||||
logo: "logo 0.5s forwards ease-out",
|
||||
"gradient-x": "gradient-x 6s ease infinite",
|
||||
"gradient-y": "gradient-y 6s ease infinite",
|
||||
"gradient-xy": "gradient-xy 6s ease infinite",
|
||||
},
|
||||
keyframes: {
|
||||
reveal: {
|
||||
"0%": {
|
||||
transform: "translateY(20px)",
|
||||
opacity: "0",
|
||||
filter: "blur(4px)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(0px)",
|
||||
opacity: "1",
|
||||
filter: "blur(0px)",
|
||||
},
|
||||
},
|
||||
logo: {
|
||||
"0%": {
|
||||
transform: "translateY(100%)",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(0%)",
|
||||
color: "hsl(var(--secondary))",
|
||||
},
|
||||
},
|
||||
"gradient-y": {
|
||||
"0%, 100%": {
|
||||
"background-size": "400% 400%",
|
||||
"background-position": "center top",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "center center",
|
||||
},
|
||||
},
|
||||
"gradient-x": {
|
||||
"0%, 100%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "left center",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "right center",
|
||||
},
|
||||
},
|
||||
"gradient-xy": {
|
||||
"0%, 100%": {
|
||||
"background-size": "400% 400%",
|
||||
"background-position": "left center",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "right center",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Config;
|
Loading…
Add table
Reference in a new issue