Article

david/2024/01/01/index.html

@@ -47,8 +47,8 @@
   <!-- Is that even respected? Retrospectively? What a shAItshow…
   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
-  <!-- Documented, feel free to shoot an email.
-  <link rel="stylesheet" href="/static/david/css/style_2024.css"> -->
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-03.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
   <link rel="preload"
         href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
@@ -86,104 +86,6 @@
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
         crossorigin> -->
-  <style type="text/css">
-    @layer reset, structure, typography, colors;
-
-    @layer reset {
-      *, *::before, *::after {
-        box-sizing: border-box;
-      }
-      body {
-        line-height: 1.5;
-        margin: 0;
-      }
-      img, picture, video {
-        display: block;
-        max-width: 100%;
-        height: auto;
-        vertical-align: middle;
-      }
-      input, button, textarea, select {
-        font: inherit;
-      }
-      h1, h2, h3, h4, button, input, label {
-        line-height: 1.1;
-      }
-    }
-
-    @layer structure {
-      hgroup, nav, figcaption, footer {
-        text-align: center;
-      }
-      hgroup > :not(:first-child):last-child {
-        color: #474747;
-        font-size: 1rem;
-        margin: 0;
-      }
-      h1 {
-        margin-block-start: 4rem;
-        margin-block-end: 0;
-      }
-      hr {
-        min-width: 5%;
-      }
-      article {
-        display: grid;
-        grid-template-columns:
-          1fr
-          min(65ch, calc(100% - 64px))
-          1fr;
-        grid-column-gap: 32px;
-      }
-      article > * {
-        grid-column: 2;
-      }
-      article > * + * {
-        margin-block-start: 1.5rem;
-      }
-      blockquote {
-        margin: 0;
-        width: 100%;
-        grid-column: 1 / 4;
-        display: grid;
-        grid-template-columns:
-          1fr
-          min(65ch, calc(100% - 64px))
-          1fr;
-        grid-column-gap: 32px;
-      }
-      blockquote > * {
-        grid-column: 2;
-      }
-      blockquote cite {
-        display: block;
-        text-align: right;
-      }
-      figure {
-        margin: 0 auto;
-        width: 65%;
-        grid-column: 1 / 4;
-      }
-    }
-
-    @layer typography {
-      body {
-        font-size: 130%;
-      }
-    }
-
-    @layer colors {
-      body {
-        background-color: #fefefe;
-        color: #2f343d;
-      }
-      blockquote {
-        background-color: #FBEDF4;
-        border-top: 1px solid #FA9ACF;
-        border-bottom: 1px solid #FA9ACF;
-      }
-    }
-  </style>
   <script>
     function toggleTheme(themeName) {
       document.documentElement.classList.toggle(

david/2024/01/02/index.html

@@ -47,8 +47,8 @@
   <!-- Is that even respected? Retrospectively? What a shAItshow…
   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
-  <!-- Documented, feel free to shoot an email.
-  <link rel="stylesheet" href="/static/david/css/style_2024.css"> -->
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-03.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
   <link rel="preload"
         href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
@@ -86,104 +86,6 @@
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
         crossorigin> -->
-  <style type="text/css">
-    @layer reset, structure, typography, colors;
-
-    @layer reset {
-      *, *::before, *::after {
-        box-sizing: border-box;
-      }
-      body {
-        line-height: 1.5;
-        margin: 0;
-      }
-      img, picture, video {
-        display: block;
-        max-width: 100%;
-        height: auto;
-        vertical-align: middle;
-      }
-      input, button, textarea, select {
-        font: inherit;
-      }
-      h1, h2, h3, h4, button, input, label {
-        line-height: 1.1;
-      }
-    }
-
-    @layer structure {
-      hgroup, nav, figcaption, footer {
-        text-align: center;
-      }
-      hgroup > :not(:first-child):last-child {
-        color: #474747;
-        font-size: 1rem;
-        margin: 0;
-      }
-      h1 {
-        margin-block-start: 4rem;
-        margin-block-end: 0;
-      }
-      hr {
-        min-width: 5%;
-      }
-      article {
-        display: grid;
-        grid-template-columns:
-          1fr
-          min(65ch, calc(100% - 64px))
-          1fr;
-        grid-column-gap: 32px;
-      }
-      article > * {
-        grid-column: 2;
-      }
-      article > * + * {
-        margin-block-start: 1.5rem;
-      }
-      blockquote {
-        margin: 0;
-        width: 100%;
-        grid-column: 1 / 4;
-        display: grid;
-        grid-template-columns:
-          1fr
-          min(65ch, calc(100% - 64px))
-          1fr;
-        grid-column-gap: 32px;
-      }
-      blockquote > * {
-        grid-column: 2;
-      }
-      blockquote cite {
-        display: block;
-        text-align: right;
-      }
-      figure {
-        margin: 0 auto;
-        width: 65%;
-        grid-column: 1 / 4;
-      }
-    }
-
-    @layer typography {
-      body {
-        font-size: 130%;
-      }
-    }
-
-    @layer colors {
-      body {
-        background-color: #fefefe;
-        color: #2f343d;
-      }
-      blockquote {
-        background-color: #FBEDF4;
-        border-top: 1px solid #FA9ACF;
-        border-bottom: 1px solid #FA9ACF;
-      }
-    }
-  </style>
   <script>
     function toggleTheme(themeName) {
       document.documentElement.classList.toggle(
@@ -228,6 +130,10 @@
              rel="search">Recherche</a>
         </nobr>
         
+          • <a rel="next"
+    href="/david/2024/01/03/"
+    title="Publication suivante : Appariement">Suivant →</a>
+        
       </p>
     </nav>
     <hr>
@@ -248,7 +154,7 @@
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />
@@ -299,6 +205,10 @@
         
         <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
         
+          • <a rel="next"
+    href="/david/2024/01/03/"
+    title="Publication suivante : Appariement">Suivant →</a>
+        
       </p>
     </nav>
   </article>

david/2024/01/03/index.html

@@ -0,0 +1,288 @@
+<!DOCTYPE html><!-- This is a valid HTML5 document. -->
+<!-- Screen readers, SEO, extensions and so on. -->
+<html lang="fr">
+  <!-- Has to be within the first 1024 bytes, hence before the `title` element
+  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
+  <meta charset="utf-8">
+  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
+  <!-- The viewport meta is quite crowded and we are responsible for that.
+  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <!-- Required to make a valid HTML5 document. -->
+  <title>
+    Appariement
+  — David Larlet</title>
+  <meta name="description" content="Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera Century Supra qui fera la paire avec Concourse pour du sans serif (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.">
+  <!-- That good ol' feed, subscribe :). -->
+  <link rel="alternate"
+        type="application/atom+xml"
+        title="Feed"
+        href="/david/log/">
+  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
+  <link rel="apple-touch-icon"
+        sizes="180x180"
+        href="/static/david/icons2/apple-touch-icon.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/static/david/icons2/favicon-32x32.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/static/david/icons2/favicon-16x16.png">
+  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
+  <link rel="mask-icon"
+        href="/static/david/icons2/safari-pinned-tab.svg"
+        color="#07486c">
+  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
+  <meta name="msapplication-TileColor" content="#f7f7f7">
+  <meta name="msapplication-config"
+        content="/static/david/icons2/browserconfig.xml">
+  <meta name="theme-color"
+        content="#f7f7f7"
+        media="(prefers-color-scheme: light)">
+  <meta name="theme-color"
+        content="#272727"
+        media="(prefers-color-scheme: dark)">
+  <!-- Is that even respected? Retrospectively? What a shAItshow…
+  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
+  <meta name="robots" content="noai, noimageai">
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-03.css">
+  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin> -->
+  <script>
+    function toggleTheme(themeName) {
+      document.documentElement.classList.toggle(
+        'forced-dark',
+        themeName === 'dark'
+      )
+      document.documentElement.classList.toggle(
+        'forced-light',
+        themeName === 'light'
+      )
+    }
+    const selectedTheme = localStorage.getItem('theme')
+    if (selectedTheme !== 'undefined') {
+      toggleTheme(selectedTheme)
+    }
+  </script>
+  
+  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
+        data-instant-intensity="viewport-all">
+    
+  <article>
+    <header>
+      <hgroup>
+        <h1>Appariement</h1>
+        <p>Le <time datetime="2024-01-03">3 janvier 2024</time></p>
+      </hgroup>
+    </header>
+    <nav>
+      <p class="center">
+        
+          <a rel="prev"
+             href="/david/2024/01/02/"
+             title="Publication précédente : Fondations">← Précédent</a> •
+        
+        <nobr>
+          <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="/david/recherche/"
+             title="Aller à la page de recherche"
+             rel="search">Recherche</a>
+        </nobr>
+        
+      </p>
+    </nav>
+    <hr>
+    
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
+<p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
+<hr />
+
+<blockquote>
+<p><mark>Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.</mark> Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&nbsp;vie.</p>
+<p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
+</blockquote>
+<p>L’introduction de <em>Alors nous irons trouver la beauté ailleurs</em> par Corinne Morel Darleux m’aura suffit pour&nbsp;aujourd’hui&nbsp;🙂.</p>
+<hr />
+<p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense à été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
+<p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
+
+    
+      <nav>
+        <p>
+          
+            <a href="/david/2024/accompagnement/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#accompagnement</a>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <nav>
+      <p class="center">
+        
+          <a rel="prev"
+             href="/david/2024/01/02/"
+             title="Publication précédente : Fondations">← Précédent</a> •
+        
+        <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
+        
+      </p>
+    </nav>
+  </article>
+
+    <hr>
+    <footer>
+      <p>
+        <nobr>
+          <a href="/david/" title="Aller à l’accueil">Accueil</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="http://larlet.com"
+             title="Go to my English profile"
+             data-instant>Pro</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
+        </nobr>
+        •
+        <nobr>
+          <abbr class="nowrap"
+                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
+        </nobr>
+      </p>
+      <template id="theme-selector">
+        <form>
+          <fieldset>
+            <legend>Thème
+            </legend>
+            <label>
+              <input type="radio" value="auto" name="chosen-color-scheme" checked>
+              Auto
+            </label>
+            <label>
+              <input type="radio" value="dark" name="chosen-color-scheme">
+              Foncé
+            </label>
+            <label>
+              <input type="radio" value="light" name="chosen-color-scheme">
+              Clair
+            </label>
+          </fieldset>
+        </form>
+      </template>
+    </footer>
+    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
+    <script>
+      function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+          const chosenColorScheme = e.target.value
+          localStorage.setItem('theme', chosenColorScheme)
+          toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme && selectedTheme !== 'undefined') {
+          form.querySelector(`[value="${selectedTheme}"]`).checked = true
+        }
+      }
+
+      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+      window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+          let mediaRules = []
+          for (const cssRule of styleSheet.cssRules) {
+            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+              continue
+            }
+            // WARNING: Safari does not have/supports `conditionText`.
+            if (cssRule.conditionText) {
+              if (cssRule.conditionText !== prefersColorSchemeDark) {
+                continue
+              }
+            } else {
+              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                continue
+              }
+            }
+            mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+          }
+
+          // WARNING: do not try to insert a Rule to a styleSheet you are
+          // currently iterating on, otherwise the browser will be stuck
+          // in a infinite loop…
+          for (const mediaRule of mediaRules) {
+            styleSheet.insertRule(mediaRule.cssText)
+            hasDarkRules = true
+          }
+        }
+        if (hasDarkRules) {
+          loadThemeForm('#theme-selector')
+        }
+      })
+    </script>
+    
+  </body>
+</html>

