improve sidebar
This commit is contained in:
parent
985135bfe4
commit
068f48121b
13
README.md
13
README.md
@ -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
|
||||||
|
@ -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 }}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -49,7 +49,7 @@ article header h1 {
|
|||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
header [hidden] {
|
.hidden {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user