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

Compare commits

base: Web-Projects:8b6874ec75c252fad38d27bbfe9353756154077f
Branches Tags
Web-Projects:master
...
compare: Web-Projects:ce4161db0d6ba2c46402343adf4486527847ca7e
Branches Tags
Web-Projects:master

4 Commits
8b6874ec75 ... ce4161db0d

Author SHA1 Message Date
Danila Fedorin
ce4161db0d Switch it to a block comment 
Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
 2024-06-24 19:26:44 -07:00
Danila Fedorin
2c57790c59 Add a comment describing the feather situation 
Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
 2024-06-24 19:26:15 -07:00
Danila Fedorin
1bc7cba988 Add logic to disable showing non-inline CSS 
Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
 2024-06-24 19:23:06 -07:00
Danila Fedorin
ed270bc915 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>
 2024-06-24 19:21:46 -07:00
4 changed files with 18 additions and 4 deletions
Expand all files Collapse all files

8
assets/scss/style.scss
View File

@@ -301,6 +301,14 @@ figure {
@include var(border-color, warning-border-color); @include var(border-color, warning-border-color);
} }
/*
Note: by absolute default (via inline CSS) feather icons are hidden.
That's because firefox reader mode doesn't play nice with them, and
it seems to ignore all styles in <head>. Then, the inline style
in <head> uses !important to restore the display of icons, but provides
limited styling. Here, we finally apply the full extent of the feather
styles.
*/
.feather { .feather {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;

10
layouts/partials/head.html
View File

@@ -14,11 +14,15 @@
{{ end }} {{ end }}
<!-- Fonts --> <!-- Fonts -->
{{ if not (.Site.Params.noCss) }}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Raleway:wght@400;700&family=Lora&display=block" media="screen"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Raleway:wght@400;700&family=Lora&display=block" media="screen">
{{ end }}
<!-- External CSS (normalize and KaTeX --> <!-- External CSS (normalize and KaTeX -->
{{ if not (.Site.Params.noCss) }}
{{ partial "defercss.html" (dict "url" .Site.Params.normalizeCssUrl "extra" "") }} {{ partial "defercss.html" (dict "url" .Site.Params.normalizeCssUrl "extra" "") }}
{{ partial "defercss.html" (dict "url" .Site.Params.katexCssUrl "extra" "") }} {{ partial "defercss.html" (dict "url" .Site.Params.katexCssUrl "extra" "") }}
{{ end }}
<!-- Links to other formats (RSS, TOML) --> <!-- Links to other formats (RSS, TOML) -->
{{ range .AlternativeOutputFormats -}} {{ range .AlternativeOutputFormats -}}
@@ -30,11 +34,13 @@
{{ $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>
{{ if not (.Site.Params.noCss) }}
<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" "") }}
{{ end }}
<link rel="icon" type="image/png" href="{{ $icon.Permalink }}"> <link rel="icon" type="image/png" href="{{ $icon.Permalink }}">
{{ if .Site.IsServer }} {{ if .Site.IsServer }}

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