david/2024/_sources/2024-01-02 - Fondations.md

@@ -21,7 +21,7 @@ Je suis satisfait de mon résultat très minimaliste du jour.
 
 > Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des rêves.
 >
-> <cite>[notes](https://www.la-grange.net/2023/07/10/notes-train) par Karl</cite>
+> <cite>*[notes](https://www.la-grange.net/2023/07/10/notes-train)* par Karl</cite>
 
 🧡
 

david/2024/_sources/2024-01-03 - Appariement.md

@@ -0,0 +1,25 @@
+# Appariement
+
+Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera [Century Supra](https://mbtype.com/fonts/century-supra/) qui fera la paire avec [Concourse](https://mbtype.com/fonts/concourse/) pour du *sans serif* (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.
+
+Au niveau de la taille, j’ai enfin l’occasion de tester un [échelle modulaire](https://utopia.fyi/blog/css-modular-scales) et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.
+
+Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux *CSS layers* c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes sections.
+
+Je m’amuse comme un petit fou même si la CSS fait subitement 350 lignes.
+
+---
+
+> ==Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.== Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés : le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la vie.
+>
+> <cite>*Journal 1947-1955*, Anaïs Nin</cite>
+
+L’introduction de *Alors nous irons trouver la beauté ailleurs* par Corinne Morel Darleux m’aura suffit pour aujourd’hui 🙂.
+
+---
+
+On a couru 10 km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps ! La récompense à été de croiser un renard urbain de vraiment très près, moins de 5 mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10 ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait -6°C.
+
+Tout ça pour aller chercher un bidon d’huile pour la transmission de la voiture.
+
+#accompagnement #écriture #web

david/2024/accompagnement/index.html

@@ -0,0 +1,289 @@
+<!DOCTYPE html><!-- This is a valid HTML5 document. -->
+<!-- Screen readers, SEO, extensions and so on. -->
+<html lang="fr">
+  <!-- Has to be within the first 1024 bytes, hence before the `title` element
+  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
+  <meta charset="utf-8">
+  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
+  <!-- The viewport meta is quite crowded and we are responsible for that.
+  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <!-- Required to make a valid HTML5 document. -->
+  <title>
+    Tag #accompagnement
+  — David Larlet</title>
+  <meta name="description" content="Publications relatives au tag #accompagnement">
+  <!-- That good ol' feed, subscribe :). -->
+  <link rel="alternate"
+        type="application/atom+xml"
+        title="Feed"
+        href="/david/log/">
+  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
+  <link rel="apple-touch-icon"
+        sizes="180x180"
+        href="/static/david/icons2/apple-touch-icon.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/static/david/icons2/favicon-32x32.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/static/david/icons2/favicon-16x16.png">
+  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
+  <link rel="mask-icon"
+        href="/static/david/icons2/safari-pinned-tab.svg"
+        color="#07486c">
+  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
+  <meta name="msapplication-TileColor" content="#f7f7f7">
+  <meta name="msapplication-config"
+        content="/static/david/icons2/browserconfig.xml">
+  <meta name="theme-color"
+        content="#f7f7f7"
+        media="(prefers-color-scheme: light)">
+  <meta name="theme-color"
+        content="#272727"
+        media="(prefers-color-scheme: dark)">
+  <!-- Is that even respected? Retrospectively? What a shAItshow…
+  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
+  <meta name="robots" content="noai, noimageai">
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
+  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <script>
+    function toggleTheme(themeName) {
+      document.documentElement.classList.toggle(
+        'forced-dark',
+        themeName === 'dark'
+      )
+      document.documentElement.classList.toggle(
+        'forced-light',
+        themeName === 'light'
+      )
+    }
+    const selectedTheme = localStorage.getItem('theme')
+    if (selectedTheme !== 'undefined') {
+      toggleTheme(selectedTheme)
+    }
+  </script>
+  
+  <style type="text/css">
+    details[open] summary {
+      display: none;
+    }
+  </style>
+
+  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
+        data-instant-intensity="viewport-all">
+    
+  <header>
+    <h1>Publications relatives au tag #accompagnement</h1>
+  </header>
+  <nav>
+    <p class="center">
+      <a href="/david/" title="Aller à l’accueil">
+        <svg class="icon icon-home">
+          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
+        </svg>
+      Accueil</a>
+      • <a rel="tags"
+    href="/david/#tags-2023"
+    title="Liste de toutes les étiquettes">
+      <svg class="icon icon-tags">
+        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
+      </svg>
+    Étiquettes</a>
+  </p>
+</nav>
+<hr>
+<main>
+  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
+  
+    <h2>
+      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> (2024-01-03)
+    </h2>
+    
+      
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
+<p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
+<hr />
+
+<blockquote>
+<p><mark>Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.</mark> Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&nbsp;vie.</p>
+<p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
+</blockquote>
+<p>L’introduction de <em>Alors nous irons trouver la beauté ailleurs</em> par Corinne Morel Darleux m’aura suffit pour&nbsp;aujourd’hui&nbsp;🙂.</p>
+<hr />
+<p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense à été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
+<p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
+
+    
+  
+</main>
+
+    <hr>
+    <footer>
+      <p>
+        <nobr>
+          <a href="/david/" title="Aller à l’accueil">
+            <svg class="icon icon-home">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
+            </svg>
+          Accueil</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="/david/log/" title="Accès au flux RSS">
+            <svg class="icon icon-rss2">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+            </svg>
+          Suivre</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="http://larlet.com"
+             title="Go to my English profile"
+             data-instant>
+            <svg class="icon icon-user-tie">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+            </svg>
+          Pro</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
+            <svg class="icon icon-mail">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+            </svg>
+          Email</a>
+        </nobr>
+        •
+        <nobr>
+          <abbr class="nowrap"
+                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
+            <svg class="icon icon-hammer2">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+            </svg>
+          Légal</abbr>
+        </nobr>
+      </p>
+      <template id="theme-selector">
+        <form>
+          <fieldset>
+            <legend>
+              <svg class="icon icon-brightness-contrast">
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
+              </svg>
+              Thème
+            </legend>
+            <label>
+              <input type="radio" value="auto" name="chosen-color-scheme" checked>
+              Auto
+            </label>
+            <label>
+              <input type="radio" value="dark" name="chosen-color-scheme">
+              Foncé
+            </label>
+            <label>
+              <input type="radio" value="light" name="chosen-color-scheme">
+              Clair
+            </label>
+          </fieldset>
+        </form>
+      </template>
+    </footer>
+    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
+    <script>
+      function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+          const chosenColorScheme = e.target.value
+          localStorage.setItem('theme', chosenColorScheme)
+          toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme && selectedTheme !== 'undefined') {
+          form.querySelector(`[value="${selectedTheme}"]`).checked = true
+        }
+      }
+
+      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+      window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+          let mediaRules = []
+          for (const cssRule of styleSheet.cssRules) {
+            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+              continue
+            }
+            // WARNING: Safari does not have/supports `conditionText`.
+            if (cssRule.conditionText) {
+              if (cssRule.conditionText !== prefersColorSchemeDark) {
+                continue
+              }
+            } else {
+              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                continue
+              }
+            }
+            mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+          }
+
+          // WARNING: do not try to insert a Rule to a styleSheet you are
+          // currently iterating on, otherwise the browser will be stuck
+          // in a infinite loop…
+          for (const mediaRule of mediaRules) {
+            styleSheet.insertRule(mediaRule.cssText)
+            hasDarkRules = true
+          }
+        }
+        if (hasDarkRules) {
+          loadThemeForm('#theme-selector')
+        }
+      })
+    </script>
+    
+  </body>
+</html>

