vielle.dev
+1
src/components/markdown.css
+1
src/components/markdown.css
+43
-1
src/pages/blog/[...slug].astro
+43
-1
src/pages/blog/[...slug].astro
···
3
3
import Base from "/components/Base.astro";
4
4
import { render } from "astro:content";
5
5
6
+
import Box2x1Mask from "/assets/box-2x1-mask.png";
7
+
import Hr from "/assets/hr.png";
8
+
6
9
import "/components/markdown.css";
7
10
8
11
export async function getStaticPaths() {
···
34
37
image: banner,
35
38
}}
36
39
>
37
-
<header>
40
+
<header
41
+
style={`
42
+
--box-2x1-mask-png: url(${Box2x1Mask.src});
43
+
`}
44
+
>
38
45
<img src={banner} alt="" />
39
46
<h1>{post.data.title}</h1>
40
47
<time
···
44
51
}</time
45
52
>
46
53
</header>
54
+
55
+
<hr style={`--hr-png: url(${Hr.src});`} />
47
56
48
57
<article>
49
58
<Content />
50
59
</article>
51
60
</Base>
61
+
62
+
<style>
63
+
header {
64
+
max-width: 60ch;
65
+
padding: 10px;
66
+
margin: auto;
67
+
}
68
+
69
+
img {
70
+
width: 100%;
71
+
aspect-ratio: 2;
72
+
object-fit: cover;
73
+
mask-image: var(--box-2x1-mask-png);
74
+
mask-size: 100%;
75
+
}
76
+
77
+
time {
78
+
color: #000000b0;
79
+
}
80
+
81
+
hr {
82
+
margin-block: 5px;
83
+
height: 5px;
84
+
border: none;
85
+
border-image: var(--hr-png) 0 5 fill / 0 5px round;
86
+
width: clamp(60ch, 80vw, 120ch);
87
+
margin-inline: auto;
88
+
89
+
@media (max-width: 60ch) {
90
+
width: 100%;
91
+
}
92
+
}
93
+
</style>