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:
parent
9e524ff754
commit
db7e6254fa
@ -1,3 +1,4 @@
|
||||
/* dark.css */
|
||||
--font-color: #eee;
|
||||
--bg-color: #212121;
|
||||
|
@ -1,4 +1,5 @@
|
||||
:root {
|
||||
/* light.css */
|
||||
--font-color: #333;
|
||||
--bg-color: #fff;
|
||||
|
@ -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%;
|
@ -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>
|
@ -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 }}">
|
||||
|
Loading…
Reference in New Issue
Block a user