Merge style sheets for light and dark themes into a single resource

This will avoid having inline style, which is annoying for stricter CSP.
It should improve performances, as there is only a single file to load.
As a bonus, I also included resource fingerprinting, which will avoid breaking
the cache when it's not needed, and adds subresource integrity checksum.
This commit is contained in:
Quentin Barbe 2020-10-23 13:48:07 +02:00
parent 9e524ff754
commit db7e6254fa
No known key found for this signature in database
GPG Key ID: C479C6EF498510C2
5 changed files with 29 additions and 24 deletions

View File

@ -1,3 +1,4 @@
/* dark.css */
--font-color: #eee;
--bg-color: #212121;

View File

@ -1,4 +1,5 @@
:root {
/* light.css */
--font-color: #333;
--bg-color: #fff;

View File

@ -1,3 +1,24 @@
{{ $light := resources.Get "css/light.css" }}
{{ $dark := resources.Get "css/dark.css" }}
{{ $light.Content }}
{{ if eq site.Params.style "dark-without-switcher" }}
:root {
{{ $dark.Content }}
}
{{ else if eq site.Params.style "auto-without-switcher" }}
@media (prefers-color-scheme: dark) {
:root {
{{ $dark.Content }}
}
}
{{else }}
[data-theme="dark"] {
{{ $dark.Content }}
}
{{ end }}
/* Basic */
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@ -123,7 +144,7 @@ th, td {
/* Code */
pre {
color: var(--pre-color)
color: var(--pre-color);
background-color: var(--pre-bg-color);
padding: 1em;
max-width: 100%;

View File

@ -1,18 +0,0 @@
<style>
{{ if eq site.Params.style "dark-without-switcher" }}
:root {
{{ partial "dark.css" . | safeCSS }}
}
{{ else if eq site.Params.style "auto-without-switcher" }}
@media (prefers-color-scheme: dark) {
:root {
{{ partial "dark.css" . | safeCSS }}
}
}
{{else }}
[data-theme="dark"] {
{{ partial "dark.css" . | safeCSS }}
}
{{ end }}
</style>

View File

@ -14,9 +14,9 @@
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | absURL }}">
<link rel="apple-touch-icon-precomposed" href="{{ "favicon.png" | absURL }}">
<link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
{{ partial "cssColors.html" }}
<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?rnd={{ now.Unix }}" />
{{ $cssTemplate := resources.Get "css/main.css" }}
{{ $style := $cssTemplate | resources.ExecuteAsTemplate "css/style.css" . | resources.ToCSS | resources.Fingerprint "sha256" }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
{{ range .Site.Params.customCSS -}}
<link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}">