From 817756034b5c3338ea47a2108780ba0b7f47e383 Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Sun, 25 Aug 2019 17:54:11 +0200 Subject: [PATCH] layout: improve post info in single or list pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adds a lists-footer partial. * Uses breakpoints to adapt how the post informations is aligned and separated when the screen gets bigger. * Adds some space between posts in a list or section, to improve readability. * Removes useless article level and renames a section into article in the list template. * Uses breakpoints to adapt the navigation font-size when the screen gets bigger. * Improves the font-size variables, in order to get a font-size-small smaller. * Restores the section template that wasn't right, I don't know what I've done when rebasing and resolving conflicts… Co-Authored-by: Igor Milhit --- assets/scss/_fonts.scss | 6 +++++ assets/scss/_lists.scss | 4 +++ assets/scss/_post.scss | 25 +++++++++++++++--- assets/scss/_variables.scss | 5 ++-- layouts/_default/list.html | 32 ++++++++++------------- layouts/_default/section.html | 42 ++++++++++++------------------ layouts/partials/lists-footer.html | 9 +++++++ layouts/partials/post-info.html | 7 +++-- 8 files changed, 76 insertions(+), 54 deletions(-) create mode 100644 layouts/partials/lists-footer.html diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index 91bba39..b8f4914 100644 --- a/assets/scss/_fonts.scss +++ b/assets/scss/_fonts.scss @@ -20,6 +20,12 @@ nav, font-size: $font-size-small; } +@include breakpoint(laptop) { + nav { + font-size: $font-size-base; + } +} + .content { line-height: 1.4; // TODO: fix homepage } diff --git a/assets/scss/_lists.scss b/assets/scss/_lists.scss index 10282e9..8f74bed 100644 --- a/assets/scss/_lists.scss +++ b/assets/scss/_lists.scss @@ -8,5 +8,9 @@ display: flex; flex-direction: column; margin-bottom: .5em; + + > article { + padding-bottom: .5rem; + } } diff --git a/assets/scss/_post.scss b/assets/scss/_post.scss index 8397653..2165062 100644 --- a/assets/scss/_post.scss +++ b/assets/scss/_post.scss @@ -13,14 +13,12 @@ } .post-info { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + font-size: $font-size-small; margin-top: 0; padding: 0; > li { - padding-right: .5rem; + padding-right: .3rem; } li { @@ -41,8 +39,27 @@ } } +@include breakpoint(tablet) { + .post-info { + display: flex; + flex-wrap: wrap; + + > li:not(:last-child) { + &::after { + content: ' /'; + white-space: pre; + } + } + } +} + .post-taxonomies:not(:last-child) { &::after { content: ', '; } } + +.list-footer { + font-size: $font-size-small; + padding-left: .5em; +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index d7578ff..70a3534 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -4,8 +4,9 @@ // // /////////////////// -$font-size-base: 1.25rem; // 20 px -$font-size-small: 1rem; // 16 px +$font-size-base: 1.25rem !default; // 25 px +$font-size-small: .9rem; // 18 px + ///////////////////// // // diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 3927db5..b04a93f 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,22 +1,18 @@ {{ define "main" }} -
-

{{.Title}}

-
- - {{.Content}} -
- - {{ range .Pages.ByPublishDate.Reverse }} -
+
+
+

{{.Title}}

+
+ + {{.Content}} +
+ + {{ range .Pages }} -
- {{ if isset .Params "publishdate" }} - {{.PublishDate.Format "2006-01-02"}} - {{ end }} -
-
- {{ end }} -
+ {{ end }} +
+ {{ end }} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 7893dba..64903f0 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -1,31 +1,21 @@ {{ define "main" }} -
-

{{.Title}}

-
- -
-
- {{.Content }} +
+

{{.Title}}

-
- {{ range .Pages.ByPublishDate.Reverse }} + +
+
+ {{.Content }} +
- -
- {{ .PublishDate.Format "2006-01-02" }} - {{ with .Params.categories }} - {{ range . }} - / {{ . }} - {{ end }} - {{ end }} -
+ {{ range .Pages.ByPublishDate.Reverse }} + + {{ end }}
- {{ end }} -
-
+ {{ end }} - diff --git a/layouts/partials/lists-footer.html b/layouts/partials/lists-footer.html new file mode 100644 index 0000000..429c157 --- /dev/null +++ b/layouts/partials/lists-footer.html @@ -0,0 +1,9 @@ +
+{{ .Date.Format "2006-01-02" }} +{{ with .Params.categories }} + {{ range sort . }} + / {{ . }} + {{ end }} +{{ end }} +
+ diff --git a/layouts/partials/post-info.html b/layouts/partials/post-info.html index c78ca9d..a52a8b5 100644 --- a/layouts/partials/post-info.html +++ b/layouts/partials/post-info.html @@ -1,13 +1,13 @@ -