From c44eb759f0270e1c6938b8b50ec5ad10e1fa783f Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Wed, 15 Jan 2020 17:42:04 +0100 Subject: [PATCH] section: improve sections, lists and navigation * Splits styles into partials. * Adds a category entry to the navigation menu. * Adds a flex to the header to get the menu on the right. * Adds a flex to the sections and lists to diplay information evenly. Co-Authored-by: Igor Milhit --- assets/scss/_fonts.scss | 20 ++++ assets/scss/_footer.scss | 26 ++++++ assets/scss/_header.scss | 34 +++++++ assets/scss/_layout.scss | 22 +++++ assets/scss/_lists.scss | 12 +++ assets/scss/_main_body.scss | 37 ++++++++ assets/scss/_post.scss | 29 ++++++ assets/scss/_variables.scss | 2 + assets/scss/main.scss | 168 ++-------------------------------- layouts/_default/list.html | 10 +- layouts/_default/section.html | 29 ++++-- layouts/partials/header.html | 3 +- 12 files changed, 219 insertions(+), 173 deletions(-) create mode 100644 assets/scss/_fonts.scss create mode 100644 assets/scss/_footer.scss create mode 100644 assets/scss/_header.scss create mode 100644 assets/scss/_layout.scss create mode 100644 assets/scss/_lists.scss create mode 100644 assets/scss/_main_body.scss create mode 100644 assets/scss/_post.scss create mode 100644 assets/scss/_variables.scss diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss new file mode 100644 index 0000000..2dff004 --- /dev/null +++ b/assets/scss/_fonts.scss @@ -0,0 +1,20 @@ +/* + * ************** * + * FONTS * + * ************** * +*/ + +html, body { + font-size: $font-size-base; +} + +code, +.footnotes, +.footnote-ref, +figure p, +.main-footer, +.posts-list footer { + font-size: $font-size-small; +} + + diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss new file mode 100644 index 0000000..08e6228 --- /dev/null +++ b/assets/scss/_footer.scss @@ -0,0 +1,26 @@ +/* + * ************** * + * FOOTER * + * ************** * +*/ + +.main-footer { + ul { + display: flex; + align-items: center; + justify-content: flex-end; + border-top: solid .1em #e1e1e1; + padding-top: 1em; + margin-bottom: 1em; + } + li { + list-style: none; + margin-right: .5em; + } +} + +.smallcaps { + font-variant: small-caps; +} + + diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss new file mode 100644 index 0000000..42a5ed4 --- /dev/null +++ b/assets/scss/_header.scss @@ -0,0 +1,34 @@ +/* + * ************** * + * HEADER * + * ************** * +*/ + +.main-header { + section { + display: flex; + flex-direction: column; + // align-items: center; + border-bottom: solid .1em #e1e1e1; + padding-bottom: 1em; + } + header { + flex-grow: 1; + } +} + +.title { + display: flex; + align-items: center; +} + +.avatar { + border-radius: 50%; + width: 5rem; + margin-right: 1rem; +} + +nav { + margin-right: .5em; + align-self: end; +} diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss new file mode 100644 index 0000000..0ae63f6 --- /dev/null +++ b/assets/scss/_layout.scss @@ -0,0 +1,22 @@ +/* + * ************** * + * LAYOUT * + * ************** * +*/ + +.container { + max-width: 35rem; /* 960px */ + margin: 0 auto; +} + +body { + display: flex; + flex-direction: column; + height: 100vh; +} + +main { + flex-grow: 1; +} + + diff --git a/assets/scss/_lists.scss b/assets/scss/_lists.scss new file mode 100644 index 0000000..9f866a7 --- /dev/null +++ b/assets/scss/_lists.scss @@ -0,0 +1,12 @@ +/* + * ************** * + * LISTS * + * ************** * +*/ + +.posts-list { + display: flex; + flex-direction: column; + margin-bottom: .5em; +} + diff --git a/assets/scss/_main_body.scss b/assets/scss/_main_body.scss new file mode 100644 index 0000000..30658ad --- /dev/null +++ b/assets/scss/_main_body.scss @@ -0,0 +1,37 @@ +/* + * ************** * + * MAIN * + * ************** * +*/ + +dl { + display: inline-flex; + flex-flow: row; + flex-wrap: wrap; + width: 100%; /* set the container width*/ + overflow: visible; +} + +dt { + flex: 0 0 39%; + word-wrap: anywhere; +} + +dt::after { + content: " :"; +} + +dd { + flex:0 0 59%; + margin-left: auto; + text-align: left; +} + +.contents { + padding: 0; + li { + list-style: none; + } +} + + diff --git a/assets/scss/_post.scss b/assets/scss/_post.scss new file mode 100644 index 0000000..f2c1cf6 --- /dev/null +++ b/assets/scss/_post.scss @@ -0,0 +1,29 @@ +/* + * ************** * + * POST * + * ************** * +*/ + +.post-header { + margin: 1em 0 1em 0; + h1 { + margin: 0; + } +} + +.post-info { + font-size: 1rem; + display: flex; + flex-wrap: wrap; + padding: 0; + margin-top: 0; + li { + list-style: none; + display: flex; + padding-right: .5em; + > ul { + display: flex; + padding: 0; + } + } +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..987419a --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,2 @@ +$font-size-base: 1.25rem; +$font-size-small: 1rem; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 361473b..30bc88e 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,167 +1,17 @@ /* * ************** * - * FONTS * + * Includes * * ************** * */ -html, body { - font-size: 1.25rem; -} - -code, .footnotes, .footnote-ref, figure p { - font-size: 1rem; -} - -/* - * ************** * - * LAYOUT * - * ************** * -*/ - -.container { - max-width: 35rem; /* 960px */ - margin: 0 auto; -} - -body { - display: flex; - flex-direction: column; - height: 100vh; -} - -main { - flex-grow: 1; -} - -/* - * ************** * - * HEADER * - * ************** * -*/ - -.main-header { - margin-bottom: 2em; -} - -.main-header section { - display: flex; - align-items: center; - border-bottom: solid .1em #e1e1e1; - padding-bottom: 1em; -} - -.main-header header { - flex-grow: 1; -} - -.title { - display: flex; - align-items: center; -} - -.avatar { - border-radius: 50%; - width: 5rem; - margin-right: 1rem; -} - -nav { - margin-right: .5em; -} - -/* - * ************** * - * FOOTER * - * ************** * -*/ - -.main-footer ul { - display: flex; - align-items: center; - justify-content: flex-end; - border-top: solid .1em #e1e1e1; - padding-top: 1em; - margin-bottom: 1em; -} - -.main-footer li { - list-style: none; - margin-right: .5em; -} - -.smallcaps { - font-variant: small-caps; -} - -/* - * ************** * - * MAIN * - * ************** * -*/ - -dl { - display: inline-flex; - flex-flow: row; - flex-wrap: wrap; - width: 100%; /* set the container width*/ - overflow: visible; -} - -dt { - flex: 0 0 39%; - word-wrap: anywhere; -} - -dt::after { - content: " :"; -} - -dd { - flex:0 0 59%; - margin-left: auto; - text-align: left; -} - -.contents { - padding: 0; -} - -.contents li { - list-style: none; -} - -/* - * ************** * - * POST * - * ************** * -*/ - -.post-header { - margin: 1em 0 1em 0; -} - -.post-header h1 { - margin: 0; -} - -.post-info { - font-size: 1rem; - display: flex; - flex-wrap: wrap; - padding: 0; - margin-top: 0; -} - -.post-info li { - list-style: none; - display: flex; - padding-right: .5em; -} - -.post-info li > ul { - display: flex; - padding: 0; -} +@import '_variables.scss'; +@import '_fonts.scss'; +@import '_footer.scss'; +@import '_header.scss'; +@import '_layout.scss'; +@import '_lists.scss'; +@import '_main_body.scss'; +@import '_post.scss'; /* * ************** * diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 961c6a5..cf61417 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -4,14 +4,18 @@ {{.Content}} -
+
{{ range .Pages }} - diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 8e2b7c8..5e40327 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -3,20 +3,29 @@

{{.Title}}

+
+
{{.Content }} +
+
{{ range .Pages }} -
- - {{.Title}} - - — {{ .PublishDate.Format "2006-01-02" }} - {{ with .Params.categories }} - {{ range . }} - — {{ . }} +
+ +
+ {{ .PublishDate.Format "2006-01-02" }} + {{ with .Params.categories }} + {{ range . }} + / {{ . }} + {{ end }} {{ end }} - {{ end }} +
{{ end }} - +
+
{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index b2a603d..e522e39 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -6,7 +6,8 @@

{{ .Site.Title }}