From 8aba5146323c6cba096c374b06c804c6512b9fa8 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Wed, 13 Mar 2024 16:38:42 +0800 Subject: [PATCH] remove hugo code in .css files. --- assets/css/dark.css | 92 +++++++++++++++++++++++++++----------- assets/css/light.css | 12 +++-- assets/css/main.css | 33 +------------- layouts/partials/head.html | 2 + 4 files changed, 74 insertions(+), 65 deletions(-) diff --git a/assets/css/dark.css b/assets/css/dark.css index b1b339f..43bda3f 100644 --- a/assets/css/dark.css +++ b/assets/css/dark.css @@ -1,35 +1,75 @@ -/* dark.css */ ---font-color: #dadadb; ---bg-color: #1d1e20; - ---card-color: #2e2e33; ---card-border-color: #333333; +@media (prefers-color-scheme: dark) { + html { + --font-color: #dadadb; + --bg-color: #1d1e20; ---link-color:#599ada; ---link-state-color:#ff5858; ---link-state-border-color: rgba(238, 54, 54, 0.5); + --card-color: #2e2e33; + --card-border-color: #333333; ---thead-bg-color: #343a40; ---table-border-color: lightgrey; + --link-color: #599ada; + --link-state-color: #ff5858; + --link-state-border-color: rgba(238, 54, 54, 0.5); ---nav-bg-color: #2e2e33; ---nav-link-color: #b6b6b6; + --thead-bg-color: #343a40; + --table-border-color: lightgrey; ---pre-color: #f8f8f2; ---pre-bg-color: rgba(175, 184, 193, 0.1); ---pre-border-color: rgba(175, 184, 193, 0.3); + --nav-bg-color: #2e2e33; + --nav-link-color: #b6b6b6; ---bq-color: #ccc; ---hr-color: #333; + --pre-color: #f8f8f2; + --pre-bg-color: rgba(175, 184, 193, 0.1); + --pre-border-color: rgba(175, 184, 193, 0.3); ---pagination-bg-color: #2e2e33; ---pagination-link-color: #b6b6b6; ---pagination-border-color: #333333; ---pagination-border-radius: 5px; + --bq-color: #ccc; + --hr-color: #333; ---post-info-color: grey; + --pagination-bg-color: #2e2e33; + --pagination-link-color: #b6b6b6; + --pagination-border-color: #333333; + --pagination-border-radius: 5px; ---switcher-color: #fff; + --post-info-color: grey; ---svg-color: #ccc; ---svg-state-color:#ff5858; + --switcher-color: #fff; + + --svg-color: #ccc; + --svg-state-color: #ff5858; + } +} +/* Same as above. */ +html[data-theme='dark'] { + --font-color: #dadadb; + --bg-color: #1d1e20; + + --card-color: #2e2e33; + --card-border-color: #333333; + + --link-color: #599ada; + --link-state-color: #ff5858; + --link-state-border-color: rgba(238, 54, 54, 0.5); + + --thead-bg-color: #343a40; + --table-border-color: lightgrey; + + --nav-bg-color: #2e2e33; + --nav-link-color: #b6b6b6; + + --pre-color: #f8f8f2; + --pre-bg-color: rgba(175, 184, 193, 0.1); + --pre-border-color: rgba(175, 184, 193, 0.3); + + --bq-color: #ccc; + --hr-color: #333; + + --pagination-bg-color: #2e2e33; + --pagination-link-color: #b6b6b6; + --pagination-border-color: #333333; + --pagination-border-radius: 5px; + + --post-info-color: grey; + + --switcher-color: #fff; + + --svg-color: #ccc; + --svg-state-color: #ff5858; +} \ No newline at end of file diff --git a/assets/css/light.css b/assets/css/light.css index 408d806..4487b08 100644 --- a/assets/css/light.css +++ b/assets/css/light.css @@ -1,14 +1,12 @@ -:root { - /* light.css */ +html[data-theme='light'] { --font-color: #1e1e1e; --bg-color: #ffffff; - + --card-color: #fafafa; --card-border-color: #eeeeee; - - --link-color:#1d60a3; - --link-state-color:rgb(163, 29, 29); + --link-color: #1d60a3; + --link-state-color: rgb(163, 29, 29); --link-state-border-color: rgba(163, 29, 29, .5); --thead-bg-color: lightgrey; @@ -35,4 +33,4 @@ --svg-color: #333; --svg-state-color: #a31d1d; -} +} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index ab267b5..ca582e5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,34 +1,3 @@ -{{ $light := resources.Get "css/light.css" }} -{{ $dark := resources.Get "css/dark.css" }} - -{{ $style := "light-without-switcher" }} -{{ if and (isset site.Params "style") (ne site.Params.style "") }} - {{ $style = site.Params.style | lower }} -{{ end }} - -{{ if eq $style "dark-without-switcher" }} -:root { - {{ $dark.Content }} -} - -{{ else }} - -{{ $light.Content }} - -{{ if eq $style "auto-without-switcher" }} -@media (prefers-color-scheme: dark) { - :root { - {{ $dark.Content }} - } -} -{{ else if ne $style "light-without-switcher" }} -[data-theme="dark"] { - {{ $dark.Content }} -} -{{ end }} - -{{ end }} - /* Basic */ :root { @@ -207,7 +176,7 @@ pre, kbd { color: var(--pre-color); background-color: var(--pre-bg-color); - font-family: monospace; + font-family: 'Courier New', 'Consolas', monospace; font-size: 0.90em; line-height: 154%; border-radius: 6px; diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 5e3610c..c4c6ab0 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -45,6 +45,8 @@ {{end}} {{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/main.css") }} +{{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/light.css") }} +{{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/dark.css") }} {{ if .Site.Params.copyCodeButton | default true }} {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/copy-code.js") }}