Make color theme configurable

I need to do inline CSS, but the result is worth it.
Some element's color like:
- hr
- a
- blockquote
is themeable.

5 files changed, 21 insertions, 9 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index c82e3b2..56eb629 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-			<hr>
+			<hr class="sep" />
 		</main>
 		<footer class="container">
 			<div class="u-footer">
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 3e7dcd4..959b261 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -24,4 +24,5 @@
 		{{ else }}
 		<link rel="stylesheet" href="/css/ui.min.css"/>
 		{{ end }}
+		{{ partial "style" . }}
 	</head>
diff --git a/layouts/partials/style.html b/layouts/partials/style.html
new file mode 100644
index 0000000..b27819e
--- /dev/null
+++ b/layouts/partials/style.html
@@ -0,0 +1,13 @@
+<style>
+	a { color: {{ .Site.Params.ColorTheme }}; }
+	blockquote { border-left-color: {{ .Site.Params.ColorTheme }}; }
+	.bar a:hover {
+		color: {{ .Site.Params.ColorTheme }};
+		text-decoration: none; }
+	.sep {
+		margin-top: 2rem;
+		margin-bottom: 1rem;
+		margin-left:0;
+		width: 24rem;
+		border-top: 2px solid {{ .Site.Params.ColorTheme }}; }
+</style>
diff --git a/layouts/partials/title.html b/layouts/partials/title.html
index 0caa5ae..649f59a 100644
--- a/layouts/partials/title.html
+++ b/layouts/partials/title.html
@@ -11,7 +11,7 @@
 	<h1>{{ .Title }}</h1>
 	<h5>
 		<time datetime="{{.Date}}">{{ .Date.Format .Site.Params.DateFmt }}</time>
-		{{- with .Params.tags -}}
+		{{ with .Params.tags -}}
 		-
 			{{ range . }}
 			<a href="/tags/{{.}}">{{.}}</a>
@@ -28,4 +28,4 @@
 	<h1>{{ .Title }}</h1>
 	{{ end }}
 </hgroup>
-<hr>
+<hr class="sep" />
diff --git a/static/css/ui.css b/static/css/ui.css
index 864558b..016627e 100644
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -127,11 +127,8 @@ p { margin-top: 0; }
 
 /* #Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
-  color: #1eaedb;
-  text-decoration: none;
-}
-a:hover { color: #0fa0ce; }
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
 
 
 /* #Lists
@@ -243,6 +240,7 @@ blockquote cite a {
 
 /* #Navigation
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
+.bar a { color: #777; }
 .bar ul {
   list-style: none;
   margin: 0;
@@ -289,7 +287,7 @@ ol {
 }
 
 .u-footer {
-  margin-top: 4rem;
+  margin-top: 3rem;
   margin-bottom: 2rem;
 }