Personal Site
0
fork

Configure Feed

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

Expand markdown styling further im to lazy to be specific

+77 -3
+77 -3
src/components/markdown.css
··· 1 - /* all styles should be scoped to be child of article to avoid conflicting other styles */ 1 + /* all styles should be scoped 2 + to be child of article to avoid 3 + conflicting other styles */ 2 4 article { 3 5 /* comfy reading width centered */ 4 6 max-width: 60ch; 5 7 margin: auto; 8 + --content-gap: 20px; 6 9 7 - /* all headings should have leading and trailing margins but not between other headings */ 10 + /* all headings should have 11 + leading and trailing margins 12 + but not between other headings */ 8 13 h1, 9 14 h2, 10 15 h3, 11 16 h4, 12 17 h5, 13 18 h6 { 14 - margin-block: 10px; 19 + margin-block: var(--content-gap); 15 20 16 21 & + & { 17 22 margin-block-start: 0px; ··· 19 24 20 25 &:has(+ &) { 21 26 margin-block-end: 0px; 27 + } 28 + } 29 + 30 + > p, 31 + > ul, 32 + > ol, 33 + pre, 34 + blockquote, 35 + table, 36 + hr { 37 + margin-block: var(--content-gap); 38 + } 39 + 40 + :not(pre) > code { 41 + background-color: #00000020; 42 + padding: 2.5px; 43 + border-radius: 5px; 44 + box-decoration-break: clone; 45 + } 46 + 47 + pre { 48 + padding: 10px; 49 + border-radius: 10px; 50 + } 51 + 52 + blockquote { 53 + margin-left: 10px; 54 + padding-left: 10px; 55 + border-image: url(../assets/vr.png) 0 5 fill / 0 0 0 5px round; 56 + } 57 + 58 + hr { 59 + height: 5px; 60 + border: none; 61 + border-image: url(../assets/hr.png) 0 5 fill / 0 5px round; 62 + } 63 + 64 + ul, 65 + ol { 66 + padding-inline-start: 2em; 67 + 68 + & ol { 69 + list-style: lower-alpha; 70 + 71 + & ol { 72 + list-style: lower-roman; 73 + 74 + & ol { 75 + list-style: lower-greek; 76 + 77 + & ol { 78 + list-style: decimal; 79 + 80 + & ol ol { 81 + /* easter egg incase i ever go 7 deep lmao */ 82 + list-style: hebrew; 83 + } 84 + } 85 + } 86 + } 87 + } 88 + 89 + &.contains-task-list { 90 + /* checkbox is marker */ 91 + list-style-type: none; 92 + 93 + input { 94 + margin-inline-end: .5em; 95 + } 22 96 } 23 97 } 24 98 }