Add optional enlarged mode, make header and footer padding symmetric

Enlarged mode is basically like using the theme at ~110% zoom. It can be
enabled by setting `enlarged = true` as a config parameter. Other
changes are only minor fixes that shouldn't significantly impact
existing sites.
This commit is contained in:
Michael Noronha
2018-08-18 15:18:26 -07:00
parent 295f25a67d
commit bd0140e926
3 changed files with 42 additions and 24 deletions

View File

@@ -157,7 +157,11 @@ div.header .content {
align-items: center;
}
div.header .container .logo {
{{ if .Site.Params.enlarged }}
max-width: 200px;
{{ else }}
max-width: 100px;
{{ end }}
margin-left: -2em;
}
div.header .name {
@@ -271,7 +275,11 @@ div.main .container {
}
div.main .content {
color: #111111;
{{ if .Site.Params.enlarged }}
font-size: 17px;
{{ else }}
font-size: 16px;
{{ end }}
}
div.main .content .title-container {
display: -webkit-flex;
@@ -285,7 +293,10 @@ div.main .content .title-container {
justify-content: space-between;
}
div.main .content .posts {
{{ $nbPosts := len (where .Data.Pages "Params.best" true) }}
{{ if gt $nbPosts 0 }}
margin-bottom: 4em;
{{ end }}
}
div.main .content .page-heading {
font-size: 20px;