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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  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>
  13. Jour&nbsp;3
  14. — David Larlet</title>
  15. <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.">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  106. data-instant-intensity="viewport-all">
  107. <article>
  108. <header>
  109. <h1>Jour&nbsp;3</h1>
  110. </header>
  111. <nav>
  112. <p class="center">
  113. <a rel="prev"
  114. href="/david/2023/03/03/"
  115. title="Publication précédente : Jour&nbsp;2">← Précédent</a> •
  116. <nobr>
  117. <a href="/david/" title="Aller à l’accueil" rel="up">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. </nobr>
  123. <nobr>
  124. <a href="/david/recherche/"
  125. title="Aller à la page de recherche"
  126. rel="search">
  127. <svg class="icon icon-search">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
  129. </svg>
  130. Recherche</a>
  131. </nobr>
  132. • <a rel="next"
  133. href="/david/2023/03/13/"
  134. title="Publication suivante : Traditions">Suivant →</a>
  135. </p>
  136. </nav>
  137. <hr>
  138. <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>
  139. <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>
  140. <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>
  141. <figure>
  142. <a href="/static/david/2023/2023-03-04-tempete-neige.jpg"
  143. title="Cliquer pour une version haute résolution">
  144. <img
  145. src="/static/david/2023/2023-03-04-tempete-neige.jpg"
  146. width="1920" height="1280"
  147. srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w, /static/david/2023/2023-03-04-tempete-neige_660x440.jpg 660w, /static/david/2023/2023-03-04-tempete-neige_990x660.jpg 990w, /static/david/2023/2023-03-04-tempete-neige_1320x880.jpg 1320w"
  148. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  149. loading="lazy"
  150. decoding="async"
  151. alt="La rivière sous la tempête.">
  152. </a>
  153. <figcaption>Il neigeait dru&nbsp;!</figcaption>
  154. </figure>
  155. <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>
  156. <figure>
  157. <a href="/static/david/2023/2023-03-04-traces.jpg"
  158. title="Cliquer pour une version haute résolution">
  159. <img
  160. src="/static/david/2023/2023-03-04-traces.jpg"
  161. width="1920" height="1280"
  162. srcset="/static/david/2023/2023-03-04-traces.jpg 1920w, /static/david/2023/2023-03-04-traces_660x440.jpg 660w, /static/david/2023/2023-03-04-traces_990x660.jpg 990w, /static/david/2023/2023-03-04-traces_1320x880.jpg 1320w"
  163. sizes="min(100vw, calc(100vh * 1920 / 1280))"
  164. loading="lazy"
  165. decoding="async"
  166. alt="Des traces dans la neige.">
  167. </a>
  168. <figcaption>À une prochaine, l’animal.</figcaption>
  169. </figure>
  170. <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>
  171. <figure>
  172. <a href="/static/david/2023/2023-03-04-traineau.jpg"
  173. title="Cliquer pour une version haute résolution">
  174. <img
  175. src="/static/david/2023/2023-03-04-traineau.jpg"
  176. width="1512" height="2268"
  177. srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w, /static/david/2023/2023-03-04-traineau_660x440.jpg 660w, /static/david/2023/2023-03-04-traineau_990x660.jpg 990w, /static/david/2023/2023-03-04-traineau_1320x880.jpg 1320w"
  178. sizes="min(100vw, calc(100vh * 1512 / 2268))"
  179. loading="lazy"
  180. decoding="async"
  181. alt="Le traîneau sur le chemin du retour.">
  182. </a>
  183. <figcaption>Le secret, c’est de faire des pauses, vraiment beaucoup de pauses&nbsp;!</figcaption>
  184. </figure>
  185. <hr />
  186. <p>Davantage de <a href="https://media.larlet.fr/2023-03-ouareau-01.html">photos disponibles par ici</a>.</p>
  187. <nav>
  188. <p>
  189. <a href="/david/2023/aventure/"
  190. title="Liste de tous les articles 2023 associés à cette étiquette"
  191. rel="tag">#aventure</a>
  192. <a href="/david/2023/foret/"
  193. title="Liste de tous les articles 2023 associés à cette étiquette"
  194. rel="tag">#forêt</a>
  195. <a href="/david/2023/traces/"
  196. title="Liste de tous les articles 2023 associés à cette étiquette"
  197. rel="tag">#traces</a>
  198. <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
  199. <svg class="icon icon-tags">
  200. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  201. </svg>
  202. tous ?</a>
  203. </p>
  204. </nav>
  205. <nav>
  206. <p class="center">
  207. <a rel="prev"
  208. href="/david/2023/03/03/"
  209. title="Publication précédente : Jour&nbsp;2">← Précédent</a> •
  210. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  211. • <a rel="next"
  212. href="/david/2023/03/13/"
  213. title="Publication suivante : Traditions">Suivant →</a>
  214. </p>
  215. </nav>
  216. </article>
  217. <hr>
  218. <footer>
  219. <p>
  220. <nobr>
  221. <a href="/david/" title="Aller à l’accueil">
  222. <svg class="icon icon-home">
  223. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  224. </svg>
  225. Accueil</a>
  226. </nobr>
  227. <nobr>
  228. <a href="/david/log/" title="Accès au flux RSS">
  229. <svg class="icon icon-rss2">
  230. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  231. </svg>
  232. Suivre</a>
  233. </nobr>
  234. <nobr>
  235. <a href="http://larlet.com"
  236. title="Go to my English profile"
  237. data-instant>
  238. <svg class="icon icon-user-tie">
  239. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  240. </svg>
  241. Pro</a>
  242. </nobr>
  243. <nobr>
  244. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  245. <svg class="icon icon-mail">
  246. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  247. </svg>
  248. Email</a>
  249. </nobr>
  250. <nobr>
  251. <abbr class="nowrap"
  252. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  253. <svg class="icon icon-hammer2">
  254. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  255. </svg>
  256. Légal</abbr>
  257. </nobr>
  258. </p>
  259. <template id="theme-selector">
  260. <form>
  261. <fieldset>
  262. <legend>
  263. <svg class="icon icon-brightness-contrast">
  264. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  265. </svg>
  266. Thème
  267. </legend>
  268. <label>
  269. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  270. Auto
  271. </label>
  272. <label>
  273. <input type="radio" value="dark" name="chosen-color-scheme">
  274. Foncé
  275. </label>
  276. <label>
  277. <input type="radio" value="light" name="chosen-color-scheme">
  278. Clair
  279. </label>
  280. </fieldset>
  281. </form>
  282. </template>
  283. </footer>
  284. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  285. <script>
  286. function loadThemeForm(templateName) {
  287. const themeSelectorTemplate = document.querySelector(templateName)
  288. const form = themeSelectorTemplate.content.firstElementChild
  289. themeSelectorTemplate.replaceWith(form)
  290. form.addEventListener('change', (e) => {
  291. const chosenColorScheme = e.target.value
  292. localStorage.setItem('theme', chosenColorScheme)
  293. toggleTheme(chosenColorScheme)
  294. })
  295. const selectedTheme = localStorage.getItem('theme')
  296. if (selectedTheme && selectedTheme !== 'undefined') {
  297. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  298. }
  299. }
  300. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  301. window.addEventListener('load', () => {
  302. let hasDarkRules = false
  303. for (const styleSheet of Array.from(document.styleSheets)) {
  304. let mediaRules = []
  305. for (const cssRule of styleSheet.cssRules) {
  306. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  307. continue
  308. }
  309. // WARNING: Safari does not have/supports `conditionText`.
  310. if (cssRule.conditionText) {
  311. if (cssRule.conditionText !== prefersColorSchemeDark) {
  312. continue
  313. }
  314. } else {
  315. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  316. continue
  317. }
  318. }
  319. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  320. }
  321. // WARNING: do not try to insert a Rule to a styleSheet you are
  322. // currently iterating on, otherwise the browser will be stuck
  323. // in a infinite loop…
  324. for (const mediaRule of mediaRules) {
  325. styleSheet.insertRule(mediaRule.cssText)
  326. hasDarkRules = true
  327. }
  328. }
  329. if (hasDarkRules) {
  330. loadThemeForm('#theme-selector')
  331. }
  332. })
  333. </script>
  334. </body>
  335. </html>