my website
better styling and headers in the blog pages
+83
-21
+2
-1
buildblog.sh
+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
+2
src/blog/2025-09-14-test/content.djot
+22
-10
src/blog/template_index.html
+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
+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$ – $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
+1
-5
src/index.html
+35
src/style.css
+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;