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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  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. <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.">
  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>Appariement</h1>
  110. <p>Le <time datetime="2024-01-03">3 janvier 2024</time></p>
  111. </hgroup>
  112. </header>
  113. <nav>
  114. <p class="center">
  115. <a rel="prev"
  116. href="/david/2024/01/02/"
  117. title="Publication précédente : Fondations">← 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/04/"
  128. title="Publication suivante : Repos">Suivant →</a>
  129. </p>
  130. </nav>
  131. <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>
  132. <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>
  133. <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>
  134. <p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
  135. <hr />
  136. <blockquote>
  137. <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>
  138. <p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
  139. </blockquote>
  140. <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>
  141. <hr />
  142. <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>
  143. <p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
  144. <nav>
  145. <p>
  146. <a href="/david/2024/accompagnement/"
  147. title="Liste de tous les articles 2024 associés à cette étiquette"
  148. rel="tag">#accompagnement</a>
  149. <a href="/david/2024/ecriture/"
  150. title="Liste de tous les articles 2024 associés à cette étiquette"
  151. rel="tag">#écriture</a>
  152. <a href="/david/2024/web/"
  153. title="Liste de tous les articles 2024 associés à cette étiquette"
  154. rel="tag">#web</a>
  155. <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
  156. </p>
  157. </nav>
  158. <nav>
  159. <p class="center">
  160. <a rel="prev"
  161. href="/david/2024/01/02/"
  162. title="Publication précédente : Fondations">← Précédent</a> •
  163. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  164. • <a rel="next"
  165. href="/david/2024/01/04/"
  166. title="Publication suivante : Repos">Suivant →</a>
  167. </p>
  168. </nav>
  169. <aside>
  170. <theme-toggle></theme-toggle>
  171. </aside>
  172. </article>
  173. <hr>
  174. <footer>
  175. <p>
  176. <nobr>
  177. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  178. </nobr>
  179. <nobr>
  180. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  181. </nobr>
  182. <nobr>
  183. <a href="http://larlet.com"
  184. title="Go to my English profile"
  185. data-instant>Pro</a>
  186. </nobr>
  187. <nobr>
  188. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  189. </nobr>
  190. <nobr>
  191. <abbr class="nowrap"
  192. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  193. </nobr>
  194. </p>
  195. <template id="theme-selector">
  196. <form>
  197. <style type="text/css">
  198. fieldset {
  199. text-align: center;
  200. }
  201. </style>
  202. <fieldset>
  203. <legend>Thème
  204. </legend>
  205. <label>
  206. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  207. Auto
  208. </label>
  209. <label>
  210. <input type="radio" value="dark" name="chosen-color-scheme">
  211. Foncé
  212. </label>
  213. <label>
  214. <input type="radio" value="light" name="chosen-color-scheme">
  215. Clair
  216. </label>
  217. </fieldset>
  218. </form>
  219. </template>
  220. </footer>
  221. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  222. <script>
  223. class ThemeToggle extends HTMLElement {
  224. constructor() {
  225. super()
  226. const themeSelectorTemplate = document.querySelector('#theme-selector')
  227. const form = themeSelectorTemplate.content.firstElementChild
  228. this.attachShadow({ mode: 'open' })
  229. this.shadowRoot.appendChild(form.cloneNode(true))
  230. }
  231. connectedCallback() {
  232. const form = this.shadowRoot.querySelector('form')
  233. form.addEventListener('change', (e) => {
  234. const chosenColorScheme = e.target.value
  235. localStorage.setItem('theme', chosenColorScheme)
  236. toggleTheme(chosenColorScheme)
  237. })
  238. const selectedTheme = localStorage.getItem('theme')
  239. if (selectedTheme && selectedTheme !== 'undefined') {
  240. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  241. }
  242. }
  243. }
  244. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  245. window.addEventListener('load', () => {
  246. let colorsLayer = undefined
  247. let hasDarkRules = false
  248. for (const styleSheet of Array.from(document.styleSheets)) {
  249. let mediaRules = []
  250. for (const layerRule of styleSheet.cssRules) {
  251. if (!(layerRule instanceof CSSLayerBlockRule)) {
  252. continue
  253. }
  254. if (layerRule.name === 'colors') {
  255. colorsLayer = layerRule
  256. }
  257. for (const cssRule of layerRule.cssRules) {
  258. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  259. continue
  260. }
  261. // WARNING: Safari does not have/supports `conditionText`.
  262. if (cssRule.conditionText) {
  263. if (cssRule.conditionText !== prefersColorSchemeDark) {
  264. continue
  265. }
  266. } else {
  267. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  268. continue
  269. }
  270. }
  271. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  272. }
  273. }
  274. // WARNING: do not try to insert a Rule to a styleSheet you are
  275. // currently iterating on, otherwise the browser will be stuck
  276. // in a infinite loop…
  277. for (const mediaRule of mediaRules) {
  278. // Safari requires the `0` second parameter (even if default).
  279. colorsLayer.insertRule(mediaRule.cssText, 0)
  280. hasDarkRules = true
  281. }
  282. }
  283. if (hasDarkRules) {
  284. if ('customElements' in window && !customElements.get('theme-toggle')) {
  285. customElements.define('theme-toggle', ThemeToggle)
  286. }
  287. }
  288. })
  289. </script>
  290. </body>
  291. </html>