david/2024/ecriture/index.html

@@ -0,0 +1,289 @@
+<!DOCTYPE html><!-- This is a valid HTML5 document. -->
+<!-- Screen readers, SEO, extensions and so on. -->
+<html lang="fr">
+  <!-- Has to be within the first 1024 bytes, hence before the `title` element
+  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
+  <meta charset="utf-8">
+  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
+  <!-- The viewport meta is quite crowded and we are responsible for that.
+  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <!-- Required to make a valid HTML5 document. -->
+  <title>
+    Tag #écriture
+  — David Larlet</title>
+  <meta name="description" content="Publications relatives au tag #écriture">
+  <!-- That good ol' feed, subscribe :). -->
+  <link rel="alternate"
+        type="application/atom+xml"
+        title="Feed"
+        href="/david/log/">
+  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
+  <link rel="apple-touch-icon"
+        sizes="180x180"
+        href="/static/david/icons2/apple-touch-icon.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/static/david/icons2/favicon-32x32.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/static/david/icons2/favicon-16x16.png">
+  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
+  <link rel="mask-icon"
+        href="/static/david/icons2/safari-pinned-tab.svg"
+        color="#07486c">
+  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
+  <meta name="msapplication-TileColor" content="#f7f7f7">
+  <meta name="msapplication-config"
+        content="/static/david/icons2/browserconfig.xml">
+  <meta name="theme-color"
+        content="#f7f7f7"
+        media="(prefers-color-scheme: light)">
+  <meta name="theme-color"
+        content="#272727"
+        media="(prefers-color-scheme: dark)">
+  <!-- Is that even respected? Retrospectively? What a shAItshow…
+  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
+  <meta name="robots" content="noai, noimageai">
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
+  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <script>
+    function toggleTheme(themeName) {
+      document.documentElement.classList.toggle(
+        'forced-dark',
+        themeName === 'dark'
+      )
+      document.documentElement.classList.toggle(
+        'forced-light',
+        themeName === 'light'
+      )
+    }
+    const selectedTheme = localStorage.getItem('theme')
+    if (selectedTheme !== 'undefined') {
+      toggleTheme(selectedTheme)
+    }
+  </script>
+  
+  <style type="text/css">
+    details[open] summary {
+      display: none;
+    }
+  </style>
+
+  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
+        data-instant-intensity="viewport-all">
+    
+  <header>
+    <h1>Publications relatives au tag #écriture</h1>
+  </header>
+  <nav>
+    <p class="center">
+      <a href="/david/" title="Aller à l’accueil">
+        <svg class="icon icon-home">
+          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
+        </svg>
+      Accueil</a>
+      • <a rel="tags"
+    href="/david/#tags-2023"
+    title="Liste de toutes les étiquettes">
+      <svg class="icon icon-tags">
+        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
+      </svg>
+    Étiquettes</a>
+  </p>
+</nav>
+<hr>
+<main>
+  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
+  
+    <h2>
+      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> (2024-01-03)
+    </h2>
+    
+      
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
+<p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
+<hr />
+
+<blockquote>
+<p><mark>Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.</mark> Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&nbsp;vie.</p>
+<p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
+</blockquote>
+<p>L’introduction de <em>Alors nous irons trouver la beauté ailleurs</em> par Corinne Morel Darleux m’aura suffit pour&nbsp;aujourd’hui&nbsp;🙂.</p>
+<hr />
+<p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense à été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
+<p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
+
+    
+  
+</main>
+
+    <hr>
+    <footer>
+      <p>
+        <nobr>
+          <a href="/david/" title="Aller à l’accueil">
+            <svg class="icon icon-home">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
+            </svg>
+          Accueil</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="/david/log/" title="Accès au flux RSS">
+            <svg class="icon icon-rss2">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+            </svg>
+          Suivre</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="http://larlet.com"
+             title="Go to my English profile"
+             data-instant>
+            <svg class="icon icon-user-tie">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+            </svg>
+          Pro</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
+            <svg class="icon icon-mail">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+            </svg>
+          Email</a>
+        </nobr>
+        •
+        <nobr>
+          <abbr class="nowrap"
+                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
+            <svg class="icon icon-hammer2">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+            </svg>
+          Légal</abbr>
+        </nobr>
+      </p>
+      <template id="theme-selector">
+        <form>
+          <fieldset>
+            <legend>
+              <svg class="icon icon-brightness-contrast">
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
+              </svg>
+              Thème
+            </legend>
+            <label>
+              <input type="radio" value="auto" name="chosen-color-scheme" checked>
+              Auto
+            </label>
+            <label>
+              <input type="radio" value="dark" name="chosen-color-scheme">
+              Foncé
+            </label>
+            <label>
+              <input type="radio" value="light" name="chosen-color-scheme">
+              Clair
+            </label>
+          </fieldset>
+        </form>
+      </template>
+    </footer>
+    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
+    <script>
+      function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+          const chosenColorScheme = e.target.value
+          localStorage.setItem('theme', chosenColorScheme)
+          toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme && selectedTheme !== 'undefined') {
+          form.querySelector(`[value="${selectedTheme}"]`).checked = true
+        }
+      }
+
+      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+      window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+          let mediaRules = []
+          for (const cssRule of styleSheet.cssRules) {
+            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+              continue
+            }
+            // WARNING: Safari does not have/supports `conditionText`.
+            if (cssRule.conditionText) {
+              if (cssRule.conditionText !== prefersColorSchemeDark) {
+                continue
+              }
+            } else {
+              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                continue
+              }
+            }
+            mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+          }
+
+          // WARNING: do not try to insert a Rule to a styleSheet you are
+          // currently iterating on, otherwise the browser will be stuck
+          // in a infinite loop…
+          for (const mediaRule of mediaRules) {
+            styleSheet.insertRule(mediaRule.cssText)
+            hasDarkRules = true
+          }
+        }
+        if (hasDarkRules) {
+          loadThemeForm('#theme-selector')
+        }
+      })
+    </script>
+    
+  </body>
+</html>

