improve sidebar

This commit is contained in:
Niklas Buschmann 2020-02-04 03:12:52 +01:00
parent 985135bfe4
commit 068f48121b
4 changed files with 21 additions and 12 deletions

View File

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

View File

@ -7,6 +7,9 @@
<meta name="description" content="{{ .Description | default .Site.Params.description }}"> <meta name="description" content="{{ .Description | default .Site.Params.description }}">
{{- end }} {{- end }}
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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/index.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/classes.css"> <link rel="stylesheet" href="{{ .Site.BaseURL }}css/classes.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}fonts/PT-Sans.css"> <link rel="stylesheet" href="{{ .Site.BaseURL }}fonts/PT-Sans.css">
@ -15,9 +18,6 @@
{{- end }} {{- end }}
<link rel="canonical" href="{{ .Permalink }}"> <link rel="canonical" href="{{ .Permalink }}">
<link rel="alternate" type="application/rss+xml" href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" title="{{ .Site.Title }}"> <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 }} {{- if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }} {{ partial "math.html" . }}
{{- end }} {{- end }}
@ -26,7 +26,7 @@
{{ $url := .RelPermalink }} {{ $url := .RelPermalink }}
{{ if not .Site.Params.hidetitle }}<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>{{ end }} {{ 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 }} {{ 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> </header>
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}

View File

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

View File

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