From a9b0deb581dc3e003d2852db0ea8e60ee26d1130 Mon Sep 17 00:00:00 2001 From: Gabriele Musco Date: Fri, 24 Dec 2021 23:50:58 +0100 Subject: [PATCH] refactored colors, moved them to separate data/colors.yml --- README.md | 14 +-- assets/scss/style.scss | 202 ++++++++++++++++++++------------- data/colors.yml | 22 ++++ layouts/_default/manifest.json | 10 +- 4 files changed, 160 insertions(+), 88 deletions(-) create mode 100644 data/colors.yml diff --git a/README.md b/README.md index 57199ef..588aca6 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,6 @@ summaryLength = 70 # number of words for article summaries discreteTags = false # enable discrete tag style; default false tagsInArticlePreview = true # enable tags list in the article preview card gridView = false # show post list as a grid. goes well with discreteCards - highlightBgColor = "#34363b" # card and circle navigation background color for discrete card mode bigArticleTitle = false # makes the title in the single article view bigger enableSearch = true # enable search page @@ -109,17 +108,10 @@ summaryLength = 70 # number of words for article summaries # ] # you can customize all of the colors in this theme - # the values shown are the defaults - backgroundColor = "#242629" - foregroundColor = "white" - dimForegroundColor = "#bababa" - strokeColor = "#4f4f4f" - accentColor = "#db5793" + # Colors are defined in data/colors.yml # alternative sidebar layout enableSidebarLayout = false - sidebarBackgroundColor = "#34363b" - sidebarForegroundColor = "white" tocInSidebar = false # if the sidebar is enbabled, show the TOC in the sidebar # redirect to baseURL if current URL host doesn't match @@ -188,6 +180,10 @@ For the `[[menu.icons]]` menu. They match identifier, name and url can be whatev - xmpp - youtube +## Colors + +Colors are completely customizable. They are defined in [`data/colors.yml`](data/colors.yml). Just copy that file over to `yoursite/data/colors.yml` and customize it to your liking. + ## Footer columns You can add various columns of links in the footer using the `data/footer_columns.yml` file. diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 6c14872..e01285a 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,12 +1,67 @@ -$bg_color: {{ .Site.Params.backgroundColor | default "#242629" }}; -$fg_color: {{ .Site.Params.foregroundColor | default "white" }}; -$dim_fg_color: {{ .Site.Params.dimForegroundColor | default "#bababa" }}; -$stroke_color: {{ .Site.Params.strokeColor | default "#4f4f4f" }}; -$accent_color: {{ .Site.Params.accentColor | default "#db5793" }}; +{{ $colors := .Site.Data.colors | default dict }} + +$dark_bg: {{ $colors.dark.bg | default "#242629" }}; +$dark_hl_bg: {{ $colors.dark.hl_bg | default "#34363b" }}; +$dark_fg: {{ $colors.dark.fg | default "white" }}; +$dark_dim_fg: {{ $colors.dark.dim_fg | default "#bababa" }}; +$dark_stroke: {{ $colors.dark.stroke | default "#4f4f4f" }}; +$dark_accent: {{ $colors.dark.accent | default "#db5793" }}; +$dark_sidebar_bg: {{ $colors.dark.sidebar.bg | default "#34363b" }}; +$dark_sidebar_fg: {{ $colors.dark.sidebar.fg | default "white" }}; + +$light_bg: {{ $colors.light.bg | default "#f5f5f5" }}; +$light_hl_bg: {{ $colors.light.hl_bg | default "#e6e6e6" }}; +$light_fg: {{ $colors.light.fg | default "#262625" }}; +$light_dim_fg: {{ $colors.light.dim_fg | default "#40403e" }}; +$light_stroke: {{ $colors.light.stroke | default "#575754" }}; +$light_accent: {{ $colors.light.accent | default "#db5793" }}; +$light_sidebar_bg: {{ $colors.light.sidebar.bg | default "#e6e6e6" }}; +$light_sidebar_fg: {{ $colors.light.sidebar.fg | default "#121211" }}; + +:root { + --dark_bg: #{$dark_bg}; + --dark_hl_bg: #{$dark_hl_bg}; + --dark_fg: #{$dark_fg}; + --dark_dim_fg: #{$dark_dim_fg}; + --dark_stroke: #{$dark_stroke}; + --dark_accent: #{$dark_accent}; + --dark_sidebar_bg: #{$dark_sidebar_bg}; + --dark_sidebar_fg: #{$dark_sidebar_fg}; + + --light_bg: #{$light_bg}; + --light_hl_bg: #{$light_hl_bg}; + --light_fg: #{$light_fg}; + --light_dim_fg: #{$light_dim_fg}; + --light_stroke: #{$light_stroke}; + --light_accent: #{$light_accent}; + --light_sidebar_bg: #{$light_sidebar_bg}; + --light_sidebar_fg: #{$light_sidebar_fg}; + + {{ if eq .Site.Data.colors.default "light" }} + --default_bg: #{$light_bg}; + --default_hl_bg: #{$light_hl_bg}; + --default_fg: #{$light_fg}; + --default_dim_fg: #{$light_dim_fg}; + --default_stroke: #{$light_stroke}; + --default_accent: #{$light_accent}; + --default_sidebar_bg: #{$light_sidebar_bg}; + --default_sidebar_fg: #{$light_sidebar_fg}; + {{ else }} + --default_bg: #{$dark_bg}; + --default_hl_bg: #{$dark_hl_bg}; + --default_fg: #{$dark_fg}; + --default_dim_fg: #{$dark_dim_fg}; + --default_stroke: #{$dark_stroke}; + --default_accent: #{$dark_accent}; + --default_sidebar_bg: #{$dark_sidebar_bg}; + --default_sidebar_fg: #{$dark_sidebar_fg}; + {{ end }} +} + + $main_font: {{ .Site.Params.fontFamily | default "JetBrains Mono" }}; $title_font: {{ .Site.Params.titleFontFamily | default "$main_font" }}; $mono_font: {{ .Site.Params.monospaceFontFamily | default "JetBrains Mono" }}; -$highlight_bg_color: {{ .Site.Params.highlightBgColor | default "#34363b" }}; $content_width: {{ .Site.Params.contentWidth | default "1000px" }}; $border_radius: 10px; $content_spacing: 25px; @@ -17,8 +72,8 @@ $main_font_mult: {{ .Site.Params.mainFontSizeMultiplier | default 1.0 }}; $mono_font_mult: {{ .Site.Params.monoFontSizeMultiplier | default 1.0 }}; ::selection, ::-moz-selection { - background: $accent_color; - color: $fg_color; + background: var(--default_accent); + color: var(--default_fg); } body, html { @@ -26,8 +81,8 @@ body, html { font-size: $base_font_size * $main_font_mult; margin: 0; padding: 0; - background-color: $bg_color; - color: $fg_color; + background-color: var(--default_bg); + color: var(--default_fg); } body { @@ -35,11 +90,11 @@ body { } a { - color: $fg_color; + color: var(--default_fg); text-decoration: none; - border-bottom: 2px solid $fg_color; + border-bottom: 2px solid var(--default_fg); &:hover, &:focus { - border-color: $accent_color !important; + border-color: var(--default_accent) !important; } } @@ -55,9 +110,9 @@ a { } footer { - color: $dim_fg_color; + color: var(--default_dim_fg); a { - color: $dim_fg_color; + color: var(--default_dim_fg); } hr { margin-top: (2 * $content_spacing); @@ -94,7 +149,7 @@ article, .articlePreview { } pre { padding: 20px; - border: 1px solid $stroke_color; + border: 1px solid var(--default_stroke); border-radius: 3px; } } @@ -102,7 +157,7 @@ article, .articlePreview { code { font-family: "Symbols Nerd Font", $mono_font, monospace; font-size: $base_font_size * .8 * $mono_font_mult; - border: 1px solid $stroke_color; + border: 1px solid var(--default_stroke); border-radius: 3px } code, table { @@ -121,19 +176,16 @@ table { display: block; td, th { padding: 6px; - border: 1px solid $stroke_color; + border: 1px solid var(--default_stroke); } - th { - background-color: lighten($bg_color, 5%); - } - tr:nth-child(even) { - background-color: lighten($bg_color, 5%); + th, tr:nth-child(even) { + filter: brightness(105%); } } .date, .date a { - color: $dim_fg_color; - border-color: $dim_fg_color; + color: var(--default_dim_fg); + border-color: var(--default_dim_fg); font-size: .9em; } @@ -149,7 +201,7 @@ table { #pageNavigation { text-align: right; a { - color: $accent_color; + color: var(--default_accent); } a, span { // appropriately sized tap targets @@ -169,16 +221,16 @@ table { width: 40px; height: 40px; line-height: 40px; - padding: auto; + padding: unset; border-radius: 100%; - background-color: $highlight_bg_color; - color: $fg_color; + background-color: var(--default_hl_bg); + color: var(--default_fg); } span { - background-color: $accent_color; + background-color: var(--default_accent); } a:hover { - background-color: $accent_color; + background-color: var(--default_accent); } } } @@ -186,7 +238,7 @@ table { h1, h2, h3, h4, h5, h6 { font-family: "Symbols Nerd Font", $title_font; a { - color: $accent_color; + color: var(--default_accent); {{ if not (.Site.Params.underlineTitleLinks | default false) }} border-bottom: none; {{ end }} @@ -209,7 +261,7 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;} .nerdlink { @extend .nerd; - color: $fg_color; + color: var(--default_fg); border-bottom: none; position: relative; width: 1em; @@ -218,7 +270,7 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;} align-items: center; justify-content: center; .pseudofont { - fill: $fg_color; + fill: var(--default_fg); display: inline; position: relative; top: 1px; @@ -229,19 +281,19 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;} left: 50%; transform: translateX(-50%); padding: 2px; - border: 1px solid $stroke_color; + border: 1px solid var(--default_stroke); border-radius: 3px; - color: $fg_color; + color: var(--default_fg); display: none; - background-color: $bg_color; + background-color: var(--default_bg); z-index: 900; text-align: center; } &:hover { .pseudofont { - fill: $accent_color; + fill: var(--default_accent); } - color: $accent_color; + color: var(--default_accent); text-decoration: none; border-bottom: none; span { @@ -255,7 +307,7 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;} padding-bottom: 25px; &.discrete { - background-color: $highlight_bg_color; + background-color: var(--default_hl_bg); border-radius: $border_radius; padding: 20px; padding-top: 1px; @@ -322,34 +374,34 @@ ul.list { #commento { margin-top: 25px; - color: $fg_color; + color: var(--default_fg); font-family: "Symbols Nerd Font", $main_font, monospace; textarea, #commento-markdown-help-root { background: rgba(255, 255, 255, .05); - color: $fg_color; + color: var(--default_fg); border-radius: 0; border: none; td, td>*, td>*>* { - color: $fg_color; + color: var(--default_fg); pre { font-family: "Symbols Nerd Font", $mono_font, monospace; - color: $dim_fg_color; + color: var(--default_dim_fg); } } } #commento-submit-button-root { - background: $accent_color; - color: $fg_color; + background: var(--default_accent); + color: var(--default_fg); } .commento-name { - color: $dim_fg_color; + color: var(--default_dim_fg); } .commento-sort-policy-buttons { a { border-bottom: none; } .commento-sort-policy-button-selected { - color: $accent_color; + color: var(--default_accent); } } .commento-card { @@ -358,7 +410,7 @@ ul.list { } .commento-body { >*, *>*, >*>*>*, >*>*>*>*, >*>*>*>*>* { - color: $fg_color; + color: var(--default_fg); font-family: "Symbols Nerd Font", $main_font, monospace; } } @@ -438,12 +490,13 @@ ul.list { @mixin buttonLikeLink { display: inline-block; border-radius: $border_radius; - background-color: $highlight_bg_color; + background-color: var(--default_hl_bg); padding: ($content_spacing / 2); margin: ($content_spacing / 6) 0; + transition: background-color .15s ease-in-out; border-bottom: none; &:hover, &:focus { - background-color: $accent_color; + background-color: var(--default_accent); } } @@ -517,13 +570,13 @@ header { font-size: .9em; ul { li { - border-right: 1px solid $accent_color; + border-right: 1px solid var(--default_accent); &:last-child { border-right: none; } a { padding: 2px 20px; - color: $accent_color; + color: var(--default_accent); &:hover { text-decoration: underline; } @@ -556,16 +609,16 @@ input { }} @include buttonLikeLink; &:hover, &:focus, &:active { - background-color: $highlight_bg_color; + background-color: var(--default_hl_bg); } {{ end }} font-family: "Symbols Nerd Font", $main_font; - background-color: $highlight_bg_color; + background-color: var(--default_hl_bg); padding: 12px; - color: $fg_color; + color: var(--default_fg); border: 2px solid transparent; &:focus, &:active { - border: 2px solid $accent_color; + border: 2px solid var(--default_accent); outline: none; } } @@ -581,7 +634,7 @@ input { top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; - background-color: $bg_color; + background-color: var(--default_bg); width: 450px; max-width: 100%; padding: 24px; @@ -656,8 +709,8 @@ header { {{ if eq .Site.Params.navtype "circles" }} border-radius: $border_radius; {{ end }} - border: 2px solid $accent_color; - background-color: $highlight_bg_color; + border: 2px solid var(--default_accent); + background-color: var(--default_hl_bg); flex-direction: column; li { border-right: none !important; @@ -701,10 +754,10 @@ header.jumbotronContainer { color: white !important; } #main-nav a, .nerdlink:hover { - color: $accent_color !important; + color: var(--default_accent) !important; } .nerdlink span { - color: $fg_color !important; + color: var(--default_fg) !important; text-shadow: none; } #searchbar { @@ -725,7 +778,7 @@ header.jumbotronContainer { {{ end }} {{ if (.Site.Data.jumbotron.textShadow | default false) }} &, * { - text-shadow: 0 0 5px transparentize($fg_color, .3); + text-shadow: 0 0 5px transparentize($dark_fg_color, .3); } {{ end }} > *:first-child { @@ -740,8 +793,8 @@ header.jumbotronContainer { }} background: linear-gradient( - transparentize($bg_color, 0.2), - transparentize($bg_color, 0.2) + transparentize(var(--default_bg), 0.2), + transparentize(var(--default_bg), 0.2) ), url({{ .Site.Data.jumbotron.background }}); background-size: cover; @@ -793,7 +846,7 @@ header.jumbotronContainer { } opacity: .7; border-radius: 100%; - border: 2px solid $fg_color; + border: 2px solid var(--default_fg); padding: 3px; // display: flex; flex-direction: row; justify-content: center; background-color: transparent; @@ -801,7 +854,7 @@ header.jumbotronContainer { svg { margin-top: 5px; &, * { - fill: $fg_color; + fill: var(--default_fg); transition: fill .15s ease-in-out; } @keyframes bounce { @@ -816,9 +869,9 @@ header.jumbotronContainer { } &:hover, &:focus, &:active { - background-color: $fg_color; + background-color: var(--default_fg); svg, svg * { - fill: $bg_color; + fill: var(--default_bg); } } } @@ -889,7 +942,7 @@ header.jumbotronContainer { {{ if eq .Site.Params.navtype "circles" }} @include buttonLikeLink; background-color: transparent; - border: 2px solid $accent_color; + border: 2px solid var(--default_accent); {{ end }} } } @@ -918,12 +971,6 @@ header.jumbotronContainer { {{ if .Site.Params.enableSidebarLayout | default false }} $sidebar_width: 350px; - $sidebar_bg_color: {{ - .Site.Params.sidebarBackgroundColor | default "$highlight_bg_color" - }}; - $sidebar_fg_color: {{ - .Site.Params.sidebarForegroundColor | default "$fg_color" - }}; header { #sidebar_nav, .sidebarToc { @@ -937,6 +984,7 @@ header.jumbotronContainer { @media only screen and (min-width: 950px) { html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} { position: fixed; top: 0; bottom: 0; left: 0; right: 0; + color: var(--default_sidebar_fg); #baseContainer { display: flex; flex-direction: row; @@ -944,7 +992,7 @@ header.jumbotronContainer { max-height: 100vh; header { margin-left: unset; margin-right: unset; - background-color: $sidebar_bg_color; + background-color: var(--default_sidebar_bg); max-width: $sidebar_width; min-width: $sidebar_width; height: 100vh; diff --git a/data/colors.yml b/data/colors.yml new file mode 100644 index 0000000..7fbd27a --- /dev/null +++ b/data/colors.yml @@ -0,0 +1,22 @@ +default: dark # light +auto_switch: false +dark: + bg: '#242629' # main site background + hl_bg: '#34363b' # card and circle navigation background color for discrete card mode + fg: 'white' # font color + dim_fg: '#bababa' # will be used for secondary information like dates and tags + stroke: '#4f4f4f' # stroke/border color used mostly in the icon menu tooltip + accent: '#db5793' # pervasive accent color + sidebar: + bg: '#34363b' # sidebar background + fg: 'white' # sidebar font color +light: + bg: '#f5f5f5' + hl_bg: '#e6e6e6' + fg: '#262625' + dim_fg: '#40403e' + stroke: '#575754' + accent: '#db5793' + sidebar: + bg: '#e6e6e6' + fg: '#121211' diff --git a/layouts/_default/manifest.json b/layouts/_default/manifest.json index ddd88ab..3eca3c0 100644 --- a/layouts/_default/manifest.json +++ b/layouts/_default/manifest.json @@ -4,8 +4,14 @@ "short_name": "{{ .Site.Title }}", "start_url": "/", "display": "standalone", - "background_color": "{{ .Site.Params.backgroundColor | default "#242629" }}", - "theme_color": "{{ .Site.Params.accentColor | default "#db5793" }}" + {{ $bg := (.Site.Data.colors.dark.bg | default "#242629") }} + {{ $accent := (.Site.Data.colors.dark.accent | default "#db5793") }} + {{ if eq .Site.Data.colors.default "light" }} + {{ $bg = (.Site.Data.colors.light.bg | default "#f5f5f5") }} + {{ $accent = (.Site.Data.colors.light.accent | default "#db5793") }} + {{ end }} + "background_color": "{{ $bg }}", + "theme_color": "{{ $accent }}" {{ if .Site.Params.description }} , "description": "{{ .Site.Params.description }}"