Web-Projects/vanilla-hugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Hide checkboxes and icons when no CSS in head is loaded

Browse Source 
This seems to help in Firefox's reader mode.
Also adjust images to not be huge without CSS.

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
This commit is contained in:
Danila Fedorin 2024-06-24 19:21:46 -07:00
parent 8b6874ec75
commit ed270bc915
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/partials/head.html
View File

@ -30,8 +30,8 @@
{{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }} {{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
{{ $code := resources.Get "scss/code.scss" | resources.ToCSS | resources.Minify }} {{ $code := resources.Get "scss/code.scss" | resources.ToCSS | resources.Minify }}
{{ $icon := resources.Get "img/favicon.png" }} {{ $icon := resources.Get "img/favicon.png" }}
<style>.sidenote-checkbox { display: none; }</style> <style>.feather { display: inline !important; width: 10px; height: 10px; }</style>
<style>.feather { width: 1rem; height: 1rem; }</style> <style>img { max-width: 70%; }</style>
<link rel="stylesheet" href="{{ $style.Permalink }}"> <link rel="stylesheet" href="{{ $style.Permalink }}">
{{ partial "defercss.html" (dict "url" $sidenotes.Permalink "extra" "") }} {{ partial "defercss.html" (dict "url" $sidenotes.Permalink "extra" "") }}
{{ partial "defercss.html" (dict "url" $code.Permalink "extra" "") }} {{ partial "defercss.html" (dict "url" $code.Permalink "extra" "") }}

2
layouts/partials/icon.html
View File

@ -1,4 +1,4 @@
<svg class="feather"> <svg class="feather" style="display: none;">
<use xlink:href="/feather-sprite.svg#{{ . }}"/> <use xlink:href="/feather-sprite.svg#{{ . }}"/>
</svg> </svg>
{{- /* This comment is to remove trailing whitespace */ -}} {{- /* This comment is to remove trailing whitespace */ -}}

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 141 B

After

Width:  |  Height:  |  Size: 164 B

2
layouts/shortcodes/sidenote.html
View File

@ -1,6 +1,6 @@
<span class="sidenote"> <span class="sidenote">
<label class="sidenote-label" for="{{- .Get 1 -}}">{{- .Get 2 -}}</label> <label class="sidenote-label" for="{{- .Get 1 -}}">{{- .Get 2 -}}</label>
<input class="sidenote-checkbox" type="checkbox" id="{{- .Get 1 -}}"></input> <input class="sidenote-checkbox" style="display: none;" type="checkbox" id="{{- .Get 1 -}}"></input>
{{- if $offset := .Get 3 -}} {{- if $offset := .Get 3 -}}
<span class="sidenote-content sidenote-{{- .Get 0 -}}" style="margin-top: {{- $offset -}}rem"> <span class="sidenote-content sidenote-{{- .Get 0 -}}" style="margin-top: {{- $offset -}}rem">
{{- else -}} {{- else -}}