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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  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. Appariement
  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="Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera Century Supra qui fera la paire avec Concourse pour du sans serif (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.">
  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. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Appariement</h1>
  136. <p>Le <time datetime="2024-01-03">3 janvier 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/01/02/"
  143. title="Publication précédente : Fondations">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/01/04/"
  150. title="Publication suivante : Repos">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
  154. <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
  155. <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
  156. <p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
  157. <a href="#hr-4" title="Lien vers cette section de la page"><hr id="hr-4" /></a>
  158. <blockquote>
  159. <p><mark>Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.</mark> Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&nbsp;vie.</p>
  160. <p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
  161. </blockquote>
  162. <p>L’introduction de <em>Alors nous irons trouver la beauté ailleurs</em> par Corinne Morel Darleux m’aura suffit pour&nbsp;aujourd’hui&nbsp;🙂.</p>
  163. <a href="#hr-5" title="Lien vers cette section de la page"><hr id="hr-5" /></a>
  164. <p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense a été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
  165. <p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
  166. <nav>
  167. <p>
  168. <a href="/david/2024/accompagnement/"
  169. title="Liste de tous les articles 2024 associés à cette étiquette"
  170. rel="tag">#accompagnement</a>
  171. <a href="/david/2024/ecriture/"
  172. title="Liste de tous les articles 2024 associés à cette étiquette"
  173. rel="tag">#écriture</a>
  174. <a href="/david/2024/web/"
  175. title="Liste de tous les articles 2024 associés à cette étiquette"
  176. rel="tag">#web</a>
  177. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  178. </p>
  179. </nav>
  180. <nav>
  181. <p>
  182. <a rel="prev"
  183. href="/david/2024/01/02/"
  184. title="Publication précédente : Fondations">← Précédent</a> •
  185. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  186. • <a rel="next"
  187. href="/david/2024/01/04/"
  188. title="Publication suivante : Repos">Suivant →</a>
  189. </p>
  190. </nav>
  191. <form action="/david/recherche/" method="get">
  192. <fieldset>
  193. <legend>Recherche</legend>
  194. <label for="input-search">Termes de votre recherche :</label>
  195. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  196. <input type="submit" value="Chercher">
  197. <p id="indexation-infos">
  198. <small>
  199. Seuls les contenus de ces 8 dernières années sont indexés.
  200. </small>
  201. </p>
  202. </fieldset>
  203. </form>
  204. <aside>
  205. <theme-toggle></theme-toggle>
  206. </aside>
  207. </article>
  208. <hr>
  209. <footer>
  210. <p>
  211. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  212. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  213. <a href="http://larlet.com"
  214. title="Go to my English profile"
  215. data-instant>Pro</a>
  216. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  217. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  218. </p>
  219. <template id="theme-selector">
  220. <form>
  221. <style type="text/css">
  222. fieldset div {
  223. text-align: center;
  224. }
  225. </style>
  226. <fieldset>
  227. <legend>Thème</legend>
  228. <div>
  229. <label>
  230. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  231. Auto
  232. </label>
  233. <label>
  234. <input type="radio" value="dark" name="chosen-color-scheme">
  235. Foncé
  236. </label>
  237. <label>
  238. <input type="radio" value="light" name="chosen-color-scheme">
  239. Clair
  240. </label>
  241. </div>
  242. </fieldset>
  243. </form>
  244. </template>
  245. </footer>
  246. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  247. <script>
  248. class ThemeToggle extends HTMLElement {
  249. constructor() {
  250. super()
  251. const themeSelectorTemplate = document.querySelector('#theme-selector')
  252. const form = themeSelectorTemplate.content.firstElementChild
  253. this.attachShadow({ mode: 'open' })
  254. this.shadowRoot.appendChild(form.cloneNode(true))
  255. }
  256. connectedCallback() {
  257. const form = this.shadowRoot.querySelector('form')
  258. form.addEventListener('change', (e) => {
  259. const chosenColorScheme = e.target.value
  260. localStorage.setItem('theme', chosenColorScheme)
  261. toggleTheme(chosenColorScheme)
  262. })
  263. const selectedTheme = localStorage.getItem('theme')
  264. if (selectedTheme && selectedTheme !== 'undefined') {
  265. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  266. }
  267. }
  268. }
  269. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  270. window.addEventListener('load', () => {
  271. let colorsLayer = undefined
  272. let hasDarkRules = false
  273. for (const styleSheet of Array.from(document.styleSheets)) {
  274. let mediaRules = []
  275. for (const layerRule of styleSheet.cssRules) {
  276. if (!(layerRule instanceof CSSLayerBlockRule)) {
  277. continue
  278. }
  279. if (layerRule.name === 'colors') {
  280. colorsLayer = layerRule
  281. }
  282. for (const cssRule of layerRule.cssRules) {
  283. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  284. continue
  285. }
  286. // WARNING: Safari does not have/supports `conditionText`.
  287. if (cssRule.conditionText) {
  288. if (cssRule.conditionText !== prefersColorSchemeDark) {
  289. continue
  290. }
  291. } else {
  292. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  293. continue
  294. }
  295. }
  296. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  297. }
  298. }
  299. // WARNING: do not try to insert a Rule to a styleSheet you are
  300. // currently iterating on, otherwise the browser will be stuck
  301. // in a infinite loop…
  302. for (const mediaRule of mediaRules) {
  303. // Safari requires the `0` second parameter (even if default).
  304. colorsLayer.insertRule(mediaRule.cssText, 0)
  305. hasDarkRules = true
  306. }
  307. }
  308. if (hasDarkRules) {
  309. if ('customElements' in window && !customElements.get('theme-toggle')) {
  310. customElements.define('theme-toggle', ThemeToggle)
  311. }
  312. }
  313. })
  314. </script>
  315. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  316. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  317. <script>
  318. tippy('[data-tippy]', {
  319. content(reference) {
  320. reference.addEventListener('click', (e) => e.preventDefault())
  321. return `
  322. <h3 lang="fr">
  323. <img src="${reference.dataset.favicon}" loading="lazy">
  324. <a href="${reference.dataset.source}"
  325. >Article sur ${reference.dataset.domain}</a></h3>
  326. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  327. <div class="tippy-links" lang="fr">
  328. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  329. </div>
  330. `
  331. },
  332. allowHTML: true,
  333. interactive: true,
  334. delay: [150, 700],
  335. hideOnClick: false
  336. })
  337. </script>
  338. </body>
  339. </html>