david/2024/experience/index.html

@@ -156,7 +156,7 @@
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />

david/2024/index.html

@@ -140,7 +140,8 @@
     <h3>Janvier 2024</h3>
     <p>
       <a href="/david/2024/01/01/">Dryear(s)</a>, 
-      <a href="/david/2024/01/02/">Fondations</a>.
+      <a href="/david/2024/01/02/">Fondations</a>, 
+      <a href="/david/2024/01/03/">Appariement</a>.
       
     </p>
   
@@ -151,11 +152,13 @@
       </svg>
     </h3>
     <p>
+      <a href="/david/2021/accompagnement/" rel="tag">#accompagnement (1)</a>
       <a href="/david/2021/addiction/" rel="tag">#addiction (1)</a>
+      <a href="/david/2021/ecriture/" rel="tag">#écriture (1)</a>
       <a href="/david/2021/experience/" rel="tag">#experience (2)</a>
       <a href="/david/2021/protopie/" rel="tag">#protopie (1)</a>
       <a href="/david/2021/technique/" rel="tag">#technique (1)</a>
-      <a href="/david/2021/web/" rel="tag">#web (1)</a>
+      <a href="/david/2021/web/" rel="tag">#web (2)</a>
       
     </p>
   

david/2024/technique/index.html

@@ -156,7 +156,7 @@
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />

