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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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="Comme un besoin de faire une coupure dans mon incompréhension du monde.">
  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/07/18/" title="Publication précédente : Sachance">← 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/07/20/" title="Publication suivante : Jour 2">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <p><em>Comme un besoin de faire une coupure dans <a href="/david/2021/07/17/" title="Long terme">mon incompréhension</a> <a href="/david/2021/07/18/" title="Sachance">du monde</a>.</em></p>
  68. <p>Réveil à 3&#8239;h 30. Arrivée sur place à 6&#8239;h. Dans mon raft à 6&#8239;h 30. La météo annonce 2&nbsp;jours d’orages avec une alerte en prime mais je n’y crois pas. J’ai longtemps hésité à amener tout le matériel de tournage par contre… Étant en train d’apprécier les bruits retrouvés de la forêt, un hydravion me passe juste au-dessus de la tête. Grrr.</p>
  69. <figure>
  70. <a href="#lac"
  71. title="Cliquer pour une version haute résolution">
  72. <img src="/static/david/2021/lac.jpg" alt="Vue du lac depuis l’île."
  73. loading="lazy" width="1600" height="1200" />
  74. </a>
  75. <a href="#_" class="lightbox" id="lac">
  76. <img src="/static/david/2021/lac.jpg" alt="Vue du lac depuis l’île."
  77. loading="lazy" width="1600" height="1200" />
  78. </a>
  79. <figcaption>Vue du lac depuis l’île.</figcaption>
  80. </figure>
  81. <p>Je vais à un endroit que je connais bien que vous pouvez retrouver <a href="/david/blog/2018/bivouac-automnal/">ici</a> ou <a href="/david/2020/10/28/">là</a> pour des versions plus fraîches. Je connais un raccourci pour le portage entre les deux lacs mais je sais qu’il est infesté de moustiques (et de framboises). Mon erreur aura été d’avoir les deux mains prises, raft d’un côté et caméra de l’autre. Elles se font plaisir et le temps de prise de vue ne fait que prolonger ma présence en ces lieux humides&#8239;!</p>
  82. <figure>
  83. <a href="#huards"
  84. title="Cliquer pour une version haute résolution">
  85. <img src="/static/david/2021/huards.jpg" alt="Un couple de huards."
  86. loading="lazy" width="1600" height="1200" />
  87. </a>
  88. <a href="#_" class="lightbox" id="huards">
  89. <img src="/static/david/2021/huards.jpg" alt="Un couple de huards."
  90. loading="lazy" width="1600" height="1200" />
  91. </a>
  92. <figcaption>Attention, un huard peut en cacher un autre.</figcaption>
  93. </figure>
  94. <p>J’arrive enfin sur l’île en dérangeant(?) le couple de huard à résidence. Ils me le font savoir bruyamment et je ne prends même pas le temps de changer d’objectif tellement c’est soudain. Le jour où je croise un ours, ce sera probablement avec un 9&#8239;mm aussi… Je suis tout sourire <em>et</em> concentré car c’est quand même bancale de trimbaler un sac plus le matériel vidéo sur une embarcation pas si stable. Je vous passe les détails des embarquements et débarquements approximatifs.</p>
  95. <figure>
  96. <a href="#champignons-nantel"
  97. title="Cliquer pour une version haute résolution">
  98. <img src="/static/david/2021/champignons-nantel.jpg" alt="Une famille de champignon."
  99. loading="lazy" width="1600" height="1200" />
  100. </a>
  101. <a href="#_" class="lightbox" id="champignons-nantel">
  102. <img src="/static/david/2021/champignons-nantel.jpg" alt="Une famille de champignon."
  103. loading="lazy" width="1600" height="1200" />
  104. </a>
  105. <figcaption>Le grand est tout sourire.</figcaption>
  106. </figure>
  107. <figure>
  108. <a href="#petite-epinette"
  109. title="Cliquer pour une version haute résolution">
  110. <img src="/static/david/2021/petite-epinette.jpg" alt="Une très jeune pousse d’une épinette."
  111. loading="lazy" width="1600" height="1200" />
  112. </a>
  113. <a href="#_" class="lightbox" id="petite-epinette">
  114. <img src="/static/david/2021/petite-epinette.jpg" alt="Une très jeune pousse d’une épinette."
  115. loading="lazy" width="1600" height="1200" />
  116. </a>
  117. <figcaption>Le petit cherche à grandir.</figcaption>
  118. </figure>
  119. <p>Je prends le temps de (re)découvrir cet environnement insulaire avec le regard d’un photographe et j’ai du plaisir à capter de nouvelles choses entre baignades et farnientes. J’espère le retour des huards tout en sachant qu’ils ne reviendront pas avant le soir. Je nage jusqu’à un promontoire difficile d’accès et je découvre un champ de bleuets, j’y retourne en raft un peu plus tard. Miam&#8239;!</p>
  120. <figure>
  121. <a href="#plume"
  122. title="Cliquer pour une version haute résolution">
  123. <img src="/static/david/2021/plume.jpg" alt="Une plume accrochée à une branche."
  124. loading="lazy" width="1200" height="1600" />
  125. </a>
  126. <a href="#_" class="lightbox" id="plume">
  127. <img src="/static/david/2021/plume.jpg" alt="Une plume accrochée à une branche."
  128. loading="lazy" width="1200" height="1600" />
  129. </a>
  130. <figcaption>Quel oiseau a pu laisser une telle plume ?</figcaption>
  131. </figure>
  132. <p>Je pêche le soir sans grand espoir, plus pour faire des images depuis mon rocher favori. Je passe ensuite <em>off the record</em> de l’autre côté de l’île où je sais qu’il y a plus de chances et un énorme achigan (<em>black bass</em> en français) attrape ma mouche. La lutte est courte mais intense, il repartira avec une mouche et moi avec mon fil, vierge. Je passe la soirée à me dire qu’il va passer le reste de sa vie avec un hameçon dans la mâchoire à cause de moi. Peut-être moins pire que dans mon ventre&#8239;?</p>
  133. <figure>
  134. <a href="#bokeh-couchant"
  135. title="Cliquer pour une version haute résolution">
  136. <img src="/static/david/2021/bokeh-couchant.jpg" alt="Reflets de soleil couchant sur le lac."
  137. loading="lazy" width="1600" height="1200" />
  138. </a>
  139. <a href="#_" class="lightbox" id="bokeh-couchant">
  140. <img src="/static/david/2021/bokeh-couchant.jpg" alt="Reflets de soleil couchant sur le lac."
  141. loading="lazy" width="1600" height="1200" />
  142. </a>
  143. <figcaption>Douce lumière du soir.</figcaption>
  144. </figure>
  145. <p>Pour fuir les moustiques, je prends le lac en soirée et je tente de suivre les huards qui sont bien plus rapides que moi. Ils sont curieux et je tente des prise de vue à beaucoup d’ISO et à main levé depuis un raft avec un 600&#8239;mm. Autant dire que c’est sportif et approximatif. À l’œil nu, je les distingue difficilement et je suis étonné d’arriver à capter quoi que ce soit dans ces conditions. On verra bien. J’aime ce moment où ils mettent la tête dans l’eau pour vérifier s’il y a des poissons avant de plonger. Une canne à pêche est tellement archaïque en comparaison.</p>
  146. <p>Je m’endors en acceptant l’idée d’essuyer un orage dans la nuit. Les météos locales sont unanimes. La lune est rousse et douce, je n’ai pas le courage d’attendre les <a href="/david/2021/05/08/" title="Étoiles">étoiles</a> cette fois.</p>
  147. <figure>
  148. <a href="#lune-rousse"
  149. title="Cliquer pour une version haute résolution">
  150. <img src="/static/david/2021/lune-rousse.jpg" alt="La lune."
  151. loading="lazy" width="1600" height="1200" />
  152. </a>
  153. <a href="#_" class="lightbox" id="lune-rousse">
  154. <img src="/static/david/2021/lune-rousse.jpg" alt="La lune."
  155. loading="lazy" width="1600" height="1200" />
  156. </a>
  157. <figcaption>#MontreTaLune</figcaption>
  158. </figure>
  159. <nav>
  160. <p class="center">
  161. <a rel="prev" href="/david/2021/07/18/" title="Publication précédente : Sachance">← Précédent</a> •
  162. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  163. • <a rel="next" href="/david/2021/07/20/" title="Publication suivante : Jour 2">Suivant →</a>
  164. </p>
  165. </nav>
  166. </article>
  167. <hr>
  168. <footer>
  169. <p>
  170. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  171. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  172. </svg> Accueil</a> •
  173. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  174. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  175. </svg> Suivre</a> •
  176. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  177. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  178. </svg> Pro</a> •
  179. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  180. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  181. </svg> Email</a> •
  182. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  183. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  184. </svg> Légal</abbr>
  185. </p>
  186. <template id="theme-selector">
  187. <form>
  188. <fieldset>
  189. <legend><svg class="icon icon-brightness-contrast">
  190. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  191. </svg> Thème</legend>
  192. <label>
  193. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  194. </label>
  195. <label>
  196. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  197. </label>
  198. <label>
  199. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  200. </label>
  201. </fieldset>
  202. </form>
  203. </template>
  204. </footer>
  205. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  206. <script>
  207. function loadThemeForm(templateName) {
  208. const themeSelectorTemplate = document.querySelector(templateName)
  209. const form = themeSelectorTemplate.content.firstElementChild
  210. themeSelectorTemplate.replaceWith(form)
  211. form.addEventListener('change', (e) => {
  212. const chosenColorScheme = e.target.value
  213. localStorage.setItem('theme', chosenColorScheme)
  214. toggleTheme(chosenColorScheme)
  215. })
  216. const selectedTheme = localStorage.getItem('theme')
  217. if (selectedTheme && selectedTheme !== 'undefined') {
  218. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  219. }
  220. }
  221. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  222. window.addEventListener('load', () => {
  223. let hasDarkRules = false
  224. for (const styleSheet of Array.from(document.styleSheets)) {
  225. let mediaRules = []
  226. for (const cssRule of styleSheet.cssRules) {
  227. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  228. continue
  229. }
  230. // WARNING: Safari does not have/supports `conditionText`.
  231. if (cssRule.conditionText) {
  232. if (cssRule.conditionText !== prefersColorSchemeDark) {
  233. continue
  234. }
  235. } else {
  236. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  237. continue
  238. }
  239. }
  240. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  241. }
  242. // WARNING: do not try to insert a Rule to a styleSheet you are
  243. // currently iterating on, otherwise the browser will be stuck
  244. // in a infinite loop…
  245. for (const mediaRule of mediaRules) {
  246. styleSheet.insertRule(mediaRule.cssText)
  247. hasDarkRules = true
  248. }
  249. }
  250. if (hasDarkRules) {
  251. loadThemeForm('#theme-selector')
  252. }
  253. })
  254. </script>
  255. </body>
  256. </html>