fbievan
/
Website-Redesign
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactored colors, moved them to separate data/colors.yml

This commit is contained in:
Gabriele Musco 2021-12-24 23:50:58 +01:00
parent 84c245d47c
commit a9b0deb581
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
4 changed files with 160 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -75,7 +75,6 @@ summaryLength = 70 # number of words for article summaries
discreteTags = false # enable discrete tag style; default false discreteTags = false # enable discrete tag style; default false
tagsInArticlePreview = true # enable tags list in the article preview card tagsInArticlePreview = true # enable tags list in the article preview card
gridView = false # show post list as a grid. goes well with discreteCards 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 bigArticleTitle = false # makes the title in the single article view bigger
enableSearch = true # enable search page 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 # you can customize all of the colors in this theme
# the values shown are the defaults # Colors are defined in data/colors.yml
backgroundColor = "#242629"
foregroundColor = "white"
dimForegroundColor = "#bababa"
strokeColor = "#4f4f4f"
accentColor = "#db5793"
# alternative sidebar layout # alternative sidebar layout
enableSidebarLayout = false enableSidebarLayout = false
sidebarBackgroundColor = "#34363b"
sidebarForegroundColor = "white"
tocInSidebar = false # if the sidebar is enbabled, show the TOC in the sidebar tocInSidebar = false # if the sidebar is enbabled, show the TOC in the sidebar
# redirect to baseURL if current URL host doesn't match # 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 - xmpp
- youtube - 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 ## Footer columns
You can add various columns of links in the footer using the `data/footer_columns.yml` file. You can add various columns of links in the footer using the `data/footer_columns.yml` file.

202
assets/scss/style.scss
View File