david/2024/web/index.html

@@ -135,6 +135,28 @@
 <main>
   <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
   
+    <h2>
+      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> (2024-01-03)
+    </h2>
+    
+      
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
+<p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
+<hr />
+
+<blockquote>
+<p><mark>Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.</mark> Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&nbsp;vie.</p>
+<p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
+</blockquote>
+<p>L’introduction de <em>Alors nous irons trouver la beauté ailleurs</em> par Corinne Morel Darleux m’aura suffit pour&nbsp;aujourd’hui&nbsp;🙂.</p>
+<hr />
+<p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense à été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
+<p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
+
+    
+  
     <h2>
       <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> (2024-01-02)
     </h2>
@@ -156,7 +178,7 @@
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />

david/blogroll/index.html

@@ -174,6 +174,16 @@
     </nav>
     <p>N’hésitez pas à me contacter si vous ne souhaitez pas figurer dans cette liste.</p>
     <h2>Leurs dernières publications</h2>
+    <dl>
+        <dt>
+          <a href="https://www.la-grange.net/2024/01/02/ekiden">Une course après la course</a>,
+          02-01-2024
+        </dt>
+        <dd>
+          Tsujido, Japon, 2 janvier 2024 Et tout cela n'est que le fond de ce qui serait l'action de notre cœur qui surpasse le multiple dessin de ce silence plein d'inexprimable audace. — Vergers, Rainer Maria Rilke, urn:isbn:2-07-032165-7 Qu'est-ce qu'une course ? La course de Tokyo à Hakone est un parcours, une trace sur une carte, 100 km en cinq étapes, en montées et descentes, en virage et paysage.…
+          — <a href="https://www.la-grange.net/">Karl Dubost</a>
+        </dd>
+      </dl>
     <dl>
         <dt>
           <a href="https://www.la-grange.net/2024/01/01/prise">lâcher prise</a>,
