Hide checkboxes and icons when no CSS in head is loaded

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

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" "") }}

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 */ -}}

Before

Width:  |  Height:  |  Size: 141 B

After

Width:  |  Height:  |  Size: 164 B

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