Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  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-2021-12.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>
  99. <a href="/david/2021/accompagnement/"
  100. title="Liste de tous les articles associés à cette étiquette"
  101. >#accompagnement</a>
  102. <a href="/david/2021/foret/"
  103. title="Liste de tous les articles associés à cette étiquette"
  104. >#forêt</a>
  105. <a href="/david/#tags"
  106. title="Liste de toutes les étiquettes existantes"
  107. ><svg class="icon icon-tags">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  109. </svg> tous ?</a>
  110. </p>
  111. </nav>
  112. <nav>
  113. <p class="center">
  114. <a rel="prev" href="/david/2021/08/24/" title="Publication précédente : Jour 1">← Précédent</a> •
  115. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  116. • <a rel="next" href="/david/2021/08/26/" title="Publication suivante : Ambivalence">Suivant →</a>
  117. </p>
  118. </nav>
  119. </article>
  120. <hr>
  121. <footer>
  122. <p>
  123. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  125. </svg> Accueil</a> •
  126. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  128. </svg> Suivre</a> •
  129. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  131. </svg> Pro</a> •
  132. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  133. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  134. </svg> Email</a> •
  135. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  136. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  137. </svg> Légal</abbr>
  138. </p>
  139. <template id="theme-selector">
  140. <form>
  141. <fieldset>
  142. <legend><svg class="icon icon-brightness-contrast">
  143. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  144. </svg> Thème</legend>
  145. <label>
  146. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  147. </label>
  148. <label>
  149. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  150. </label>
  151. <label>
  152. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  153. </label>
  154. </fieldset>
  155. </form>
  156. </template>
  157. </footer>
  158. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  159. <script>
  160. function loadThemeForm(templateName) {
  161. const themeSelectorTemplate = document.querySelector(templateName)
  162. const form = themeSelectorTemplate.content.firstElementChild
  163. themeSelectorTemplate.replaceWith(form)
  164. form.addEventListener('change', (e) => {
  165. const chosenColorScheme = e.target.value
  166. localStorage.setItem('theme', chosenColorScheme)
  167. toggleTheme(chosenColorScheme)
  168. })
  169. const selectedTheme = localStorage.getItem('theme')
  170. if (selectedTheme && selectedTheme !== 'undefined') {
  171. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  172. }
  173. }
  174. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  175. window.addEventListener('load', () => {
  176. let hasDarkRules = false
  177. for (const styleSheet of Array.from(document.styleSheets)) {
  178. let mediaRules = []
  179. for (const cssRule of styleSheet.cssRules) {
  180. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  181. continue
  182. }
  183. // WARNING: Safari does not have/supports `conditionText`.
  184. if (cssRule.conditionText) {
  185. if (cssRule.conditionText !== prefersColorSchemeDark) {
  186. continue
  187. }
  188. } else {
  189. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  190. continue
  191. }
  192. }
  193. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  194. }
  195. // WARNING: do not try to insert a Rule to a styleSheet you are
  196. // currently iterating on, otherwise the browser will be stuck
  197. // in a infinite loop…
  198. for (const mediaRule of mediaRules) {
  199. styleSheet.insertRule(mediaRule.cssText)
  200. hasDarkRules = true
  201. }
  202. }
  203. if (hasDarkRules) {
  204. loadThemeForm('#theme-selector')
  205. }
  206. })
  207. </script>
  208. </body>
  209. </html>