@@ -424,16 +434,6 @@
           — <a href="https://brr.fyi/">brr (en)</a>
         </dd>
       </dl>
-    <dl>
-        <dt>
-          <a href="https://www.la-grange.net/2023/07/13/hnd">hnd, le matin</a>,
-          13-07-2023
-        </dt>
-        <dd>
-          Océan Pacifique, Japon, 13 juillet 2023 The image of the native constructed by colonialism has been an impediment to a profound and genuine understanding of native life. This as image, as we have shown earlier, is still influential today. — The Myth Of The Lazy Native, Syed Hussein Alatas, urn:isbn:978-967-0311-97-5 Le Japon au soleil levant, au dessus du Pacifique après une dizaine d'heures de…
-          — <a href="https://www.la-grange.net/">Karl Dubost</a>
-        </dd>
-      </dl>
     <dl>
         <dt>
           <a href="https://lalunemauve.fr/perlimpinpin/">Où je crache ma pastille Valda à propos d’Instagram</a>,

david/index.html

@@ -125,6 +125,7 @@
     <p>Liste des publications récentes en ordre anté-chronologique :</p>
     <nav>
       <p>
+        <a href="/david/2024/01/03/">Appariement</a>,
         <a href="/david/2024/01/02/">Fondations</a>,
         <a href="/david/2024/01/01/">Dryear(s)</a>.
           
@@ -134,11 +135,13 @@
     <p id="tags-2023">Ou par étiquettes :</p>
     <nav>
       <p>
+        <a href="/david/2023/accompagnement/" rel="tag">#accompagnement (1)</a>,
         <a href="/david/2023/addiction/" rel="tag">#addiction (1)</a>,
+        <a href="/david/2023/ecriture/" rel="tag">#écriture (1)</a>,
         <a href="/david/2023/experience/" rel="tag">#experience (2)</a>,
         <a href="/david/2023/protopie/" rel="tag">#protopie (1)</a>,
         <a href="/david/2023/technique/" rel="tag">#technique (1)</a>,
-        <a href="/david/2023/web/" rel="tag">#web (1)</a>.
+        <a href="/david/2023/web/" rel="tag">#web (2)</a>.
           
         
       </p>

david/log/index.xml

@@ -6,13 +6,36 @@
     <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
     <link href="https://larlet.fr/david/log/" rel="self" />
     <id>https://larlet.fr/david/</id>
-    <updated>2024-01-02T12:00:00+01:00</updated>
+    <updated>2024-01-03T12:00:00+01:00</updated>
     <author>
         <name>David Larlet</name>
         <uri>https://larlet.fr/david/</uri>
     </author>
     <rights>Copyright (c) 2004-2024, David Larlet</rights>
     
+        <entry xml:lang="fr">
+            <title type="html">Appariement</title>
+            <link href="https://larlet.fr/david/2024/01/03/" rel="alternate" type="text/html" />
+            <updated>2024-01-03T12:00:00+01:00</updated>
+            <id>https://larlet.fr/david/2024/01/03/</id>
+            <summary type="html">
+&lt;p&gt;Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera &lt;a href=&quot;https://mbtype.com/fonts/century-supra/&quot;&gt;Century Supra&lt;/a&gt; qui fera la paire avec &lt;a href=&quot;https://mbtype.com/fonts/concourse/&quot;&gt;Concourse&lt;/a&gt; pour du &lt;em&gt;sans serif&lt;/em&gt; (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&amp;nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&amp;nbsp;site.&lt;/p&gt;
+&lt;p&gt;Au niveau de la taille, j’ai enfin l’occasion de tester un &lt;a href=&quot;https://utopia.fyi/blog/css-modular-scales&quot;&gt;échelle modulaire&lt;/a&gt; et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&amp;nbsp;avec.&lt;/p&gt;
+&lt;p&gt;Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux &lt;em&gt;CSS&amp;nbsp;layers&lt;/em&gt; c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&amp;nbsp;sections.&lt;/p&gt;
+&lt;p&gt;Je m’amuse comme un petit fou même si la CSS fait subitement&amp;nbsp;350&amp;nbsp;lignes.&lt;/p&gt;
+&lt;hr /&gt;
+
+&lt;blockquote&gt;
+&lt;p&gt;&lt;mark&gt;Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.&lt;/mark&gt; Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&amp;nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&amp;nbsp;vie.&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;Journal 1947-1955&lt;/em&gt;, Anaïs&amp;nbsp;Nin&lt;/cite&gt;&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;L’introduction de &lt;em&gt;Alors nous irons trouver la beauté ailleurs&lt;/em&gt; par Corinne Morel Darleux m’aura suffit pour&amp;nbsp;aujourd’hui&amp;nbsp;🙂.&lt;/p&gt;
+&lt;hr /&gt;
+&lt;p&gt;On a couru 10&amp;#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&amp;#8239;! La récompense à été de croiser un renard urbain de vraiment très près, moins de 5&amp;nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&amp;nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&amp;nbsp;-6°C.&lt;/p&gt;
+&lt;p&gt;Tout ça pour aller chercher un bidon d’huile pour la transmission de la&amp;nbsp;voiture.&lt;/p&gt;
+&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/accompagnement/&quot;&gt;#accompagnement&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/ecriture/&quot;&gt;#écriture&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/web/&quot;&gt;#web&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
+        </entry>
+    
         <entry xml:lang="fr">
             <title type="html">Fondations</title>
             <link href="https://larlet.fr/david/2024/01/02/" rel="alternate" type="text/html" />
