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

12
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>
@ -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>

6
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,7 +10,6 @@
&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 */}}
@ -29,5 +28,6 @@
</details> </details>
</div> </div>
{{ end }} {{ 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 }} {{ 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;
} }