diff --git a/README.md b/README.md index 2a482db..1223db6 100644 --- a/README.md +++ b/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 John Doe' + +menu: + main: + - identifier = "home" + name = "Home" + url = "/" + weight = 1 + pre = "" + - identifier = "about" + name = "About" + url = "/about/" + weight = 2 + pre = "" + external: + - identifier = "github" + name = "Github" + url = "https://github.com/" + weight = 3 + pre = "" + - identifier = "feed" + name = "Subscribe" + url = "/index.xml" + weight = 4 + pre = "" +``` ## 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 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 833196b..5982c66 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -22,14 +22,11 @@ {{ partial "math.html" . }} {{- end }} -
- {{ .Site.Title }} - - {{ if and .Site.Params.sidebar (isset .Site.Params "description") }}

{{ .Site.Params.description }}

{{ end }} +
+ {{ $url := .RelPermalink }} + {{ if not .Site.Params.hidetitle }}{{ .Site.Title }}{{ end }} + {{ range .Site.Menus }}{{ end }} + {{ with .Site.Params.description }}{{ end }}
{{- block "main" . }}{{- end }} diff --git a/static/css/classes.css b/static/css/classes.css index 0b8463c..5f4ed62 100644 --- a/static/css/classes.css +++ b/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; } diff --git a/static/css/index.css b/static/css/index.css index afcaed9..e74bf47 100644 --- a/static/css/index.css +++ b/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; } diff --git a/static/css/sidebar.css b/static/css/sidebar.css index 558c445..c140012 100644 --- a/static/css/sidebar.css +++ b/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 { - margin-top: 3em; +.fa, .fab, .fad, .fal, .far, .fas { + margin-right: 1.2em; }