fbievan
/
website
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
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.

202
assets/scss/style.scss
View File

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

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 }}",
"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 }}"