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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  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. Étiquette #propriété
  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-07.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="Publications relatives au tag #propriété">
  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. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#propriété</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/01/04/" title="Lien permanent vers cet article">Repos</a> <time datetime="2024-01-04">4 janvier 2024</time>
  132. </h2>
  133. <blockquote>
  134. <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>
  135. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  136. </blockquote>
  137. <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>
  138. <a href="#hr-6" title="Lien vers cette section de la page"><hr id="hr-6" /></a>
  139. <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/" hreflang="en"
  140. title="Consultation de l’article (anglais)">d’utiliser <code>text-wrap</code></a>
  141. <a href="/david/cache/2024/b31ba18e3de1fc479b79f1885043026a/" hreflang="en"
  142. data-tippy data-description="A ruthless look at when to use these two CSS text-wrap values."
  143. data-source="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/"
  144. data-date="2024-01-07"
  145. data-favicon="https://stephaniestimac.com/imgs/favicon.ico"
  146. data-domain="blog.stephaniestimac.com"
  147. ><svg xmlns="http://www.w3.org/2000/svg"
  148. width="24" height="24" viewBox="0 0 24 24" fill="none"
  149. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  150. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  151. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  152. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  153. </svg>
  154. <span class="sr-only">[archive]</span></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>
  155. <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>
  156. <pre><code>blockquote::before {
  157. content: &quot;citation&quot;;
  158. transform: rotate(-90deg);
  159. position: absolute;
  160. margin-left: -1rem;
  161. margin-top: 3.5rem;
  162. }
  163. </code></pre>
  164. <p>Au passage, autant faire de même pour le code. Des couleurs, de la vie&#8239;! De&nbsp;l’envie.</p>
  165. <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>
  166. <nav>
  167. <p>
  168. <a href="/david/2024/decision/"
  169. title="Liste de tous les articles 2024 associés à cette étiquette"
  170. rel="tag">#décision</a>
  171. <a href="/david/2024/parvenir/"
  172. title="Liste de tous les articles 2024 associés à cette étiquette"
  173. rel="tag">#parvenir</a>
  174. <a href="/david/2024/propriete/"
  175. title="Liste de tous les articles 2024 associés à cette étiquette"
  176. rel="tag">#propriété</a>
  177. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  178. </p>
  179. </nav>
  180. <form action="/david/recherche/" method="get">
  181. <fieldset>
  182. <legend>Recherche</legend>
  183. <label for="input-search">Termes de votre recherche :</label>
  184. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  185. <input type="submit" value="Chercher">
  186. <p id="indexation-infos">
  187. <small>
  188. Seuls les contenus de ces 8 dernières années sont indexés.
  189. </small>
  190. </p>
  191. </fieldset>
  192. </form>
  193. <aside>
  194. <theme-toggle></theme-toggle>
  195. </aside>
  196. </article>
  197. <hr>
  198. <footer>
  199. <p>
  200. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  201. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  202. <a href="http://larlet.com"
  203. title="Go to my English profile"
  204. data-instant>Pro</a>
  205. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  206. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  207. </p>
  208. <template id="theme-selector">
  209. <form>
  210. <style type="text/css">
  211. fieldset div {
  212. text-align: center;
  213. }
  214. </style>
  215. <fieldset>
  216. <legend>Thème</legend>
  217. <div>
  218. <label>
  219. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  220. Auto
  221. </label>
  222. <label>
  223. <input type="radio" value="dark" name="chosen-color-scheme">
  224. Foncé
  225. </label>
  226. <label>
  227. <input type="radio" value="light" name="chosen-color-scheme">
  228. Clair
  229. </label>
  230. </div>
  231. </fieldset>
  232. </form>
  233. </template>
  234. </footer>
  235. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  236. <script>
  237. class ThemeToggle extends HTMLElement {
  238. constructor() {
  239. super()
  240. const themeSelectorTemplate = document.querySelector('#theme-selector')
  241. const form = themeSelectorTemplate.content.firstElementChild
  242. this.attachShadow({ mode: 'open' })
  243. this.shadowRoot.appendChild(form.cloneNode(true))
  244. }
  245. connectedCallback() {
  246. const form = this.shadowRoot.querySelector('form')
  247. form.addEventListener('change', (e) => {
  248. const chosenColorScheme = e.target.value
  249. localStorage.setItem('theme', chosenColorScheme)
  250. toggleTheme(chosenColorScheme)
  251. })
  252. const selectedTheme = localStorage.getItem('theme')
  253. if (selectedTheme && selectedTheme !== 'undefined') {
  254. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  255. }
  256. }
  257. }
  258. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  259. window.addEventListener('load', () => {
  260. let colorsLayer = undefined
  261. let hasDarkRules = false
  262. for (const styleSheet of Array.from(document.styleSheets)) {
  263. let mediaRules = []
  264. for (const layerRule of styleSheet.cssRules) {
  265. if (!(layerRule instanceof CSSLayerBlockRule)) {
  266. continue
  267. }
  268. if (layerRule.name === 'colors') {
  269. colorsLayer = layerRule
  270. }
  271. for (const cssRule of layerRule.cssRules) {
  272. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  273. continue
  274. }
  275. // WARNING: Safari does not have/supports `conditionText`.
  276. if (cssRule.conditionText) {
  277. if (cssRule.conditionText !== prefersColorSchemeDark) {
  278. continue
  279. }
  280. } else {
  281. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  282. continue
  283. }
  284. }
  285. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  286. }
  287. }
  288. // WARNING: do not try to insert a Rule to a styleSheet you are
  289. // currently iterating on, otherwise the browser will be stuck
  290. // in a infinite loop…
  291. for (const mediaRule of mediaRules) {
  292. // Safari requires the `0` second parameter (even if default).
  293. colorsLayer.insertRule(mediaRule.cssText, 0)
  294. hasDarkRules = true
  295. }
  296. }
  297. if (hasDarkRules) {
  298. if ('customElements' in window && !customElements.get('theme-toggle')) {
  299. customElements.define('theme-toggle', ThemeToggle)
  300. }
  301. }
  302. })
  303. </script>
  304. </body>
  305. </html>