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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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-13.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. <body data-instant-intensity="viewport-all">
  106. <article>
  107. <header>
  108. <hgroup>
  109. <h1>Repos</h1>
  110. <p>Le <time datetime="2024-01-04">4 janvier 2024</time></p>
  111. </hgroup>
  112. </header>
  113. <nav>
  114. <p class="center">
  115. <a rel="prev"
  116. href="/david/2024/01/03/"
  117. title="Publication précédente : Appariement">← Précédent</a> •
  118. <nobr>
  119. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  120. </nobr>
  121. <nobr>
  122. <a href="/david/recherche/"
  123. title="Aller à la page de recherche"
  124. rel="search">Recherche</a>
  125. </nobr>
  126. • <a rel="next"
  127. href="/david/2024/01/05/"
  128. title="Publication suivante : Vocabulaire">Suivant →</a>
  129. </p>
  130. </nav>
  131. <blockquote>
  132. <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>
  133. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  134. </blockquote>
  135. <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>
  136. <hr />
  137. <p>Je me demande s’il serait pertinent <a data-link-domain="blog.stephaniestimac.com" href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/">d’utiliser <code>text-wrap</code></a> <a href="/david/cache/2024/b31ba18e3de1fc479b79f1885043026a/" title="Copie locale au 2024-01-07">[archive]</a> sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a data-link-domain="git.larlet.fr" 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 data-link-domain="ronan.amicel.net" href="https://ronan.amicel.net/">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p>
  138. <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>
  139. <pre><code>blockquote::before {
  140. content: &quot;citation&quot;;
  141. transform: rotate(-90deg);
  142. position: absolute;
  143. margin-left: -1rem;
  144. margin-top: 3.5rem;
  145. }
  146. </code></pre>
  147. <p>Au passage, autant faire de même pour le code. Des couleurs, de la vie&#8239;! De&nbsp;l’envie.</p>
  148. <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>
  149. <nav>
  150. <p class="center">
  151. <a rel="prev"
  152. href="/david/2024/01/03/"
  153. title="Publication précédente : Appariement">← Précédent</a> •
  154. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  155. • <a rel="next"
  156. href="/david/2024/01/05/"
  157. title="Publication suivante : Vocabulaire">Suivant →</a>
  158. </p>
  159. </nav>
  160. <aside>
  161. <theme-toggle></theme-toggle>
  162. </aside>
  163. </article>
  164. <hr>
  165. <footer>
  166. <p>
  167. <nobr>
  168. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  169. </nobr>
  170. <nobr>
  171. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  172. </nobr>
  173. <nobr>
  174. <a href="http://larlet.com"
  175. title="Go to my English profile"
  176. data-instant>Pro</a>
  177. </nobr>
  178. <nobr>
  179. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  180. </nobr>
  181. <nobr>
  182. <abbr class="nowrap"
  183. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  184. </nobr>
  185. </p>
  186. <template id="theme-selector">
  187. <form>
  188. <style type="text/css">
  189. fieldset {
  190. text-align: center;
  191. }
  192. </style>
  193. <fieldset>
  194. <legend>Thème
  195. </legend>
  196. <label>
  197. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  198. Auto
  199. </label>
  200. <label>
  201. <input type="radio" value="dark" name="chosen-color-scheme">
  202. Foncé
  203. </label>
  204. <label>
  205. <input type="radio" value="light" name="chosen-color-scheme">
  206. Clair
  207. </label>
  208. </fieldset>
  209. </form>
  210. </template>
  211. </footer>
  212. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  213. <script>
  214. class ThemeToggle extends HTMLElement {
  215. constructor() {
  216. super()
  217. const themeSelectorTemplate = document.querySelector('#theme-selector')
  218. const form = themeSelectorTemplate.content.firstElementChild
  219. this.attachShadow({ mode: 'open' })
  220. this.shadowRoot.appendChild(form.cloneNode(true))
  221. }
  222. connectedCallback() {
  223. const form = this.shadowRoot.querySelector('form')
  224. form.addEventListener('change', (e) => {
  225. const chosenColorScheme = e.target.value
  226. localStorage.setItem('theme', chosenColorScheme)
  227. toggleTheme(chosenColorScheme)
  228. })
  229. const selectedTheme = localStorage.getItem('theme')
  230. if (selectedTheme && selectedTheme !== 'undefined') {
  231. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  232. }
  233. }
  234. }
  235. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  236. window.addEventListener('load', () => {
  237. let colorsLayer = undefined
  238. let hasDarkRules = false
  239. for (const styleSheet of Array.from(document.styleSheets)) {
  240. let mediaRules = []
  241. for (const layerRule of styleSheet.cssRules) {
  242. if (!(layerRule instanceof CSSLayerBlockRule)) {
  243. continue
  244. }
  245. if (layerRule.name === 'colors') {
  246. colorsLayer = layerRule
  247. }
  248. for (const cssRule of layerRule.cssRules) {
  249. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  250. continue
  251. }
  252. // WARNING: Safari does not have/supports `conditionText`.
  253. if (cssRule.conditionText) {
  254. if (cssRule.conditionText !== prefersColorSchemeDark) {
  255. continue
  256. }
  257. } else {
  258. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  259. continue
  260. }
  261. }
  262. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  263. }
  264. }
  265. // WARNING: do not try to insert a Rule to a styleSheet you are
  266. // currently iterating on, otherwise the browser will be stuck
  267. // in a infinite loop…
  268. for (const mediaRule of mediaRules) {
  269. // Safari requires the `0` second parameter (even if default).
  270. colorsLayer.insertRule(mediaRule.cssText, 0)
  271. hasDarkRules = true
  272. }
  273. }
  274. if (hasDarkRules) {
  275. if ('customElements' in window && !customElements.get('theme-toggle')) {
  276. customElements.define('theme-toggle', ThemeToggle)
  277. }
  278. }
  279. })
  280. </script>
  281. </body>
  282. </html>