improve sidebar

README.md

@@ -1,4 +1,4 @@
-Adaption of the Jekyll version of [contrast](https://github.com/niklasbuschmann/contrast).
+Adaption of the of [contrast](https://github.com/niklasbuschmann/contrast) Jekyll theme.
 
 ## Installation
 
@@ -15,19 +15,59 @@ at the top of the file.
 
 ## Options
 
-To use the bright header, you can set `brightheader = true` in the `params` section of your config.
+In the `params` section of your config, you can enable a dark header style with `darkheader = true` and [icon](https://fontawesome.com/icons) support with `fontawesome = true` - which can be used by adding `pre` entries to your site's [menu](https://gohugo.io/content-management/menus/). The site title in the header can also be hidden with `hidetitle = true`.
+
+## Sidebar
+
+Instead of the horizontal menu, a sidebar can be enabled with `sidebar = true`. See [here](https://niklasbuschmann.github.io/contrast/) for an example of the sidebar in action.
+
+An example configuration could look like this:
+
+```yaml
+params:
+  sidebar = true
+  fontawesome = true
+  description = 'Made by <a href="">John Doe</a>'
+
+menu:
+  main:
+  - identifier = "home"
+    name = "Home"
+    url = "/"
+    weight = 1
+    pre = "<span class='fas fa-home'></span>"
+  - identifier = "about"
+    name = "About"
+    url = "/about/"
+    weight = 2
+    pre = "<span class='fas fa-address-card'></span>"
+  external:
+  - identifier = "github"
+    name = "Github"
+    url = "https://github.com/"
+    weight = 3
+    pre = "<span class='fab fa-github'></span>"
+  - identifier = "feed"
+    name = "Subscribe"
+    url = "/index.xml"
+    weight = 4
+    pre = "<span class='fas fa-rss'></span>"
+```
 
 ## Features
 
  - supports dark mode on macOS Mojave
+ - optional sidebar
  - MathJax support
  - no external resources
  - responsive
 
 ## Based on
 
+- [Hyde](https://github.com/poole/hyde)
 - [Minima](https://github.com/jekyll/minima)
 - [KaTeX](https://katex.org/)
+- [Font-Awesome](https://fontawesome.com/)
 
 ## License
 

layouts/_default/baseof.html

@@ -22,14 +22,11 @@
 {{ partial "math.html" . }}
 {{- end }}
 
-<header class="{{ if .Site.Params.brightheader }}bright{{ else }}dark{{ end }}">
+<header class="{{ if .Site.Params.darkheader }}dark{{ end }} {{ if gt (len .Site.Menus) 1 }}full{{ end }}">
-  <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+  {{ $url := .RelPermalink }}
-  <nav>
+  {{ if not .Site.Params.hidetitle }}<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>{{ end }}
-    {{ range .Site.Menus.main }}
+  {{ range .Site.Menus }}<nav>{{ range . }}<a href="{{ .URL }}" {{ if (eq $url .URL) }}class="selected"{{ end }}>{{ .Pre }}{{ .Name }}{{ .Post }}</a>{{ end }}</nav>{{ end }}
-      <a href="{{ .URL }}">{{ .Pre }}{{ .Name }}{{ .Post }}</a>
+  {{ with .Site.Params.description }}<div hidden>{{ safeHTML . }}</div>{{ end }}
-    {{ end }}
-  </nav>
-  {{ if and .Site.Params.sidebar (isset .Site.Params "description") }}<p>{{ .Site.Params.description }}</p>{{ end }}
 </header>
 
 {{- block "main" . }}{{- end }}

static/css/classes.css

@@ -1,9 +1,3 @@
-.bright {
-  background: rgba(255, 255, 255, 0.02);
-  box-shadow: 0 0 .6em rgba(28, 29, 34, 0.05);
-  border-bottom: 1px solid rgba(142, 142, 145, 0.16);
-}
-
 .dark {
   background: #1e1f25;
   color: #fff;
@@ -21,5 +15,5 @@
 }
 
 .fa, .fab, .fad, .fal, .far, .fas {
-  margin-right: 1.2em;
+  margin-right: .6em;
 }

static/css/index.css

@@ -12,9 +12,13 @@
   }
 }
 
+html {
+  font-size: 16px;
+  font-size: calc(0.8rem + 0.3vw);
+}
+
 body {
   font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif;
-  font-size: calc(0.8rem + 0.3vw);
   font-weight: 400;
   line-height: 1.6;
   margin: 0;
@@ -23,10 +27,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 400;
-}
-
 b, strong, th {
   font-weight: 600;
 }
@@ -130,7 +130,7 @@ article header {
 
 article header h1 {
   font-size: 1.8em;
-  margin: 0;
+  margin: 0 0 .1em;
 }
 
 nav {
@@ -141,6 +141,12 @@ nav a {
   margin: .4em .8em;
 }
 
+body > header {
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: 0 0 .6em rgba(28, 29, 34, 0.05);
+  border-bottom: 1px solid rgba(142, 142, 145, 0.16);
+}
+
 body > header, article {
   padding: 1.5em;
 }

static/css/sidebar.css

@@ -49,10 +49,18 @@ article header h1 {
   font-size: 2em;
 }
 
+header [hidden] {
+  display: inline-block;
+}
+
+header > div {
+  margin-top: 3em;
+}
+
 body > header > a {
   display: none;
 }
 
-body > header > p {
+.fa, .fab, .fad, .fal, .far, .fas {
-  margin-top: 3em;
+  margin-right: 1.2em;
 }