From e1745b84ee8be1c10d9fb334fd3b4659624fcd38 Mon Sep 17 00:00:00 2001
From: Niklas Buschmann <niklasbuschmann@users.noreply.github.com>
Date: Fri, 19 Jul 2019 18:54:30 +0200
Subject: [PATCH] add brightheader option

---
 README.md                    |  4 ++++
 layouts/_default/baseof.html |  2 +-
 static/css/theme.css         | 29 +++++++++++++----------------
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 3046b42..2a482db 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9dc75b1..83105dc 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -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 }}
diff --git a/static/css/theme.css b/static/css/theme.css
index 4d7f08b..a23708c 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -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;
 }