Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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>Vacances — David Larlet</title>
  13. <meta name="description" content="L’histoire est aussi importante que la forme ou la structure. Dans une très large mesure, l’histoire d’un phénomène constitue le phénomène lui-même. Nous sommes, réellement, tout ce qui a existé avant nous et nous pouvons devenir à notre tour infiniment plus que ce que nous sommes.">
  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>Vacances</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/04/21/" title="Publication précédente : Montage">← 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/04/23/" title="Publication suivante : Contemplation">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote>
  68. <p>L’histoire est aussi importante que la forme ou la structure. Dans une très large mesure, <mark>l’histoire d’un phénomène constitue le phénomène lui-même</mark>. Nous sommes, réellement, tout ce qui a existé avant nous et nous pouvons devenir à notre tour infiniment plus que ce que nous sommes.</p>
  69. <p><cite><em>L’écologie sociale</em>, Murray Bookchin</cite></p>
  70. </blockquote>
  71. <p>On a un rapport assez particulier aux vacances chez Scopyleft et au moment où on se <a href="/david/2021/03/17/" title="Arrivant·es">transmet en question</a>, c’est l’occasion de partager <em>un</em> état de nos réflexions.</p>
  72. <p>La prise de vacances est libre et consciente. <strong>Libre</strong> car on ne se restreint pas à un nombre de jours/semaines, ni même à communiquer à nos collègues si/quand on est en vacances. <strong>Consciente</strong> car on essaye — dans la mesure du possible — de ne pas laisser les autres galérer du fait de notre indisponibilité. Faire partie d’une <abbr title="Société coopérative et participative">SCOP</abbr> c’est aussi <em>pour moi</em> éprouver de l’empathie et de la solidarité pour les autres membres.</p>
  73. <p>La discussion du jour portait sur la toxicité potentielle d’une telle approche. D’autres entreprises pratiquent les <em>vacances illimitées</em> mais cela crée un tel sentiment de culpabilité que les employé·es prennent en définitive <em>moins</em> de vacances et dans un climat pas terrible.</p>
  74. <p>Comment rompre avec ce sentiment&#8239;?</p>
  75. <p>On en vient à (re)questionner les notions de travail et de vacances. Si l’on envisage les vacances comme des <em>moments de prise de soin personnels</em>, le changement n’est pas uniquement sémantique mais traduit une intention différente. D’une manière similaire à l’auto-détermination de nos salaires en fonction de nos «&nbsp;besoins&nbsp;», les vacances s’adaptent ainsi à notre rythme de vie, notre enthousiasme et notre appétence. L’exploration du tempo convenable pour notre danse du moment.</p>
  76. <p>Ce n’est plus alors la recherche d’un rythme de <em>travail</em> soutenable mais celle d’une qualité de <em>vie</em> enviable.</p>
  77. <blockquote>
  78. <p>Bien au contraire, la complétude inclut l’ensemble disparate des structures, d’articulations, de médiations, où le tout va puiser la riche variété de ces formes et où ce qu’un esprit analytique réduirait à une suite de détails «&nbsp;innombrables&nbsp;» et «&nbsp;fortuits&nbsp;» acquiert ainsi des propriétés qualitatives uniques.</p>
  79. <p><cite><em>Ibid.</em></cite></p>
  80. </blockquote>
  81. <nav>
  82. <p class="center">
  83. <a rel="prev" href="/david/2021/04/21/" title="Publication précédente : Montage">← Précédent</a> •
  84. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  85. • <a rel="next" href="/david/2021/04/23/" title="Publication suivante : Contemplation">Suivant →</a>
  86. </p>
  87. </nav>
  88. </article>
  89. <hr>
  90. <footer>
  91. <p>
  92. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  93. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  94. </svg> Accueil</a> •
  95. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  96. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  97. </svg> Suivre</a> •
  98. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  99. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  100. </svg> Pro</a> •
  101. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  102. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  103. </svg> Email</a> •
  104. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  105. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  106. </svg> Légal</abbr>
  107. </p>
  108. <template id="theme-selector">
  109. <form>
  110. <fieldset>
  111. <legend><svg class="icon icon-brightness-contrast">
  112. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  113. </svg> Thème</legend>
  114. <label>
  115. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  116. </label>
  117. <label>
  118. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  119. </label>
  120. <label>
  121. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  122. </label>
  123. </fieldset>
  124. </form>
  125. </template>
  126. </footer>
  127. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  128. <script>
  129. function loadThemeForm(templateName) {
  130. const themeSelectorTemplate = document.querySelector(templateName)
  131. const form = themeSelectorTemplate.content.firstElementChild
  132. themeSelectorTemplate.replaceWith(form)
  133. form.addEventListener('change', (e) => {
  134. const chosenColorScheme = e.target.value
  135. localStorage.setItem('theme', chosenColorScheme)
  136. toggleTheme(chosenColorScheme)
  137. })
  138. const selectedTheme = localStorage.getItem('theme')
  139. if (selectedTheme && selectedTheme !== 'undefined') {
  140. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  141. }
  142. }
  143. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  144. window.addEventListener('load', () => {
  145. let hasDarkRules = false
  146. for (const styleSheet of Array.from(document.styleSheets)) {
  147. let mediaRules = []
  148. for (const cssRule of styleSheet.cssRules) {
  149. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  150. continue
  151. }
  152. // WARNING: Safari does not have/supports `conditionText`.
  153. if (cssRule.conditionText) {
  154. if (cssRule.conditionText !== prefersColorSchemeDark) {
  155. continue
  156. }
  157. } else {
  158. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  159. continue
  160. }
  161. }
  162. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  163. }
  164. // WARNING: do not try to insert a Rule to a styleSheet you are
  165. // currently iterating on, otherwise the browser will be stuck
  166. // in a infinite loop…
  167. for (const mediaRule of mediaRules) {
  168. styleSheet.insertRule(mediaRule.cssText)
  169. hasDarkRules = true
  170. }
  171. }
  172. if (hasDarkRules) {
  173. loadThemeForm('#theme-selector')
  174. }
  175. })
  176. </script>
  177. </body>
  178. </html>