vielle.dev
Personal Site
Change the [...slug] page so it doesnt look ugly as shit lmao
src/assets/box-4x3-mask.png
src/assets/box-4x3-mask.png
This is a binary file and will not be displayed.
+2
-2
src/components/Markdown.astro
+2
-2
src/components/Markdown.astro
+10
-5
src/components/markdown.css
+10
-5
src/components/markdown.css
···
1
1
/* all styles should be scoped
2
2
to be child of article to avoid
3
3
conflicting other styles */
4
-
article {
4
+
.markdown-style {
5
5
/* comfy reading width centered */
6
6
max-width: 60ch;
7
7
padding: 10px;
···
92
92
list-style-type: none;
93
93
94
94
input {
95
-
margin-inline-end: .5em;
95
+
margin-inline-end: 0.5em;
96
96
}
97
97
}
98
98
}
99
99
100
-
img, audio, video, iframe, svg {
100
+
img,
101
+
audio,
102
+
video,
103
+
iframe,
104
+
svg {
101
105
width: 100%;
102
106
height: auto;
103
107
}
···
108
112
background: #00000020;
109
113
}
110
114
111
-
th, td {
115
+
th,
116
+
td {
112
117
padding: 5px;
113
-
border: 1px solid #00000040
118
+
border: 1px solid #00000040;
114
119
}
115
120
}
116
121
}
+37
-19
src/pages/blog/[...slug].astro
+37
-19
src/pages/blog/[...slug].astro
···
37
37
image: banner,
38
38
}}
39
39
>
40
-
<header
41
-
style={`
40
+
<article>
41
+
<header
42
+
style={`
42
43
--box-4x3-mask-png: url(${Box4x3Mask.src});
43
44
`}
44
-
>
45
-
<img src={banner} alt="" />
46
-
<h1>{post.data.title}</h1>
47
-
<time
48
-
datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth()}-${post.data.pub.getDate()}`}
49
-
>{post.data.pub.getDate()}-{post.data.pub.getMonth()}-{
50
-
post.data.pub.getFullYear()
51
-
}</time
52
45
>
53
-
</header>
46
+
<img src={banner} alt="" />
47
+
<div class="header">
48
+
<h1>{post.data.title}</h1>
49
+
<p>{post.data.bio}</p>
50
+
<time
51
+
datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`}
52
+
>
53
+
{post.data.pub.getDate()} -
54
+
{post.data.pub.getMonth() + 1} -
55
+
{post.data.pub.getFullYear()}
56
+
</time>
57
+
</div>
58
+
</header>
54
59
55
-
<hr style={`--hr-png: url(${Hr.src});`} />
60
+
<hr style={`--hr-png: url(${Hr.src});`} />
56
61
57
-
<article>
58
-
<Content />
62
+
<div class="markdown-style">
63
+
<Content />
64
+
</div>
59
65
</article>
60
66
</Base>
61
67
···
64
70
max-width: 60ch;
65
71
padding: 10px;
66
72
margin: auto;
73
+
74
+
position: relative;
75
+
}
76
+
77
+
.header {
78
+
/* just use old layout on mobile
79
+
it works there */
80
+
@media not (max-width: 60ch) {
81
+
position: absolute;
82
+
inset: auto 50px 0;
83
+
84
+
background-image: var(--box-4x3-mask-png);
85
+
background-size: 100% 100%;
86
+
padding: 20px;
87
+
}
67
88
}
68
89
69
90
img {
···
83
104
height: 5px;
84
105
border: none;
85
106
border-image: var(--hr-png) 0 5 fill / 0 5px round;
86
-
width: clamp(60ch, 80vw, 120ch);
107
+
width: 100%;
108
+
max-width: 70ch;
87
109
margin-inline: auto;
88
-
89
-
@media (max-width: 60ch) {
90
-
width: 100%;
91
-
}
92
110
}
93
111
</style>