From d3dab3c3b147cbef4966badc877ee0ddd141de87 Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Fri, 29 Oct 2021 22:34:24 +0200 Subject: [PATCH] theme: simplify the main layout * Simplifies the header and menu layout for all screen width. * Uses only one background color (Darkest Polar). * Change the main text color to Snow Light Grey. * Change the header and footer text color to Snow Lightest Grey. * Add a color for active and focused links (Frost Lighter Green). * Simplifies the figure layout and colors. * Adds a font-family variable and set it to the body. It uses the system default font. * Tries to set all font properties in the _fonts.scss file. * Removes the links decoration on the header and footer. * Harmonizes the footer accordingly to the header. * Uses the hugo regular method to generate the footer menu. * Stops centering the content on large screens. * Adds the content max width and content left margin to the variables. * Sets the font weight to bold for hovered links. * Suppress the main HTML tag of the index template, and set the correct classes on the main HTML tag of the baseof template. * Uses a second level header for the title of the page, as the first level is used for the website title. * Improves the layout of definition lists on the home page, with a better (and simpler) rendering on small screens. * Prevents to use the post information partial on static page. This is done through a test on the layout property `static` of the front header. * Reorders the sections of the home page and adds anchors to the section headers. * Closes #8, #11. Co-Authored-by: iGor milhit --- assets/scss/_colors.scss | 30 +++++++++---------- assets/scss/_fonts.scss | 23 +++++++++----- assets/scss/_footer.scss | 19 ++++-------- assets/scss/_header.scss | 55 +++++++++++----------------------- assets/scss/_layout.scss | 11 ++----- assets/scss/_main_body.scss | 52 +++++++++++++++++--------------- assets/scss/_post.scss | 6 +--- assets/scss/_texts.scss | 14 ++++++++- assets/scss/_variables.scss | 15 ++++++++-- i18n/fr.toml | 7 +++++ layouts/_default/baseof.html | 3 +- layouts/_default/list.html | 2 +- layouts/_default/section.html | 2 +- layouts/_default/single.html | 9 +++--- layouts/_default/terms.html | 2 +- layouts/index.html | 11 ++++--- layouts/partials/footer.html | 40 ++++++++++++++----------- layouts/partials/header.html | 56 +++++++++++++++++------------------ layouts/partials/online.html | 4 +-- layouts/partials/perso.html | 3 +- layouts/partials/pro.html | 3 +- 21 files changed, 189 insertions(+), 178 deletions(-) diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index be06284..4793c63 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -5,23 +5,22 @@ //////////////////// html, -body, -.main-header > .container, -.main-footer > .container { - background-color: $the-darkiest-polar; -} - -.container { +body { background-color: $darkest-polar; - color: $snow-storm-lightest-grey; + color: $snow-storm-light-grey; } -a, -a:hover, -a:active { +a { color: $frost-green; } +a:active, +a:focus, +.main-header a:active, +.main-header a:focus { + color: $frost-lighter-green; +} + a:visited { color: $frost-grey-blue; } @@ -29,8 +28,9 @@ a:visited { .main-header, .main-header a, .main-footer, -.main-footer a { - color: $snow-storm-lighter-grey; +.main-footer a, +nav { + color: $snow-storm-lightest-grey; } code, @@ -39,6 +39,6 @@ pre { } figure { - background-color: $darkest-polar; - box-shadow: 0 2px 10px 5px $the-darkiest-polar; + // background-color: $darkest-polar; + // box-shadow: 0 2px 10px 5px $the-darkiest-polar; } diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index 45ae556..93fe1e6 100644 --- a/assets/scss/_fonts.scss +++ b/assets/scss/_fonts.scss @@ -7,12 +7,15 @@ html, body { font-size: $font-size-base; + line-height: $line-height-base; + font-family: $font-family; } code, figure p, .footnotes, .footnote-ref, +.list-footer, .main-footer, nav, .post-info, @@ -20,16 +23,20 @@ nav, font-size: $font-size-small; } -@include breakpoint(laptop) { - nav { - font-size: $font-size-base; - } -} - -.container { - line-height: $line-height-base; // TODO: fix homepage +blockquote { + font-style: italic; } .smallcaps { font-variant: small-caps; } + +.home-lists { + dt { + font-weight: bold; + } +} + +#licence { + font-variant: small-caps; +} diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index 568302b..18d54be 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -5,23 +5,16 @@ /////////////////// .main-footer { + margin-top: 1.25rem; + padding-bottom: 1.25rem; + ul { - align-items: center; display: flex; - justify-content: flex-end; - margin-bottom: 1em; + justify-content: space-evenly; + margin: 0; + padding: 0; } @include inline-list; - li { - margin-right: .5em; - } - } - -.smallcaps { - font-variant: small-caps; -} - - diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 44f5c71..8da4762 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -5,54 +5,33 @@ /////////////////// .main-header { - section { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; + margin: 1.25rem 0; + + h1 { + margin: 0; } - @include breakpoint(tablet) { - section { - flex-direction: row; - } - } - - header { + article { flex-grow: 1; } -} -.title { - align-items: center; - display: flex; -} - -.avatar { - border-radius: 50%; - margin-right: 1rem; - width: 5rem; -} - -nav { - display: flex; - justify-content: end; - - @include breakpoint(tablet) { - flex-direction: column; + .title { + display: flex; justify-content: center; } - ul { - margin: 0; - padding: 0; - } + nav { - @include inline-list; + ul { + display: flex; + justify-content: space-evenly; + margin: 0; + padding: 0; + } -} + @include inline-list; -.nav-item:not(:last-child) { - &::after { - content: ' /'; } } - diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss index f9902fb..d408ea7 100644 --- a/assets/scss/_layout.scss +++ b/assets/scss/_layout.scss @@ -4,20 +4,15 @@ // // ////////////////// -.container { - border-radius: .5rem; - margin: 0 auto; - max-width: 46rem; // 920px - padding: .5rem; - width: 95%; -} - body { display: flex; flex-direction: column; height: 100vh; + max-width: $content-max-width; + margin: 0 0 0 $content-left-margin; } main { flex-grow: 1; + margin: 0 0 2.5rem 0; } diff --git a/assets/scss/_main_body.scss b/assets/scss/_main_body.scss index 6deea4f..8094193 100644 --- a/assets/scss/_main_body.scss +++ b/assets/scss/_main_body.scss @@ -4,37 +4,41 @@ // // /////////////////// -dl { - display: inline-flex; - flex-flow: row; - flex-wrap: wrap; - overflow: visible; - width: 100%; // set the container width -} +.home-lists { -dt { - flex: 0 0 39%; - word-wrap: anywhere; -} + @include breakpoint(laptop) { + display: inline-flex; + flex-flow: row; + flex-wrap: wrap; + overflow: visible; + width: 100%; // set the container width -dt::after { - content: ' :'; -} + dt { + flex: 0 0 39%; + word-wrap: anywhere; + } + + dd { + flex: 0 0 59%; + margin-left: auto; + text-align: left; + } + } + + dd { + margin-left: .5rem; + } + + dt::after { + content: ' :'; + } -dd { - flex: 0 0 59%; - margin-left: auto; - text-align: left; } .contents { padding: 0; - - li { - list-style: none; - } } -blockquote { - font-style: italic; +.home-lists { + margin: 0; } diff --git a/assets/scss/_post.scss b/assets/scss/_post.scss index aa21c1e..ae968be 100644 --- a/assets/scss/_post.scss +++ b/assets/scss/_post.scss @@ -11,13 +11,10 @@ } .post-image { - width: 100%; - border-radius: .2rem; + width: 97%; } .post-info { - font-size: $font-size-small; - color: $snow-storm-light-grey; > ul { margin-top: 0; @@ -67,6 +64,5 @@ } .list-footer { - font-size: $font-size-small; padding-left: .5em; } diff --git a/assets/scss/_texts.scss b/assets/scss/_texts.scss index 4c5a9e7..50baf26 100644 --- a/assets/scss/_texts.scss +++ b/assets/scss/_texts.scss @@ -1,6 +1,6 @@ //////////////////// // // -// Textes // +// Texts // // // //////////////////// @@ -15,3 +15,15 @@ margin-bottom: .5rem; } } + +.main-header, +.main-footer { + a { + text-decoration: none; + } +} + +a:hover, +.main-header a:hover { + font-weight: bold; +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index a451c07..9a0a0b9 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,9 +1,19 @@ /////////////////// // // -// FONT // +// WIDTH // // // /////////////////// +$content-max-width: 46rem; // 920 px +$content-left-margin: 3vw; + +/////////////////// +// // +// FONT // +// // +/////////////////// + +$font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; $font-size-base: 1.25rem !default; // 25 px $font-size-small: .9rem; // 18 px $line-height-base: 1.4; @@ -56,7 +66,8 @@ $frost-grey-blue: $nord9; $frost-deep-blue: $nord10; //Aurora, translated into something easy to remember, hopefully -$aurora-red: $nord11; $aurora-orange: $nord12; +$aurora-red: $nord11; +$aurora-orange: $nord12; $aurora-yellow: $nord13; $aurora-green: $nord14; $aurora-purple: $nord15; diff --git a/i18n/fr.toml b/i18n/fr.toml index d74343b..fcc7210 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -3,3 +3,10 @@ other = "Informations sur le billet" [permalink] other = "Permalien" + +[contactsPriv] +other = "Contacts personnels" + + +[contactsPro] +other = "Contacts professionnels" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 0e889c9..a04c2ca 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,7 +3,8 @@ {{ partial "head.html" . }} {{- partial "header.html" . -}} -
+
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 769aa9f..f27475e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,7 +1,7 @@ {{ define "main" }}
-

