Waaaay nicer on mobiles

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

.gitignore

@@ -1,3 +1,4 @@
 resources
 public
-.hugo_build.lock
+.hugo_build.lock
+bulma

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:

content/_index.md

@@ -1,4 +1,4 @@
 ---
 title: Billets à la mer
-subtitle: Pensées d'un ingénieur qui voulait être vivant
+subtitle: Pensées d'un ingénieur qui voulait être humain
 ---

content/posts/cid/_index.md

@@ -0,0 +1,9 @@
+---
+title: Cercle des Ingénieurs Disparus
+subtitle: Club d'écriture à l'UTC
+code: CID
+---
+
+Ce dossier regroupe les quelques textes que j'ai écrit pendant mon passage au CID. C'est une asso d'écriture plein de gens chouettes que j'ai fréquentée fin 2021. Chaque semaine, on écrivait des trucs ensemble. C'était ma première expérience d'écriture. 
+
+J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de poster les miens ici, moins par fierté que pour [l'imaginaire auquel ça me renvoie](http://three.fibreculturejournal.org/fcj-012-composing-the-self-of-diaries-and-lifelogs/).

content/posts/cid/atelier1/index.md

@@ -4,7 +4,7 @@ date: 2021-10-14
 categories:
   - Fictions
 summary: "Texte à dessiner sur le thème « piano somptueux »."
-imgExplanation: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, on devait écrire un texte qui servira de support pour l'asso de dessin, assez descriptif donc ! On a chacun choisi un mot et un adjectif puis créé des combinaisons, et réparti au choix ou au hasard. J'ai hérité de « piano somptueux ».
+intro: Cette semaine, on devait écrire un texte qui servira de support pour l'asso de dessin, assez descriptif donc ! On a chacun choisi un mot et un adjectif puis créé des combinaisons, et réparti au choix ou au hasard. J'ai hérité de « piano somptueux ».
 imgLicence: just.Luc - CC BY-NC-SA 2.0
 notoc: true
 ---

content/posts/cid/tdb1/index.md

@@ -5,7 +5,7 @@ categories:
   - Fictions
 summary: "Nouvelle sur le thème « petit désir devient grand désir »."
 imgLicence: Roxelo Babenco - CC BY-ND 2.0
-imgExplanation: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, on devait écrire avec une forme libre et une contrainte de thème.
+intro: Cette semaine, on devait écrire avec une forme libre et une contrainte de thème.
 notoc: true
 ---
 

content/posts/cid/tdb2/index.md

@@ -5,7 +5,7 @@ categories:
   - Fictions
 summary: "Micro-nouvelle sur le thème « porte ouverte sur ses rêves »."
 imgLicence: ƒr㋡ηk vᗩη Doηgeη - CC PDM 1.0
-imgExplanation: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, on devait écrire avec en se concentrant sur les émotions et les réflexions du narrateur, avec une contrainte de thème.
+intro: Cette semaine, on devait écrire avec en se concentrant sur les émotions et les réflexions du narrateur, avec une contrainte de thème.
 notoc: true
 ---
 

content/posts/cid/tdb3/index.md

@@ -5,7 +5,7 @@ categories:
   - Fictions
 summary: "Micro-nouvelle basé sur le dessin d'une amie."
 imgLicence: L²
-imgExplanation: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, on devait choisir un dessin proposé par d'autres membres du CID et l'utiliser comme base pour le texte.
+intro: Cette semaine, on devait choisir un dessin proposé par d'autres membres du CID et l'utiliser comme base pour le texte.
 notoc: true
 ---
 

content/posts/cid/tdb4/index.md

@@ -3,9 +3,9 @@ title: Le dernier bus
 date: 2021-12-10
 categories:
   - Fictions
-summary: "Texte avec pour contrainte de ne pas être un gros techno-cynique 😛 (« zone d'inconfort »)."
+summary: "Contrainte : ne pas être un gros techno-cynique 😛 (« zone d'inconfort »)."
 imgLicence: "« Steaming Water » by SidPix - CC BY 2.0"
-imgExplanation: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, l'objectif était de sortir de sa « zone de confort », et j'ai donc eu pour contrainte de ne pas axer mon texte autour d'une critique de la technologie, puisque le peu de textes que j'ai écrits jusqu'à maintenant tournaient quand même pas mal autour de ce thème.
+intro: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, l'objectif était de sortir de sa « zone de confort », et j'ai donc eu pour contrainte de ne pas axer mon texte autour d'une critique de la technologie, puisque le peu de textes que j'ai écrits jusqu'à maintenant tournaient quand même pas mal autour de ce thème.
 notoc: true
 ---
 

content/posts/smartphone/perspectives/index.md

@@ -6,7 +6,7 @@ categories:
   - Réflexion
 summary: Comment casser la boucle de l'addiction au smartphones ? Quelques pistes de réflexion, certes très autocentrées, mais qui m'ont été utiles, en attendant de changer le monde.
 imgLicence: Art Libre - Baptiste Filleau
-imgExplanation: En illustration de cet article, une aquarelle de mon meilleur ami, qui m'a beaucoup fait avancer dans mes réflexions.
+imgExplanation: En illustration de cet article, une aquarelle de mon ami d'enfance, qui m'a beaucoup fait avancer dans mes réflexions.
 ---
 
 ## S'il vous plaît, ne me tapez pas

themes/chosto/layouts/_default/single.html

@@ -5,78 +5,84 @@
   with all other blog posts belonging to that case, emphasis to the current.
   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 }}
         </div>
       </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">
