Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  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>Tag #contemplation — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #contemplation">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <style type="text/css">
  53. details[open] summary {
  54. display: none;
  55. }
  56. </style>
  57. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  58. <header>
  59. <h1>Publications relatives au tag #contemplation</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a>
  66. • <a rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  68. </svg> Étiquettes</a>
  69. </p>
  70. </nav>
  71. <hr>
  72. <main>
  73. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  74. <h2><a href="/david/2021/11/07/" title="Lien permanent vers cet article">Attente</a> (2021-11-07)</h2>
  75. <blockquote>
  76. <p>Le coucher de soleil est un des rares phénomènes que ça ne dérange personne d’attendre.</p>
  77. <p><cite><em><a href="https://laviematerielle.substack.com/p/cahiersdelecture2-lieux-metaphoriques">#cahiersdelecture2&nbsp;: lieux métaphoriques et adoucissants</a></em> (<a href="/david/cache/2021/ac30c8e9772cb5d4a6dbad941d593517/">cache</a>)</cite></p>
  78. </blockquote>
  79. <p>Je lis cette phrase ce soir… après ne pas avoir eu la patience d’attendre un coucher de soleil qui était pourtant magnifique. Ironie.</p>
  80. <h2><a href="/david/2021/08/16/" title="Lien permanent vers cet article">Jour 1</a> (2021-08-16)</h2>
  81. <p>La fin du mois d’août est le moment où il fait encore chaud-mais-pas-trop et où la haute saison des bibittes est derrière nous. C’est aussi notre rendez-vous annuel pour se faire un camping père-fils. Cette fois-ci, ça ne sera pas sauvage mais à un emplacement suffisamment isolé pour que ça y ressemble.</p>
  82. <p>Un peu plus de 3&nbsp;kilomètres pour accéder au campement en longeant la rivière, l’enfant porte symboliquement une partie de la tente ce qui m’évite de devoir galoper derrière avec tout le reste&#8239;!</p>
  83. <figure>
  84. <a href="#riviere-ouareau"
  85. title="Cliquer pour une version haute résolution">
  86. <img src="/static/david/2021/riviere-ouareau.jpg" alt="Rivière Ouareau."
  87. loading="lazy" width="1536" height="2048" />
  88. </a>
  89. <a href="#_" class="lightbox" id="riviere-ouareau">
  90. <img src="/static/david/2021/riviere-ouareau.jpg" alt="Rivière Ouareau."
  91. loading="lazy" width="1536" height="2048" />
  92. </a>
  93. <figcaption>Entre deux rapides, j’envisage de la descendre en raft un de ces jours…</figcaption>
  94. </figure>
  95. <p>On mange et on installe notre tipi du XXI<sup>e</sup> siècle qui nous laisse suffisamment d’espace sous la protection de la moustiquaire puis on part en exploration sur une (presqu’)île. L’enfant s’assoit avec un soupir&nbsp;: <q>On est bien là.</q> Léger soulagement de mon côté après m’avoir indiqué qu’un camping-de-voiture c’était pas mal aussi. On regarde la rivière couler, petit bain, jeux sur la petite plage, pas pire.</p>
  96. <figure>
  97. <a href="#riviere-ouareau-ile"
  98. title="Cliquer pour une version haute résolution">
  99. <img src="/static/david/2021/riviere-ouareau-ile.jpg" alt="Rivière Ouareau (encore)."
  100. loading="lazy" width="2048" height="1536" />
  101. </a>
  102. <a href="#_" class="lightbox" id="riviere-ouareau-ile">
  103. <img src="/static/david/2021/riviere-ouareau-ile.jpg" alt="Rivière Ouareau (encore)."
  104. loading="lazy" width="2048" height="1536" />
  105. </a>
  106. <figcaption>Lors de ma précédente visite, j’ai <a href="/david/2020/04/03/#jusquau-declin">marché sur cette rivière</a>.</figcaption>
  107. </figure>
  108. <blockquote>
  109. <p><em>[Après avoir vu et ramassé des déchets laissés par d’autres personnes]</em><br />
  110. — Parfois j’aimerais ne pas être un humain.</p>
  111. </blockquote>
  112. <p>Cette réflexion m’a <a href="/david/2021/06/16/" title="Trans">pas mal retourné</a>, les chats ne font pas des chiens.</p>
  113. <p>Le soir, on fait faire trempette à des mouches lorsqu’un castor remonte la rivière juste devant nous, à moins de 3&nbsp;mètres&#8239;! Il galère avec le courant ce qui nous laisse l’occasion de pouvoir l’observer en détail car il est obligé de passer par-dessus les rochers des rapides en étant totalement émergé. Une chouette surprise qui ne m’a pas fait <a href="/david/2021/08/14/" title="Animalière">regretter pour autant mon matériel</a>. Cette excitation partagée était le plus beau des clichés. Lorsque les moustiques deviennent trop présents, on abdique après une dernière ballade digestive.</p>
  114. <figure>
  115. <a href="#riviere-ouareau-soir"
  116. title="Cliquer pour une version haute résolution">
  117. <img src="/static/david/2021/riviere-ouareau-soir.jpg" alt="Rivière Ouareau (toujours)."
  118. loading="lazy" width="2048" height="1536" />
  119. </a>
  120. <a href="#_" class="lightbox" id="riviere-ouareau-soir">
  121. <img src="/static/david/2021/riviere-ouareau-soir.jpg" alt="Rivière Ouareau (toujours)."
  122. loading="lazy" width="2048" height="1536" />
  123. </a>
  124. <figcaption>Cette ambiance <3.</figcaption>
  125. </figure>
  126. <blockquote>
  127. <p>— Le moment où je m’endors est le pire de ma journée, j’ai l’impression de mourir.</p>
  128. </blockquote>
  129. <h2><a href="/david/2021/06/08/" title="Lien permanent vers cet article">Sens</a> (2021-06-08)</h2>
  130. <blockquote>
  131. <p>Le mot «&nbsp;sens&nbsp;» est à la mode, c’est pourquoi j’hésite à l’utiliser&nbsp;: il est banalisé. Je me méfie de la quête de sens, de la recherche de sens, du sens que l’on voudrait introduire à tout prix dans le moindre de nos faits et gestes, de celui que l’on essaye de nous proposer ou de nous vendre sous le prétexte d’apprendre à vivre, comme une sorte de supplément d’âme qui résoudrait tous nos problèmes. Quel non-sens&#8239;!</p>
  132. <p>Le sens est bien plus fondamental que ce petit divertissement vers lequel nous sommes poussés, à tout bout de champ, par l’air du temps. On veut me «&nbsp;donner&nbsp;» du sens&#8239;? Mais le sens n’est pas une étiquette autocollante que je pourrais poser sur un évènement que je vis. Parce que le sens ne peut pas être extérieur à ce que je vis&nbsp;: il vient de la profondeur de mon existence, de la manière par laquelle je m’engage, du chemin sur lequel j’avance. Personne ne peut l’édicter pour moi. En revanche, il est de ma responsabilité d’humain de le donner, de le laisser jaillir, de le travailler, de le révéler pour que mon chemin vaille la peine d’être poursuivi.</p>
  133. <p>[…]</p>
  134. <p><mark>Le sens est une boussole qui nous met en chemin, il n’est pas un GPS.</mark> Il nous donne une indication, il ne rentre pas dans les détails du chemin. Il est l’effort qui est juste pour moi parce qu’il me permet d’être davantage moi-même.</p>
  135. <p><cite><em>Comment rester serein quand tout s’effondre</em>, Fabrice Midal</cite></p>
  136. </blockquote>
  137. <p>De temps en temps, j’emprunte un livre de développement personnel à la bibliothèque. Je mets ça sur le coup de la curiosité ou de l’espoir que ça m’apporte un truc, un jour, je sais pas trop.</p>
  138. <p>Je suis trop fatigué pour étayer ce soir. On verra dans quel sens j’aurai envie d’aller une fois la <a href="/david/2021/05/19/" title="Regroupement">tempête</a> passée.</p>
  139. <h2><a href="/david/2021/04/23/" title="Lien permanent vers cet article">Contemplation</a> (2021-04-23)</h2>
  140. <details>
  141. <summary>Déplier pour lire le contenu de la publication</summary>
  142. <blockquote>
  143. <p>Chaque kilomètre qui m’éloigne de Montréal est un pas de plus dans un pèlerinage vers la seule cathédrale qui m’inspire la foi, une profonde forêt qui abrite toutes mes confessions.</p>
  144. <p><cite><em>Encabanée</em>, Gabrielle Filteau-Chiba</cite></p>
  145. </blockquote>
  146. <p>Finalement, le <a href="/david/2021/04/20/" title="Remote">montage</a> aura pris plus de 15&nbsp;heures au total. Et je ne parle même pas du temps des <a href="/david/2021/04/19/" title="Conversions">conversions</a> en tout genre. Le tout avec une machine qui a moins d’un an et qui semble déjà être obsolète dans les standards actuels de production de vidéos.</p>
  147. <p>J’avais envisagé, suite aux <a href="https://mastodon.social/@dav/106087917305254369">résultats pas si départagés</a>, de produire deux versions très différentes à partir des mêmes sources mais je crois que cette première mouture (la plus longue et donc la plus facile) a épuisé mon enthousiasme pour un petit moment.</p>
  148. <p>Néanmoins, je suis bien content d’avoir appris autant de choses pendant la captation au cours <a href="/david/2021/04/16/" title="Jour 1">des</a> <a href="/david/2021/04/17/" title="Jour 2">trois</a> <a href="/david/2021/04/18/" title="Jour 3">jours</a> mais aussi dans l’étape de montage et je commence à toucher un style qui me plait bien. Une forme d’immersion lente et silencieuse qui m’a fait regretter de ne pas avoir pris un micro décent. Partager ma propre écoute du monde et de ses chemins de traverse. Une approche que j’espère peu colonialiste.</p>
  149. <p>J’ai pas mal d’idées pour la suite et en attendant, <a href="https://vimeo.com/540447287/323e810be3">voici la vidéo</a> de 22&#8239;min 30&#8239;sec produite lors de cette sortie. Je vous invite à mettre un casque… et à aller aux toilettes avant&nbsp;:-).</p>
  150. </details>
  151. <h2><a href="/david/2021/04/17/" title="Lien permanent vers cet article">Jour 2</a> (2021-04-17)</h2>
  152. <details>
  153. <summary>Déplier pour lire le contenu de la publication</summary>
  154. <blockquote>
  155. <p>Ce désir de dormir est pour une large part une forme de régression, une volonté de retourner à l’enfance et d’être libéré de la charge de tension liée au fait de grandir et de devoir assumer de nouvelles responsabilités. Les contraintes d’identité deviennent trop lourdes à porter et elles appellent un soulagement symbolique. Une recherche d’effacement provisoire surtout quand le jeune peine à se construire.</p>
  156. <p><cite><em>Disparaître de soi</em>, David Le Breton</cite></p>
  157. </blockquote>
  158. <p>La nuit a été en pente mais surtout bruyante dès 4&nbsp;heures du matin, au printemps tous les oiseaux s’en donnent à cœur joie&nbsp;: des bernaches aux huards, en passant par les canards et les pics en tout genre. Le bon côté c’est que ça me motive pour sortir du duvet et apprécier la lumière du matin. Au programme de la journée&nbsp;: continuer mon exploration en laissant au campement ce qui m’est moins utile.</p>
  159. <p>Je poursuis mon tour de lac et ça devient de plus en plus sauvage, je finis par arriver à un emplacement encore plus chouette que le précédent, joie&#8239;! Je retourne chercher toutes mes affaires avec le sourire. Un aller-retour plus tard, j’ai moins le sourire car je me rends compte qu’un pseudo-confinement d’une année ça laisse des muscles relativement atrophiés (c’est pas du tout le fait de se trimbaler un sac de plus de 18&nbsp;kilos à crapahuter entre les troncs d’arbres abattus par l’hiver). Le bon côté de la chose c’est qu’arrivé là, les (mal)chances que je croise quelqu’un sont assez minimes. J’apprécie à sa juste valeur ce moment.</p>
  160. <p>C’est aussi l’endroit parfait pour une <a href="/david/2021/03/30/" title="Timelapse">timelapse</a> de soleil couchant sur le lac ou de ciel étoilé… si j’avais encore de l’énergie dans ma seconde — et dernière — batterie&#8239;! Heureusement, le ciel est tellement bouché que je ne vais pas être trop frustré. Je songe un instant à forcer un connecteur USB-C dans un micro-USB et je m’en vais méditer là-dessus en faisant une sieste dans le hamac.</p>
  161. <p>Je termine la journée sans penser à faire des vidéos et en me focalisant sur cet instant, j’explore encore un peu la suite du tour du lac qui n’est plus du tout balisé, si ce n’est par les chemins de biches. Cela fait mûrir un projet de périple <em>packrafting</em> en enchaînant une boucle sur plusieurs lacs. J’essaye de ne pas trop analyser ce sentiment de libération de ne plus avoir à faire des vidéos.</p>
  162. <p>Le coucher de soleil est moche et il fait froid mais je suis content d’avoir cuisiné une nouvelle recette tout en contemplant le ballet des castors. Je m’endors en me demandant pourquoi ce monde est toujours en pente. Peut-être pour que l’on ait conscience qu’il faille s’y accrocher&#8239;?</p>
  163. <p><strong>Il est où le bouton pause de mon cerveau&#8239;?</strong></p>
  164. </details>
  165. <h2><a href="/david/2021/03/27/" title="Lien permanent vers cet article">Immersion</a> (2021-03-27)</h2>
  166. <details>
  167. <summary>Déplier pour lire le contenu de la publication</summary>
  168. <p>J’ai un micro fabuleux depuis Noël (merci&#8239;!) mais je n’avais encore jamais pensé à m’en servir en combinaison avec une paire de jumelles. C’est à mi-chemin entre la réalité virtuelle et les capacités de super-héros. Je m’explique.</p>
  169. <p>En reliant le micro à un casque, j’arrive à percevoir des sons bien au-delà de ma portée actuelle, c’est limite choquant d’arriver à écouter distinctement une conversation qui est à plusieurs dizaines de mètres. Si j’ajoute des jumelles, j’ai l’impression d’être à côté de l’oiseau en observation et d’entendre chacun de ses mouvements. Au printemps, c’est fabuleux.</p>
  170. <p>Je vais essayer de vous partager le son, j’aimerais bien le combiner à une <em>timelapse</em> que j’espère faire dans la semaine. Il faut vraiment que je m’entraine, la dernière tentative j’étais resté en mode vidéo et ça m’a fait 300&nbsp;vidéos d’une seconde… qui en plus était en cours de mouvement par la <em>gimbal</em>. #n00b</p>
  171. <p>Mise à jour&nbsp;: la combinaison des deux s’intitule <a href="https://vimeo.com/531066432/da724b9b29">Timelapson</a>, il faut que je trouve comment rendre le son plus net en enlevant la fréquence de la voie rapide dans le fond.</p>
  172. <p><em>Écouté depuis&nbsp;: <a href="https://ici.radio-canada.ca/recit-numerique/2193/son-immersif-vanuatu-trois-dimensions">Le Vanuatu en son 3D</a>, merci <a href="http://shl.huld.re/~f6k/log/vol11/19-vanuatu.html">f6k</a> (<a href="/david/cache/2021/5243221f38525040d87e7407b08e1ff5/">cache</a>)&#8239;!</em></p>
  173. </details>
  174. <h2><a href="/david/2021/02/20/" title="Lien permanent vers cet article">Apaisement</a> (2021-02-20)</h2>
  175. <details>
  176. <summary>Déplier pour lire le contenu de la publication</summary>
  177. <blockquote>
  178. <p>Ma conviction est également que ce n’est pas au plus fort de l’urgence, dans un contexte de pénurie et de violence, que l’on organise des réseaux d’entraide, qu’on conceptualise un horizon de société, qu’on trouve un sursaut de dignité et qu’on se fixe des principes politiques. La solidité de l’organisation collective et des réseaux de solidarité dépendra de la fiabilité des ressources appelées à remplacer l’industrie agroalimentaire et pétrolière, et celles-ci ne s’inventeront pas quand il s’agira de survivre. <mark>C’est aujourd’hui que l’après se construit.</mark></p>
  179. <p><cite><em><a href="/david/2020/12/21/#plutot-couler-en-beaute-que-flotter-sans-grace">Plutôt couler en beauté que flotter sans grâce</a></em>, Corinne Morel Darleux</cite></p>
  180. </blockquote>
  181. <p>On me demande souvent pourquoi est-ce que je suis au Canada (venant autant de français·es que de québécois·es). Et c’est une réponse difficile. J’ai du mal à décrire l’«&nbsp;ambiance&nbsp;» d’un lieu de vie. Pour les personnes le partageant, elle est difficile à rendre tangible tant elle semble naturelle. Pour les personnes distantes, c’est tout de suite l’exotisme et ses clichés. J’avais la même difficulté — si ce n’est plus — pour le Japon.</p>
  182. <p>Je crois que la prochaine fois, je répondrai que ce lieu me procure <em>une forme d’apaisement</em>. Je ne sais pas comment justifier une telle émotion et j’ai bien conscience qu’il y a une attente de cet ordre lorsqu’on me pose cette question. Tant pis pour la curiosité.</p>
  183. </details>
  184. </main>
  185. <hr>
  186. <footer>
  187. <p>
  188. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  189. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  190. </svg> Accueil</a> •
  191. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  192. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  193. </svg> Suivre</a> •
  194. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  195. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  196. </svg> Pro</a> •
  197. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  198. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  199. </svg> Email</a> •
  200. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  201. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  202. </svg> Légal</abbr>
  203. </p>
  204. <template id="theme-selector">
  205. <form>
  206. <fieldset>
  207. <legend><svg class="icon icon-brightness-contrast">
  208. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  209. </svg> Thème</legend>
  210. <label>
  211. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  212. </label>
  213. <label>
  214. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  215. </label>
  216. <label>
  217. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  218. </label>
  219. </fieldset>
  220. </form>
  221. </template>
  222. </footer>
  223. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  224. <script>
  225. function loadThemeForm(templateName) {
  226. const themeSelectorTemplate = document.querySelector(templateName)
  227. const form = themeSelectorTemplate.content.firstElementChild
  228. themeSelectorTemplate.replaceWith(form)
  229. form.addEventListener('change', (e) => {
  230. const chosenColorScheme = e.target.value
  231. localStorage.setItem('theme', chosenColorScheme)
  232. toggleTheme(chosenColorScheme)
  233. })
  234. const selectedTheme = localStorage.getItem('theme')
  235. if (selectedTheme && selectedTheme !== 'undefined') {
  236. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  237. }
  238. }
  239. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  240. window.addEventListener('load', () => {
  241. let hasDarkRules = false
  242. for (const styleSheet of Array.from(document.styleSheets)) {
  243. let mediaRules = []
  244. for (const cssRule of styleSheet.cssRules) {
  245. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  246. continue
  247. }
  248. // WARNING: Safari does not have/supports `conditionText`.
  249. if (cssRule.conditionText) {
  250. if (cssRule.conditionText !== prefersColorSchemeDark) {
  251. continue
  252. }
  253. } else {
  254. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  255. continue
  256. }
  257. }
  258. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  259. }
  260. // WARNING: do not try to insert a Rule to a styleSheet you are
  261. // currently iterating on, otherwise the browser will be stuck
  262. // in a infinite loop…
  263. for (const mediaRule of mediaRules) {
  264. styleSheet.insertRule(mediaRule.cssText)
  265. hasDarkRules = true
  266. }
  267. }
  268. if (hasDarkRules) {
  269. loadThemeForm('#theme-selector')
  270. }
  271. })
  272. </script>
  273. </body>
  274. </html>