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

2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
2 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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="Texte rédigé dans le cadre 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/24/" title="Publication précédente : Bouddhisme">← 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. • <a rel="next" href="/david/2022/07/06/" title="Publication suivante : Regard">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <p><em>Texte rédigé dans le cadre d’un exercice sur les valeurs de&nbsp;Scopyleft.</em></p>
  85. <blockquote>
  86. <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>
  87. <p><cite><em>Les bienfaits du silence</em>, Thich Nhat&nbsp;Hanh</cite></p>
  88. </blockquote>
  89. <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>
  90. <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>
  91. <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>
  92. <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 au quotidien. 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>
  93. <p>Au risque d’une réappropriation culturelle déplacée, je tenterais bien de paraphraser ce&nbsp;proverbe&nbsp;:</p>
  94. <p><strong>Il faut toute une coopérative pour élever une&nbsp;personne.</strong></p>
  95. <blockquote>
  96. <p>[…] l’éducation libératrice vise à changer les êtres humains en sujets de leur propre histoire, individuelle mais aussi et surtout&nbsp;sociopolitique.</p>
  97. <p><cite><em>La pédagogie des opprimé·es (Préface)</em>, Paulo&nbsp;Freire</cite></p>
  98. </blockquote>
  99. <p><em>Dans les <a href="/david/2021/01/25/">épisodes</a> <a href="/david/blog/2019/valeurs-etoiles/">précédents</a>.</em></p>
  100. <nav>
  101. <p class="center">
  102. <a rel="prev" href="/david/2022/06/24/" title="Publication précédente : Bouddhisme">← Précédent</a> •
  103. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  104. • <a rel="next" href="/david/2022/07/06/" title="Publication suivante : Regard">Suivant →</a>
  105. </p>
  106. </nav>
  107. </article>
  108. <hr>
  109. <footer>
  110. <p>
  111. <nobr>
  112. <a href="/david/" title="Aller à l’accueil"
  113. ><svg class="icon icon-home">
  114. <use
  115. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  116. ></use>
  117. </svg>
  118. Accueil</a
  119. >
  120. </nobr>
  121. <nobr>
  122. <a href="/david/log/" title="Accès au flux RSS"
  123. ><svg class="icon icon-rss2">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  125. </svg>
  126. Suivre</a
  127. >
  128. </nobr>
  129. <nobr>
  130. <a href="http://larlet.com" title="Go to my English profile" data-instant
  131. ><svg class="icon icon-user-tie">
  132. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  133. </svg>
  134. Pro</a
  135. >
  136. </nobr>
  137. <nobr>
  138. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  139. ><svg class="icon icon-mail">
  140. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  141. </svg>
  142. Email</a
  143. >
  144. </nobr>
  145. <nobr>
  146. <abbr
  147. class="nowrap"
  148. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  149. ><svg class="icon icon-hammer2">
  150. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  151. </svg>
  152. Légal</abbr
  153. >
  154. </nobr>
  155. </p>
  156. <template id="theme-selector">
  157. <form>
  158. <fieldset>
  159. <legend><svg class="icon icon-brightness-contrast">
  160. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  161. </svg> Thème</legend>
  162. <label>
  163. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  164. </label>
  165. <label>
  166. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  167. </label>
  168. <label>
  169. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  170. </label>
  171. </fieldset>
  172. </form>
  173. </template>
  174. </footer>
  175. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  176. <script>
  177. function loadThemeForm(templateName) {
  178. const themeSelectorTemplate = document.querySelector(templateName)
  179. const form = themeSelectorTemplate.content.firstElementChild
  180. themeSelectorTemplate.replaceWith(form)
  181. form.addEventListener('change', (e) => {
  182. const chosenColorScheme = e.target.value
  183. localStorage.setItem('theme', chosenColorScheme)
  184. toggleTheme(chosenColorScheme)
  185. })
  186. const selectedTheme = localStorage.getItem('theme')
  187. if (selectedTheme && selectedTheme !== 'undefined') {
  188. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  189. }
  190. }
  191. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  192. window.addEventListener('load', () => {
  193. let hasDarkRules = false
  194. for (const styleSheet of Array.from(document.styleSheets)) {
  195. let mediaRules = []
  196. for (const cssRule of styleSheet.cssRules) {
  197. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  198. continue
  199. }
  200. // WARNING: Safari does not have/supports `conditionText`.
  201. if (cssRule.conditionText) {
  202. if (cssRule.conditionText !== prefersColorSchemeDark) {
  203. continue
  204. }
  205. } else {
  206. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  207. continue
  208. }
  209. }
  210. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  211. }
  212. // WARNING: do not try to insert a Rule to a styleSheet you are
  213. // currently iterating on, otherwise the browser will be stuck
  214. // in a infinite loop…
  215. for (const mediaRule of mediaRules) {
  216. styleSheet.insertRule(mediaRule.cssText)
  217. hasDarkRules = true
  218. }
  219. }
  220. if (hasDarkRules) {
  221. loadThemeForm('#theme-selector')
  222. }
  223. })
  224. </script>
  225. </body>
  226. </html>