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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  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. Étiquette #aventure
  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="Publications relatives au tag #aventure">
  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. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#aventure</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/03/05/" title="Lien permanent vers cet article">Jour&nbsp;2</a> <time datetime="2024-03-05">5 mars 2024</time>
  132. </h2>
  133. <p>On se réveille dans la brume avec le soleil peinant à passer à travers, le lac et la neige ont regelé pendant la nuit. C’est une belle ambiance après une nuit agitée par la chaleur du <del>sauna</del> refuge. Les poêles tirent à fond dans ces endroits pour éviter que des personnes n’arrivent pas à faire démarrer un feu (j’imagine que ça peut être critique) mais ça les rend très inefficaces dans la durée et très chauds dès qu’on met deux buches&nbsp;dedans.</p>
  134. <figure>
  135. <a href="/static/david/2024/2024-03-05-lac-corbeau.jpg"
  136. title="Cliquer pour une version haute résolution">
  137. <img
  138. src="/static/david/2024/2024-03-05-lac-corbeau.jpg"
  139. width="4032" height="3024"
  140. srcset="/static/david/2024/2024-03-05-lac-corbeau.jpg 4032w, /static/david/2024/2024-03-05-lac-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-05-lac-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-05-lac-corbeau_1320x880.jpg 1320w"
  141. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  142. loading="lazy"
  143. decoding="async"
  144. alt="Lac corbeau à l’aube.">
  145. </a>
  146. <figcaption>De bien jolies couleurs au&nbsp;réveil.</figcaption>
  147. </figure>
  148. <p>Cet épisode me confirme encore une fois que les enfants ont des corps de sportifs de très haut niveau. Je suis impatient de pouvoir le charger un peu plus car c’est frustrant de le voir gambader devant de bon matin alors que mes muscles sont à peine réveillés. J’aime bien lorsqu’on va explorer un peu plus loin et que l’on se projette sur ce que l’on pourrait faire l’année&nbsp;suivante.</p>
  149. <figure>
  150. <a href="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg"
  151. title="Cliquer pour une version haute résolution">
  152. <img
  153. src="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg"
  154. width="3024" height="4032"
  155. srcset="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg 3024w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_1320x880.jpg 1320w"
  156. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  157. loading="lazy"
  158. decoding="async"
  159. alt="Un enfant qui court dans la neige vers un refuge.">
  160. </a>
  161. <figcaption>Jamais&nbsp;fatigué.</figcaption>
  162. </figure>
  163. <p>Le retour est moins joyeux car il s’agit d’enchainer les efforts et chaque heure qui passe rend la neige plus meuble. À tel point que l’on décide de couper par une piste sur une courte section. Mon évaluation est que la saison de ski est terminée, même une sous-couche bien travaillée ne tiendra pas la semaine qui s’en&nbsp;vient.</p>
  164. <p>J’aurais aimé faire une boucle un peu plus longue au retour mais il faut savoir s’adapter aux conditions. Le plus important est de terminer sans blessure ni&nbsp;dégoût.</p>
  165. <p><em>Je commence à imaginer un parcours rapide sur plusieurs jours dans cette forêt que je connais bien. Peut-être qu’une fenêtre se dessine en avril… il faut que je récupère un peu de cardio d’ici&nbsp;là.</em></p>
  166. <nav>
  167. <p>
  168. <a href="/david/2024/adaptation/"
  169. title="Liste de tous les articles 2024 associés à cette étiquette"
  170. rel="tag">#adaptation</a>
  171. <a href="/david/2024/aventure/"
  172. title="Liste de tous les articles 2024 associés à cette étiquette"
  173. rel="tag">#aventure</a>
  174. <a href="/david/2024/psychologie/"
  175. title="Liste de tous les articles 2024 associés à cette étiquette"
  176. rel="tag">#psychologie</a>
  177. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  178. </p>
  179. </nav>
  180. <h2>
  181. <a href="/david/2024/02/25/" title="Lien permanent vers cet article">Jour&nbsp;2</a> <time datetime="2024-02-25">25 février 2024</time>
  182. </h2>
  183. <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>
  184. <figure>
  185. <a href="/static/david/2024/2024-02-25-duvet-givre.jpg"
  186. title="Cliquer pour une version haute résolution">
  187. <img
  188. src="/static/david/2024/2024-02-25-duvet-givre.jpg"
  189. width="2317" height="3088"
  190. 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"
  191. sizes="min(100vw, calc(100vh * 2317 / 3088))"
  192. loading="lazy"
  193. decoding="async"
  194. alt="Mon nez qui dépasse de la cheminée du duvet toute givrée.">
  195. </a>
  196. <figcaption>OMG, they killed&nbsp;Kenny!</figcaption>
  197. </figure>
  198. <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>
  199. <figure>
  200. <a href="/static/david/2024/2024-02-25-foyer-firebox.jpg"
  201. title="Cliquer pour une version haute résolution">
  202. <img
  203. src="/static/david/2024/2024-02-25-foyer-firebox.jpg"
  204. width="3024" height="4032"
  205. 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"
  206. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  207. loading="lazy"
  208. decoding="async"
  209. alt="Un foyer avec ma popote et une buche sur laquelle on voit l’ombre de la marque (Firebox).">
  210. </a>
  211. <figcaption>Mon auto-correct vient de me corriger le texte alternatif en Firefox. Bien.</figcaption>
  212. </figure>
  213. <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>
  214. <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>
  215. <figure>
  216. <a href="/static/david/2024/2024-02-25-lac-boeuf.jpg"
  217. title="Cliquer pour une version haute résolution">
  218. <img
  219. src="/static/david/2024/2024-02-25-lac-boeuf.jpg"
  220. width="3024" height="4032"
  221. 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"
  222. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  223. loading="lazy"
  224. decoding="async"
  225. alt="Des traces de mes skis sur un lac gelé.">
  226. </a>
  227. <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>
  228. </figure>
  229. <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>
  230. <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>
  231. <nav>
  232. <p>
  233. <a href="/david/2024/aventure/"
  234. title="Liste de tous les articles 2024 associés à cette étiquette"
  235. rel="tag">#aventure</a>
  236. <a href="/david/2024/foret/"
  237. title="Liste de tous les articles 2024 associés à cette étiquette"
  238. rel="tag">#forêt</a>
  239. <a href="/david/2024/gratitude/"
  240. title="Liste de tous les articles 2024 associés à cette étiquette"
  241. rel="tag">#gratitude</a>
  242. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  243. </p>
  244. </nav>
  245. <h2>
  246. <a href="/david/2024/02/24/" title="Lien permanent vers cet article">Jour&nbsp;1</a> <time datetime="2024-02-24">24 février 2024</time>
  247. </h2>
  248. <p>Arrivée en fin de matinée. La voiture affiche -12°C et je sais que je ne vais probablement pas avoir plus ces 30&nbsp;prochaines heures dans la forêt. Depuis que j’ai appris la connaissance de la Grande Boucle de la forêt de Ouareau, j’ai eu envie de la faire, à mon rythme, avec une nuit à l’autre bout du parc. Ma pulka est énorme, ils annoncent une nuit fraîche et avec du vent. Je me lance dans la première descente alors que la neige est dure comme de la roche. J’apprends à mes dépens que les écailles des skis ne sont pas adaptées lorsque je repars en arrière à la première montée. Première chute, ça commence&nbsp;bien.</p>
  249. <p>Avec les demi-peaux, ça passe déjà mieux mais ça demande de beaucoup forcer sur les bras. Les quelques personnes que je croise en skis de fond n’en mènent pas large non plus, les conditions sont atroces quel que soit l’équipement on dirait. Certains choisissent de tirer 40&#8239;kg en plus pour le fun. Après quelques heures, j’arrive enfin au lac tant espéré, le soleil me gratifie de ses derniers rayons pour monter le camp et préparer de quoi me réchauffer pour la&nbsp;soirée.</p>
  250. <figure>
  251. <a href="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
  252. title="Cliquer pour une version haute résolution">
  253. <img
  254. src="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
  255. width="4032" height="3024"
  256. srcset="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg 4032w, /static/david/2024/2024-02-24-pulka-lac-boeuf_660x440.jpg 660w, /static/david/2024/2024-02-24-pulka-lac-boeuf_990x660.jpg 990w, /static/david/2024/2024-02-24-pulka-lac-boeuf_1320x880.jpg 1320w"
  257. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  258. loading="lazy"
  259. decoding="async"
  260. alt="La pulka devant le lac bœuf.">
  261. </a>
  262. <figcaption>La joie d’arriver au lieu de campement avec mes deux&nbsp;chevilles.</figcaption>
  263. </figure>
  264. <p>Il fait déjà -16°C et j’ai choisi de prendre une tente cette fois-ci par crainte du vent annoncé mais il n’y a pas de soucis à se faire pour l’instant. C’est même très agréable s’il n’y avait pas le ronron des motoneiges dans le lointain qui vient casser un peu l’ambiance. Le son porte très loin en&nbsp;hiver.</p>
  265. <p>Je suis pas mal déshydraté mais j’essaye de gérer stratégiquement cela, je sais qu’il va falloir passer le plus longtemps possible dans le duvet. Les courbatures attendront. Je passe une bonne soirée au coin du feu car il y a finalement très peu de vent et la voûte céleste est superbe par ces températures. J’aurais bien dormi à la belle&nbsp;étoile.</p>
  266. <figure>
  267. <a href="/static/david/2024/2024-02-24-tente-ouverte.jpg"
  268. title="Cliquer pour une version haute résolution">
  269. <img
  270. src="/static/david/2024/2024-02-24-tente-ouverte.jpg"
  271. width="4032" height="3024"
  272. srcset="/static/david/2024/2024-02-24-tente-ouverte.jpg 4032w, /static/david/2024/2024-02-24-tente-ouverte_660x440.jpg 660w, /static/david/2024/2024-02-24-tente-ouverte_990x660.jpg 990w, /static/david/2024/2024-02-24-tente-ouverte_1320x880.jpg 1320w"
  273. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  274. loading="lazy"
  275. decoding="async"
  276. alt="Une tente ouverte avec un duvet à l’intérieur.">
  277. </a>
  278. <figcaption>Chambre avec&nbsp;vue.</figcaption>
  279. </figure>
  280. <p>Je suis bien content d’avoir pris mon plus gros duvet car j’apprends que le thermomètre de ma montre s’arrête de fonctionner à partir de -20°C. Et il n’est que 7&#8239;h du soir. Le passage du foyer au duvet est toujours un moment assez critique. Je découvre que les chaufferettes permettent de récupérer des pieds gelés plus rapidement (j’avais fait l’erreur de ne prendre que des bouteilles isotherme). Je prends soin de donner une forme enfilable à mes chaussures avec la bonne position des lacets qui vont geler&nbsp;aussi.</p>
  281. <p>Je m’endors en écoutant le silence, seulement brisé par les arbres qui craquent de froid. L’hiver tire ses dernières balles et certains resteront couchés&nbsp;demain.</p>
  282. <nav>
  283. <p>
  284. <a href="/david/2024/aventure/"
  285. title="Liste de tous les articles 2024 associés à cette étiquette"
  286. rel="tag">#aventure</a>
  287. <a href="/david/2024/foret/"
  288. title="Liste de tous les articles 2024 associés à cette étiquette"
  289. rel="tag">#forêt</a>
  290. <a href="/david/2024/sport/"
  291. title="Liste de tous les articles 2024 associés à cette étiquette"
  292. rel="tag">#sport</a>
  293. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  294. </p>
  295. </nav>
  296. <form action="/david/recherche/" method="get">
  297. <fieldset>
  298. <legend>Recherche</legend>
  299. <label for="input-search">Termes de votre recherche :</label>
  300. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  301. <input type="submit" value="Chercher">
  302. <p id="indexation-infos">
  303. <small>
  304. Seuls les contenus de ces 8 dernières années sont indexés.
  305. </small>
  306. </p>
  307. </fieldset>
  308. </form>
  309. <aside>
  310. <theme-toggle></theme-toggle>
  311. </aside>
  312. </article>
  313. <hr>
  314. <footer>
  315. <p>
  316. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  317. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  318. <a href="http://larlet.com"
  319. title="Go to my English profile"
  320. data-instant>Pro</a>
  321. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  322. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  323. </p>
  324. <template id="theme-selector">
  325. <form>
  326. <style type="text/css">
  327. fieldset div {
  328. text-align: center;
  329. }
  330. </style>
  331. <fieldset>
  332. <legend>Thème</legend>
  333. <div>
  334. <label>
  335. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  336. Auto
  337. </label>
  338. <label>
  339. <input type="radio" value="dark" name="chosen-color-scheme">
  340. Foncé
  341. </label>
  342. <label>
  343. <input type="radio" value="light" name="chosen-color-scheme">
  344. Clair
  345. </label>
  346. </div>
  347. </fieldset>
  348. </form>
  349. </template>
  350. </footer>
  351. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  352. <script>
  353. class ThemeToggle extends HTMLElement {
  354. constructor() {
  355. super()
  356. const themeSelectorTemplate = document.querySelector('#theme-selector')
  357. const form = themeSelectorTemplate.content.firstElementChild
  358. this.attachShadow({ mode: 'open' })
  359. this.shadowRoot.appendChild(form.cloneNode(true))
  360. }
  361. connectedCallback() {
  362. const form = this.shadowRoot.querySelector('form')
  363. form.addEventListener('change', (e) => {
  364. const chosenColorScheme = e.target.value
  365. localStorage.setItem('theme', chosenColorScheme)
  366. toggleTheme(chosenColorScheme)
  367. })
  368. const selectedTheme = localStorage.getItem('theme')
  369. if (selectedTheme && selectedTheme !== 'undefined') {
  370. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  371. }
  372. }
  373. }
  374. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  375. window.addEventListener('load', () => {
  376. let colorsLayer = undefined
  377. let hasDarkRules = false
  378. for (const styleSheet of Array.from(document.styleSheets)) {
  379. let mediaRules = []
  380. for (const layerRule of styleSheet.cssRules) {
  381. if (!(layerRule instanceof CSSLayerBlockRule)) {
  382. continue
  383. }
  384. if (layerRule.name === 'colors') {
  385. colorsLayer = layerRule
  386. }
  387. for (const cssRule of layerRule.cssRules) {
  388. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  389. continue
  390. }
  391. // WARNING: Safari does not have/supports `conditionText`.
  392. if (cssRule.conditionText) {
  393. if (cssRule.conditionText !== prefersColorSchemeDark) {
  394. continue
  395. }
  396. } else {
  397. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  398. continue
  399. }
  400. }
  401. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  402. }
  403. }
  404. // WARNING: do not try to insert a Rule to a styleSheet you are
  405. // currently iterating on, otherwise the browser will be stuck
  406. // in a infinite loop…
  407. for (const mediaRule of mediaRules) {
  408. // Safari requires the `0` second parameter (even if default).
  409. colorsLayer.insertRule(mediaRule.cssText, 0)
  410. hasDarkRules = true
  411. }
  412. }
  413. if (hasDarkRules) {
  414. if ('customElements' in window && !customElements.get('theme-toggle')) {
  415. customElements.define('theme-toggle', ThemeToggle)
  416. }
  417. }
  418. })
  419. </script>
  420. </body>
  421. </html>