Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Jour 2 — David Larlet</title>
  13. <meta name="description" content="Ce désir de dormir est pour une large part une forme de régression, une volonté de retourner à l’enfance et d’être libéré de la charge de tension liée au fait de grandir et de devoir assumer de nouvelles responsabilités. Les contraintes d’identité deviennent trop lourdes à porter et elles appellent un soulagement symbolique. Une recherche d’effacement provisoire surtout quand le jeune peine à se construire.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Jour 2</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/04/16/" title="Publication précédente : Jour 1">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/04/18/" title="Publication suivante : Jour 3">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote>
  68. <p>Ce désir de dormir est pour une large part une forme de régression, une volonté de retourner à l’enfance et d’être libéré de la charge de tension liée au fait de grandir et de devoir assumer de nouvelles responsabilités. Les contraintes d’identité deviennent trop lourdes à porter et elles appellent un soulagement symbolique. Une recherche d’effacement provisoire surtout quand le jeune peine à se construire.</p>
  69. <p><cite><em>Disparaître de soi</em>, David Le Breton</cite></p>
  70. </blockquote>
  71. <p>La nuit a été en pente mais surtout bruyante dès 4&nbsp;heures du matin, au printemps tous les oiseaux s’en donnent à cœur joie&nbsp;: des bernaches aux huards, en passant par les canards et les pics en tout genre. Le bon côté c’est que ça me motive pour sortir du duvet et apprécier la lumière du matin. Au programme de la journée&nbsp;: continuer mon exploration en laissant au campement ce qui m’est moins utile.</p>
  72. <p>Je poursuis mon tour de lac et ça devient de plus en plus sauvage, je finis par arriver à un emplacement encore plus chouette que le précédent, joie&#8239;! Je retourne chercher toutes mes affaires avec le sourire. Un aller-retour plus tard, j’ai moins le sourire car je me rends compte qu’un pseudo-confinement d’une année ça laisse des muscles relativement atrophiés (c’est pas du tout le fait de se trimbaler un sac de plus de 18&nbsp;kilos à crapahuter entre les troncs d’arbres abattus par l’hiver). Le bon côté de la chose c’est qu’arrivé là, les (mal)chances que je croise quelqu’un sont assez minimes. J’apprécie à sa juste valeur ce moment.</p>
  73. <p>C’est aussi l’endroit parfait pour une <a href="/david/2021/03/30/" title="Timelapse">timelapse</a> de soleil couchant sur le lac ou de ciel étoilé… si j’avais encore de l’énergie dans ma seconde — et dernière — batterie&#8239;! Heureusement, le ciel est tellement bouché que je ne vais pas être trop frustré. Je songe un instant à forcer un connecteur USB-C dans un micro-USB et je m’en vais méditer là-dessus en faisant une sieste dans le hamac.</p>
  74. <p>Je termine la journée sans penser à faire des vidéos et en me focalisant sur cet instant, j’explore encore un peu la suite du tour du lac qui n’est plus du tout balisé, si ce n’est par les chemins de biches. Cela fait mûrir un projet de périple <em>packrafting</em> en enchaînant une boucle sur plusieurs lacs. J’essaye de ne pas trop analyser ce sentiment de libération de ne plus avoir à faire des vidéos.</p>
  75. <p>Le coucher de soleil est moche et il fait froid mais je suis content d’avoir cuisiné une nouvelle recette tout en contemplant le ballet des castors. Je m’endors en me demandant pourquoi ce monde est toujours en pente. Peut-être pour que l’on ait conscience qu’il faille s’y accrocher&#8239;?</p>
  76. <p><strong>Il est où le bouton pause de mon cerveau&#8239;?</strong></p>
  77. <nav>
  78. <p class="center">
  79. <a rel="prev" href="/david/2021/04/16/" title="Publication précédente : Jour 1">← Précédent</a> •
  80. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  81. • <a rel="next" href="/david/2021/04/18/" title="Publication suivante : Jour 3">Suivant →</a>
  82. </p>
  83. </nav>
  84. </article>
  85. <hr>
  86. <footer>
  87. <p>
  88. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  89. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  90. </svg> Accueil</a> •
  91. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  92. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  93. </svg> Suivre</a> •
  94. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  95. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  96. </svg> Pro</a> •
  97. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  98. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  99. </svg> Email</a> •
  100. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  101. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  102. </svg> Légal</abbr>
  103. </p>
  104. <template id="theme-selector">
  105. <form>
  106. <fieldset>
  107. <legend><svg class="icon icon-brightness-contrast">
  108. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  109. </svg> Thème</legend>
  110. <label>
  111. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  112. </label>
  113. <label>
  114. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  115. </label>
  116. <label>
  117. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  118. </label>
  119. </fieldset>
  120. </form>
  121. </template>
  122. </footer>
  123. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  124. <script>
  125. function loadThemeForm(templateName) {
  126. const themeSelectorTemplate = document.querySelector(templateName)
  127. const form = themeSelectorTemplate.content.firstElementChild
  128. themeSelectorTemplate.replaceWith(form)
  129. form.addEventListener('change', (e) => {
  130. const chosenColorScheme = e.target.value
  131. localStorage.setItem('theme', chosenColorScheme)
  132. toggleTheme(chosenColorScheme)
  133. })
  134. const selectedTheme = localStorage.getItem('theme')
  135. if (selectedTheme && selectedTheme !== 'undefined') {
  136. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  137. }
  138. }
  139. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  140. window.addEventListener('load', () => {
  141. let hasDarkRules = false
  142. for (const styleSheet of Array.from(document.styleSheets)) {
  143. let mediaRules = []
  144. for (const cssRule of styleSheet.cssRules) {
  145. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  146. continue
  147. }
  148. // WARNING: Safari does not have/supports `conditionText`.
  149. if (cssRule.conditionText) {
  150. if (cssRule.conditionText !== prefersColorSchemeDark) {
  151. continue
  152. }
  153. } else {
  154. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  155. continue
  156. }
  157. }
  158. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  159. }
  160. // WARNING: do not try to insert a Rule to a styleSheet you are
  161. // currently iterating on, otherwise the browser will be stuck
  162. // in a infinite loop…
  163. for (const mediaRule of mediaRules) {
  164. styleSheet.insertRule(mediaRule.cssText)
  165. hasDarkRules = true
  166. }
  167. }
  168. if (hasDarkRules) {
  169. loadThemeForm('#theme-selector')
  170. }
  171. })
  172. </script>
  173. </body>
  174. </html>