My landing page, written in Astro
hayden.moe
feat: styling tweaks
+43
-10
+1
-1
src/app/components/header.tsx
+1
-1
src/app/components/header.tsx
···
1
1
export const Header = () => (
2
-
<nav className="border-b border-muted justify-left divide-x divide-muted [&>a]:py-1 [&>a]:px-4 fixed w-full bg-black flex items-center">
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
3
<a href="/" className="flex items-center gap-2 text-[var(--base0A)]">
4
4
<span>hayden@web ~</span>
5
5
<div className="w-[10px] h-[21px] animate-blink bg-pink"></div>
+1
-1
src/app/root.tsx
+1
-1
src/app/root.tsx
+3
-4
src/app/routes/posts.$rkey.tsx
+3
-4
src/app/routes/posts.$rkey.tsx
···
1
1
import { LoaderFunctionArgs, MetaFunction } from 'react-router';
2
2
import { useLoaderData } from 'react-router';
3
3
import { getPost } from 'src/atproto/getPost';
4
-
import { WhtwndBlogEntryView } from 'src/types';
5
4
import { FormattedDate } from '../components/formatted-date';
6
5
import Markdown from 'react-markdown';
7
6
···
54
53
55
54
return (
56
55
<>
57
-
<header className="-mx-5 px-5 border-b border-muted pb-5">
58
-
<h1 className="font-bold">{post.title}</h1>
56
+
<header className="-mx-5 px-5">
57
+
<h1 className="font-bold before-hash-1">{post.title}</h1>
59
58
<span className="text-[var(--base03)]">
60
59
<FormattedDate date={new Date(Date.parse(post.createdAt))} />
61
60
</span>
62
61
</header>
63
62
64
-
<Markdown className="prose max-w-5xl py-5">
63
+
<Markdown className="prose max-w-5xl pb-5">
65
64
{post.content}
66
65
</Markdown>
67
66
</>
+2
-2
src/app/routes/posts._index.tsx
+2
-2
src/app/routes/posts._index.tsx
···
28
28
29
29
return (
30
30
<div className="-mx-5 flex flex-col">
31
-
<header className="flex flex-col border-b border-muted pb-5 px-5">
32
-
<h1 className="font-bold">Posts</h1>
31
+
<header className="flex flex-col px-5">
32
+
<h1 className="font-bold before-hash-1">Posts</h1>
33
33
<p className="text-[var(--base03)]">
34
34
Showing {posts.length} posts of {posts.length}.
35
35
</p>
+15
src/app/tailwind.css
+15
src/app/tailwind.css
···
29
29
.rendering-pixelated {
30
30
image-rendering: pixelated;
31
31
}
32
+
33
+
.before-hash-1::before {
34
+
content: "# " / "";
35
+
color: var(--base03);
36
+
}
37
+
38
+
.before-hash-2::before {
39
+
content: "## " / "";
40
+
color: var(--base03);
41
+
}
42
+
43
+
.before-hash-3::before {
44
+
content: "### " / "";
45
+
color: var(--base03);
46
+
}
32
47
}
33
48
34
49
hr {
+20
-1
tailwind.config.ts
+20
-1
tailwind.config.ts
···
18
18
19
19
colors: {
20
20
black: "var(--base00)",
21
-
white: "var(--base05)",
21
+
white: "var(--base04)",
22
22
gray: "var(--base02)",
23
23
muted: "var(--base02)",
24
24
pink: "var(--base0A)",
25
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
+
},
26
45
},
27
46
28
47
animation: {