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
Show Stats 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"> <input class="show-hide-menu-input" style="display:none;" autocomplete="off" type="checkbox" id="toggle-1">
<label class="overlay" for="toggle-1"></label> <label class="overlay" for="toggle-1"></label>
<div class="main"> <div class="main">
<div class="header"> <header class="header">
<div class="header-content"> <div class="header-content">
<div class="title"> <div class="title">
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
@ -31,7 +31,7 @@
<img class="color-adapting-image" width="30" src="" alt="change theme button"> <img class="color-adapting-image" width="30" src="" alt="change theme button">
</div> </div>
{{- end }} {{- 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"> <img class="color-adapting-image" width="30" src="{{ "images/hamburger.svg" | relURL }}" alt="menu button">
</label> </label>
</div> </div>
@ -49,18 +49,18 @@
{{- end }} {{- end }}
</div> </div>
</div> </div>
</div> </header>
<div class="body"> <main class="body">
<div class="body-content"> <div class="body-content">
{{- block "main" . }}{{ end }} {{- block "main" . }}{{ end }}
</div> </div>
</div> </main>
</div> </div>
{{- if .Site.Params.FooterText }} {{- if .Site.Params.FooterText }}
<hr class="dont-show"> <hr class="dont-show">
<div class="footer"> <footer class="footer">
<p>{{ .Site.Params.FooterText | markdownify }}</p> <p>{{ .Site.Params.FooterText | markdownify }}</p>
</div> </footer>
{{- end }} {{- end }}
</body> </body>
</html> </html>

42
layouts/_default/single.html
View File

@ -1,6 +1,6 @@
{{ define "title" }}{{ .Title }} &ndash; {{ .Site.Title }}{{ end }} {{ define "title" }}{{ .Title }} &ndash; {{ .Site.Title }}{{ end }}
{{ define "main" }} {{ define "main" }}
<div class="title-header"> <header class="title-header">
<h1>{{ if .Draft }}<i>(Draft)</i> {{ end }}{{ .Title }}</h1> <h1>{{ if .Draft }}<i>(Draft)</i> {{ end }}{{ .Title }}</h1>
<div class="title-header-date"> <div class="title-header-date">
{{- if eq .Date.IsZero false }} {{- if eq .Date.IsZero false }}
@ -10,24 +10,24 @@
&mdash; last updated <time>{{ .Lastmod.Format "January 2, 2006" }}</time> &mdash; last updated <time>{{ .Lastmod.Format "January 2, 2006" }}</time>
{{- end }} {{- end }}
</div> </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 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 */}}
{{/* 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 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 */}}
{{/* 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>
<p></p> <div class="table-of-contents">
<div class="table-of-contents"> <details open="open">
<details open="open"> <summary>
<summary> <span class="table-of-contents-title">Table of Contents</span>
<span class="table-of-contents-title">Table of Contents</span> </summary>
</summary> {{ $toc := .TableOfContents -}}
{{ $toc := .TableOfContents -}} {{/* Workaround for an extra layer of indentation (https://discourse.gohugo.io/t/2303) */}}
{{/* 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 `<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 -}}
{{- $toc := replaceRE `</ul>\s*</li>\s*</ul>(\s*)</nav>` `</ul>${1}</nav>` $toc -}} {{- safeHTML $toc }}
{{- safeHTML $toc }} </details>
</details> </div>
</div> {{ end }}
{{ end }} </header>
{{ .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 }} {{ .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 }} {{ end }}

4
static/css/styles.css
View File

@ -41,12 +41,14 @@ h1, h2, h3, h4, h5, h6 {
} }
.heading-anchor { .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; color: grey;
margin-left: 0.5em; margin-left: 0.5em;
font-size: 0.75em; font-size: 0.75em;
} }
.heading-anchor:hover { .heading-anchor a:hover {
text-decoration: none; text-decoration: none;
} }