-        <div>
-          <article class="mx-6">
-            <!-- 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 before ToC, if it exists -->
-            {{ with .Params.summary }}
-            <div class="message is-primary">
-              <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-info">
-              <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>
-        <aside class="container level my-5">
-          <div class="level-left">
-            {{ with .PrevInSection }}
-            <div class="level-item">
-              <a class="button is-info" href="{{ .Permalink }}">&laquo;&nbsp;{{ .Title }}</a>
-            </div>
-            {{ end }}
-          </div>
-          <div class="level-right">
-            {{ with .NextInSection }}
-            <div class="level-item">
-              <a class="button is-info" href="{{ .Permalink }}">{{ .Title }}&nbsp;&raquo;</a>
-            </div>
-            {{ end }}
-          </div>
-        </aside>
-      </section>
-    </div>
-    </div>
-{{ end }}

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 -->
+  {{ $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 -->
   <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>
   <!-- Favico -->
   <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-TileColor" content="#FFFFFF">
   <title>{{ .Site.Title }}</title>
-</head>
+</head>

themes/chosto/layouts/partials/header.html

@@ -3,59 +3,65 @@
 <!-- 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="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>
             {{ end }}
           </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 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>
+      {{ end }}
     </div>
-    {{ end }}
   </section>
 </header>
 {{ end }}

themes/chosto/layouts/partials/navbar.html

@@ -40,7 +40,7 @@
         <div class="navbar-dropdown">
           {{ range where .Site.Pages "Params.Code" "!=" nil }}
           <a class="navbar-item {{ if eq $.Permalink .Page.Permalink }}is-active{{ end }}" href="{{ .Page.Permalink }}">
-            {{ .Title | humanize }}
+            {{ .Title }}
             {{ $casePosts := where .Site.RegularPages "CurrentSection.Params.Code" "==" .Params.Code }}
             <span class="tag ml-2 is-rounded">{{ len $casePosts }}</span>
           </a>

themes/chosto/layouts/partials/pagination.html

@@ -1,6 +1,6 @@
 {{ $pag := . }}
 {{ if gt $pag.TotalPages 1 -}}
-<nav class="mt-5 pagination is-centered" role="navigation" aria-label="pagination">
+<nav class="mt-6 pagination is-centered" role="navigation" aria-label="pagination">
   {{ with $pag.First -}}
   <ul class="pagination-list">
   {{ end -}}

themes/chosto/static/css/custom.css

@@ -1,9 +1,73 @@
-.has-equal-height {
+@font-face {
-    height: 100%;
+  font-family: 'Nunito';
-    display: flex;
+  src:
-    flex-direction: column;
+    url('../font/Nunito-Regular.woff2') format('woff2'),
+    url('../font/Nunito-Regular.woff') format('woff'),
+    url('../font/Nunito-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
-.content {
+/* 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;
+}
+
+/* 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
 }