My landing page, written in Astro
hayden.moe
feat: update to tailwind v4 way of doing things
+96
-176
+6
-6
src/app/components/header.tsx
+6
-6
src/app/components/header.tsx
···
1
1
export const Header = () => (
2
2
<nav className="h-10 border-b border-muted justify-left divide-x divide-muted [&>a]:py-1 [&>a]:px-4 fixed w-full bg-black flex items-center">
3
-
<a href="/" className="flex items-center gap-2 text-[var(--base0A)]">
3
+
<a href="/" className="flex items-center gap-2 text-base0A">
4
4
<span>hayden@web ~</span>
5
5
<div className="w-[10px] h-[21px] animate-blink bg-pink"></div>
6
6
</a>
7
7
8
-
<a className="hover:text-[var(--base0E)]" href="/posts">posts</a>
9
-
<a className="hover:text-[var(--base0E)]" href="https://bsky.app/profile/hayden.moe">bluesky</a>
10
-
<a className="hover:text-[var(--base0E)]" href="https://twitch.tv/hayden_dev">twitch</a>
11
-
<a className="hover:text-[var(--base0E)]" href="https://github.com/hbjydev">github</a>
12
-
<a className="hover:text-[var(--base0E)] border-r! border-muted" href="/rss.xml">rss</a>
8
+
<a className="hover:text-base0E" href="/posts">posts</a>
9
+
<a className="hover:text-base0E" href="https://bsky.app/profile/hayden.moe">bluesky</a>
10
+
<a className="hover:text-base0E" href="https://twitch.tv/hayden_dev">twitch</a>
11
+
<a className="hover:text-base0E" href="https://github.com/hbjydev">github</a>
12
+
<a className="hover:text-base0E border-r! border-muted" href="/rss.xml">rss</a>
13
13
</nav>
14
14
);
+1
-1
src/app/root.tsx
+1
-1
src/app/root.tsx
···
45
45
<Meta />
46
46
<Links />
47
47
</head>
48
-
<body className="antialiased bg-black text-white font-mono tracking-normal leading-normal flex flex-col min-h-screen selection:bg-[var(--base0E)] selection:text-black">
48
+
<body className="antialiased bg-black text-white font-mono tracking-normal leading-normal flex flex-col min-h-screen selection:bg-base0E selection:text-black">
49
49
<div className="flex flex-col grow">
50
50
<Header />
51
51
+1
-1
src/app/routes/_index.tsx
+1
-1
src/app/routes/_index.tsx
+1
-1
src/app/routes/posts.$rkey.tsx
+1
-1
src/app/routes/posts.$rkey.tsx
+2
-2
src/app/routes/posts._index.tsx
+2
-2
src/app/routes/posts._index.tsx
···
30
30
<div className="-mx-5 flex flex-col">
31
31
<header className="flex flex-col px-5">
32
32
<h1 className="font-bold before-hash-1">Posts</h1>
33
-
<p className="text-[var(--base03)]">
33
+
<p className="text-base03">
34
34
Showing {posts.length} posts of {posts.length}.
35
35
</p>
36
36
</header>
···
43
43
<h2 className="text-pink font-bold">
44
44
<a href={`/posts/${post.rkey}/`}>{post.title}</a>
45
45
</h2>
46
-
<p className="text-[var(--base03)]">
46
+
<p className="text-base03">
47
47
<span className="date">
48
48
<FormattedDate date={new Date(Date.parse(post.createdAt))} />
49
49
</span>
+84
-33
src/app/tailwind.css
+84
-33
src/app/tailwind.css
···
1
1
@import '@fontsource/geist-mono' layer(base);
2
2
3
3
@import 'tailwindcss';
4
+
@plugin '@tailwindcss/typography';
4
5
5
-
@config '../../tailwind.config.ts';
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
+
a { color: var(--color-pink) }
48
+
49
+
h1, h2, h3, h4, h5, h6 {
50
+
color: var(--color-white);
51
+
font-size: 1em;
52
+
&::before { color: var(--color-base03); }
53
+
}
54
+
55
+
h1::before { content: '# ' / '' !important; }
56
+
h2::before { content: '## ' / '' !important; }
57
+
h3::before { content: '### ' / '' !important; }
58
+
h4::before { content: '#### ' / '' !important; }
59
+
h5::before { content: '##### ' / '' !important; }
60
+
h6::before { content: '###### ' / '' !important; }
61
+
62
+
hr {
63
+
border-color: var(--color-muted);
64
+
width: calc(100vw-1em);
65
+
margin: 2em -1.25em;
66
+
}
67
+
68
+
blockquote {
69
+
border-inline-start-color: var(--color-base03);
70
+
font-style: normal
71
+
& p { color: var(--color-base04) }
72
+
}
73
+
74
+
pre {
75
+
background-color: var(--color-base00);
76
+
border: 1px solid var(--color-base02);
77
+
border-radius: 0;
78
+
}
6
79
7
-
/*
8
-
The default border color has changed to `currentColor` in Tailwind CSS v4,
9
-
so we've added these compatibility styles to make sure everything still
10
-
looks the same as it did with Tailwind CSS v3.
80
+
code {
81
+
color: var(--color-base0E);
82
+
&::before { content: "" !important };
83
+
&::after { content: "" !important };
84
+
}
85
+
}
11
86
12
-
If we ever want to remove these styles, we need to add an explicit border
13
-
color utility to any element that depends on these defaults.
14
-
*/
15
87
@layer base {
16
88
*,
17
89
::after,
···
29
101
@utility before-hash-1 {
30
102
&::before {
31
103
content: '# ' / '';
32
-
color: var(--base03);
104
+
color: var(--color-base03);
33
105
}
34
106
}
35
107
36
108
@utility before-hash-2 {
37
109
&::before {
38
110
content: '## ' / '';
39
-
color: var(--base03);
111
+
color: var(--color-base03);
40
112
}
41
113
}
42
114
···
47
119
}
48
120
}
49
121
50
-
@layer base {
51
-
:root {
52
-
--base00: #161616;
53
-
--base01: #262626;
54
-
--base02: #393939;
55
-
--base03: #525252;
56
-
--base04: #dde1e6;
57
-
--base05: #f2f4f8;
58
-
--base06: #ffffff;
59
-
--base07: #08bdba;
60
-
--base08: #3ddbd9;
61
-
--base09: #78a9ff;
62
-
--base0A: #ee5396;
63
-
--base0B: #33b1ff;
64
-
--base0C: #ff7eb6;
65
-
--base0D: #42be65;
66
-
--base0E: #be95ff;
67
-
--base0F: #82cfff;
68
-
}
69
-
}
70
-
71
122
hr {
72
-
border-color: var(--base02);
123
+
border-color: var(--color-base02);
73
124
}
74
125
75
126
pre:has(code) {
76
-
background-color: var(--base00) !important;
127
+
background-color: var(--color-base00) !important;
77
128
border-radius: 0;
78
129
}
-131
tailwind.config.ts
-131
tailwind.config.ts
···
1
-
import type { Config } from 'tailwindcss';
2
-
import defaultTheme from 'tailwindcss/defaultTheme';
3
-
import typography from '@tailwindcss/typography';
4
-
5
-
export default {
6
-
content: ["./src/app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
7
-
theme: {
8
-
extend: {
9
-
lineHeight: {
10
-
normal: "180%",
11
-
},
12
-
letterSpacing: {
13
-
normal: "-0.32px",
14
-
},
15
-
fontFamily: {
16
-
mono: ["Geist Mono", "Courier New", ...defaultTheme.fontFamily.sans],
17
-
},
18
-
19
-
colors: {
20
-
black: "var(--base00)",
21
-
white: "var(--base04)",
22
-
gray: "var(--base02)",
23
-
muted: "var(--base02)",
24
-
pink: "var(--base0A)",
25
-
blue: "var(--base0F)",
26
-
27
-
base: {
28
-
'00': 'var(--base00)',
29
-
'01': 'var(--base01)',
30
-
'02': 'var(--base02)',
31
-
'03': 'var(--base03)',
32
-
'04': 'var(--base04)',
33
-
'05': 'var(--base05)',
34
-
'06': 'var(--base06)',
35
-
'07': 'var(--base07)',
36
-
'08': 'var(--base08)',
37
-
'09': 'var(--base09)',
38
-
'0A': 'var(--base0A)',
39
-
'0B': 'var(--base0B)',
40
-
'0C': 'var(--base0C)',
41
-
'0D': 'var(--base0D)',
42
-
'0E': 'var(--base0E)',
43
-
'0F': 'var(--base0F)',
44
-
},
45
-
},
46
-
47
-
animation: {
48
-
blink: "blink 1.45s infinite step-start",
49
-
},
50
-
51
-
keyframes: {
52
-
blink: {
53
-
"0%, 25%, 100%": { opacity: "1" },
54
-
"50%, 75%": { opacity: "0" },
55
-
},
56
-
},
57
-
58
-
typography: (theme: (acc: string) => string) => ({
59
-
DEFAULT: {
60
-
css: {
61
-
color: theme('colors.white'),
62
-
63
-
a: {
64
-
color: theme('colors.pink'),
65
-
},
66
-
67
-
h1: {
68
-
color: theme('colors.white'),
69
-
fontSize: '1em',
70
-
'&::before': {
71
-
content: '"# " / "" !important',
72
-
color: 'var(--base03)',
73
-
},
74
-
},
75
-
76
-
h2: {
77
-
color: theme('colors.white'),
78
-
fontSize: '1em',
79
-
'&::before': {
80
-
content: '"## " / "" !important',
81
-
color: 'var(--base03)',
82
-
},
83
-
},
84
-
85
-
h3: {
86
-
color: theme('colors.white'),
87
-
fontSize: '1em',
88
-
'&::before': {
89
-
content: '"### " / "" !important',
90
-
color: 'var(--base03)',
91
-
},
92
-
},
93
-
94
-
hr: {
95
-
'border-color': 'var(--base02)',
96
-
'width': 'calc(100vw - 1em)',
97
-
'margin': '2em -1.25em',
98
-
},
99
-
100
-
blockquote: {
101
-
"border-inline-start-color": 'var(--base03)',
102
-
"font-style": "normal",
103
-
p: {
104
-
color: 'var(--base04)',
105
-
},
106
-
},
107
-
108
-
pre: {
109
-
"background-color": 'var(--base00)',
110
-
"border": '1px solid var(--base02)',
111
-
'border-radius': '0',
112
-
},
113
-
114
-
code: {
115
-
color: 'var(--base0E)',
116
-
'&::before': {
117
-
content: '"" !important',
118
-
},
119
-
'&::after': {
120
-
content: '"" !important',
121
-
},
122
-
},
123
-
},
124
-
},
125
-
}),
126
-
},
127
-
},
128
-
plugins: [
129
-
typography,
130
-
],
131
-
} satisfies Config;