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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  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 #parentalité
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #parentalité">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2024-01-19.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  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>#parentalité</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">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/01/28/" title="Lien permanent vers cet article">Jour&nbsp;2</a> <time datetime="2024-01-28">28 janvier 2024</time>
  132. </h2>
  133. <p>Même avec la nourriture suspendue, les souris on fait un sacré raffut. Elles devaient elles aussi avoir trop chaud. Après avoir dormi avec 2&nbsp;fenêtres ouvertes, il fait tout de même 18°C au réveil. Parfait pour notre gruau de camping (seconde tradition avec les nouilles instantanées), cette fois à la neige&nbsp;fondue.</p>
  134. <p>On prend le temps d’aller faire un petit tour à skis sur le lac car c’est une première pour l’enfant. On suit des traces de lapins qui nous mènent à un point d’eau liquide qui est un point de concentration de la faune locale. Si on avait su avant, on aurait peut-être pris le risque de s’en approcher avec nos gourdes. C’est peut-être mieux de ne pas l’avoir su&nbsp;avant.</p>
  135. <figure>
  136. <a href="/static/david/2024/2024-01-28-lac-foret.jpg"
  137. title="Cliquer pour une version haute résolution">
  138. <img
  139. src="/static/david/2024/2024-01-28-lac-foret.jpg"
  140. width="3024" height="4032"
  141. srcset="/static/david/2024/2024-01-28-lac-foret.jpg 3024w, /static/david/2024/2024-01-28-lac-foret_660x440.jpg 660w, /static/david/2024/2024-01-28-lac-foret_990x660.jpg 990w, /static/david/2024/2024-01-28-lac-foret_1320x880.jpg 1320w"
  142. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  143. loading="lazy"
  144. decoding="async"
  145. alt="Un lac gelé avec la forêt en arrière plan.">
  146. </a>
  147. <figcaption>Une bonne ambiance hivernale mais sans la fraîcheur de la&nbsp;saison.</figcaption>
  148. </figure>
  149. <p>Une fois le matériel rangé, on repart. Cette fois j’ai resserré le système de tractage improvisé avec des tuyaux en PVC de la <em>pulka</em>. Et j’ai aussi troqué les peaux complètes pour des demi-peaux, ça me permet de glisser un peu plus dans les descentes mais quand même pas trop. Difficile de ne pas forcer sur la cheville lorsqu’on est contraint par l’étroitesse du chemin. Bon puis il y a vraiment trop d’arbres dans ces&nbsp;forêts&nbsp;:p.</p>
  150. <p>On s’amuse vraiment sur ce retour et je suis obligé d’imposer des pauses pour ne pas arriver dans le même état que la veille (et me faire semer). L’enfant serait partant pour ne pas s’arrêter du tout, ça fait plaisir. On prend confiance et on enchaîne les bosses. Nos seules traces de la veille aident pas mal. Les conditions sont vraiment chaudes pour la&nbsp;saison.</p>
  151. <figure>
  152. <a href="/static/david/2024/2024-01-28-neige-collante.jpg"
  153. title="Cliquer pour une version haute résolution">
  154. <img
  155. src="/static/david/2024/2024-01-28-neige-collante.jpg"
  156. width="4032" height="3024"
  157. srcset="/static/david/2024/2024-01-28-neige-collante.jpg 4032w, /static/david/2024/2024-01-28-neige-collante_660x440.jpg 660w, /static/david/2024/2024-01-28-neige-collante_990x660.jpg 990w, /static/david/2024/2024-01-28-neige-collante_1320x880.jpg 1320w"
  158. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  159. loading="lazy"
  160. decoding="async"
  161. alt="De la neige qui pend d’un arbre.">
  162. </a>
  163. <figcaption>Lorsqu’on me demande si la neige était&nbsp;collante.</figcaption>
  164. </figure>
  165. <p>Nous sommes progressivement rejoints par les skieur·euses qui descendent à travers les arbres et à une centaine de mètres de la voiture, il y a un passage plus difficile que les autres&nbsp;: une pente qui arrive sur un pont. On passe sur le côté pour être retenus par la neige fraîche mais la <em>pulka</em> décide de faire le drapeau et de prendre la «&nbsp;piste&nbsp;» tapée principale. J’essaye de la rattraper tant bien que mal tout en attendant / prenant soin de l’enfant et je me retrouve dans le décor. Encore. Ce n’est pas tant la chute que de forcer pour s’extraire de la neige tout en étant harnaché et les skis empêtrés dans les arbres qui me fait forcer sur les mauvais tendons… si près du but c’est&nbsp;rageant&nbsp;😔.</p>
  166. <p>Une sortie haute en émotions. Je vais maintenant pouvoir prendre le temps de soigner cette <a href="/david/2024/01/09/" title="Blessure">blessure</a>&nbsp;correctement.</p>
  167. <nav>
  168. <p>
  169. <a href="/david/2024/experience/"
  170. title="Liste de tous les articles 2024 associés à cette étiquette"
  171. rel="tag">#expérience</a>
  172. <a href="/david/2024/foret/"
  173. title="Liste de tous les articles 2024 associés à cette étiquette"
  174. rel="tag">#forêt</a>
  175. <a href="/david/2024/parentalite/"
  176. title="Liste de tous les articles 2024 associés à cette étiquette"
  177. rel="tag">#parentalité</a>
  178. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  179. </p>
  180. </nav>
  181. <h2>
  182. <a href="/david/2024/01/27/" title="Lien permanent vers cet article">Jour&nbsp;1</a> <time datetime="2024-01-27">27 janvier 2024</time>
  183. </h2>
  184. <p>De la pluie verglaçante depuis 2&nbsp;jours. Une cheville pas encore opérationnelle. Mais de l’envie et une réservation depuis deux mois pour une première sortie hivernale en refuge. Ensemble. La route pour y aller est déjà épique et des flocons gros comme des pastèques s’écrasent sur le pare-brise. Il est rare au Québec de suivre un <em>pickup</em> qui ne dépasse pas les 70&#8239;km/h sur&nbsp;l’autoroute.</p>
  185. <p>C’est aussi la première sortie pour la <em>pulka</em> ramenée de France cet été. Le temps de charger et de se préparer, la neige est déjà moins intense. Néanmoins, dès les premières centaines de mètres, je sens bien que ça va être galère. La montée est vraiment pentue et les skis-raquettes de l’enfant ne sont pas adaptés à ces conditions ce qui le rend <del>pénible</del> ronchon. De mon côté, avec les peaux complètes ça passe mais je force énormément car je dois bien avoir 35&#8239;kg à tracter derrière. On fait au moins deux kilomètres comme ça… avant de se rendre compte que l’on est sur la montée de ski de randonnée de la Montagne&nbsp;Noire&#8239;!</p>
  186. <figure>
  187. <a href="/static/david/2024/2024-01-27-enfant-qui-skie.jpg"
  188. title="Cliquer pour une version haute résolution">
  189. <img
  190. src="/static/david/2024/2024-01-27-enfant-qui-skie.jpg"
  191. width="3024" height="4032"
  192. srcset="/static/david/2024/2024-01-27-enfant-qui-skie.jpg 3024w, /static/david/2024/2024-01-27-enfant-qui-skie_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-qui-skie_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-qui-skie_1320x880.jpg 1320w"
  193. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  194. loading="lazy"
  195. decoding="async"
  196. alt="Un enfant en train de skier sur un chemin.">
  197. </a>
  198. <figcaption>Avant que tout ne&nbsp;dérape.</figcaption>
  199. </figure>
  200. <p>Grosse erreur d’orientation qui nous coûte cher&nbsp;: impossible de descendre par cette montée et couper par la forêt serait très hasardeux, sans compter mon état. L’heure tourne et on finit par descendre en ayant déchaussé tous les deux. Deux paires de skis en plus à retenir à bout de bras en ayant le choix entre un chemin de 30&nbsp;cm de large tapé qui glisse ou un mètre de poudreuse tout autour. C’est un peu casse patte, juste ce qu’il me fallait pour une rééducation&nbsp;active&nbsp;😬.</p>
  201. <figure>
  202. <a href="/static/david/2024/2024-01-27-attache-pulka.jpg"
  203. title="Cliquer pour une version haute résolution">
  204. <img
  205. src="/static/david/2024/2024-01-27-attache-pulka.jpg"
  206. width="2320" height="3088"
  207. srcset="/static/david/2024/2024-01-27-attache-pulka.jpg 2320w, /static/david/2024/2024-01-27-attache-pulka_660x440.jpg 660w, /static/david/2024/2024-01-27-attache-pulka_990x660.jpg 990w, /static/david/2024/2024-01-27-attache-pulka_1320x880.jpg 1320w"
  208. sizes="min(100vw, calc(100vh * 2320 / 3088))"
  209. loading="lazy"
  210. decoding="async"
  211. alt="La pulka visible depuis mon entre-jambe.">
  212. </a>
  213. <figcaption>Un point de vue&nbsp;discutable.</figcaption>
  214. </figure>
  215. <p>Quasi-retour au point de départ, à deux doigts d’abandonner vue l’énergie que l’on vient de dépenser&nbsp;: <q lang="fr">c’est pas la grosse marrade</q>. Une pause bienvenue et le chemin loupé qui semble accueillant me font hésiter tout de même. Je prends finalement la décision d’y aller car dans mon souvenir c’est accessible (si on ne se trompe pas de sentier…). Prise de risque assez élevée au passage, il ne faut pas d’autres erreurs ou problèmes sur le trajet ou on va finir à la frontale (au mieux). Difficile de savoir jusqu’où est-ce que ça va être tracé&nbsp;aussi.</p>
  216. <p>Ce nouveau chemin est beaucoup plus adapté à notre niveau (de forme). Le système d’attache de la <em>pulka</em> est loin d’être optimal mais ça passe, même entre les arbres. L’enfant prend confiance et s’amuse dans les descentes. On arrive enfin au refuge sans encombres, il est 15&#8239;h passé et on n’a pas mangé, à peine bu 200&nbsp;ml depuis le départ… il va falloir recharger les corps avant demain sinon ça va&nbsp;piquer.</p>
  217. <figure>
  218. <a href="/static/david/2024/2024-01-27-dessins-cartes.jpg"
  219. title="Cliquer pour une version haute résolution">
  220. <img
  221. src="/static/david/2024/2024-01-27-dessins-cartes.jpg"
  222. width="3024" height="4032"
  223. srcset="/static/david/2024/2024-01-27-dessins-cartes.jpg 3024w, /static/david/2024/2024-01-27-dessins-cartes_660x440.jpg 660w, /static/david/2024/2024-01-27-dessins-cartes_990x660.jpg 990w, /static/david/2024/2024-01-27-dessins-cartes_1320x880.jpg 1320w"
  224. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  225. loading="lazy"
  226. decoding="async"
  227. alt="Des cartes dessinées à la bougie visible en fond.">
  228. </a>
  229. <figcaption>Le dessin à la bougie, c’est mieux à&nbsp;deux.</figcaption>
  230. </figure>
  231. <p>Heureusement, cet endroit est assez fabuleux et il y a une ambiance brumeuse qui lui donne un aspect féérique. Une fois repus, on va faire un tour sur le lac en contrebas. Il sautille sur le chemin (moi pas) et semble déjà avoir oublié les péripéties de la matinée. On passe une bonne soirée à faire des cadavre-exquis et à dessiner des cartes. Il fait 27°C dans le refuge, on supporte nos caleçons mais c’est un peu limite pour aller chercher la neige à faire&nbsp;fondre&#8239;!</p>
  232. <figure>
  233. <a href="/static/david/2024/2024-01-27-enfant-lac.jpg"
  234. title="Cliquer pour une version haute résolution">
  235. <img
  236. src="/static/david/2024/2024-01-27-enfant-lac.jpg"
  237. width="4032" height="3024"
  238. srcset="/static/david/2024/2024-01-27-enfant-lac.jpg 4032w, /static/david/2024/2024-01-27-enfant-lac_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-lac_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-lac_1320x880.jpg 1320w"
  239. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  240. loading="lazy"
  241. decoding="async"
  242. alt="Un enfant sur un lac gelé (le lac, pas l’enfant).">
  243. </a>
  244. <figcaption>Un enfant sur un lac gelé (le lac, pas l’enfant). Il est 17h17. Je crois que j’aime de plus en plus les photos qui ont du&nbsp;grain.</figcaption>
  245. </figure>
  246. <p>Vu le bruit que font les souris alors qu’il y a encore de la lumière, la nuit risque de ne pas être de tout repos… On s’endort au son du poêle qui&nbsp;craque.</p>
  247. <nav>
  248. <p>
  249. <a href="/david/2024/experience/"
  250. title="Liste de tous les articles 2024 associés à cette étiquette"
  251. rel="tag">#expérience</a>
  252. <a href="/david/2024/foret/"
  253. title="Liste de tous les articles 2024 associés à cette étiquette"
  254. rel="tag">#forêt</a>
  255. <a href="/david/2024/parentalite/"
  256. title="Liste de tous les articles 2024 associés à cette étiquette"
  257. rel="tag">#parentalité</a>
  258. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  259. </p>
  260. </nav>
  261. <h2>
  262. <a href="/david/2024/01/20/" title="Lien permanent vers cet article">Extinction</a> <time datetime="2024-01-20">20 janvier 2024</time>
  263. </h2>
  264. <blockquote lang="en">
  265. <p>So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A natural part of growing up. Silos came and plucked their voices. Invasive memes and short form content grew in their place. Hustle overtook leisure. Harassment overtook openness. Influence overtook creativity. An economy of interestingness replaced by one of followers, likes, and engagement&nbsp;metrics.</p>
  266. <p>One important thing to note; <mark>websites aren’t extinct.</mark> In fact, you’re on one now! Uploading your own words is ancient technology but still&nbsp;works.</p>
  267. <p><cite><em><a data-link-domain="daverupert.com" href="https://daverupert.com/2024/01/where-have-all-the-websites-gone/">Where have all the flowers gone?</a> <a href="/david/cache/2024/7136e0810bfa42c4a9ca798a55cd2d53/" title="Copie locale au 2024-01-19">[archive]</a></em></cite></p>
  268. </blockquote>
  269. <p>En réponse à <q lang="en"><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/">Where have all the websites gone?</a> <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" title="Copie locale au 2024-01-09">[archive]</a></q> que j’ai <a href="/david/2024/01/10/#hr-24">déjà cité</a>. Peut-être que la capacité à publier est toujours là mais que nous avons <a href="/david/2024/01/12/#hr-27">trop changé</a> pour être capables de perdurer dans cette pratique. 2024&nbsp;pourrait me faire mentir car je vois une certaine effervescence dans mon agrégateur. On va bien voir si ça dure. On va bien voir si <em>je</em>&nbsp;dure.</p>
  270. <p><em>Guidé par le besoin, je suis en train d’automatiser des ancres sur mes <code>&lt;hr&gt;</code>, fausse bonne idée&#8239;? En affinant un peu le style ça me convient pour&nbsp;l’instant.</em></p>
  271. <a href="#hr-40" title="Lien vers cette section de la page"><hr id="hr-40" /></a>
  272. <blockquote>
  273. <p>public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists. Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML&nbsp;archives.</p>
  274. <p>public-inbox spawned around three main&nbsp;ideas:</p>
  275. <ul>
  276. <li>Publicly accessible and archived communication is essential to Free Software&nbsp;development.</li>
  277. <li>Contributing to Free Software projects should not require the use of non-Free services or&nbsp;software.</li>
  278. <li><mark>Graphical user interfaces should not be required for text-based communication.</mark> Users may have broken graphics drivers, limited eyesight, or be unable to afford modern&nbsp;hardware.</li>
  279. </ul>
  280. <p>public-inbox aims to be easy-to-deploy and manage; encouraging projects to run their own instances with minimal&nbsp;overhead.</p>
  281. <p><cite><em><a data-link-domain="public-inbox.org" href="https://public-inbox.org/README.html">public-inbox - an &quot;archives first&quot; approach to mailing lists</a> <a href="/david/cache/2024/30b40ff8034212e070dc7daf2b9406e9/" title="Copie locale au 2024-01-19">[archive]</a></em></cite></p>
  282. </blockquote>
  283. <p>D’une certaine manière, l’<a data-link-domain="github.com" href="https://github.com/jgm/pandoc/issues/9250">extinction de voix des un·es</a> fait mon bonheur de découverte aujourd’hui. J’espère que le réflexe ne sera pas de passer de <em>Google Groups</em> à <em>Microsoft Github Discussions</em> par&nbsp;commodité.</p>
  284. <a href="#hr-41" title="Lien vers cette section de la page"><hr id="hr-41" /></a>
  285. <blockquote>
  286. <p>… ça veut dire qu’en vrai, les droits humains, tu t’en fiches pas&nbsp;mal.</p>
  287. <p>Et que tu es juste <mark>un peu raciste</mark>.</p>
  288. <p><cite><em><a data-link-domain="emmaclit.com" href="https://emmaclit.com/2024/01/19/culture-froncaise/">Culture&nbsp;fronçaise</a></em></cite></p>
  289. </blockquote>
  290. <p>Voilà.</p>
  291. <a href="#hr-42" title="Lien vers cette section de la page"><hr id="hr-42" /></a>
  292. <figure>
  293. <a href="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"
  294. title="Cliquer pour une version haute résolution">
  295. <img
  296. src="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"
  297. width="3024" height="3024"
  298. srcset="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg 3024w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_660x440.jpg 660w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_990x660.jpg 990w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_1320x880.jpg 1320w"
  299. sizes="min(100vw, calc(100vh * 3024 / 3024))"
  300. loading="lazy"
  301. decoding="async"
  302. alt="Un enfant de dos dans des traces de ski de fond classique à la tombée du jour">
  303. </a>
  304. <figcaption>-16°C, rien de mieux pour démarrer une fin de semaine qu’une sortie ski dans notre jardin après&nbsp;l’école.</figcaption>
  305. </figure>
  306. <p>Cette photo est floue, c’est devenu tellement rare avec un téléphone (<em>OK&nbsp;Boomer</em>&nbsp;:p). Les couleurs étaient superbes et une fois les mains réchauffées c’était une ambiance très agréable. On n’a pas croisé grand monde. La rééducation active continue tranquillement son&nbsp;chemin.</p>
  307. <nav>
  308. <p>
  309. <a href="/david/2024/dependance/"
  310. title="Liste de tous les articles 2024 associés à cette étiquette"
  311. rel="tag">#dépendance</a>
  312. <a href="/david/2024/evolution/"
  313. title="Liste de tous les articles 2024 associés à cette étiquette"
  314. rel="tag">#évolution</a>
  315. <a href="/david/2024/parentalite/"
  316. title="Liste de tous les articles 2024 associés à cette étiquette"
  317. rel="tag">#parentalité</a>
  318. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  319. </p>
  320. </nav>
  321. <form action="/david/recherche/" method="get">
  322. <fieldset>
  323. <legend>Recherche</legend>
  324. <label for="input-search">Termes de votre recherche :</label>
  325. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  326. <input type="submit" value="Chercher">
  327. <p id="indexation-infos">
  328. <small>
  329. Seuls les contenus de ces 8 dernières années sont indexés.
  330. </small>
  331. </p>
  332. </fieldset>
  333. </form>
  334. <aside>
  335. <theme-toggle></theme-toggle>
  336. </aside>
  337. </article>
  338. <hr>
  339. <footer>
  340. <p>
  341. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  342. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  343. <a href="http://larlet.com"
  344. title="Go to my English profile"
  345. data-instant>Pro</a>
  346. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  347. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  348. </p>
  349. <template id="theme-selector">
  350. <form>
  351. <style type="text/css">
  352. fieldset div {
  353. text-align: center;
  354. }
  355. </style>
  356. <fieldset>
  357. <legend>Thème</legend>
  358. <div>
  359. <label>
  360. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  361. Auto
  362. </label>
  363. <label>
  364. <input type="radio" value="dark" name="chosen-color-scheme">
  365. Foncé
  366. </label>
  367. <label>
  368. <input type="radio" value="light" name="chosen-color-scheme">
  369. Clair
  370. </label>
  371. </div>
  372. </fieldset>
  373. </form>
  374. </template>
  375. </footer>
  376. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  377. <script>
  378. class ThemeToggle extends HTMLElement {
  379. constructor() {
  380. super()
  381. const themeSelectorTemplate = document.querySelector('#theme-selector')
  382. const form = themeSelectorTemplate.content.firstElementChild
  383. this.attachShadow({ mode: 'open' })
  384. this.shadowRoot.appendChild(form.cloneNode(true))
  385. }
  386. connectedCallback() {
  387. const form = this.shadowRoot.querySelector('form')
  388. form.addEventListener('change', (e) => {
  389. const chosenColorScheme = e.target.value
  390. localStorage.setItem('theme', chosenColorScheme)
  391. toggleTheme(chosenColorScheme)
  392. })
  393. const selectedTheme = localStorage.getItem('theme')
  394. if (selectedTheme && selectedTheme !== 'undefined') {
  395. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  396. }
  397. }
  398. }
  399. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  400. window.addEventListener('load', () => {
  401. let colorsLayer = undefined
  402. let hasDarkRules = false
  403. for (const styleSheet of Array.from(document.styleSheets)) {
  404. let mediaRules = []
  405. for (const layerRule of styleSheet.cssRules) {
  406. if (!(layerRule instanceof CSSLayerBlockRule)) {
  407. continue
  408. }
  409. if (layerRule.name === 'colors') {
  410. colorsLayer = layerRule
  411. }
  412. for (const cssRule of layerRule.cssRules) {
  413. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  414. continue
  415. }
  416. // WARNING: Safari does not have/supports `conditionText`.
  417. if (cssRule.conditionText) {
  418. if (cssRule.conditionText !== prefersColorSchemeDark) {
  419. continue
  420. }
  421. } else {
  422. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  423. continue
  424. }
  425. }
  426. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  427. }
  428. }
  429. // WARNING: do not try to insert a Rule to a styleSheet you are
  430. // currently iterating on, otherwise the browser will be stuck
  431. // in a infinite loop…
  432. for (const mediaRule of mediaRules) {
  433. // Safari requires the `0` second parameter (even if default).
  434. colorsLayer.insertRule(mediaRule.cssText, 0)
  435. hasDarkRules = true
  436. }
  437. }
  438. if (hasDarkRules) {
  439. if ('customElements' in window && !customElements.get('theme-toggle')) {
  440. customElements.define('theme-toggle', ThemeToggle)
  441. }
  442. }
  443. })
  444. </script>
  445. </body>
  446. </html>