From 33e244efd6c3715150641663cdf0d68c96110b7c Mon Sep 17 00:00:00 2001
From: Marty Sluijtman <marty.wanderer@disroot.org>
Date: Sun, 18 Sep 2022 12:29:02 +0200
Subject: [PATCH] Columns and header references

---
 layouts/_default/single.html | 8 +++++++-
 static/style.css             | 7 ++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 797bc91..0dd26c2 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -39,9 +39,15 @@
     </div>
   {{ end }}
 
+  {{ if eq .Type $.Site.Params.contentTypeName }}
   <div class="post-content">
-    {{ .Content }}
+    {{- with .Content -}}
+    {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1} <a href="#${2}" class="anchor" ariaLabel="Anchor">#</a> ${3}` | safeHTML }}
+    {{- end -}}
   </div>
+  {{ else }}
+  {{ .Content }}
+  {{ end }}
 
   {{ if eq .Type $.Site.Params.contentTypeName }}
   {{ partial "posts_pagination.html" . }}
diff --git a/static/style.css b/static/style.css
index dd12bec..17fd0d8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -16,6 +16,8 @@ body{ padding: 0; margin: 0; }
 a{ color: var(--ansi11); }
 a:hover{ color: var(--ansi00-hard); background-color: var(--ansi11); text-decoration: none;}
 audio{ width: 100%; display: block; margin-top: 1em; }
+a.anchor{visibility:hidden; text-decoration: none;}
+h1:hover>a,h2:hover>a,h3:hover>a,h4:hover>a,h5:hover>a,h6:hover>a,h1:hover>a{visibility:visible;}
 main{  margin-left: 12em; margin-right: 1em; padding: 1em; border:1pt solid; margin-bottom: 1em;}
 main h1{border-bottom: 1pt solid;}
 main a h1 {border-bottom: transparent 0pt solid;}
@@ -36,7 +38,7 @@ footer{text-align:center; border-top:1pt solid; margin-top: 1em;}
 footer a{text-decoration:none;}
 footer .mirror{text-align:center; color: var(--ansi11);}
 code{ background: var(--ansi00-soft); }
-pre{ background: var(--ansi00-soft); padding: 1em;  border-radius: 1em;}
+pre{ overflow-x: auto; background: var(--ansi00-soft); padding: 1em;  border-radius: 1em;}
 .hyperbowl{ font-style: italic; font-size: 1.2em;}
 .logo{
 	padding: 5pt 0;
@@ -59,6 +61,9 @@ pre{ background: var(--ansi00-soft); padding: 1em;  border-radius: 1em;}
 .about img{height:10em; float:left;}
 header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;}
 .page-head{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;}
+@media (min-width: 1200px){
+	.post-content{ column-count: 2; }
+}
 @media (max-width: 800px){
 	main{max-width:100%; margin: 1em;}
 	nav{padding:0; width: 100%; border-right:solid 0pt;}