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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  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="De la pluie verglaçante depuis 2 jours. Une cheville pas encore opérationnelle. Mais de l’envie et une réservation depuis deux mois pour une première sortie hivernale en refuge. Ensemble. La route pour y aller est déjà épique et des flocons gros comme des pastèques s’écrasent sur le pare-brise. Il est rare au Québec de suivre un pickup qui ne dépasse pas les 70 km/h sur l’autoroute.">
  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-01-27">27 janvier 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/01/26/"
  145. title="Publication précédente : Cargo">← 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/01/28/"
  152. title="Publication suivante : Jour 2">Suivant →</a>
  153. </p>
  154. </nav>
  155. <p>De la pluie verglaçante depuis 2&nbsp;jours. Une cheville pas encore opérationnelle. Mais de l’envie et une réservation depuis deux mois pour une première sortie hivernale en refuge. Ensemble. La route pour y aller est déjà épique et des flocons gros comme des pastèques s’écrasent sur le pare-brise. Il est rare au Québec de suivre un <em>pickup</em> qui ne dépasse pas les 70&#8239;km/h sur&nbsp;l’autoroute.</p>
  156. <p>C’est aussi la première sortie pour la <em>pulka</em> ramenée de France cet été. Le temps de charger et de se préparer, la neige est déjà moins intense. Néanmoins, dès les premières centaines de mètres, je sens bien que ça va être galère. La montée est vraiment pentue et les skis-raquettes de l’enfant ne sont pas adaptés à ces conditions ce qui le rend <del>pénible</del> ronchon. De mon côté, avec les peaux complètes ça passe mais je force énormément car je dois bien avoir 35&#8239;kg à tracter derrière. On fait au moins deux kilomètres comme ça… avant de se rendre compte que l’on est sur la montée de ski de randonnée de la Montagne&nbsp;Noire&#8239;!</p>
  157. <figure>
  158. <a href="/static/david/2024/2024-01-27-enfant-qui-skie.jpg"
  159. title="Cliquer pour une version haute résolution">
  160. <img
  161. src="/static/david/2024/2024-01-27-enfant-qui-skie.jpg"
  162. width="3024" height="4032"
  163. srcset="/static/david/2024/2024-01-27-enfant-qui-skie.jpg 3024w, /static/david/2024/2024-01-27-enfant-qui-skie_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-qui-skie_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-qui-skie_1320x880.jpg 1320w"
  164. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  165. loading="lazy"
  166. decoding="async"
  167. alt="Un enfant en train de skier sur un chemin.">
  168. </a>
  169. <figcaption>Avant que tout ne&nbsp;dérape.</figcaption>
  170. </figure>
  171. <p>Grosse erreur d’orientation qui nous coûte cher&nbsp;: impossible de descendre par cette montée et couper par la forêt serait très hasardeux, sans compter mon état. L’heure tourne et on finit par descendre en ayant déchaussé tous les deux. Deux paires de skis en plus à retenir à bout de bras en ayant le choix entre un chemin de 30&nbsp;cm de large tapé qui glisse ou un mètre de poudreuse tout autour. C’est un peu casse patte, juste ce qu’il me fallait pour une rééducation&nbsp;active&nbsp;😬.</p>
  172. <figure>
  173. <a href="/static/david/2024/2024-01-27-attache-pulka.jpg"
  174. title="Cliquer pour une version haute résolution">
  175. <img
  176. src="/static/david/2024/2024-01-27-attache-pulka.jpg"
  177. width="2320" height="3088"
  178. srcset="/static/david/2024/2024-01-27-attache-pulka.jpg 2320w, /static/david/2024/2024-01-27-attache-pulka_660x440.jpg 660w, /static/david/2024/2024-01-27-attache-pulka_990x660.jpg 990w, /static/david/2024/2024-01-27-attache-pulka_1320x880.jpg 1320w"
  179. sizes="min(100vw, calc(100vh * 2320 / 3088))"
  180. loading="lazy"
  181. decoding="async"
  182. alt="La pulka visible depuis mon entre-jambe.">
  183. </a>
  184. <figcaption>Un point de vue&nbsp;discutable.</figcaption>
  185. </figure>
  186. <p>Quasi-retour au point de départ, à deux doigts d’abandonner vue l’énergie que l’on vient de dépenser&nbsp;: <q lang="fr">c’est pas la grosse marrade</q>. Une pause bienvenue et le chemin loupé qui semble accueillant me font hésiter tout de même. Je prends finalement la décision d’y aller car dans mon souvenir c’est accessible (si on ne se trompe pas de sentier…). Prise de risque assez élevée au passage, il ne faut pas d’autres erreurs ou problèmes sur le trajet ou on va finir à la frontale (au mieux). Difficile de savoir jusqu’où est-ce que ça va être tracé&nbsp;aussi.</p>
  187. <p>Ce nouveau chemin est beaucoup plus adapté à notre niveau (de forme). Le système d’attache de la <em>pulka</em> est loin d’être optimal mais ça passe, même entre les arbres. L’enfant prend confiance et s’amuse dans les descentes. On arrive enfin au refuge sans encombres, il est 15&#8239;h passé et on n’a pas mangé, à peine bu 200&nbsp;ml depuis le départ… il va falloir recharger les corps avant demain sinon ça va&nbsp;piquer.</p>
  188. <figure>
  189. <a href="/static/david/2024/2024-01-27-dessins-cartes.jpg"
  190. title="Cliquer pour une version haute résolution">
  191. <img
  192. src="/static/david/2024/2024-01-27-dessins-cartes.jpg"
  193. width="3024" height="4032"
  194. srcset="/static/david/2024/2024-01-27-dessins-cartes.jpg 3024w, /static/david/2024/2024-01-27-dessins-cartes_660x440.jpg 660w, /static/david/2024/2024-01-27-dessins-cartes_990x660.jpg 990w, /static/david/2024/2024-01-27-dessins-cartes_1320x880.jpg 1320w"
  195. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  196. loading="lazy"
  197. decoding="async"
  198. alt="Des cartes dessinées à la bougie visible en fond.">
  199. </a>
  200. <figcaption>Le dessin à la bougie, c’est mieux à&nbsp;deux.</figcaption>
  201. </figure>
  202. <p>Heureusement, cet endroit est assez fabuleux et il y a une ambiance brumeuse qui lui donne un aspect féérique. Une fois repus, on va faire un tour sur le lac en contrebas. Il sautille sur le chemin (moi pas) et semble déjà avoir oublié les péripéties de la matinée. On passe une bonne soirée à faire des cadavre-exquis et à dessiner des cartes. Il fait 27°C dans le refuge, on supporte nos caleçons mais c’est un peu limite pour aller chercher la neige à faire&nbsp;fondre&#8239;!</p>
  203. <figure>
  204. <a href="/static/david/2024/2024-01-27-enfant-lac.jpg"
  205. title="Cliquer pour une version haute résolution">
  206. <img
  207. src="/static/david/2024/2024-01-27-enfant-lac.jpg"
  208. width="4032" height="3024"
  209. srcset="/static/david/2024/2024-01-27-enfant-lac.jpg 4032w, /static/david/2024/2024-01-27-enfant-lac_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-lac_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-lac_1320x880.jpg 1320w"
  210. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  211. loading="lazy"
  212. decoding="async"
  213. alt="Un enfant sur un lac gelé (le lac, pas l’enfant).">
  214. </a>
  215. <figcaption>Un enfant sur un lac gelé (le lac, pas l’enfant). Il est 17h17. Je crois que j’aime de plus en plus les photos qui ont du&nbsp;grain.</figcaption>
  216. </figure>
  217. <p>Vu le bruit que font les souris alors qu’il y a encore de la lumière, la nuit risque de ne pas être de tout repos… On s’endort au son du poêle qui&nbsp;craque.</p>
  218. <nav>
  219. <p>
  220. <a href="/david/2024/experience/"
  221. title="Liste de tous les articles 2024 associés à cette étiquette"
  222. rel="tag">#expérience</a>
  223. <a href="/david/2024/foret/"
  224. title="Liste de tous les articles 2024 associés à cette étiquette"
  225. rel="tag">#forêt</a>
  226. <a href="/david/2024/parentalite/"
  227. title="Liste de tous les articles 2024 associés à cette étiquette"
  228. rel="tag">#parentalité</a>
  229. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  230. </p>
  231. </nav>
  232. <nav>
  233. <p>
  234. <a rel="prev"
  235. href="/david/2024/01/26/"
  236. title="Publication précédente : Cargo">← Précédent</a> •
  237. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  238. • <a rel="next"
  239. href="/david/2024/01/28/"
  240. title="Publication suivante : Jour 2">Suivant →</a>
  241. </p>
  242. </nav>
  243. <form action="/david/recherche/" method="get">
  244. <fieldset>
  245. <legend>Recherche</legend>
  246. <label for="input-search">Termes de votre recherche :</label>
  247. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  248. <input type="submit" value="Chercher">
  249. <p id="indexation-infos">
  250. <small>
  251. Seuls les contenus de ces 8 dernières années sont indexés.
  252. </small>
  253. </p>
  254. </fieldset>
  255. </form>
  256. <aside>
  257. <theme-toggle></theme-toggle>
  258. </aside>
  259. </article>
  260. <hr>
  261. <footer>
  262. <p>
  263. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  264. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  265. <a href="http://larlet.com"
  266. title="Go to my English profile"
  267. data-instant>Pro</a>
  268. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  269. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  270. </p>
  271. <template id="theme-selector">
  272. <form>
  273. <style type="text/css">
  274. fieldset div {
  275. text-align: center;
  276. }
  277. </style>
  278. <fieldset>
  279. <legend>Thème</legend>
  280. <div>
  281. <label>
  282. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  283. Auto
  284. </label>
  285. <label>
  286. <input type="radio" value="dark" name="chosen-color-scheme">
  287. Foncé
  288. </label>
  289. <label>
  290. <input type="radio" value="light" name="chosen-color-scheme">
  291. Clair
  292. </label>
  293. </div>
  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. class ThemeToggle extends HTMLElement {
  301. constructor() {
  302. super()
  303. const themeSelectorTemplate = document.querySelector('#theme-selector')
  304. const form = themeSelectorTemplate.content.firstElementChild
  305. this.attachShadow({ mode: 'open' })
  306. this.shadowRoot.appendChild(form.cloneNode(true))
  307. }
  308. connectedCallback() {
  309. const form = this.shadowRoot.querySelector('form')
  310. form.addEventListener('change', (e) => {
  311. const chosenColorScheme = e.target.value
  312. localStorage.setItem('theme', chosenColorScheme)
  313. toggleTheme(chosenColorScheme)
  314. })
  315. const selectedTheme = localStorage.getItem('theme')
  316. if (selectedTheme && selectedTheme !== 'undefined') {
  317. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  318. }
  319. }
  320. }
  321. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  322. window.addEventListener('load', () => {
  323. let colorsLayer = undefined
  324. let hasDarkRules = false
  325. for (const styleSheet of Array.from(document.styleSheets)) {
  326. let mediaRules = []
  327. for (const layerRule of styleSheet.cssRules) {
  328. if (!(layerRule instanceof CSSLayerBlockRule)) {
  329. continue
  330. }
  331. if (layerRule.name === 'colors') {
  332. colorsLayer = layerRule
  333. }
  334. for (const cssRule of layerRule.cssRules) {
  335. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  336. continue
  337. }
  338. // WARNING: Safari does not have/supports `conditionText`.
  339. if (cssRule.conditionText) {
  340. if (cssRule.conditionText !== prefersColorSchemeDark) {
  341. continue
  342. }
  343. } else {
  344. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  345. continue
  346. }
  347. }
  348. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  349. }
  350. }
  351. // WARNING: do not try to insert a Rule to a styleSheet you are
  352. // currently iterating on, otherwise the browser will be stuck
  353. // in a infinite loop…
  354. for (const mediaRule of mediaRules) {
  355. // Safari requires the `0` second parameter (even if default).
  356. colorsLayer.insertRule(mediaRule.cssText, 0)
  357. hasDarkRules = true
  358. }
  359. }
  360. if (hasDarkRules) {
  361. if ('customElements' in window && !customElements.get('theme-toggle')) {
  362. customElements.define('theme-toggle', ThemeToggle)
  363. }
  364. }
  365. })
  366. </script>
  367. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  368. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  369. <script>
  370. tippy('[data-tippy]', {
  371. content(reference) {
  372. reference.addEventListener('click', (e) => e.preventDefault())
  373. return `
  374. <h3 lang="fr">
  375. <img src="${reference.dataset.favicon}" loading="lazy">
  376. <a href="${reference.dataset.source}"
  377. >Article sur ${reference.dataset.domain}</a></h3>
  378. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  379. <div class="tippy-links" lang="fr">
  380. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  381. </div>
  382. `
  383. },
  384. allowHTML: true,
  385. interactive: true,
  386. delay: [150, 700],
  387. hideOnClick: false
  388. })
  389. </script>
  390. <script type="module">
  391. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  392. const markObserver = new IntersectionObserver((entries, observer) => {
  393. const computedStyle = getComputedStyle(document.documentElement)
  394. const markBackground = computedStyle.getPropertyValue('--mark-background')
  395. for (const entry of entries) {
  396. if (entry.intersectionRatio === 0) continue
  397. const markElement = entry.target
  398. markElement.style.backgroundColor = 'inherit'
  399. const annotation = annotate(
  400. markElement, {
  401. type: 'highlight',
  402. multiline: true,
  403. color: markBackground,
  404. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  405. animate: false
  406. }
  407. )
  408. annotation.show()
  409. observer.unobserve(markElement)
  410. }
  411. }, {threshold: 1.0})
  412. for (const markElement of document.querySelectorAll('mark')) {
  413. markObserver.observe(markElement)
  414. }
  415. </script>
  416. </body>
  417. </html>