Personal Site
1---
2import Base from "./Base.astro";
3
4import Box4x3Mask from "/assets/box-4x3-mask.png";
5import Hr from "/assets/hr.png";
6
7import "/components/markdown.css";
8
9interface Props {
10 frontmatter: {
11 title: string;
12 graph?: {
13 description: string;
14 type?: "website" | "article" | `${"music" | "video"}.${string}`;
15 image?: string;
16 };
17 };
18}
19
20const { frontmatter } = Astro.props;
21---
22
23<Base
24 title={frontmatter.title}
25 graph={{
26 description: "",
27 ...frontmatter.graph,
28 url: Astro.url.toString(),
29 }}
30>
31 <header style={`--box-4x3-mask-png: url(${Box4x3Mask.src});`}>
32 {frontmatter.graph?.image && <img src={frontmatter.graph.image} alt="" />}
33 <h1>{frontmatter.title}</h1>
34 </header>
35
36 <hr style={`--hr-png: url(${Hr.src});`} />
37
38 <article class="markdown-style">
39 <slot />
40 </article>
41</Base>
42
43<style>
44 header {
45 max-width: 60ch;
46 padding: 10px;
47 margin: auto;
48 }
49
50 img {
51 width: 100%;
52 aspect-ratio: 4/3;
53 object-fit: cover;
54 mask-image: var(--box-4x3-mask-png);
55 mask-size: 100%;
56 }
57
58 hr {
59 margin-block: 5px;
60 height: 5px;
61 border: none;
62 border-image: var(--hr-png) 0 5 fill / 0 5px round;
63 width: clamp(60ch, 80vw, 80ch);
64 margin-inline: auto;
65
66 @media (max-width: 60ch) {
67 width: calc(100% - 20px);
68 margin-inline: 10px;
69 }
70 }
71</style>