Content really needs to be wider if we want to keep that font size

themes/chosto/layouts/_default/single.html

@@ -1,12 +1,16 @@
 {{ define "main" }}
 <div class="section">
   <!--
-  If the current page is a blog post and belongs to a case, we will add a side menu
+  If the current page is a blog post and belongs to a thematic serie, we will add a side menu
   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 is-variable is-8">
+  <!-- is-desktop stacks vertically columns for tablets and mobiles. is-8 is a
-    <aside class="menu column mt-2 is-one-quarter">
+  maximum gap of 2rem between columns -->
+  <div class="columns is-variable is-desktop is-8">
+    <!-- To ease reading, the content is a bit wider for small screens
+    but not too wide for big screens -->
+    <aside class="menu column mt-2 is-one-fifth-desktop is-one-fifth-fullhd is-full-tablet is-full-mobile">
       {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
       {{ with .CurrentSection }}
       {{ if .Params.Title }}
@@ -24,16 +28,29 @@
       {{ end }}
       {{ end }}
     </aside>
-    <section class="column content is-half">
+    <section class="column content is-three-fifths-desktop is-three-fifths-fullhd is-full-tablet is-full-mobile">
       <div>
         <article>
+          <!-- If this is part of a thematic serie, remind it so it is clear -->
+          {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
+          {{ with .CurrentSection }}
+          {{ if .Params.Title }}
+          <div class="message is-info">
+            <div class="message-body content">
+              Le post que vous lisez fait partie du dossier « <a href="{{ .Permalink }}">{{ .Params.Title }}</a> ». Le
+              menu sur la gauche permet de naviguer entre ses billets. Bonne lecture ! 😄
+            </div>
+          </div>
+          {{ end }}
+          {{ end }}
+          {{ end }}
           <!-- First thing is a legend for the hero image, if it exists -->
           {{ with .Params.imgExplanation }}
-          <article class="message mb-5">
+          <div class="message">
             <div class="message-body content is-italic">
               {{ . }}
             </div>
-          </article>
+          </div>
           {{ end }}
           <!-- Second, an introductive message before ToC, if it exists -->
           {{ with .Params.intro | markdownify | safeHTML }}
@@ -48,7 +65,8 @@
           <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 class="message-body has-text-left pt-1">
+              {{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
           </div>
           {{ end }}
           <!-- Finally, content! -->
@@ -56,23 +74,7 @@
         </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 }}
-        </div>
-      </aside>
     </section>
   </div>
-  </div>
+</div>
-  {{ end }}
+{{ end }}

themes/chosto/layouts/shortcodes/quote.html

@@ -1 +1 @@
-<blockquote>{{ .Inner }}</blockquote>
+<blockquote>{{ .Inner | markdownify}}</blockquote>

themes/chosto/static/css/custom.css

@@ -14,6 +14,21 @@
   backdrop-filter: blur(3px);
 }
 
+/* Trick which changes nothing visually but makes the footnote anchors
+virtually 40% lower. Otherwise the fixed navbar is just above the
+footnote link when going back from the bottom. That way, either 
+footnotes or anchors are in the middle of the page, making
+navigation easier */
+sup[id*=fn] {
+  padding-top: 40% !important;
+  margin-top: -40% !important;
+}
+
+li[id*=fn] {
+  padding-top: 40% !important;
+  margin-top: -40% !important;
+}
+
 /* Useful to force cards to have the same height */
 .has-equal-height {
   height: 100%;
@@ -22,7 +37,7 @@
 }
 
 /* Justify all content but not titles */
-p:not(.title,.subtitle) {
+p:not(.title, .subtitle) {
   text-align: justify;
 }
 
@@ -39,4 +54,17 @@ figcaption h4 {
 
 figure img {
   filter: drop-shadow(4px 4px 5px grey)
+}
+
+.menu-label {
+  text-justify: none;
+}
+
+/* Workaround for horizontal scrollbar, 
+probably because I'm messing with containers,
+sections and columns, but I do not understand
+CSS enough to fix it properly.
+See https://github.com/jgthms/bulma/issues/449 */
+body {
+  overflow-x: hidden;
 }