Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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>Beauté — David Larlet</title>
  13. <meta name="description" content="Je m’interroge sur la pertinence de persévérer dans le combat politique quand certains jours tout me crie de faire sécession, de cultiver le lieu et l’instant. À l’instar de l’orchestre du Titanic qui continue de jouer, digne et vertical jusqu’au naufrage, pendant que les autres passagers s’entretuent pour se sauver, quelle est la meilleure manière, la plus adaptée, d’ajouter de la poésie au monde, de défendre la beauté dans une société en train de couler ?">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Beauté</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/02/11/" title="Publication précédente : Nucléaire">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/02/14/" title="Publication suivante : Bibliothèque">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote>
  68. <p>Je m’interroge sur la pertinence de persévérer dans le combat politique quand certains jours tout me crie de faire sécession, de cultiver le lieu et l’instant. À l’instar de l’orchestre du <em>Titanic</em> qui continue de jouer, digne et vertical jusqu’au naufrage, pendant que les autres passagers s’entretuent pour se sauver, quelle est la meilleure manière, la plus adaptée, <mark>d’ajouter de la poésie au monde</mark>, de défendre la beauté dans une société en train de couler&#8239;?</p>
  69. <p><cite><em><a href="/david/2020/12/21/#plutot-couler-en-beaute-que-flotter-sans-grace">Plutôt couler en beauté que flotter sans grâce</a></em>, Corinne Morel Darleux</cite></p>
  70. </blockquote>
  71. <p>Maladroite tentative de justifier le fait <a href="/david/2021/02/07/">d’avoir cédé</a>. Je ne sais pas ce qui me pousse à vouloir avoir les moyens de produire des <a href="/david/2021/01/19/">images</a> d’une telle qualité technique, peut-être la médiocre estime de ce que je suis. Lorsqu’on commence à se connaître, difficile de se cacher ses propres travers…</p>
  72. <p>J’explore aussi la piste d’une certaine forme d’héritage. Avoir connu la neige à Montréal sera peut-être une chose à montrer, à transmettre dans quelques années. Peut-être qu’il y aura une symbolique d’espoir dans ces quelques images, la promesse d’un futur qui pourrait se rééquilibrer. L’histoire d’un passé que l’on ne voudra pas reproduire. Les jeunes y croiront, les vieux souriront.</p>
  73. <p>J’ai au moins eu la décence d’acquérir tout cela de seconde main.</p>
  74. <blockquote>
  75. <p>Pour moi, il ne suffit pas de savoir que, puisque nous ne sommes pas libres de nos actes, tout est excusable. <mark>Ce que je cherche, ce n’est pas une excuse à ma vie mais exactement le contraire</mark> d’une excuse&nbsp;: le pardon. L’idée me vient finalement que toute consolation ne prenant pas en compte ma liberté est trompeuse, qu’elle n’est que l’image réfléchie de mon désespoir. En effet, lorsque mon désespoir me dit&nbsp;: Perds confiance, car chaque jour n’est qu’une trêve entre deux nuits, la fausse consolation me crie&nbsp;: Espère, car chaque nuit n’est qu’une trêve entre deux jours.</p>
  76. <p><cite><em>Notre besoin de consolation est impossible à rassasier</em>, Stig Dagerman</cite></p>
  77. </blockquote>
  78. <nav>
  79. <p class="center">
  80. <a rel="prev" href="/david/2021/02/11/" title="Publication précédente : Nucléaire">← Précédent</a> •
  81. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  82. • <a rel="next" href="/david/2021/02/14/" title="Publication suivante : Bibliothèque">Suivant →</a>
  83. </p>
  84. </nav>
  85. </article>
  86. <hr>
  87. <footer>
  88. <p>
  89. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  90. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  91. </svg> Accueil</a> •
  92. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  93. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  94. </svg> Suivre</a> •
  95. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  96. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  97. </svg> Pro</a> •
  98. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  99. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  100. </svg> Email</a> •
  101. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  102. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  103. </svg> Légal</abbr>
  104. </p>
  105. <template id="theme-selector">
  106. <form>
  107. <fieldset>
  108. <legend><svg class="icon icon-brightness-contrast">
  109. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  110. </svg> Thème</legend>
  111. <label>
  112. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  113. </label>
  114. <label>
  115. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  116. </label>
  117. <label>
  118. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  119. </label>
  120. </fieldset>
  121. </form>
  122. </template>
  123. </footer>
  124. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  125. <script>
  126. function loadThemeForm(templateName) {
  127. const themeSelectorTemplate = document.querySelector(templateName)
  128. const form = themeSelectorTemplate.content.firstElementChild
  129. themeSelectorTemplate.replaceWith(form)
  130. form.addEventListener('change', (e) => {
  131. const chosenColorScheme = e.target.value
  132. localStorage.setItem('theme', chosenColorScheme)
  133. toggleTheme(chosenColorScheme)
  134. })
  135. const selectedTheme = localStorage.getItem('theme')
  136. if (selectedTheme && selectedTheme !== 'undefined') {
  137. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  138. }
  139. }
  140. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  141. window.addEventListener('load', () => {
  142. let hasDarkRules = false
  143. for (const styleSheet of Array.from(document.styleSheets)) {
  144. let mediaRules = []
  145. for (const cssRule of styleSheet.cssRules) {
  146. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  147. continue
  148. }
  149. // WARNING: Safari does not have/supports `conditionText`.
  150. if (cssRule.conditionText) {
  151. if (cssRule.conditionText !== prefersColorSchemeDark) {
  152. continue
  153. }
  154. } else {
  155. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  156. continue
  157. }
  158. }
  159. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  160. }
  161. // WARNING: do not try to insert a Rule to a styleSheet you are
  162. // currently iterating on, otherwise the browser will be stuck
  163. // in a infinite loop…
  164. for (const mediaRule of mediaRules) {
  165. styleSheet.insertRule(mediaRule.cssText)
  166. hasDarkRules = true
  167. }
  168. }
  169. if (hasDarkRules) {
  170. loadThemeForm('#theme-selector')
  171. }
  172. })
  173. </script>
  174. </body>
  175. </html>