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

@@ -46,9 +46,9 @@
</div> </div>
<div class="markdown"> <div class="markdown">
{{ partial "content" . }} {{ partial "content" . }}
<br>
</div> </div>
{{ if .Site.Params.share }} {{ if .Site.Params.share }}
<br>
<div class="share"> <div class="share">
{{ if .Site.Params.share_on_fb | default true }} {{ if .Site.Params.share_on_fb | default true }}
<a href="" class="ssk ssk-facebook"></a> <a href="" class="ssk ssk-facebook"></a>
@@ -65,6 +65,7 @@
</div> </div>
{{ end }} {{ end }}
{{ if .Site.Params.posts_navigation }} {{ if .Site.Params.posts_navigation }}
<br>
<div class="navigation"> <div class="navigation">
{{ if .PrevInSection }} {{ if .PrevInSection }}
<div> <div>
@@ -81,14 +82,15 @@
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
<br>
{{ if .Site.Params.disqusShortname }} {{ if .Site.Params.disqusShortname }}
<br>
<div class="disqus"> <div class="disqus">
{{ template "_internal/disqus.html" . }} {{ template "_internal/disqus.html" . }}
</div> </div>
{{ end }} {{ end }}
{{ if .Site.Params.issoHost }} {{ if .Site.Params.issoHost }}
<br>
<div class="isso" id="isso-thread"></div> <div class="isso" id="isso-thread"></div>
<script <script
data-isso="//{{ .Site.Params.issoHost }}/" data-isso="//{{ .Site.Params.issoHost }}/"
@@ -99,6 +101,7 @@
{{ end }} {{ end }}
{{ if .Site.Params.commentoHost }} {{ if .Site.Params.commentoHost }}
<br>
<div id="commento"></div> <div id="commento"></div>
<script src="//{{ .Site.Params.commentoHost }}/js/commento.js"></script> <script src="//{{ .Site.Params.commentoHost }}/js/commento.js"></script>
{{ end }} {{ end }}

View File

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

View File

@@ -11,11 +11,19 @@ section {
padding: 0 16px; padding: 0 16px;
margin-left: 100px; margin-left: 100px;
margin-right: 100px; margin-right: 100px;
{{ if .Site.Params.enlarged }}
max-width: 825px;
{{ else }}
max-width: 750px; max-width: 750px;
{{ end }}
} }
div.column { div.column {
padding: 0 16px; padding: 0 16px;
{{ if .Site.Params.enlarged }}
max-width: 825px;
{{ else }}
max-width: 750px; max-width: 750px;
{{ end }}
} }
div.header { div.header {
background-color: transparent; background-color: transparent;
@@ -30,8 +38,8 @@ div.header .container .logo {
margin: 0; margin: 0;
} }
div.header-home .container .logo { div.header-home .container .logo {
max-width: 180px; max-width: 216px;
margin-left: 20px; margin-left: 24px;
} }
div.header-home .name-home { div.header-home .name-home {
padding-top: 30px; padding-top: 30px;
@@ -116,7 +124,7 @@ padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
} }
div.footer { div.footer {
padding-top: 30px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
} }
div.main { div.main {
@@ -130,10 +138,6 @@ padding-left: 1.5em;
div.main .container .content .post-item .meta { div.main .container .content .post-item .meta {
display: block; display: block;
} }
div.main.post {
padding-top: 60px;
padding-bottom: 60px;
}
div.main .content .markdown blockquote { div.main .content .markdown blockquote {
padding-right: 5rem; padding-right: 5rem;
padding-left: 1.25rem; padding-left: 1.25rem;