@ -1,12 +1,67 @@
$bg_color: {{ .Site.Params.backgroundColor | default "#242629" }}; {{ $colors := .Site.Data.colors | default dict }}
$fg_color: {{ .Site.Params.foregroundColor | default "white" }};
$dim_fg_color: {{ .Site.Params.dimForegroundColor | default "#bababa" }}; $dark_bg: {{ $colors.dark.bg | default "#242629" }};
$stroke_color: {{ .Site.Params.strokeColor | default "#4f4f4f" }}; $dark_hl_bg: {{ $colors.dark.hl_bg | default "#34363b" }};
$accent_color: {{ .Site.Params.accentColor | default "#db5793" }}; $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" }}; $main_font: {{ .Site.Params.fontFamily | default "JetBrains Mono" }};
$title_font: {{ .Site.Params.titleFontFamily | default "$main_font" }}; $title_font: {{ .Site.Params.titleFontFamily | default "$main_font" }};
$mono_font: {{ .Site.Params.monospaceFontFamily | default "JetBrains Mono" }}; $mono_font: {{ .Site.Params.monospaceFontFamily | default "JetBrains Mono" }};
$highlight_bg_color: {{ .Site.Params.highlightBgColor | default "#34363b" }};
$content_width: {{ .Site.Params.contentWidth | default "1000px" }}; $content_width: {{ .Site.Params.contentWidth | default "1000px" }};
$border_radius: 10px; $border_radius: 10px;
$content_spacing: 25px; $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 }}; $mono_font_mult: {{ .Site.Params.monoFontSizeMultiplier | default 1.0 }};
::selection, ::-moz-selection { ::selection, ::-moz-selection {
background: $accent_color; background: var(--default_accent);
color: $fg_color; color: var(--default_fg);
} }
body, html { body, html {
@ -26,8 +81,8 @@ body, html {
font-size: $base_font_size * $main_font_mult; font-size: $base_font_size * $main_font_mult;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: $bg_color; background-color: var(--default_bg);
color: $fg_color; color: var(--default_fg);
} }
body { body {
@ -35,11 +90,11 @@ body {
} }
a { a {
color: $fg_color; color: var(--default_fg);
text-decoration: none; text-decoration: none;
border-bottom: 2px solid $fg_color; border-bottom: 2px solid var(--default_fg);
&:hover, &:focus { &:hover, &:focus {
border-color: $accent_color !important; border-color: var(--default_accent) !important;
} }
} }
@ -55,9 +110,9 @@ a {
} }
footer { footer {
color: $dim_fg_color; color: var(--default_dim_fg);
a { a {
color: $dim_fg_color; color: var(--default_dim_fg);
} }
hr { hr {
margin-top: (2 * $content_spacing); margin-top: (2 * $content_spacing);
@ -94,7 +149,7 @@ article, .articlePreview {
} }
pre { pre {
padding: 20px; padding: 20px;
border: 1px solid $stroke_color; border: 1px solid var(--default_stroke);
border-radius: 3px; border-radius: 3px;
} }
} }
@ -102,7 +157,7 @@ article, .articlePreview {
code { code {
font-family: "Symbols Nerd Font", $mono_font, monospace; font-family: "Symbols Nerd Font", $mono_font, monospace;
font-size: $base_font_size * .8 * $mono_font_mult; font-size: $base_font_size * .8 * $mono_font_mult;
border: 1px solid $stroke_color; border: 1px solid var(--default_stroke);
border-radius: 3px border-radius: 3px
} }
code, table { code, table {
@ -121,19 +176,16 @@ table {
display: block; display: block;
td, th { td, th {
padding: 6px; padding: 6px;
border: 1px solid $stroke_color; border: 1px solid var(--default_stroke);
} }
th { th, tr:nth-child(even) {
background-color: lighten($bg_color, 5%); filter: brightness(105%);
}
tr:nth-child(even) {
background-color: lighten($bg_color, 5%);
} }
} }
.date, .date a { .date, .date a {
color: $dim_fg_color; color: var(--default_dim_fg);
border-color: $dim_fg_color; border-color: var(--default_dim_fg);
font-size: .9em; font-size: .9em;
} }
@ -149,7 +201,7 @@ table {
#pageNavigation { #pageNavigation {
text-align: right; text-align: right;
a { a {
color: $accent_color; color: var(--default_accent);
} }
a, span { a, span {
// appropriately sized tap targets // appropriately sized tap targets
@ -169,16 +221,16 @@ table {
width: 40px; width: 40px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: auto; padding: unset;
border-radius: 100%; border-radius: 100%;
background-color: $highlight_bg_color; background-color: var(--default_hl_bg);
color: $fg_color; color: var(--default_fg);
} }
span { span {
background-color: $accent_color; background-color: var(--default_accent);
} }
a:hover { a:hover {
background-color: $accent_color; background-color: var(--default_accent);
} }
} }
} }
@ -186,7 +238,7 @@ table {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "Symbols Nerd Font", $title_font; font-family: "Symbols Nerd Font", $title_font;
a { a {
color: $accent_color; color: var(--default_accent);
{{ if not (.Site.Params.underlineTitleLinks | default false) }} {{ if not (.Site.Params.underlineTitleLinks | default false) }}
border-bottom: none; border-bottom: none;
{{ end }} {{ end }}
@ -209,7 +261,7 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
.nerdlink { .nerdlink {
@extend .nerd; @extend .nerd;
color: $fg_color; color: var(--default_fg);
border-bottom: none; border-bottom: none;
position: relative; position: relative;
width: 1em; width: 1em;
@ -218,7 +270,7 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.pseudofont { .pseudofont {
fill: $fg_color; fill: var(--default_fg);
display: inline; display: inline;
position: relative; position: relative;
top: 1px; top: 1px;
@ -229,19 +281,19 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding: 2px; padding: 2px;
border: 1px solid $stroke_color; border: 1px solid var(--default_stroke);
border-radius: 3px; border-radius: 3px;
color: $fg_color; color: var(--default_fg);
display: none; display: none;
background-color: $bg_color; background-color: var(--default_bg);
z-index: 900; z-index: 900;
text-align: center; text-align: center;
} }
&:hover { &:hover {
.pseudofont { .pseudofont {
fill: $accent_color; fill: var(--default_accent);
} }
color: $accent_color; color: var(--default_accent);
text-decoration: none; text-decoration: none;
border-bottom: none; border-bottom: none;
span { span {
@ -255,7 +307,7 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
padding-bottom: 25px; padding-bottom: 25px;
&.discrete { &.discrete {
background-color: $highlight_bg_color; background-color: var(--default_hl_bg);
border-radius: $border_radius; border-radius: $border_radius;
padding: 20px; padding: 20px;
padding-top: 1px; padding-top: 1px;
@ -322,34 +374,34 @@ ul.list {
#commento { #commento {
margin-top: 25px; margin-top: 25px;
color: $fg_color; color: var(--default_fg);
font-family: "Symbols Nerd Font", $main_font, monospace; font-family: "Symbols Nerd Font", $main_font, monospace;
textarea, #commento-markdown-help-root { textarea, #commento-markdown-help-root {
background: rgba(255, 255, 255, .05); background: rgba(255, 255, 255, .05);
color: $fg_color; color: var(--default_fg);
border-radius: 0; border-radius: 0;
border: none; border: none;
td, td>*, td>*>* { td, td>*, td>*>* {
color: $fg_color; color: var(--default_fg);
pre { pre {
font-family: "Symbols Nerd Font", $mono_font, monospace; font-family: "Symbols Nerd Font", $mono_font, monospace;
color: $dim_fg_color; color: var(--default_dim_fg);
} }
} }
} }
#commento-submit-button-root { #commento-submit-button-root {
background: $accent_color; background: var(--default_accent);
color: $fg_color; color: var(--default_fg);
} }
.commento-name { .commento-name {
color: $dim_fg_color; color: var(--default_dim_fg);
} }
.commento-sort-policy-buttons { .commento-sort-policy-buttons {
a { a {
border-bottom: none; border-bottom: none;
} }
.commento-sort-policy-button-selected { .commento-sort-policy-button-selected {
color: $accent_color; color: var(--default_accent);
} }
} }
.commento-card { .commento-card {
@ -358,7 +410,7 @@ ul.list {
} }
.commento-body { .commento-body {
>*, *>*, >*>*>*, >*>*>*>*, >*>*>*>*>* { >*, *>*, >*>*>*, >*>*>*>*, >*>*>*>*>* {
color: $fg_color; color: var(--default_fg);
font-family: "Symbols Nerd Font", $main_font, monospace; font-family: "Symbols Nerd Font", $main_font, monospace;
} }
} }
@ -438,12 +490,13 @@ ul.list {
@mixin buttonLikeLink { @mixin buttonLikeLink {
display: inline-block; display: inline-block;
border-radius: $border_radius; border-radius: $border_radius;
background-color: $highlight_bg_color; background-color: var(--default_hl_bg);
padding: ($content_spacing / 2); padding: ($content_spacing / 2);
margin: ($content_spacing / 6) 0; margin: ($content_spacing / 6) 0;
transition: background-color .15s ease-in-out;
border-bottom: none; border-bottom: none;
&:hover, &:focus { &:hover, &:focus {
background-color: $accent_color; background-color: var(--default_accent);
} }
} }
@ -517,13 +570,13 @@ header {
font-size: .9em; font-size: .9em;
ul { ul {
li { li {
border-right: 1px solid $accent_color; border-right: 1px solid var(--default_accent);
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
a { a {
padding: 2px 20px; padding: 2px 20px;
color: $accent_color; color: var(--default_accent);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -556,16 +609,16 @@ input {
}} }}
@include buttonLikeLink; @include buttonLikeLink;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: $highlight_bg_color; background-color: var(--default_hl_bg);
} }
{{ end }} {{ end }}
font-family: "Symbols Nerd Font", $main_font; font-family: "Symbols Nerd Font", $main_font;
background-color: $highlight_bg_color; background-color: var(--default_hl_bg);
padding: 12px; padding: 12px;
color: $fg_color; color: var(--default_fg);
border: 2px solid transparent; border: 2px solid transparent;
&:focus, &:active { &:focus, &:active {
border: 2px solid $accent_color; border: 2px solid var(--default_accent);
outline: none; outline: none;
} }
} }
@ -581,7 +634,7 @@ input {
top: 24px; top: 24px;
left: 50%; transform: translateX(-50%); left: 50%; transform: translateX(-50%);
z-index: 9999; z-index: 9999;
background-color: $bg_color; background-color: var(--default_bg);
width: 450px; width: 450px;
max-width: 100%; max-width: 100%;
padding: 24px; padding: 24px;
@ -656,8 +709,8 @@ header {
{{ if eq .Site.Params.navtype "circles" }} {{ if eq .Site.Params.navtype "circles" }}
border-radius: $border_radius; border-radius: $border_radius;
{{ end }} {{ end }}
border: 2px solid $accent_color; border: 2px solid var(--default_accent);
background-color: $highlight_bg_color; background-color: var(--default_hl_bg);
flex-direction: column; flex-direction: column;
li { li {
border-right: none !important; border-right: none !important;
@ -701,10 +754,10 @@ header.jumbotronContainer {
color: white !important; color: white !important;
} }
#main-nav a, .nerdlink:hover { #main-nav a, .nerdlink:hover {
color: $accent_color !important; color: var(--default_accent) !important;
} }
.nerdlink span { .nerdlink span {
color: $fg_color !important; color: var(--default_fg) !important;
text-shadow: none; text-shadow: none;
} }
#searchbar { #searchbar {
@ -725,7 +778,7 @@ header.jumbotronContainer {
{{ end }} {{ end }}
{{ if (.Site.Data.jumbotron.textShadow | default false) }} {{ 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 }} {{ end }}
> *:first-child { > *:first-child {
@ -740,8 +793,8 @@ header.jumbotronContainer {
}} }}
background: background:
linear-gradient( linear-gradient(
transparentize($bg_color, 0.2), transparentize(var(--default_bg), 0.2),
transparentize($bg_color, 0.2) transparentize(var(--default_bg), 0.2)
), ),
url({{ .Site.Data.jumbotron.background }}); url({{ .Site.Data.jumbotron.background }});
background-size: cover; background-size: cover;
@ -793,7 +846,7 @@ header.jumbotronContainer {
} }
opacity: .7; opacity: .7;
border-radius: 100%; border-radius: 100%;
border: 2px solid $fg_color; border: 2px solid var(--default_fg);
padding: 3px; padding: 3px;
// display: flex; flex-direction: row; justify-content: center; // display: flex; flex-direction: row; justify-content: center;
background-color: transparent; background-color: transparent;
@ -801,7 +854,7 @@ header.jumbotronContainer {
svg { svg {
margin-top: 5px; margin-top: 5px;
&, * { &, * {
fill: $fg_color; fill: var(--default_fg);
transition: fill .15s ease-in-out; transition: fill .15s ease-in-out;
} }
@keyframes bounce { @keyframes bounce {
@ -816,9 +869,9 @@ header.jumbotronContainer {
} }
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: $fg_color; background-color: var(--default_fg);
svg, svg * { svg, svg * {
fill: $bg_color; fill: var(--default_bg);
} }
} }
} }
@ -889,7 +942,7 @@ header.jumbotronContainer {
{{ if eq .Site.Params.navtype "circles" }} {{ if eq .Site.Params.navtype "circles" }}
@include buttonLikeLink; @include buttonLikeLink;
background-color: transparent; background-color: transparent;
border: 2px solid $accent_color; border: 2px solid var(--default_accent);
{{ end }} {{ end }}
} }
} }
@ -918,12 +971,6 @@ header.jumbotronContainer {
{{ if .Site.Params.enableSidebarLayout | default false }} {{ if .Site.Params.enableSidebarLayout | default false }}
$sidebar_width: 350px; $sidebar_width: 350px;
$sidebar_bg_color: {{
.Site.Params.sidebarBackgroundColor | default "$highlight_bg_color"
}};
$sidebar_fg_color: {{
.Site.Params.sidebarForegroundColor | default "$fg_color"
}};
header { header {
#sidebar_nav, .sidebarToc { #sidebar_nav, .sidebarToc {
@ -937,6 +984,7 @@ header.jumbotronContainer {
@media only screen and (min-width: 950px) { @media only screen and (min-width: 950px) {
html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} { html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} {
position: fixed; top: 0; bottom: 0; left: 0; right: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0;
color: var(--default_sidebar_fg);
#baseContainer { #baseContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -944,7 +992,7 @@ header.jumbotronContainer {
max-height: 100vh; max-height: 100vh;
header { header {
margin-left: unset; margin-right: unset; margin-left: unset; margin-right: unset;
background-color: $sidebar_bg_color; background-color: var(--default_sidebar_bg);
max-width: $sidebar_width; max-width: $sidebar_width;
min-width: $sidebar_width; min-width: $sidebar_width;
height: 100vh; height: 100vh;

22
data/colors.yml Normal file
View File

@ -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'

10
layouts/_default/manifest.json
View File

@ -4,8 +4,14 @@
"short_name": "{{ .Site.Title }}", "short_name": "{{ .Site.Title }}",
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "{{ .Site.Params.backgroundColor | default "#242629" }}", {{ $bg := (.Site.Data.colors.dark.bg | default "#242629") }}
"theme_color": "{{ .Site.Params.accentColor | default "#db5793" }}" {{ $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 }} {{ if .Site.Params.description }}
, ,
"description": "{{ .Site.Params.description }}" "description": "{{ .Site.Params.description }}"