Some cleanup

layouts/_default/single.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "main" }}
-	<h2 id="{{ .Title }}">{{ .Title }}</h2>
+	<h2 id="{{ .Title }}"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
 	{{ with .Lastmod }}
 		<p>
 			Posted on {{ dateFormat "Jan 2 2006" . }}

layouts/blog/li.html

@@ -1,6 +1,8 @@
 <h3>
 	<a style="flex-shrink: 1; margin-right: auto;" href="{{ .Permalink }}">
-		{{ print .Title " posted on " (dateFormat "Jan 2 2006" (cond .Date.IsZero .Lastmod .Date)) }}
+		{{ .Title }}
 	</a>
+	<br />
+	<small>Posted on {{ dateFormat "Jan 2 2006" (cond .Date.IsZero .Lastmod .Date) }}</small>
 </h3>
 {{ .Summary }}

layouts/index.html

@@ -2,19 +2,32 @@
 
 {{ .Content }}
 
-<h2 id="latest-posts">Latest <a href="/blog">Blog</a> Posts (<a target="_blank" href="/blog/index.xml">RSS</a>)</h2>
+<details open>
+	<summary>
+		<h2 id="latest-posts">
+			Latest <a href="/blog">Blog</a> Posts (<a target="_blank" href="/blog/index.xml">RSS</a>)
+		</h2>
+	</summary>
 
 	{{ range (where .Site.RegularPages "Section" "blog") }}
 		{{ .Render "li" }}
 	{{ else }}
 		<p>Looks like there's nothing here!... yet!</p>
 	{{ end }}
+</details>
+
+<details open>
+	<summary>
+		<h2 id="latest-tips">
+			Latest <a href="/tips">Tips</a> (<a target="_blank" href="/tips/index.xml">RSS</a>)
+		</h2>
+	</summary>
 
-<h2 id="latest-tips">Latest <a href="/tips">Tips</a> (<a target="_blank" href="/tips/index.xml">RSS</a>)</h2>
 	{{ range (where .Site.RegularPages "Section" "tips") }}
 		{{ .Render "li" }}
 	{{ else }}
 		<p>Looks like there's nothing here!... yet!</p>
 	{{ end }}
+</details>
 
 {{ end }}

layouts/tips/li.html

@@ -1,6 +1,8 @@
 <h3>
 	<a style="flex-shrink: 1; margin-right: auto;" href="{{ .Permalink }}">
-		{{ print .Title " posted on " (dateFormat "Jan 2 2006" (cond .Date.IsZero .Lastmod .Date)) }}
+		{{ .Title }}
 	</a>
+	<br />
+	<small>Posted on {{ dateFormat "Jan 2 2006" (cond .Date.IsZero .Lastmod .Date) }}</small>
 </h3>
 {{ .Content }}

src/stylus/core.styl

@@ -9,7 +9,7 @@ a
 	color var(--link-fg)
 	&:visited { color: var(--link-visited-fg) }
 
-a > svg
+main a > svg
 	margin-right: 0.5em
 
 button.copy-code-button
@@ -31,6 +31,28 @@ button.copy-code-button
 
 img, embed, frame, iframe { max-width: 100vw }
 
+details > summary
+	cursor pointer
+	list-style none
+
+details > summary::-webkit-details-marker
+	display none
+
+details > summary::after
+	position absolute
+	top 0
+	right 0
+	align-self center
+	content "+"
+
+details[open] > summary::after
+	content "-"
+
+details
+	position relative
+	padding-left 0.5em
+	border-left solid var(--syntax-bpx) var(--syntax-ledg)
+
 html,body
 	min-height 100vh
 	background-color var(--bg)
@@ -56,7 +78,7 @@ html,body
 			border-left solid var(--syntax-bpx) var(--syntax-ledg)
 			display flex
 
-		.highlight, h1, h2, h3, h4, h5, h6, form, ul, ol, p
+		.highlight, h1, h2, h3, h4, h5, h6, form, ul, ol, p, details
 			margin-top 1em
 			margin-bottom 0.25em
 
@@ -219,7 +241,7 @@ form
 				line-height 1.5em
 				text-align left
 
-			h1, h2, h3, h4, h5, h6, form, ul, ol, p, table, .content
+			h1, h2, h3, h4, h5, h6, form, ul, ol, p, table, .content, details
 				position relative
 				max-width 600px
 				margin-left auto

static/global.mjs

@@ -38,7 +38,7 @@ document.querySelectorAll(".align-toggler").forEach((a) =>
 );
 
 window.addEventListener("load", (_ev) => {
-  const selector = [1, 2, 3, 4, 5, 6].map((n) => `h${n}[id]`).join(",");
+  const selector = [1, 2, 3, 4, 5, 6].map((n) => `main > h${n}[id]`).join(",");
   document.querySelectorAll(selector).forEach((el) => {
     const anchorLink = document.createElement("a");
     anchorLink.classList.add("anchor-link");