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 <igor@milhit.ch>merge-requests/5/merge
parent
c0f6de2ab1
commit
d3dab3c3b1
GPG Key ID:
692D97C3D0228A99
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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: ' /';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -3,3 +3,10 @@ other = "Informations sur le billet"
|
|||
|
||||
[permalink]
|
||||
other = "Permalien"
|
||||
|
||||
[contactsPriv]
|
||||
other = "Contacts personnels"
|
||||
|
||||
|
||||
[contactsPro]
|
||||
other = "Contacts professionnels"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
<main class="container">
|
||||
<main aria-role="main" class="container"
|
||||
itemscope itemtype="https://schema.org/Person">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<main class="container">
|
||||
<header>
|
||||
<h1>{{.Title}}</h1>
|
||||
<h2>{{.Title}}</h2>
|
||||
</header>
|
||||
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
|
||||
{{.Content}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{ define "main" }}
|
||||
<header>
|
||||
<h1>{{.Title}}</h1>
|
||||
<h2>{{.Title}}</h2>
|
||||
</header>
|
||||
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
|
||||
<article>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@
|
|||
alt="{{ .Params.postimagedescription }}">
|
||||
{{ end }}
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{- if ne .Layout "static" }}
|
||||
{{- partial "post-info.html" . -}}
|
||||
{{ end }}
|
||||
</header>
|
||||
<article {{ if eq .Layout "verse" }} class="content, {{ .Layout }}"
|
||||
{{ else }} class="content"
|
||||
{{ end }}>
|
||||
{{ .Content }}
|
||||
{{ else }} class="content" {{ end -}}>
|
||||
{{ .Content -}}
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end -}}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{ define "main" }}
|
||||
<header>
|
||||
<h1>{{.Title}}</h1>
|
||||
<h2>{{.Title}}</h2>
|
||||
</header>
|
||||
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
|
||||
{{.Content}}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
{{ define "main" }}
|
||||
<main aria-role="main" class="container" itemscope itemtype="https://schema.org/Person">
|
||||
<!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
|
||||
{{.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 }}
|
||||
<!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
|
||||
{{.Content}}
|
||||
{{ if not .Site.Params.online.hide }}
|
||||
{{ partial "online" . }}
|
||||
{{ end }}
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,24 @@
|
|||
<footer class="main-footer">
|
||||
<ul class="container">
|
||||
<li><a href="https://framagit.org/iGormilhit/igor.milhit">Sources</a></li>
|
||||
{{ with .GitInfo }}
|
||||
{{ $git := . }}
|
||||
<li>
|
||||
<code>
|
||||
<a href="https://framagit.org/iGormilhit/igor.milhit/-/commit/{{- $git.Hash -}}"
|
||||
title="Dernier commit modifiant cette page">
|
||||
{{ $git.AbbreviatedHash }}
|
||||
</a>
|
||||
</code>
|
||||
</li>
|
||||
{{ end }}
|
||||
<li><a href="http://creativecommons.org/licenses/by/4.0/">
|
||||
<span class="smallcaps">cc-by</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<nav role="navigation" aria-label="Secondary">
|
||||
<ul>
|
||||
{{ $currentPage := . -}}
|
||||
{{ range sort .Site.Menus.footer -}}
|
||||
<li class="nav-item">
|
||||
<a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "footer" .) ($currentPage.HasMenuCurrent "footer" .) }} active{{end}}"
|
||||
id="{{ .Identifier }}"
|
||||
href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end -}}
|
||||
{{ with .GitInfo }}
|
||||
{{ $git := . }}
|
||||
<li>
|
||||
<code>
|
||||
<a href="https://framagit.org/iGormilhit/igor.milhit/-/commit/{{- $git.Hash -}}"
|
||||
title="Dernier commit modifiant cette page">
|
||||
{{ $git.AbbreviatedHash }}
|
||||
</a>
|
||||
</code>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
<header class="main-header">
|
||||
<section class="container">
|
||||
<header>
|
||||
<a href="{{ .Site.BaseURL }}" class="title">
|
||||
<img class="avatar" src="{{ .Site.BaseURL }}images/avatar.png">
|
||||
<h1>{{ .Site.Title }}</h1></a>
|
||||
</header>
|
||||
<nav>
|
||||
<ul>
|
||||
{{ $currentPage := . -}}
|
||||
{{ range .Site.Menus.main -}}
|
||||
<li class="nav-item">
|
||||
<a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end -}}
|
||||
<li class="nav-item">
|
||||
<a href="{{ .Site.BaseURL }}" class="title">
|
||||
<h1>{{ .Site.Title }}</h1>
|
||||
</a>
|
||||
<nav role="navigation" aria-label="Primary">
|
||||
<ul>
|
||||
{{ $currentPage := . -}}
|
||||
{{ range sort .Site.Menus.main -}}
|
||||
<li class="nav-item">
|
||||
<a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}"
|
||||
href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end -}}
|
||||
<li class="nav-item">
|
||||
{{ if .IsPage -}}
|
||||
<a class="nav-item-link" href="{{ .Site.BaseURL }}index.xml"
|
||||
title="S'abonner aux publications du site">S'abonner
|
||||
</a>
|
||||
<a class="nav-item-link"
|
||||
href="{{ .Site.BaseURL }}index.xml"
|
||||
title="S'abonner aux publications du site">S'abonner
|
||||
</a>
|
||||
{{ else if .IsHome -}}
|
||||
<a class="nav-item-link" href="{{ .Site.BaseURL }}index.xml"
|
||||
title="S'abonner aux publications du site">S'abonner
|
||||
</a>
|
||||
<a class="nav-item-link"
|
||||
href="{{ .Site.BaseURL }}index.xml"
|
||||
title="S'abonner aux publications du site">S'abonner
|
||||
</a>
|
||||
{{ else if .IsNode -}}
|
||||
<a class="nav-item-link" href="{{ .Permalink }}index.xml"
|
||||
title="S'abonner aux publications de cette section">S'abonner
|
||||
</a>
|
||||
<a class="nav-item-link"
|
||||
href="{{ .Permalink }}index.xml"
|
||||
title="S'abonner aux publications de cette section">S'abonner
|
||||
</a>
|
||||
{{ end -}}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<h2>Online</h2>
|
||||
<dl>
|
||||
<h2 id="online">Online</h2>
|
||||
<dl class="home-lists">
|
||||
{{ with .Site.Params.online.github }}
|
||||
<dt>GitHub</dt>
|
||||
<dd><a href="https://github.com/{{ . }}">{{ . }}</a></dd>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<dl>
|
||||
<h2 id="contactsPriv">{{ i18n "contactsPriv" }}</h2>
|
||||
<dl class="home-lists">
|
||||
{{ with .Site.Params.contactsPriv.email }}
|
||||
<dt>e-mail</dt>
|
||||
<dd><a href="mailto:{{ . }}" itemprop="email">{{ . }}</a></dd>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<dl>
|
||||
<h2 id="contactsPro">{{ i18n "contactsPro" }}</h2>
|
||||
<dl class="home-lists">
|
||||
{{ with .Site.Params.contactsPro.email }}
|
||||
<dt>e-mail</dt>
|
||||
<dd><a href="mailto:{{ . }}" itemprop="email">{{ . }}</a></dt>
|
||||
|
|
|
|||
Loading…
Reference in New Issue