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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  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 1
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="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 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 bien.">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. .tippy-content {
  109. min-width: 280px;
  110. padding: .5rem;
  111. font-size: calc(var(--fluid-0) * 0.8);
  112. font-family: var(--labor-font);
  113. letter-spacing: initial;
  114. text-align: left;
  115. }
  116. .tippy-content h3 {
  117. margin-top: 0;
  118. }
  119. .tippy-content h3 img {
  120. max-width: 2rem;
  121. max-height: 2rem;
  122. display: inline-block;
  123. }
  124. .tippy-content .tippy-links {
  125. display: flex;
  126. justify-content: space-around;
  127. }
  128. .tippy-content a {
  129. padding: .4rem;
  130. color: #F06048;
  131. }
  132. </style>
  133. <body data-instant-intensity="viewport-all">
  134. <article>
  135. <header>
  136. <hgroup>
  137. <h1>Jour 1</h1>
  138. <p>Le <time datetime="2024-02-24">24 février 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/02/23/"
  145. title="Publication précédente : Préparatifs">← Précédent</a> •
  146. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  147. <a href="/david/recherche/"
  148. title="Aller à la page de recherche"
  149. rel="search" data-no-instant>Recherche</a>
  150. • <a rel="next"
  151. href="/david/2024/02/25/"
  152. title="Publication suivante : Jour 2">Suivant →</a>
  153. </p>
  154. </nav>
  155. <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>
  156. <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>
  157. <figure>
  158. <a href="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
  159. title="Cliquer pour une version haute résolution">
  160. <img
  161. src="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
  162. width="4032" height="3024"
  163. 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"
  164. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  165. loading="lazy"
  166. decoding="async"
  167. alt="La pulka devant le lac bœuf.">
  168. </a>
  169. <figcaption>La joie d’arriver au lieu de campement avec mes deux&nbsp;chevilles.</figcaption>
  170. </figure>
  171. <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 le lointain qui vient casser un peu l’ambiance. Le son porte très loin en&nbsp;hiver.</p>
  172. <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>
  173. <figure>
  174. <a href="/static/david/2024/2024-02-24-tente-ouverte.jpg"
  175. title="Cliquer pour une version haute résolution">
  176. <img
  177. src="/static/david/2024/2024-02-24-tente-ouverte.jpg"
  178. width="4032" height="3024"
  179. 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"
  180. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  181. loading="lazy"
  182. decoding="async"
  183. alt="Une tente ouverte avec un duvet à l’intérieur.">
  184. </a>
  185. <figcaption>Chambre avec&nbsp;vue.</figcaption>
  186. </figure>
  187. <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>
  188. <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>
  189. <nav>
  190. <p>
  191. <a href="/david/2024/aventure/"
  192. title="Liste de tous les articles 2024 associés à cette étiquette"
  193. rel="tag">#aventure</a>
  194. <a href="/david/2024/foret/"
  195. title="Liste de tous les articles 2024 associés à cette étiquette"
  196. rel="tag">#forêt</a>
  197. <a href="/david/2024/sport/"
  198. title="Liste de tous les articles 2024 associés à cette étiquette"
  199. rel="tag">#sport</a>
  200. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  201. </p>
  202. </nav>
  203. <nav>
  204. <p>
  205. <a rel="prev"
  206. href="/david/2024/02/23/"
  207. title="Publication précédente : Préparatifs">← Précédent</a> •
  208. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  209. • <a rel="next"
  210. href="/david/2024/02/25/"
  211. title="Publication suivante : Jour 2">Suivant →</a>
  212. </p>
  213. </nav>
  214. <form action="/david/recherche/" method="get">
  215. <fieldset>
  216. <legend>Recherche</legend>
  217. <label for="input-search">Termes de votre recherche :</label>
  218. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  219. <input type="submit" value="Chercher">
  220. <p id="indexation-infos">
  221. <small>
  222. Seuls les contenus de ces 8 dernières années sont indexés.
  223. </small>
  224. </p>
  225. </fieldset>
  226. </form>
  227. <aside>
  228. <theme-toggle></theme-toggle>
  229. </aside>
  230. </article>
  231. <hr>
  232. <footer>
  233. <p>
  234. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  235. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  236. <a href="http://larlet.com"
  237. title="Go to my English profile"
  238. data-instant>Pro</a>
  239. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  240. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  241. </p>
  242. <template id="theme-selector">
  243. <form>
  244. <style type="text/css">
  245. fieldset div {
  246. text-align: center;
  247. }
  248. </style>
  249. <fieldset>
  250. <legend>Thème</legend>
  251. <div>
  252. <label>
  253. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  254. Auto
  255. </label>
  256. <label>
  257. <input type="radio" value="dark" name="chosen-color-scheme">
  258. Foncé
  259. </label>
  260. <label>
  261. <input type="radio" value="light" name="chosen-color-scheme">
  262. Clair
  263. </label>
  264. </div>
  265. </fieldset>
  266. </form>
  267. </template>
  268. </footer>
  269. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  270. <script>
  271. class ThemeToggle extends HTMLElement {
  272. constructor() {
  273. super()
  274. const themeSelectorTemplate = document.querySelector('#theme-selector')
  275. const form = themeSelectorTemplate.content.firstElementChild
  276. this.attachShadow({ mode: 'open' })
  277. this.shadowRoot.appendChild(form.cloneNode(true))
  278. }
  279. connectedCallback() {
  280. const form = this.shadowRoot.querySelector('form')
  281. form.addEventListener('change', (e) => {
  282. const chosenColorScheme = e.target.value
  283. localStorage.setItem('theme', chosenColorScheme)
  284. toggleTheme(chosenColorScheme)
  285. })
  286. const selectedTheme = localStorage.getItem('theme')
  287. if (selectedTheme && selectedTheme !== 'undefined') {
  288. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  289. }
  290. }
  291. }
  292. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  293. window.addEventListener('load', () => {
  294. let colorsLayer = undefined
  295. let hasDarkRules = false
  296. for (const styleSheet of Array.from(document.styleSheets)) {
  297. let mediaRules = []
  298. for (const layerRule of styleSheet.cssRules) {
  299. if (!(layerRule instanceof CSSLayerBlockRule)) {
  300. continue
  301. }
  302. if (layerRule.name === 'colors') {
  303. colorsLayer = layerRule
  304. }
  305. for (const cssRule of layerRule.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. }
  322. // WARNING: do not try to insert a Rule to a styleSheet you are
  323. // currently iterating on, otherwise the browser will be stuck
  324. // in a infinite loop…
  325. for (const mediaRule of mediaRules) {
  326. // Safari requires the `0` second parameter (even if default).
  327. colorsLayer.insertRule(mediaRule.cssText, 0)
  328. hasDarkRules = true
  329. }
  330. }
  331. if (hasDarkRules) {
  332. if ('customElements' in window && !customElements.get('theme-toggle')) {
  333. customElements.define('theme-toggle', ThemeToggle)
  334. }
  335. }
  336. })
  337. </script>
  338. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  339. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  340. <script>
  341. tippy('[data-tippy]', {
  342. content(reference) {
  343. reference.addEventListener('click', (e) => e.preventDefault())
  344. return `
  345. <h3 lang="fr">
  346. <img src="${reference.dataset.favicon}" loading="lazy">
  347. <a href="${reference.dataset.source}"
  348. >Article sur ${reference.dataset.domain}</a></h3>
  349. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  350. <div class="tippy-links" lang="fr">
  351. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  352. </div>
  353. `
  354. },
  355. allowHTML: true,
  356. interactive: true,
  357. delay: [150, 700],
  358. hideOnClick: false
  359. })
  360. </script>
  361. <script type="module">
  362. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  363. const markObserver = new IntersectionObserver((entries, observer) => {
  364. const computedStyle = getComputedStyle(document.documentElement)
  365. const markBackground = computedStyle.getPropertyValue('--mark-background')
  366. for (const entry of entries) {
  367. if (entry.intersectionRatio === 0) continue
  368. const markElement = entry.target
  369. markElement.style.backgroundColor = 'inherit'
  370. const annotation = annotate(
  371. markElement, {
  372. type: 'highlight',
  373. multiline: true,
  374. color: markBackground,
  375. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  376. animate: false
  377. }
  378. )
  379. annotation.show()
  380. observer.unobserve(markElement)
  381. }
  382. }, {threshold: 1.0})
  383. for (const markElement of document.querySelectorAll('mark')) {
  384. markObserver.observe(markElement)
  385. }
  386. </script>
  387. </body>
  388. </html>