add brightheader option

This commit is contained in:
Niklas Buschmann 2019-07-19 18:54:30 +02:00
parent 8f4743d718
commit e1745b84ee
3 changed files with 18 additions and 17 deletions

View File

@ -13,6 +13,10 @@ Second, specify `contrast-hugo` as your default theme in the `config.toml` file.
at the top of the file.
## Options
To use the bright header, you can set `brightheader = true` in the `params` section of your config.
## Features
- supports dark mode on macOS Mojave

View File

@ -17,7 +17,7 @@
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/mathtex-script-type.min.js" integrity="sha256-b8diVEOgPDxUp0CuYCi7+lb5xIGcgrtIdrvE8d/oztQ=" crossorigin="anonymous"></script>
{{- end }}
<header>
<header class="{{ if .Site.Params.brightheader }}bright{{ else }}dark{{ end }}">
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
<nav>
{{ range .Site.Menus.main }}

View File

@ -1,3 +1,10 @@
@media (prefers-color-scheme: dark) {
html {
background: #282828;
color: #fff;
}
}
body {
font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size: 16px;
@ -50,7 +57,7 @@ hr {
blockquote {
background: rgba(148,148,148,0.06);
border-left: 3px solid rgba(148,148,148,0.6);
border-left: 4px solid #68f;
padding: 1px 1.5em;
}
@ -106,20 +113,6 @@ body > header, body > footer {
align-items: center;
}
@media (prefers-color-scheme: light) {
html {
background: #fff;
color: #282828;
}
}
@media (prefers-color-scheme: dark) {
html {
background: #282828;
color: #fff;
}
}
body > header, article, body > footer {
padding: 1.5em calc(34% - 12rem);
}
@ -134,7 +127,11 @@ article, body > footer {
border-top: 1px solid rgba(148,148,148,0.12);
}
body > header {
body > header.bright {
box-shadow: 0 0 1em rgba(40, 40, 40, .05);
}
body > header.dark {
background: #2b2b2b;
color: #fff;
}