revert compiletime sass color var; use runtime again

content/about.md

@@ -1,6 +1,7 @@
 ---
 title: "Hi, I’m Wouter Groeneveld"
 bigimg: About Me.jpg
+accent: darkred
 disableComments: true
 ---
 

themes/brainbaking-minimal/assets/sass/_blockquote.sass

@@ -23,7 +23,7 @@ blockquote
     -webkit-mask-size: cover
     content: ''
     display: inline-block
-    background-color: $accent
+    background-color: var(--accent)
     position: absolute
     width: 40px
     height: 40px

themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass

@@ -3,9 +3,9 @@ h1
 	@media (min-width: 768px)
 		font-size: 3rem
 h2
-	font-size: 2.0rem
+	font-size: 2.1rem
 h3
-	font-size: 1.9rem
+	font-size: 1.7rem
 h4
 	font-size: 1.5rem
 h5
@@ -47,7 +47,7 @@ code
 	font-family: Menlo,Monaco,Consolas,"Courier New",monospace	
 	padding: 2px 4px
 	font-size: 90%
-	color: $accent2
+	color: var(--accent2)
 	background-color: #f9f2f4
 	border-radius: 4px
 
@@ -119,7 +119,7 @@ pre code
     display: inline-block !important
 
 .navbar.navbar-default 
-    border-top: 5px solid $accent
+    border-top: 5px solid var(--accent)
     border-bottom: 1px solid #e7e7e7
 
 .navbar-right
@@ -199,7 +199,7 @@ nav
 	font-weight: bold
 
 body > footer 
-    border-bottom: 5px solid $accent
+    border-bottom: 5px solid var(--accent)
     background-color: rgba(243, 243, 243, 0.8)
 
 .navbar-default .navbar-toggle

themes/brainbaking-minimal/assets/sass/_brainbaking.sass

@@ -39,12 +39,12 @@ div.highlight
 
 
 a:link, a:visited, a
-  color: $accent
+  color: var(--accent)
   text-decoration: none
 
   &:hover
     text-decoration: underline
-    color: darken($accent, 10%)
+    color: $grey
 
 nav
   a:hover
@@ -83,6 +83,19 @@ main
     article a
       text-decoration: underline
 
+  &.post article > p:first-of-type::first-letter,
+  &.essays article > p:first-of-type::first-letter
+    font-size: 3.05em
+    font-weight: bold
+    line-height: 1.1em
+    float: left
+    margin-right: 10px
+
+
+  footer
+    margin-top: 3.5rem
+
+
 header
     margin: auto
     padding-top: 1rem
@@ -90,7 +103,7 @@ header
     max-width: 80%
 
     h1
-      color: $accent
+      color: var(--accent)
     h2
       margin-top: -1rem
     h2, h3
@@ -103,8 +116,8 @@ time
   color: grey
 
 kbd
-  color: $accent
+  color: var(--accent)
-  border: 1px solid $accent
+  border: 1px solid var(--accent)
   font-size: 1rem
   padding: 2px 4px
   border-radius: 3px

themes/brainbaking-minimal/assets/sass/_commento.sass

@@ -3,8 +3,8 @@
     font-size: 12pt !important
 
   .commento-round-check input[type=checkbox]:checked+label:before, .commento-round-check input[type=radio]:checked+label:before 
-    background: $accent !important
+    background: var(--accent) !important
-    border: 1px solid $accent !important
+    border: 1px solid var(--accent) !important
 
   .commento-markdown-help tr td pre 
     padding: 0 !important
@@ -16,14 +16,14 @@
 
 .commento-button 
   color: white !important
-  background: $accent !important
+  background: var(--accent) !important
 
 .commento-oauth-buttons button 
   width: auto !important
 
 .commento-root a,
 .commento-email-button 
-  color: $accent !important
+  color: var(--accent) !important
 
 .commento-name 
   font-size: 14pt !important    

themes/brainbaking-minimal/assets/sass/_figures.sass

@@ -48,4 +48,4 @@ figure
   -o-background-size: cover
 
   border-top: 2px solid lightgray
-  border-bottom: 1px solid $accent
+  border-bottom: 1px solid var(--accent)

themes/brainbaking-minimal/assets/sass/_goodreads.sass

@@ -1,7 +1,7 @@
 
 /* --- goodreads widget styles --- */
 .goodreadswidget 
-  border-bottom: 3px solid $accent
+  border-bottom: 3px solid var(--accent)
   padding: 0px
   padding-bottom: 10px
 

themes/brainbaking-minimal/assets/sass/_icons.sass

@@ -15,18 +15,6 @@ main
     .icon
       @extend %icon-in-text
 
-  &.single article > p:first-of-type::first-letter
-    font-size: 3.05em
-    font-weight: bold
-    line-height: 1.1em
-    float: left
-    margin-right: 10px
-
-
-  footer
-    margin-top: 3.5rem
-
-
 .icon
   width: 32px
   height: 32px

themes/brainbaking-minimal/assets/sass/_listing.sass

@@ -29,7 +29,7 @@ div.list
     padding-left: 0.4rem
     padding-right: 0.4rem
     color: white
-    background-color: $accent
+    background-color: var(--accent)
     border-radius: 2rem
     margin-top: 1.5rem
     float: left  
@@ -46,4 +46,4 @@ div.list
 
 .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover 
   background-color: white !important
-  border-color: $accent !important
+  border-color: var(--accent) !important

themes/brainbaking-minimal/assets/sass/main.sass

@@ -1,7 +1,4 @@
 $grey: #333
-$accent: {{ .Params.accent | default .Site.Params.accent }}
-$accent2: {{ .Params.accent2 | default .Site.Params.accent2 }}
-
 
 @import 'fonts'
 @import 'bootstrap-minimal'

themes/brainbaking-minimal/layouts/_default/single.html

@@ -3,7 +3,7 @@
 {{ partial "bigimg" . }}
 
 {{ partial "single-header" . }}
-<main class="single">
+<main class="single {{ .Section }}">
     <br>
     <article>
       <!-- thanks https://www.godo.dev/tutorials/hugo-image-figure-wrap/ -->

themes/brainbaking-minimal/layouts/partials/css.html

@@ -1,5 +1,11 @@
 <link rel = 'stylesheet' href = '/css/simple-lightbox.min.css'>
 
+<style>
+:root {
+	--accent: {{ if .Params.accent }}{{ .Params.accent }}{{ else }}{{ .Site.Params.accent }}{{ end }};
+	--accent2: {{ if .Params.accent2 }}{{ .Params.accent2 }}{{ else }}{{ .Site.Params.accent2 }}{{ end }};	
+}
+</style>
 {{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}
 {{- $styles := resources.Get "sass/main.sass" | resources.ExecuteAsTemplate "main.sass" . | resources.ToCSS $options | resources.Fingerprint "sha512" }}
 <link rel = 'stylesheet' href = '{{ $styles.Permalink }}' integrity = '{{ $styles.Data.Integrity }}'>