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 14KB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  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 1 — David Larlet</title>
  13. <meta name="description" content="Je commence à comprendre que c’est moi qu’il faudrait aussi protéger de cette caméra.">
  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 1</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/11/20/" title="Publication précédente : Hypertélie">← 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-2021-12.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/11/22/" title="Publication suivante : Jour 2">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote>
  68. <p>Je commence à comprendre que c’est moi qu’il faudrait aussi protéger de cette caméra.</p>
  69. <p>Au début, je croyais qu’il suffisait d’appuyer sur le déclencheur après avoir réglé l’objectif. Ce n’est pas du tout ça. Il faut y mettre quelque chose d’autre, dans cette caméra. Elle essaye maintenant de me bouffer les tripes.</p>
  70. <p><cite><em>La longue route</em>, Bernard Moitessier</cite></p>
  71. </blockquote>
  72. <p>Cette sortie a été <a href="/david/2021/11/13/" title="Frustration">plusieurs fois décalée</a>, aussi j’essaye d’assurer le coup en me tenant éloigné des <a href="/david/2021/10/10/" title="Jour 1">chasseurs</a>. Je retourne dans un refuge que <a href="/david/stream/2019/01/18/">je connais</a> <a href="/david/stream/2019/09/17/">bien</a> en passant par de nouveaux chemins. Et je laisse la caméra à la maison.</p>
  73. <p>Dès les premiers mètres, je sais déjà que je n’ai pas les chaussures appropriées&nbsp;: ça glisse et c’est très humide, j’ai des chaussures basses, plutôt lisses et pas super étanche. J’ai déjà été dans cette situation, il faut croire qu’il est difficile d’apprendre de ses erreurs. Je persévère et je suis récompensé, passés les premiers kilomètres plus populaires je me retrouve dans une trace fraîche qui est beaucoup plus praticable.</p>
  74. <p>Ce n’est pas la première fois que je remarque que l’hiver ce sont les infrastructures et les activités humaines qui rendent la forêt plus dangereuse (glissades, décrochages, infrastructures, machines, etc).</p>
  75. <figure>
  76. <a href="#ouareau-lac-corbeau"
  77. title="Cliquer pour une version haute résolution">
  78. <img src="/static/david/2021/ouareau-lac-corbeau.jpg" alt="Le lac corbeau, gelé."
  79. loading="lazy" width="2048" height="1536" />
  80. </a>
  81. <a href="#_" class="lightbox" id="ouareau-lac-corbeau">
  82. <img src="/static/david/2021/ouareau-lac-corbeau.jpg" alt="Le lac corbeau, gelé."
  83. loading="lazy" width="2048" height="1536" />
  84. </a>
  85. <figcaption>Je suis surpris que les lacs soient déjà gelés, ça va encore être galère de trouver de l’eau liquide…</figcaption>
  86. </figure>
  87. <p>Je fais un long périple en acceptant le côté glissant de mon pas, me revoilà sur <a href="/david/2020/12/18/">Arrakice</a> avec sa démarche bien particulière pour ne pas attirer l’hiver… (rires). À force de trop glisser en descente, j’ai la malléole qui tape un tronc et ça pique pas mal, sans compter les adducteurs qui commencent à souffrir. Je ne suis pas mécontent d’arriver au refuge après une quinzaine de kilomètres.</p>
  88. <figure>
  89. <a href="#ouareau-lac-corbeau-point-de-vue"
  90. title="Cliquer pour une version haute résolution">
  91. <img src="/static/david/2021/ouareau-lac-corbeau-point-de-vue.jpg" alt="Le lac corbeau, vu de haut."
  92. loading="lazy" width="2048" height="1536" />
  93. </a>
  94. <a href="#_" class="lightbox" id="ouareau-lac-corbeau-point-de-vue">
  95. <img src="/static/david/2021/ouareau-lac-corbeau-point-de-vue.jpg" alt="Le lac corbeau, vu de haut."
  96. loading="lazy" width="2048" height="1536" />
  97. </a>
  98. <figcaption>C’est bien la peine d’avoir pris une bonne suée !</figcaption>
  99. </figure>
  100. <p>Je n’ai croisé personne mais j’ai eu beaucoup de notifications qui sont venues étirer mes pensées. Je me mets en mode avion et je monte à bord du <em>Joshua</em>. J’ai l’impression de partager une partie de cette (longue) route avec la neige qui fouette les vitres telle des embruns et des préoccupations autour de la récupération de l’eau potable.</p>
  101. <blockquote>
  102. <p>Pourtant, c’est une carte bien lourde à porter, ce besoin de rassurer la famille et les amis, de leur donner des nouvelles, des images, de la vie, de leur transmettre ce quelque chose d’infiniment précieux, cette petite plante invisible qui s’appelle l’espoir. La raison me crie de jouer seul, seul, sans m’encombrer des autres. […]</p>
  103. <p>Mais une autre voix insiste depuis plusieurs jours&nbsp;: <em>«&nbsp;Tu es seul, pourtant tu n’es pas seul, les autres ont besoin de toi et tu as besoin d’eux. Sans eux, tu n’arriverais nulle part et rien ne serait vrai.&nbsp;»</em></p>
  104. <p><cite><em>Ibid.</em></cite></p>
  105. </blockquote>
  106. <hr />
  107. <p>J’ai beaucoup de gratitude pour Isabelle Attard qui cite cet ouvrage dans <a href="/david/2020/12/21/#comment-je-suis-devenue-anarchiste">son livre</a> et qui m’a motivé pour l’emprunter à la bibliothèque ainsi que pour <a href="https://oncletom.io/">Thomas</a> qui m’a indirectement incité à amener de la lecture en forêt.</p>
  108. <p><em>Il y a des poids qui allègent.</em></p>
  109. <nav>
  110. <p>
  111. <a href="/david/2021/foret/"
  112. title="Liste de tous les articles associés à cette étiquette"
  113. >#forêt</a>
  114. <a href="/david/2021/gratitude/"
  115. title="Liste de tous les articles associés à cette étiquette"
  116. >#gratitude</a>
  117. <a href="/david/2021/lecture/"
  118. title="Liste de tous les articles associés à cette étiquette"
  119. >#lecture</a>
  120. <a href="/david/#tags"
  121. title="Liste de toutes les étiquettes existantes"
  122. ><svg class="icon icon-tags">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  124. </svg> tous ?</a>
  125. </p>
  126. </nav>
  127. <nav>
  128. <p class="center">
  129. <a rel="prev" href="/david/2021/11/20/" title="Publication précédente : Hypertélie">← Précédent</a> •
  130. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  131. • <a rel="next" href="/david/2021/11/22/" title="Publication suivante : Jour 2">Suivant →</a>
  132. </p>
  133. </nav>
  134. </article>
  135. <hr>
  136. <footer>
  137. <p>
  138. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  139. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  140. </svg> Accueil</a> •
  141. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  142. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  143. </svg> Suivre</a> •
  144. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  145. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  146. </svg> Pro</a> •
  147. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  148. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  149. </svg> Email</a> •
  150. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  151. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  152. </svg> Légal</abbr>
  153. </p>
  154. <template id="theme-selector">
  155. <form>
  156. <fieldset>
  157. <legend><svg class="icon icon-brightness-contrast">
  158. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  159. </svg> Thème</legend>
  160. <label>
  161. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  162. </label>
  163. <label>
  164. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  165. </label>
  166. <label>
  167. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  168. </label>
  169. </fieldset>
  170. </form>
  171. </template>
  172. </footer>
  173. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  174. <script>
  175. function loadThemeForm(templateName) {
  176. const themeSelectorTemplate = document.querySelector(templateName)
  177. const form = themeSelectorTemplate.content.firstElementChild
  178. themeSelectorTemplate.replaceWith(form)
  179. form.addEventListener('change', (e) => {
  180. const chosenColorScheme = e.target.value
  181. localStorage.setItem('theme', chosenColorScheme)
  182. toggleTheme(chosenColorScheme)
  183. })
  184. const selectedTheme = localStorage.getItem('theme')
  185. if (selectedTheme && selectedTheme !== 'undefined') {
  186. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  187. }
  188. }
  189. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  190. window.addEventListener('load', () => {
  191. let hasDarkRules = false
  192. for (const styleSheet of Array.from(document.styleSheets)) {
  193. let mediaRules = []
  194. for (const cssRule of styleSheet.cssRules) {
  195. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  196. continue
  197. }
  198. // WARNING: Safari does not have/supports `conditionText`.
  199. if (cssRule.conditionText) {
  200. if (cssRule.conditionText !== prefersColorSchemeDark) {
  201. continue
  202. }
  203. } else {
  204. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  205. continue
  206. }
  207. }
  208. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  209. }
  210. // WARNING: do not try to insert a Rule to a styleSheet you are
  211. // currently iterating on, otherwise the browser will be stuck
  212. // in a infinite loop…
  213. for (const mediaRule of mediaRules) {
  214. styleSheet.insertRule(mediaRule.cssText)
  215. hasDarkRules = true
  216. }
  217. }
  218. if (hasDarkRules) {
  219. loadThemeForm('#theme-selector')
  220. }
  221. })
  222. </script>
  223. </body>
  224. </html>