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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  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="Réveil à 5h30. Ce qui devait être une sortie Légère & Rapide se révèle ne pas être si Légère (autour de 12kg) car j’ai 4 jours de nourriture sur le dos et que des températures de -10°C sont annoncées ce qui décide de la taille (et donc poids) du duvet notamment.">
  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. <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 1</h1>
  136. <p>Le <time datetime="2024-04-20">20 avril 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/04/18/"
  143. title="Publication précédente : Calme">← 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/04/22/"
  150. title="Publication suivante : Alimentation">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>Réveil à 5h30. Ce qui devait être une sortie <em>Légère &amp; Rapide</em> se révèle ne pas être si <em>Légère</em> (autour de 12kg) car j’ai 4&nbsp;jours de nourriture sur le dos et que des températures de -10°C sont annoncées ce qui décide de la taille (et donc poids) du duvet&nbsp;notamment.</p>
  154. <p>Niveau <em>Rapide</em>, si les premiers kilomètres se déroulent bien car la neige a fondue, dès que je passe dans la vallée suivante je me retrouve avec de la neige jusqu’aux genoux mais surtout qui casse sans prévenir pour atterrir dans le torrent de fonte en dessous. Je suis en baskets. La saisonnalité de mes erreurs me&nbsp;fatigue.</p>
  155. <p>Dès le 5<sup>e</sup> kilomètre, les pieds gelés et les chaussures trempées, je sens bien que ça ne va pas le faire. D’autant que je vais avoir du mal à faire sécher des chaussures avec les températures prévues en dormant dehors. Sans compter qu’à force de passer à travers la neige, j’ai ma cheville <a href="/david/2024/01/09/" title="Blessure">encore fragile</a> qui fatigue. Le vent se lève, il commence à grêler. Le moral&nbsp;flanche.</p>
  156. <p>Contre mauvaise fortune bon cœur, je décide de transformer ce Grand Tour en un Minuscule Tour à la journée. Il faut savoir ravaler son égo et accepter de revenir avec encore plus d’envie lorsque les conditions sont davantage acceptables —&nbsp;et surtout compatibles avec mes explorations du&nbsp;moment.</p>
  157. <p>J’ai&nbsp;appris&nbsp;:</p>
  158. <ul>
  159. <li>qu’il est possible de mettre chaque pied dans un sac type ZipLock pour essayer de garder ses chaussettes relativement sèches, attention une fois percés ça peut faire&nbsp;garrot&#8239;;</li>
  160. <li>qu’il est possible de faire sécher des chaussettes sur le sac et de faire un roulement à trois paires (toujours avoir une épingle à nourrice sur le sac) en changeant à chaque&nbsp;pause&#8239;;</li>
  161. <li>qu’il me faut des raquettes jusqu’à fin avril (je le réapprends tous les printemps, faudrait que ça commence à&nbsp;rentrer…)&#8239;;</li>
  162. <li>qu’il faut que je me rappelle que cette forêt a beaucoup plus de précipitations que ses voisines… et donc une période de fonte plus&nbsp;longue&#8239;;</li>
  163. <li>qu’il me faut trouver une meilleure manière de m’alimenter dans&nbsp;l’effort.</li>
  164. </ul>
  165. <p>Retour à la maison avec le physique pas trop amoché, il va falloir soigner le mental&nbsp;maintenant.</p>
  166. <nav>
  167. <p>
  168. <a href="/david/2024/apprentissage/"
  169. title="Liste de tous les articles 2024 associés à cette étiquette"
  170. rel="tag">#apprentissage</a>
  171. <a href="/david/2024/deception/"
  172. title="Liste de tous les articles 2024 associés à cette étiquette"
  173. rel="tag">#déception</a>
  174. <a href="/david/2024/foret/"
  175. title="Liste de tous les articles 2024 associés à cette étiquette"
  176. rel="tag">#forêt</a>
  177. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  178. </p>
  179. </nav>
  180. <nav>
  181. <p>
  182. <a rel="prev"
  183. href="/david/2024/04/18/"
  184. title="Publication précédente : Calme">← Précédent</a> •
  185. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  186. • <a rel="next"
  187. href="/david/2024/04/22/"
  188. title="Publication suivante : Alimentation">Suivant →</a>
  189. </p>
  190. </nav>
  191. <form action="/david/recherche/" method="get">
  192. <fieldset>
  193. <legend>Recherche</legend>
  194. <label for="input-search">Termes de votre recherche :</label>
  195. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  196. <input type="submit" value="Chercher">
  197. <p id="indexation-infos">
  198. <small>
  199. Seuls les contenus de ces 8 dernières années sont indexés.
  200. </small>
  201. </p>
  202. </fieldset>
  203. </form>
  204. <aside>
  205. <theme-toggle></theme-toggle>
  206. </aside>
  207. </article>
  208. <hr>
  209. <footer>
  210. <p>
  211. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  212. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  213. <a href="http://larlet.com"
  214. title="Go to my English profile"
  215. data-instant>Pro</a>
  216. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  217. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  218. </p>
  219. <template id="theme-selector">
  220. <form>
  221. <style type="text/css">
  222. fieldset div {
  223. text-align: center;
  224. }
  225. </style>
  226. <fieldset>
  227. <legend>Thème</legend>
  228. <div>
  229. <label>
  230. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  231. Auto
  232. </label>
  233. <label>
  234. <input type="radio" value="dark" name="chosen-color-scheme">
  235. Foncé
  236. </label>
  237. <label>
  238. <input type="radio" value="light" name="chosen-color-scheme">
  239. Clair
  240. </label>
  241. </div>
  242. </fieldset>
  243. </form>
  244. </template>
  245. </footer>
  246. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  247. <script>
  248. class ThemeToggle extends HTMLElement {
  249. constructor() {
  250. super()
  251. const themeSelectorTemplate = document.querySelector('#theme-selector')
  252. const form = themeSelectorTemplate.content.firstElementChild
  253. this.attachShadow({ mode: 'open' })
  254. this.shadowRoot.appendChild(form.cloneNode(true))
  255. }
  256. connectedCallback() {
  257. const form = this.shadowRoot.querySelector('form')
  258. form.addEventListener('change', (e) => {
  259. const chosenColorScheme = e.target.value
  260. localStorage.setItem('theme', chosenColorScheme)
  261. toggleTheme(chosenColorScheme)
  262. })
  263. const selectedTheme = localStorage.getItem('theme')
  264. if (selectedTheme && selectedTheme !== 'undefined') {
  265. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  266. }
  267. }
  268. }
  269. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  270. window.addEventListener('load', () => {
  271. let colorsLayer = undefined
  272. let hasDarkRules = false
  273. for (const styleSheet of Array.from(document.styleSheets)) {
  274. let mediaRules = []
  275. for (const layerRule of styleSheet.cssRules) {
  276. if (!(layerRule instanceof CSSLayerBlockRule)) {
  277. continue
  278. }
  279. if (layerRule.name === 'colors') {
  280. colorsLayer = layerRule
  281. }
  282. for (const cssRule of layerRule.cssRules) {
  283. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  284. continue
  285. }
  286. // WARNING: Safari does not have/supports `conditionText`.
  287. if (cssRule.conditionText) {
  288. if (cssRule.conditionText !== prefersColorSchemeDark) {
  289. continue
  290. }
  291. } else {
  292. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  293. continue
  294. }
  295. }
  296. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  297. }
  298. }
  299. // WARNING: do not try to insert a Rule to a styleSheet you are
  300. // currently iterating on, otherwise the browser will be stuck
  301. // in a infinite loop…
  302. for (const mediaRule of mediaRules) {
  303. // Safari requires the `0` second parameter (even if default).
  304. colorsLayer.insertRule(mediaRule.cssText, 0)
  305. hasDarkRules = true
  306. }
  307. }
  308. if (hasDarkRules) {
  309. if ('customElements' in window && !customElements.get('theme-toggle')) {
  310. customElements.define('theme-toggle', ThemeToggle)
  311. }
  312. }
  313. })
  314. </script>
  315. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  316. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  317. <script>
  318. tippy('[data-tippy]', {
  319. content(reference) {
  320. reference.addEventListener('click', (e) => e.preventDefault())
  321. return `
  322. <h3 lang="fr">
  323. <img src="${reference.dataset.favicon}" loading="lazy">
  324. <a href="${reference.dataset.source}"
  325. >Article sur ${reference.dataset.domain}</a></h3>
  326. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  327. <div class="tippy-links" lang="fr">
  328. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  329. </div>
  330. `
  331. },
  332. allowHTML: true,
  333. interactive: true,
  334. delay: [150, 700],
  335. hideOnClick: false
  336. })
  337. </script>
  338. <script type="module">
  339. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  340. const markObserver = new IntersectionObserver((entries, observer) => {
  341. const computedStyle = getComputedStyle(document.documentElement)
  342. const markBackground = computedStyle.getPropertyValue('--mark-background')
  343. for (const entry of entries) {
  344. if (entry.intersectionRatio === 0) continue
  345. const markElement = entry.target
  346. markElement.style.backgroundColor = 'inherit'
  347. const annotation = annotate(
  348. markElement, {
  349. type: 'highlight',
  350. multiline: true,
  351. color: markBackground,
  352. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  353. animate: false
  354. }
  355. )
  356. annotation.show()
  357. observer.unobserve(markElement)
  358. }
  359. }, {threshold: 1.0})
  360. for (const markElement of document.querySelectorAll('mark')) {
  361. markObserver.observe(markElement)
  362. }
  363. </script>
  364. </body>
  365. </html>