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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  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. Mécénat
  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 termine mon mécénat de compétence avec uMap sur ces 4 derniers mois (25 jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et OSM-FR.">
  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. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. .tippy-content {
  109. min-width: 280px;
  110. padding: .5rem;
  111. font-size: calc(var(--fluid-0) * 0.8);
  112. font-family: var(--labor-font);
  113. letter-spacing: initial;
  114. text-align: left;
  115. }
  116. .tippy-content h3 {
  117. margin-top: 0;
  118. }
  119. .tippy-content h3 img {
  120. max-width: 2rem;
  121. max-height: 2rem;
  122. display: inline-block;
  123. }
  124. .tippy-content .tippy-links {
  125. display: flex;
  126. justify-content: space-around;
  127. }
  128. .tippy-content a {
  129. padding: .4rem;
  130. color: #F06048;
  131. }
  132. </style>
  133. <body data-instant-intensity="viewport-all">
  134. <article>
  135. <header>
  136. <hgroup>
  137. <h1>Mécénat</h1>
  138. <p>Le <time datetime="2024-01-31">31 janvier 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/01/30/"
  145. title="Publication précédente : Équipe">← Précédent</a> •
  146. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  147. <a href="/david/recherche/"
  148. title="Aller à la page de recherche"
  149. rel="search" data-no-instant>Recherche</a>
  150. • <a rel="next"
  151. href="/david/2024/02/01/"
  152. title="Publication suivante : Vision">Suivant →</a>
  153. </p>
  154. </nav>
  155. <p>Je termine mon mécénat de compétence avec uMap sur ces 4&nbsp;derniers mois (25&nbsp;jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et&nbsp;OSM-FR.</p>
  156. <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer&nbsp;😇).</p>
  157. <p><em>Note&nbsp;: vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p>
  158. <blockquote>
  159. <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un «&nbsp;mécénat en nature ou de compétence&nbsp;». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en&nbsp;numéraire.</p>
  160. <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
  161. </blockquote>
  162. <blockquote>
  163. <p>Le prêt de main d’œuvre&nbsp;: l’entreprise met à disposition d’un organisme éligible au mécénat un ou plusieurs salariés. C’est l’organisme qui pilote la mission et qui peut faire figure d’autorité fonctionnelle dans ce cadre. Le temps et la fréquence du mécénat de compétences peuvent considérablement varier en fonction des besoins&nbsp;: il peut aussi bien s’agir d’une mission courte, même d’une seule demi-journée, que d’une mission plus longue voir d’un plein temps dans la limite de&nbsp;3&nbsp;ans.</p>
  164. <p><cite><em><a data-link-domain="cci.fr" href="https://www.cci.fr/actualites/le-mecenat-de-competences-comment-le-mettre-en-place-et-mobiliser-les-equipes">Source</a></em></cite></p>
  165. </blockquote>
  166. <p>Lorsque les dons sont effectués en nature, il est nécessaire de procéder à leur&nbsp;valorisation&nbsp;:</p>
  167. <ul>
  168. <li>pour le calcul de la réduction d’impôt que déclare&nbsp;l’entreprise&#8239;;</li>
  169. <li>pour la réintégration extra-comptable de la valeur du don par&nbsp;l’entreprise&#8239;;</li>
  170. <li>pour l’établissement du reçu fiscal par l’organisme bénéficiaire du&nbsp;don&#8239;;</li>
  171. <li>pour la détermination des éventuels contreparties remises à l’entreprise par l’organisme bénéficiaire du&nbsp;don.</li>
  172. </ul>
  173. <h2 id="comment-valoriser-un-don-au-titre-dun-mecenat-de-competence">Comment valoriser un don au titre d’un mécénat de compétence&#8239;? <a href="#comment-valoriser-un-don-au-titre-dun-mecenat-de-competence" title="Ancre vers cette partie">#</a></h2>
  174. <blockquote>
  175. <p>Pour chaque salarié mis à disposition, ce don est évalué à son coût de revient, à savoir la somme de sa rémunération et des charges sociales y afférentes dans la limite de trois fois le montant du plafond mentionné à l’article L. 241-3&nbsp;du code de la sécurité sociale (CSS), soit 10&#8239;284&#8239;€ par mois en&nbsp;2022.</p>
  176. <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
  177. </blockquote>
  178. <p>Ce n’est donc <strong>pas un TJM</strong> mais un <em>coût de revient</em>.</p>
  179. <blockquote>
  180. <p>A la suite de l’adoption de la <a data-link-domain="legifrance.gouv.fr" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000043964778">loi du 24&nbsp;août 2021&nbsp;confortant le respect des principes de la République</a>, l’administration fiscale a rappelé que <mark>la valorisation du don relève de la seule responsabilité de l’entreprise mécène</mark> qu’il s’agisse d’un don sous forme de biens (dons alimentaires notamment), de services ou d’une mise à disposition de personnel. Un <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/2041-mec-sd_4032.pdf">nouveau modèle de reçu fiscal</a> a été publié le 10&nbsp;juin&nbsp;2022.</p>
  181. </blockquote>
  182. <h2 id="avantages-fiscaux">Avantages fiscaux <a href="#avantages-fiscaux" title="Ancre vers cette partie">#</a></h2>
  183. <blockquote>
  184. <p>Le mécénat de compétences ouvre droit à un avantage fiscal. Concrètement, comme pour toute action de mécénat, le «&nbsp;don&nbsp;» de compétences de l’entreprise ouvrira droit à une réduction d’impôts de 60% du montant du salaire chargé du salarié mis à disposition. Cet avantage est accessible à tous les types d’entreprises, sans montant minimum de&nbsp;don.</p>
  185. <p><cite><em><a data-link-domain="economie.gouv.fr" href="https://www.economie.gouv.fr/files/Guide-pratique-mecenat-competences-novembre2021.pdf">Source</a></em></cite></p>
  186. </blockquote>
  187. <h2 id="modele">Modèle <a href="#modele" title="Ancre vers cette partie">#</a></h2><p>Un modèle de <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/Modele-de-convention-de-mecenat-d-entreprise.docx">convention de mécénat</a>, <a data-link-domain="associations.gouv.fr" href="https://www.associations.gouv.fr/IMG/pdf/asso_mecenat_2021_v1b.pdf">un autre</a> et <a data-link-domain="occitanie.developpement-durable.gouv.fr" href="https://www.occitanie.developpement-durable.gouv.fr/IMG/pdf/ex_convention_mecenat_competences_cle065a53.pdf">encore un autre</a>.</p>
  188. <p>En synthèse, il&nbsp;faut&nbsp;:</p>
  189. <h3>Les&nbsp;coordonnées</h3>
  190. <p>Entre&nbsp;:</p>
  191. <p>L’entreprise …, statut, dont le siège social est au …,<br />
  192. Représentée par …, fonction,<br />
  193. Ci-après dénommée «&nbsp;le&nbsp;mécène&nbsp;»,</p>
  194. <p>Et</p>
  195. <p>L’association …, sise au …,<br />
  196. Représentée par son Président (&#8239;?), …<br />
  197. Ci-après dénommée&nbsp;«&nbsp;l’association&nbsp;»,</p>
  198. <p>Vu la loi n°2003-79&nbsp;du 1<sup>er</sup> août 2003&nbsp;relative au mécénat, aux associations et aux fondations et notamment les dispositions codifiées à l’article 238&nbsp;bis du code général des&nbsp;impôts.</p>
  199. <h3>(optionnel) Préambule&nbsp;(contexte)</h3>
  200. <ul>
  201. <li>objet du mécénat de l’entreprise, de la&nbsp;fondation…</li>
  202. <li>objet de l’association&nbsp;: présentation de sa mission/vocation générale, et laïus sur le
  203. projet qu’ils portent en commun avec l’entreprise le cas&nbsp;échéant</li>
  204. <li>rencontre de ces deux&nbsp;objets&#8239;?</li>
  205. </ul>
  206. <h3>Ce qui est&nbsp;convenu</h3>
  207. <p>Il est convenu et décidé ce qui&nbsp;suit&nbsp;:</p>
  208. <ul>
  209. <li>La présente convention a pour objet de définir les conditions du soutien à l’association pour le projet suivant&nbsp;: (descriptif de l’action ou de la&nbsp;manifestation)</li>
  210. <li>L’entreprise mécène s’engage à mettre à disposition le personnel suivant&nbsp;: représentant une valeur de … € sur la période de&nbsp;…</li>
  211. </ul>
  212. <blockquote>
  213. <p>Pour valoriser ce mécénat de compétences, l’entreprise s’engage à comptabiliser et à valoriser le temps passé sur la mission sus nommée, soit le nombre d’heures passées x salaire horaire chargé (son commissaire aux comptes devra valider ce montant de salaire&nbsp;chargé).</p>
  214. <p>L’association pourra ainsi remettre à l’entreprise un reçu fiscal précisant le nombre d’heures et le coût équivalent donné à&nbsp;l’association.</p>
  215. <p>Conformément à l’article 238bis du code général des impôts, ce don en temps donnera droit à une réduction d’impôt égale à 60&#8239;% du montant des sommes versées dans la limite de 0,5% du C.A. HT.</p>
  216. </blockquote>
  217. <h3>Conditions</h3>
  218. <ul>
  219. <li>(optionnel / à adapter) L’association s’engage à faire figurer le nom de l’entreprise donatrice sur les supports d’information de l’action ou de la&nbsp;manifestation.</li>
  220. <li>La présente convention est établie en vertu des dispositions de l’article 238&nbsp;bis du&nbsp;CGI</li>
  221. <li>La présente convention prendra effet à sa date de signature et prendra fin le&nbsp;….</li>
  222. </ul>
  223. <p>Dans le cas où l’une des parties ne respecterait pas ses obligations contractuelles, cette convention serait résiliée de plein droit. En cas de litige, les parties conviennent d’une conciliation à&nbsp;l’amiable.</p>
  224. <h3>Signatures</h3>
  225. <p>Date, lieu et signatures&nbsp;:<br />
  226. A … le …<br />
  227. Représentant de l’entreprise / Représentant de&nbsp;l’association</p>
  228. <nav>
  229. <p>
  230. <a href="/david/2024/commun/"
  231. title="Liste de tous les articles 2024 associés à cette étiquette"
  232. rel="tag">#commun</a>
  233. <a href="/david/2024/documentation/"
  234. title="Liste de tous les articles 2024 associés à cette étiquette"
  235. rel="tag">#documentation</a>
  236. <a href="/david/2024/partage/"
  237. title="Liste de tous les articles 2024 associés à cette étiquette"
  238. rel="tag">#partage</a>
  239. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  240. </p>
  241. </nav>
  242. <nav>
  243. <p>
  244. <a rel="prev"
  245. href="/david/2024/01/30/"
  246. title="Publication précédente : Équipe">← Précédent</a> •
  247. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  248. • <a rel="next"
  249. href="/david/2024/02/01/"
  250. title="Publication suivante : Vision">Suivant →</a>
  251. </p>
  252. </nav>
  253. <form action="/david/recherche/" method="get">
  254. <fieldset>
  255. <legend>Recherche</legend>
  256. <label for="input-search">Termes de votre recherche :</label>
  257. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  258. <input type="submit" value="Chercher">
  259. <p id="indexation-infos">
  260. <small>
  261. Seuls les contenus de ces 8 dernières années sont indexés.
  262. </small>
  263. </p>
  264. </fieldset>
  265. </form>
  266. <aside>
  267. <theme-toggle></theme-toggle>
  268. </aside>
  269. </article>
  270. <hr>
  271. <footer>
  272. <p>
  273. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  274. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  275. <a href="http://larlet.com"
  276. title="Go to my English profile"
  277. data-instant>Pro</a>
  278. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  279. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  280. </p>
  281. <template id="theme-selector">
  282. <form>
  283. <style type="text/css">
  284. fieldset div {
  285. text-align: center;
  286. }
  287. </style>
  288. <fieldset>
  289. <legend>Thème</legend>
  290. <div>
  291. <label>
  292. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  293. Auto
  294. </label>
  295. <label>
  296. <input type="radio" value="dark" name="chosen-color-scheme">
  297. Foncé
  298. </label>
  299. <label>
  300. <input type="radio" value="light" name="chosen-color-scheme">
  301. Clair
  302. </label>
  303. </div>
  304. </fieldset>
  305. </form>
  306. </template>
  307. </footer>
  308. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  309. <script>
  310. class ThemeToggle extends HTMLElement {
  311. constructor() {
  312. super()
  313. const themeSelectorTemplate = document.querySelector('#theme-selector')
  314. const form = themeSelectorTemplate.content.firstElementChild
  315. this.attachShadow({ mode: 'open' })
  316. this.shadowRoot.appendChild(form.cloneNode(true))
  317. }
  318. connectedCallback() {
  319. const form = this.shadowRoot.querySelector('form')
  320. form.addEventListener('change', (e) => {
  321. const chosenColorScheme = e.target.value
  322. localStorage.setItem('theme', chosenColorScheme)
  323. toggleTheme(chosenColorScheme)
  324. })
  325. const selectedTheme = localStorage.getItem('theme')
  326. if (selectedTheme && selectedTheme !== 'undefined') {
  327. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  328. }
  329. }
  330. }
  331. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  332. window.addEventListener('load', () => {
  333. let colorsLayer = undefined
  334. let hasDarkRules = false
  335. for (const styleSheet of Array.from(document.styleSheets)) {
  336. let mediaRules = []
  337. for (const layerRule of styleSheet.cssRules) {
  338. if (!(layerRule instanceof CSSLayerBlockRule)) {
  339. continue
  340. }
  341. if (layerRule.name === 'colors') {
  342. colorsLayer = layerRule
  343. }
  344. for (const cssRule of layerRule.cssRules) {
  345. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  346. continue
  347. }
  348. // WARNING: Safari does not have/supports `conditionText`.
  349. if (cssRule.conditionText) {
  350. if (cssRule.conditionText !== prefersColorSchemeDark) {
  351. continue
  352. }
  353. } else {
  354. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  355. continue
  356. }
  357. }
  358. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  359. }
  360. }
  361. // WARNING: do not try to insert a Rule to a styleSheet you are
  362. // currently iterating on, otherwise the browser will be stuck
  363. // in a infinite loop…
  364. for (const mediaRule of mediaRules) {
  365. // Safari requires the `0` second parameter (even if default).
  366. colorsLayer.insertRule(mediaRule.cssText, 0)
  367. hasDarkRules = true
  368. }
  369. }
  370. if (hasDarkRules) {
  371. if ('customElements' in window && !customElements.get('theme-toggle')) {
  372. customElements.define('theme-toggle', ThemeToggle)
  373. }
  374. }
  375. })
  376. </script>
  377. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  378. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  379. <script>
  380. tippy('[data-tippy]', {
  381. content(reference) {
  382. reference.addEventListener('click', (e) => e.preventDefault())
  383. return `
  384. <h3 lang="fr">
  385. <img src="${reference.dataset.favicon}" loading="lazy">
  386. <a href="${reference.dataset.source}"
  387. >Article sur ${reference.dataset.domain}</a></h3>
  388. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  389. <div class="tippy-links" lang="fr">
  390. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  391. </div>
  392. `
  393. },
  394. allowHTML: true,
  395. interactive: true,
  396. delay: [150, 700],
  397. hideOnClick: false
  398. })
  399. </script>
  400. <script type="module">
  401. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  402. const markObserver = new IntersectionObserver((entries, observer) => {
  403. const computedStyle = getComputedStyle(document.documentElement)
  404. const markBackground = computedStyle.getPropertyValue('--mark-background')
  405. for (const entry of entries) {
  406. if (entry.intersectionRatio === 0) continue
  407. const markElement = entry.target
  408. markElement.style.backgroundColor = 'inherit'
  409. const annotation = annotate(
  410. markElement, {
  411. type: 'highlight',
  412. multiline: true,
  413. color: markBackground,
  414. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  415. animate: false
  416. }
  417. )
  418. annotation.show()
  419. observer.unobserve(markElement)
  420. }
  421. }, {threshold: 1.0})
  422. for (const markElement of document.querySelectorAll('mark')) {
  423. markObserver.observe(markElement)
  424. }
  425. </script>
  426. </body>
  427. </html>