Waaaay nicer on mobiles
And on desktop too : simpler layout for posts with case - all the content is centered anyway.master
parent
528f2acd4e
commit
9b65b8134d
GPG Key ID:
0547178FEEDE7D6B
|
|
@ -21,6 +21,10 @@ markup:
|
|||
renderer:
|
||||
# Render newlines as <br>
|
||||
hardWraps: true
|
||||
tableOfContents:
|
||||
endLevel: 3
|
||||
ordered: false
|
||||
startLevel: 2
|
||||
|
||||
# Disable all privacy unfriendly stuff
|
||||
privacy:
|
||||
|
|
|
|||
|
|
@ -5,87 +5,84 @@
|
|||
with all other blog posts belonging to that case, emphasis to the current.
|
||||
Still use empty container if nothing to show for homogeneous layout
|
||||
-->
|
||||
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
|
||||
{{ with .CurrentSection }}
|
||||
{{ if .Params.Title }}
|
||||
<div class="container">
|
||||
<div class="columns mt-5 is-variable">
|
||||
<aside class="menu column is-3 mt-2 is-align-self-flex-start">
|
||||
<p class="menu-label">
|
||||
Dans le dossier « <a href="{{ .Permalink }}">{{ .Params.Title }} »</a>...
|
||||
</p>
|
||||
<div class="menu-list">
|
||||
{{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
|
||||
{{ $postsSorted := (sort $posts "Date" )}}
|
||||
{{ range $postsSorted }}
|
||||
<a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
<div class="columns">
|
||||
<aside class="menu column mt-2 pr-6 is-one-quarter">
|
||||
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
|
||||
{{ with .CurrentSection }}
|
||||
{{ if .Params.Title }}
|
||||
<p class="menu-label">
|
||||
<a href="{{ .Permalink }}">{{ .Params.Title }}</a>
|
||||
</p>
|
||||
<div class="menu-list">
|
||||
{{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
|
||||
{{ $postsSorted := (sort $posts "Date" )}}
|
||||
{{ range $postsSorted }}
|
||||
<a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</aside>
|
||||
<section class="column content is-half">
|
||||
<div>
|
||||
<article>
|
||||
<!-- First thing is a legend for the hero image, if it exists -->
|
||||
{{ with .Params.imgExplanation }}
|
||||
<article class="message mb-5">
|
||||
<div class="message-body content is-italic">
|
||||
{{ . }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
<!-- Second, a summary, if it exists -->
|
||||
{{ with .Params.summary }}
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Third, an introductive message before ToC, if it exists -->
|
||||
{{ with .Params.intro }}
|
||||
<div class="message is-dark">
|
||||
<div class="message-body">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Then, ToC if text has more than 600 words and not explicitly asked not to -->
|
||||
{{ if (and (not .Params.notoc) (gt .WordCount 600)) }}
|
||||
<div class="message is-link">
|
||||
<div class="message-header">Sommaire</div>
|
||||
<!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
|
||||
<div class="message-body has-text-left pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Finally, content! -->
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</div>
|
||||
<hr />
|
||||
<aside class="container level my-5">
|
||||
<div class="level-left">
|
||||
{{ with .PrevInSection }}
|
||||
<div class="level-item">
|
||||
<a class="button is-link is-light is-medium has-text-weight-bold" href="{{ .Permalink }}">« {{
|
||||
.Title }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="level-right">
|
||||
{{ with .NextInSection }}
|
||||
<div class="level-item">
|
||||
<a class="button is-link is-light is-medium has-text-weight-bold" href="{{ .Permalink }}">{{
|
||||
.Title }} »</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</aside>
|
||||
{{ else }}
|
||||
<div class="container content is-max-desktop">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<div class="container content is-max-desktop">
|
||||
{{ end }}
|
||||
<section class="column content mx-6">
|
||||
<div>
|
||||
<article>
|
||||
<!-- First thing is a legend for the hero image, if it exists -->
|
||||
{{ with .Params.imgExplanation }}
|
||||
<article class="message mb-5">
|
||||
<div class="message-body content is-italic">
|
||||
{{ . }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
<!-- Second, a summary, if it exists -->
|
||||
{{ with .Params.summary }}
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Third, an introductive message before ToC, if it exists -->
|
||||
{{ with .Params.intro }}
|
||||
<div class="message is-dark">
|
||||
<div class="message-body">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Then, ToC if text has more than 600 words and not explicitly asked not to -->
|
||||
{{ if (and (not .Params.notoc) (gt .WordCount 600)) }}
|
||||
<div class="message is-link">
|
||||
<div class="message-header">Sommaire</div>
|
||||
<!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
|
||||
<div class="message-body pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Finally, content! -->
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</div>
|
||||
<hr/>
|
||||
<aside class="container level my-5 is-mobile">
|
||||
<div class="level-left">
|
||||
{{ with .PrevInSection }}
|
||||
<div class="level-item">
|
||||
<a class="button is-link is-light is-medium is-responsive has-text-weight-bold" href="{{ .Permalink }}">« {{ .Title }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="level-right">
|
||||
{{ with .NextInSection }}
|
||||
<div class="level-item">
|
||||
<a class="button is-link is-light is-medium is-responsive has-text-weight-bold" href="{{ .Permalink }}">{{ .Title }} »</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -7,19 +7,22 @@
|
|||
<link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
|
||||
<!-- RSS feed -->
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
|
||||
{{ printf `
|
||||
<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
|
||||
{{ end -}}
|
||||
|
||||
<!-- Default to home image -->
|
||||
{{ $image := resources.Get "img/home.jpg" }}
|
||||
<!-- If header image exists in current context, use it instead -->
|
||||
{{ with .Resources.GetMatch "top.jpg" }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ $image = $image.Resize "3000x" }}
|
||||
<!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
|
||||
<style>
|
||||
/* Default to home image */
|
||||
{{ $image := resources.Get "img/home.jpg" }}
|
||||
/* If header image exists in current context, use it instead */
|
||||
{{ with .Resources.GetMatch "top.jpg" }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ $image = $image.Resize "3000x" }}
|
||||
.has-bg-img { background: url('{{ $image.Permalink }}')center center; background-size:cover; }
|
||||
.has-bg-img {
|
||||
background: url('{{ $image.Permalink }}')center center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
<!-- Favico -->
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
|
||||
|
|
@ -33,4 +36,4 @@
|
|||
<meta name="msapplication-TileImage" content="favicon-144.png">
|
||||
<meta name="msapplication-TileColor" content="#FFFFFF">
|
||||
<title>{{ .Site.Title }}</title>
|
||||
</head>
|
||||
</head>
|
||||
|
|
@ -3,59 +3,65 @@
|
|||
<!-- Display background only for regular pages, or home -->
|
||||
{{ $background := in "page home" .Kind }}
|
||||
<header>
|
||||
<section class='hero has-text-centered {{ if $background }}is-large has-bg-img is-info {{ end }}'>
|
||||
<div class="hero-head mx-5">
|
||||
<div class="level subtitle is-5">
|
||||
<div class="level-left">
|
||||
{{ with .Params.imgLicence }}
|
||||
<div class="level-item">
|
||||
Image d'illustration {{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{ with .Params.categories }}
|
||||
<div class="tags colums is-vcentered mb-2 mt-5">
|
||||
{{ range . }}
|
||||
<span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
|
||||
{{ end }}
|
||||
<section class='hero has-text-centered {{ if $background }}is-large is-info has-bg-img{{ end }}'>
|
||||
<div class="blur">
|
||||
<div class="hero-head mx-5">
|
||||
<div class="level subtitle is-5">
|
||||
<div class="level-left">
|
||||
{{ with .Params.imgLicence }}
|
||||
<div class="level-item">
|
||||
Image d'illustration {{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="hero-body {{ if not $background }}pb-0{{ end }} content has-text-centered">
|
||||
<p class="title is-1 is-uppercase">{{ .Title }}</p>
|
||||
{{ with .Params.subtitle }}
|
||||
<p class="subtitle is-2">{{ . }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- Words and date stuff makes sens only for blog posts, not other pages -->
|
||||
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
|
||||
<div class="hero-foot mb-5 mx-5 content">
|
||||
<div class="level subtitle is-5">
|
||||
<div class="level-left">
|
||||
<div class="level-item has-text-left">
|
||||
<time class="" datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
|
||||
<p class="mb-2">📅 Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
|
||||
<p>✏️ Dernière modification le <strong>{{ .Lastmod.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</strong></p>
|
||||
</time>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{ with .Params.categories }}
|
||||
<div class="tags colums is-vcentered mb-2 mt-5">
|
||||
{{ range . }}
|
||||
<span class="tag is-info is-light is-large mr-4"><a href="{{ " categories" | absURL }}/{{ . | urlize
|
||||
}}">{{ . }}</a></span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item has-text-right">
|
||||
<div>
|
||||
<p class="mb-2">🕑 Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture</p>
|
||||
<p>#️ <strong>{{ .FuzzyWordCount }} mots</strong></p>
|
||||
|
||||
</div>
|
||||
<div class="hero-body {{ if not $background }}pb-0{{ end }} content container has-text-centered">
|
||||
<p class="title is-1 is-uppercase">{{ .Title }}</p>
|
||||
{{ with .Params.subtitle }}
|
||||
<p class="subtitle is-2">{{ . }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- Words and date stuff makes sens only for blog posts, not other pages -->
|
||||
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
|
||||
<div class="hero-foot mb-5 mx-5 content">
|
||||
<div class="level subtitle is-5">
|
||||
<div class="level-left">
|
||||
<div class="level-item has-text-left">
|
||||
<time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
|
||||
<p class="mb-2">📅 Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr
|
||||
(printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
|
||||
<p>✏️ Dernière modification le <strong>{{ .Lastmod.Day }} {{ index $.Site.Data.months_fr
|
||||
(printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</strong></p>
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right is-hidden-touch">
|
||||
<div class="level-item has-text-right">
|
||||
<div>
|
||||
<p class="mb-2">🕑 Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
|
||||
</p>
|
||||
<p>#️ <strong>{{ .FuzzyWordCount }} mots</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
|
@ -1,24 +1,73 @@
|
|||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src:
|
||||
url('../font/Nunito-Regular.woff2') format('woff2'),
|
||||
url('../font/Nunito-Regular.woff') format('woff'),
|
||||
url('../font/Nunito-Regular.ttf') format('truetype');
|
||||
src:
|
||||
url('../font/Nunito-Regular.woff2') format('woff2'),
|
||||
url('../font/Nunito-Regular.woff') format('woff'),
|
||||
url('../font/Nunito-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.has-equal-height {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Make the parent background blur under this element */
|
||||
.blur {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.content {
|
||||
/* Useful to force cards to have the same height */
|
||||
.has-equal-height {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Justify all content but not titles */
|
||||
p:not(.title,.subtitle) {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* New font is "smaller" in feeling */
|
||||
.navbar-dropdown {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Add counter to title */
|
||||
body {
|
||||
counter-reset: h2
|
||||
}
|
||||
|
||||
h2 {
|
||||
counter-reset: h3
|
||||
}
|
||||
|
||||
h3 {
|
||||
counter-reset: h4
|
||||
}
|
||||
|
||||
h4 {
|
||||
counter-reset: h5
|
||||
}
|
||||
|
||||
article h2:before {
|
||||
counter-increment: h2;
|
||||
content: counter(h2) ". "
|
||||
}
|
||||
|
||||
article h3:before {
|
||||
counter-increment: h3;
|
||||
content: counter(h2) "." counter(h3) ". "
|
||||
}
|
||||
|
||||
article h4:before {
|
||||
counter-increment: h4;
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) ". "
|
||||
}
|
||||
|
||||
article .toc__menu ul {
|
||||
counter-reset: item
|
||||
}
|
||||
|
||||
article .toc__menu li a:before {
|
||||
content: counters(item, ".") ". ";
|
||||
counter-increment: item
|
||||
}
|
||||
Loading…
Reference in New Issue