this repo has no description
0
fork

Configure Feed

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

Add base styling to individual blog posts

+92 -3
+92 -3
src/pages/blog/[id].astro
··· 1 1 --- 2 2 import Base from "@/Base.astro"; 3 + import { render } from "astro:content"; 3 4 import { getEntry } from "astro:content"; 4 5 const { id } = Astro.params; 5 6 const r404 = Astro.redirect("/404"); ··· 7 8 if (!id) return r404; 8 9 const post = await getEntry("blog", id); 9 10 if (!post) return r404; 11 + 12 + const { 13 + data: { title }, 14 + } = post; 15 + const { Content } = await render(post); 10 16 --- 11 17 12 - <Base title={post.data.title}> 13 - <h1>{post.data.title}</h1> 14 - <p>{JSON.stringify(post)}</p> 18 + <Base title={title}> 19 + <main data-nojs> 20 + <div class="content"> 21 + <h1>{title}</h1> 22 + <Content /> 23 + </div> 24 + </main> 15 25 </Base> 26 + 27 + <script> 28 + document.querySelectorAll("main[data-nojs]").forEach((el) => { 29 + if (!(el instanceof HTMLElement)) throw new Error("Not HTML Element!"); 30 + delete el.dataset["nojs"]; 31 + const colourScheme = matchMedia("(prefers-color-scheme: light)"); 32 + 33 + const updateColourScheme = () => { 34 + el.dataset["mode"] = colourScheme.matches ? "light" : "dark"; 35 + }; 36 + updateColourScheme(); 37 + 38 + colourScheme.addEventListener("change", () => updateColourScheme()); 39 + }); 40 + </script> 41 + 42 + <style> 43 + @property --bg { 44 + syntax: "<color>"; 45 + inherits: true; 46 + } 47 + 48 + /* set colours based on system colour scheme */ 49 + :root:has([data-nojs]) { 50 + --bg: light-dark(white, black); 51 + --text: light-dark(black, white); 52 + } 53 + 54 + :root:not(:has([data-nojs])) { 55 + --bg: gray; 56 + 57 + &:has([data-mode="light"]) { 58 + --bg: white; 59 + --text: black; 60 + } 61 + 62 + &:has([data-mode="dark"]) { 63 + --bg: black; 64 + --text: white; 65 + } 66 + } 67 + 68 + main { 69 + background-color: var(--bg); 70 + color: var(--text); 71 + 72 + min-height: 100lvh; 73 + } 74 + 75 + .content, 76 + .full-width { 77 + --padding-inline: 2rem; 78 + --content-max-width: 60ch; 79 + --breakout-max-width: 80ch; 80 + 81 + --content-size: min(100% - var(--padding-inline) * 2, var(--content-max-width)); 82 + --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2); 83 + 84 + display: grid; 85 + grid-template-columns: 86 + [full-width-start] minmax(var(--padding-inline), 1fr) 87 + [breakout-start] minmax(0, var(--breakout-size)) 88 + [content-start] var(--content-size) [content-end] 89 + minmax(0, var(--breakout-size)) [breakout-end] 90 + minmax(var(--padding-inline), 1fr) [full-width-end]; 91 + 92 + & > :global(*) { 93 + grid-column: content; 94 + } 95 + 96 + & > :global(.breakout) { 97 + grid-column: breakout; 98 + } 99 + 100 + & > :global(.full-width) { 101 + grid-column: full-width; 102 + } 103 + } 104 + </style>