diff --git a/README.md b/README.md index a5f7f0a..6d9f1af 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ Anubis is a simple minimalist theme for [Hugo blog engine](https://gohugo.io/). ## Features +- Dark mode (automatic, by switcher) - Pagination - Tags/Categories support - Archive @@ -61,6 +62,7 @@ params: - css/my.css # relative path to "static" directory dateFormat: "2006-01-02" paginationSinglePost: true + style: light-without-switcher markup: goldmark: @@ -78,6 +80,16 @@ Now enter [`localhost:1313`](http://localhost:1313/) in the address bar of your ## Feature Settings +### 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 + ### Google Analytics Only works for production environment. You either build your site with variable like `HUGO_ENV=production hugo --minify` diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 8ccca3d..817f7a9 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -13,6 +13,9 @@ googleAnalytics = "" [params] author = "Dmitry Kolosov" description = "Anubis is a simple minimalist theme for Hugo blog engine." + dateFormat = "2006-01-02" + paginationSinglePost = true + style = "light-without-switcher" [menu] diff --git a/exampleSiteMultilingual/config.toml b/exampleSiteMultilingual/config.toml index 5d164d6..e33540b 100644 --- a/exampleSiteMultilingual/config.toml +++ b/exampleSiteMultilingual/config.toml @@ -14,6 +14,9 @@ googleAnalytics = "" [params] author = "Dmitry Kolosov" description = "Anubis is a simple minimalist theme for Hugo blog engine." + dateFormat = "2006-01-02" + paginationSinglePost = true + style = "light-without-switcher" [languages.en] languageName = "English" diff --git a/images/screenshot.png b/images/screenshot.png index e344554..4eb5932 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/images/tn.png b/images/tn.png index 4d652a1..102bd15 100644 Binary files a/images/tn.png and b/images/tn.png differ diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 1b7946e..97bfae4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,9 @@ - +{{ $dataTheme := "" }} +{{ if eq site.Params.style "dark-without-switcher" }} + {{ $dataTheme = "dark" }} +{{ end }} + {{ block "head" . }} {{ partial "head.html" . }} @@ -16,16 +20,9 @@
{{ block "main" . }}{{ end }}
- + {{ block "footer" . }} + {{ partial "footer.html" . }} + {{ end }} 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 + 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 +}