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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  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;2
  14. — David Larlet</title>
  15. <meta name="description" content="Sommeil entrecoupé, comme toujours, je finis par ouvrir une dernière fois les yeux après avoir passé plus de 12 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 à réchauffer…">
  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. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Jour&nbsp;2</h1>
  136. <p>Le <time datetime="2024-02-25">25 février 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/02/24/"
  143. title="Publication précédente : Jour&nbsp;1">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/02/26/"
  150. title="Publication suivante : Galaxie">Suivant →</a>
  151. </p>
  152. </nav>
  153. <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>
  154. <figure>
  155. <a href="/static/david/2024/2024-02-25-duvet-givre.jpg"
  156. title="Cliquer pour une version haute résolution">
  157. <img
  158. src="/static/david/2024/2024-02-25-duvet-givre.jpg"
  159. width="2317" height="3088"
  160. 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"
  161. sizes="min(100vw, calc(100vh * 2317 / 3088))"
  162. loading="lazy"
  163. decoding="async"
  164. alt="Mon nez qui dépasse de la cheminée du duvet toute givrée.">
  165. </a>
  166. <figcaption>OMG, they killed&nbsp;Kenny!</figcaption>
  167. </figure>
  168. <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>
  169. <figure>
  170. <a href="/static/david/2024/2024-02-25-foyer-firebox.jpg"
  171. title="Cliquer pour une version haute résolution">
  172. <img
  173. src="/static/david/2024/2024-02-25-foyer-firebox.jpg"
  174. width="3024" height="4032"
  175. 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"
  176. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  177. loading="lazy"
  178. decoding="async"
  179. alt="Un foyer avec ma popote et une buche sur laquelle on voit l’ombre de la marque (Firebox).">
  180. </a>
  181. <figcaption>Mon auto-correct vient de me corriger le texte alternatif en Firefox. Bien.</figcaption>
  182. </figure>
  183. <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>
  184. <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>
  185. <figure>
  186. <a href="/static/david/2024/2024-02-25-lac-boeuf.jpg"
  187. title="Cliquer pour une version haute résolution">
  188. <img
  189. src="/static/david/2024/2024-02-25-lac-boeuf.jpg"
  190. width="3024" height="4032"
  191. 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"
  192. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  193. loading="lazy"
  194. decoding="async"
  195. alt="Des traces de mes skis sur un lac gelé.">
  196. </a>
  197. <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>
  198. </figure>
  199. <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>
  200. <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>
  201. <nav>
  202. <p>
  203. <a href="/david/2024/aventure/"
  204. title="Liste de tous les articles 2024 associés à cette étiquette"
  205. rel="tag">#aventure</a>
  206. <a href="/david/2024/foret/"
  207. title="Liste de tous les articles 2024 associés à cette étiquette"
  208. rel="tag">#forêt</a>
  209. <a href="/david/2024/gratitude/"
  210. title="Liste de tous les articles 2024 associés à cette étiquette"
  211. rel="tag">#gratitude</a>
  212. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  213. </p>
  214. </nav>
  215. <nav>
  216. <p>
  217. <a rel="prev"
  218. href="/david/2024/02/24/"
  219. title="Publication précédente : Jour&nbsp;1">← Précédent</a> •
  220. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  221. • <a rel="next"
  222. href="/david/2024/02/26/"
  223. title="Publication suivante : Galaxie">Suivant →</a>
  224. </p>
  225. </nav>
  226. <form action="/david/recherche/" method="get">
  227. <fieldset>
  228. <legend>Recherche</legend>
  229. <label for="input-search">Termes de votre recherche :</label>
  230. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  231. <input type="submit" value="Chercher">
  232. <p id="indexation-infos">
  233. <small>
  234. Seuls les contenus de ces 8 dernières années sont indexés.
  235. </small>
  236. </p>
  237. </fieldset>
  238. </form>
  239. <aside>
  240. <theme-toggle></theme-toggle>
  241. </aside>
  242. </article>
  243. <hr>
  244. <footer>
  245. <p>
  246. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  247. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  248. <a href="http://larlet.com"
  249. title="Go to my English profile"
  250. data-instant>Pro</a>
  251. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  252. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  253. </p>
  254. <template id="theme-selector">
  255. <form>
  256. <style type="text/css">
  257. fieldset div {
  258. text-align: center;
  259. }
  260. </style>
  261. <fieldset>
  262. <legend>Thème</legend>
  263. <div>
  264. <label>
  265. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  266. Auto
  267. </label>
  268. <label>
  269. <input type="radio" value="dark" name="chosen-color-scheme">
  270. Foncé
  271. </label>
  272. <label>
  273. <input type="radio" value="light" name="chosen-color-scheme">
  274. Clair
  275. </label>
  276. </div>
  277. </fieldset>
  278. </form>
  279. </template>
  280. </footer>
  281. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  282. <script>
  283. class ThemeToggle extends HTMLElement {
  284. constructor() {
  285. super()
  286. const themeSelectorTemplate = document.querySelector('#theme-selector')
  287. const form = themeSelectorTemplate.content.firstElementChild
  288. this.attachShadow({ mode: 'open' })
  289. this.shadowRoot.appendChild(form.cloneNode(true))
  290. }
  291. connectedCallback() {
  292. const form = this.shadowRoot.querySelector('form')
  293. form.addEventListener('change', (e) => {
  294. const chosenColorScheme = e.target.value
  295. localStorage.setItem('theme', chosenColorScheme)
  296. toggleTheme(chosenColorScheme)
  297. })
  298. const selectedTheme = localStorage.getItem('theme')
  299. if (selectedTheme && selectedTheme !== 'undefined') {
  300. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  301. }
  302. }
  303. }
  304. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  305. window.addEventListener('load', () => {
  306. let colorsLayer = undefined
  307. let hasDarkRules = false
  308. for (const styleSheet of Array.from(document.styleSheets)) {
  309. let mediaRules = []
  310. for (const layerRule of styleSheet.cssRules) {
  311. if (!(layerRule instanceof CSSLayerBlockRule)) {
  312. continue
  313. }
  314. if (layerRule.name === 'colors') {
  315. colorsLayer = layerRule
  316. }
  317. for (const cssRule of layerRule.cssRules) {
  318. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  319. continue
  320. }
  321. // WARNING: Safari does not have/supports `conditionText`.
  322. if (cssRule.conditionText) {
  323. if (cssRule.conditionText !== prefersColorSchemeDark) {
  324. continue
  325. }
  326. } else {
  327. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  328. continue
  329. }
  330. }
  331. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  332. }
  333. }
  334. // WARNING: do not try to insert a Rule to a styleSheet you are
  335. // currently iterating on, otherwise the browser will be stuck
  336. // in a infinite loop…
  337. for (const mediaRule of mediaRules) {
  338. // Safari requires the `0` second parameter (even if default).
  339. colorsLayer.insertRule(mediaRule.cssText, 0)
  340. hasDarkRules = true
  341. }
  342. }
  343. if (hasDarkRules) {
  344. if ('customElements' in window && !customElements.get('theme-toggle')) {
  345. customElements.define('theme-toggle', ThemeToggle)
  346. }
  347. }
  348. })
  349. </script>
  350. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  351. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  352. <script>
  353. tippy('[data-tippy]', {
  354. content(reference) {
  355. reference.addEventListener('click', (e) => e.preventDefault())
  356. return `
  357. <h3 lang="fr">
  358. <img src="${reference.dataset.favicon}" loading="lazy">
  359. <a href="${reference.dataset.source}"
  360. >Article sur ${reference.dataset.domain}</a></h3>
  361. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  362. <div class="tippy-links" lang="fr">
  363. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  364. </div>
  365. `
  366. },
  367. allowHTML: true,
  368. interactive: true,
  369. delay: [150, 700],
  370. hideOnClick: false
  371. })
  372. </script>
  373. </body>
  374. </html>