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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  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. Fondations
  14. — David Larlet</title>
  15. <meta name="description" content="Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses : des grids, des layers, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du temps.">
  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-15.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>Fondations</h1>
  110. <p>Le <time datetime="2024-01-02">2 janvier 2024</time></p>
  111. </hgroup>
  112. </header>
  113. <nav>
  114. <p>
  115. <a rel="prev"
  116. href="/david/2024/01/01/"
  117. title="Publication précédente : Dryear(s)">← Précédent</a> •
  118. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  119. <a href="/david/recherche/"
  120. title="Aller à la page de recherche"
  121. rel="search">Recherche</a>
  122. • <a rel="next"
  123. href="/david/2024/01/03/"
  124. title="Publication suivante : Appariement">Suivant →</a>
  125. </p>
  126. </nav>
  127. <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p>
  128. <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p>
  129. <ul>
  130. <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
  131. <li><a data-link-domain="joshwcomeau.com" href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
  132. <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
  133. <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
  134. </ul>
  135. <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
  136. <p>Je finis par tout jeter / ré-interroger et je m’en sors avec&nbsp;6&nbsp;règles.</p>
  137. <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> <a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">[archive]</a>&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
  138. <p>Je suis satisfait de mon résultat très minimaliste du&nbsp;jour.</p>
  139. <hr />
  140. <blockquote>
  141. <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
  142. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> <a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">[archive]</a></em>, Karl</cite></p>
  143. </blockquote>
  144. <p>🧡</p>
  145. <hr />
  146. <p>Plus tard, je me rends compte en voulant faire les choses proprement que j’avais déjà fait des essais il y a un peu plus d’un&nbsp;an&nbsp;:</p>
  147. <figure>
  148. <a href="/static/david/2024/2024-01-02-ancien-essai.png"
  149. title="Cliquer pour une version haute résolution">
  150. <img
  151. src="/static/david/2024/2024-01-02-ancien-essai.png"
  152. width="2488" height="1486"
  153. srcset="/static/david/2024/2024-01-02-ancien-essai.png 2488w, /static/david/2024/2024-01-02-ancien-essai.png 660w, /static/david/2024/2024-01-02-ancien-essai.png 990w, /static/david/2024/2024-01-02-ancien-essai.png 1320w"
  154. sizes="min(100vw, calc(100vh * 2488 / 1486))"
  155. loading="lazy"
  156. decoding="async"
  157. alt="Capture d’écran de l’essai">
  158. </a>
  159. <figcaption>Capture d’écran de&nbsp;l’essai.</figcaption>
  160. </figure>
  161. <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
  162. <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p>
  163. <nav>
  164. <p>
  165. <a href="/david/2024/experience/"
  166. title="Liste de tous les articles 2024 associés à cette étiquette"
  167. rel="tag">#expérience</a>
  168. <a href="/david/2024/technique/"
  169. title="Liste de tous les articles 2024 associés à cette étiquette"
  170. rel="tag">#technique</a>
  171. <a href="/david/2024/web/"
  172. title="Liste de tous les articles 2024 associés à cette étiquette"
  173. rel="tag">#web</a>
  174. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  175. </p>
  176. </nav>
  177. <nav>
  178. <p>
  179. <a rel="prev"
  180. href="/david/2024/01/01/"
  181. title="Publication précédente : Dryear(s)">← Précédent</a> •
  182. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  183. • <a rel="next"
  184. href="/david/2024/01/03/"
  185. title="Publication suivante : Appariement">Suivant →</a>
  186. </p>
  187. </nav>
  188. <form action="/david/recherche/" method="get">
  189. <fieldset>
  190. <legend>Recherche</legend>
  191. <label for="input-search">Termes de votre recherche :</label>
  192. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  193. <input type="submit" value="Chercher">
  194. <p id="indexation-infos">
  195. <small>
  196. Seuls les contenus de ces 8 dernières années sont indexés.
  197. </small>
  198. </p>
  199. </fieldset>
  200. </form>
  201. <aside>
  202. <theme-toggle></theme-toggle>
  203. </aside>
  204. </article>
  205. <hr>
  206. <footer>
  207. <p>
  208. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  209. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  210. <a href="http://larlet.com"
  211. title="Go to my English profile"
  212. data-instant>Pro</a>
  213. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  214. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  215. </p>
  216. <template id="theme-selector">
  217. <form>
  218. <style type="text/css">
  219. fieldset div {
  220. text-align: center;
  221. }
  222. </style>
  223. <fieldset>
  224. <legend>Thème</legend>
  225. <div>
  226. <label>
  227. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  228. Auto
  229. </label>
  230. <label>
  231. <input type="radio" value="dark" name="chosen-color-scheme">
  232. Foncé
  233. </label>
  234. <label>
  235. <input type="radio" value="light" name="chosen-color-scheme">
  236. Clair
  237. </label>
  238. </div>
  239. </fieldset>
  240. </form>
  241. </template>
  242. </footer>
  243. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  244. <script>
  245. class ThemeToggle extends HTMLElement {
  246. constructor() {
  247. super()
  248. const themeSelectorTemplate = document.querySelector('#theme-selector')
  249. const form = themeSelectorTemplate.content.firstElementChild
  250. this.attachShadow({ mode: 'open' })
  251. this.shadowRoot.appendChild(form.cloneNode(true))
  252. }
  253. connectedCallback() {
  254. const form = this.shadowRoot.querySelector('form')
  255. form.addEventListener('change', (e) => {
  256. const chosenColorScheme = e.target.value
  257. localStorage.setItem('theme', chosenColorScheme)
  258. toggleTheme(chosenColorScheme)
  259. })
  260. const selectedTheme = localStorage.getItem('theme')
  261. if (selectedTheme && selectedTheme !== 'undefined') {
  262. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  263. }
  264. }
  265. }
  266. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  267. window.addEventListener('load', () => {
  268. let colorsLayer = undefined
  269. let hasDarkRules = false
  270. for (const styleSheet of Array.from(document.styleSheets)) {
  271. let mediaRules = []
  272. for (const layerRule of styleSheet.cssRules) {
  273. if (!(layerRule instanceof CSSLayerBlockRule)) {
  274. continue
  275. }
  276. if (layerRule.name === 'colors') {
  277. colorsLayer = layerRule
  278. }
  279. for (const cssRule of layerRule.cssRules) {
  280. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  281. continue
  282. }
  283. // WARNING: Safari does not have/supports `conditionText`.
  284. if (cssRule.conditionText) {
  285. if (cssRule.conditionText !== prefersColorSchemeDark) {
  286. continue
  287. }
  288. } else {
  289. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  290. continue
  291. }
  292. }
  293. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  294. }
  295. }
  296. // WARNING: do not try to insert a Rule to a styleSheet you are
  297. // currently iterating on, otherwise the browser will be stuck
  298. // in a infinite loop…
  299. for (const mediaRule of mediaRules) {
  300. // Safari requires the `0` second parameter (even if default).
  301. colorsLayer.insertRule(mediaRule.cssText, 0)
  302. hasDarkRules = true
  303. }
  304. }
  305. if (hasDarkRules) {
  306. if ('customElements' in window && !customElements.get('theme-toggle')) {
  307. customElements.define('theme-toggle', ThemeToggle)
  308. }
  309. }
  310. })
  311. </script>
  312. </body>
  313. </html>