holly.mlem.systems
forked from
devins.page/devins.page
my website, hosted on wisp.place
devins.page
1@import "tailwindcss";
2@plugin "@tailwindcss/typography";
3
4@import "@fontsource-variable/geist";
5@import "@fontsource-variable/source-serif-4";
6@import "@fontsource-variable/geist-mono";
7@import "@fontsource/damion";
8
9/* devins.page brand colors from figma */
10
11@theme {
12 --color-dp-background-light: #ededfb;
13 --color-dp-background2-light: #ffffff;
14 --color-dp-text-light: #282934;
15 --color-dp-palette-red-light: #c77373;
16 --color-dp-palette-orange-light: #bc9979;
17 --color-dp-palette-yellow-light: #b8b574;
18 --color-dp-palette-green-light: #8bb46b;
19 --color-dp-palette-blue-light: #6c70c2;
20 --color-dp-palette-indigo-light: #9679bc;
21 --color-dp-palette-violet-light: #af6fa9;
22
23 --color-dp-background-dark: #282934;
24 --color-dp-background2-dark: #333440;
25 --color-dp-text-dark: #ededfb;
26 --color-dp-palette-red-dark: #bd6161;
27 --color-dp-palette-orange-dark: #ad7b4c;
28 --color-dp-palette-yellow-dark: #b5b154;
29 --color-dp-palette-green-dark: #7fb158;
30 --color-dp-palette-blue-dark: #595dc7;
31 --color-dp-palette-indigo-dark: #825ac4;
32 --color-dp-palette-violet-dark: #9c5194;
33}
34
35@theme {
36 --font-sans:
37 "Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
38 "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
39 --font-serif:
40 "Source Serif 4 Variable", ui-serif, Georgia, Cambria, "Times New Roman",
41 Times, serif;
42 --font-mono:
43 "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco,
44 Consolas, "Liberation Mono", "Courier New", monospace;
45 --font-cursive: "Damion", cursive;
46}
47
48a:hover {
49 @apply underline;
50}
51
52@media (prefers-color-scheme: dark) {
53 .astro-code,
54 .astro-code span {
55 color: var(--shiki-dark) !important;
56 background-color: var(--shiki-dark-bg) !important;
57 }
58}