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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  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&nbsp;2 — David Larlet</title>
  13. <meta name="description" content="Je me suis couché en ayant relativement chaud mais au cours de la nuit, la température est bien tombée avec le vent. Je me réveille vers 6h avec le visage plutôt frais et le trou du duvet bien gelé, je regarde la météo depuis l’intérieur de mon duvet et iels m’annoncent -15°C ressenti -20°C avec le vent. Pas pire. ERREUR.">
  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&nbsp;2</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2023/03/02/" title="Publication précédente : Jour&nbsp;1">← Précédent</a> •
  60. <nobr>
  61. <a href="/david/" title="Aller à l’accueil"
  62. ><svg class="icon icon-home">
  63. <use
  64. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  65. ></use>
  66. </svg>
  67. Accueil</a
  68. >
  69. </nobr>
  70. <nobr>
  71. <a href="/david/recherche/" title="Aller à la page de recherche"
  72. ><svg class="icon icon-search">
  73. <use
  74. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
  75. ></use>
  76. </svg>
  77. Recherche</a
  78. >
  79. </nobr>
  80. • <a rel="next" href="/david/2023/03/04/" title="Publication suivante : Jour&nbsp;3">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <p>Je me suis couché en ayant relativement chaud mais au cours de la nuit, la température est bien tombée avec le vent. Je me réveille vers 6h avec le visage plutôt frais et le trou du duvet bien gelé, je regarde la météo depuis l’intérieur de mon duvet et iels m’annoncent -15°C ressenti -20°C avec le vent. Pas pire. ERREUR.</p>
  85. <p>En fait, ce duvet est tellement chaud que je ne me suis pas trop méfié mais dès l’habillage je sens qu’il fait vraiment frette. Les chaussures sont gelées et les lacets aussi, les gants en cuirs sont raides et inutilisables, ma barbe gèle instantanément, le bouchon du Thermos a gelé. Ma montre m’indique -23°C et il y a du vent. La météo canadienne disais-je. Je fais vite un feu que j’aurais un peu mieux dû préparer la veille, je mets longtemps à récupérer de la dextérité. Ne parlons pas des&nbsp;pieds.</p>
  86. <figure>
  87. <a href="#2023-03-03-feu-soleil"
  88. title="Cliquer pour une version haute résolution">
  89. <picture>
  90. <source
  91. srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
  92. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  93. type="image/webp">
  94. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  95. <img
  96. src="/static/david/2023/2023-03-03-feu-soleil.jpg"
  97. width="1512" height="2268"
  98. srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
  99. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  100. fetchpriority="high"
  101. decoding="sync"
  102. alt="Le campement avec le soleil en arrière plan.">
  103. </picture>
  104. </a>
  105. <a href="#_" class="lightbox" id="2023-03-03-feu-soleil">
  106. <picture style="margin:0 auto;">
  107. <source
  108. srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
  109. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  110. type="image/webp">
  111. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  112. <img
  113. src="/static/david/2023/2023-03-03-feu-soleil.jpg"
  114. width="1512" height="2268"
  115. srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
  116. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  117. fetchpriority="high"
  118. decoding="sync"
  119. alt="Le campement avec le soleil en arrière plan.">
  120. </picture>
  121. </a>
  122. <figcaption>Ô soleil, merci de ta chaleur&nbsp;!</figcaption>
  123. </figure>
  124. <p>La sortie du duvet est vraiment l’étape cruciale du camping hivernal. D’habitude, je commence à mettre tout ce que je peux dans le duvet pendant une quinzaine de minutes le temps de réchauffer les vêtements externes. J’aurais pu tenter de mettre une chaufferette dans chaque chaussure aussi (j’en emporte toujours deux sans jamais les utiliser&#8239;!). Je fais une petite danse du réchauffement mais je sais aussi que je suis en train de louper la meilleure heure pour les photos et ça me frustre. Je tente un changement d’objectifs à mains nues et c’est une erreur… ouille le métal&nbsp;gelé.</p>
  125. <p>Je respire un bon coup et j’accepte la situation. La priorité est de se réchauffer en bougeant tout en m’alimentant et en faisant fondre de la neige. Il est possible de faire des erreurs mais pas de les enchaîner dans ces conditions. La magie du feu et de l’eau chaude finit par faire son&nbsp;effet.</p>
  126. <p>C’est une de ces journées fraîches de plein soleil donc la lumière est très violente. Je décide de descendre la rivière pour réchauffer mes pieds. Bon OK, pas&nbsp;littéralement.</p>
  127. <figure>
  128. <a href="#2023-03-03-riviere-ouareau"
  129. title="Cliquer pour une version haute résolution">
  130. <picture>
  131. <source
  132. srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
  133. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  134. type="image/webp">
  135. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  136. <img
  137. src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
  138. width="1512" height="2268"
  139. srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
  140. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  141. fetchpriority="high"
  142. decoding="sync"
  143. alt="La rivière Ouareau bien gelée.">
  144. </picture>
  145. </a>
  146. <a href="#_" class="lightbox" id="2023-03-03-riviere-ouareau">
  147. <picture style="margin:0 auto;">
  148. <source
  149. srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
  150. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  151. type="image/webp">
  152. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  153. <img
  154. src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
  155. width="1512" height="2268"
  156. srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
  157. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  158. fetchpriority="high"
  159. decoding="sync"
  160. alt="La rivière Ouareau bien gelée.">
  161. </picture>
  162. </a>
  163. <figcaption>Les méandres de la rivière&nbsp;gelée.</figcaption>
  164. </figure>
  165. <p>Le chemin est de toute beauté et j’ai vraiment du mal à capter cette ambiance. Il n’y a vraiment personne et je prends mon temps pour rester sec (vive la laine). Je découvre que l’emmental peut con·geler, qu’il faut commencer par casser des morceaux avec ses gants puis les faire fondre dans sa bouche jusqu’à être en capacité de le mâcher. #MeanwhileInCanada</p>
  166. <figure>
  167. <a href="#2023-03-03-sentier-murmures"
  168. title="Cliquer pour une version haute résolution">
  169. <picture>
  170. <source
  171. srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
  172. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  173. type="image/webp">
  174. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  175. <img
  176. src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
  177. width="1512" height="2268"
  178. srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
  179. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  180. fetchpriority="high"
  181. decoding="sync"
  182. alt="Le sentier des murmures.">
  183. </picture>
  184. </a>
  185. <a href="#_" class="lightbox" id="2023-03-03-sentier-murmures">
  186. <picture style="margin:0 auto;">
  187. <source
  188. srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
  189. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  190. type="image/webp">
  191. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  192. <img
  193. src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
  194. width="1512" height="2268"
  195. srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
  196. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  197. fetchpriority="high"
  198. decoding="sync"
  199. alt="Le sentier des murmures.">
  200. </picture>
  201. </a>
  202. <figcaption>Une portion du sentier qui est intégralement à couvert de&nbsp;forêt.</figcaption>
  203. </figure>
  204. <p>De retour au campement, je décide de faire une sieste pour attendre des couleurs et lumières moins dures. C’est une stratégie plutôt payante et je remonte cette fois-ci la rivière, il fait moins froid et c’est assez agréable d’être silencieux car je n’ai plus vraiment besoin des raquettes, le sentier a&nbsp;gelé.</p>
  205. <figure>
  206. <a href="#2023-03-03-couleurs-soir"
  207. title="Cliquer pour une version haute résolution">
  208. <picture>
  209. <source
  210. srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
  211. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  212. type="image/webp">
  213. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  214. <img
  215. src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
  216. width="1512" height="2268"
  217. srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
  218. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  219. fetchpriority="high"
  220. decoding="sync"
  221. alt="La rivière le soir.">
  222. </picture>
  223. </a>
  224. <a href="#_" class="lightbox" id="2023-03-03-couleurs-soir">
  225. <picture style="margin:0 auto;">
  226. <source
  227. srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
  228. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  229. type="image/webp">
  230. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  231. <img
  232. src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
  233. width="1512" height="2268"
  234. srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
  235. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  236. fetchpriority="high"
  237. decoding="sync"
  238. alt="La rivière le soir.">
  239. </picture>
  240. </a>
  241. <figcaption>Difficile de restituer la sensation de calme qu’il y avait alors, seulement troublée sporadiquement par un&nbsp;pic.</figcaption>
  242. </figure>
  243. <p>Un peu de neige est annoncée en matinée pour le lendemain. Je m’endors confiant. <a href="/david/2023/03/04/">Haha.</a></p>
  244. <hr />
  245. <p>Davantage de <a href="https://media.larlet.fr/2023-03-ouareau-01.html">photos disponibles par ici</a>.</p>
  246. <nav>
  247. <p>
  248. <a href="/david/2023/aventure/"
  249. title="Liste de tous les articles 2023 associés à cette étiquette"
  250. >#aventure</a>
  251. <a href="/david/2023/foret/"
  252. title="Liste de tous les articles 2023 associés à cette étiquette"
  253. >#forêt</a>
  254. <a href="/david/2023/photographie/"
  255. title="Liste de tous les articles 2023 associés à cette étiquette"
  256. >#photographie</a>
  257. <a href="/david/#tags-2023"
  258. title="Liste de toutes les étiquettes 2023"
  259. ><svg class="icon icon-tags">
  260. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  261. </svg>
  262. tous ?</a
  263. >
  264. </p>
  265. </nav>
  266. <nav>
  267. <p class="center">
  268. <a rel="prev" href="/david/2023/03/02/" title="Publication précédente : Jour&nbsp;1">← Précédent</a> •
  269. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  270. • <a rel="next" href="/david/2023/03/04/" title="Publication suivante : Jour&nbsp;3">Suivant →</a>
  271. </p>
  272. </nav>
  273. </article>
  274. <hr>
  275. <footer>
  276. <p>
  277. <nobr>
  278. <a href="/david/" title="Aller à l’accueil"
  279. ><svg class="icon icon-home">
  280. <use
  281. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  282. ></use>
  283. </svg>
  284. Accueil</a
  285. >
  286. </nobr>
  287. <nobr>
  288. <a href="/david/log/" title="Accès au flux RSS"
  289. ><svg class="icon icon-rss2">
  290. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  291. </svg>
  292. Suivre</a
  293. >
  294. </nobr>
  295. <nobr>
  296. <a href="http://larlet.com" title="Go to my English profile" data-instant
  297. ><svg class="icon icon-user-tie">
  298. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  299. </svg>
  300. Pro</a
  301. >
  302. </nobr>
  303. <nobr>
  304. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  305. ><svg class="icon icon-mail">
  306. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  307. </svg>
  308. Email</a
  309. >
  310. </nobr>
  311. <nobr>
  312. <abbr
  313. class="nowrap"
  314. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  315. ><svg class="icon icon-hammer2">
  316. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  317. </svg>
  318. Légal</abbr
  319. >
  320. </nobr>
  321. </p>
  322. <template id="theme-selector">
  323. <form>
  324. <fieldset>
  325. <legend><svg class="icon icon-brightness-contrast">
  326. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  327. </svg> Thème</legend>
  328. <label>
  329. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  330. </label>
  331. <label>
  332. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  333. </label>
  334. <label>
  335. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  336. </label>
  337. </fieldset>
  338. </form>
  339. </template>
  340. </footer>
  341. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  342. <script>
  343. function loadThemeForm(templateName) {
  344. const themeSelectorTemplate = document.querySelector(templateName)
  345. const form = themeSelectorTemplate.content.firstElementChild
  346. themeSelectorTemplate.replaceWith(form)
  347. form.addEventListener('change', (e) => {
  348. const chosenColorScheme = e.target.value
  349. localStorage.setItem('theme', chosenColorScheme)
  350. toggleTheme(chosenColorScheme)
  351. })
  352. const selectedTheme = localStorage.getItem('theme')
  353. if (selectedTheme && selectedTheme !== 'undefined') {
  354. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  355. }
  356. }
  357. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  358. window.addEventListener('load', () => {
  359. let hasDarkRules = false
  360. for (const styleSheet of Array.from(document.styleSheets)) {
  361. let mediaRules = []
  362. for (const cssRule of styleSheet.cssRules) {
  363. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  364. continue
  365. }
  366. // WARNING: Safari does not have/supports `conditionText`.
  367. if (cssRule.conditionText) {
  368. if (cssRule.conditionText !== prefersColorSchemeDark) {
  369. continue
  370. }
  371. } else {
  372. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  373. continue
  374. }
  375. }
  376. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  377. }
  378. // WARNING: do not try to insert a Rule to a styleSheet you are
  379. // currently iterating on, otherwise the browser will be stuck
  380. // in a infinite loop…
  381. for (const mediaRule of mediaRules) {
  382. styleSheet.insertRule(mediaRule.cssText)
  383. hasDarkRules = true
  384. }
  385. }
  386. if (hasDarkRules) {
  387. loadThemeForm('#theme-selector')
  388. }
  389. })
  390. </script>
  391. </body>
  392. </html>