From e674706aab86a88572588b0f4d4fd85faf9a04c0 Mon Sep 17 00:00:00 2001 From: vimux Date: Sun, 20 Jan 2019 12:55:19 -0500 Subject: [PATCH] Add color themes support --- README.md | 4 +++- layouts/partials/head.html | 3 +++ static/css/main.css | 6 +++--- static/css/themes/dark-blue.css | 28 ++++++++++++++++++++++++++++ static/css/themes/dark-green.css | 28 ++++++++++++++++++++++++++++ 5 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 static/css/themes/dark-blue.css create mode 100644 static/css/themes/dark-green.css diff --git a/README.md b/README.md index ca8387c..8dbab4a 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ * Responsive * Card-based list layout +* Color themes * Internal Hugo templates for Open Graph and Twitter Cards meta data, Google Analytics, and Disqus comments * Table of contents * Related content @@ -121,7 +122,7 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id avatar = "img/avatar.png" [Params] - description = "Responsive card-based & code-light Hugo theme" # Description of your site. Used in meta description + description = "Responsive card-based & code-light Hugo theme" # Site Description. Used in meta description copyright = "Binario" # Copyright holder, otherwise will use .Site.Title opengraph = true # Enable OpenGraph if true twitter_cards = true # Enable Twitter Cards if true @@ -129,6 +130,7 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id mainSections = ["post"] # Set main page sections post_meta = ["date", "categories"] # Enable post meta fields in given order dateFormat = "January 02, 2006" # Change the format of dates + colorTheme = "dark-green" # dark-green, dark-blue customCSS = ["css/custom.css"] # Include custom CSS files authorbox = true # Show authorbox at bottom of single pages if true toc = true # Enable Table of Contents for all site pages diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 80c3080..cfd14af 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -16,6 +16,9 @@ {{- range .Site.Params.customCSS }} {{- end }} + {{- with .Site.Params.colorTheme }} + + {{- end }} {{- with .OutputFormats.Get "rss" }} diff --git a/static/css/main.css b/static/css/main.css index 8f4d583..9d3c020 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -217,7 +217,7 @@ kbd { padding: 2px 3px; font-weight: 700; color: #111; - background: #888; + background-color: #888; } figure { @@ -728,7 +728,7 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box { margin-bottom: 1rem; color: #f8ae00; list-style: none; - background: #111; + background-color: #111; } .toc[open] { @@ -1002,7 +1002,7 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box { } mark { - background: #25a; + background-color: #25a; } blockquote { diff --git a/static/css/themes/dark-blue.css b/static/css/themes/dark-blue.css new file mode 100644 index 0000000..ff8d29b --- /dev/null +++ b/static/css/themes/dark-blue.css @@ -0,0 +1,28 @@ +a { + color: #77baff; +} + +blockquote { + border-color: #77baff; +} + +mark { + background-color: #77baff; +} + +.logo:hover { + color: #77baff; +} + +.main-nav__btn { + fill: #77baff; +} + +.toc { + color: #77baff; +} + +.share__icon { + fill: #77baff; + stroke: #77baff; +} diff --git a/static/css/themes/dark-green.css b/static/css/themes/dark-green.css new file mode 100644 index 0000000..0f7483f --- /dev/null +++ b/static/css/themes/dark-green.css @@ -0,0 +1,28 @@ +a { + color: #9ccc6c; +} + +blockquote { + border-color: #9ccc6c; +} + +mark { + background-color: #9ccc6c; +} + +.logo:hover { + color: #9ccc6c; +} + +.main-nav__btn { + fill: #9ccc6c; +} + +.toc { + color: #9ccc6c; +} + +.share__icon { + fill: #9ccc6c; + stroke: #9ccc6c; +}