raghnarok/hugo_idunn
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add option to set colors in config file

Browse source
This commit is contained in:
Gregory Trolliet 2020-04-27 21:39:46 +02:00
parent 578125c659
commit 2aaf20406d
5 changed files with 32 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -5,6 +5,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased] ## [Unreleased]
### Added
* Option to set color variables in config.toml. Options are:
* **font**, general font color, default to *black*;
* **background**, general background color, default to *white*;
* **main**, theme color, used for footer among others, default to *grey*;
* **font_above**, used for font above *main* color, default to *white*.
## [1.0.0] - 2020-04-27 ## [1.0.0] - 2020-04-27
### Added ### Added

6
README.md
View file

@ -44,8 +44,10 @@ It is possible to basicaly change some colors:
```toml ```toml
[params.colors] [params.colors]
main = "green" # Color of the footer font = "black" # General font color, default to black
alt_text = "black" # Color of the text above 'main' color background = "white" # General background color, default to white
main = "grey" # Theme color, used for footer among others, default to grey
font_above = "white" # Used for font above *main* color, default to white
``` ```
### Custom CSS ### Custom CSS

10
layouts/_default/baseof.html
View file

@ -1,7 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
{{ if .Site.Params.colors }}
<style>
:root {
{{ range $key, $val := .Site.Params.colors }}
--{{ $key }}-color: {{ $val }};
{{ end }}
}
</style>
{{ end }}
<body> <body>
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}

8
layouts/partials/footer.html
View file

@ -1,13 +1,10 @@
<footer class="footer" style=" <footer class="footer" style="
{{ if $.Site.Params.colors.main }}background-color: {{ $.Site.Params.colors.main }};{{ end }}
{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}
"> ">
<address class="footer_contact"> <address class="footer_contact">
{{ if $.Site.Params.contact.email }} {{ if $.Site.Params.contact.email }}
<p class="footer_item"> <p class="footer_item">
<img class="page-icon" src="/svg/envelope.svg"/> <img class="page-icon" src="/svg/envelope.svg"/>
<a href="mailto:{{ $.Site.Params.contact.email}}" class="footer_link" alt="Email" <a href="mailto:{{ $.Site.Params.contact.email}}" class="footer_link" alt="Email">
style="{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}">
{{ $.Site.Params.contact.email }} {{ $.Site.Params.contact.email }}
</a> </a>
</p> </p>
@ -16,8 +13,7 @@
{{ if $.Site.Params.contact.phone }} {{ if $.Site.Params.contact.phone }}
<p class="footer_item"> <p class="footer_item">
<img class="page-icon" src="/svg/phone.svg"/> <img class="page-icon" src="/svg/phone.svg"/>
<a href="tel:{{ $.Site.Params.contact.phone}}" class="footer_link" alt="Phone" <a href="tel:{{ $.Site.Params.contact.phone}}" class="footer_link" alt="Phone">
style="{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}">
{{ $.Site.Params.contact.phone }} {{ $.Site.Params.contact.phone }}
</a> </a>
</p> </p>

15
static/css/base.css
View file

@ -1,8 +1,9 @@
/******************* Constants *******************/ /******************* Constants *******************/
:root { :root {
--font-color: #000000; --font-color: black;
--background-color: #FFFFFF; --background-color: white;
--footer-color: grey; --main-color: grey;
--font_above-color: white;
--max-width: 800px; --max-width: 800px;
--max-width-full: 1000px; --max-width-full: 1000px;
@ -80,11 +81,11 @@ body {
/******************* Footer *******************/ /******************* Footer *******************/
.footer { .footer {
height: var(--footer-height-inline); height: var(--footer-height-inline);
background-color: var(--footer-color); background-color: var(--main-color);
color: white; color: var(--font_above-color);
} }
.footer .footer_link { .footer .footer_link {
color: white; color: var(--font_above-color);
} }
.footer .footer_link:hover { .footer .footer_link:hover {
color: black; color: black;
@ -139,7 +140,7 @@ body {
width: 0%; width: 0%;
} }
.navigation-item a::before { .navigation-item a::before {
background-color: black; background-color: var(--main-color);
} }
.navigation-item a:hover::before, .navigation-item a:hover::before,
.navigation-item a:focus::before { .navigation-item a:focus::before {