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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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;3 — David Larlet</title>
  13. <meta name="description" content="Je me réveille à 4h45. Tout est paisible. Je me réveille à 5h15 car j’ai le visage qui touche la toile de tente. Il vient de tomber cinq centimètres en une demi-heure ! Je secoue la tente car j’ai peur pour la sonde à neige qui me sert de mat de tipi — et qui commence à courber dangereusement — ne casse alors que je suis encore dans mon duvet. Je passe les prochains quarts d’heure à faire glisser la neige très collante lorsqu’elle s’accumule avant d’oublier toute notion de grasse matinée. Le bon côté, c’est qu’il ne fait pas trop froid.">
  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;3</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2023/03/03/" title="Publication précédente : Jour&nbsp;2">← 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. </p>
  81. </nav>
  82. <hr>
  83. <p>Je me réveille à 4h45. Tout est paisible. Je me réveille à 5h15 car j’ai le visage qui touche la toile de tente. Il vient de tomber cinq centimètres en une demi-heure&#8239;! Je secoue la tente car j’ai peur pour la sonde à neige qui me sert de mat de tipi —&nbsp;et qui commence à courber dangereusement&nbsp;— ne casse alors que je suis encore dans mon duvet. Je passe les prochains quarts d’heure à faire glisser la neige très collante lorsqu’elle s’accumule avant d’oublier toute notion de grasse matinée. Le bon côté, c’est qu’il ne fait pas trop&nbsp;froid.</p>
  84. <p>Je m’habille et je prépare mon petit déjeuner avec mon réchaud à alcool, bien à l’abri, ça tombe en continu et le retour s’annonce épique. J’ai déjà un petit rempart de neige autour de la tente. Dire que je me réjouissais la veille que le sentier ait pu&nbsp;geler…</p>
  85. <p>Je sors quand même faire des photos en pleine tempête de neige et je suis très content de cette session. Même si les photos une fois développées sont assez frustrantes sur ce plan là, la recherche du moment me donne un grand&nbsp;sourire.</p>
  86. <figure>
  87. <a href="#2023-03-04-tempete-neige"
  88. title="Cliquer pour une version haute résolution">
  89. <picture>
  90. <source
  91. srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
  92. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  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-04-tempete-neige.jpg"
  97. width="1920" height="1280"
  98. srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
  99. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  100. fetchpriority="high"
  101. decoding="sync"
  102. alt="La rivière sous la tempête.">
  103. </picture>
  104. </a>
  105. <a href="#_" class="lightbox" id="2023-03-04-tempete-neige">
  106. <picture style="margin:0 auto;">
  107. <source
  108. srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
  109. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  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-04-tempete-neige.jpg"
  114. width="1920" height="1280"
  115. srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
  116. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  117. fetchpriority="high"
  118. decoding="sync"
  119. alt="La rivière sous la tempête.">
  120. </picture>
  121. </a>
  122. <figcaption>Il neigeait dru&nbsp;!</figcaption>
  123. </figure>
  124. <p>Cerise sur le gâteau, je vois des traces sur la berge opposée et je commence à les suivre en aval puis en amont, assez loin. Il est passé il y a moins de 15&nbsp;minutes et c’était à 100&nbsp;mètres de mon campement. Je casse le suspense tout de suite, je n’ai jamais vu l’animal mais la traque dans ces conditions idéales pour avoir l’espoir de s’approcher sans être vu ni entendu était extrêmement stimulante. À chaque ouverture sur la rivière depuis le sentier, j’imaginais ce que ça pourrait donner avec un coyote ou un ongulé au premier plan. J’ai encore ces images dans la&nbsp;tête&nbsp;:-).</p>
  125. <figure>
  126. <a href="#2023-03-04-traces"
  127. title="Cliquer pour une version haute résolution">
  128. <picture>
  129. <source
  130. srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
  131. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  132. type="image/webp">
  133. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  134. <img
  135. src="/static/david/2023/2023-03-04-traces.jpg"
  136. width="1920" height="1280"
  137. srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
  138. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  139. fetchpriority="high"
  140. decoding="sync"
  141. alt="Des traces dans la neige.">
  142. </picture>
  143. </a>
  144. <a href="#_" class="lightbox" id="2023-03-04-traces">
  145. <picture style="margin:0 auto;">
  146. <source
  147. srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
  148. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  149. type="image/webp">
  150. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  151. <img
  152. src="/static/david/2023/2023-03-04-traces.jpg"
  153. width="1920" height="1280"
  154. srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
  155. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  156. fetchpriority="high"
  157. decoding="sync"
  158. alt="Des traces dans la neige.">
  159. </picture>
  160. </a>
  161. <figcaption>À une prochaine, l’animal.</figcaption>
  162. </figure>
  163. <p>Le rangement du campement sous la neige est assez complexe sans tout mouiller mais c’est un bon exercice. Par contre le retour est vraiment fastidieux car en montée avec 15&nbsp;cm de poudreuse fraîche en plus ça devient difficile de traîner une luge adaptée par mes soins. Je me dis qu’il serait pertinent d’investir dans une vraie&nbsp;pulka…</p>
  164. <figure>
  165. <a href="#2023-03-04-traineau"
  166. title="Cliquer pour une version haute résolution">
  167. <picture>
  168. <source
  169. srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
  170. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  171. type="image/webp">
  172. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  173. <img
  174. src="/static/david/2023/2023-03-04-traineau.jpg"
  175. width="1512" height="2268"
  176. srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
  177. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  178. fetchpriority="high"
  179. decoding="sync"
  180. alt="Le traîneau sur le chemin du retour.">
  181. </picture>
  182. </a>
  183. <a href="#_" class="lightbox" id="2023-03-04-traineau">
  184. <picture style="margin:0 auto;">
  185. <source
  186. srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
  187. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  188. type="image/webp">
  189. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  190. <img
  191. src="/static/david/2023/2023-03-04-traineau.jpg"
  192. width="1512" height="2268"
  193. srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
  194. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  195. fetchpriority="high"
  196. decoding="sync"
  197. alt="Le traîneau sur le chemin du retour.">
  198. </picture>
  199. </a>
  200. <figcaption>Le secret, c’est de faire des pauses, vraiment beaucoup de pauses&nbsp;!</figcaption>
  201. </figure>
  202. <hr />
  203. <p>Davantage de <a href="https://media.larlet.fr/2023-03-ouareau-01.html">photos disponibles par ici</a>.</p>
  204. <nav>
  205. <p>
  206. <a href="/david/2023/aventure/"
  207. title="Liste de tous les articles 2023 associés à cette étiquette"
  208. >#aventure</a>
  209. <a href="/david/2023/foret/"
  210. title="Liste de tous les articles 2023 associés à cette étiquette"
  211. >#forêt</a>
  212. <a href="/david/2023/traces/"
  213. title="Liste de tous les articles 2023 associés à cette étiquette"
  214. >#traces</a>
  215. <a href="/david/#tags-2023"
  216. title="Liste de toutes les étiquettes 2023"
  217. ><svg class="icon icon-tags">
  218. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  219. </svg>
  220. tous ?</a
  221. >
  222. </p>
  223. </nav>
  224. <nav>
  225. <p class="center">
  226. <a rel="prev" href="/david/2023/03/03/" title="Publication précédente : Jour&nbsp;2">← Précédent</a> •
  227. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  228. </p>
  229. </nav>
  230. </article>
  231. <hr>
  232. <footer>
  233. <p>
  234. <nobr>
  235. <a href="/david/" title="Aller à l’accueil"
  236. ><svg class="icon icon-home">
  237. <use
  238. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  239. ></use>
  240. </svg>
  241. Accueil</a
  242. >
  243. </nobr>
  244. <nobr>
  245. <a href="/david/log/" title="Accès au flux RSS"
  246. ><svg class="icon icon-rss2">
  247. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  248. </svg>
  249. Suivre</a
  250. >
  251. </nobr>
  252. <nobr>
  253. <a href="http://larlet.com" title="Go to my English profile" data-instant
  254. ><svg class="icon icon-user-tie">
  255. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  256. </svg>
  257. Pro</a
  258. >
  259. </nobr>
  260. <nobr>
  261. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  262. ><svg class="icon icon-mail">
  263. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  264. </svg>
  265. Email</a
  266. >
  267. </nobr>
  268. <nobr>
  269. <abbr
  270. class="nowrap"
  271. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  272. ><svg class="icon icon-hammer2">
  273. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  274. </svg>
  275. Légal</abbr
  276. >
  277. </nobr>
  278. </p>
  279. <template id="theme-selector">
  280. <form>
  281. <fieldset>
  282. <legend><svg class="icon icon-brightness-contrast">
  283. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  284. </svg> Thème</legend>
  285. <label>
  286. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  287. </label>
  288. <label>
  289. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  290. </label>
  291. <label>
  292. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  293. </label>
  294. </fieldset>
  295. </form>
  296. </template>
  297. </footer>
  298. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  299. <script>
  300. function loadThemeForm(templateName) {
  301. const themeSelectorTemplate = document.querySelector(templateName)
  302. const form = themeSelectorTemplate.content.firstElementChild
  303. themeSelectorTemplate.replaceWith(form)
  304. form.addEventListener('change', (e) => {
  305. const chosenColorScheme = e.target.value
  306. localStorage.setItem('theme', chosenColorScheme)
  307. toggleTheme(chosenColorScheme)
  308. })
  309. const selectedTheme = localStorage.getItem('theme')
  310. if (selectedTheme && selectedTheme !== 'undefined') {
  311. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  312. }
  313. }
  314. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  315. window.addEventListener('load', () => {
  316. let hasDarkRules = false
  317. for (const styleSheet of Array.from(document.styleSheets)) {
  318. let mediaRules = []
  319. for (const cssRule of styleSheet.cssRules) {
  320. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  321. continue
  322. }
  323. // WARNING: Safari does not have/supports `conditionText`.
  324. if (cssRule.conditionText) {
  325. if (cssRule.conditionText !== prefersColorSchemeDark) {
  326. continue
  327. }
  328. } else {
  329. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  330. continue
  331. }
  332. }
  333. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  334. }
  335. // WARNING: do not try to insert a Rule to a styleSheet you are
  336. // currently iterating on, otherwise the browser will be stuck
  337. // in a infinite loop…
  338. for (const mediaRule of mediaRules) {
  339. styleSheet.insertRule(mediaRule.cssText)
  340. hasDarkRules = true
  341. }
  342. }
  343. if (hasDarkRules) {
  344. loadThemeForm('#theme-selector')
  345. }
  346. })
  347. </script>
  348. </body>
  349. </html>