this repo has no description
0
fork

Configure Feed

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

Add configuration options to posts

+23 -3
+16 -3
src/components/blog/post.astro
··· 2 2 import type { InferEntrySchema } from "astro:content"; 3 3 import { Image } from "astro:assets"; 4 4 5 + import { blog } from "@/config"; 6 + 5 7 interface Props { 6 8 id: string; 7 9 data: InferEntrySchema<"blog">; ··· 17 19 18 20 <style> 19 21 a { 20 - width: 30rem; 22 + width: var(--width); 23 + height: var(--height); 21 24 background-color: white; 22 25 border: 0.5rem solid var(--colour, dodgerblue); 23 26 border-radius: 2.5rem; 24 27 padding: 1rem; 25 28 display: block; 26 29 box-shadow: 0 0 7.5rem #00000080; 30 + margin-bottom: var(--gap); 27 31 28 32 position: relative; 29 33 left: calc((100svw - 30rem) * var(--x-offset)); 30 34 31 - top: calc(10rem * var(--y-offset) - 5rem); 35 + top: calc(var(--y-leeway) * 2 * var(--y-offset) - var(--y-leeway)); 32 36 33 37 z-index: var(--layer); 34 38 ··· 43 47 </style> 44 48 45 49 <a 46 - style={`--colour: ${data.colour}; --layer: ${layer}; --x-offset: ${Math.random()}; --y-offset: ${Math.random()}`} 50 + style={`--colour: ${data.colour}; 51 + --layer: ${layer}; 52 + --x-offset: ${Math.random()}; 53 + --y-offset: ${Math.random()}; 54 + 55 + --y-leeway: ${blog.post.yLeeway}rem; 56 + ${blog.post.size[0] ? `--width: ${blog.post.size[0]}rem;` : ""} 57 + ${blog.post.size[1] ? `--height: ${blog.post.size[1]}rem;` : ""} 58 + --gap: ${blog.post.gap}rem; 59 + `} 47 60 href={`/blog/${id}/`} 48 61 > 49 62 <Image src={image} alt={data.image.alt} />
+7
src/config.ts
··· 1 + export const blog = { 2 + post: { 3 + yLeeway: 5, 4 + size: [30, undefined], 5 + gap: 10 6 + }, 7 + };