Waaaay nicer on mobiles

And on desktop too : simpler layout for posts with case - all the content is centered anyway.

config.yaml

@@ -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:

themes/chosto/layouts/_default/single.html

@@ -5,14 +5,13 @@
   with all other blog posts belonging to that case, emphasis to the current.
   Still use empty container if nothing to show for homogeneous layout
   -->
+  <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 }}
-  <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>...
+        <a href="{{ .Permalink }}">{{ .Params.Title }}</a>
       </p>
       <div class="menu-list">
         {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
@@ -21,15 +20,11 @@
         <a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
         {{ end }}
       </div>
+      {{ end }}
+      {{ end }}
+      {{ end }}
     </aside>
-    {{ else }}
+    <section class="column content is-half">
-    <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 -->
@@ -61,7 +56,7 @@
           <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 class="message-body has-text-left pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
           </div>
           {{ end }}
           <!-- Finally, content! -->
@@ -69,18 +64,20 @@
         </article>
       </div>
       <hr />
-        <aside class="container level my-5 is-mobile">
+      <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 is-responsive has-text-weight-bold" href="{{ .Permalink }}">&laquo;&nbsp;{{ .Title }}</a>
+            <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 is-responsive has-text-weight-bold" href="{{ .Permalink }}">{{ .Title }}&nbsp;&raquo;</a>
+            <a class="button is-link is-light is-medium has-text-weight-bold" href="{{ .Permalink }}">{{
+              .Title }}&nbsp;&raquo;</a>
           </div>
           {{ end }}
         </div>

themes/chosto/layouts/partials/head.html

@@ -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 -->
-  <!-- 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 */
+  <!-- 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; }
+  <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
+  <style>
+    .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">

themes/chosto/layouts/partials/header.html

@@ -3,7 +3,8 @@
 <!-- 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 }}'>
+  <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">
@@ -18,7 +19,8 @@
               {{ 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>
+                <span class="tag is-info is-light is-large mr-4"><a href="{{ " categories" | absURL }}/{{ . | urlize
+                    }}">{{ . }}</a></span>
                 {{ end }}
               </div>
               {{ end }}
@@ -27,7 +29,7 @@
         </div>
 
       </div>
-    <div class="hero-body {{ if not $background }}pb-0{{ end }} content has-text-centered">
+      <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>
@@ -39,16 +41,19 @@
         <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 }}">
+              <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 class="mb-2">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr
-              <p>✏️&nbsp;&nbsp;Dernière modification le <strong>{{ .Lastmod.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</strong></p>
+                    (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">
+          <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 class="mb-2">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
+                </p>
                 <p>#️&nbsp;<strong>{{ .FuzzyWordCount }} mots</strong></p>
               </div>
             </div>
@@ -56,6 +61,7 @@
         </div>
       </div>
       {{ end }}
+    </div>
   </section>
 </header>
 {{ end }}

themes/chosto/static/css/custom.css

@@ -9,16 +9,65 @@
   font-display: swap;
 }
 
+/* Make the parent background blur under this element */
+.blur {
+  backdrop-filter: blur(3px);
+}
+
+/* Useful to force cards to have the same height */
 .has-equal-height {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-.content {
+/* 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
+}