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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  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 #adaptation
  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="Publications relatives au tag #adaptation">
  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>#adaptation</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/03/05/" title="Lien permanent vers cet article">Jour&nbsp;2</a> <time datetime="2024-03-05">5 mars 2024</time>
  132. </h2>
  133. <p>On se réveille dans la brume avec le soleil peinant à passer à travers, le lac et la neige ont regelé pendant la nuit. C’est une belle ambiance après une nuit agitée par la chaleur du <del>sauna</del> refuge. Les poêles tirent à fond dans ces endroits pour éviter que des personnes n’arrivent pas à faire démarrer un feu (j’imagine que ça peut être critique) mais ça les rend très inefficaces dans la durée et très chauds dès qu’on met deux buches&nbsp;dedans.</p>
  134. <figure>
  135. <a href="/static/david/2024/2024-03-05-lac-corbeau.jpg"
  136. title="Cliquer pour une version haute résolution">
  137. <img
  138. src="/static/david/2024/2024-03-05-lac-corbeau.jpg"
  139. width="4032" height="3024"
  140. srcset="/static/david/2024/2024-03-05-lac-corbeau.jpg 4032w, /static/david/2024/2024-03-05-lac-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-05-lac-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-05-lac-corbeau_1320x880.jpg 1320w"
  141. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  142. loading="lazy"
  143. decoding="async"
  144. alt="Lac corbeau à l’aube.">
  145. </a>
  146. <figcaption>De bien jolies couleurs au&nbsp;réveil.</figcaption>
  147. </figure>
  148. <p>Cet épisode me confirme encore une fois que les enfants ont des corps de sportifs de très haut niveau. Je suis impatient de pouvoir le charger un peu plus car c’est frustrant de le voir gambader devant de bon matin alors que mes muscles sont à peine réveillés. J’aime bien lorsqu’on va explorer un peu plus loin et que l’on se projette sur ce que l’on pourrait faire l’année&nbsp;suivante.</p>
  149. <figure>
  150. <a href="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg"
  151. title="Cliquer pour une version haute résolution">
  152. <img
  153. src="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg"
  154. width="3024" height="4032"
  155. srcset="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg 3024w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_1320x880.jpg 1320w"
  156. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  157. loading="lazy"
  158. decoding="async"
  159. alt="Un enfant qui court dans la neige vers un refuge.">
  160. </a>
  161. <figcaption>Jamais&nbsp;fatigué.</figcaption>
  162. </figure>
  163. <p>Le retour est moins joyeux car il s’agit d’enchainer les efforts et chaque heure qui passe rend la neige plus meuble. À tel point que l’on décide de couper par une piste sur une courte section. Mon évaluation est que la saison de ski est terminée, même une sous-couche bien travaillée ne tiendra pas la semaine qui s’en&nbsp;vient.</p>
  164. <p>J’aurais aimé faire une boucle un peu plus longue au retour mais il faut savoir s’adapter aux conditions. Le plus important est de terminer sans blessure ni&nbsp;dégoût.</p>
  165. <p><em>Je commence à imaginer un parcours rapide sur plusieurs jours dans cette forêt que je connais bien. Peut-être qu’une fenêtre se dessine en avril… il faut que je récupère un peu de cardio d’ici&nbsp;là.</em></p>
  166. <nav>
  167. <p>
  168. <a href="/david/2024/adaptation/"
  169. title="Liste de tous les articles 2024 associés à cette étiquette"
  170. rel="tag">#adaptation</a>
  171. <a href="/david/2024/aventure/"
  172. title="Liste de tous les articles 2024 associés à cette étiquette"
  173. rel="tag">#aventure</a>
  174. <a href="/david/2024/psychologie/"
  175. title="Liste de tous les articles 2024 associés à cette étiquette"
  176. rel="tag">#psychologie</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>