improve sidebar

README.md

@@ -19,9 +19,9 @@ In the `params` section of your config, you can enable a dark header style with
 
 ## 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.
+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. Adding a `hidden` class to the icon tag will hide the icon on mobile devices.
 
-An example configuration could look like this:
+An example `config.yaml` could look like this:
 
 ```yaml
 params:
@@ -35,23 +35,22 @@ menu:
     name = "Home"
     url = "/"
     weight = 1
-    pre = "<span class='fas fa-home'></span>"
+    pre = "<span class='fas fa-home hidden'></span>"
   - identifier = "about"
     name = "About"
     url = "/about/"
     weight = 2
-    pre = "<span class='fas fa-address-card'></span>"
-  external:
+    pre = "<span class='fas fa-address-card hidden'></span>"
   - identifier = "github"
     name = "Github"
     url = "https://github.com/"
     weight = 3
-    pre = "<span class='fab fa-github'></span>"
+    pre = "<span class='fab fa-github hidden'></span>"
   - identifier = "feed"
     name = "Subscribe"
     url = "/index.xml"
     weight = 4
-    pre = "<span class='fas fa-rss'></span>"
+    pre = "<span class='fas fa-rss hidden'></span>"
 ```
 
 ## Features

layouts/_default/baseof.html

@@ -7,6 +7,9 @@
 <meta name="description" content="{{ .Description | default .Site.Params.description }}">
 {{- end }}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{{- if .Site.Params.fontawesome }}
+{{ partial "font-awesome.html" . }}
+{{- end }}
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/index.css">
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/classes.css">
 <link rel="stylesheet" href="{{ .Site.BaseURL }}fonts/PT-Sans.css">
@@ -15,9 +18,6 @@
 {{- end }}
 <link rel="canonical" href="{{ .Permalink }}">
 <link rel="alternate" type="application/rss+xml" href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" title="{{ .Site.Title }}">
-{{- if .Site.Params.fontawesome }}
-{{ partial "font-awesome.html" . }}
-{{- end }}
 {{- if or .Params.math .Site.Params.math }}
 {{ partial "math.html" . }}
 {{- end }}
@@ -26,7 +26,7 @@
   {{ $url := .RelPermalink }}
   {{ if not .Site.Params.hidetitle }}<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>{{ end }}
   {{ range .Site.Menus }}<nav>{{ range . }}<a href="{{ .URL }}" {{ if (eq $url .URL) }}class="selected"{{ end }}>{{ .Pre }}{{ .Name }}{{ .Post }}</a>{{ end }}</nav>{{ end }}
-  {{ with .Site.Params.description }}<div hidden>{{ safeHTML . }}</div>{{ end }}
+  {{ with .Site.Params.description }}<div class="hidden">{{ safeHTML . }}</div>{{ end }}
 </header>
 
 {{- block "main" . }}{{- end }}

static/css/classes.css

@@ -14,6 +14,16 @@
   margin: 0 .2em;
 }
 
+.full > a {
+  font-size: 1.5em;
+  width: 100%;
+  margin: .1em 0 .6em;
+}
+
+.hidden {
+  display: none;
+}
+
 .fa, .fab, .fad, .fal, .far, .fas {
   margin-right: .6em;
 }

static/css/sidebar.css

@@ -49,7 +49,7 @@ article header h1 {
   font-size: 2em;
 }
 
-header [hidden] {
+.hidden {
   display: inline-block;
 }