My landing page, written in Astro
hayden.moe
1@import '@fontsource/geist-mono' layer(base);
2
3@import 'tailwindcss';
4@plugin '@tailwindcss/typography';
5
6@theme {
7 --color-base00: #161616;
8 --color-base01: #262626;
9 --color-base02: #393939;
10 --color-base03: #525252;
11 --color-base04: #dde1e6;
12 --color-base05: #f2f4f8;
13 --color-base06: #ffffff;
14 --color-base07: #08bdba;
15 --color-base08: #3ddbd9;
16 --color-base09: #78a9ff;
17 --color-base0A: #ee5396;
18 --color-base0B: #33b1ff;
19 --color-base0C: #ff7eb6;
20 --color-base0D: #42be65;
21 --color-base0E: #be95ff;
22 --color-base0F: #82cfff;
23
24 --color-black: var(--color-base00);
25 --color-white: var(--color-base04);
26 --color-gray: var(--color-base02);
27 --color-muted: var(--color-base02);
28 --color-pink: var(--color-base0A);
29 --color-blue: var(--color-base0F);
30
31 --font-mono: 'Geist Mono', monospace;
32
33 --tracking-normal: -0.32px;
34 --leading-normal: 180%;
35
36 --animate-blink: blink 1.45s infinite step-start;
37
38 @keyframes blink {
39 0%, 25%, 100% { opacity: 1 }
40 50%, 75% { opacity: 0 }
41 }
42}
43
44@utility prose {
45 color: var(--color-white) !important;
46
47 strong { color: var(--color-blue) !important }
48
49 a { color: var(--color-pink) }
50
51 h1, h2, h3, h4, h5, h6 {
52 color: var(--color-white);
53 font-size: 1em;
54 &::before { color: var(--color-base03); }
55 }
56
57 h1::before { content: '# ' / '' !important; }
58 h2::before { content: '## ' / '' !important; }
59 h3::before { content: '### ' / '' !important; }
60 h4::before { content: '#### ' / '' !important; }
61 h5::before { content: '##### ' / '' !important; }
62 h6::before { content: '###### ' / '' !important; }
63
64 hr {
65 border-color: var(--color-muted);
66 width: 100%;
67 margin: 2em 0;
68 }
69
70 blockquote {
71 color: var(--color-blue);
72 border-inline-start-color: var(--color-base03);
73 font-style: normal
74 & p { color: var(--color-base04) }
75 }
76
77 pre {
78 background-color: var(--color-base00);
79 border: 1px solid var(--color-base02);
80 border-radius: 0;
81 }
82
83 code {
84 color: var(--color-base0E);
85 &::before { content: "" !important }
86 &::after { content: "" !important }
87 }
88}
89
90@layer base {
91 *,
92 ::after,
93 ::before,
94 ::backdrop,
95 ::file-selector-button {
96 border-color: var(--color-gray-200, currentColor);
97 }
98}
99
100@utility rendering-pixelated {
101 image-rendering: pixelated;
102}
103
104@utility before-hash-1 {
105 &::before {
106 content: '# ' / '';
107 color: var(--color-base03);
108 }
109}
110
111@utility before-hash-2 {
112 &::before {
113 content: '## ' / '';
114 color: var(--color-base03);
115 }
116}
117
118@utility before-hash-3 {
119 &::before {
120 content: '### ' / '';
121 color: var(--base03);
122 }
123}
124
125hr {
126 border-color: var(--color-base02);
127}
128
129pre:has(code) {
130 background-color: var(--color-base00) !important;
131 border-radius: 0;
132}