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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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>Jour 1 — David Larlet</title>
  13. <meta name="description" content="Quelques pas dans la forêt et je tombe sur un panneau : le chemin est fermé pour cause de chasse à l’orignal. Je profite d’avoir été précédé par un couple que j’ai croisé sur le parking pour partager notre inconscience de poursuivre le chemin. J’ai bien fait de prendre mon bonnet réversible orange fluo même si, vu la couleur du feuillage environnant, ça ne doit pas être si pertinent…">
  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>Jour 1</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/10/09/" title="Publication précédente : Slowgrégateur">← 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/10/11/" title="Publication suivante : Jour 2">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <p>Quelques pas dans la forêt et je tombe sur un panneau&nbsp;: le chemin est fermé pour cause de chasse à l’orignal. Je profite d’avoir été précédé par un couple que j’ai croisé sur le parking pour partager notre inconscience de poursuivre le chemin. J’ai bien fait de prendre mon bonnet réversible orange fluo même si, vu la couleur du feuillage environnant, ça ne doit pas être si pertinent…</p>
  68. <figure>
  69. <a href="#feuilles-rouges-brouillard"
  70. title="Cliquer pour une version haute résolution">
  71. <img src="/static/david/2021/feuilles-rouges-brouillard.jpg" alt="Une forêt, rouge, dans le brouillard."
  72. loading="lazy" width="2048" height="1366" />
  73. </a>
  74. <a href="#_" class="lightbox" id="feuilles-rouges-brouillard">
  75. <img src="/static/david/2021/feuilles-rouges-brouillard.jpg" alt="Une forêt, rouge, dans le brouillard."
  76. loading="lazy" width="2048" height="1366" />
  77. </a>
  78. <figcaption>L’ambiance est de toute beauté mais je n’en mène pas large pour autant, une balle pour orignal c’est gros.</figcaption>
  79. </figure>
  80. <p>Je passe sur mes réflexions misanthropiques du moment et j’ai de toute façon tellement de choses à penser, <a href="/david/2021/10/07/" title="Consigner">autant</a> <a href="/david/2021/10/09/" title="Slowgrégateur">techniques</a> <a href="/david/2021/09/16/" title="Analphabète">que</a> <a href="/david/2021/03/14/" title="Impôts">très</a> <a href="/david/2021/09/01/" title="Rentrée">personnelles</a>, que mon cerveau va être difficile à calmer cette fois. Pour faire du bruit, je sifflote en continu «&nbsp;Dans sa maison un grand cerf&nbsp;». En espérant qu’il·les n’aient pas de balle à troll.</p>
  81. <figure>
  82. <a href="#feuilles-rouges-brouillard-lac"
  83. title="Cliquer pour une version haute résolution">
  84. <img src="/static/david/2021/feuilles-rouges-brouillard-lac.jpg" alt="Une forêt, rouge, et un lac dans le brouillard."
  85. loading="lazy" width="2048" height="1366" />
  86. </a>
  87. <a href="#_" class="lightbox" id="feuilles-rouges-brouillard-lac">
  88. <img src="/static/david/2021/feuilles-rouges-brouillard-lac.jpg" alt="Une forêt, rouge, et un lac dans le brouillard."
  89. loading="lazy" width="2048" height="1366" />
  90. </a>
  91. <figcaption>J’arrive à un lac, parfait pour une petite collation.</figcaption>
  92. </figure>
  93. <p>Je marche encore quelques heures, la progression est difficile avec les feuilles détrempées qui jonchent un sol inégal devenu invisible. Je m’astreins à rester sur le sentier, ce n’est pas le moment de faire du zèle…</p>
  94. <p>Le couple est arrivé avant moi au refuge et je ne me sens pas d’aller les déranger en dépit de la menace. Je continue en espérant trouver un coin sympa au bord du lac. En arrivant enfin à un endroit convenable, je manque de marcher sur un co-locataire alors je lui tire le portrait.</p>
  95. <figure>
  96. <a href="#feuilles-rouges-crapaud"
  97. title="Cliquer pour une version haute résolution">
  98. <img src="/static/david/2021/feuilles-rouges-crapaud.jpg" alt="Un crapaud et des feuilles rouges (oui il y a une constance)."
  99. loading="lazy" width="1366" height="2048" />
  100. </a>
  101. <a href="#_" class="lightbox" id="feuilles-rouges-crapaud">
  102. <img src="/static/david/2021/feuilles-rouges-crapaud.jpg" alt="Un crapaud et des feuilles rouges (oui il y a une constance)."
  103. loading="lazy" width="1366" height="2048" />
  104. </a>
  105. <figcaption>Crapaud, crapaud ouvre moi, ou le chasseur… #OhWait.</figcaption>
  106. </figure>
  107. <p>Je remarque qu’il a de la nourriture directement posée sur la tête. Il y a d’autres téméraires dans cette forêt.</p>
  108. <figure>
  109. <a href="#feuilles-rouges-crapaud-insecte"
  110. title="Cliquer pour une version haute résolution">
  111. <img src="/static/david/2021/feuilles-rouges-crapaud-insecte.jpg" alt="Un crapaud avec un insecte posé sur la tête."
  112. loading="lazy" width="2048" height="1366" />
  113. </a>
  114. <a href="#_" class="lightbox" id="feuilles-rouges-crapaud-insecte">
  115. <img src="/static/david/2021/feuilles-rouges-crapaud-insecte.jpg" alt="Un crapaud avec un insecte posé sur la tête."
  116. loading="lazy" width="2048" height="1366" />
  117. </a>
  118. <figcaption>YOLO.</figcaption>
  119. </figure>
  120. <p>Il y a des empreintes et des bouses d’orignal partout. Je réalise que j’ai choisi de faire une randonnée dans une <a href="https://fr.wikipedia.org/wiki/Zone_d%27exploitation_contr%C3%B4l%C3%A9e">Zone d’exploitation contrôlée</a> (ZEC) en période de chasse, pas non plus très malin de ma part.</p>
  121. <p>Le temps est toujours à la grisaille et je suis content d’avoir pris la tente. Ça finit par se lever en soirée alors que ça commence à tirer dans tous les coins. Je me dis que je serai moins exposé une fois couché…</p>
  122. <figure>
  123. <a href="#feuilles-rouges-lune"
  124. title="Cliquer pour une version haute résolution">
  125. <img src="/static/david/2021/feuilles-rouges-lune.jpg" alt="La lune au-dessus de la forêt."
  126. loading="lazy" width="1366" height="2048" />
  127. </a>
  128. <a href="#_" class="lightbox" id="feuilles-rouges-lune">
  129. <img src="/static/david/2021/feuilles-rouges-lune.jpg" alt="La lune au-dessus de la forêt."
  130. loading="lazy" width="1366" height="2048" />
  131. </a>
  132. <figcaption>#MontreTaLune.</figcaption>
  133. </figure>
  134. <nav>
  135. <p class="center">
  136. <a rel="prev" href="/david/2021/10/09/" title="Publication précédente : Slowgrégateur">← Précédent</a> •
  137. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  138. • <a rel="next" href="/david/2021/10/11/" title="Publication suivante : Jour 2">Suivant →</a>
  139. </p>
  140. </nav>
  141. </article>
  142. <hr>
  143. <footer>
  144. <p>
  145. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  146. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  147. </svg> Accueil</a> •
  148. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  149. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  150. </svg> Suivre</a> •
  151. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  152. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  153. </svg> Pro</a> •
  154. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  155. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  156. </svg> Email</a> •
  157. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  158. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  159. </svg> Légal</abbr>
  160. </p>
  161. <template id="theme-selector">
  162. <form>
  163. <fieldset>
  164. <legend><svg class="icon icon-brightness-contrast">
  165. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  166. </svg> Thème</legend>
  167. <label>
  168. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  169. </label>
  170. <label>
  171. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  172. </label>
  173. <label>
  174. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  175. </label>
  176. </fieldset>
  177. </form>
  178. </template>
  179. </footer>
  180. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  181. <script>
  182. function loadThemeForm(templateName) {
  183. const themeSelectorTemplate = document.querySelector(templateName)
  184. const form = themeSelectorTemplate.content.firstElementChild
  185. themeSelectorTemplate.replaceWith(form)
  186. form.addEventListener('change', (e) => {
  187. const chosenColorScheme = e.target.value
  188. localStorage.setItem('theme', chosenColorScheme)
  189. toggleTheme(chosenColorScheme)
  190. })
  191. const selectedTheme = localStorage.getItem('theme')
  192. if (selectedTheme && selectedTheme !== 'undefined') {
  193. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  194. }
  195. }
  196. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  197. window.addEventListener('load', () => {
  198. let hasDarkRules = false
  199. for (const styleSheet of Array.from(document.styleSheets)) {
  200. let mediaRules = []
  201. for (const cssRule of styleSheet.cssRules) {
  202. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  203. continue
  204. }
  205. // WARNING: Safari does not have/supports `conditionText`.
  206. if (cssRule.conditionText) {
  207. if (cssRule.conditionText !== prefersColorSchemeDark) {
  208. continue
  209. }
  210. } else {
  211. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  212. continue
  213. }
  214. }
  215. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  216. }
  217. // WARNING: do not try to insert a Rule to a styleSheet you are
  218. // currently iterating on, otherwise the browser will be stuck
  219. // in a infinite loop…
  220. for (const mediaRule of mediaRules) {
  221. styleSheet.insertRule(mediaRule.cssText)
  222. hasDarkRules = true
  223. }
  224. }
  225. if (hasDarkRules) {
  226. loadThemeForm('#theme-selector')
  227. }
  228. })
  229. </script>
  230. </body>
  231. </html>