Personal Site
Make blog previews 4/3 instead of 2/1
+15
-15
src/assets/box-2x1-mask.png
src/assets/box-2x1-mask.png
This is a binary file and will not be displayed.
src/assets/box-4x3-mask.png
src/assets/box-4x3-mask.png
This is a binary file and will not be displayed.
+4
-4
src/components/Markdown.astro
+4
-4
src/components/Markdown.astro
···
1
1
---
2
2
import Base from "./Base.astro";
3
3
4
-
import Box2x1Mask from "/assets/box-2x1-mask.png";
4
+
import Box4x3Mask from "/assets/box-4x3-mask.png";
5
5
import Hr from "/assets/hr.png";
6
6
7
7
import "/components/markdown.css";
···
28
28
url: Astro.url.toString(),
29
29
}}
30
30
>
31
-
<header style={`--box-2x1-mask-png: url(${Box2x1Mask.src});`}>
31
+
<header style={`--box-4x3-mask-png: url(${Box4x3Mask.src});`}>
32
32
{frontmatter.graph?.image && <img src={frontmatter.graph.image} alt="" />}
33
33
<h1>{frontmatter.title}</h1>
34
34
</header>
···
49
49
50
50
img {
51
51
width: 100%;
52
-
aspect-ratio: 2;
52
+
aspect-ratio: 4/3;
53
53
object-fit: cover;
54
-
mask-image: var(--box-2x1-mask-png);
54
+
mask-image: var(--box-4x3-mask-png);
55
55
mask-size: 100%;
56
56
}
57
57
+4
-4
src/components/home/Blog.astro
+4
-4
src/components/home/Blog.astro
···
3
3
4
4
import BoxTlbr from "/assets/box-tlbr.png";
5
5
import Hr from "/assets/hr.png";
6
-
import Box2x1Mask from "/assets/box-2x1-mask.png";
6
+
import Box4x3Mask from "/assets/box-4x3-mask.png";
7
7
8
8
const posts = await getCollection("blog");
9
9
···
19
19
style={`
20
20
--box-tlbr-png: url(${BoxTlbr.src});
21
21
--hr-png: url(${Hr.src});
22
-
--box-2x1-mask-png: url(${Box2x1Mask.src})
22
+
--box-4x3-mask-png: url(${Box4x3Mask.src})
23
23
`}
24
24
>
25
25
<HeadingLevel>Blog Posts</HeadingLevel>
···
62
62
63
63
img {
64
64
width: 100%;
65
-
aspect-ratio: 2;
65
+
aspect-ratio: 4/3;
66
66
object-fit: cover;
67
-
mask-image: var(--box-2x1-mask-png);
67
+
mask-image: var(--box-4x3-mask-png);
68
68
mask-size: 100%;
69
69
}
70
70
+4
-4
src/pages/blog/[...slug].astro
+4
-4
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";
6
+
import Box4x3Mask from "/assets/box-4x3-mask.png";
7
7
import Hr from "/assets/hr.png";
8
8
9
9
import "/components/markdown.css";
···
39
39
>
40
40
<header
41
41
style={`
42
-
--box-2x1-mask-png: url(${Box2x1Mask.src});
42
+
--box-4x3-mask-png: url(${Box4x3Mask.src});
43
43
`}
44
44
>
45
45
<img src={banner} alt="" />
···
68
68
69
69
img {
70
70
width: 100%;
71
-
aspect-ratio: 2;
71
+
aspect-ratio: 4/3;
72
72
object-fit: cover;
73
-
mask-image: var(--box-2x1-mask-png);
73
+
mask-image: var(--box-4x3-mask-png);
74
74
mask-size: 100%;
75
75
}
76
76
+3
-3
src/pages/rss.style.xml.ts
+3
-3
src/pages/rss.style.xml.ts
···
1
1
import BoxTlbr from "/assets/box-tlbr.png";
2
2
import Hr from "/assets/hr.png";
3
-
import Box2x1Mask from "/assets/box-2x1-mask.png";
3
+
import Box4x3Mask from "/assets/box-4x3-mask.png";
4
4
5
5
export async function GET() {
6
6
return new Response(
···
46
46
47
47
img {
48
48
width: 100%;
49
-
aspect-ratio: 2;
49
+
aspect-ratio: 4/3;
50
50
object-fit: cover;
51
-
mask-image: url("${Box2x1Mask.src}");
51
+
mask-image: url("${Box4x3Mask.src}");
52
52
mask-size: 100%;
53
53
}
54
54