themes/chosto/layouts/_default/single.html

@@ -1,16 +1,12 @@
 {{ define "main" }}
 <div class="section">
   <!--
-  If the current page is a blog post and belongs to a thematic serie, we will add a side menu
+  If the current page is a blog post and belongs to a case, 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
   -->
-  <!-- is-desktop stacks vertically columns for tablets and mobiles. is-8 is a
+  <div class="columns is-variable is-8">
-  maximum gap of 2rem between columns -->
+    <aside class="menu column mt-2 is-one-quarter">
-  <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 }}
@@ -28,29 +24,16 @@
       {{ end }}
       {{ end }}
     </aside>
-    <section class="column content is-three-fifths-desktop is-three-fifths-fullhd is-full-tablet is-full-mobile">
+    <section class="column content is-half">
       <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 }}
-          <div class="message">
+          <article class="message mb-5">
             <div class="message-body content is-italic">
               {{ . }}
             </div>
-          </div>
+          </article>
           {{ end }}
           <!-- Second, an introductive message before ToC, if it exists -->
           {{ with .Params.intro | markdownify | safeHTML }}
@@ -65,8 +48,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 has-text-left pt-1">
+            <div class="message-body has-text-left pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
-              {{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
           </div>
           {{ end }}
           <!-- Finally, content! -->
@@ -74,6 +56,22 @@
         </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>

themes/chosto/layouts/shortcodes/quote.html

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

themes/chosto/static/css/custom.css

@@ -14,21 +14,6 @@
   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%;
@@ -55,16 +40,3 @@ 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;
-}