Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Make blog previews 4/3 instead of 2/1

+15 -15
src/assets/box-2x1-mask.png

This is a binary file and will not be displayed.

src/assets/box-4x3-mask.png

This is a binary file and will not be displayed.

+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
··· 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
··· 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
··· 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