this repo has no description
Replace body of post with <section> instead of <a>
+12
-13
+12
-13
src/components/blog/Post.astro
+12
-13
src/components/blog/Post.astro
···
17
17
const img = data.image.match(/.*(?=\.png)/gm);
18
18
if (img === null) return;
19
19
return await import(`../../posts/assets/${img[0]}.png`).then(
20
-
(x) => x.default,
20
+
(x) => x.default
21
21
);
22
22
})();
23
23
···
51
51
];
52
52
---
53
53
54
-
<a
54
+
<section
55
55
style={`--colour: ${data.colour};
56
56
--layer: ${layer};
57
57
···
61
61
.map(
62
62
(x, i) =>
63
63
`--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}rem) * ${positions[0] + x[0]} + ${blog.post.xPadding}rem);
64
-
--y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}rem;`,
64
+
--y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}rem;`
65
65
)
66
66
.join("\n")}
67
67
···
75
75
--width: ${blog.post.width}rem;
76
76
--y-gap: ${blog.post.yGap}rem;
77
77
`}
78
-
href={`/blog/${id}/`}
79
78
>
80
79
<Image src={image} alt="" />
81
80
<div>
82
-
({id}) {data.title}
81
+
<a href={`/blog/${id}/`}>({id}) {data.title}</a>
83
82
<br />
84
83
<time datetime={`${date.year}-${date.month}-${date.day}`}
85
84
>{date.day}-{date.month}-{date.year}</time
86
85
>
87
86
</div>
88
-
</a>
87
+
</section>
89
88
90
89
<style>
91
90
@property --x-offset-0 {
···
159
158
}
160
159
}
161
160
162
-
a {
161
+
section {
163
162
width: var(--width);
164
163
background-color: white;
165
164
border: 0.5rem solid var(--colour, dodgerblue);
166
165
border-radius: 2.5rem;
167
166
padding: 1rem;
168
-
display: block;
169
-
--box-shadow-colour: #00000080;
170
-
box-shadow: 0 0 7.5rem var(--box-shadow-colour);
167
+
box-shadow: 0 0 7.5rem var(--box-shadow-colour, #00000080);
171
168
margin-bottom: var(--y-gap);
172
169
173
170
/* default, overridden by reduced motion */
···
181
178
position: relative;
182
179
z-index: var(--layer);
183
180
184
-
&:focus-visible,
185
-
&:active {
181
+
&:has(a:focus) {
186
182
animation-play-state: paused;
187
183
--box-shadow-colour: var(--colour);
188
-
outline: none;
184
+
& a:focus {
185
+
text-decoration: none;
186
+
outline: none;
187
+
}
189
188
}
190
189
191
190
& > img {