my website
0
fork

Configure Feed

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

better styling and headers in the blog pages

chfour b210ba7c 1d11a89e

+83 -21
+2 -1
buildblog.sh
··· 38 38 backtoblogroot="$(for ((i=0; i < slashesinpath; i++)); do echo -n '../'; done)" 39 39 backtoblogroot="${backtoblogroot%/}" 40 40 jq '.title' "${post}/meta.json" 41 - jq -r --arg path "${post#./*/*/}" "${template}" "${post}/meta.json" >> ./index.html 41 + jq -r --arg path "${post}" "${template}" "${post}/meta.json" >> ./index.html 42 42 pandoc -f djot -t html5 \ 43 43 --mathml \ 44 44 --template="${page_template}" \ 45 45 --variable="backtoblogroot=${backtoblogroot}" \ 46 + --variable="path=${post#./}" \ 46 47 --metadata-file="${post}/meta.json" \ 47 48 "${post}/content.djot" -o "${post}/index.html" 48 49 done
+2
src/blog/2025-09-14-test/content.djot
··· 38 38 float sum_space = sum_space_i*sum_space_i + sum_space_q*sum_space_q; 39 39 /* ... */ 40 40 ``` 41 + 42 + i promise i'll change this syntax highlighting theme i know it looks bad
+22 -10
src/blog/template_index.html
··· 7 7 <title>blog index</title> 8 8 <link rel="stylesheet" href="../style.css"> 9 9 <style> 10 - a { 11 - text-decoration: none; 12 - } 10 + a { text-decoration: none; } 13 11 </style> 14 12 </head> 15 13 <body> 16 - <ul> 17 - <!--BEGIN TEMPLATE--> 18 - <li><article> 19 - <a href="{{$path}}/">{{.title | @html}}</a> {{.tags | map("<span class=\"tag\" data-tag=\"\(.)\">\(.)</span>") | join(" ")}} 20 - </article></li> 21 - <!--END TEMPLATE--> 22 - </ul> 14 + <nav> 15 + <img src="../platinum_fop_45_o.svg" alt="" width="64" height="64" id="fops"> 16 + <ul class="inline-list slashed"> 17 + <li><a href="../">home</a></li> 18 + </ul> 19 + </nav> 20 + <main> 21 + <header> 22 + <h1>blog index</h1> 23 + <p>posts & things & various ramblings, probably</p> 24 + </header> 25 + <ul> 26 + <!--BEGIN TEMPLATE--> 27 + <li><article> 28 + <a href="{{$path}}/">{{.title | @html}}</a> 29 + (<time datetime="{{.date}}">{{.date}}</time>) 30 + <span class="tags">{{.tags | map("<span class=\"tag\" data-tag=\"\(.)\">\(.)</span>") | join(" ")}}</span> 31 + </article></li> 32 + <!--END TEMPLATE--> 33 + </ul> 34 + </main> 23 35 </body> 24 36 </html>
+21 -5
src/blog/template_page.html
··· 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 6 <meta name="generator" content="pandoc and a shell script"> 7 7 <title>$if(title-prefix)$$title-prefix$ &ndash; $endif$$pagetitle$</title> 8 + <link rel="stylesheet" href="$backtoblogroot$/../style.css"> 9 + <style> 10 + main { 11 + max-width: 50rem; 12 + } 13 + </style> 8 14 $if(highlighting-css)$ 9 15 <link rel="stylesheet" href="$backtoblogroot$/highlighting.css"> 10 16 $endif$ 11 - <link rel="stylesheet" href="$backtoblogroot$/../style.css"> 12 17 $for(author-meta)$ 13 18 <meta name="author" content="$author-meta$" /> 14 19 $endfor$ ··· 26 31 $endfor$ 27 32 </head> 28 33 <body> 34 + <nav> 35 + <img src="$backtoblogroot$/../platinum_fop_45_o.svg" alt="" width="64" height="64" id="fops"> 36 + <ul class="inline-list slashed"> 37 + <li><a href="$backtoblogroot$/../">home</a></li> 38 + <li><a href="$backtoblogroot$/">blog</a></li> 39 + </ul> 40 + </nav> 29 41 <article> 30 42 $for(include-before)$ 31 43 $include-before$ 32 44 $endfor$ 33 45 $if(title)$ 34 - <header id="title-block-header"> 35 - <h1 class="title">$title$</h1> 36 - <p> 46 + <header> 47 + <h1 id="title">$title$</h1> 48 + <p id="details"> 37 49 $if(date-meta)$ 38 50 <time datetime="$date-meta$">$date-meta$</time> 39 51 $endif$ 40 - $for(tags)$<span class="tag" data-tag="$tags$">$tags$</span> $endfor$ 52 + <span class="tags"> 53 + $for(tags)$ 54 + <span class="tag" data-tag="$tags$">$tags$</span> 55 + $endfor$ 56 + </span> 41 57 </p> 42 58 $if(subtitle)$ 43 59 <p class="subtitle">$subtitle$</p>
+1 -5
src/index.html
··· 9 9 #fops { 10 10 height: auto; 11 11 max-width: 100%; 12 - margin-block: 2em; 13 - filter: drop-shadow(0 0 5px #ccc); 14 - } 15 - @media (prefers-color-scheme: dark) { 16 - #fops { filter: drop-shadow(0 0 5px #f2f2f277); } 12 + margin-block: 2rem; 17 13 } 18 14 :root { 19 15 display: flex;
+35
src/style.css
··· 45 45 font-weight: 500; 46 46 47 47 margin: 3rem; 48 + margin-top: 2rem; 48 49 } 49 50 50 51 a { color: var(--color-link); } 51 52 a:visited { color: var(--color-link-visited); } 52 53 53 54 img { display: block; } 55 + 56 + #fops { filter: drop-shadow(0 0 5px #ccc); } 57 + @media (prefers-color-scheme: dark) { 58 + #fops { filter: drop-shadow(0 0 5px #f2f2f277); } 59 + } 60 + 61 + time { font-feature-settings: "tnum"; } 62 + 63 + nav #fops { display: inline; } 64 + nav { 65 + display: flex; 66 + gap: 1rem; 67 + margin-bottom: 1rem; 68 + } 69 + nav > ul { 70 + margin-block: auto; 71 + font-size: 1.1em; 72 + } 73 + /* specificity hack lol */ 74 + nav a[href] { 75 + color: var(--color-link); 76 + text-decoration: none; 77 + } 78 + 79 + header > * { margin-block: 0; } 80 + header { 81 + margin-top: 1rem; 82 + margin-bottom: 1rem; 83 + } 84 + h1 { 85 + font-size: 2.5em; /* shur up firefox */ 86 + line-height: 1; 87 + margin-bottom: 0.4rem; 88 + } 54 89 55 90 .inline-list { 56 91 list-style-type: none;