Chosto
/
blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Waaaay nicer on mobiles 

And on desktop too : simpler layout for posts with case - all the content is centered anyway.
master
Quentin Duchemin 2022-11-07 01:15:03 +01:00
parent 528f2acd4e
commit 9b65b8134d
Signed by: Chosto
GPG Key ID: 0547178FEEDE7D6B
5 changed files with 203 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config.yaml
View File

@ -21,6 +21,10 @@ markup:
renderer: renderer:
# Render newlines as <br> # Render newlines as <br>
hardWraps: true hardWraps: true
tableOfContents:
endLevel: 3
ordered: false
startLevel: 2
# Disable all privacy unfriendly stuff # Disable all privacy unfriendly stuff
privacy: privacy:

159
themes/chosto/layouts/_default/single.html
View File

@ -5,87 +5,84 @@
with all other blog posts belonging to that case, emphasis to the current. with all other blog posts belonging to that case, emphasis to the current.
Still use empty container if nothing to show for homogeneous layout Still use empty container if nothing to show for homogeneous layout
--> -->
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}} <div class="columns">
{{ with .CurrentSection }} <aside class="menu column mt-2 pr-6 is-one-quarter">
{{ if .Params.Title }} {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
<div class="container"> {{ with .CurrentSection }}
<div class="columns mt-5 is-variable"> {{ if .Params.Title }}
<aside class="menu column is-3 mt-2 is-align-self-flex-start"> <p class="menu-label">
<p class="menu-label"> <a href="{{ .Permalink }}">{{ .Params.Title }}</a>
Dans le dossier « <a href="{{ .Permalink }}">{{ .Params.Title }} »</a>... </p>
</p> <div class="menu-list">
<div class="menu-list"> {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
{{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}} {{ $postsSorted := (sort $posts "Date" )}}
{{ $postsSorted := (sort $posts "Date" )}} {{ range $postsSorted }}
{{ range $postsSorted }} <a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
<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 }}">&laquo;&nbsp;{{
.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 }}&nbsp;&raquo;</a>
</div>
{{ end }} {{ end }}
</div> </div>
</aside> </aside>
{{ else }} </section>
<div class="container content is-max-desktop"> </div>
{{ end }} </div>
{{ 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 }}">&laquo;&nbsp;{{ .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 }}&nbsp;&raquo;</a>
</div>
{{ end }}
</div>
</aside>
</section>
</div>
</div>
{{ end }}

25
themes/chosto/layouts/partials/head.html
View File

@ -7,19 +7,22 @@
<link rel="stylesheet" href="{{ $styleCustom.Permalink }}"> <link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
<!-- RSS feed --> <!-- RSS feed -->
{{ range .AlternativeOutputFormats -}} {{ 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 -}} {{ 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 --> <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
<style> <style>
/* Default to home image */ .has-bg-img {
{{ $image := resources.Get "img/home.jpg" }} background: url('{{ $image.Permalink }}')center center;
/* If header image exists in current context, use it instead */ background-size: cover;
{{ with .Resources.GetMatch "top.jpg" }} }
{{ $image = . }}
{{ end }}
{{ $image = $image.Resize "3000x" }}
.has-bg-img { background: url('{{ $image.Permalink }}')center center; background-size:cover; }
</style> </style>
<!-- Favico --> <!-- Favico -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <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-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileColor" content="#FFFFFF">
<title>{{ .Site.Title }}</title> <title>{{ .Site.Title }}</title>
</head> </head>

92
themes/chosto/layouts/partials/header.html
View File

@ -3,59 +3,65 @@
<!-- Display background only for regular pages, or home --> <!-- Display background only for regular pages, or home -->
{{ $background := in "page home" .Kind }} {{ $background := in "page home" .Kind }}
<header> <header>
<section class='hero has-text-centered {{ if $background }}is-large has-bg-img is-info {{ end }}'> <section class='hero has-text-centered {{ if $background }}is-large is-info has-bg-img{{ end }}'>
<div class="hero-head mx-5"> <div class="blur">
<div class="level subtitle is-5"> <div class="hero-head mx-5">
<div class="level-left"> <div class="level subtitle is-5">
{{ with .Params.imgLicence }} <div class="level-left">
<div class="level-item"> {{ with .Params.imgLicence }}
Image d'illustration {{ . }} <div class="level-item">
</div> Image d'illustration {{ . }}
{{ 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 }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
</div> <div class="level-right">
</div> <div class="level-item">
{{ with .Params.categories }}
</div> <div class="tags colums is-vcentered mb-2 mt-5">
<div class="hero-body {{ if not $background }}pb-0{{ end }} content has-text-centered"> {{ range . }}
<p class="title is-1 is-uppercase">{{ .Title }}</p> <span class="tag is-info is-light is-large mr-4"><a href="{{ " categories" | absURL }}/{{ . | urlize
{{ with .Params.subtitle }} }}">{{ . }}</a></span>
<p class="subtitle is-2">{{ . }}</p> {{ end }}
{{ end }} </div>
</div> {{ end }}
<!-- Words and date stuff makes sens only for blog posts, not other pages --> </div>
{{ 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">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
<p>✏️&nbsp;&nbsp;Dernière modification le <strong>{{ .Lastmod.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</strong></p>
</time>
</div> </div>
</div> </div>
<div class="level-right">
<div class="level-item has-text-right"> </div>
<div> <div class="hero-body {{ if not $background }}pb-0{{ end }} content container has-text-centered">
<p class="mb-2">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture</p> <p class="title is-1 is-uppercase">{{ .Title }}</p>
<p>#️&nbsp;<strong>{{ .FuzzyWordCount }} mots</strong></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">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr
(printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
<p>✏️&nbsp;&nbsp;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">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
</p>
<p>#️&nbsp;<strong>{{ .FuzzyWordCount }} mots</strong></p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{ end }}
</div> </div>
{{ end }}
</section> </section>
</header> </header>
{{ end }} {{ end }}

67
themes/chosto/static/css/custom.css
View File

@ -1,24 +1,73 @@
@font-face { @font-face {
font-family: 'Nunito'; font-family: 'Nunito';
src: src:
url('../font/Nunito-Regular.woff2') format('woff2'), url('../font/Nunito-Regular.woff2') format('woff2'),
url('../font/Nunito-Regular.woff') format('woff'), url('../font/Nunito-Regular.woff') format('woff'),
url('../font/Nunito-Regular.ttf') format('truetype'); url('../font/Nunito-Regular.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
.has-equal-height { /* Make the parent background blur under this element */
height: 100%; .blur {
display: flex; backdrop-filter: blur(3px);
flex-direction: column;
} }
.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; text-align: justify;
} }
/* New font is "smaller" in feeling */
.navbar-dropdown { .navbar-dropdown {
font-size: 1rem; 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
} }