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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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>Valeur(s) — David Larlet</title>
  13. <meta name="description" content="Artefact autour d’un exercice sur les valeurs de Scopyleft.">
  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>Valeur(s)</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/06/06/" title="Publication précédente : Hommes">← Précédent</a> •
  60. <nobr>
  61. <a href="/david/" title="Aller à l’accueil"
  62. ><svg class="icon icon-home">
  63. <use
  64. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  65. ></use>
  66. </svg>
  67. Accueil</a
  68. >
  69. </nobr>
  70. <nobr>
  71. <a href="/david/recherche/" title="Aller à la page de recherche"
  72. ><svg class="icon icon-search">
  73. <use
  74. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
  75. ></use>
  76. </svg>
  77. Recherche</a
  78. >
  79. </nobr>
  80. </p>
  81. </nav>
  82. <hr>
  83. <p><em>Artefact autour d’un exercice sur les valeurs de&nbsp;Scopyleft.</em></p>
  84. <blockquote>
  85. <p>Préparez-vous chaque fois à écouter et à recevoir le son de la cloche. Plutôt que de la «&nbsp;sonner&nbsp;», «&nbsp;<mark>invitez</mark>&nbsp;» la cloche à sonner. Considérez-là comme une amie, un être éveillé qui vous aide à vous éveiller et à revenir en&nbsp;vous.</p>
  86. <p><cite><em>Les bienfaits du silence</em>, Thich Nhat&nbsp;Hanh</cite></p>
  87. </blockquote>
  88. <p>J’ai envie de prendre soin de cette <em>invitation</em> à faire des choses ensemble, à entamer un cycle de respiration en commun, quotidien et à plus long terme. En travaillant l’accueil et la co-exploration de nouveaux savoirs, de nouvelles expériences plus ou moins in·attendues. En acceptant que certains contextes n’y soient pas/plus propices&nbsp;aussi.</p>
  89. <p>J’apprécie le respect mutuel qui s’installe dans ce collectif. Sa forme change mais ce qui reste au centre, c’est cette capacité à et cette envie de «&nbsp;faire groupe&nbsp;». Pas dans une optique de résilience mais de reliance et de solidarité. Faire le tour de soi-même ce n’est déjà pas simple, faire le tour des autres c’est bien compliqué, mais alors laisser les autres faire le tour de soi c’est vertigineux. C’est dans ce tourbillon complexe que je trouve la valeur de&nbsp;Scopyleft.</p>
  90. <p>J’aimerais continuer à rendre possible une forme d’impermanence (d’impertinence me propose mon auto-correcteur&nbsp;💚). Avoir suffisamment d’aisance financière et de confiance en nous pour progresser, muer, papillonner, s’élever pour voir un peu plus loin et/ou pouvoir se poser tout près. Accepter les impasses et prendre le temps d’en comprendre le&nbsp;(non-)sens.</p>
  91. <p>Nous étions des îles et nous avons eu besoin d’ailes pour créer du lien et nous transformer en un archipel où il fait bon vivre, naviguer et évoluer. Au-delà d’un cadre de travail technico-légal, cette SCOP est peut-être un outil de dialogue émancipateur et de construction d’un monde enviable que nous alimentons. C’est précieux. Nous sommes 8&nbsp;et en trouvant ensemble le bon angle cela nous offre des possibilités <span aria-label="infinies" title="infinies">∞</span>.</p>
  92. <p>Au risque d’une réappropriation culturelle déplacée, je tenterais bien de paraphraser ce&nbsp;proverbe&nbsp;:</p>
  93. <p><strong>Il faut toute une coopérative pour élever une&nbsp;personne.</strong></p>
  94. <blockquote>
  95. <p>[…] l’éducation libératrice vise à changer les êtres humains en sujets de leur propre histoire, individuelle mais aussi et surtout&nbsp;sociopolitique.</p>
  96. <p><cite><em>La pédagogie des opprimé·es (Préface)</em>, Paulo&nbsp;Freire</cite></p>
  97. </blockquote>
  98. <nav>
  99. <p class="center">
  100. <a rel="prev" href="/david/2022/06/06/" title="Publication précédente : Hommes">← Précédent</a> •
  101. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  102. </p>
  103. </nav>
  104. </article>
  105. <hr>
  106. <footer>
  107. <p>
  108. <nobr>
  109. <a href="/david/" title="Aller à l’accueil"
  110. ><svg class="icon icon-home">
  111. <use
  112. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  113. ></use>
  114. </svg>
  115. Accueil</a
  116. >
  117. </nobr>
  118. <nobr>
  119. <a href="/david/log/" title="Accès au flux RSS"
  120. ><svg class="icon icon-rss2">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  122. </svg>
  123. Suivre</a
  124. >
  125. </nobr>
  126. <nobr>
  127. <a href="http://larlet.com" title="Go to my English profile" data-instant
  128. ><svg class="icon icon-user-tie">
  129. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  130. </svg>
  131. Pro</a
  132. >
  133. </nobr>
  134. <nobr>
  135. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  136. ><svg class="icon icon-mail">
  137. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  138. </svg>
  139. Email</a
  140. >
  141. </nobr>
  142. <nobr>
  143. <abbr
  144. class="nowrap"
  145. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  146. ><svg class="icon icon-hammer2">
  147. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  148. </svg>
  149. Légal</abbr
  150. >
  151. </nobr>
  152. </p>
  153. <template id="theme-selector">
  154. <form>
  155. <fieldset>
  156. <legend><svg class="icon icon-brightness-contrast">
  157. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  158. </svg> Thème</legend>
  159. <label>
  160. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  161. </label>
  162. <label>
  163. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  164. </label>
  165. <label>
  166. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  167. </label>
  168. </fieldset>
  169. </form>
  170. </template>
  171. </footer>
  172. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  173. <script>
  174. function loadThemeForm(templateName) {
  175. const themeSelectorTemplate = document.querySelector(templateName)
  176. const form = themeSelectorTemplate.content.firstElementChild
  177. themeSelectorTemplate.replaceWith(form)
  178. form.addEventListener('change', (e) => {
  179. const chosenColorScheme = e.target.value
  180. localStorage.setItem('theme', chosenColorScheme)
  181. toggleTheme(chosenColorScheme)
  182. })
  183. const selectedTheme = localStorage.getItem('theme')
  184. if (selectedTheme && selectedTheme !== 'undefined') {
  185. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  186. }
  187. }
  188. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  189. window.addEventListener('load', () => {
  190. let hasDarkRules = false
  191. for (const styleSheet of Array.from(document.styleSheets)) {
  192. let mediaRules = []
  193. for (const cssRule of styleSheet.cssRules) {
  194. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  195. continue
  196. }
  197. // WARNING: Safari does not have/supports `conditionText`.
  198. if (cssRule.conditionText) {
  199. if (cssRule.conditionText !== prefersColorSchemeDark) {
  200. continue
  201. }
  202. } else {
  203. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  204. continue
  205. }
  206. }
  207. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  208. }
  209. // WARNING: do not try to insert a Rule to a styleSheet you are
  210. // currently iterating on, otherwise the browser will be stuck
  211. // in a infinite loop…
  212. for (const mediaRule of mediaRules) {
  213. styleSheet.insertRule(mediaRule.cssText)
  214. hasDarkRules = true
  215. }
  216. }
  217. if (hasDarkRules) {
  218. loadThemeForm('#theme-selector')
  219. }
  220. })
  221. </script>
  222. </body>
  223. </html>