Improved formatting in browser "reader view"

layouts/_default/baseof.html

@@ -19,7 +19,7 @@
 	<input class="show-hide-menu-input" style="display:none;" autocomplete="off" type="checkbox" id="toggle-1">
 	<label class="overlay" for="toggle-1"></label>
 	<div class="main">
-		<div class="header">
+		<header class="header">
 			<div class="header-content">
 				<div class="title">
 					<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
@@ -49,18 +49,18 @@
 {{- end }}
 				</div>
 			</div>
-		</div>
-		<div class="body">
+		</header>
+		<main class="body">
 			<div class="body-content">
 				{{- block "main" . }}{{ end }}
 			</div>
-		</div>
+		</main>
 	</div>
 {{- if .Site.Params.FooterText }}
 	<hr class="dont-show">
-	<div class="footer">
+	<footer class="footer">
 		<p>{{ .Site.Params.FooterText | markdownify }}</p>
-	</div>
+	</footer>
 {{- end }}
 </body>
 </html>

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ define "title" }}{{ .Title }} – {{ .Site.Title }}{{ end }}
 {{ define "main" }}
-  <div class="title-header">
+  <header class="title-header">
     <h1>{{ if .Draft }}<i>(Draft)</i> {{ end }}{{ .Title }}</h1>
     <div class="title-header-date">
       {{- if eq .Date.IsZero false }}
@@ -10,7 +10,6 @@
         &mdash; last updated <time>{{ .Lastmod.Format "January 2, 2006" }}</time>
       {{- end }}
     </div>
-  </div>
     {{ if or (.Params.toc) (and (ne .Params.toc false) (isset .Site.Params "tocwordthreshold") (ge .Site.Params.TocWordThreshold 0) (gt .WordCount .Site.Params.TocWordThreshold)) }}
       {{/* If the front matter parameter is true, show the toc */}}
       {{/* Elif the front matter parameter is false, don't show the toc */}}
@@ -29,5 +28,6 @@
         </details>
       </div>
     {{ end }}
-  {{ .Content | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" (printf "${1}<a href=\"#${2}\" class=\"heading-anchor\" aria-label=\"Anchor\"><img src=\"%s\" class=\"color-adapting-image\" height=\"20\"></a>${3}" ("images/chain-link.svg" | relURL)) | safeHTML }}
+  </header>
+  {{ .Content | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" (printf "${1}<aside class=\"heading-anchor\"><a href=\"#${2}\" aria-label=\"Anchor\"><img src=\"%s\" class=\"color-adapting-image\" height=\"20\"></a></aside>${3}" ("images/chain-link.svg" | relURL)) | safeHTML }}
 {{ end }}

static/css/styles.css

@@ -41,12 +41,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .heading-anchor {
+	/* this is used on an "aside" tag so that it's not shown in the browser's reader mode */
+	display: inline;
 	color: grey;
 	margin-left: 0.5em;
 	font-size: 0.75em;
 }
 
-.heading-anchor:hover {
+.heading-anchor a:hover {
 	text-decoration: none;
 }