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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  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. <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
  90. loading="lazy" width="1512" height="2268" />
  91. </a>
  92. <a href="#_" class="lightbox" id="2023-03-03-feu-soleil">
  93. <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
  94. loading="lazy" width="1512" height="2268" />
  95. </a>
  96. <figcaption>Ô soleil, merci de ta chaleur&nbsp;!</figcaption>
  97. </figure>
  98. <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>
  99. <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>
  100. <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>
  101. <figure>
  102. <a href="#2023-03-03-riviere-ouareau"
  103. title="Cliquer pour une version haute résolution">
  104. <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
  105. loading="lazy" width="1512" height="2268" />
  106. </a>
  107. <a href="#_" class="lightbox" id="2023-03-03-riviere-ouareau">
  108. <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
  109. loading="lazy" width="1512" height="2268" />
  110. </a>
  111. <figcaption>Les méandres de la rivière&nbsp;gelée.</figcaption>
  112. </figure>
  113. <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>
  114. <figure>
  115. <a href="#2023-03-03-sentier-murmures"
  116. title="Cliquer pour une version haute résolution">
  117. <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
  118. loading="lazy" width="1512" height="2268" />
  119. </a>
  120. <a href="#_" class="lightbox" id="2023-03-03-sentier-murmures">
  121. <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
  122. loading="lazy" width="1512" height="2268" />
  123. </a>
  124. <figcaption>Une portion du sentier qui est intégralement à couvert de&nbsp;forêt.</figcaption>
  125. </figure>
  126. <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>
  127. <figure>
  128. <a href="#2023-03-03-couleurs-soir"
  129. title="Cliquer pour une version haute résolution">
  130. <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
  131. loading="lazy" width="1512" height="2268" />
  132. </a>
  133. <a href="#_" class="lightbox" id="2023-03-03-couleurs-soir">
  134. <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
  135. loading="lazy" width="1512" height="2268" />
  136. </a>
  137. <figcaption>Difficile de restituer la sensation de calme qu’il y avait alors, seulement troublée sporadiquement par un&nbsp;pic.</figcaption>
  138. </figure>
  139. <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>
  140. <hr />
  141. <p>Davantage de <a href="https://media.larlet.fr/2023-03-ouareau-01.html">photos disponibles par ici</a>.</p>
  142. <nav>
  143. <p>
  144. <a href="/david/2023/aventure/"
  145. title="Liste de tous les articles 2023 associés à cette étiquette"
  146. >#aventure</a>
  147. <a href="/david/2023/foret/"
  148. title="Liste de tous les articles 2023 associés à cette étiquette"
  149. >#forêt</a>
  150. <a href="/david/2023/photographie/"
  151. title="Liste de tous les articles 2023 associés à cette étiquette"
  152. >#photographie</a>
  153. <a href="/david/#tags-2023"
  154. title="Liste de toutes les étiquettes 2023"
  155. ><svg class="icon icon-tags">
  156. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  157. </svg>
  158. tous ?</a
  159. >
  160. </p>
  161. </nav>
  162. <nav>
  163. <p class="center">
  164. <a rel="prev" href="/david/2023/03/02/" title="Publication précédente : Jour&nbsp;1">← Précédent</a> •
  165. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  166. • <a rel="next" href="/david/2023/03/04/" title="Publication suivante : Jour&nbsp;3">Suivant →</a>
  167. </p>
  168. </nav>
  169. </article>
  170. <hr>
  171. <footer>
  172. <p>
  173. <nobr>
  174. <a href="/david/" title="Aller à l’accueil"
  175. ><svg class="icon icon-home">
  176. <use
  177. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  178. ></use>
  179. </svg>
  180. Accueil</a
  181. >
  182. </nobr>
  183. <nobr>
  184. <a href="/david/log/" title="Accès au flux RSS"
  185. ><svg class="icon icon-rss2">
  186. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  187. </svg>
  188. Suivre</a
  189. >
  190. </nobr>
  191. <nobr>
  192. <a href="http://larlet.com" title="Go to my English profile" data-instant
  193. ><svg class="icon icon-user-tie">
  194. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  195. </svg>
  196. Pro</a
  197. >
  198. </nobr>
  199. <nobr>
  200. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  201. ><svg class="icon icon-mail">
  202. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  203. </svg>
  204. Email</a
  205. >
  206. </nobr>
  207. <nobr>
  208. <abbr
  209. class="nowrap"
  210. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  211. ><svg class="icon icon-hammer2">
  212. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  213. </svg>
  214. Légal</abbr
  215. >
  216. </nobr>
  217. </p>
  218. <template id="theme-selector">
  219. <form>
  220. <fieldset>
  221. <legend><svg class="icon icon-brightness-contrast">
  222. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  223. </svg> Thème</legend>
  224. <label>
  225. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  226. </label>
  227. <label>
  228. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  229. </label>
  230. <label>
  231. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  232. </label>
  233. </fieldset>
  234. </form>
  235. </template>
  236. </footer>
  237. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  238. <script>
  239. function loadThemeForm(templateName) {
  240. const themeSelectorTemplate = document.querySelector(templateName)
  241. const form = themeSelectorTemplate.content.firstElementChild
  242. themeSelectorTemplate.replaceWith(form)
  243. form.addEventListener('change', (e) => {
  244. const chosenColorScheme = e.target.value
  245. localStorage.setItem('theme', chosenColorScheme)
  246. toggleTheme(chosenColorScheme)
  247. })
  248. const selectedTheme = localStorage.getItem('theme')
  249. if (selectedTheme && selectedTheme !== 'undefined') {
  250. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  251. }
  252. }
  253. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  254. window.addEventListener('load', () => {
  255. let hasDarkRules = false
  256. for (const styleSheet of Array.from(document.styleSheets)) {
  257. let mediaRules = []
  258. for (const cssRule of styleSheet.cssRules) {
  259. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  260. continue
  261. }
  262. // WARNING: Safari does not have/supports `conditionText`.
  263. if (cssRule.conditionText) {
  264. if (cssRule.conditionText !== prefersColorSchemeDark) {
  265. continue
  266. }
  267. } else {
  268. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  269. continue
  270. }
  271. }
  272. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  273. }
  274. // WARNING: do not try to insert a Rule to a styleSheet you are
  275. // currently iterating on, otherwise the browser will be stuck
  276. // in a infinite loop…
  277. for (const mediaRule of mediaRules) {
  278. styleSheet.insertRule(mediaRule.cssText)
  279. hasDarkRules = true
  280. }
  281. }
  282. if (hasDarkRules) {
  283. loadThemeForm('#theme-selector')
  284. }
  285. })
  286. </script>
  287. </body>
  288. </html>