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).
## [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
### Added

6
README.md
View file

@ -44,8 +44,10 @@ It is possible to basicaly change some colors:
```toml
[params.colors]
main = "green" # Color of the footer
alt_text = "black" # Color of the text above 'main' color
font = "black" # General font color, default to black
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

10
layouts/_default/baseof.html
View file

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

8
layouts/partials/footer.html
View file

@ -1,13 +1,10 @@
<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">
{{ if $.Site.Params.contact.email }}
<p class="footer_item">
<img class="page-icon" src="/svg/envelope.svg"/>
<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 }}">
<a href="mailto:{{ $.Site.Params.contact.email}}" class="footer_link" alt="Email">
{{ $.Site.Params.contact.email }}
</a>
</p>
@ -16,8 +13,7 @@
{{ if $.Site.Params.contact.phone }}
<p class="footer_item">
<img class="page-icon" src="/svg/phone.svg"/>
<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 }}">
<a href="tel:{{ $.Site.Params.contact.phone}}" class="footer_link" alt="Phone">
{{ $.Site.Params.contact.phone }}
</a>
</p>

15
static/css/base.css
View file

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