Add some colors configuration
This commit is contained in:
parent
d045ab66d3
commit
b42f0136cf
4 changed files with 20 additions and 6 deletions
|
@ -10,4 +10,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
### Added
|
||||
|
||||
* First version of the theme
|
||||
|
||||
|
|
12
README.md
12
README.md
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -80,8 +80,6 @@ body {
|
|||
/******************* Footer *******************/
|
||||
.footer {
|
||||
height: var(--footer-height-inline);
|
||||
}
|
||||
.footer {
|
||||
background-color: var(--footer-color);
|
||||
color: white;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue