Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  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 #neige — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #neige">
  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 #neige</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/22/" title="Lien permanent vers cet article">Jour 2</a> (2021-11-22)</h2>
  75. <blockquote>
  76. <p>Le vrai journal est écrit dans la mer et dans le ciel, <mark>on ne peut pas le photographier</mark> pour le donner aux autres. Il est né peu à peu de tout ce qui nous entoure depuis des mois, les bruits de l’eau sur la carène, les bruits du vent qui glisse sur les voiles, les silences pleins de choses secrètes entre mon bateau et moi, comme lorsque j’écoutais parler la forêt quand j’étais gosse.</p>
  77. <p><cite><em>La longue route</em>, Bernard Moitessier</cite></p>
  78. </blockquote>
  79. <p>Je me suis réveillé 5&nbsp;fois dans la nuit. Ce n’était pas pour vérifier le pilote automatique du voilier mais pour remettre une bûche dans le poêle. À chaque milieu ses contraintes… et son manque de sommeil. Cela m’a permis de dormir en t-shirt, la prochaine fois je m’abstiendrai de porter un duvet pour ce refuge dont le poêle est surdimensionné… mais qu’il faut tout de même alimenter en continu pour éviter qu’il ne s’éteigne&#8239;!</p>
  80. <p>J’attends que la pleige (sorte de neige très liquide) s’arrête pour quitter le refuge. Je démarre sous le soleil <em>et</em> la grêle. #Canada</p>
  81. <figure>
  82. <a href="#ouareau-chemin-neige"
  83. title="Cliquer pour une version haute résolution">
  84. <img src="/static/david/2021/ouareau-chemin-neige.jpg" alt="Un chemin, sous la neige."
  85. loading="lazy" width="2048" height="1536" />
  86. </a>
  87. <a href="#_" class="lightbox" id="ouareau-chemin-neige">
  88. <img src="/static/david/2021/ouareau-chemin-neige.jpg" alt="Un chemin, sous la neige."
  89. loading="lazy" width="2048" height="1536" />
  90. </a>
  91. <figcaption>Pas de meilleure motivation que le soleil pour arriver en haut d’une crête !</figcaption>
  92. </figure>
  93. <p>J’ai prévu de faire une longue crête et je me rappelle aussi qu’il me restait à explorer un lac en contrebas, de l’autre côté, où j’espère trouver un emplacement pour de nouvelles aventures. Mes efforts sont récompensés car il y a effectivement de quoi mettre une tente et/ou un hamac. Il y a même une sorte de cuvette aménagée pour pouvoir faire trempette sur le petit cours d’eau à côté. Limite du <em>glamping</em>. Je suis joie.</p>
  94. <figure>
  95. <a href="#ouareau-lac-braque"
  96. title="Cliquer pour une version haute résolution">
  97. <img src="/static/david/2021/ouareau-lac-braque.jpg" alt="Lac braque, gelé avec son barrage de castor au premier plan."
  98. loading="lazy" width="1536" height="2048" />
  99. </a>
  100. <a href="#_" class="lightbox" id="ouareau-lac-braque">
  101. <img src="/static/david/2021/ouareau-lac-braque.jpg" alt="Lac braque, gelé avec son barrage de castor au premier plan."
  102. loading="lazy" width="1536" height="2048" />
  103. </a>
  104. <figcaption>Pour le moment, il faut creuser si on veut pouvoir se baigner.</figcaption>
  105. </figure>
  106. <p>Je remonte sur la crête et avec le vent ça commence à crouter sévère. Le soleil se voile et la température chute, je dois absolument redescendre de l’autre côté avant que ça devienne ingérable. Je prends un raccourci. Le ruisseau aussi et j’ai rapidement les pieds trempés. Heureusement qu’il ne fait que -5°C mais ce n’est pas le moment de se faire mal. Je rejoins une piste de ski de fond qui me permet d’augmenter la cadence et de me réchauffer.</p>
  107. <figure>
  108. <a href="#ouareau-point-de-vue"
  109. title="Cliquer pour une version haute résolution">
  110. <img src="/static/david/2021/ouareau-point-de-vue.jpg" alt="Point de vue depuis la crête."
  111. loading="lazy" width="2048" height="1536" />
  112. </a>
  113. <a href="#_" class="lightbox" id="ouareau-point-de-vue">
  114. <img src="/static/david/2021/ouareau-point-de-vue.jpg" alt="Point de vue depuis la crête."
  115. loading="lazy" width="2048" height="1536" />
  116. </a>
  117. <figcaption>J’espère dormir un jour sur cet à plat en contrebas. #YouDidNotSleepThere</figcaption>
  118. </figure>
  119. <p>J’arrive à un abri où j’envisageais initialement de passer la nuit. Je me fais une soupe miso pour me réchauffer de l’intérieur, il faudrait que je change au moins de chaussettes. Je suis rejoins par deux personnes qui vont y dormir cette nuit, ce seront mes seules rencontres ce jour. Elles ont l’air contentes d’être là, moi aussi.</p>
  120. <blockquote>
  121. <p>Assis sur la chaise du poste de pilotage intérieur, je regarde l’eau phosphorescente à travers les hublots de la coupole qui protège des déferlantes et m’en rapproche. Je suis presque arrivé au tournant de ma route. Je sais, depuis l’océan Indien, que je ne veux plus rentrer là-bas.</p>
  122. <p>[…]</p>
  123. <p>Et jusqu’au Horn, ne pas regarder autre chose que mon bateau, petite planète rouge et blanc faite d’espace, d’air pur, d’étoiles, de nuages et de liberté dans son sens le plus profond, le plus naturel. Et oublier totalement la Terre, ses villes impitoyables, ses foules sans regard et sa soif d’un rythme d’existence dénué de sens. Là-bas… si un marchant pouvait éteindre les étoiles pour que ses panneaux publicitaires se voient mieux dans la nuit, peut-être le ferait-il&#8239;! <mark>Oublier tout ça.</mark></p>
  124. <p>Ne vivre qu’avec la mer et mon bateau, pour la mer et pour mon bateau.</p>
  125. <p><cite><em>Ibid.</em></cite></p>
  126. </blockquote>
  127. <h2><a href="/david/2021/02/24/" title="Lien permanent vers cet article">Précipitation</a> (2021-02-24)</h2>
  128. <p>Après beaucoup d’hésitations à le publier, voici finalement le résultat de ces <a href="/david/2021/02/21/" title="Jour 1">deux</a> <a href="/david/2021/02/22/" title="Jour 2">jours</a> dans la forêt. Le <a href="/david/2021/02/23/" title="Montage">montage</a> n’aura pas été facile mais à force de tâtonner j’ai l’impression de trouver aussi ce que j’ai envie de partager et la façon dont j’ai envie de le faire. Cette exploration sera manifestement assez longue et ça n’est pas pour me <a href="/david/2021/02/16/" title="Éponge">déplaire</a>, j’espère ne pas vous faire endurer des images trop douloureuses d’ici là 😅.</p>
  129. <p>La vidéo sur Vimeo&nbsp;: <a href="https://vimeo.com/516515235/45826baa92">Précipitation</a> (il faudra que je tente un <a href="https://github.com/luwes/lite-vimeo-embed">lite embed</a> à un moment).</p>
  130. <h2><a href="/david/2021/02/22/" title="Lien permanent vers cet article">Jour 2</a> (2021-02-22)</h2>
  131. <blockquote>
  132. <p>Sans avoir nécessairement connu une histoire douloureuse, d’autres ont choisi la discrétion, la solitude, le «&nbsp;recours aux forêts&nbsp;» ou au <em>wilderness</em> <mark>pour trouver un apaisement que le lien social ne leur donnait pas</mark>. Ils ne sont pas misanthropes, mais leur goût du silence, de l’intériorité, de la sobriété l’emporte sur les avantages du lien social.</p>
  133. <p><cite><em>Disparaître de soi</em>, David Le Breton</cite></p>
  134. </blockquote>
  135. <p>Je me réveille sans un seul flocon, la météo s’était une fois de plus trompée, <em>yay!</em> Je ne fais quand même pas trop le malin car je sens que ça arrive, je suis relativement protégé sous les arbres mais je me dépêche d’allumer un feu et de ranger mes affaires. Note pour plus tard&nbsp;: mettre son pantalon sur ses chaussures pour ne pas qu’elles se remplissent de neige est une bonne idée, mais des chaussures en cuir mouillées et tordues, une fois gelées c’est moins pratiques à enfiler le matin venu…</p>
  136. <p>Je me rends compte en démontant le camp qu’il y aurait des choses à montrer&nbsp;: orientation, arrimage, aplanissement, stratégie de lutte contre le froid, etc. La gestion du bois/feu est importante aussi, surtout lorsqu’il s’agit de faire fondre de la neige pour pouvoir boire. Je garde ces idées en tête pour une prochaine sortie. Si vous avez d’autres suggestions/questionnements n’hésitez pas.</p>
  137. <p>Au moment du départ, ça se met à tomber assez dru, je suis bien content d’avoir finalement opté pour un boitier à l’épreuve des éléments. Par contre, le seul objectif que j’ai emporté ne l’est pas et se rempli assez rapidement de neige/glace, surtout que chaque prise de vue est doublée le temps de faire l’aller-retour. Aussi, je suis impressionnée par la batterie qui a tenu 24&nbsp;heures sous des températures négatives. Ça ouvre des perspectives.</p>
  138. <p>Je souris en marchant sous la tempête de neige, c’est humide mais pas froid, surtout dans l’effort. Je reviens sur mes pas, il me reste 40&nbsp;secondes de film disponibles sur la carte mémoire. <em>Une bien belle sortie.</em> C’est rare que tout se déroule aussi bien en hiver, j’apprécie.</p>
  139. <h2><a href="/david/2021/02/21/" title="Lien permanent vers cet article">Jour 1</a> (2021-02-21)</h2>
  140. <details>
  141. <summary>Déplier pour lire le contenu de la publication</summary>
  142. <blockquote>
  143. <p>S’enforester (pronominal)&nbsp;:</p>
  144. <ol>
  145. <li>Se couvrir de forêt.</li>
  146. <li>Entrer en forêt.</li>
  147. </ol>
  148. <p><cite><a href="https://fr.wiktionary.org/wiki/enforester">Sur le wiktionnaire</a></cite></p>
  149. </blockquote>
  150. <p>Je me réveille avec un beau soleil, motivé pour enfin aller dormir dans la forêt. J’aime ce milieu d’hiver lorsque le corps est acclimaté et les jours se rallongent. Malheureusement, arrivé sur place le parking municipal n’est pas déneigé et il y a plus d’un mètre de neige. Je me replie sur celui situé à trois kilomètres de là, un bon échauffement, surtout que ça monte&#8239;!</p>
  151. <p>Le chemin à proprement parler commence par une autoroute à motoneiges/quads qui requiert mon attention sur les premiers kilomètres, il y au moins un avantage à cela&nbsp;: la neige a été tassée. J’en profite pour me demander encore une fois comment on peut prendre du plaisir à être aussi bruyant tout en cramant des énergies fossiles. Me rappeler que je suis arrivé jusque là en <abbr title="Sport Utility Vehicle">SUV</abbr> qui consomme 12&#8239;L/100&#8239;km… et je ne compte même pas le nombre d’esclaves qu’il a fallu pour construire mon équipement.</p>
  152. <p>J’arrive enfin à l’endroit où je voulais bifurquer pour traverser le lac et rejoindre l’emplacement repéré cet été en raft. La bonne nouvelle c’est que la glace est solide… la moins bonne c’est qu’il y a bien 60&nbsp;cm de neige très poudreuse par-dessus&#8239;! Même avec des raquettes extra larges c’est limite avec mon chargement. Je m’amuse à faire des prises de vue sans rien voir sur l’écran à cause de la réverbération. Je vais apprendre au montage ce que l’on appelle un <em>focus breathing</em> et me jurer de ne plus jamais me mettre en auto-focus pour faire des vidéos. Apprentissage.</p>
  153. <p>Arrivé à l’emplacement, je suis mouillé. Notamment car les conditions font que l’arrière de mon pantalon noir faisait fondre la neige au cours du cheminement en raquettes dos au soleil (dommage lorsqu’on a des guêtres dans le sac). Je me dis qu’il va falloir faire un feu pour sécher tout cela, d’autant que j’ai oublié de prendre mon vêtement coupe vent pour la soirée (un changement de plan au moment du départ… un peu trop précipité). J’arrête de faire des vidéos car j’ai trop besoin d’être efficace avant la nuit, le campement et la sécurité avant les petits plaisirs.</p>
  154. <p>Le soirée est relativement chaude pour la saison, ça ne descend pas en-dessous des -10&#8239;°C, la lune est pleine et le silence est incroyable. <em>Je me sens à la fois petit et vivant.</em> Je m’endors en regardant crépiter le feu et en espérant ne pas me réveiller avec une montagne de neige sur le tarp.</p>
  155. </details>
  156. <h2><a href="/david/2021/02/20/" title="Lien permanent vers cet article">Apaisement</a> (2021-02-20)</h2>
  157. <details>
  158. <summary>Déplier pour lire le contenu de la publication</summary>
  159. <blockquote>
  160. <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>
  161. <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>
  162. </blockquote>
  163. <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>
  164. <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>
  165. </details>
  166. <h2><a href="/david/2021/02/10/" title="Lien permanent vers cet article">Retraite</a> (2021-02-10)</h2>
  167. <details>
  168. <summary>Déplier pour lire le contenu de la publication</summary>
  169. <blockquote>
  170. <p>Mais sous prétexte que ça ne va pas révolutionner leur vie, beaucoup se privent de ces petites victoires volées sur le quotidien parce que «&nbsp;ça ne changera rien&nbsp;». Mais si ça change&#8239;! Naturellement. À trop viser de grandes victoires futures, <mark>on en oublie de saisir celles qui sont à portée de main</mark>. Elles sont pourtant le carburant des grandes épopées de demain&nbsp;: sans elles, comment poursuivre, toute une vie durant, des aspirations qui semblent si loin&#8239;? Ou <em>a contrario</em>, sans elles, comment réaliser que parvenir est devenu superflu… Puisqu’on est déjà si bien.</p>
  171. <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>
  172. </blockquote>
  173. <p>Sur les pistes, je ne croise que quelques personnes manifestement retraitées. Je me demande si j’en suis une. Pas dans le sens <abbr title="Financial Independence, Retire Early">FIRE</abbr> qui semble avoir du succès chez les personnes à hauts salaires — comme les développeurs et développeuses. Plutôt en ayant des choix de vie me permettant d’avoir des pratiques de retraité dès maintenant.</p>
  174. <p>Petit plaisir du jour&nbsp;: avoir créé un nuage en lançant de l’eau à ébullition en l’air lorsqu’il fait «&nbsp;frête&nbsp;». Je ne l’avais jamais fait et c’était plaisant, d’autant que non prémédité (je faisais la vaisselle en m’aidant du poêle).</p>
  175. <figure>
  176. <a href="#refuge_corbeau"
  177. title="Cliquer pour une version haute résolution">
  178. <img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil"
  179. loading="lazy" width="2016" height="1512" />
  180. </a>
  181. <a href="#_" class="lightbox" id="refuge_corbeau">
  182. <img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil"
  183. loading="lazy" width="2016" height="1512" />
  184. </a>
  185. <figcaption>Les couleurs par -22°C sont toujours aussi magnifiques.</figcaption>
  186. </figure>
  187. </details>
  188. <h2><a href="/david/2021/02/09/" title="Lien permanent vers cet article">Calme</a> (2021-02-09)</h2>
  189. <details>
  190. <summary>Déplier pour lire le contenu de la publication</summary>
  191. <p>Je profite d’une journée pédagogique de l’enfant pour faire ma <a href="/david/2020/01/29/">sortie ski</a> annuelle. Même endroit, presque la même date, le monde a changé, la température non. Il y a un cadenas sur le refuge. On ne se réfugie plus aujourd’hui, on paye et on réserve une exclusivité. Un refuge qui exclut. <em>On en est là.</em></p>
  192. <p>Je me souviens l’année dernière avoir pu <a href="/david/2020/01/29/#refugie">accueillir une personne</a>, je ne sais pas si j’aurais fait le même choix dans les conditions actuelles. Cela me rend triste.</p>
  193. <p>Je décide d’y aller sans équipement vidéo, pour le fun, mon Kalimba sous le bras (j’apprends en voulant faire un lien qu’il s’agit en fait d’un <a href="https://fr.wikipedia.org/wiki/Mbira">Mbira</a> d’origine africaine). Malheureusement, le calme n’était pas de la partie pour autant, mes pensées étant focalisées sur la suite j’ai du mal à rester dans le présent.</p>
  194. <p>C’était tout de même une bien belle sortie, j’en suis revenu épuisé et heureux. L’avantage de vieillir, c’est que ton corps te rappelle plusieurs jours de suite que tu t’es bien dépensé&#8239;!</p>
  195. <figure>
  196. <a href="#ski_de_fond"
  197. title="Cliquer pour une version haute résolution">
  198. <img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond"
  199. loading="lazy" width="2016" height="1512" />
  200. </a>
  201. <a href="#_" class="lightbox" id="ski_de_fond">
  202. <img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond"
  203. loading="lazy" width="2016" height="1512" />
  204. </a>
  205. <figcaption>Une piste aussi sinueuse que mes pensées.</figcaption>
  206. </figure>
  207. </details>
  208. </main>
  209. <hr>
  210. <footer>
  211. <p>
  212. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  213. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  214. </svg> Accueil</a> •
  215. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  216. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  217. </svg> Suivre</a> •
  218. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  219. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  220. </svg> Pro</a> •
  221. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  222. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  223. </svg> Email</a> •
  224. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  225. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  226. </svg> Légal</abbr>
  227. </p>
  228. <template id="theme-selector">
  229. <form>
  230. <fieldset>
  231. <legend><svg class="icon icon-brightness-contrast">
  232. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  233. </svg> Thème</legend>
  234. <label>
  235. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  236. </label>
  237. <label>
  238. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  239. </label>
  240. <label>
  241. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  242. </label>
  243. </fieldset>
  244. </form>
  245. </template>
  246. </footer>
  247. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  248. <script>
  249. function loadThemeForm(templateName) {
  250. const themeSelectorTemplate = document.querySelector(templateName)
  251. const form = themeSelectorTemplate.content.firstElementChild
  252. themeSelectorTemplate.replaceWith(form)
  253. form.addEventListener('change', (e) => {
  254. const chosenColorScheme = e.target.value
  255. localStorage.setItem('theme', chosenColorScheme)
  256. toggleTheme(chosenColorScheme)
  257. })
  258. const selectedTheme = localStorage.getItem('theme')
  259. if (selectedTheme && selectedTheme !== 'undefined') {
  260. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  261. }
  262. }
  263. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  264. window.addEventListener('load', () => {
  265. let hasDarkRules = false
  266. for (const styleSheet of Array.from(document.styleSheets)) {
  267. let mediaRules = []
  268. for (const cssRule of styleSheet.cssRules) {
  269. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  270. continue
  271. }
  272. // WARNING: Safari does not have/supports `conditionText`.
  273. if (cssRule.conditionText) {
  274. if (cssRule.conditionText !== prefersColorSchemeDark) {
  275. continue
  276. }
  277. } else {
  278. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  279. continue
  280. }
  281. }
  282. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  283. }
  284. // WARNING: do not try to insert a Rule to a styleSheet you are
  285. // currently iterating on, otherwise the browser will be stuck
  286. // in a infinite loop…
  287. for (const mediaRule of mediaRules) {
  288. styleSheet.insertRule(mediaRule.cssText)
  289. hasDarkRules = true
  290. }
  291. }
  292. if (hasDarkRules) {
  293. loadThemeForm('#theme-selector')
  294. }
  295. })
  296. </script>
  297. </body>
  298. </html>