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

5 ay önce
5 ay önce
5 ay önce
5 ay önce
5 ay önce
5 ay önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  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="Comme un besoin de forêt. Même s’il faut affronter les mouches noires. Même si on sort de quelques jours de canicule. Même si de la pluie est annoncée.">
  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-06-21">21 juin 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/06/20/"
  145. title="Publication précédente : Auto-promotion">← 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/06/22/"
  152. title="Publication suivante : Jour 2">Suivant →</a>
  153. </p>
  154. </nav>
  155. <p>Comme un besoin de forêt. Même s’il faut affronter les mouches noires. Même si on sort de quelques jours de canicule. Même si de la pluie est&nbsp;annoncée.</p>
  156. <p>Départ à 6h pour le Mont Ouareau, pas de performance en vue cette fois mais de la reconnaissance avec l’intention de faire la <a data-link-domain="clubpleinairsaint-donat.org" href="https://clubpleinairsaint-donat.org/cartes-et-sentiers/la-grande-boucle/">Grande Boucle</a> à un&nbsp;moment.</p>
  157. <p>Première surprise, la voiture n’est pas assaillie dès mon arrivée sur le parking. Je pourrais même me changer en extérieur mais je n’y crois pas encore. Dès les premiers pas dans la forêt, une fois éloigné de la route, je sens bien qu’il y a quelque chose qui cloche. J’entends distinctement les oiseaux mais il n’y a pas ce vrombissement estival qui caractérise une forêt <del>vivante</del> piquante par&nbsp;ici.</p>
  158. <p>Partageant ma surprise, Elle m’indique que les lieux <a data-link-domain="st-donat.metrio.net" href="https://st-donat.metrio.net/indicators/gestion_faune">sont traités</a>. Je suis en bordure de zone bleue (2). Les graphiques sont saisissants et je me demande quel est l’impact d’un tel traitement sur la polinisation, les oiseaux, les batraciens, les poissons, les insectes mais aussi les comportements des grands ongulets par exemple. J’ai du mal à apprécier une telle situation sans avoir plus d’informations. Ou j’aime bien&nbsp;chialer.</p>
  159. <p>J’arrive au alentours du refuge (que je n’ai pas réservé, je comptais camper), j’ai encore pas mal d’énergie alors je décide de laisser la moitié de mon sac (~3kg) à l’abri pendant que je vais faire le mont du coin, encore plus léger. Le temps est assez lourd et dans pareilles conditions les bibittes m’auraient découragé de le faire. Je croise enfin deux personnes au sommet, qui déjeunent assises en short sous la pluie. C’est sûr que j’ai l’air un peu stupide à suer dans ma tenue&nbsp;couvrante…</p>
  160. <p>Les heures passent et personne ne pointe le bout de son nez au refuge. Je commence à l’envisager car les températures chutent et je suis quand même bien léger. Tellement léger que je n’ai aucun moyen d’allumer un feu, j’ai opté pour un régime froid à base de semoule que je laisse gonfler une heure dans un récipient de récupération. Je peux même la manger dehors en bord de lac sans être embêté, c’est exceptionnel. Il ne manque qu’un orignal traversant le lac (j’ai vu beaucoup d’empreintes sur le sentier). J’ai même le temps de dessiner tranquillement ce paysage et d’observer le vol des sangsues au bord de l’eau, c’est vraiment très&nbsp;beau.</p>
  161. <p>Je me couche finalement à l’intérieur du refuge en m’attendant à devoir monter une tente au besoin et je griffonne quelques notes à la&nbsp;frontale&nbsp;:</p>
  162. <blockquote>
  163. <p>Dépenser le corps pour panser l’esprit.<br />
  164. Dépecer le cœur pour extraire l’envie.<br />
  165. Dépasser l’humeur pour penser la&nbsp;vie.</p>
  166. </blockquote>
  167. <blockquote>
  168. <p>(S’)Expliquer ce que le <em>je</em> est devenu grâce au <em>nous</em> sans finir sur les rotules (haha) est-il le propre de toutes les séparations&#8239;? Comment révéler ce que l’on est devenu à titre personnel&#8239;? Quel temps laisser à cette nouvelle expression /&nbsp;re-construction&#8239;?</p>
  169. </blockquote>
  170. <nav>
  171. <p>
  172. <a href="/david/2024/ecriture/"
  173. title="Liste de tous les articles 2024 associés à cette étiquette"
  174. rel="tag">#écriture</a>
  175. <a href="/david/2024/foret/"
  176. title="Liste de tous les articles 2024 associés à cette étiquette"
  177. rel="tag">#forêt</a>
  178. <a href="/david/2024/introspection/"
  179. title="Liste de tous les articles 2024 associés à cette étiquette"
  180. rel="tag">#introspection</a>
  181. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  182. </p>
  183. </nav>
  184. <nav>
  185. <p>
  186. <a rel="prev"
  187. href="/david/2024/06/20/"
  188. title="Publication précédente : Auto-promotion">← Précédent</a> •
  189. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  190. • <a rel="next"
  191. href="/david/2024/06/22/"
  192. title="Publication suivante : Jour 2">Suivant →</a>
  193. </p>
  194. </nav>
  195. <form action="/david/recherche/" method="get">
  196. <fieldset>
  197. <legend>Recherche</legend>
  198. <label for="input-search">Termes de votre recherche :</label>
  199. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  200. <input type="submit" value="Chercher">
  201. <p id="indexation-infos">
  202. <small>
  203. Seuls les contenus de ces 8 dernières années sont indexés.
  204. </small>
  205. </p>
  206. </fieldset>
  207. </form>
  208. <aside>
  209. <theme-toggle></theme-toggle>
  210. </aside>
  211. </article>
  212. <hr>
  213. <footer>
  214. <p>
  215. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  216. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  217. <a href="http://larlet.com"
  218. title="Go to my English profile"
  219. data-instant>Pro</a>
  220. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  221. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  222. </p>
  223. <template id="theme-selector">
  224. <form>
  225. <style type="text/css">
  226. fieldset div {
  227. text-align: center;
  228. }
  229. </style>
  230. <fieldset>
  231. <legend>Thème</legend>
  232. <div>
  233. <label>
  234. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  235. Auto
  236. </label>
  237. <label>
  238. <input type="radio" value="dark" name="chosen-color-scheme">
  239. Foncé
  240. </label>
  241. <label>
  242. <input type="radio" value="light" name="chosen-color-scheme">
  243. Clair
  244. </label>
  245. </div>
  246. </fieldset>
  247. </form>
  248. </template>
  249. </footer>
  250. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  251. <script>
  252. class ThemeToggle extends HTMLElement {
  253. constructor() {
  254. super()
  255. const themeSelectorTemplate = document.querySelector('#theme-selector')
  256. const form = themeSelectorTemplate.content.firstElementChild
  257. this.attachShadow({ mode: 'open' })
  258. this.shadowRoot.appendChild(form.cloneNode(true))
  259. }
  260. connectedCallback() {
  261. const form = this.shadowRoot.querySelector('form')
  262. form.addEventListener('change', (e) => {
  263. const chosenColorScheme = e.target.value
  264. localStorage.setItem('theme', chosenColorScheme)
  265. toggleTheme(chosenColorScheme)
  266. })
  267. const selectedTheme = localStorage.getItem('theme')
  268. if (selectedTheme && selectedTheme !== 'undefined') {
  269. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  270. }
  271. }
  272. }
  273. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  274. window.addEventListener('load', () => {
  275. let colorsLayer = undefined
  276. let hasDarkRules = false
  277. for (const styleSheet of Array.from(document.styleSheets)) {
  278. let mediaRules = []
  279. for (const layerRule of styleSheet.cssRules) {
  280. if (!(layerRule instanceof CSSLayerBlockRule)) {
  281. continue
  282. }
  283. if (layerRule.name === 'colors') {
  284. colorsLayer = layerRule
  285. }
  286. for (const cssRule of layerRule.cssRules) {
  287. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  288. continue
  289. }
  290. // WARNING: Safari does not have/supports `conditionText`.
  291. if (cssRule.conditionText) {
  292. if (cssRule.conditionText !== prefersColorSchemeDark) {
  293. continue
  294. }
  295. } else {
  296. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  297. continue
  298. }
  299. }
  300. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  301. }
  302. }
  303. // WARNING: do not try to insert a Rule to a styleSheet you are
  304. // currently iterating on, otherwise the browser will be stuck
  305. // in a infinite loop…
  306. for (const mediaRule of mediaRules) {
  307. // Safari requires the `0` second parameter (even if default).
  308. colorsLayer.insertRule(mediaRule.cssText, 0)
  309. hasDarkRules = true
  310. }
  311. }
  312. if (hasDarkRules) {
  313. if ('customElements' in window && !customElements.get('theme-toggle')) {
  314. customElements.define('theme-toggle', ThemeToggle)
  315. }
  316. }
  317. })
  318. </script>
  319. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  320. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  321. <script>
  322. tippy('[data-tippy]', {
  323. content(reference) {
  324. reference.addEventListener('click', (e) => e.preventDefault())
  325. return `
  326. <h3 lang="fr">
  327. <img src="${reference.dataset.favicon}" loading="lazy">
  328. <a href="${reference.dataset.source}"
  329. >Article sur ${reference.dataset.domain}</a></h3>
  330. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  331. <div class="tippy-links" lang="fr">
  332. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  333. </div>
  334. `
  335. },
  336. allowHTML: true,
  337. interactive: true,
  338. delay: [150, 700],
  339. hideOnClick: false
  340. })
  341. </script>
  342. <script type="module">
  343. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  344. const markObserver = new IntersectionObserver((entries, observer) => {
  345. const computedStyle = getComputedStyle(document.documentElement)
  346. const markBackground = computedStyle.getPropertyValue('--mark-background')
  347. for (const entry of entries) {
  348. if (entry.intersectionRatio === 0) continue
  349. const markElement = entry.target
  350. markElement.style.backgroundColor = 'inherit'
  351. const annotation = annotate(
  352. markElement, {
  353. type: 'highlight',
  354. multiline: true,
  355. color: markBackground,
  356. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  357. animate: false
  358. }
  359. )
  360. annotation.show()
  361. observer.unobserve(markElement)
  362. }
  363. }, {threshold: 1.0})
  364. for (const markElement of document.querySelectorAll('mark')) {
  365. markObserver.observe(markElement)
  366. }
  367. </script>
  368. </body>
  369. </html>