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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  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. Étiquette #aventure
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #aventure">
  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_2024-02-03.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_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/century_supra_ot_b_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/century_supra_ot_b_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. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#aventure</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/02/25/" title="Lien permanent vers cet article">Jour&nbsp;2</a> <time datetime="2024-02-25">25 février 2024</time>
  132. </h2>
  133. <p>Sommeil entrecoupé, comme toujours, je finis par ouvrir une dernière fois les yeux après avoir passé plus de 12&nbsp;heures bien emmitouflé. Il faudrait que j’apprenne à expirer moins d’eau car le résultat est problématique (la fermeture éclair du duvet est bien gelée au matin). Et à moins bouger aussi, car chaque nouvelle position est longue à&nbsp;réchauffer…</p>
  134. <figure>
  135. <a href="/static/david/2024/2024-02-25-duvet-givre.jpg"
  136. title="Cliquer pour une version haute résolution">
  137. <img
  138. src="/static/david/2024/2024-02-25-duvet-givre.jpg"
  139. width="2317" height="3088"
  140. srcset="/static/david/2024/2024-02-25-duvet-givre.jpg 2317w, /static/david/2024/2024-02-25-duvet-givre_660x440.jpg 660w, /static/david/2024/2024-02-25-duvet-givre_990x660.jpg 990w, /static/david/2024/2024-02-25-duvet-givre_1320x880.jpg 1320w"
  141. sizes="min(100vw, calc(100vh * 2317 / 3088))"
  142. loading="lazy"
  143. decoding="async"
  144. alt="Mon nez qui dépasse de la cheminée du duvet toute givrée.">
  145. </a>
  146. <figcaption>OMG, they killed&nbsp;Kenny!</figcaption>
  147. </figure>
  148. <p>Le <em>crux</em> de la sortie (coucou les grimpeur·euses), c’est de se lever <strong>et</strong> d’allumer un feu sans perdre sa dextérité de manière critique. Vous n’imaginez pas à quel point craquer une allumette peut devenir compliqué dans ces situations. D’autant qu’il fait encore en-dessous de -20°C et que le bois n’est pas aussi réactif&#8239;! J’arrive tout de même à allumer un feu avant que ce soit problématique et je suis content de ma nouvelle tentative de foyer hivernal qui ne coule pas. Au point d’en faire une&nbsp;photo-publicité.</p>
  149. <figure>
  150. <a href="/static/david/2024/2024-02-25-foyer-firebox.jpg"
  151. title="Cliquer pour une version haute résolution">
  152. <img
  153. src="/static/david/2024/2024-02-25-foyer-firebox.jpg"
  154. width="3024" height="4032"
  155. srcset="/static/david/2024/2024-02-25-foyer-firebox.jpg 3024w, /static/david/2024/2024-02-25-foyer-firebox_660x440.jpg 660w, /static/david/2024/2024-02-25-foyer-firebox_990x660.jpg 990w, /static/david/2024/2024-02-25-foyer-firebox_1320x880.jpg 1320w"
  156. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  157. loading="lazy"
  158. decoding="async"
  159. alt="Un foyer avec ma popote et une buche sur laquelle on voit l’ombre de la marque (Firebox).">
  160. </a>
  161. <figcaption>Mon auto-correct vient de me corriger le texte alternatif en Firefox. Bien.</figcaption>
  162. </figure>
  163. <p>L’eau conservée liquide dans mon duvet me fait gagner un temps non négligeable avant de pouvoir ingurgiter une boisson chaude. Et de faire fondre de la neige, encore et toujours, activité favorite du camping&nbsp;d’hiver…</p>
  164. <p>Un petit tour de lac pour se réchauffer les pieds gelés et se mettre en jambe avant de se remettre à tracter. J’ai l’impression de voler. Il n’y a guère que les corneilles pour sortir par pareilles journées. Je fais une pause au soleil, je suis content d’être. Ici et&nbsp;maintenant.</p>
  165. <figure>
  166. <a href="/static/david/2024/2024-02-25-lac-boeuf.jpg"
  167. title="Cliquer pour une version haute résolution">
  168. <img
  169. src="/static/david/2024/2024-02-25-lac-boeuf.jpg"
  170. width="3024" height="4032"
  171. srcset="/static/david/2024/2024-02-25-lac-boeuf.jpg 3024w, /static/david/2024/2024-02-25-lac-boeuf_660x440.jpg 660w, /static/david/2024/2024-02-25-lac-boeuf_990x660.jpg 990w, /static/david/2024/2024-02-25-lac-boeuf_1320x880.jpg 1320w"
  172. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  173. loading="lazy"
  174. decoding="async"
  175. alt="Des traces de mes skis sur un lac gelé.">
  176. </a>
  177. <figcaption>C’est là où on peut observer la dureté de la neige ! Il y a au moins 50 cm de neige avant la&nbsp;glace.</figcaption>
  178. </figure>
  179. <p>Le retour est éreintant. Une suite de longues montées et de neige de plus en plus difficile à naviguer car j’arrive à des endroits davantage empruntés par des véhicules à chenilles. Chaque enfoncement des crans de la courroie métallique réduit mon accroche de manière significative. Je suis même parfois obligé de déchausser selon les montées… et les descentes car je suis moyennement en confiance avec une telle inertie sans aucune accroche possible. J’ai au moins réussi à limiter le départ en drapeau de la pulka avec un nouveau mécanisme à base de <em>ducktape</em> et de <a data-link-domain="forj.com" href="https://www.forj.com/">forj</a>.</p>
  180. <p>Après pas mal de pauses et une dizaine de kilomètres, je retrouve le parking dans un sale état. Dire que j’envisageais de faire la boucle à la journée avec l’enfant… Une sortie avec beaucoup d’intensité et&nbsp;d’apprentissages&#8239;!</p>
  181. <nav>
  182. <p>
  183. <a href="/david/2024/aventure/"
  184. title="Liste de tous les articles 2024 associés à cette étiquette"
  185. rel="tag">#aventure</a>
  186. <a href="/david/2024/foret/"
  187. title="Liste de tous les articles 2024 associés à cette étiquette"
  188. rel="tag">#forêt</a>
  189. <a href="/david/2024/gratitude/"
  190. title="Liste de tous les articles 2024 associés à cette étiquette"
  191. rel="tag">#gratitude</a>
  192. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  193. </p>
  194. </nav>
  195. <h2>
  196. <a href="/david/2024/02/24/" title="Lien permanent vers cet article">Jour&nbsp;1</a> <time datetime="2024-02-24">24 février 2024</time>
  197. </h2>
  198. <p>Arrivée en fin de matinée. La voiture affiche -12°C et je sais que je ne vais probablement pas avoir plus ces 30&nbsp;prochaines heures dans la forêt. Depuis que j’ai appris la connaissance de la Grande Boucle de la forêt de Ouareau, j’ai eu envie de la faire, à mon rythme, avec une nuit à l’autre bout du parc. Ma pulka est énorme, ils annoncent une nuit fraîche et avec du vent. Je me lance dans la première descente alors que la neige est dure comme de la roche. J’apprends à mes dépens que les écailles des skis ne sont pas adaptées lorsque je repars en arrière à la première montée. Première chute, ça commence&nbsp;bien.</p>
  199. <p>Avec les demi-peaux, ça passe déjà mieux mais ça demande de beaucoup forcer sur les bras. Les quelques personnes que je croise en skis de fond n’en mènent pas large non plus, les conditions sont atroces quel que soit l’équipement on dirait. Certains choisissent de tirer 40&#8239;kg en plus pour le fun. Après quelques heures, j’arrive enfin au lac tant espéré, le soleil me gratifie de ses derniers rayons pour monter le camp et préparer de quoi me réchauffer pour la&nbsp;soirée.</p>
  200. <figure>
  201. <a href="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
  202. title="Cliquer pour une version haute résolution">
  203. <img
  204. src="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
  205. width="4032" height="3024"
  206. srcset="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg 4032w, /static/david/2024/2024-02-24-pulka-lac-boeuf_660x440.jpg 660w, /static/david/2024/2024-02-24-pulka-lac-boeuf_990x660.jpg 990w, /static/david/2024/2024-02-24-pulka-lac-boeuf_1320x880.jpg 1320w"
  207. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  208. loading="lazy"
  209. decoding="async"
  210. alt="La pulka devant le lac bœuf.">
  211. </a>
  212. <figcaption>La joie d’arriver au lieu de campement avec mes deux&nbsp;chevilles.</figcaption>
  213. </figure>
  214. <p>Il fait déjà -16°C et j’ai choisi de prendre une tente cette fois-ci par crainte du vent annoncé mais il n’y a pas de soucis à se faire pour l’instant. C’est même très agréable s’il n’y avait pas le ronron des motoneiges dans dans le lointain qui vient casser un peu l’ambiance. Le son porte très loin en&nbsp;hiver.</p>
  215. <p>Je suis pas mal déshydraté mais j’essaye de gérer stratégiquement cela, je sais qu’il va falloir passer le plus longtemps possible dans le duvet. Les courbatures attendront. Je passe une bonne soirée au coin du feu car il y a finalement très peu de vent et la voûte céleste est superbe par ces températures. J’aurais bien dormi à la belle&nbsp;étoile.</p>
  216. <figure>
  217. <a href="/static/david/2024/2024-02-24-tente-ouverte.jpg"
  218. title="Cliquer pour une version haute résolution">
  219. <img
  220. src="/static/david/2024/2024-02-24-tente-ouverte.jpg"
  221. width="4032" height="3024"
  222. srcset="/static/david/2024/2024-02-24-tente-ouverte.jpg 4032w, /static/david/2024/2024-02-24-tente-ouverte_660x440.jpg 660w, /static/david/2024/2024-02-24-tente-ouverte_990x660.jpg 990w, /static/david/2024/2024-02-24-tente-ouverte_1320x880.jpg 1320w"
  223. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  224. loading="lazy"
  225. decoding="async"
  226. alt="Une tente ouverte avec un duvet à l’intérieur.">
  227. </a>
  228. <figcaption>Chambre avec&nbsp;vue.</figcaption>
  229. </figure>
  230. <p>Je suis bien content d’avoir pris mon plus gros duvet car j’apprends que le thermomètre de ma montre s’arrête de fonctionner à partir de -20°C. Et il n’est que 7&#8239;h du soir. Le passage du foyer au duvet est toujours un moment assez critique. Je découvre que les chaufferettes permettent de récupérer des pieds gelés plus rapidement (j’avais fait l’erreur de ne prendre que des bouteilles isotherme). Je prends soin de donner une forme enfilable à mes chaussures avec la bonne position des lacets qui vont geler&nbsp;aussi.</p>
  231. <p>Je m’endors en écoutant le silence, seulement brisé par les arbres qui craquent de froid. L’hiver tire ses dernières balles et certains resteront couchés&nbsp;demain.</p>
  232. <nav>
  233. <p>
  234. <a href="/david/2024/aventure/"
  235. title="Liste de tous les articles 2024 associés à cette étiquette"
  236. rel="tag">#aventure</a>
  237. <a href="/david/2024/foret/"
  238. title="Liste de tous les articles 2024 associés à cette étiquette"
  239. rel="tag">#forêt</a>
  240. <a href="/david/2024/sport/"
  241. title="Liste de tous les articles 2024 associés à cette étiquette"
  242. rel="tag">#sport</a>
  243. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  244. </p>
  245. </nav>
  246. <form action="/david/recherche/" method="get">
  247. <fieldset>
  248. <legend>Recherche</legend>
  249. <label for="input-search">Termes de votre recherche :</label>
  250. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  251. <input type="submit" value="Chercher">
  252. <p id="indexation-infos">
  253. <small>
  254. Seuls les contenus de ces 8 dernières années sont indexés.
  255. </small>
  256. </p>
  257. </fieldset>
  258. </form>
  259. <aside>
  260. <theme-toggle></theme-toggle>
  261. </aside>
  262. </article>
  263. <hr>
  264. <footer>
  265. <p>
  266. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  267. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  268. <a href="http://larlet.com"
  269. title="Go to my English profile"
  270. data-instant>Pro</a>
  271. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  272. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  273. </p>
  274. <template id="theme-selector">
  275. <form>
  276. <style type="text/css">
  277. fieldset div {
  278. text-align: center;
  279. }
  280. </style>
  281. <fieldset>
  282. <legend>Thème</legend>
  283. <div>
  284. <label>
  285. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  286. Auto
  287. </label>
  288. <label>
  289. <input type="radio" value="dark" name="chosen-color-scheme">
  290. Foncé
  291. </label>
  292. <label>
  293. <input type="radio" value="light" name="chosen-color-scheme">
  294. Clair
  295. </label>
  296. </div>
  297. </fieldset>
  298. </form>
  299. </template>
  300. </footer>
  301. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  302. <script>
  303. class ThemeToggle extends HTMLElement {
  304. constructor() {
  305. super()
  306. const themeSelectorTemplate = document.querySelector('#theme-selector')
  307. const form = themeSelectorTemplate.content.firstElementChild
  308. this.attachShadow({ mode: 'open' })
  309. this.shadowRoot.appendChild(form.cloneNode(true))
  310. }
  311. connectedCallback() {
  312. const form = this.shadowRoot.querySelector('form')
  313. form.addEventListener('change', (e) => {
  314. const chosenColorScheme = e.target.value
  315. localStorage.setItem('theme', chosenColorScheme)
  316. toggleTheme(chosenColorScheme)
  317. })
  318. const selectedTheme = localStorage.getItem('theme')
  319. if (selectedTheme && selectedTheme !== 'undefined') {
  320. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  321. }
  322. }
  323. }
  324. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  325. window.addEventListener('load', () => {
  326. let colorsLayer = undefined
  327. let hasDarkRules = false
  328. for (const styleSheet of Array.from(document.styleSheets)) {
  329. let mediaRules = []
  330. for (const layerRule of styleSheet.cssRules) {
  331. if (!(layerRule instanceof CSSLayerBlockRule)) {
  332. continue
  333. }
  334. if (layerRule.name === 'colors') {
  335. colorsLayer = layerRule
  336. }
  337. for (const cssRule of layerRule.cssRules) {
  338. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  339. continue
  340. }
  341. // WARNING: Safari does not have/supports `conditionText`.
  342. if (cssRule.conditionText) {
  343. if (cssRule.conditionText !== prefersColorSchemeDark) {
  344. continue
  345. }
  346. } else {
  347. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  348. continue
  349. }
  350. }
  351. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  352. }
  353. }
  354. // WARNING: do not try to insert a Rule to a styleSheet you are
  355. // currently iterating on, otherwise the browser will be stuck
  356. // in a infinite loop…
  357. for (const mediaRule of mediaRules) {
  358. // Safari requires the `0` second parameter (even if default).
  359. colorsLayer.insertRule(mediaRule.cssText, 0)
  360. hasDarkRules = true
  361. }
  362. }
  363. if (hasDarkRules) {
  364. if ('customElements' in window && !customElements.get('theme-toggle')) {
  365. customElements.define('theme-toggle', ThemeToggle)
  366. }
  367. }
  368. })
  369. </script>
  370. </body>
  371. </html>