Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  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="Même avec la nourriture suspendue, les souris on fait un sacré raffut. Elles devaient elles aussi avoir trop chaud. Après avoir dormi avec 2 fenêtres ouvertes, il fait tout de même 18°C au réveil. Parfait pour notre gruau de camping (seconde tradition avec les nouilles instantanées), cette fois à la neige fondue.">
  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-01-28">28 janvier 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/01/27/"
  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/01/29/"
  150. title="Publication suivante : Déploiement">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>Même avec la nourriture suspendue, les souris on fait un sacré raffut. Elles devaient elles aussi avoir trop chaud. Après avoir dormi avec 2&nbsp;fenêtres ouvertes, il fait tout de même 18°C au réveil. Parfait pour notre gruau de camping (seconde tradition avec les nouilles instantanées), cette fois à la neige&nbsp;fondue.</p>
  154. <p>On prend le temps d’aller faire un petit tour à skis sur le lac car c’est une première pour l’enfant. On suit des traces de lapins qui nous mènent à un point d’eau liquide qui est un point de concentration de la faune locale. Si on avait su avant, on aurait peut-être pris le risque de s’en approcher avec nos gourdes. C’est peut-être mieux de ne pas l’avoir su&nbsp;avant.</p>
  155. <figure>
  156. <a href="/static/david/2024/2024-01-28-lac-foret.jpg"
  157. title="Cliquer pour une version haute résolution">
  158. <img
  159. src="/static/david/2024/2024-01-28-lac-foret.jpg"
  160. width="3024" height="4032"
  161. srcset="/static/david/2024/2024-01-28-lac-foret.jpg 3024w, /static/david/2024/2024-01-28-lac-foret_660x440.jpg 660w, /static/david/2024/2024-01-28-lac-foret_990x660.jpg 990w, /static/david/2024/2024-01-28-lac-foret_1320x880.jpg 1320w"
  162. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  163. loading="lazy"
  164. decoding="async"
  165. alt="Un lac gelé avec la forêt en arrière plan.">
  166. </a>
  167. <figcaption>Une bonne ambiance hivernale mais sans la fraîcheur de la&nbsp;saison.</figcaption>
  168. </figure>
  169. <p>Une fois le matériel rangé, on repart. Cette fois j’ai resserré le système de tractage improvisé avec des tuyaux en PVC de la <em>pulka</em>. Et j’ai aussi troqué les peaux complètes pour des demi-peaux, ça me permet de glisser un peu plus dans les descentes mais quand même pas trop. Difficile de ne pas forcer sur la cheville lorsqu’on est contraint par l’étroitesse du chemin. Bon puis il y a vraiment trop d’arbres dans ces&nbsp;forêts&nbsp;:p.</p>
  170. <p>On s’amuse vraiment sur ce retour et je suis obligé d’imposer des pauses pour ne pas arriver dans le même état que la veille (et me faire semer). L’enfant serait partant pour ne pas s’arrêter du tout, ça fait plaisir. On prend confiance et on enchaîne les bosses. Nos seules traces de la veille aident pas mal. Les conditions sont vraiment chaudes pour la&nbsp;saison.</p>
  171. <figure>
  172. <a href="/static/david/2024/2024-01-28-neige-collante.jpg"
  173. title="Cliquer pour une version haute résolution">
  174. <img
  175. src="/static/david/2024/2024-01-28-neige-collante.jpg"
  176. width="4032" height="3024"
  177. srcset="/static/david/2024/2024-01-28-neige-collante.jpg 4032w, /static/david/2024/2024-01-28-neige-collante_660x440.jpg 660w, /static/david/2024/2024-01-28-neige-collante_990x660.jpg 990w, /static/david/2024/2024-01-28-neige-collante_1320x880.jpg 1320w"
  178. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  179. loading="lazy"
  180. decoding="async"
  181. alt="De la neige qui pend d’un arbre.">
  182. </a>
  183. <figcaption>Lorsqu’on me demande si la neige était&nbsp;collante.</figcaption>
  184. </figure>
  185. <p>Nous sommes progressivement rejoints par les skieur·euses qui descendent à travers les arbres et à une centaine de mètres de la voiture, il y a un passage plus difficile que les autres&nbsp;: une pente qui arrive sur un pont. On passe sur le côté pour être retenus par la neige fraîche mais la <em>pulka</em> décide de faire le drapeau et de prendre la «&nbsp;piste&nbsp;» tapée principale. J’essaye de la rattraper tant bien que mal tout en attendant / prenant soin de l’enfant et je me retrouve dans le décor. Encore. Ce n’est pas tant la chute que de forcer pour s’extraire de la neige tout en étant harnaché et les skis empêtrés dans les arbres qui me fait forcer sur les mauvais tendons… si près du but c’est&nbsp;rageant&nbsp;😔.</p>
  186. <p>Une sortie haute en émotions. Je vais maintenant pouvoir prendre le temps de soigner cette <a href="/david/2024/01/09/" title="Blessure">blessure</a>&nbsp;correctement.</p>
  187. <nav>
  188. <p>
  189. <a href="/david/2024/experience/"
  190. title="Liste de tous les articles 2024 associés à cette étiquette"
  191. rel="tag">#expérience</a>
  192. <a href="/david/2024/foret/"
  193. title="Liste de tous les articles 2024 associés à cette étiquette"
  194. rel="tag">#forêt</a>
  195. <a href="/david/2024/parentalite/"
  196. title="Liste de tous les articles 2024 associés à cette étiquette"
  197. rel="tag">#parentalité</a>
  198. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  199. </p>
  200. </nav>
  201. <nav>
  202. <p>
  203. <a rel="prev"
  204. href="/david/2024/01/27/"
  205. title="Publication précédente : Jour&nbsp;1">← Précédent</a> •
  206. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  207. • <a rel="next"
  208. href="/david/2024/01/29/"
  209. title="Publication suivante : Déploiement">Suivant →</a>
  210. </p>
  211. </nav>
  212. <form action="/david/recherche/" method="get">
  213. <fieldset>
  214. <legend>Recherche</legend>
  215. <label for="input-search">Termes de votre recherche :</label>
  216. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  217. <input type="submit" value="Chercher">
  218. <p id="indexation-infos">
  219. <small>
  220. Seuls les contenus de ces 8 dernières années sont indexés.
  221. </small>
  222. </p>
  223. </fieldset>
  224. </form>
  225. <aside>
  226. <theme-toggle></theme-toggle>
  227. </aside>
  228. </article>
  229. <hr>
  230. <footer>
  231. <p>
  232. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  233. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  234. <a href="http://larlet.com"
  235. title="Go to my English profile"
  236. data-instant>Pro</a>
  237. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  238. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  239. </p>
  240. <template id="theme-selector">
  241. <form>
  242. <style type="text/css">
  243. fieldset div {
  244. text-align: center;
  245. }
  246. </style>
  247. <fieldset>
  248. <legend>Thème</legend>
  249. <div>
  250. <label>
  251. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  252. Auto
  253. </label>
  254. <label>
  255. <input type="radio" value="dark" name="chosen-color-scheme">
  256. Foncé
  257. </label>
  258. <label>
  259. <input type="radio" value="light" name="chosen-color-scheme">
  260. Clair
  261. </label>
  262. </div>
  263. </fieldset>
  264. </form>
  265. </template>
  266. </footer>
  267. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  268. <script>
  269. class ThemeToggle extends HTMLElement {
  270. constructor() {
  271. super()
  272. const themeSelectorTemplate = document.querySelector('#theme-selector')
  273. const form = themeSelectorTemplate.content.firstElementChild
  274. this.attachShadow({ mode: 'open' })
  275. this.shadowRoot.appendChild(form.cloneNode(true))
  276. }
  277. connectedCallback() {
  278. const form = this.shadowRoot.querySelector('form')
  279. form.addEventListener('change', (e) => {
  280. const chosenColorScheme = e.target.value
  281. localStorage.setItem('theme', chosenColorScheme)
  282. toggleTheme(chosenColorScheme)
  283. })
  284. const selectedTheme = localStorage.getItem('theme')
  285. if (selectedTheme && selectedTheme !== 'undefined') {
  286. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  287. }
  288. }
  289. }
  290. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  291. window.addEventListener('load', () => {
  292. let colorsLayer = undefined
  293. let hasDarkRules = false
  294. for (const styleSheet of Array.from(document.styleSheets)) {
  295. let mediaRules = []
  296. for (const layerRule of styleSheet.cssRules) {
  297. if (!(layerRule instanceof CSSLayerBlockRule)) {
  298. continue
  299. }
  300. if (layerRule.name === 'colors') {
  301. colorsLayer = layerRule
  302. }
  303. for (const cssRule of layerRule.cssRules) {
  304. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  305. continue
  306. }
  307. // WARNING: Safari does not have/supports `conditionText`.
  308. if (cssRule.conditionText) {
  309. if (cssRule.conditionText !== prefersColorSchemeDark) {
  310. continue
  311. }
  312. } else {
  313. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  314. continue
  315. }
  316. }
  317. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  318. }
  319. }
  320. // WARNING: do not try to insert a Rule to a styleSheet you are
  321. // currently iterating on, otherwise the browser will be stuck
  322. // in a infinite loop…
  323. for (const mediaRule of mediaRules) {
  324. // Safari requires the `0` second parameter (even if default).
  325. colorsLayer.insertRule(mediaRule.cssText, 0)
  326. hasDarkRules = true
  327. }
  328. }
  329. if (hasDarkRules) {
  330. if ('customElements' in window && !customElements.get('theme-toggle')) {
  331. customElements.define('theme-toggle', ThemeToggle)
  332. }
  333. }
  334. })
  335. </script>
  336. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  337. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  338. <script>
  339. tippy('[data-tippy]', {
  340. content(reference) {
  341. reference.addEventListener('click', (e) => e.preventDefault())
  342. return `
  343. <h3 lang="fr">
  344. <img src="${reference.dataset.favicon}" loading="lazy">
  345. <a href="${reference.dataset.source}"
  346. >Article sur ${reference.dataset.domain}</a></h3>
  347. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  348. <div class="tippy-links" lang="fr">
  349. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  350. </div>
  351. `
  352. },
  353. allowHTML: true,
  354. interactive: true,
  355. delay: [150, 700],
  356. hideOnClick: false
  357. })
  358. </script>
  359. </body>
  360. </html>