From 32818dacf1ab051d70d99e1e0d2d91e5b0306da9 Mon Sep 17 00:00:00 2001 From: Dmitry Kolosov Date: Sun, 21 Jun 2020 23:23:07 +0300 Subject: [PATCH 1/4] WIP: dark theme --- layouts/_default/baseof.html | 2 +- layouts/_default/list.html | 2 +- layouts/_default/single.html | 2 +- layouts/partials/head.html | 11 +++ layouts/partials/header.html | 2 +- layouts/partials/postSummary.html | 2 +- static/css/dark.css | 129 ++++++++++++++++++++++++++++++ static/css/light.css | 128 +++++++++++++++++++++++++++++ static/css/style.css | 60 ++------------ 9 files changed, 279 insertions(+), 59 deletions(-) create mode 100644 static/css/dark.css create mode 100644 static/css/light.css diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9f295e8..1b7946e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,7 +8,7 @@ {{ i18n "skipToContent" | humanize }}
-
+
{{ block "header" . }} {{ partial "header.html" . }} {{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index c40d9da..89fec15 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -7,7 +7,7 @@ {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} {{ range $pages }}
-
+

{{ trim .Title " " }}

{{ partial "postInfo.html" . }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 6f61195..8d1e3b7 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -8,7 +8,7 @@ {{ end }}
-
+

{{ trim .Title " " }}

diff --git a/layouts/partials/head.html b/layouts/partials/head.html index a799397..22758ef 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -16,6 +16,17 @@ +{{- $style := "light" -}} +{{- if and (isset site.Params "style") (ne site.Params.style "") -}} +{{- $style = site.Params.style | lower -}} +{{- end -}} + +{{- if eq $style "dark" -}} + +{{- else -}} + +{{- end -}} + {{ range .Site.Params.customCSS -}} {{- end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 5b84493..2b29c7e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,4 @@ -

+

{{ .Site.Title }}

diff --git a/layouts/partials/cssColors.html b/layouts/partials/cssColors.html new file mode 100644 index 0000000..1bc3628 --- /dev/null +++ b/layouts/partials/cssColors.html @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/layouts/partials/dark.css b/layouts/partials/dark.css new file mode 100644 index 0000000..88e8fcd --- /dev/null +++ b/layouts/partials/dark.css @@ -0,0 +1,23 @@ +--font-color: #eee; +--bg-color: #212121; + +--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; + +--pre-color: #333; +--pre-bg-color: #f1f1f1; + +--bq-color: #ccc; +--hr-color: #ccc; + +--pagination-bg-color: #373737; +--pagination-link-color: #b6b6b6; + +--post-info-color: grey; + +--switcher-color: #333; +--switcher-bg-color: #fff; \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 1c2de58..7d857cf 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,14 @@ -

© {{ if isset .Site.Params "author"}}{{ .Site.Params.author }}, {{end}}{{ now.Year }}
-{{ i18n "powered" | humanize }} Hugo, {{ i18n "theme" }} Anubis. -

\ No newline at end of file +
+ {{ $languagesCount := $.Site.Home.AllTranslations }} + {{ if gt $languagesCount 1 }} + {{ partial "languageSelect.html" . }} + {{ end }} + +
+

© {{ if isset .Site.Params "author"}}{{ .Site.Params.author }}, {{end}}{{ now.Year }}
+ {{ i18n "powered" | humanize }} Hugo, {{ i18n "theme" }} Anubis. +

+
+ + {{ partial "themeSwitcher.html" . }} +
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 22758ef..b3e1d6d 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -14,19 +14,10 @@ + +{{ partial "cssColors.html" }} -{{- $style := "light" -}} -{{- if and (isset site.Params "style") (ne site.Params.style "") -}} -{{- $style = site.Params.style | lower -}} -{{- end -}} - -{{- if eq $style "dark" -}} - -{{- else -}} - -{{- end -}} - {{ range .Site.Params.customCSS -}} {{- end }} diff --git a/layouts/partials/themeSwitcher.html b/layouts/partials/themeSwitcher.html new file mode 100644 index 0000000..9aa91e5 --- /dev/null +++ b/layouts/partials/themeSwitcher.html @@ -0,0 +1,77 @@ + +{{ $style := "light-without-switcher" }} +{{ if and (isset site.Params "style") (ne site.Params.style "") }} + {{ $style = site.Params.style | lower }} +{{ end }} + +{{ if not (in (slice "light-without-switcher" "dark-without-switcher" "auto-without-switcher") $style) }} + + + +{{ end }} \ No newline at end of file diff --git a/static/css/dark.css b/static/css/dark.css deleted file mode 100644 index a3768e3..0000000 --- a/static/css/dark.css +++ /dev/null @@ -1,129 +0,0 @@ -body { - background: #212121; - color: #eee; -} - -/* Links */ - -a { - color: #599ada; -} - -a:hover, -a:focus, -a:active { - color: #ff5858; - border-bottom: 1px solid rgba(238, 54, 54, 0.5); -} - -/* Table */ -thead { - background: #343a40; -} - -th, td { - border: 1px double lightgrey; -} - -/* Code */ -pre { - background-color: #f1f1f1; - color: #333; -} - -/* Styles */ - -blockquote { - border-left: 2px solid #ccc; -} - -hr { - border-top: 1px solid #ccc; -} - -/* Header */ - -header a { - color: #eee; -} - -.common-header { - border-bottom: thin solid #333; -} - -/* Articles */ - -.post-navigation { - background: #373737; -} - -.post-navigation a { - color: #b6b6b6; -} - -.post-navigation a:hover, -.post-navigation a:focus, -.post-navigation a:active { - color: #ff5858; -} - -article:not(:last-of-type) { - border-bottom: thin solid #333; -} - -article header h1 a { - color: #eee; -} - -.post-info { - color: grey; -} - -.post-info a { - color: grey; -} - -.post-info a:hover { - color: #ff5858; -} - -article figcaption { - color: lightgrey; -} - -.divider { - border-top: thin solid #ccc; -} - -/* Pagination */ - -.pagination-item { - background: #373737; -} - -.pagination-item a { - color: #eee; -} - -.pagination-item a:hover, .pagination-item a:focus { - color: #ff5858; -} - -/* Footer */ - -footer { - border-top: thin solid #333; -} - -/* Media Queries */ - -@media (max-width: 840px) { - header nav { - background: #373737; - } - - .post-navigation { - background: #373737; - } - -} \ No newline at end of file diff --git a/static/css/light.css b/static/css/light.css index 4578278..d603624 100644 --- a/static/css/light.css +++ b/static/css/light.css @@ -1,128 +1,25 @@ -body { - background: #fff; - color: #333; -} +:root { + --font-color: #333; + --bg-color: #fff; -/* Links */ + --link-color:#1d60a3; + --link-state-color:#a31d1d; + --link-state-border-color: rgba(163, 29, 29, .5); -a { - color: #1d60a3; -} + --thead-bg-color: lightgrey; + --table-border-color: lightgrey; -a:hover, -a:focus, -a:active { - color: #a31d1d; - border-bottom: 1px solid rgba(163, 29, 29, .5); -} + --pre-color: #333; + --pre-bg-color: #f1f1f1; + + --bq-color: #ccc; + --hr-color: #ccc; -/* Table */ -thead { - background: lightgrey; -} + --pagination-bg-color: #fafafa; + --pagination-link-color: #696969; -th, td { - border: 1px double lightgrey; -} + --post-info-color: grey; -/* Code */ -pre { - background-color: #f1f1f1; -} - -/* Styles */ - -blockquote { - border-left: 2px solid #ccc; -} - -hr { - border-top: 1px solid #ccc; -} - -/* Header */ - -header a { - color: #333; -} - -.common-header { - border-bottom: thin solid #f1f1f1; -} - -/* Articles */ - -.post-navigation { - background: #fafafa; -} - -.post-navigation a { - color: #696969; -} - -.post-navigation a:hover, -.post-navigation a:focus, -.post-navigation a:active { - color: #a31d1d; -} - -article:not(:last-of-type) { - border-bottom: thin solid #f1f1f1; -} - -article header h1 a { - color: #333; -} - -.post-info { - color: grey; -} - -.post-info a { - color: grey; -} - -.post-info a:hover { - color: #a31d1d; -} - -article figcaption { - color: grey; -} - - -.divider { - border-top: thin solid #f1f1f1; -} - -/* Pagination */ - -.pagination-item { - background: #fafafa; -} - -.pagination-item a { - color: #333; -} - -.pagination-item a:hover, .pagination-item a:focus { - color: #a31d1d; -} - -/* Footer */ - -footer { - border-top: thin solid #f1f1f1; -} - -/* Media Queries */ - -@media (max-width: 840px) { - header nav { - background: #fafafa; - } - - .post-navigation { - background: #fafafa; - } + --switcher-color: #fff; + --switcher-bg-color: #333; } \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index caca00f..b7d8a5d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,5 +1,6 @@ /* Basic */ @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); + html { font-family: -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* 1 */ @@ -14,6 +15,8 @@ body { font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; + color: var(--font-color); + background: var(--bg-color); } article, @@ -57,9 +60,17 @@ h3 { /* Links */ a { + color: var(--link-color); text-decoration: none; } +a:hover, +a:focus, +a:active { + color: var(--link-state-color); + border-bottom: 1px solid var(--link-state-border-color); +} + a:active, a:hover { outline: 0; @@ -93,6 +104,10 @@ a.skip-main:active { } /* Table */ +thead { + background: var(--thead-bg-color); +} + .table-wrapper { overflow-x: auto; } @@ -105,10 +120,13 @@ table { th, td { padding: 0.5em 1em; + border: 1px double var(--table-border-color); } /* Code */ pre { + color: var(--pre-color) + background-color: var(--pre-bg-color); padding: 1em; max-width: 100%; overflow: auto; @@ -125,6 +143,7 @@ kbd { /* Styles */ blockquote { + border-left: 2px solid var(--bq-color); padding: 0.1em 1em; margin-left: 0.75em; } @@ -135,6 +154,7 @@ p { } hr { + border-top: 1px solid var(--hr-color); height: 1px; border: 0; } @@ -150,6 +170,10 @@ header { justify-content: space-between; } +header a { + color: var(--font-color); +} + header h1 { font-size: 1em; margin-top: 1em; @@ -178,7 +202,8 @@ header nav a { } .common-header { - padding-bottom: 2em; + padding-bottom: 1.5em; + border-bottom: thin solid var(--hr-color); } /* Pages */ @@ -197,6 +222,7 @@ main h1 { /* Articles */ .post-navigation { + background: var(--pagination-bg-color); text-align: center; margin-top: 1em; max-width: 100%; @@ -208,9 +234,16 @@ main h1 { } .post-navigation a { + color: var(--pagination-link-color); margin-left: 2em; } +.post-navigation a:hover, +.post-navigation a:focus, +.post-navigation a:active { + color: var(--link-state-color); +} + .post-title.favorite::after { content: "☆"; display: inline-block; @@ -230,6 +263,7 @@ main h1 { } article:not(:last-of-type) { + border-bottom: thin solid var(--hr-color); padding-bottom: 2em; } @@ -241,15 +275,25 @@ article header h1 { } article header h1 a { + color: var(--font-color); border: none; text-decoration: none; } .post-info { + color: var(--post-info-color); font-size: 0.75em; margin-top: 1em; } +.post-info a { + color: var(--post-info-color); +} + +.post-info a:hover { + color: var(--link-state-color); +} + .post-short-list .post-info { margin-top: 0; margin-bottom: 1.5em; @@ -294,6 +338,7 @@ article img { } article figcaption { + color: grey; text-align: center; font-size: 0.85em; margin-bottom: 2em; @@ -304,6 +349,7 @@ article figcaption { } .divider { + border-top: thin solid var(--hr-color); display: block; height: 1px; border: 0; @@ -333,16 +379,23 @@ article figcaption { display: flex; justify-content: space-between; margin-top: 3em; -} - -.pagination { text-align: center; } .pagination-item { + background: var(--pagination-bg-color); padding: 0.75em 0.75em; } +.pagination-item a { + color: var(--pagination-link-color); +} + +.pagination-item a:hover, +.pagination-item a:focus { + color: var(--link-state-color); +} + .disabled { visibility: hidden; } @@ -360,9 +413,15 @@ article figcaption { /* Footer */ -footer { +.common-footer { + border-top: thin solid var(--hr-color); + padding-top: 1.5em; margin-top: 3em; font-size: 16px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; } ul.language-select { @@ -375,6 +434,15 @@ ul.language-select > li { margin-right: 1em; } +.theme-switcher { + color: var(--switcher-color); + background: var(--switcher-bg-color); + padding: 0.5em 1em; + font-size: 16px; + border: none; + margin-right: 1em; +} + /* Media Queries */ @media (max-width: 840px) { @@ -405,6 +473,7 @@ ul.language-select > li { } header nav { + background: var(--pagination-bg-color); margin-top: 1em; max-width: 100%; text-align: center; @@ -420,6 +489,7 @@ ul.language-select > li { } .post-navigation { + background: var(--pagination-bg-color); text-align: center; padding: 0.5em 0; } @@ -431,4 +501,4 @@ ul.language-select > li { .post-pagination .pagination-item { max-width: 10em; } -} \ No newline at end of file +} From 28e56764fda751760638e2dd2ca6d4b3f49105f1 Mon Sep 17 00:00:00 2001 From: Dmitry Kolosov Date: Thu, 9 Jul 2020 22:19:33 +0300 Subject: [PATCH 3/4] Update Readme --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 6d9f1af..f131846 100644 --- a/README.md +++ b/README.md @@ -83,12 +83,12 @@ Now enter [`localhost:1313`](http://localhost:1313/) in the address bar of your ### Dark Mode Customize via `style` param in `params` section of config. Options: -- light-without-switcher - light theme, without switcher, JS-free (by default) -- dark-without-switcher - dark theme, without switcher, JS-free -- auto-without-switcher - theme based on user system settings, without switcher, JS-free -- light - light theme by default, can be switched by user to dark theme and back. Theme settings are saved for user -- dark - dark theme by default, can be switched by user to light theme and back. Theme settings are saved for user -- auto - theme based on user system settings by default, can be switched by user to dark/light theme. Theme settings are saved for user +- `light-without-switcher` - light theme, without switcher, JS-free (by default) +- `dark-without-switcher` - dark theme, without switcher, JS-free +- `auto-without-switcher` - theme based on user system settings, without switcher, JS-free +- `light` - light theme by default, can be switched by user to dark theme and back. Theme settings are saved for user +- `dark` - dark theme by default, can be switched by user to light theme and back. Theme settings are saved for user +- `auto` - theme based on user system settings by default, can be switched by user to dark/light theme. Theme settings are saved for user ### Google Analytics Only works for production environment. You either build your site with variable like From aedb7a3aa8ac52340bf2ed9694a711ee006f822f Mon Sep 17 00:00:00 2001 From: Dmitry Kolosov Date: Thu, 9 Jul 2020 22:21:39 +0300 Subject: [PATCH 4/4] Small fixes --- layouts/partials/cssColors.html | 2 +- layouts/partials/dark.css | 2 +- layouts/partials/themeSwitcher.html | 1 - static/css/light.css | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/layouts/partials/cssColors.html b/layouts/partials/cssColors.html index 1bc3628..3f64049 100644 --- a/layouts/partials/cssColors.html +++ b/layouts/partials/cssColors.html @@ -15,4 +15,4 @@ {{ partial "dark.css" . | safeCSS }} } {{ end }} - \ No newline at end of file + diff --git a/layouts/partials/dark.css b/layouts/partials/dark.css index 88e8fcd..c7af3c8 100644 --- a/layouts/partials/dark.css +++ b/layouts/partials/dark.css @@ -20,4 +20,4 @@ --post-info-color: grey; --switcher-color: #333; ---switcher-bg-color: #fff; \ No newline at end of file +--switcher-bg-color: #fff; diff --git a/layouts/partials/themeSwitcher.html b/layouts/partials/themeSwitcher.html index 9aa91e5..6da264b 100644 --- a/layouts/partials/themeSwitcher.html +++ b/layouts/partials/themeSwitcher.html @@ -1,4 +1,3 @@ - {{ $style := "light-without-switcher" }} {{ if and (isset site.Params "style") (ne site.Params.style "") }} {{ $style = site.Params.style | lower }} diff --git a/static/css/light.css b/static/css/light.css index d603624..19ba085 100644 --- a/static/css/light.css +++ b/static/css/light.css @@ -22,4 +22,4 @@ --switcher-color: #fff; --switcher-bg-color: #333; -} \ No newline at end of file +}