balki/no-js-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved formatting in browser "reader view"

Browse Source
This commit is contained in:
Steven Engler
2024-04-18 02:03:02 -04:00
parent 3357424175
commit f546ccd6ff
3 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
layouts/_default/baseof.html
View File

@@ -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>
@@ -31,7 +31,7 @@
<img class="color-adapting-image" width="30" src="" alt="change theme button">
</div>
{{- end }}
<label id="show-hide-menu-label" class="clickable-header-label" for="toggle-1">
<label id="show-hide-menu-label" class="clickable-header-label" for="toggle-1">
<img class="color-adapting-image" width="30" src="{{ "images/hamburger.svg" | relURL }}" alt="menu button">
</label>
</div>
@@ -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>

42
layouts/_default/single.html
View File

@@ -1,6 +1,6 @@
{{ define "title" }}{{ .Title }} &ndash; {{ .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,24 +10,24 @@
&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 */}}
{{/* Elif the front matter parameter is not set, show the toc if the site parameter is set, non-negative, and less than the word count */}}
<p></p>
<div class="table-of-contents">
<details open="open">
<summary>
<span class="table-of-contents-title">Table of Contents</span>
</summary>
{{ $toc := .TableOfContents -}}
{{/* Workaround for an extra layer of indentation (https://discourse.gohugo.io/t/2303) */}}
{{- $toc := replaceRE `<nav(.*)>(\s*)<ul>\s*<li>\s*<ul>` `<nav${1}>${2}<ul>` $toc -}}
{{- $toc := replaceRE `</ul>\s*</li>\s*</ul>(\s*)</nav>` `</ul>${1}</nav>` $toc -}}
{{- safeHTML $toc }}
</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 }}
{{ 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 */}}
{{/* Elif the front matter parameter is not set, show the toc if the site parameter is set, non-negative, and less than the word count */}}
<p></p>
<div class="table-of-contents">
<details open="open">
<summary>
<span class="table-of-contents-title">Table of Contents</span>
</summary>
{{ $toc := .TableOfContents -}}
{{/* Workaround for an extra layer of indentation (https://discourse.gohugo.io/t/2303) */}}
{{- $toc := replaceRE `<nav(.*)>(\s*)<ul>\s*<li>\s*<ul>` `<nav${1}>${2}<ul>` $toc -}}
{{- $toc := replaceRE `</ul>\s*</li>\s*</ul>(\s*)</nav>` `</ul>${1}</nav>` $toc -}}
{{- safeHTML $toc }}
</details>
</div>
{{ end }}
</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 }}

4
static/css/styles.css
View File

@@ -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;
}