Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  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. Aurores
  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="13h17 : Elle m’informe qu’il y a une énorme tâche solaire visible avec les lunettes d’éclipse actuellement sur le soleil. J’oublie de regarder.">
  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>Aurores</h1>
  136. <p>Le <time datetime="2024-05-10">10 mai 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/05/05/"
  143. title="Publication précédente : Jour 2">← 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. • <a rel="next"
  149. href="/david/2024/05/12/"
  150. title="Publication suivante : Alien">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>13h17&nbsp;: Elle m’informe qu’il y a une énorme tâche solaire visible avec les lunettes d’éclipse actuellement sur le soleil. J’oublie de&nbsp;regarder.</p>
  154. <p>19h28&nbsp;: Un ami m’indique qu’<a data-link-domain="ici.radio-canada.ca" href="https://ici.radio-canada.ca/nouvelle/2071742/tempte-solaire-geomagnetique-10-mai">une tempête solaire arrive sur le Canada</a>. J’ai un peu de mal à faire le lien direct avec les aurores boréales, surtout que je suis à Montréal donc je n’y pense même&nbsp;pas.</p>
  155. <p>20h17&nbsp;: Je creuse un peu et apparemment ça va vraiment être exceptionnel, genre <a data-link-domain="espaces.ca" href="https://www.espaces.ca/articles/actualites/23173-des-aurores-boreales-spectaculaires-partout-au-quebec-cette-fin-de-semaine">le plus important de ces 19&nbsp;dernières années</a>. Je lui partage ma déception d’être en ville pour cette opportunité&nbsp;improbable.</p>
  156. <p>20h36&nbsp;: On s’appelle et on convient d’aller au parc à 200&nbsp;mètres de chez moi avec les enfants et de quoi avoir chaud, au pire ça fera une sortie nocturne marrante. <a data-link-domain="swpc.noaa.gov" href="https://www.swpc.noaa.gov/products/aurora-30-minute-forecast">Le site le plus populaire à ce sujet</a> semble dire que ça serait visible même depuis notre latitude. Le ciel est complètement&nbsp;dégagé.</p>
  157. <p>21h22&nbsp;: On est bien installés dans le coin le moins lumineux du parc que je connais comme ma poche. Une bonne occasion de réaliser l’activité nocturne de la faune locale. Je n’y crois qu’à 1% mais ne faire que quelques mètres pour espérer réaliser un rêve c’est une aubaine qui ne se refuse pas. Joachim a eu besoin d’aller <a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2023-03-31-aller-voir-les-aurores-boreales-en-train">pas mal plus loin</a> l’année&nbsp;dernière.</p>
  158. <p>22h03&nbsp;: Soudain, venant de l’ouest, l’équivalent d’un rideau de pluie verte/rose qui s’avance vers le nord. C’est juste incroyable à vivre et ça vient compléter <a href="/david/2024/04/08/" title="Éclipse">l’éclipse</a> en terme d’intensité émotionnelle. Je suis tellement surpris que je mets un moment à sortir l’appareil photo sur lequel je n’avais rien réglé, n’y croyant pas&nbsp;vraiment.</p>
  159. <figure>
  160. <a href="/static/david/2024/2024-05-10-aurore-boreale.jpg"
  161. title="Cliquer pour une version haute résolution">
  162. <img
  163. src="/static/david/2024/2024-05-10-aurore-boreale.jpg"
  164. width="3840" height="2560"
  165. srcset="/static/david/2024/2024-05-10-aurore-boreale.jpg 3840w, /static/david/2024/2024-05-10-aurore-boreale_660x440.jpg 660w, /static/david/2024/2024-05-10-aurore-boreale_990x660.jpg 990w, /static/david/2024/2024-05-10-aurore-boreale_1320x880.jpg 1320w"
  166. sizes="min(100vw, calc(100vh * 3840 / 2560))"
  167. loading="lazy"
  168. decoding="async"
  169. alt="Une aurore boréale depuis Montréal.">
  170. </a>
  171. <figcaption>La première photo, avec beaucoup d’ISO et une grande ouverture, à main levée, tout ce qu’il ne fallait&nbsp;pas…</figcaption>
  172. </figure>
  173. <p>Pendant plus d’une heure, on profite d’être au milieu de tous ces échanges magnétiques. Je remercie le soleil d’avoir pété un bon coup et la lune d’être restée discrète ce soir là. La lumière est tellement exceptionnelle, on se sent au milieu de l’aurore —&nbsp;ce qui fait des photos moins spectaculaires, ça devient une expérience à vivre. Rétrospectivement, la première vague était vraiment la plus contrastée et&nbsp;magnifique.</p>
  174. <p>23h19&nbsp;: On rentre finalement car les enfants ont eu une rude journée et ne tiennent plus le coup. J’ai la banane, de trop nombreuses fois j’ai espéré me réveiller en pleine nuit l’hiver dans la forêt pour observer ce phénomème, je ne pensais vraiment pas que ça allait être possible entouré de pollution lumineuse… et surtout de pouvoir le faire avec l’enfant encore&nbsp;éveillé&#8239;!</p>
  175. <p>16h50 (lendemain)&nbsp;: Je rédige ce billet après avoir développé les photos et publié une <a data-link-domain="media.larlet.fr" href="https://media.larlet.fr/2024-05-aurores-01.html">galerie dédiée</a>. J’ai un petit souci éthique au développement car il est très facile de pousser les curseurs des couleurs pour que ça fasse un effet très éloigné du réel. J’essaye de rester raisonnable tout en sachant que chaque moniteur affichera ses propres couleurs de toute façon. Les particules colorées qui ont atteint mon cœur ce soir là ne sont pas prêtes de s’estomper, je me sens encore&nbsp;euphorique.</p>
  176. <nav>
  177. <p>
  178. <a href="/david/2024/enthousiasme/"
  179. title="Liste de tous les articles 2024 associés à cette étiquette"
  180. rel="tag">#enthousiasme</a>
  181. <a href="/david/2024/parentalite/"
  182. title="Liste de tous les articles 2024 associés à cette étiquette"
  183. rel="tag">#parentalité</a>
  184. <a href="/david/2024/photographie/"
  185. title="Liste de tous les articles 2024 associés à cette étiquette"
  186. rel="tag">#photographie</a>
  187. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  188. </p>
  189. </nav>
  190. <nav>
  191. <p>
  192. <a rel="prev"
  193. href="/david/2024/05/05/"
  194. title="Publication précédente : Jour 2">← Précédent</a> •
  195. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  196. • <a rel="next"
  197. href="/david/2024/05/12/"
  198. title="Publication suivante : Alien">Suivant →</a>
  199. </p>
  200. </nav>
  201. <form action="/david/recherche/" method="get">
  202. <fieldset>
  203. <legend>Recherche</legend>
  204. <label for="input-search">Termes de votre recherche :</label>
  205. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  206. <input type="submit" value="Chercher">
  207. <p id="indexation-infos">
  208. <small>
  209. Seuls les contenus de ces 8 dernières années sont indexés.
  210. </small>
  211. </p>
  212. </fieldset>
  213. </form>
  214. <aside>
  215. <theme-toggle></theme-toggle>
  216. </aside>
  217. </article>
  218. <hr>
  219. <footer>
  220. <p>
  221. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  222. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  223. <a href="http://larlet.com"
  224. title="Go to my English profile"
  225. data-instant>Pro</a>
  226. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  227. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  228. </p>
  229. <template id="theme-selector">
  230. <form>
  231. <style type="text/css">
  232. fieldset div {
  233. text-align: center;
  234. }
  235. </style>
  236. <fieldset>
  237. <legend>Thème</legend>
  238. <div>
  239. <label>
  240. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  241. Auto
  242. </label>
  243. <label>
  244. <input type="radio" value="dark" name="chosen-color-scheme">
  245. Foncé
  246. </label>
  247. <label>
  248. <input type="radio" value="light" name="chosen-color-scheme">
  249. Clair
  250. </label>
  251. </div>
  252. </fieldset>
  253. </form>
  254. </template>
  255. </footer>
  256. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  257. <script>
  258. class ThemeToggle extends HTMLElement {
  259. constructor() {
  260. super()
  261. const themeSelectorTemplate = document.querySelector('#theme-selector')
  262. const form = themeSelectorTemplate.content.firstElementChild
  263. this.attachShadow({ mode: 'open' })
  264. this.shadowRoot.appendChild(form.cloneNode(true))
  265. }
  266. connectedCallback() {
  267. const form = this.shadowRoot.querySelector('form')
  268. form.addEventListener('change', (e) => {
  269. const chosenColorScheme = e.target.value
  270. localStorage.setItem('theme', chosenColorScheme)
  271. toggleTheme(chosenColorScheme)
  272. })
  273. const selectedTheme = localStorage.getItem('theme')
  274. if (selectedTheme && selectedTheme !== 'undefined') {
  275. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  276. }
  277. }
  278. }
  279. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  280. window.addEventListener('load', () => {
  281. let colorsLayer = undefined
  282. let hasDarkRules = false
  283. for (const styleSheet of Array.from(document.styleSheets)) {
  284. let mediaRules = []
  285. for (const layerRule of styleSheet.cssRules) {
  286. if (!(layerRule instanceof CSSLayerBlockRule)) {
  287. continue
  288. }
  289. if (layerRule.name === 'colors') {
  290. colorsLayer = layerRule
  291. }
  292. for (const cssRule of layerRule.cssRules) {
  293. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  294. continue
  295. }
  296. // WARNING: Safari does not have/supports `conditionText`.
  297. if (cssRule.conditionText) {
  298. if (cssRule.conditionText !== prefersColorSchemeDark) {
  299. continue
  300. }
  301. } else {
  302. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  303. continue
  304. }
  305. }
  306. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  307. }
  308. }
  309. // WARNING: do not try to insert a Rule to a styleSheet you are
  310. // currently iterating on, otherwise the browser will be stuck
  311. // in a infinite loop…
  312. for (const mediaRule of mediaRules) {
  313. // Safari requires the `0` second parameter (even if default).
  314. colorsLayer.insertRule(mediaRule.cssText, 0)
  315. hasDarkRules = true
  316. }
  317. }
  318. if (hasDarkRules) {
  319. if ('customElements' in window && !customElements.get('theme-toggle')) {
  320. customElements.define('theme-toggle', ThemeToggle)
  321. }
  322. }
  323. })
  324. </script>
  325. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  326. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  327. <script>
  328. tippy('[data-tippy]', {
  329. content(reference) {
  330. reference.addEventListener('click', (e) => e.preventDefault())
  331. return `
  332. <h3 lang="fr">
  333. <img src="${reference.dataset.favicon}" loading="lazy">
  334. <a href="${reference.dataset.source}"
  335. >Article sur ${reference.dataset.domain}</a></h3>
  336. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  337. <div class="tippy-links" lang="fr">
  338. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  339. </div>
  340. `
  341. },
  342. allowHTML: true,
  343. interactive: true,
  344. delay: [150, 700],
  345. hideOnClick: false
  346. })
  347. </script>
  348. <script type="module">
  349. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  350. const markObserver = new IntersectionObserver((entries, observer) => {
  351. const computedStyle = getComputedStyle(document.documentElement)
  352. const markBackground = computedStyle.getPropertyValue('--mark-background')
  353. for (const entry of entries) {
  354. if (entry.intersectionRatio === 0) continue
  355. const markElement = entry.target
  356. markElement.style.backgroundColor = 'inherit'
  357. const annotation = annotate(
  358. markElement, {
  359. type: 'highlight',
  360. multiline: true,
  361. color: markBackground,
  362. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  363. animate: false
  364. }
  365. )
  366. annotation.show()
  367. observer.unobserve(markElement)
  368. }
  369. }, {threshold: 1.0})
  370. for (const markElement of document.querySelectorAll('mark')) {
  371. markObserver.observe(markElement)
  372. }
  373. </script>
  374. </body>
  375. </html>