{{.Title}}

+

{{.Title}}

{{.Content}} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 64903f0..7b99c18 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -1,6 +1,6 @@ {{ define "main" }}
-

{{.Title}}

+

{{.Title}}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 6e85bac..b852cd2 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -6,12 +6,13 @@ alt="{{ .Params.postimagedescription }}"> {{ end }}

{{ .Title }}

+ {{- if ne .Layout "static" }} {{- partial "post-info.html" . -}} + {{ end }}
- {{ .Content }} + {{ else }} class="content" {{ end -}}> + {{ .Content -}}
-{{ end }} +{{ end -}} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index ae6f5d9..b817b74 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -1,6 +1,6 @@ {{ define "main" }}
-

{{.Title}}

+

{{.Title}}

{{.Content}} diff --git a/layouts/index.html b/layouts/index.html index d95f905..a7e0add 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,15 +1,14 @@ {{ define "main" }} -
+ + {{.Content}} + {{ if not .Site.Params.online.hide }} + {{ partial "online" . }} + {{ end }} {{if not .Site.Params.contactsPriv.hide }} {{ partial "perso" .}} {{ end }} {{if not .Site.Params.contactsPro.hide }} {{ partial "pro" . }} {{ end }} - - {{.Content}} - {{ if not .Site.Params.online.hide }} - {{ partial "online" . }} - {{ end }}
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0f3bd24..af95fb6 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,20 +1,24 @@ diff --git a/layouts/partials/header.html b/layouts/partials/header.html index cd84fac..458b4f0 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,34 +1,34 @@
-
-
- - -

{{ .Site.Title }}

 -
-
+ + +
diff --git a/layouts/partials/online.html b/layouts/partials/online.html index 0bc6491..a28ce0e 100644 --- a/layouts/partials/online.html +++ b/layouts/partials/online.html @@ -1,5 +1,5 @@ -

Online

-
+

Online

+
{{ with .Site.Params.online.github }}
GitHub
{{ . }}
diff --git a/layouts/partials/perso.html b/layouts/partials/perso.html index 6cdebcb..0f65eeb 100644 --- a/layouts/partials/perso.html +++ b/layouts/partials/perso.html @@ -1,4 +1,5 @@ -
+

{{ i18n "contactsPriv" }}

+
{{ with .Site.Params.contactsPriv.email }}
e-mail
{{ . }}
diff --git a/layouts/partials/pro.html b/layouts/partials/pro.html index 7c7b03e..937bed9 100644 --- a/layouts/partials/pro.html +++ b/layouts/partials/pro.html @@ -1,4 +1,5 @@ -
+

{{ i18n "contactsPro" }}

+
{{ with .Site.Params.contactsPro.email }}
e-mail
{{ . }}