@@ -35,7 +58,7 @@
 
 &lt;blockquote&gt;
 &lt;p&gt;Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&amp;nbsp;rêves.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://www.la-grange.net/2023/07/10/notes-train&quot;&gt;notes&lt;/a&gt; par&amp;nbsp;Karl&lt;/cite&gt;&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2023/07/10/notes-train&quot;&gt;notes&lt;/a&gt;&lt;/em&gt; par&amp;nbsp;Karl&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;🧡&lt;/p&gt;
 &lt;hr /&gt;

david/recherche/index.html

@@ -276,6 +276,12 @@
     </template>
     
     <script id="search-index" type="application/json">[
+  {
+    "title": "Appariement",
+    "url": "/david/2024/01/03/",
+    "date": "2024-01-03",
+    "content": "Je me r\u00e9veille avec une envie d\u2019exp\u00e9rimentations typographiques. Apr\u00e8s une nuit de r\u00e9flexion, ce sera Century Supra qui fera la paire avec Concourse pour du sans serif (oui, je suis fan du travail de Matthew Butterick depuis tr\u00e8s longtemps). Il va falloir que je m\u2019habitue \u00e0 ce que mon \u00e9dition dans iA\u00a0Writer ne ressemble plus au rendu sur la pr\u00e9visualisation du\u00a0site. Au niveau de la taille, j\u2019ai enfin l\u2019occasion de tester un \u00e9chelle modulaire et c\u2019est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n\u2019en suis pas encore \u00e0 cette \u00e9tape. Je ne comprends pas encore tout \u00e0 fait la formule et j\u2019arrive \u00e0 vivre\u00a0avec. Je me rappelle aussi qu\u2019un des int\u00e9r\u00eats que j\u2019avais trouv\u00e9 aux CSS\u00a0layers c\u2019est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l\u2019it\u00e9ration d\u2019hier pour avoir une feuille d\u00e9di\u00e9e dont je commence \u00e0 documenter les diff\u00e9rentes\u00a0sections. Je m\u2019amuse comme un petit fou m\u00eame si la CSS fait subitement\u00a0350\u00a0lignes. Je crois qu\u2019on \u00e9crit pour cr\u00e9er un monde dans lequel on puisse vivre. Je ne pouvais vivre dans aucun de ceux qui m\u2019\u00e9taient propos\u00e9s\u00a0: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait cr\u00e9er un monde \u00e0 moi, comme un climat, un pays, une atmosph\u00e8re, o\u00f9 je puisse respirer, r\u00e9gner et me r\u00e9g\u00e9n\u00e9rer lorsque j\u2019\u00e9tais d\u00e9truite par la\u00a0vie. Journal 1947-1955, Ana\u00efs\u00a0Nin L\u2019introduction de Alors nous irons trouver la beaut\u00e9 ailleurs par Corinne Morel Darleux m\u2019aura suffit pour\u00a0aujourd\u2019hui\u00a0\ud83d\ude42. On a couru 10\u202fkm avec l\u2019enfant. \u00c0 ce rythme l\u00e0, je ne sais pas si je vais pouvoir suivre longtemps\u202f! La r\u00e9compense \u00e0 \u00e9t\u00e9 de croiser un renard urbain de vraiment tr\u00e8s pr\u00e8s, moins de 5\u00a0m\u00e8tres, que l\u2019on a bien eu le temps d\u2019observer vu qu\u2019il courrait vers nous. Par contre un flasque de plus de 10\u00a0ans s\u2019est perc\u00e9e dans ma poche pendant la course, j\u2019\u00e9tais bien tremp\u00e9 avec du vent. Il faisait\u00a0-6\u00b0C. Tout \u00e7a pour aller chercher un bidon d\u2019huile pour la transmission de la\u00a0voiture."
+  },
   {
     "title": "Fondations",
     "url": "/david/2024/01/02/",
@@ -288,6 +294,12 @@
     "date": "2024-01-01",
     "content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir."
   },
+  {
+    "title": "Appariement",
+    "url": "/david/2024/01/03/",
+    "date": "2024-01-03",
+    "content": "Je me r\u00e9veille avec une envie d\u2019exp\u00e9rimentations typographiques. Apr\u00e8s une nuit de r\u00e9flexion, ce sera Century Supra qui fera la paire avec Concourse pour du sans serif (oui, je suis fan du travail de Matthew Butterick depuis tr\u00e8s longtemps). Il va falloir que je m\u2019habitue \u00e0 ce que mon \u00e9dition dans iA\u00a0Writer ne ressemble plus au rendu sur la pr\u00e9visualisation du\u00a0site. Au niveau de la taille, j\u2019ai enfin l\u2019occasion de tester un \u00e9chelle modulaire et c\u2019est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n\u2019en suis pas encore \u00e0 cette \u00e9tape. Je ne comprends pas encore tout \u00e0 fait la formule et j\u2019arrive \u00e0 vivre\u00a0avec. Je me rappelle aussi qu\u2019un des int\u00e9r\u00eats que j\u2019avais trouv\u00e9 aux CSS\u00a0layers c\u2019est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l\u2019it\u00e9ration d\u2019hier pour avoir une feuille d\u00e9di\u00e9e dont je commence \u00e0 documenter les diff\u00e9rentes\u00a0sections. Je m\u2019amuse comme un petit fou m\u00eame si la CSS fait subitement\u00a0350\u00a0lignes. Je crois qu\u2019on \u00e9crit pour cr\u00e9er un monde dans lequel on puisse vivre. Je ne pouvais vivre dans aucun de ceux qui m\u2019\u00e9taient propos\u00e9s\u00a0: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait cr\u00e9er un monde \u00e0 moi, comme un climat, un pays, une atmosph\u00e8re, o\u00f9 je puisse respirer, r\u00e9gner et me r\u00e9g\u00e9n\u00e9rer lorsque j\u2019\u00e9tais d\u00e9truite par la\u00a0vie. Journal 1947-1955, Ana\u00efs\u00a0Nin L\u2019introduction de Alors nous irons trouver la beaut\u00e9 ailleurs par Corinne Morel Darleux m\u2019aura suffit pour\u00a0aujourd\u2019hui\u00a0\ud83d\ude42. On a couru 10\u202fkm avec l\u2019enfant. \u00c0 ce rythme l\u00e0, je ne sais pas si je vais pouvoir suivre longtemps\u202f! La r\u00e9compense \u00e0 \u00e9t\u00e9 de croiser un renard urbain de vraiment tr\u00e8s pr\u00e8s, moins de 5\u00a0m\u00e8tres, que l\u2019on a bien eu le temps d\u2019observer vu qu\u2019il courrait vers nous. Par contre un flasque de plus de 10\u00a0ans s\u2019est perc\u00e9e dans ma poche pendant la course, j\u2019\u00e9tais bien tremp\u00e9 avec du vent. Il faisait\u00a0-6\u00b0C. Tout \u00e7a pour aller chercher un bidon d\u2019huile pour la transmission de la\u00a0voiture."
+  },
   {
     "title": "Fondations",
     "url": "/david/2024/01/02/",

david/templates/base_2024.html

@@ -47,8 +47,8 @@
   <!-- Is that even respected? Retrospectively? What a shAItshow…
   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
-  <!-- Documented, feel free to shoot an email.
-  <link rel="stylesheet" href="/static/david/css/style_2024.css"> -->
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-03.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
   <link rel="preload"
         href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
@@ -86,104 +86,6 @@
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
         crossorigin> -->
-  <style type="text/css">
-    @layer reset, structure, typography, colors;
-
-    @layer reset {
-      *, *::before, *::after {
-        box-sizing: border-box;
-      }
-      body {
-        line-height: 1.5;
-        margin: 0;
-      }
-      img, picture, video {
-        display: block;
-        max-width: 100%;
-        height: auto;
-        vertical-align: middle;
-      }
-      input, button, textarea, select {
-        font: inherit;
-      }
-      h1, h2, h3, h4, button, input, label {
-        line-height: 1.1;
-      }
-    }
-
-    @layer structure {
-      hgroup, nav, figcaption, footer {
-        text-align: center;
-      }
-      hgroup > :not(:first-child):last-child {
-        color: #474747;
-        font-size: 1rem;
-        margin: 0;
-      }
-      h1 {
-        margin-block-start: 4rem;
-        margin-block-end: 0;
-      }
-      hr {
-        min-width: 5%;
-      }
-      article {
-        display: grid;
-        grid-template-columns:
-          1fr
-          min(65ch, calc(100% - 64px))
-          1fr;
-        grid-column-gap: 32px;
-      }
-      article > * {
-        grid-column: 2;
-      }
-      article > * + * {
-        margin-block-start: 1.5rem;
-      }
-      blockquote {
-        margin: 0;
-        width: 100%;
-        grid-column: 1 / 4;
-        display: grid;
-        grid-template-columns:
-          1fr
-          min(65ch, calc(100% - 64px))
-          1fr;
-        grid-column-gap: 32px;
-      }
-      blockquote > * {
-        grid-column: 2;
-      }
-      blockquote cite {
-        display: block;
-        text-align: right;
-      }
-      figure {
-        margin: 0 auto;
-        width: 65%;
-        grid-column: 1 / 4;
-      }
-    }
-
-    @layer typography {
-      body {
-        font-size: 130%;
-      }
-    }
-
-    @layer colors {
-      body {
-        background-color: #fefefe;
-        color: #2f343d;
-      }
-      blockquote {
-        background-color: #FBEDF4;
-        border-top: 1px solid #FA9ACF;
-        border-bottom: 1px solid #FA9ACF;
-      }
-    }
-  </style>
   <script>
     function toggleTheme(themeName) {
       document.documentElement.classList.toggle(

site.py

@@ -454,7 +454,7 @@ class Website:
         elapsed = perf_counter() - start
         entries = content.get("entries")
         print(f"Fetched {self.feed} in {elapsed:.5f} seconds.")
-        print(f"Content size: {len(pickle.dumps(content))}, {len(entries)} entries.")
+        print(f"{len(entries)} entries.")
 
         date_key_parsed = (
             "published_parsed" if "published_parsed" in entries[0] else "updated_parsed"