Personal Site
Add a proper header row divider between heading and content
+17
-2
src/assets/hr.png
src/assets/hr.png
This is a binary file and will not be displayed.
+17
-2
src/components/home/feeds/Post.astro
+17
-2
src/components/home/feeds/Post.astro
···
3
3
import { type Blob, type LegacyBlob } from "@atcute/lexicons";
4
4
import { AppBskyFeedPost } from "@atcute/bluesky";
5
5
import { segmentize } from "@atcute/bluesky-richtext-segmenter";
6
-
import BoxTlbr from "/assets/box-tlbr.png";
7
6
import { type Author, understoodDid, type embed } from "./post-types";
8
7
import {
9
8
images,
···
12
11
record,
13
12
recordWithMedia,
14
13
} from "./post-embeds";
14
+
15
+
import BoxTlbr from "/assets/box-tlbr.png";
16
+
import Hr from "/assets/hr.png";
15
17
16
18
interface Props {
17
19
post: AppBskyFeedPost.Main;
···
69
71
})();
70
72
---
71
73
72
-
<article class="post" style={`--box-tlbr-png: url(${BoxTlbr.src});`}>
74
+
<article
75
+
class="post"
76
+
style={`
77
+
--box-tlbr-png: url(${BoxTlbr.src});
78
+
--hr-png: url(${Hr.src});
79
+
`}
80
+
>
73
81
<section class="author">
74
82
{author.avatar && <img src={author.avatar} alt="" class="avatar" />}
75
83
{
···
171
179
.handle {
172
180
grid-area: handle;
173
181
}
182
+
}
183
+
184
+
hr {
185
+
margin-block: 5px;
186
+
height: 5px;
187
+
border: none;
188
+
border-image: var(--hr-png) 0 5 fill / 0 5px round;
174
189
}
175
190
176
191
.post-text {