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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  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="Le vrai journal est écrit dans la mer et dans le ciel, on ne peut pas le photographier pour le donner aux autres. Il est né peu à peu de tout ce qui nous entoure depuis des mois, les bruits de l’eau sur la carène, les bruits du vent qui glisse sur les voiles, les silences pleins de choses secrètes entre mon bateau et moi, comme lorsque j’écoutais parler la forêt quand j’étais gosse.">
  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/11/21/" 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. </p>
  64. </nav>
  65. <hr>
  66. <blockquote>
  67. <p>Le vrai journal est écrit dans la mer et dans le ciel, <mark>on ne peut pas le photographier</mark> pour le donner aux autres. Il est né peu à peu de tout ce qui nous entoure depuis des mois, les bruits de l’eau sur la carène, les bruits du vent qui glisse sur les voiles, les silences pleins de choses secrètes entre mon bateau et moi, comme lorsque j’écoutais parler la forêt quand j’étais gosse.</p>
  68. <p><cite><em>La longue route</em>, Bernard Moitessier</cite></p>
  69. </blockquote>
  70. <p>Je me suis réveillé 5&nbsp;fois dans la nuit. Ce n’était pas pour vérifier le pilote automatique du voilier mais pour remettre une bûche dans le poêle. À chaque milieu ses contraintes… et son manque de sommeil. Cela m’a permis de dormir en t-shirt, la prochaine fois je m’abstiendrai de porter un duvet pour ce refuge dont le poêle est surdimensionné… mais qu’il faut tout de même alimenter en continu pour éviter qu’il ne s’éteigne&#8239;!</p>
  71. <p>J’attends que la pleige (sorte de neige très liquide) s’arrête pour quitter le refuge. Je démarre sous le soleil <em>et</em> la grêle. #Canada</p>
  72. <figure>
  73. <a href="#ouareau-chemin-neige"
  74. title="Cliquer pour une version haute résolution">
  75. <img src="/static/david/2021/ouareau-chemin-neige.jpg" alt="Un chemin, sous la neige."
  76. loading="lazy" width="2048" height="1536" />
  77. </a>
  78. <a href="#_" class="lightbox" id="ouareau-chemin-neige">
  79. <img src="/static/david/2021/ouareau-chemin-neige.jpg" alt="Un chemin, sous la neige."
  80. loading="lazy" width="2048" height="1536" />
  81. </a>
  82. <figcaption>Pas de meilleure motivation que le soleil pour arriver en haut d’une crête !</figcaption>
  83. </figure>
  84. <p>J’ai prévu de faire une longue crête et je me rappelle aussi qu’il me restait à explorer un lac en contrebas, de l’autre côté, où j’espère trouver un emplacement pour de nouvelles aventures. Mes efforts sont récompensés car il y a effectivement de quoi mettre une tente et/ou un hamac. Il y a même une sorte de cuvette aménagée pour pouvoir faire trempette sur le petit cours d’eau à côté. Limite du <em>glamping</em>. Je suis joie.</p>
  85. <figure>
  86. <a href="#ouareau-lac-braque"
  87. title="Cliquer pour une version haute résolution">
  88. <img src="/static/david/2021/ouareau-lac-braque.jpg" alt="Lac braque, gelé avec son barrage de castor au premier plan."
  89. loading="lazy" width="1536" height="2048" />
  90. </a>
  91. <a href="#_" class="lightbox" id="ouareau-lac-braque">
  92. <img src="/static/david/2021/ouareau-lac-braque.jpg" alt="Lac braque, gelé avec son barrage de castor au premier plan."
  93. loading="lazy" width="1536" height="2048" />
  94. </a>
  95. <figcaption>Pour le moment, il faut creuser si on veut pouvoir se baigner.</figcaption>
  96. </figure>
  97. <p>Je remonte sur la crête et avec le vent ça commence à crouter sévère. Le soleil se voile et la température chute, je dois absolument redescendre de l’autre côté avant que ça devienne ingérable. Je prends un raccourci. Le ruisseau aussi et j’ai rapidement les pieds trempés. Heureusement qu’il ne fait que -5°C mais ce n’est pas le moment de se faire mal. Je rejoins une piste de ski de fond qui me permet d’augmenter la cadence et de me réchauffer.</p>
  98. <figure>
  99. <a href="#ouareau-point-de-vue"
  100. title="Cliquer pour une version haute résolution">
  101. <img src="/static/david/2021/ouareau-point-de-vue.jpg" alt="Point de vue depuis la crête."
  102. loading="lazy" width="2048" height="1536" />
  103. </a>
  104. <a href="#_" class="lightbox" id="ouareau-point-de-vue">
  105. <img src="/static/david/2021/ouareau-point-de-vue.jpg" alt="Point de vue depuis la crête."
  106. loading="lazy" width="2048" height="1536" />
  107. </a>
  108. <figcaption>J’espère dormir un jour sur cet à plat en contrebas. #YouDidNotSleepThere</figcaption>
  109. </figure>
  110. <p>J’arrive à un abri où j’envisageais initialement de passer la nuit. Je me fais une soupe miso pour me réchauffer de l’intérieur, il faudrait que je change au moins de chaussettes. Je suis rejoins par deux personnes qui vont y dormir cette nuit, ce seront mes seules rencontres ce jour. Elles ont l’air contentes d’être là, moi aussi.</p>
  111. <blockquote>
  112. <p>Assis sur la chaise du poste de pilotage intérieur, je regarde l’eau phosphorescente à travers les hublots de la coupole qui protège des déferlantes et m’en rapproche. Je suis presque arrivé au tournant de ma route. Je sais, depuis l’océan Indien, que je ne veux plus rentrer là-bas.</p>
  113. <p>[…]</p>
  114. <p>Et jusqu’au Horn, ne pas regarder autre chose que mon bateau, petite planète rouge et blanc faite d’espace, d’air pur, d’étoiles, de nuages et de liberté dans son sens le plus profond, le plus naturel. Et oublier totalement la Terre, ses villes impitoyables, ses foules sans regard et sa soif d’un rythme d’existence dénué de sens. Là-bas… si un marchant pouvait éteindre les étoiles pour que ses panneaux publicitaires se voient mieux dans la nuit, peut-être le ferait-il&#8239;! <mark>Oublier tout ça.</mark></p>
  115. <p>Ne vivre qu’avec la mer et mon bateau, pour la mer et pour mon bateau.</p>
  116. <p><cite><em>Ibid.</em></cite></p>
  117. </blockquote>
  118. <nav>
  119. <p class="center">
  120. <a rel="prev" href="/david/2021/11/21/" title="Publication précédente : Jour 1">← Précédent</a> •
  121. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  122. </p>
  123. </nav>
  124. </article>
  125. <hr>
  126. <footer>
  127. <p>
  128. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  129. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  130. </svg> Accueil</a> •
  131. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  132. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  133. </svg> Suivre</a> •
  134. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  135. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  136. </svg> Pro</a> •
  137. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  138. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  139. </svg> Email</a> •
  140. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  141. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  142. </svg> Légal</abbr>
  143. </p>
  144. <template id="theme-selector">
  145. <form>
  146. <fieldset>
  147. <legend><svg class="icon icon-brightness-contrast">
  148. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  149. </svg> Thème</legend>
  150. <label>
  151. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  152. </label>
  153. <label>
  154. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  155. </label>
  156. <label>
  157. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  158. </label>
  159. </fieldset>
  160. </form>
  161. </template>
  162. </footer>
  163. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  164. <script>
  165. function loadThemeForm(templateName) {
  166. const themeSelectorTemplate = document.querySelector(templateName)
  167. const form = themeSelectorTemplate.content.firstElementChild
  168. themeSelectorTemplate.replaceWith(form)
  169. form.addEventListener('change', (e) => {
  170. const chosenColorScheme = e.target.value
  171. localStorage.setItem('theme', chosenColorScheme)
  172. toggleTheme(chosenColorScheme)
  173. })
  174. const selectedTheme = localStorage.getItem('theme')
  175. if (selectedTheme && selectedTheme !== 'undefined') {
  176. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  177. }
  178. }
  179. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  180. window.addEventListener('load', () => {
  181. let hasDarkRules = false
  182. for (const styleSheet of Array.from(document.styleSheets)) {
  183. let mediaRules = []
  184. for (const cssRule of styleSheet.cssRules) {
  185. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  186. continue
  187. }
  188. // WARNING: Safari does not have/supports `conditionText`.
  189. if (cssRule.conditionText) {
  190. if (cssRule.conditionText !== prefersColorSchemeDark) {
  191. continue
  192. }
  193. } else {
  194. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  195. continue
  196. }
  197. }
  198. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  199. }
  200. // WARNING: do not try to insert a Rule to a styleSheet you are
  201. // currently iterating on, otherwise the browser will be stuck
  202. // in a infinite loop…
  203. for (const mediaRule of mediaRules) {
  204. styleSheet.insertRule(mediaRule.cssText)
  205. hasDarkRules = true
  206. }
  207. }
  208. if (hasDarkRules) {
  209. loadThemeForm('#theme-selector')
  210. }
  211. })
  212. </script>
  213. </body>
  214. </html>