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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  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. Éclipse
  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="Il y a l’éclipse et puis il y a toute l’ambiance autour. Je crois que c’est ce qui m’a le plus marqué, cet émerveillement doublé d’un enthousiasme collectif. Lorsque tout le monde retire les lunettes ou même un peu avant lorsque la lumière change et que l’on voit un coucher (??) de soleil en version accéléré qui s’avance vers nous en pleine après-midi.">
  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. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Éclipse</h1>
  136. <p>Le <time datetime="2024-04-08">8 avril 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/04/07/"
  143. title="Publication précédente : Piscine">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. </p>
  149. </nav>
  150. <p>Il y a l’éclipse et puis il y a toute l’ambiance autour. Je crois que c’est ce qui m’a le plus marqué, cet émerveillement doublé d’un enthousiasme collectif. Lorsque tout le monde retire les lunettes ou même un peu avant lorsque la lumière change et que l’on voit un coucher (??) de soleil en version accéléré qui s’avance vers nous en pleine&nbsp;après-midi.</p>
  151. <p>L’éclipse totale était censée être de 1&#8239;min 45&#8239;sec à ma position mais alors en ressenti derrière l’objectif c’était du 20&nbsp;secondes&#8239;! À peine le temps de réduire au maximum l’exposition et de déclencher. J’avais fait une mise au point sur un avion au préalable et j’étais passé en manuel mais c’était stupide et ça a rendu floues toutes les photos… jusqu’aux deux dernières. Coup de bol d’avoir pris le temps de tester l’autofocus en sentant venir la&nbsp;fin.</p>
  152. <figure>
  153. <a href="/static/david/2024/2024-04-08-eclipse-1.jpg"
  154. title="Cliquer pour une version haute résolution">
  155. <img
  156. src="/static/david/2024/2024-04-08-eclipse-1.jpg"
  157. width="2000" height="2000"
  158. srcset="/static/david/2024/2024-04-08-eclipse-1.jpg 2000w, /static/david/2024/2024-04-08-eclipse-1_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-1_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-1_1320x880.jpg 1320w"
  159. sizes="min(100vw, calc(100vh * 2000 / 2000))"
  160. loading="lazy"
  161. decoding="async"
  162. alt="Le moment de l’éclipse où la lune passe totalement devant le soleil.">
  163. </a>
  164. <figcaption>J’étais tellement content de découvrir des éruptions solaires au développement&nbsp;!</figcaption>
  165. </figure>
  166. <p>En étant sur la fin, cela permet d’être vraiment à la limite de la couronne solaire et de photographier un phénomène que je ne pensait pas possible avec mon&nbsp;matériel.</p>
  167. <p>Et puis, il y a ce moment où l’hystérie collective redevient sérieuse car il faut remettre les lunettes et prendre le temps de se demander ce qu’il vient de se&nbsp;passer.</p>
  168. <figure>
  169. <a href="/static/david/2024/2024-04-08-eclipse-2.jpg"
  170. title="Cliquer pour une version haute résolution">
  171. <img
  172. src="/static/david/2024/2024-04-08-eclipse-2.jpg"
  173. width="3840" height="2560"
  174. srcset="/static/david/2024/2024-04-08-eclipse-2.jpg 3840w, /static/david/2024/2024-04-08-eclipse-2_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-2_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-2_1320x880.jpg 1320w"
  175. sizes="min(100vw, calc(100vh * 3840 / 2560))"
  176. loading="lazy"
  177. decoding="async"
  178. alt="Le moment de l’éclipse où la lune va découvrir le soleil.">
  179. </a>
  180. <figcaption>En mode halo au développement car c’est quand même&nbsp;sympa.</figcaption>
  181. </figure>
  182. <p>Fait étonnant, quelques petites minutes après l’apogée, on voyait un avion et surtout son ombre projetée de manière inhabituelle. J’ai l’intuition qu’il était dans une zone qui n’arrive jamais en temps normal car cet angle lumineux n’est pas possible. J’aurais dû prendre une photo pour pouvoir faire des calculs à ce&nbsp;sujet.</p>
  183. <nav>
  184. <p>
  185. <a href="/david/2024/enthousiasme/"
  186. title="Liste de tous les articles 2024 associés à cette étiquette"
  187. rel="tag">#enthousiasme</a>
  188. <a href="/david/2024/experience/"
  189. title="Liste de tous les articles 2024 associés à cette étiquette"
  190. rel="tag">#expérience</a>
  191. <a href="/david/2024/photographie/"
  192. title="Liste de tous les articles 2024 associés à cette étiquette"
  193. rel="tag">#photographie</a>
  194. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  195. </p>
  196. </nav>
  197. <nav>
  198. <p>
  199. <a rel="prev"
  200. href="/david/2024/04/07/"
  201. title="Publication précédente : Piscine">← Précédent</a> •
  202. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  203. </p>
  204. </nav>
  205. <form action="/david/recherche/" method="get">
  206. <fieldset>
  207. <legend>Recherche</legend>
  208. <label for="input-search">Termes de votre recherche :</label>
  209. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  210. <input type="submit" value="Chercher">
  211. <p id="indexation-infos">
  212. <small>
  213. Seuls les contenus de ces 8 dernières années sont indexés.
  214. </small>
  215. </p>
  216. </fieldset>
  217. </form>
  218. <aside>
  219. <theme-toggle></theme-toggle>
  220. </aside>
  221. </article>
  222. <hr>
  223. <footer>
  224. <p>
  225. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  226. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  227. <a href="http://larlet.com"
  228. title="Go to my English profile"
  229. data-instant>Pro</a>
  230. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  231. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  232. </p>
  233. <template id="theme-selector">
  234. <form>
  235. <style type="text/css">
  236. fieldset div {
  237. text-align: center;
  238. }
  239. </style>
  240. <fieldset>
  241. <legend>Thème</legend>
  242. <div>
  243. <label>
  244. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  245. Auto
  246. </label>
  247. <label>
  248. <input type="radio" value="dark" name="chosen-color-scheme">
  249. Foncé
  250. </label>
  251. <label>
  252. <input type="radio" value="light" name="chosen-color-scheme">
  253. Clair
  254. </label>
  255. </div>
  256. </fieldset>
  257. </form>
  258. </template>
  259. </footer>
  260. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  261. <script>
  262. class ThemeToggle extends HTMLElement {
  263. constructor() {
  264. super()
  265. const themeSelectorTemplate = document.querySelector('#theme-selector')
  266. const form = themeSelectorTemplate.content.firstElementChild
  267. this.attachShadow({ mode: 'open' })
  268. this.shadowRoot.appendChild(form.cloneNode(true))
  269. }
  270. connectedCallback() {
  271. const form = this.shadowRoot.querySelector('form')
  272. form.addEventListener('change', (e) => {
  273. const chosenColorScheme = e.target.value
  274. localStorage.setItem('theme', chosenColorScheme)
  275. toggleTheme(chosenColorScheme)
  276. })
  277. const selectedTheme = localStorage.getItem('theme')
  278. if (selectedTheme && selectedTheme !== 'undefined') {
  279. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  280. }
  281. }
  282. }
  283. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  284. window.addEventListener('load', () => {
  285. let colorsLayer = undefined
  286. let hasDarkRules = false
  287. for (const styleSheet of Array.from(document.styleSheets)) {
  288. let mediaRules = []
  289. for (const layerRule of styleSheet.cssRules) {
  290. if (!(layerRule instanceof CSSLayerBlockRule)) {
  291. continue
  292. }
  293. if (layerRule.name === 'colors') {
  294. colorsLayer = layerRule
  295. }
  296. for (const cssRule of layerRule.cssRules) {
  297. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  298. continue
  299. }
  300. // WARNING: Safari does not have/supports `conditionText`.
  301. if (cssRule.conditionText) {
  302. if (cssRule.conditionText !== prefersColorSchemeDark) {
  303. continue
  304. }
  305. } else {
  306. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  307. continue
  308. }
  309. }
  310. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  311. }
  312. }
  313. // WARNING: do not try to insert a Rule to a styleSheet you are
  314. // currently iterating on, otherwise the browser will be stuck
  315. // in a infinite loop…
  316. for (const mediaRule of mediaRules) {
  317. // Safari requires the `0` second parameter (even if default).
  318. colorsLayer.insertRule(mediaRule.cssText, 0)
  319. hasDarkRules = true
  320. }
  321. }
  322. if (hasDarkRules) {
  323. if ('customElements' in window && !customElements.get('theme-toggle')) {
  324. customElements.define('theme-toggle', ThemeToggle)
  325. }
  326. }
  327. })
  328. </script>
  329. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  330. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  331. <script>
  332. tippy('[data-tippy]', {
  333. content(reference) {
  334. reference.addEventListener('click', (e) => e.preventDefault())
  335. return `
  336. <h3 lang="fr">
  337. <img src="${reference.dataset.favicon}" loading="lazy">
  338. <a href="${reference.dataset.source}"
  339. >Article sur ${reference.dataset.domain}</a></h3>
  340. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  341. <div class="tippy-links" lang="fr">
  342. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  343. </div>
  344. `
  345. },
  346. allowHTML: true,
  347. interactive: true,
  348. delay: [150, 700],
  349. hideOnClick: false
  350. })
  351. </script>
  352. <script type="module">
  353. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  354. const markObserver = new IntersectionObserver((entries, observer) => {
  355. const computedStyle = getComputedStyle(document.documentElement)
  356. const markBackground = computedStyle.getPropertyValue('--mark-background')
  357. for (const entry of entries) {
  358. if (entry.intersectionRatio === 0) continue
  359. const markElement = entry.target
  360. markElement.style.backgroundColor = 'inherit'
  361. const annotation = annotate(
  362. markElement, {
  363. type: 'highlight',
  364. multiline: true,
  365. color: markBackground,
  366. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  367. animate: false
  368. }
  369. )
  370. annotation.show()
  371. observer.unobserve(markElement)
  372. }
  373. }, {threshold: 1.0})
  374. for (const markElement of document.querySelectorAll('mark')) {
  375. markObserver.observe(markElement)
  376. }
  377. </script>
  378. </body>
  379. </html>