72 lines
1.6 KiB
CSS
72 lines
1.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-background-dark: oklch(from var(--color-violet-950) 24% 0.08 h);
|
|
|
|
--link-bg-l: 53.5%;
|
|
--hover-darken: 0.05;
|
|
|
|
--color-fur-affinity: oklch(from #353b45 var(--link-bg-l) c h);
|
|
--color-fur-affinity-hover: oklch(
|
|
from var(--color-fur-affinity) calc(l - var(--hover-darken)) c h
|
|
);
|
|
|
|
--color-github: #1f2328;
|
|
--color-github-hover: oklch(
|
|
from var(--color-github) calc(l - var(--hover-darken)) c h
|
|
);
|
|
|
|
--color-keyoxide: #6855c3;
|
|
--color-keyoxide-hover: oklch(
|
|
from var(--color-keyoxide) calc(l - var(--hover-darken)) c h
|
|
);
|
|
|
|
--color-mastodon: oklch(from #6364ff var(--link-bg-l) c h);
|
|
--color-mastodon-hover: oklch(
|
|
from var(--color-mastodon) calc(l - var(--hover-darken)) c h
|
|
);
|
|
|
|
--color-matrix: oklch(from #0dbd8b var(--link-bg-l) c h);
|
|
--color-matrix-hover: oklch(
|
|
from var(--color-matrix) calc(l - var(--hover-darken)) c h
|
|
);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply dark:bg-background-dark bg-neutral-50 text-black dark:text-white;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-5xl font-bold;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.link-fur-affinity {
|
|
@apply bg-fur-affinity hover:bg-fur-affinity-hover text-white;
|
|
}
|
|
|
|
.link-github {
|
|
@apply bg-github hover:bg-github-hover text-white;
|
|
}
|
|
|
|
.link-keyoxide {
|
|
@apply bg-keyoxide hover:bg-keyoxide-hover text-white;
|
|
}
|
|
|
|
.link-mastodon {
|
|
@apply bg-mastodon hover:bg-mastodon-hover text-white;
|
|
}
|
|
|
|
.link-matrix {
|
|
@apply bg-matrix hover:bg-matrix-hover text-white;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-soft {
|
|
@apply text-zinc-600 dark:text-zinc-400;
|
|
}
|
|
}
|