Add some colors configuration

This commit is contained in:
Gregory Trolliet 2020-04-27 19:14:45 +02:00
parent d045ab66d3
commit b42f0136cf
4 changed files with 20 additions and 6 deletions

View file

@ -10,4 +10,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
* First version of the theme

View file

@ -29,6 +29,8 @@ theme = "simple-site" # The Hugo theme
### Description
You can use some parameters to fill meta tags and bases images:
```toml
[params]
description = "" # Description for the meta tag
@ -36,6 +38,16 @@ theme = "simple-site" # The Hugo theme
logo = "" # Logo URL
```
### Colors
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
```
### Custom CSS
```toml

View file

@ -1,9 +1,13 @@
<footer class="footer">
<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">
<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 }}
</a>
</p>
@ -12,7 +16,8 @@
{{ 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">
<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 }}
</a>
</p>

View file

@ -80,8 +80,6 @@ body {
/******************* Footer *******************/
.footer {
height: var(--footer-height-inline);
}
.footer {
background-color: var(--footer-color);
color: white;
}