Better responsiveness / fix horizontal scrollbar on mobiles

themes/chosto/layouts/_default/single.html

@@ -5,8 +5,12 @@
   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-quarter-fullhd is-full-tablet is-full-mobile">
       {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
       {{ with .CurrentSection }}
       {{ if .Params.Title }}
@@ -24,7 +28,7 @@
       {{ end }}
       {{ end }}
     </aside>
-    <section class="column content is-half">
+    <section class="column content is-three-fifths-desktop is-half-fullhd is-full-tablet is-full-mobile">
       <div>
         <article>
           <!-- If this is part of a thematic serie, remind it so it is clear -->
@@ -33,7 +37,8 @@
           {{ 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 ! 😄
+              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 }}
@@ -60,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! -->
@@ -70,5 +76,5 @@
       <hr />
     </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

@@ -22,7 +22,7 @@
 }
 
 /* Justify all content but not titles */
-p:not(.title,.subtitle) {
+p:not(.title, .subtitle) {
   text-align: justify;
 }
 
@@ -43,4 +43,13 @@ figure img {
 
 .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;
 }