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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  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. Repos
  14. — David Larlet</title>
  15. <meta name="description" content="Je m’engouffre, sans trop réfléchir et avant qu’il ne file, dans cet élan d’écriture que j’espérais tout en refusant de m’en faire une contrainte. L’Inde m’offre l’imprévu, la nouveauté, la stimulation sans doute, que je n’avais plus en France pour pouvoir écrire autre chose que de la fiction. Ce pays est un roman en soi — je peux revenir avec désir à cette réalité-là. J’en suis aussi excitée que prudente, je n’ai aucune idée de ce que cela va donner ni si ça aura le moindre intérêt. Mais je sais déjà que je n’évoquerai ni les Rafale, ni le nucléaire, ni Modi, ces tue-l’amour absolus.">
  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-04.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t3_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/triplicate_t3_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/triplicate_t3_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. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  106. data-instant-intensity="viewport-all">
  107. <article>
  108. <header>
  109. <hgroup>
  110. <h1>Repos</h1>
  111. <p>Le <time datetime="2024-01-04">4 janvier 2024</time></p>
  112. </hgroup>
  113. </header>
  114. <nav>
  115. <p class="center">
  116. <a rel="prev"
  117. href="/david/2024/01/03/"
  118. title="Publication précédente : Appariement">← Précédent</a> •
  119. <nobr>
  120. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  121. </nobr>
  122. <nobr>
  123. <a href="/david/recherche/"
  124. title="Aller à la page de recherche"
  125. rel="search">Recherche</a>
  126. </nobr>
  127. </p>
  128. </nav>
  129. <blockquote>
  130. <p>Je m’engouffre, sans trop réfléchir et avant qu’il ne file, dans cet élan d’écriture que j’espérais tout en refusant de m’en faire une contrainte. L’Inde m’offre l’imprévu, la nouveauté, la stimulation sans doute, que je n’avais plus en France pour pouvoir écrire autre chose que de la fiction. Ce pays est un roman en soi — je peux revenir avec désir à cette réalité-là. <mark>J’en suis aussi excitée que prudente,</mark> je n’ai aucune idée de ce que cela va donner ni si ça aura le moindre intérêt. Mais je sais déjà que je n’évoquerai ni les Rafale, ni le nucléaire, ni Modi, ces tue-l’amour&nbsp;absolus.</p>
  131. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  132. </blockquote>
  133. <p>Dans un chalet pour quelques jours. Des randonnées à trois générations. Toujours ces questionnements autour de la propriété. Concilier tous les besoins, accepter de changer de vie, ne pas savoir si on serait finalement entourés d’une culture qui ne nous correspond pas (et qui ne nous attire pas non plus). Trouver le bon&nbsp;tempo.</p>
  134. <hr />
  135. <p>Je me demande s’il serait pertinent <a href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/">d’utiliser <code>text-wrap</code></a> sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/typography.py">un script Python</a> que l’on a fait avec <a href="https://ronan.amicel.net/">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p>
  136. <p>Je tente de rendre les citations explicites car on m’a déjà fait le retour de ne pas tout de suite comprendre une publication qui commence par une citation&nbsp;: <q>Ah je croyais que c’était de toi&#8239;!</q>.</p>
  137. <pre><code>blockquote::before {
  138. content: &quot;citation&quot;;
  139. transform: rotate(-90deg);
  140. position: absolute;
  141. margin-left: -1rem;
  142. margin-top: 3.5rem;
  143. }
  144. </code></pre>
  145. <p>Au passage, autant faire de même pour le code. Des couleurs, de la vie&#8239;! De&nbsp;l’envie.</p>
  146. <p>Note&nbsp;: être développeur d’un produit <em>open-source</em> populaire c’est un boulot à plein temps, pas de vacances pour les notifications /&nbsp;sollicitations.</p>
  147. <nav>
  148. <p class="center">
  149. <a rel="prev"
  150. href="/david/2024/01/03/"
  151. title="Publication précédente : Appariement">← Précédent</a> •
  152. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  153. </p>
  154. </nav>
  155. </article>
  156. <hr>
  157. <footer>
  158. <p>
  159. <nobr>
  160. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  161. </nobr>
  162. <nobr>
  163. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  164. </nobr>
  165. <nobr>
  166. <a href="http://larlet.com"
  167. title="Go to my English profile"
  168. data-instant>Pro</a>
  169. </nobr>
  170. <nobr>
  171. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  172. </nobr>
  173. <nobr>
  174. <abbr class="nowrap"
  175. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  176. </nobr>
  177. </p>
  178. <template id="theme-selector">
  179. <form>
  180. <fieldset>
  181. <legend>Thème
  182. </legend>
  183. <label>
  184. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  185. Auto
  186. </label>
  187. <label>
  188. <input type="radio" value="dark" name="chosen-color-scheme">
  189. Foncé
  190. </label>
  191. <label>
  192. <input type="radio" value="light" name="chosen-color-scheme">
  193. Clair
  194. </label>
  195. </fieldset>
  196. </form>
  197. </template>
  198. </footer>
  199. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  200. <script>
  201. function loadThemeForm(templateName) {
  202. const themeSelectorTemplate = document.querySelector(templateName)
  203. const form = themeSelectorTemplate.content.firstElementChild
  204. themeSelectorTemplate.replaceWith(form)
  205. form.addEventListener('change', (e) => {
  206. const chosenColorScheme = e.target.value
  207. localStorage.setItem('theme', chosenColorScheme)
  208. toggleTheme(chosenColorScheme)
  209. })
  210. const selectedTheme = localStorage.getItem('theme')
  211. if (selectedTheme && selectedTheme !== 'undefined') {
  212. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  213. }
  214. }
  215. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  216. window.addEventListener('load', () => {
  217. let hasDarkRules = false
  218. for (const styleSheet of Array.from(document.styleSheets)) {
  219. let mediaRules = []
  220. for (const cssRule of styleSheet.cssRules) {
  221. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  222. continue
  223. }
  224. // WARNING: Safari does not have/supports `conditionText`.
  225. if (cssRule.conditionText) {
  226. if (cssRule.conditionText !== prefersColorSchemeDark) {
  227. continue
  228. }
  229. } else {
  230. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  231. continue
  232. }
  233. }
  234. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  235. }
  236. // WARNING: do not try to insert a Rule to a styleSheet you are
  237. // currently iterating on, otherwise the browser will be stuck
  238. // in a infinite loop…
  239. for (const mediaRule of mediaRules) {
  240. styleSheet.insertRule(mediaRule.cssText)
  241. hasDarkRules = true
  242. }
  243. }
  244. if (hasDarkRules) {
  245. loadThemeForm('#theme-selector')
  246. }
  247. })
  248. </script>
  249. </body>
  250. </html>