Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

8 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
7 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
7 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
10 个月前
10 个月前
6 个月前
6 个月前
6 个月前
6 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
7 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
10 个月前
10 个月前
10 个月前
10 个月前
8 个月前
6 个月前
8 个月前
6 个月前
6 个月前
8 个月前
7 个月前
7 个月前
7 个月前
7 个月前
6 个月前
8 个月前
7 个月前
7 个月前
7 个月前
8 个月前
8 个月前
7 个月前
7 个月前
8 个月前
6 个月前
8 个月前
6 个月前
6 个月前
8 个月前
8 个月前
6 个月前
6 个月前
7 个月前
8 个月前
8 个月前
7 个月前
8 个月前
7 个月前
8 个月前
7 个月前
7 个月前
8 个月前
7 个月前
7 个月前
8 个月前
6 个月前
7 个月前
8 个月前
7 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800
  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. Accueil
  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="Voici l’espace personnel de David Larlet sur le Web.">
  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. <body data-instant-intensity="viewport-all">
  106. <article>
  107. <header>
  108. <hgroup>
  109. <h1>David Larlet</h1>
  110. <p>Avant Facebook, il y avait les sites perso.</p>
  111. </hgroup>
  112. </header>
  113. <h2>Bienvenue</h2>
  114. <p>
  115. Voici mon espace sur le Web.
  116. C’est un jardin pour faire pousser mes idées,
  117. une boîte à chaussure pour mes souvenirs,
  118. la forêt de mes réflexions plus ou moins enchevêtrées,
  119. les métaphores ne manquent pas.
  120. Je vous souhaite de vous y perdre, de revenir,
  121. d’engager des échanges, d’être en désaccord,
  122. d’improviser une rencontre
  123. et que l’on finisse par s’échanger nos meilleures recettes.
  124. </p>
  125. <p>
  126. Souvent je <a href="https://code.larlet.fr/">code</a>,
  127. parfois je vais <a href="https://nature.larlet.fr/">en forêt</a>
  128. et il m’arrive même de prendre <a href="https://media.larlet.fr/">des photos</a>.
  129. On peut papoter <a href="https://fedi.larlet.fr/@david">sur mastodon</a>
  130. ou <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">par courriel</a>.
  131. Vous pouvez <a href="/david/log/" title="Accès au flux RSS">suivre les publications</a>
  132. grâce au flux RSS/Atom (<a href="/david/blog/2019/flux-rss/">explications</a>).
  133. </p>
  134. <p lang="en">
  135. <em>
  136. Check out my
  137. <a href="http://larlet.com" data-instant>profile in English</a>🇨🇦
  138. for up-to-date professional informations.
  139. </em>
  140. </p>
  141. <h2>Publications 2024</h2>
  142. <style type="text/css">
  143. body [data-tag="accessibilite"]:hover,
  144. body [data-accessibilite]:hover,
  145. body:has([data-tag="accessibilite"]:hover) [data-accessibilite],
  146. body:has([data-accessibilite]:hover) [data-tag="accessibilite"] {
  147. background-color: var(--hover-tag-color);
  148. }
  149. body [data-tag="accompagnement"]:hover,
  150. body [data-accompagnement]:hover,
  151. body:has([data-tag="accompagnement"]:hover) [data-accompagnement],
  152. body:has([data-accompagnement]:hover) [data-tag="accompagnement"] {
  153. background-color: var(--hover-tag-color);
  154. }
  155. body [data-tag="adaptation"]:hover,
  156. body [data-adaptation]:hover,
  157. body:has([data-tag="adaptation"]:hover) [data-adaptation],
  158. body:has([data-adaptation]:hover) [data-tag="adaptation"] {
  159. background-color: var(--hover-tag-color);
  160. }
  161. body [data-tag="addiction"]:hover,
  162. body [data-addiction]:hover,
  163. body:has([data-tag="addiction"]:hover) [data-addiction],
  164. body:has([data-addiction]:hover) [data-tag="addiction"] {
  165. background-color: var(--hover-tag-color);
  166. }
  167. body [data-tag="apprentissage"]:hover,
  168. body [data-apprentissage]:hover,
  169. body:has([data-tag="apprentissage"]:hover) [data-apprentissage],
  170. body:has([data-apprentissage]:hover) [data-tag="apprentissage"] {
  171. background-color: var(--hover-tag-color);
  172. }
  173. body [data-tag="aventure"]:hover,
  174. body [data-aventure]:hover,
  175. body:has([data-tag="aventure"]:hover) [data-aventure],
  176. body:has([data-aventure]:hover) [data-tag="aventure"] {
  177. background-color: var(--hover-tag-color);
  178. }
  179. body [data-tag="cinema"]:hover,
  180. body [data-cinema]:hover,
  181. body:has([data-tag="cinema"]:hover) [data-cinema],
  182. body:has([data-cinema]:hover) [data-tag="cinema"] {
  183. background-color: var(--hover-tag-color);
  184. }
  185. body [data-tag="commun"]:hover,
  186. body [data-commun]:hover,
  187. body:has([data-tag="commun"]:hover) [data-commun],
  188. body:has([data-commun]:hover) [data-tag="commun"] {
  189. background-color: var(--hover-tag-color);
  190. }
  191. body [data-tag="communaute"]:hover,
  192. body [data-communaute]:hover,
  193. body:has([data-tag="communaute"]:hover) [data-communaute],
  194. body:has([data-communaute]:hover) [data-tag="communaute"] {
  195. background-color: var(--hover-tag-color);
  196. }
  197. body [data-tag="courage"]:hover,
  198. body [data-courage]:hover,
  199. body:has([data-tag="courage"]:hover) [data-courage],
  200. body:has([data-courage]:hover) [data-tag="courage"] {
  201. background-color: var(--hover-tag-color);
  202. }
  203. body [data-tag="decentralisation"]:hover,
  204. body [data-decentralisation]:hover,
  205. body:has([data-tag="decentralisation"]:hover) [data-decentralisation],
  206. body:has([data-decentralisation]:hover) [data-tag="decentralisation"] {
  207. background-color: var(--hover-tag-color);
  208. }
  209. body [data-tag="deception"]:hover,
  210. body [data-deception]:hover,
  211. body:has([data-tag="deception"]:hover) [data-deception],
  212. body:has([data-deception]:hover) [data-tag="deception"] {
  213. background-color: var(--hover-tag-color);
  214. }
  215. body [data-tag="decision"]:hover,
  216. body [data-decision]:hover,
  217. body:has([data-tag="decision"]:hover) [data-decision],
  218. body:has([data-decision]:hover) [data-tag="decision"] {
  219. background-color: var(--hover-tag-color);
  220. }
  221. body [data-tag="dependance"]:hover,
  222. body [data-dependance]:hover,
  223. body:has([data-tag="dependance"]:hover) [data-dependance],
  224. body:has([data-dependance]:hover) [data-tag="dependance"] {
  225. background-color: var(--hover-tag-color);
  226. }
  227. body [data-tag="documentation"]:hover,
  228. body [data-documentation]:hover,
  229. body:has([data-tag="documentation"]:hover) [data-documentation],
  230. body:has([data-documentation]:hover) [data-tag="documentation"] {
  231. background-color: var(--hover-tag-color);
  232. }
  233. body [data-tag="dystopie"]:hover,
  234. body [data-dystopie]:hover,
  235. body:has([data-tag="dystopie"]:hover) [data-dystopie],
  236. body:has([data-dystopie]:hover) [data-tag="dystopie"] {
  237. background-color: var(--hover-tag-color);
  238. }
  239. body [data-tag="echanges"]:hover,
  240. body [data-echanges]:hover,
  241. body:has([data-tag="echanges"]:hover) [data-echanges],
  242. body:has([data-echanges]:hover) [data-tag="echanges"] {
  243. background-color: var(--hover-tag-color);
  244. }
  245. body [data-tag="ecriture"]:hover,
  246. body [data-ecriture]:hover,
  247. body:has([data-tag="ecriture"]:hover) [data-ecriture],
  248. body:has([data-ecriture]:hover) [data-tag="ecriture"] {
  249. background-color: var(--hover-tag-color);
  250. }
  251. body [data-tag="enthousiasme"]:hover,
  252. body [data-enthousiasme]:hover,
  253. body:has([data-tag="enthousiasme"]:hover) [data-enthousiasme],
  254. body:has([data-enthousiasme]:hover) [data-tag="enthousiasme"] {
  255. background-color: var(--hover-tag-color);
  256. }
  257. body [data-tag="equipe"]:hover,
  258. body [data-equipe]:hover,
  259. body:has([data-tag="equipe"]:hover) [data-equipe],
  260. body:has([data-equipe]:hover) [data-tag="equipe"] {
  261. background-color: var(--hover-tag-color);
  262. }
  263. body [data-tag="evolution"]:hover,
  264. body [data-evolution]:hover,
  265. body:has([data-tag="evolution"]:hover) [data-evolution],
  266. body:has([data-evolution]:hover) [data-tag="evolution"] {
  267. background-color: var(--hover-tag-color);
  268. }
  269. body [data-tag="experience"]:hover,
  270. body [data-experience]:hover,
  271. body:has([data-tag="experience"]:hover) [data-experience],
  272. body:has([data-experience]:hover) [data-tag="experience"] {
  273. background-color: var(--hover-tag-color);
  274. }
  275. body [data-tag="fediverse"]:hover,
  276. body [data-fediverse]:hover,
  277. body:has([data-tag="fediverse"]:hover) [data-fediverse],
  278. body:has([data-fediverse]:hover) [data-tag="fediverse"] {
  279. background-color: var(--hover-tag-color);
  280. }
  281. body [data-tag="foret"]:hover,
  282. body [data-foret]:hover,
  283. body:has([data-tag="foret"]:hover) [data-foret],
  284. body:has([data-foret]:hover) [data-tag="foret"] {
  285. background-color: var(--hover-tag-color);
  286. }
  287. body [data-tag="gratitude"]:hover,
  288. body [data-gratitude]:hover,
  289. body:has([data-tag="gratitude"]:hover) [data-gratitude],
  290. body:has([data-gratitude]:hover) [data-tag="gratitude"] {
  291. background-color: var(--hover-tag-color);
  292. }
  293. body [data-tag="ia"]:hover,
  294. body [data-ia]:hover,
  295. body:has([data-tag="ia"]:hover) [data-ia],
  296. body:has([data-ia]:hover) [data-tag="ia"] {
  297. background-color: var(--hover-tag-color);
  298. }
  299. body [data-tag="identite"]:hover,
  300. body [data-identite]:hover,
  301. body:has([data-tag="identite"]:hover) [data-identite],
  302. body:has([data-identite]:hover) [data-tag="identite"] {
  303. background-color: var(--hover-tag-color);
  304. }
  305. body [data-tag="introspection"]:hover,
  306. body [data-introspection]:hover,
  307. body:has([data-tag="introspection"]:hover) [data-introspection],
  308. body:has([data-introspection]:hover) [data-tag="introspection"] {
  309. background-color: var(--hover-tag-color);
  310. }
  311. body [data-tag="laboratoire"]:hover,
  312. body [data-laboratoire]:hover,
  313. body:has([data-tag="laboratoire"]:hover) [data-laboratoire],
  314. body:has([data-laboratoire]:hover) [data-tag="laboratoire"] {
  315. background-color: var(--hover-tag-color);
  316. }
  317. body [data-tag="lecture"]:hover,
  318. body [data-lecture]:hover,
  319. body:has([data-tag="lecture"]:hover) [data-lecture],
  320. body:has([data-lecture]:hover) [data-tag="lecture"] {
  321. background-color: var(--hover-tag-color);
  322. }
  323. body [data-tag="liens"]:hover,
  324. body [data-liens]:hover,
  325. body:has([data-tag="liens"]:hover) [data-liens],
  326. body:has([data-liens]:hover) [data-tag="liens"] {
  327. background-color: var(--hover-tag-color);
  328. }
  329. body [data-tag="opendata"]:hover,
  330. body [data-opendata]:hover,
  331. body:has([data-tag="opendata"]:hover) [data-opendata],
  332. body:has([data-opendata]:hover) [data-tag="opendata"] {
  333. background-color: var(--hover-tag-color);
  334. }
  335. body [data-tag="opensource"]:hover,
  336. body [data-opensource]:hover,
  337. body:has([data-tag="opensource"]:hover) [data-opensource],
  338. body:has([data-opensource]:hover) [data-tag="opensource"] {
  339. background-color: var(--hover-tag-color);
  340. }
  341. body [data-tag="parentalite"]:hover,
  342. body [data-parentalite]:hover,
  343. body:has([data-tag="parentalite"]:hover) [data-parentalite],
  344. body:has([data-parentalite]:hover) [data-tag="parentalite"] {
  345. background-color: var(--hover-tag-color);
  346. }
  347. body [data-tag="partage"]:hover,
  348. body [data-partage]:hover,
  349. body:has([data-tag="partage"]:hover) [data-partage],
  350. body:has([data-partage]:hover) [data-tag="partage"] {
  351. background-color: var(--hover-tag-color);
  352. }
  353. body [data-tag="parvenir"]:hover,
  354. body [data-parvenir]:hover,
  355. body:has([data-tag="parvenir"]:hover) [data-parvenir],
  356. body:has([data-parvenir]:hover) [data-tag="parvenir"] {
  357. background-color: var(--hover-tag-color);
  358. }
  359. body [data-tag="photographie"]:hover,
  360. body [data-photographie]:hover,
  361. body:has([data-tag="photographie"]:hover) [data-photographie],
  362. body:has([data-photographie]:hover) [data-tag="photographie"] {
  363. background-color: var(--hover-tag-color);
  364. }
  365. body [data-tag="poesie"]:hover,
  366. body [data-poesie]:hover,
  367. body:has([data-tag="poesie"]:hover) [data-poesie],
  368. body:has([data-poesie]:hover) [data-tag="poesie"] {
  369. background-color: var(--hover-tag-color);
  370. }
  371. body [data-tag="processus"]:hover,
  372. body [data-processus]:hover,
  373. body:has([data-tag="processus"]:hover) [data-processus],
  374. body:has([data-processus]:hover) [data-tag="processus"] {
  375. background-color: var(--hover-tag-color);
  376. }
  377. body [data-tag="propriete"]:hover,
  378. body [data-propriete]:hover,
  379. body:has([data-tag="propriete"]:hover) [data-propriete],
  380. body:has([data-propriete]:hover) [data-tag="propriete"] {
  381. background-color: var(--hover-tag-color);
  382. }
  383. body [data-tag="protopie"]:hover,
  384. body [data-protopie]:hover,
  385. body:has([data-tag="protopie"]:hover) [data-protopie],
  386. body:has([data-protopie]:hover) [data-tag="protopie"] {
  387. background-color: var(--hover-tag-color);
  388. }
  389. body [data-tag="psychologie"]:hover,
  390. body [data-psychologie]:hover,
  391. body:has([data-tag="psychologie"]:hover) [data-psychologie],
  392. body:has([data-psychologie]:hover) [data-tag="psychologie"] {
  393. background-color: var(--hover-tag-color);
  394. }
  395. body [data-tag="solastalgia"]:hover,
  396. body [data-solastalgia]:hover,
  397. body:has([data-tag="solastalgia"]:hover) [data-solastalgia],
  398. body:has([data-solastalgia]:hover) [data-tag="solastalgia"] {
  399. background-color: var(--hover-tag-color);
  400. }
  401. body [data-tag="sport"]:hover,
  402. body [data-sport]:hover,
  403. body:has([data-tag="sport"]:hover) [data-sport],
  404. body:has([data-sport]:hover) [data-tag="sport"] {
  405. background-color: var(--hover-tag-color);
  406. }
  407. body [data-tag="technique"]:hover,
  408. body [data-technique]:hover,
  409. body:has([data-tag="technique"]:hover) [data-technique],
  410. body:has([data-technique]:hover) [data-tag="technique"] {
  411. background-color: var(--hover-tag-color);
  412. }
  413. body [data-tag="velo"]:hover,
  414. body [data-velo]:hover,
  415. body:has([data-tag="velo"]:hover) [data-velo],
  416. body:has([data-velo]:hover) [data-tag="velo"] {
  417. background-color: var(--hover-tag-color);
  418. }
  419. body [data-tag="web"]:hover,
  420. body [data-web]:hover,
  421. body:has([data-tag="web"]:hover) [data-web],
  422. body:has([data-web]:hover) [data-tag="web"] {
  423. background-color: var(--hover-tag-color);
  424. }
  425. </style>
  426. <p>Liste des publications récentes en ordre anté-chronologique :</p>
  427. <p>
  428. <a href="/david/2024/05/05/" data-aventure data-foret data-sport title="Étiquettes : aventure, forêt, sport.">Jour 2</a>,
  429. <a href="/david/2024/05/04/" data-aventure data-foret data-sport title="Étiquettes : aventure, forêt, sport.">Jour 1</a>,
  430. <a href="/david/2024/04/23/" data-experience data-gratitude data-introspection title="Étiquettes : expérience, gratitude, introspection.">42</a>,
  431. <a href="/david/2024/04/22/" data-adaptation data-laboratoire data-sport title="Étiquettes : adaptation, laboratoire, sport.">Alimentation</a>,
  432. <a href="/david/2024/04/20/" data-apprentissage data-deception data-foret title="Étiquettes : apprentissage, déception, forêt.">Jour 1</a>,
  433. <a href="/david/2024/04/18/" data-apprentissage data-introspection data-technique title="Étiquettes : apprentissage, introspection, technique.">Calme</a>,
  434. <a href="/david/2024/04/17/" data-commun data-decentralisation data-protopie title="Étiquettes : commun, décentralisation, protopie.">Échelle</a>,
  435. <a href="/david/2024/04/14/" data-enthousiasme data-laboratoire data-sport title="Étiquettes : enthousiasme, laboratoire, sport.">Apex 2</a>,
  436. <a href="/david/2024/04/13/" data-dystopie data-lecture data-psychologie title="Étiquettes : dystopie, lecture, psychologie.">Fondation</a>,
  437. <a href="/david/2024/04/10/" data-communaute data-poesie data-psychologie title="Étiquettes : communauté, poésie, psychologie.">Weird</a>,
  438. <a href="/david/2024/04/08/" data-enthousiasme data-experience data-photographie title="Étiquettes : enthousiasme, expérience, photographie.">Éclipse</a>,
  439. <a href="/david/2024/04/07/" data-courage data-sport data-technique title="Étiquettes : courage, sport, technique.">Piscine</a>,
  440. <a href="/david/2024/04/05/" data-documentation data-experience data-psychologie title="Étiquettes : documentation, expérience, psychologie.">Productivité</a>,
  441. <a href="/david/2024/04/03/" data-equipe data-experience data-gratitude title="Étiquettes : équipe, expérience, gratitude.">Décision</a>,
  442. <a href="/david/2024/04/02/" data-commun data-opensource data-protopie title="Étiquettes : commun, opensource, protopie.">Porte</a>,
  443. <a href="/david/2024/03/30/" data-experience data-foret data-partage title="Étiquettes : expérience, forêt, partage.">Jour 2</a>,
  444. <a href="/david/2024/03/29/" data-experience data-foret data-partage title="Étiquettes : expérience, forêt, partage.">Jour 1</a>,
  445. <a href="/david/2024/03/28/" data-commun data-equipe data-protopie title="Étiquettes : commun, équipe, protopie.">Collectif</a>,
  446. <a href="/david/2024/03/26/" data-apprentissage data-technique data-web title="Étiquettes : apprentissage, technique, web.">GPX Viewer</a>,
  447. <a href="/david/2024/03/25/" data-dependance data-partage data-technique title="Étiquettes : dépendance, partage, technique.">Inclusion</a>,
  448. <a href="/david/2024/03/24/" data-courage data-lecture data-poesie title="Étiquettes : courage, lecture, poésie.">Cage</a>,
  449. <a href="/david/2024/03/23/" data-dependance data-psychologie data-technique title="Étiquettes : dépendance, psychologie, technique.">Intendant</a>,
  450. <a href="/david/2024/03/21/" data-communaute data-opensource data-technique title="Étiquettes : communauté, opensource, technique.">Fourchette</a>,
  451. <a href="/david/2024/03/20/" data-laboratoire data-opensource data-technique title="Étiquettes : laboratoire, opensource, technique.">PageCrypt</a>,
  452. <a href="/david/2024/03/19/" data-apprentissage data-enthousiasme data-technique title="Étiquettes : apprentissage, enthousiasme, technique.">Excitation</a>,
  453. <a href="/david/2024/03/18/" data-adaptation data-addiction data-evolution title="Étiquettes : adaptation, addiction, évolution.">Casquettes</a>,
  454. <a href="/david/2024/03/16/" data-aventure data-ecriture data-lecture title="Étiquettes : aventure, écriture, lecture.">Descriptions</a>,
  455. <a href="/david/2024/03/14/" data-deception data-enthousiasme data-sport title="Étiquettes : déception, enthousiasme, sport.">Montre 2</a>,
  456. <a href="/david/2024/03/13/" data-liens data-partage data-web title="Étiquettes : liens, partage, web.">Sérendipité</a>,
  457. <a href="/david/2024/03/12/" data-partage data-technique data-web title="Étiquettes : partage, technique, web.">Surligner</a>,
  458. <a href="/david/2024/03/11/" data-decentralisation data-dependance data-web title="Étiquettes : décentralisation, dépendance, web.">LoginWall</a>,
  459. <a href="/david/2024/03/10/" data-adaptation data-cinema data-lecture title="Étiquettes : adaptation, cinéma, lecture.">Dune</a>,
  460. <a href="/david/2024/03/09/" data-evolution data-identite data-poesie title="Étiquettes : évolution, identité, poésie.">Marque</a>,
  461. <a href="/david/2024/03/08/" data-experience data-psychologie data-technique title="Étiquettes : expérience, psychologie, technique.">Flow</a>,
  462. <a href="/david/2024/03/07/" data-commun data-deception data-web title="Étiquettes : commun, déception, web.">Sondages</a>,
  463. <a href="/david/2024/03/06/" data-apprentissage data-parentalite data-protopie title="Étiquettes : apprentissage, parentalité, protopie.">Vannerie</a>,
  464. <a href="/david/2024/03/05/" data-adaptation data-aventure data-psychologie title="Étiquettes : adaptation, aventure, psychologie.">Jour 2</a>,
  465. <a href="/david/2024/03/04/" data-dystopie data-foret data-solastalgia title="Étiquettes : dystopie, forêt, solastalgia.">Jour 1</a>,
  466. <a href="/david/2024/03/03/" data-dependance data-opensource data-parvenir title="Étiquettes : dépendance, opensource, parvenir.">Permanence</a>,
  467. <a href="/david/2024/03/02/" data-dependance data-sport data-technique title="Étiquettes : dépendance, sport, technique.">Montre</a>,
  468. <a href="/david/2024/03/01/" data-evolution data-laboratoire data-web title="Étiquettes : évolution, laboratoire, web.">Simple</a>,
  469. <a href="/david/2024/02/29/" data-commun data-deception data-psychologie title="Étiquettes : commun, déception, psychologie.">Wikipédia</a>,
  470. <a href="/david/2024/02/28/" data-documentation data-partage data-solastalgia title="Étiquettes : documentation, partage, solastalgia.">Dérèglement</a>,
  471. <a href="/david/2024/02/27/" data-ecriture data-processus data-psychologie title="Étiquettes : écriture, processus, psychologie.">Rédaction</a>,
  472. <a href="/david/2024/02/26/" data-parentalite data-poesie data-solastalgia title="Étiquettes : parentalité, poésie, solastalgia.">Galaxie</a>,
  473. <a href="/david/2024/02/25/" data-aventure data-foret data-gratitude title="Étiquettes : aventure, forêt, gratitude.">Jour 2</a>,
  474. <a href="/david/2024/02/24/" data-aventure data-foret data-sport title="Étiquettes : aventure, forêt, sport.">Jour 1</a>,
  475. <a href="/david/2024/02/23/" data-apprentissage data-processus data-web title="Étiquettes : apprentissage, processus, web.">Préparatifs</a>,
  476. <a href="/david/2024/02/22/" data-decision data-experience data-partage title="Étiquettes : décision, expérience, partage.">Responsabilité</a>,
  477. <a href="/david/2024/02/21/" data-dystopie data-ia data-psychologie title="Étiquettes : dystopie, IA, psychologie.">Cinéma</a>,
  478. <a href="/david/2024/02/20/" data-echanges data-laboratoire data-protopie title="Étiquettes : échanges, laboratoire, protopie.">Véhicule</a>,
  479. <a href="/david/2024/02/19/" data-apprentissage data-laboratoire data-web title="Étiquettes : apprentissage, laboratoire, web.">Injection</a>,
  480. <a href="/david/2024/02/18/" data-commun data-dependance data-technique title="Étiquettes : commun, dépendance, technique.">In·directions</a>,
  481. <a href="/david/2024/02/17/" data-ecriture data-lecture data-solastalgia title="Étiquettes : écriture, lecture, solastalgia.">Quotidien</a>,
  482. <a href="/david/2024/02/16/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">uMap 2</a>,
  483. <a href="/david/2024/02/15/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">Licence</a>,
  484. <a href="/david/2024/02/14/" data-commun data-opendata data-technique title="Étiquettes : commun, opendata, technique.">GéoCodage</a>,
  485. <a href="/david/2024/02/13/" data-apprentissage data-processus data-protopie title="Étiquettes : apprentissage, processus, protopie.">Feutrage</a>,
  486. <a href="/david/2024/02/12/" data-apprentissage data-echanges data-photographie title="Étiquettes : apprentissage, échanges, photographie.">Renards</a>,
  487. <a href="/david/2024/02/11/" data-communaute data-opensource data-psychologie title="Étiquettes : communauté, opensource, psychologie.">Violence</a>,
  488. <a href="/david/2024/02/10/" data-accessibilite data-experience data-psychologie title="Étiquettes : accessibilité, expérience, psychologie.">Validisme</a>,
  489. <a href="/david/2024/02/09/" data-apprentissage data-decision data-opensource title="Étiquettes : apprentissage, décision, opensource.">Version</a>,
  490. <a href="/david/2024/02/08/" data-apprentissage data-equipe data-evolution title="Étiquettes : apprentissage, équipe, évolution.">Écoute</a>,
  491. <a href="/david/2024/02/07/" data-decision data-foret data-photographie title="Étiquettes : décision, forêt, photographie.">Écureuil</a>,
  492. <a href="/david/2024/02/06/" data-communaute data-equipe data-lecture title="Étiquettes : communauté, équipe, lecture.">Anneau</a>,
  493. <a href="/david/2024/02/05/" data-experience data-psychologie data-technique title="Étiquettes : expérience, psychologie, technique.">Jeu</a>,
  494. <a href="/david/2024/02/04/" data-apprentissage data-technique data-web title="Étiquettes : apprentissage, technique, web.">Tooltipopover</a>,
  495. <a href="/david/2024/02/03/" data-dependance data-opensource data-technique title="Étiquettes : dépendance, opensource, technique.">Archives</a>,
  496. <a href="/david/2024/02/02/" data-equipe data-processus data-protopie title="Étiquettes : équipe, processus, protopie.">Valeurs</a>,
  497. <a href="/david/2024/02/01/" data-accessibilite data-dystopie data-evolution title="Étiquettes : accessibilité, dystopie, évolution.">Vision</a>,
  498. <a href="/david/2024/01/31/" data-commun data-documentation data-partage title="Étiquettes : commun, documentation, partage.">Mécénat</a>,
  499. <a href="/david/2024/01/30/" data-apprentissage data-equipe data-processus title="Étiquettes : apprentissage, équipe, processus.">Équipe</a>,
  500. <a href="/david/2024/01/29/" data-echanges data-technique data-web title="Étiquettes : échanges, technique, web.">Déploiement</a>,
  501. <a href="/david/2024/01/28/" data-experience data-foret data-parentalite title="Étiquettes : expérience, forêt, parentalité.">Jour 2</a>,
  502. <a href="/david/2024/01/27/" data-experience data-foret data-parentalite title="Étiquettes : expérience, forêt, parentalité.">Jour 1</a>,
  503. <a href="/david/2024/01/26/" data-gratitude data-partage data-psychologie title="Étiquettes : gratitude, partage, psychologie.">Cargo</a>,
  504. <a href="/david/2024/01/25/" data-apprentissage data-equipe data-velo title="Étiquettes : apprentissage, équipe, vélo.">Stratégie</a>,
  505. <a href="/david/2024/01/24/" data-communaute data-equipe data-processus title="Étiquettes : communauté, équipe, processus.">Taille</a>,
  506. <a href="/david/2024/01/23/" data-commun data-experience data-processus title="Étiquettes : commun, expérience, processus.">Thèse</a>,
  507. <a href="/david/2024/01/22/" data-echanges data-experience data-gratitude title="Étiquettes : échanges, expérience, gratitude.">Légitimité</a>,
  508. <a href="/david/2024/01/21/" data-apprentissage data-foret data-protopie title="Étiquettes : apprentissage, forêt, protopie.">Bois</a>,
  509. <a href="/david/2024/01/20/" data-dependance data-evolution data-parentalite title="Étiquettes : dépendance, évolution, parentalité.">Extinction</a>,
  510. <a href="/david/2024/01/19/" data-accompagnement data-communaute data-echanges title="Étiquettes : accompagnement, communauté, échanges.">Marcher</a>,
  511. <a href="/david/2024/01/18/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">Open-source</a>,
  512. <a href="/david/2024/01/17/" data-experience data-technique data-web title="Étiquettes : expérience, technique, web.">Vieillesse</a>,
  513. <a href="/david/2024/01/16/" data-addiction data-evolution data-technique title="Étiquettes : addiction, évolution, technique.">Endorphines</a>,
  514. <a href="/david/2024/01/15/" data-addiction data-evolution data-sport title="Étiquettes : addiction, évolution, sport.">Rééducation</a>,
  515. <a href="/david/2024/01/14/" data-ecriture data-experience data-protopie title="Étiquettes : écriture, expérience, protopie.">Fiction</a>,
  516. <a href="/david/2024/01/13/" data-ecriture data-ia data-parvenir title="Étiquettes : écriture, IA, parvenir.">Wuwei</a>,
  517. <a href="/david/2024/01/12/" data-ecriture data-processus data-psychologie title="Étiquettes : écriture, processus, psychologie.">Personnel</a>,
  518. <a href="/david/2024/01/11/" data-evolution data-technique data-web title="Étiquettes : évolution, technique, web.">Impact</a>,
  519. <a href="/david/2024/01/10/" data-apprentissage data-ecriture data-ia title="Étiquettes : apprentissage, écriture, IA.">Écriture</a>,
  520. <a href="/david/2024/01/09/" data-accessibilite data-sport data-technique title="Étiquettes : accessibilité, sport, technique.">Blessure</a>,
  521. <a href="/david/2024/01/08/" data-processus data-solastalgia data-technique title="Étiquettes : processus, solastalgia, technique.">Liens</a>,
  522. <a href="/david/2024/01/07/" data-apprentissage data-communaute data-fediverse title="Étiquettes : apprentissage, communauté, fédiverse.">Dons</a>,
  523. <a href="/david/2024/01/06/" data-addiction data-processus data-sport title="Étiquettes : addiction, processus, sport.">Objectif</a>,
  524. <a href="/david/2024/01/05/" data-apprentissage data-decision data-equipe title="Étiquettes : apprentissage, décision, équipe.">Vocabulaire</a>,
  525. <a href="/david/2024/01/04/" data-decision data-parvenir data-propriete title="Étiquettes : décision, parvenir, propriété.">Repos</a>,
  526. <a href="/david/2024/01/03/" data-accompagnement data-ecriture data-web title="Étiquettes : accompagnement, écriture, web.">Appariement</a>,
  527. <a href="/david/2024/01/02/" data-experience data-technique data-web title="Étiquettes : expérience, technique, web.">Fondations</a>,
  528. <a href="/david/2024/01/01/" data-addiction data-experience data-protopie title="Étiquettes : addiction, expérience, protopie.">Dryear(s)</a>.
  529. </p>
  530. <p id="tags-2024">Ou par étiquettes :</p>
  531. <p>
  532. <a href="/david/2024/accessibilite/" data-tag="accessibilite" rel="tag">#accessibilité (3)</a>,
  533. <a href="/david/2024/accompagnement/" data-tag="accompagnement" rel="tag">#accompagnement (2)</a>,
  534. <a href="/david/2024/adaptation/" data-tag="adaptation" rel="tag">#adaptation (4)</a>,
  535. <a href="/david/2024/addiction/" data-tag="addiction" rel="tag">#addiction (5)</a>,
  536. <a href="/david/2024/apprentissage/" data-tag="apprentissage" rel="tag">#apprentissage (18)</a>,
  537. <a href="/david/2024/aventure/" data-tag="aventure" rel="tag">#aventure (6)</a>,
  538. <a href="/david/2024/cinema/" data-tag="cinema" rel="tag">#cinéma (1)</a>,
  539. <a href="/david/2024/commun/" data-tag="commun" rel="tag">#commun (12)</a>,
  540. <a href="/david/2024/communaute/" data-tag="communaute" rel="tag">#communauté (7)</a>,
  541. <a href="/david/2024/courage/" data-tag="courage" rel="tag">#courage (2)</a>,
  542. <a href="/david/2024/decentralisation/" data-tag="decentralisation" rel="tag">#décentralisation (2)</a>,
  543. <a href="/david/2024/deception/" data-tag="deception" rel="tag">#déception (4)</a>,
  544. <a href="/david/2024/decision/" data-tag="decision" rel="tag">#décision (8)</a>,
  545. <a href="/david/2024/dependance/" data-tag="dependance" rel="tag">#dépendance (8)</a>,
  546. <a href="/david/2024/documentation/" data-tag="documentation" rel="tag">#documentation (3)</a>,
  547. <a href="/david/2024/dystopie/" data-tag="dystopie" rel="tag">#dystopie (4)</a>,
  548. <a href="/david/2024/echanges/" data-tag="echanges" rel="tag">#échanges (5)</a>,
  549. <a href="/david/2024/ecriture/" data-tag="ecriture" rel="tag">#écriture (8)</a>,
  550. <a href="/david/2024/enthousiasme/" data-tag="enthousiasme" rel="tag">#enthousiasme (4)</a>,
  551. <a href="/david/2024/equipe/" data-tag="equipe" rel="tag">#équipe (9)</a>,
  552. <a href="/david/2024/evolution/" data-tag="evolution" rel="tag">#évolution (9)</a>,
  553. <a href="/david/2024/experience/" data-tag="experience" rel="tag">#expérience (18)</a>,
  554. <a href="/david/2024/fediverse/" data-tag="fediverse" rel="tag">#fédiverse (1)</a>,
  555. <a href="/david/2024/foret/" data-tag="foret" rel="tag">#forêt (12)</a>,
  556. <a href="/david/2024/gratitude/" data-tag="gratitude" rel="tag">#gratitude (5)</a>,
  557. <a href="/david/2024/ia/" data-tag="ia" rel="tag">#IA (3)</a>,
  558. <a href="/david/2024/identite/" data-tag="identite" rel="tag">#identité (1)</a>,
  559. <a href="/david/2024/introspection/" data-tag="introspection" rel="tag">#introspection (2)</a>,
  560. <a href="/david/2024/laboratoire/" data-tag="laboratoire" rel="tag">#laboratoire (6)</a>,
  561. <a href="/david/2024/lecture/" data-tag="lecture" rel="tag">#lecture (6)</a>,
  562. <a href="/david/2024/liens/" data-tag="liens" rel="tag">#liens (1)</a>,
  563. <a href="/david/2024/opendata/" data-tag="opendata" rel="tag">#opendata (1)</a>,
  564. <a href="/david/2024/opensource/" data-tag="opensource" rel="tag">#opensource (10)</a>,
  565. <a href="/david/2024/parentalite/" data-tag="parentalite" rel="tag">#parentalité (5)</a>,
  566. <a href="/david/2024/partage/" data-tag="partage" rel="tag">#partage (9)</a>,
  567. <a href="/david/2024/parvenir/" data-tag="parvenir" rel="tag">#parvenir (3)</a>,
  568. <a href="/david/2024/photographie/" data-tag="photographie" rel="tag">#photographie (3)</a>,
  569. <a href="/david/2024/poesie/" data-tag="poesie" rel="tag">#poésie (4)</a>,
  570. <a href="/david/2024/processus/" data-tag="processus" rel="tag">#processus (10)</a>,
  571. <a href="/david/2024/propriete/" data-tag="propriete" rel="tag">#propriété (1)</a>,
  572. <a href="/david/2024/protopie/" data-tag="protopie" rel="tag">#protopie (10)</a>,
  573. <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (14)</a>,
  574. <a href="/david/2024/solastalgia/" data-tag="solastalgia" rel="tag">#solastalgia (5)</a>,
  575. <a href="/david/2024/sport/" data-tag="sport" rel="tag">#sport (11)</a>,
  576. <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (23)</a>,
  577. <a href="/david/2024/velo/" data-tag="velo" rel="tag">#vélo (1)</a>,
  578. <a href="/david/2024/web/" data-tag="web" rel="tag">#web (14)</a>.
  579. </p>
  580. <p>
  581. Les <a href="/david/blogroll/">liens des ami·es</a> avec leurs dernières publications 🤗.
  582. </p>
  583. <h2>Publications plus anciennes</h2>
  584. <p>
  585. J’ai publié
  586. sporadiquement en <a href="/david/2023/"
  587. title="Voir la liste de toutes les publications 2023">2023</a>
  588. ainsi qu’en <a href="/david/2022/"
  589. title="Voir la liste de toutes les publications 2022">2022</a>,
  590. (pres)quotidiennemment en <a href="/david/2021/"
  591. title="Voir la liste de toutes les publications 2021">2021</a> et
  592. hebdomadairement en <a href="/david/2020/"
  593. title="Voir la liste de toutes les publications 2020">2020</a>
  594. .
  595. </p>
  596. <p>
  597. Vous pouvez aussi consulter les différents
  598. <a href="/david/blog/">billets de blog</a> qui ont été rédigés de 2004 (!) à 2019
  599. ou les <a href="/david/stream/">entrées de journaux</a> relativement
  600. régulières entre 2009 et 2019.
  601. </p>
  602. <p>
  603. <em>
  604. Notez qu’avec un tel historique, certaines informations sont obsolètes et/ou
  605. plus cautionnées.
  606. </em>
  607. </p>
  608. <form action="/david/recherche/" method="get">
  609. <fieldset>
  610. <legend>Recherche</legend>
  611. <label for="input-search">Termes de votre recherche :</label>
  612. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  613. <input type="submit" value="Chercher">
  614. <p id="indexation-infos">
  615. <small>
  616. Seuls les contenus de ces 8 dernières années sont indexés.
  617. </small>
  618. </p>
  619. </fieldset>
  620. </form>
  621. <aside>
  622. <theme-toggle></theme-toggle>
  623. </aside>
  624. </article>
  625. <hr>
  626. <footer>
  627. <p>
  628. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  629. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  630. <a href="http://larlet.com"
  631. title="Go to my English profile"
  632. data-instant>Pro</a>
  633. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  634. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  635. </p>
  636. <template id="theme-selector">
  637. <form>
  638. <style type="text/css">
  639. fieldset div {
  640. text-align: center;
  641. }
  642. </style>
  643. <fieldset>
  644. <legend>Thème</legend>
  645. <div>
  646. <label>
  647. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  648. Auto
  649. </label>
  650. <label>
  651. <input type="radio" value="dark" name="chosen-color-scheme">
  652. Foncé
  653. </label>
  654. <label>
  655. <input type="radio" value="light" name="chosen-color-scheme">
  656. Clair
  657. </label>
  658. </div>
  659. </fieldset>
  660. </form>
  661. </template>
  662. </footer>
  663. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  664. <script>
  665. class ThemeToggle extends HTMLElement {
  666. constructor() {
  667. super()
  668. const themeSelectorTemplate = document.querySelector('#theme-selector')
  669. const form = themeSelectorTemplate.content.firstElementChild
  670. this.attachShadow({ mode: 'open' })
  671. this.shadowRoot.appendChild(form.cloneNode(true))
  672. }
  673. connectedCallback() {
  674. const form = this.shadowRoot.querySelector('form')
  675. form.addEventListener('change', (e) => {
  676. const chosenColorScheme = e.target.value
  677. localStorage.setItem('theme', chosenColorScheme)
  678. toggleTheme(chosenColorScheme)
  679. })
  680. const selectedTheme = localStorage.getItem('theme')
  681. if (selectedTheme && selectedTheme !== 'undefined') {
  682. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  683. }
  684. }
  685. }
  686. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  687. window.addEventListener('load', () => {
  688. let colorsLayer = undefined
  689. let hasDarkRules = false
  690. for (const styleSheet of Array.from(document.styleSheets)) {
  691. let mediaRules = []
  692. for (const layerRule of styleSheet.cssRules) {
  693. if (!(layerRule instanceof CSSLayerBlockRule)) {
  694. continue
  695. }
  696. if (layerRule.name === 'colors') {
  697. colorsLayer = layerRule
  698. }
  699. for (const cssRule of layerRule.cssRules) {
  700. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  701. continue
  702. }
  703. // WARNING: Safari does not have/supports `conditionText`.
  704. if (cssRule.conditionText) {
  705. if (cssRule.conditionText !== prefersColorSchemeDark) {
  706. continue
  707. }
  708. } else {
  709. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  710. continue
  711. }
  712. }
  713. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  714. }
  715. }
  716. // WARNING: do not try to insert a Rule to a styleSheet you are
  717. // currently iterating on, otherwise the browser will be stuck
  718. // in a infinite loop…
  719. for (const mediaRule of mediaRules) {
  720. // Safari requires the `0` second parameter (even if default).
  721. colorsLayer.insertRule(mediaRule.cssText, 0)
  722. hasDarkRules = true
  723. }
  724. }
  725. if (hasDarkRules) {
  726. if ('customElements' in window && !customElements.get('theme-toggle')) {
  727. customElements.define('theme-toggle', ThemeToggle)
  728. }
  729. }
  730. })
  731. </script>
  732. </body>
  733. </html>