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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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="La nuit a été courte mais reposante. L’option de mettre un matelas dans le hamac semble être la bonne, il faudra que j’essaye dans des conditions plus fraîches. Mes précédentes tentatives m’on montré qu’un underquilt n’est pas forcément adapté à cette forme. J’arrive à dormir sur le côté mais la transition reste toujours un peu stressante et hasardeuse surtout qu’il faut maintenant gérer le matelas qui glisse.">
  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/08/24/" 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/08/26/" title="Publication suivante : Ambivalence">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <p>La nuit a été courte mais reposante. L’option de mettre un matelas dans le hamac semble être la bonne, il faudra que j’essaye dans des conditions plus fraîches. Mes précédentes tentatives m’on montré qu’un <em>underquilt</em> n’est pas forcément adapté à cette forme. J’arrive à dormir sur le côté mais la transition reste toujours un peu stressante et hasardeuse surtout qu’il faut maintenant gérer le matelas qui glisse.</p>
  68. <p>Après un bon petit déjeuner, je pars pour un long périple de nage en solo pour aller explorer une île. J’essaye toujours d’en profiter pour imaginer des bivouacs hivernaux lorsque les lacs sont gelés. Mes efforts sont récompensés car il y a bien un emplacement possible à l’extrémité non visible. Ça pourrait aussi être un endroit propice à un accès en raft.</p>
  69. <figure>
  70. <a href="#lac-ours"
  71. title="Cliquer pour une version haute résolution">
  72. <img src="/static/david/2021/lac-ours.jpg" alt="Vue sur le Lac à l’Ours."
  73. loading="lazy" width="2048" height="1536" />
  74. </a>
  75. <a href="#_" class="lightbox" id="lac-ours">
  76. <img src="/static/david/2021/lac-ours.jpg" alt="Vue sur le Lac à l’Ours."
  77. loading="lazy" width="2048" height="1536" />
  78. </a>
  79. <figcaption>C’est toujours un peu difficile d’apprécier les distances sur l’eau, j’essaye de rester prudent, surtout que je suis moins entraîné qu’avant…</figcaption>
  80. </figure>
  81. <p>Alors que je m’apprête à revenir par le même chemin (environ 300&nbsp;mètres), la famille huard me fait comprendre bruyamment que je les dérange(/surprend&#8239;?) en nageant sur cette section du lac. J’attends que les parents et leurs deux enfants soient passés pour faire le retour. Je ne suis pas pressé.</p>
  82. <p>Ironiquement, <a href="https://nrkn.fr/">Pep</a> m’envoie <strong>presque</strong> <a href="https://www.quantamagazine.org/math-can-in-theory-help-you-escape-a-hungry-bear-20210825/">un article à ce sujet</a> (<a href="/david/cache/2021/fd729cfc00ad9115213b7b4cbe9508e8/">cache</a>) le jour même&nbsp;:-).</p>
  83. <p>Le deuxième jour est moins intense en terme de dénivelé, on passe par les chemins de quads/ATV pour faire la jonction avec un autre lac. Là aussi, il s’agit de parfaire mon exploration des lieux car j’ai d’autres projets de <em>packrafting</em> itinérant à cet endroit. D’une certaine manière, ça fait le lien entre les lieux de tournage de <a href="/david/2021/02/24/" title="Précipitation">Précipitation</a> et de <a href="/david/2021/04/23/" title="Contemplation">Contemplation</a>. À chaque lac sa saison.</p>
  84. <figure>
  85. <a href="#lac-key"
  86. title="Cliquer pour une version haute résolution">
  87. <img src="/static/david/2021/lac-key.jpg" alt="Vue sur le Lac Key."
  88. loading="lazy" width="1536" height="2048" />
  89. </a>
  90. <a href="#_" class="lightbox" id="lac-key">
  91. <img src="/static/david/2021/lac-key.jpg" alt="Vue sur le Lac Key."
  92. loading="lazy" width="1536" height="2048" />
  93. </a>
  94. <figcaption>Les photos à l’iPhone ne permettent pas de distinguer les sangsues, ce qui n’est peut-être pas si mal finalement.</figcaption>
  95. </figure>
  96. <p>Le retour est long (et piquant&#8239;!) pour arriver jusqu’au <a href="/david/2021/07/16/" title="Char">char</a>, puis long (et embouteillant&#8239;!) pour arriver jusqu’à la canicule montréalaise. On n’en revient pas moins avec le sourire d’avoir exploré de nouveaux espaces, ensemble.</p>
  97. <nav>
  98. <p class="center">
  99. <a rel="prev" href="/david/2021/08/24/" title="Publication précédente : Jour 1">← Précédent</a> •
  100. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  101. • <a rel="next" href="/david/2021/08/26/" title="Publication suivante : Ambivalence">Suivant →</a>
  102. </p>
  103. </nav>
  104. </article>
  105. <hr>
  106. <footer>
  107. <p>
  108. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  109. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  110. </svg> Accueil</a> •
  111. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  112. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  113. </svg> Suivre</a> •
  114. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  115. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  116. </svg> Pro</a> •
  117. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  118. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  119. </svg> Email</a> •
  120. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  121. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  122. </svg> Légal</abbr>
  123. </p>
  124. <template id="theme-selector">
  125. <form>
  126. <fieldset>
  127. <legend><svg class="icon icon-brightness-contrast">
  128. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  129. </svg> Thème</legend>
  130. <label>
  131. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  132. </label>
  133. <label>
  134. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  135. </label>
  136. <label>
  137. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  138. </label>
  139. </fieldset>
  140. </form>
  141. </template>
  142. </footer>
  143. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  144. <script>
  145. function loadThemeForm(templateName) {
  146. const themeSelectorTemplate = document.querySelector(templateName)
  147. const form = themeSelectorTemplate.content.firstElementChild
  148. themeSelectorTemplate.replaceWith(form)
  149. form.addEventListener('change', (e) => {
  150. const chosenColorScheme = e.target.value
  151. localStorage.setItem('theme', chosenColorScheme)
  152. toggleTheme(chosenColorScheme)
  153. })
  154. const selectedTheme = localStorage.getItem('theme')
  155. if (selectedTheme && selectedTheme !== 'undefined') {
  156. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  157. }
  158. }
  159. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  160. window.addEventListener('load', () => {
  161. let hasDarkRules = false
  162. for (const styleSheet of Array.from(document.styleSheets)) {
  163. let mediaRules = []
  164. for (const cssRule of styleSheet.cssRules) {
  165. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  166. continue
  167. }
  168. // WARNING: Safari does not have/supports `conditionText`.
  169. if (cssRule.conditionText) {
  170. if (cssRule.conditionText !== prefersColorSchemeDark) {
  171. continue
  172. }
  173. } else {
  174. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  175. continue
  176. }
  177. }
  178. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  179. }
  180. // WARNING: do not try to insert a Rule to a styleSheet you are
  181. // currently iterating on, otherwise the browser will be stuck
  182. // in a infinite loop…
  183. for (const mediaRule of mediaRules) {
  184. styleSheet.insertRule(mediaRule.cssText)
  185. hasDarkRules = true
  186. }
  187. }
  188. if (hasDarkRules) {
  189. loadThemeForm('#theme-selector')
  190. }
  191. })
  192. </script>
  193. </body>
  194. </html>