100 changed files with 20001 additions and 15249 deletions
+ 202
- 154
david/2023/01/01/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Alleeez — David Larlet</title> | |||
| <meta name="description" content="Partons sur un rythme léger, au moins pour vérifier que la publication fonctionne pour 2023."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Alleeez | |||
| — David Larlet</title> | |||
| <meta name="description" content="Partons sur un rythme léger, au moins pour vérifier que la publication fonctionne pour 2023."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Alleeez</h1> | |||
| @@ -132,133 +182,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/02/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Lucidité — David Larlet</title> | |||
| <meta name="description" content="Seul face à la montagne je me sens bien parce que, comme l’a dit Reinhold Messner, elle n’est ni juste ni injuste, mais simplement dangereuse. Et face au danger, une certaine logique s’impose immédiatement quand il faut prendre les décisions qu’on considère les plus adaptées. En montagne, je ne doute jamais lorsque se présente un imprévu, mais dans le domaine plus rude des relations humaines, l’indécision me plonge dans un état de paralysie jusqu’à ce qu’il soit trop tard pour agir. Je dois admettre que je n’ai jamais su me faire au mode de fonctionnement des êtres humains, qu’ils soient bons, mauvais ou dangereux."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Lucidité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Seul face à la montagne je me sens bien parce que, comme l’a dit Reinhold Messner, elle n’est ni juste ni injuste, mais simplement dangereuse. Et face au danger, une certaine logique s’impose immédiatement quand il faut prendre les décisions qu’on considère les plus adaptées. En montagne, je ne doute jamais lorsque se présente un imprévu, mais dans le domaine plus rude des relations humaines, l’indécision me plonge dans un état de paralysie jusqu’à ce qu’il soit trop tard pour agir. Je dois admettre que je n’ai jamais su me faire au mode de fonctionnement des êtres humains, qu’ils soient bons, mauvais ou dangereux."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Lucidité</h1> | |||
| @@ -144,133 +194,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/03/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Préparation — David Larlet</title> | |||
| <meta name="description" content="C’est sûrement cette impatience qui m’a mis sur la voie d’un apprentissage autodidacte, car je n’ai jamais voulu attendre que l’un de mes camarades soit disponible pour faire une sortie, et je n’étais pas non plus enclin à élargir le cercle de mes amitiés. La solution était donc d’y aller seul et d’apprendre par moi-même en suivant le rythme de mes erreurs et de mes réussites. C’est comme ça que j’ai été amené à escalader mes premières voies sur roche ou sur glace, et que j’ai réalisé la majeure partie de mes ascensions. Le chemin a été long, certainement plus que si j’avais été entouré de camarades ou guidé par des mentors, car l’apprentissage en solitaire force à être très lucide sur les risques que l’on court et à ne jamais douter de ses capacités lorsqu’on souhaite relever certains défis. Quand on est livré à soi et rien qu’à soi, on intègre et on consolide plus fermement les connaissances qu’on acquiert au fur et à mesure, et on apprend à se servir de son imagination pour surmonter les difficultés. Mais je dois aussi reconnaître qu’arrivé à un certain niveau, on ne peut plus progresser en restant seul."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Préparation | |||
| — David Larlet</title> | |||
| <meta name="description" content="C’est sûrement cette impatience qui m’a mis sur la voie d’un apprentissage autodidacte, car je n’ai jamais voulu attendre que l’un de mes camarades soit disponible pour faire une sortie, et je n’étais pas non plus enclin à élargir le cercle de mes amitiés. La solution était donc d’y aller seul et d’apprendre par moi-même en suivant le rythme de mes erreurs et de mes réussites. C’est comme ça que j’ai été amené à escalader mes premières voies sur roche ou sur glace, et que j’ai réalisé la majeure partie de mes ascensions. Le chemin a été long, certainement plus que si j’avais été entouré de camarades ou guidé par des mentors, car l’apprentissage en solitaire force à être très lucide sur les risques que l’on court et à ne jamais douter de ses capacités lorsqu’on souhaite relever certains défis. Quand on est livré à soi et rien qu’à soi, on intègre et on consolide plus fermement les connaissances qu’on acquiert au fur et à mesure, et on apprend à se servir de son imagination pour surmonter les difficultés. Mais je dois aussi reconnaître qu’arrivé à un certain niveau, on ne peut plus progresser en restant seul."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Préparation</h1> | |||
| @@ -145,133 +195,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/04/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Rétrospectives — David Larlet</title> | |||
| <meta name="description" content="J’ai mauvaise conscience. Aujourd’hui, j’ai gagné de l’argent en récompense d’une activité inutile. J’ai monopolisé l’attention et l’admiration d’enfants et d’adultes pour n’avoir fait rien d’autre que mettre un pied devant l’autre un peu plus vite qu’ils ne le font."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Rétrospectives | |||
| — David Larlet</title> | |||
| <meta name="description" content="J’ai mauvaise conscience. Aujourd’hui, j’ai gagné de l’argent en récompense d’une activité inutile. J’ai monopolisé l’attention et l’admiration d’enfants et d’adultes pour n’avoir fait rien d’autre que mettre un pied devant l’autre un peu plus vite qu’ils ne le font."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Rétrospectives</h1> | |||
| @@ -148,133 +198,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/05/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Instanseul — David Larlet</title> | |||
| <meta name="description" content="Peut-être que la centralisation d’une identité mastodon est une hérésie. 🤔"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Instanseul | |||
| — David Larlet</title> | |||
| <meta name="description" content="Peut-être que la centralisation d’une identité mastodon est une hérésie. 🤔"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Instanseul</h1> | |||
| @@ -200,133 +250,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/06/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Toile — David Larlet</title> | |||
| <meta name="description" content="I realised when I think of something it doesn’t exist as a single entity. A thought is linked to a million other thoughts, to the past and to the future. I remember too much, relate too much, connect too much, and I project too much. I thought this was “normal” until I met my partner. She doesn’t think much about the future or the past – she’s a much happier person compared to me."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Toile | |||
| — David Larlet</title> | |||
| <meta name="description" content="I realised when I think of something it doesn’t exist as a single entity. A thought is linked to a million other thoughts, to the past and to the future. I remember too much, relate too much, connect too much, and I project too much. I thought this was “normal” until I met my partner. She doesn’t think much about the future or the past – she’s a much happier person compared to me."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Toile</h1> | |||
| @@ -169,133 +219,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/07/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Dette — David Larlet</title> | |||
| <meta name="description" content="La dette c’est un problème de riche. Ça arrive après, quand on a trouvé le bon produit, qu’on a trouvé sa cible, qu’on a prouvé qu’on était capable d’acquérir des clients. Là on aura aussi le financement qui va avec pour embaucher des ingénieurs qui vont refaire ce qui doit l’être, et éliminer une bonne partie des travaux qu’on avait remis à plus tard."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Dette | |||
| — David Larlet</title> | |||
| <meta name="description" content="La dette c’est un problème de riche. Ça arrive après, quand on a trouvé le bon produit, qu’on a trouvé sa cible, qu’on a prouvé qu’on était capable d’acquérir des clients. Là on aura aussi le financement qui va avec pour embaucher des ingénieurs qui vont refaire ce qui doit l’être, et éliminer une bonne partie des travaux qu’on avait remis à plus tard."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Dette</h1> | |||
| @@ -153,133 +203,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/08/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Partage — David Larlet</title> | |||
| <meta name="description" content="Maïa me pose la question suite à une discussion Mastodon autour de Rétrospectives :"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Partage | |||
| — David Larlet</title> | |||
| <meta name="description" content="Maïa me pose la question suite à une discussion Mastodon autour de Rétrospectives :"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Partage</h1> | |||
| @@ -144,133 +194,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/09/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Indépendant·e — David Larlet</title> | |||
| <meta name="description" content="2022 était ma troisième année à mon compte. Alors, pour fêter ça, j’avais envie de faire un petit bilan de ce qui s’est passé cette année là pour moi, du côté professionnel."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Indépendant·e | |||
| — David Larlet</title> | |||
| <meta name="description" content="2022 était ma troisième année à mon compte. Alors, pour fêter ça, j’avais envie de faire un petit bilan de ce qui s’est passé cette année là pour moi, du côté professionnel."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Indépendant·e</h1> | |||
| @@ -135,133 +185,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/10/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Qualité — David Larlet</title> | |||
| <meta name="description" content="Quiconque cherche à circonscrire une discipline en lui imposant un cadre ne cherche généralement qu’à protéger son œuvre, et il le fait en perpétuant les standards qui ont permis son émergence. Celui-ci essaie de convaincre les générations à venir qu’elles doivent suivre les règles qu’il a édictées si elles comptent parvenir à l’excellence. Mais, comme disait Charles Bukowski, « il est quatre heures et demie du matin, il sera toujours quatre heures et demie du matin… »."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Qualité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Quiconque cherche à circonscrire une discipline en lui imposant un cadre ne cherche généralement qu’à protéger son œuvre, et il le fait en perpétuant les standards qui ont permis son émergence. Celui-ci essaie de convaincre les générations à venir qu’elles doivent suivre les règles qu’il a édictées si elles comptent parvenir à l’excellence. Mais, comme disait Charles Bukowski, « il est quatre heures et demie du matin, il sera toujours quatre heures et demie du matin… »."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Qualité</h1> | |||
| @@ -158,133 +208,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/11/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Suspendu — David Larlet</title> | |||
| <meta name="description" content="On discute de moyens de monétiser et échanger des choses plus ou moins artistiques avec Fanny. Je me demande si le troc d’une œuvre contre une journée de développement dédiée à une asso/un produit militant·e serait envisageable."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Suspendu | |||
| — David Larlet</title> | |||
| <meta name="description" content="On discute de moyens de monétiser et échanger des choses plus ou moins artistiques avec Fanny. Je me demande si le troc d’une œuvre contre une journée de développement dédiée à une asso/un produit militant·e serait envisageable."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Suspendu</h1> | |||
| @@ -146,133 +196,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/12/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Masque — David Larlet</title> | |||
| <meta name="description" content="Port du masque. Le choix de réponse possible de David me surprend. Est-ce pour générer de la réaction ? ou est-ce par oubli de la normalité de porter un masque ? En tout cas pour Taiwan et le Japon, rien d’étonnant, de voir une personne porter un masque, que ce soit maintenant ou pre-COVID."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Masque | |||
| — David Larlet</title> | |||
| <meta name="description" content="Port du masque. Le choix de réponse possible de David me surprend. Est-ce pour générer de la réaction ? ou est-ce par oubli de la normalité de porter un masque ? En tout cas pour Taiwan et le Japon, rien d’étonnant, de voir une personne porter un masque, que ce soit maintenant ou pre-COVID."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Masque</h1> | |||
| @@ -153,133 +203,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/13/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Eaux grises — David Larlet</title> | |||
| <meta name="description" content="Le système SPAREAU réceptionne les eaux grises par écoulement gravitaire au point le plus bas de votre habitation (rez-de-chaussée, cave, sous-sol, vide sanitaire). Ces eaux sont ensuite réceptionnées puis filtrées avant d’être envoyées dans le(s) réservoir(s) des WC."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Eaux grises | |||
| — David Larlet</title> | |||
| <meta name="description" content="Le système SPAREAU réceptionne les eaux grises par écoulement gravitaire au point le plus bas de votre habitation (rez-de-chaussée, cave, sous-sol, vide sanitaire). Ces eaux sont ensuite réceptionnées puis filtrées avant d’être envoyées dans le(s) réservoir(s) des WC."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Eaux grises</h1> | |||
| @@ -133,133 +183,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/14/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Dépendances — David Larlet</title> | |||
| <meta name="description" content="I suspect one of the reasons for this is that Pinafore is written in Svelte v2 and Sapper – both of which are deprecated in favor of Svelte v3 and SvelteKit. Not only is there no migration path from Svelte v2 to v3, but there isn’t one from Sapper to SvelteKit either. (And on top of that, I had to fork Sapper pretty heavily.) Anyone making a bet on learning Pinafore’s tech stack is investing in a dead framework, so it’s not very attractive for new maintainers."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Dépendances | |||
| — David Larlet</title> | |||
| <meta name="description" content="I suspect one of the reasons for this is that Pinafore is written in Svelte v2 and Sapper – both of which are deprecated in favor of Svelte v3 and SvelteKit. Not only is there no migration path from Svelte v2 to v3, but there isn’t one from Sapper to SvelteKit either. (And on top of that, I had to fork Sapper pretty heavily.) Anyone making a bet on learning Pinafore’s tech stack is investing in a dead framework, so it’s not very attractive for new maintainers."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Dépendances</h1> | |||
| @@ -158,133 +208,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/15/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Snow Fall — David Larlet</title> | |||
| <meta name="description" content="Ten years ago this week, in December 2012, “Snow Fall: The Avalanche at Tunnel Creek,” an ambitious multimedia feature about a deadly avalanche in Washington State that year, took the journalism world by storm."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Snow Fall | |||
| — David Larlet</title> | |||
| <meta name="description" content="Ten years ago this week, in December 2012, “Snow Fall: The Avalanche at Tunnel Creek,” an ambitious multimedia feature about a deadly avalanche in Washington State that year, took the journalism world by storm."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Snow Fall</h1> | |||
| @@ -152,133 +202,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/16/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Chasse — David Larlet</title> | |||
| <meta name="description" content="Je me demande toujours quel est l’impact carbone de la chasse en terme de consommation de viande. Ou plutôt quels seraient les effets de bord d’une interdiction de la chasse."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Chasse | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je me demande toujours quel est l’impact carbone de la chasse en terme de consommation de viande. Ou plutôt quels seraient les effets de bord d’une interdiction de la chasse."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Chasse</h1> | |||
| @@ -139,133 +189,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/17/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Populaire — David Larlet</title> | |||
| <meta name="description" content="Plus j’en fais et plus je considère que le ski de fond est un sport populaire (dans le sens « pour le peuple »). Très peu d’équipement est nécessaire et même de la récupération permet de s’amuser, le façonnage des pistes requiert relativement peu d’énergies (fossiles), il est possible d’en faire même en étant très débutant·e et pas à l’aise avec les pentes. Ça devrait être une politique de santé publique !"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Populaire | |||
| — David Larlet</title> | |||
| <meta name="description" content="Plus j’en fais et plus je considère que le ski de fond est un sport populaire (dans le sens « pour le peuple »). Très peu d’équipement est nécessaire et même de la récupération permet de s’amuser, le façonnage des pistes requiert relativement peu d’énergies (fossiles), il est possible d’en faire même en étant très débutant·e et pas à l’aise avec les pentes. Ça devrait être une politique de santé publique !"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Populaire</h1> | |||
| @@ -192,133 +242,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/18/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Femmes — David Larlet</title> | |||
| <meta name="description" content="Ces dernières années, je communique avec davantage de femmes que d’hommes au cours de mes journées de travail. Ce qui a commencé comme une opportunité est maintenant un choix délibéré, je ne souhaite plus participer à des équipes uniquement constituées d’hommes. Ça peut — malheureusement — paraitre flippant exprimé ainsi et ce n’est qu’un premier pas sur ce chemin de traverse au sein d’un écosystème majoritairement masculin. Il ne suffit pas d’être différemment entouré, il faut aussi apprendre à se taire et écouter."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Femmes | |||
| — David Larlet</title> | |||
| <meta name="description" content="Ces dernières années, je communique avec davantage de femmes que d’hommes au cours de mes journées de travail. Ce qui a commencé comme une opportunité est maintenant un choix délibéré, je ne souhaite plus participer à des équipes uniquement constituées d’hommes. Ça peut — malheureusement — paraitre flippant exprimé ainsi et ce n’est qu’un premier pas sur ce chemin de traverse au sein d’un écosystème majoritairement masculin. Il ne suffit pas d’être différemment entouré, il faut aussi apprendre à se taire et écouter."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Femmes</h1> | |||
| @@ -136,133 +186,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/20/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Lettres — David Larlet</title> | |||
| <meta name="description" content="This is how it all started:"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Lettres | |||
| — David Larlet</title> | |||
| <meta name="description" content="This is how it all started:"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Lettres</h1> | |||
| @@ -146,133 +196,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/21/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 1 — David Larlet</title> | |||
| <meta name="description" content="L’objectif de cette sortie est de faire une répétition pour la sortie en groupe que je prépare. J’espérais pouvoir tester le matériel dans des conditions froides et il faisait malheureusement juste frais. À tel point que je doutais de pouvoir passer sur le lac, ce qui est (était ?) plutôt rare pour un 21 janvier…"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 1 | |||
| — David Larlet</title> | |||
| <meta name="description" content="L’objectif de cette sortie est de faire une répétition pour la sortie en groupe que je prépare. J’espérais pouvoir tester le matériel dans des conditions froides et il faisait malheureusement juste frais. À tel point que je doutais de pouvoir passer sur le lac, ce qui est (était ?) plutôt rare pour un 21 janvier…"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 1</h1> | |||
| @@ -159,133 +209,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/22/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 2 — David Larlet</title> | |||
| <meta name="description" content="Deux objectifs au réveil : minuter le rangement du camp et ne pas faire de feu."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 2 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Deux objectifs au réveil : minuter le rangement du camp et ne pas faire de feu."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 2</h1> | |||
| @@ -145,133 +195,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/23/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Déception — David Larlet</title> | |||
| <meta name="description" content="La perte d’un ami est un deuil."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Déception | |||
| — David Larlet</title> | |||
| <meta name="description" content="La perte d’un ami est un deuil."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Déception</h1> | |||
| @@ -148,133 +198,131 @@ aura été des plus malaisantes.</p> | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/24/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Capot — David Larlet</title> | |||
| <meta name="description" content="En tant que premier projet public depuis mon arrivée chez Gandi, je suis content d’avoir pu tester tant de nouvelles chose—nouvelles pour moi, nouvelles pour l’équipe… la possibilité d’apprendre des nouveaux concepts et des nouvelles pratiques, c’est l’une des principales raisons pour laquelle je pratique ce métier. L’autre raison c’est que ça me permet de réaliser des choses pratiques et utiles dans le respect des personnes qui les utiliseront."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Capot | |||
| — David Larlet</title> | |||
| <meta name="description" content="En tant que premier projet public depuis mon arrivée chez Gandi, je suis content d’avoir pu tester tant de nouvelles chose—nouvelles pour moi, nouvelles pour l’équipe… la possibilité d’apprendre des nouveaux concepts et des nouvelles pratiques, c’est l’une des principales raisons pour laquelle je pratique ce métier. L’autre raison c’est que ça me permet de réaliser des choses pratiques et utiles dans le respect des personnes qui les utiliseront."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Capot</h1> | |||
| @@ -134,133 +184,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/26/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Décentralisation — David Larlet</title> | |||
| <meta name="description" content="Je suis allé voir eQualitie hier, ça m’a fait rechercher toutes les initiatives que je connaissais de « suites » décentralisées :"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Décentralisation | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je suis allé voir eQualitie hier, ça m’a fait rechercher toutes les initiatives que je connaissais de « suites » décentralisées :"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Décentralisation</h1> | |||
| @@ -162,133 +212,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/30/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Lecture — David Larlet</title> | |||
| <meta name="description" content="Reading is a technology that works. And it works in part by immersing the reader in the text itself. The lack of video / music / pop-up ads / crypto tokens / mini-games aren’t a problem to be solve. The lack of those thing is the feature. Books are engaging precisely because they lack those things."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Lecture | |||
| — David Larlet</title> | |||
| <meta name="description" content="Reading is a technology that works. And it works in part by immersing the reader in the text itself. The lack of video / music / pop-up ads / crypto tokens / mini-games aren’t a problem to be solve. The lack of those thing is the feature. Books are engaging precisely because they lack those things."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Lecture</h1> | |||
| @@ -150,133 +200,131 @@ Mais il est terminé, et c’est le plus important.</p> | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/01/31/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Ennui — David Larlet</title> | |||
| <meta name="description" content="There’s a quote from a writer that has rattled around in my head for years (although I have never been able to source it, leading me to wonder if I accidentally made it up), but it went something like, “I only need a half hour a day to write. But I have to wait around an awful long time for that half hour to show up.” I think about this all the time—that the actual amount of time spent in doing something creative (writing, designing, making music, whathaveyou) is often buffered by hours and hours on either side by real—sometimes pleasant, sometimes infuriating—boredom."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Ennui | |||
| — David Larlet</title> | |||
| <meta name="description" content="There’s a quote from a writer that has rattled around in my head for years (although I have never been able to source it, leading me to wonder if I accidentally made it up), but it went something like, “I only need a half hour a day to write. But I have to wait around an awful long time for that half hour to show up.” I think about this all the time—that the actual amount of time spent in doing something creative (writing, designing, making music, whathaveyou) is often buffered by hours and hours on either side by real—sometimes pleasant, sometimes infuriating—boredom."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Ennui</h1> | |||
| @@ -147,133 +197,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/01/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Ombres — David Larlet</title> | |||
| <meta name="description" content="I’m not a film buff, so I write this from a layman’s perspective. But every time I watch something made before 2000, it looks so beautiful to me—not otherworldly or majestic, but beautiful in the way the world around me is beautiful. And I don’t think I’m just being nostalgic. […]"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Ombres | |||
| — David Larlet</title> | |||
| <meta name="description" content="I’m not a film buff, so I write this from a layman’s perspective. But every time I watch something made before 2000, it looks so beautiful to me—not otherworldly or majestic, but beautiful in the way the world around me is beautiful. And I don’t think I’m just being nostalgic. […]"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Ombres</h1> | |||
| @@ -142,133 +192,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/02/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Moment — David Larlet</title> | |||
| <meta name="description" content="Three weeks pass and that lonely draft sits around gathering dust, and by the time I remember it, the moment has passed. The conversation has moved on, and so the post is abandoned and eventually deleted."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Moment | |||
| — David Larlet</title> | |||
| <meta name="description" content="Three weeks pass and that lonely draft sits around gathering dust, and by the time I remember it, the moment has passed. The conversation has moved on, and so the post is abandoned and eventually deleted."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Moment</h1> | |||
| @@ -148,133 +198,131 @@ c’était comme si c’était hier — quelque chose comme ça.</p> | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/03/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Chargement — David Larlet</title> | |||
| <meta name="description" content="If you are familiar with how the web is built, what happened is pretty obvious: A website that over-relies on JavaScript to power its experience had its logic collide with one or more other errant pieces of logic that it summons. This created a deadlock."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Chargement | |||
| — David Larlet</title> | |||
| <meta name="description" content="If you are familiar with how the web is built, what happened is pretty obvious: A website that over-relies on JavaScript to power its experience had its logic collide with one or more other errant pieces of logic that it summons. This created a deadlock."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Chargement</h1> | |||
| @@ -153,133 +203,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/05/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Attente — David Larlet</title> | |||
| <meta name="description" content="Il y a l’attente qui rime avec patience. Le corps est prêt, le mental jamais tout à fait mais la confiance s’est progressivement construite. L’équipement a été soigneusement évalué et testé. Le corps est stressé mais en demande de libération. Le retenir, encore un peu, c’est la mauvaise expérience qui parle."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Attente | |||
| — David Larlet</title> | |||
| <meta name="description" content="Il y a l’attente qui rime avec patience. Le corps est prêt, le mental jamais tout à fait mais la confiance s’est progressivement construite. L’équipement a été soigneusement évalué et testé. Le corps est stressé mais en demande de libération. Le retenir, encore un peu, c’est la mauvaise expérience qui parle."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Attente</h1> | |||
| @@ -130,133 +180,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/07/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Madeleine — David Larlet</title> | |||
| <meta name="description" content="Ma madeleine du jour m’a été offerte par Aurélien qui pointait vers LightDock, ce qui m’a rappelé mon stage de master et mes premiers pas en Python. Où l’on remarque qu’il y a 18 ans, les list-comprehensions et les __methodes_magiques__ devaient être récentes…"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Madeleine | |||
| — David Larlet</title> | |||
| <meta name="description" content="Ma madeleine du jour m’a été offerte par Aurélien qui pointait vers LightDock, ce qui m’a rappelé mon stage de master et mes premiers pas en Python. Où l’on remarque qu’il y a 18 ans, les list-comprehensions et les __methodes_magiques__ devaient être récentes…"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Madeleine</h1> | |||
| @@ -162,133 +212,131 @@ Will it be used for war, porn or surveillance?</p> | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/08/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>TextcAIst — David Larlet</title> | |||
| <meta name="description" content="Still… this is amazing. If I have learned anything from this journey, it’s that the ability to generate high-quality, readable transcripts from podcast audio is going to be here soon. It’s not quite here yet—Whisper has quirks that make it better for searchable transcripts than actual reading, and it doesn’t identify speakers—but it’s perilously close now."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| TextcAIst | |||
| — David Larlet</title> | |||
| <meta name="description" content="Still… this is amazing. If I have learned anything from this journey, it’s that the ability to generate high-quality, readable transcripts from podcast audio is going to be here soon. It’s not quite here yet—Whisper has quirks that make it better for searchable transcripts than actual reading, and it doesn’t identify speakers—but it’s perilously close now."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>TextcAIst</h1> | |||
| @@ -148,133 +198,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/09/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Allumage — David Larlet</title> | |||
| <meta name="description" content="Démarrer un nouveau projet avec une nouvelle équipe est un sentiment qui m’est incroyable. J’ai passé mon année 2022 à faire — entre autres — des petits produits pour Scopyleft et je ne réalise que maintenant à quel point ça me permet de démarrer plus rapidement aujourd’hui pour un site que l’on fait avec Maïtané pour la Croix-Rouge."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Allumage | |||
| — David Larlet</title> | |||
| <meta name="description" content="Démarrer un nouveau projet avec une nouvelle équipe est un sentiment qui m’est incroyable. J’ai passé mon année 2022 à faire — entre autres — des petits produits pour Scopyleft et je ne réalise que maintenant à quel point ça me permet de démarrer plus rapidement aujourd’hui pour un site que l’on fait avec Maïtané pour la Croix-Rouge."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Allumage</h1> | |||
| @@ -145,133 +195,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/10/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 1 — David Larlet</title> | |||
| <meta name="description" content="Ma propre inadaptation physiologique au froid a aussi son origine dans la sélection naturelle. Je ne suis pas à ma place dans ce mandala glacial car mes ancêtres ont échappé à la sélection naturelle par la résistance au froid. L’homme descend de grands singes ayant vécu pendant des dizaines de millions d’années en Afrique tropicale. Conserver sa fraîcheur était bien plus nécessaire et ardu que de conserver sa chaleur, et nous avons donc peu de défenses corporelles contre le froid. Lorsque nos ancêtres ont quitté l’Afrique pour gagner l’Europe du Nord, ils ont emporté avec eux du feu et des vêtements, transportant ainsi les tropiques dans les régions tempérées et polaires. Cette ingéniosité leur a épargné bien des souffrances et des pertes, résultats incontestablement bénéfiques. Mais le confort est une dérobade face à la sélection naturelle. Notre aptitude à faire du feu et à nous vêtir nous condamne définitivement à ne pas être à notre place dans le monde hivernal."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 1 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Ma propre inadaptation physiologique au froid a aussi son origine dans la sélection naturelle. Je ne suis pas à ma place dans ce mandala glacial car mes ancêtres ont échappé à la sélection naturelle par la résistance au froid. L’homme descend de grands singes ayant vécu pendant des dizaines de millions d’années en Afrique tropicale. Conserver sa fraîcheur était bien plus nécessaire et ardu que de conserver sa chaleur, et nous avons donc peu de défenses corporelles contre le froid. Lorsque nos ancêtres ont quitté l’Afrique pour gagner l’Europe du Nord, ils ont emporté avec eux du feu et des vêtements, transportant ainsi les tropiques dans les régions tempérées et polaires. Cette ingéniosité leur a épargné bien des souffrances et des pertes, résultats incontestablement bénéfiques. Mais le confort est une dérobade face à la sélection naturelle. Notre aptitude à faire du feu et à nous vêtir nous condamne définitivement à ne pas être à notre place dans le monde hivernal."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 1</h1> | |||
| @@ -149,133 +199,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/11/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 2 — David Larlet</title> | |||
| <meta name="description" content="Finalement, réveil à 6 h au bruit des casseroles des voisin·es. C’est pas plus mal car ça me permet d’admirer la pureté du ciel étoilé par -15 °C, et puis ça me laisse le temps de me faire un gruau bien chaud avant de tout plier. Je ne suis pas encore à 100% mais c’est déjà beaucoup mieux que la veille. La bactérie ou le virus concerné doit se dire que je ne suis pas un hôte rentable."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 2 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Finalement, réveil à 6 h au bruit des casseroles des voisin·es. C’est pas plus mal car ça me permet d’admirer la pureté du ciel étoilé par -15 °C, et puis ça me laisse le temps de me faire un gruau bien chaud avant de tout plier. Je ne suis pas encore à 100% mais c’est déjà beaucoup mieux que la veille. La bactérie ou le virus concerné doit se dire que je ne suis pas un hôte rentable."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 2</h1> | |||
| @@ -219,133 +269,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/12/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 3 — David Larlet</title> | |||
| <meta name="description" content="Réveil vers 6 h après une nuit qui a débuté venteuse mais qui a ensuite été très reposante, les muscles tirent mais c’est normal. Je sors de mon duvet sans même avoir à trop m’habiller, il doit faire -4 °C."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 3 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Réveil vers 6 h après une nuit qui a débuté venteuse mais qui a ensuite été très reposante, les muscles tirent mais c’est normal. Je sors de mon duvet sans même avoir à trop m’habiller, il doit faire -4 °C."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 3</h1> | |||
| @@ -187,133 +237,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/13/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Livre — David Larlet</title> | |||
| <meta name="description" content="They both would have been ‘good enough’ for my purposes, but since I’m comfortable with Markdown, HTML, and CSS, using Pandoc made the most sense."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Livre | |||
| — David Larlet</title> | |||
| <meta name="description" content="They both would have been ‘good enough’ for my purposes, but since I’m comfortable with Markdown, HTML, and CSS, using Pandoc made the most sense."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Livre</h1> | |||
| @@ -133,133 +183,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/18/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Quiz — David Larlet</title> | |||
| <meta name="description" content="On aimerait pouvoir faire des quiz."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Quiz | |||
| — David Larlet</title> | |||
| <meta name="description" content="On aimerait pouvoir faire des quiz."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Quiz</h1> | |||
| @@ -167,133 +217,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/25/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Transmission — David Larlet</title> | |||
| <meta name="description" content="So I would. I would grab a coffee, sit down, and start reading. Often we’d share posts back and forth, or chat about some of the more interesting ones we had read. It was something we did that was never on accident… it was intentional, deliberate. It was a way, I think, of investing in ourselves while also acknowledging how much we still could learn from others."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Transmission | |||
| — David Larlet</title> | |||
| <meta name="description" content="So I would. I would grab a coffee, sit down, and start reading. Often we’d share posts back and forth, or chat about some of the more interesting ones we had read. It was something we did that was never on accident… it was intentional, deliberate. It was a way, I think, of investing in ourselves while also acknowledging how much we still could learn from others."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Transmission</h1> | |||
| @@ -167,133 +217,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/02/28/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>AlgoRSSithme — David Larlet</title> | |||
| <meta name="description" content="This is why RSS feeds are amazing: nobody can get into your feed or be prioritized in it unless you say so."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| AlgoRSSithme | |||
| — David Larlet</title> | |||
| <meta name="description" content="This is why RSS feeds are amazing: nobody can get into your feed or be prioritized in it unless you say so."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>AlgoRSSithme</h1> | |||
| @@ -168,133 +218,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/03/02/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 1 — David Larlet</title> | |||
| <meta name="description" content="Je profite de cette semaine de relâche pour aller faire un tour en forêt, dans des conditions qui s’annoncent être assez difficiles. Il faudra que je parle du manque de précision des prévisions météorologiques canadiennes à un moment."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 1 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je profite de cette semaine de relâche pour aller faire un tour en forêt, dans des conditions qui s’annoncent être assez difficiles. Il faudra que je parle du manque de précision des prévisions météorologiques canadiennes à un moment."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 1</h1> | |||
| @@ -162,133 +212,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/03/03/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 2 — David Larlet</title> | |||
| <meta name="description" content="Je me suis couché en ayant relativement chaud mais au cours de la nuit, la température est bien tombée avec le vent. Je me réveille vers 6h avec le visage plutôt frais et le trou du duvet bien gelé, je regarde la météo depuis l’intérieur de mon duvet et iels m’annoncent -15°C ressenti -20°C avec le vent. Pas pire. ERREUR."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 2 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je me suis couché en ayant relativement chaud mais au cours de la nuit, la température est bien tombée avec le vent. Je me réveille vers 6h avec le visage plutôt frais et le trou du duvet bien gelé, je regarde la météo depuis l’intérieur de mon duvet et iels m’annoncent -15°C ressenti -20°C avec le vent. Pas pire. ERREUR."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 2</h1> | |||
| @@ -191,133 +241,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/03/04/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Jour 3 — David Larlet</title> | |||
| <meta name="description" content="Je me réveille à 4h45. Tout est paisible. Je me réveille à 5h15 car j’ai le visage qui touche la toile de tente. Il vient de tomber cinq centimètres en une demi-heure ! Je secoue la tente car j’ai peur pour la sonde à neige qui me sert de mat de tipi — et qui commence à courber dangereusement — ne casse alors que je suis encore dans mon duvet. Je passe les prochains quarts d’heure à faire glisser la neige très collante lorsqu’elle s’accumule avant d’oublier toute notion de grasse matinée. Le bon côté, c’est qu’il ne fait pas trop froid."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Jour 3 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je me réveille à 4h45. Tout est paisible. Je me réveille à 5h15 car j’ai le visage qui touche la toile de tente. Il vient de tomber cinq centimètres en une demi-heure ! Je secoue la tente car j’ai peur pour la sonde à neige qui me sert de mat de tipi — et qui commence à courber dangereusement — ne casse alors que je suis encore dans mon duvet. Je passe les prochains quarts d’heure à faire glisser la neige très collante lorsqu’elle s’accumule avant d’oublier toute notion de grasse matinée. Le bon côté, c’est qu’il ne fait pas trop froid."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Jour 3</h1> | |||
| @@ -174,133 +224,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/03/13/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Traditions — David Larlet</title> | |||
| <meta name="description" content="Documents are documents. Books are books, recordings are recordings, and so on. As time has gone on, though, I’ve observed the probably obvious-to-others fact that Lore is the grease between the concrete blocks of knowledge, the carved step in an otherwise impossible-to-scale mountain, the small bit of powder sprinkled through a workspace to ensure sparks don’t fly and things don’t burn. Inconceivably odd to the outsider, but vital to the dedicated or intense practice of the craft."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Traditions | |||
| — David Larlet</title> | |||
| <meta name="description" content="Documents are documents. Books are books, recordings are recordings, and so on. As time has gone on, though, I’ve observed the probably obvious-to-others fact that Lore is the grease between the concrete blocks of knowledge, the carved step in an otherwise impossible-to-scale mountain, the small bit of powder sprinkled through a workspace to ensure sparks don’t fly and things don’t burn. Inconceivably odd to the outsider, but vital to the dedicated or intense practice of the craft."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Traditions</h1> | |||
| @@ -180,133 +230,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/05/01/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Long cours — David Larlet</title> | |||
| <meta name="description" content="Je suis avec beaucoup d’intérêt les réflexions d’Éric D. qui envisage un périple du milieu de la France au nord de la Norvège. Ça me fait envisager ce type d’aventure sur plusieurs mois, ce qui me retient, ce que j’emporterais, ce que j’ai appris de mes propres sorties et qui pourrait me servir."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Long cours | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je suis avec beaucoup d’intérêt les réflexions d’Éric D. qui envisage un périple du milieu de la France au nord de la Norvège. Ça me fait envisager ce type d’aventure sur plusieurs mois, ce qui me retient, ce que j’emporterais, ce que j’ai appris de mes propres sorties et qui pourrait me servir."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Long cours</h1> | |||
| @@ -143,133 +193,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/05/05/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>AÏe — David Larlet</title> | |||
| <meta name="description" content="Honestly, at this point using ChatGPT in the way that I do feels like a massively unfair competitive advantage. I’m not worried about AI taking people’s jobs: I’m worried about the impact of AI-enhanced developers like myself."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| AÏe | |||
| — David Larlet</title> | |||
| <meta name="description" content="Honestly, at this point using ChatGPT in the way that I do feels like a massively unfair competitive advantage. I’m not worried about AI taking people’s jobs: I’m worried about the impact of AI-enhanced developers like myself."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>AÏe</h1> | |||
| @@ -182,133 +232,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/05/06/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>SudWeb — David Larlet</title> | |||
| <meta name="description" content="12 mars 2013 :"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| SudWeb | |||
| — David Larlet</title> | |||
| <meta name="description" content="12 mars 2013 :"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>SudWeb</h1> | |||
| @@ -201,133 +251,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/06/06/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Réponse(s) — David Larlet</title> | |||
| <meta name="description" content="The structures of our network commons have concentrated our responses to the forces already pressing against our livelihoods and children and futures. Within their engagement-optimized interfaces, we’ve built ourselves into a standing wave: Abusive posts became network-wide events that require a response not only from moderating authorities, but from every user."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Réponse(s) | |||
| — David Larlet</title> | |||
| <meta name="description" content="The structures of our network commons have concentrated our responses to the forces already pressing against our livelihoods and children and futures. Within their engagement-optimized interfaces, we’ve built ourselves into a standing wave: Abusive posts became network-wide events that require a response not only from moderating authorities, but from every user."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Réponse(s)</h1> | |||
| @@ -140,133 +190,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/06/12/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Apocalypse — David Larlet</title> | |||
| <meta name="description" content="Lorsque je reste assis ou marche dans la forêt, je ne suis pas un « sujet » en train d’observer des « objets ». En entrant dans le mandala, je suis pris dans des réseaux de communication, des maillages de relations. Que j’en sois conscient ou non, je mets en branle ces réseaux en effarouchant un cerf, en faisant sursauter un tamia ou en marchant sur une feuille verte. Il n’est pas possible d’observer le milieu en en étant dissocié."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Apocalypse | |||
| — David Larlet</title> | |||
| <meta name="description" content="Lorsque je reste assis ou marche dans la forêt, je ne suis pas un « sujet » en train d’observer des « objets ». En entrant dans le mandala, je suis pris dans des réseaux de communication, des maillages de relations. Que j’en sois conscient ou non, je mets en branle ces réseaux en effarouchant un cerf, en faisant sursauter un tamia ou en marchant sur une feuille verte. Il n’est pas possible d’observer le milieu en en étant dissocié."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Apocalypse</h1> | |||
| @@ -140,133 +190,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/06/19/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Village — David Larlet</title> | |||
| <meta name="description" content="Because they are precious, it’s important to understand what makes a village a village, and what kills the village."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Village | |||
| — David Larlet</title> | |||
| <meta name="description" content="Because they are precious, it’s important to understand what makes a village a village, and what kills the village."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Village</h1> | |||
| @@ -139,133 +189,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/06/26/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Particules — David Larlet</title> | |||
| <meta name="description" content="La mémoire est la source de la libération, et l’oubli est la racine de l’exil."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Particules | |||
| — David Larlet</title> | |||
| <meta name="description" content="La mémoire est la source de la libération, et l’oubli est la racine de l’exil."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Particules</h1> | |||
| @@ -166,133 +216,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/07/02/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Perles — David Larlet</title> | |||
| <meta name="description" content="Mon travail de scientifique m’a appris comment les gens construisent des théories pour avoir le sentiment de contrôler leur environnement."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Perles | |||
| — David Larlet</title> | |||
| <meta name="description" content="Mon travail de scientifique m’a appris comment les gens construisent des théories pour avoir le sentiment de contrôler leur environnement."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Perles</h1> | |||
| @@ -211,133 +261,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/07/28/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>France — David Larlet</title> | |||
| <meta name="description" content="Si vous êtes venus pour m’aider, vous perdez votre temps. Mais si vous êtes venus parce que votre libération est liée à la mienne, alors travaillons ensemble."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| France | |||
| — David Larlet</title> | |||
| <meta name="description" content="Si vous êtes venus pour m’aider, vous perdez votre temps. Mais si vous êtes venus parce que votre libération est liée à la mienne, alors travaillons ensemble."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>France</h1> | |||
| @@ -138,133 +188,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/09/06/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Retour — David Larlet</title> | |||
| <meta name="description" content="The app will eventually become obsolete. It’s the plain text files I create that are designed to last. Who knows if anyone will want to read them besides me, but future me is enough of an audience to make it worthwhile."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Retour | |||
| — David Larlet</title> | |||
| <meta name="description" content="The app will eventually become obsolete. It’s the plain text files I create that are designed to last. Who knows if anyone will want to read them besides me, but future me is enough of an audience to make it worthwhile."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Retour</h1> | |||
| @@ -151,133 +201,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/09/07/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Conteur — David Larlet</title> | |||
| <meta name="description" content="Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant — comme la fin de semaine dernière — on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, anis gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour écrire taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que c’est possible (cache) avec +++ !"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Conteur | |||
| — David Larlet</title> | |||
| <meta name="description" content="Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant — comme la fin de semaine dernière — on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, anis gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour écrire taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que c’est possible (cache) avec +++ !"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Conteur</h1> | |||
| @@ -159,133 +209,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/09/08/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Char 2 — David Larlet</title> | |||
| <meta name="description" content="Je voulais le moins d’électronique possible et plutôt prendre un vieux véhicule robuste qui me permette de sortir d’un banc de neige et peut-être à terme de la ville."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Char 2 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je voulais le moins d’électronique possible et plutôt prendre un vieux véhicule robuste qui me permette de sortir d’un banc de neige et peut-être à terme de la ville."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Char 2</h1> | |||
| @@ -169,133 +219,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/09/09/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Blogroll — David Larlet</title> | |||
| <meta name="description" content="Je lie cinq blogs personnels, choisis arbitrairement et sans hiérarchie, avec une phrase sur pourquoi ils me sont importants, en choisissant un billet précis que j’ai aimé y trouver […]"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Blogroll | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je lie cinq blogs personnels, choisis arbitrairement et sans hiérarchie, avec une phrase sur pourquoi ils me sont importants, en choisissant un billet précis que j’ai aimé y trouver […]"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Blogroll</h1> | |||
| @@ -141,133 +191,131 @@ | |||
| </nav> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 203
- 155
david/2023/accompagnement/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #accompagnement — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #accompagnement"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #accompagnement | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #accompagnement"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #accompagnement</h1> | |||
| </header> | |||
| @@ -202,7 +252,7 @@ | |||
| </ul> | |||
| <p>Je ne sais pas si c’est le fait de résider sur ces territoires mais les deux m’ont pas mal affecté. L’héritage de la colonisation en étant sur les lieux colonisés est encore plus difficile à porter.</p> | |||
| <hr /> | |||
| <p>Film de la semaine : <a href="https://en.wikipedia.org/wiki/The_Menu_(2022_film)">The Menu</a> (essayez de ne pas vous divulgâcher…).</p> | |||
| <p>Film de la semaine : <a href="https://en.wikipedia.org/wiki/The_Menu_(2022_film">The Menu</a>) (essayez de ne pas vous divulgâcher…).</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| @@ -364,133 +414,131 @@ Mais il est terminé, et c’est le plus important.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/amadou/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #amadou — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #amadou"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #amadou | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #amadou"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #amadou</h1> | |||
| </header> | |||
| @@ -97,133 +147,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/attention/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #attention — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #attention"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #attention | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #attention"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #attention</h1> | |||
| </header> | |||
| @@ -177,133 +227,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/aventure/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #aventure — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #aventure"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #aventure | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #aventure"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #aventure</h1> | |||
| </header> | |||
| @@ -660,133 +710,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/complexite/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #complexité — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #complexité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #complexité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #complexité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #complexité</h1> | |||
| </header> | |||
| @@ -262,133 +312,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/confiance/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #confiance — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #confiance"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #confiance | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #confiance"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #confiance</h1> | |||
| </header> | |||
| @@ -243,133 +293,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/confidentialite/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #confidentialité — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #confidentialité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #confidentialité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #confidentialité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #confidentialité</h1> | |||
| </header> | |||
| @@ -218,133 +268,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/courage/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #courage — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #courage"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #courage | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #courage"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #courage</h1> | |||
| </header> | |||
| @@ -279,133 +329,131 @@ aura été des plus malaisantes.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/decentralisation/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #décentralisation — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #décentralisation"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #décentralisation | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #décentralisation"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #décentralisation</h1> | |||
| </header> | |||
| @@ -280,133 +330,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/don/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #don — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #don"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #don | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #don"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #don</h1> | |||
| </header> | |||
| @@ -136,133 +186,131 @@ aura été des plus malaisantes.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/eau/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #eau — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #eau"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #eau | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #eau"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #eau</h1> | |||
| </header> | |||
| @@ -178,133 +228,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/ecriture/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #écriture — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #écriture"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #écriture | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #écriture"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #écriture</h1> | |||
| </header> | |||
| @@ -265,133 +315,131 @@ c’était comme si c’était hier — quelque chose comme ça.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/foret/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #forêt — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #forêt"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #forêt | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #forêt"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #forêt</h1> | |||
| </header> | |||
| @@ -655,133 +705,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/gafam/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #gafam — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #gafam"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #gafam | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #gafam"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #gafam</h1> | |||
| </header> | |||
| @@ -159,133 +209,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/gratitude/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #gratitude — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #gratitude"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #gratitude | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #gratitude"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #gratitude</h1> | |||
| </header> | |||
| @@ -447,133 +497,131 @@ Will it be used for war, porn or surveillance?</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/incompetence/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #incompétence — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #incompétence"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #incompétence | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #incompétence"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #incompétence</h1> | |||
| </header> | |||
| @@ -224,133 +274,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/index.html
View File
| @@ -1,58 +1,108 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Publications sporadiques 2023 — David Larlet</title> | |||
| <meta name="description" content="Archives 2023 des publications de David Larlet"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Publications sporadiques 2023 | |||
| — David Larlet</title> | |||
| <meta name="description" content="Archives 2023 des publications de David Larlet"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| </script> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications sporadiques 2023</h1> | |||
| </header> | |||
| @@ -229,133 +279,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/intimite/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #intimité — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #intimité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #intimité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #intimité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #intimité</h1> | |||
| </header> | |||
| @@ -157,133 +207,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/livre/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #livre — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #livre"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #livre | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #livre"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #livre</h1> | |||
| </header> | |||
| @@ -155,133 +205,131 @@ Mais il est terminé, et c’est le plus important.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/masque/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #masque — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #masque"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #masque | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #masque"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #masque</h1> | |||
| </header> | |||
| @@ -113,133 +163,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/mastodon/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #mastodon — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #mastodon"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #mastodon | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #mastodon"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #mastodon</h1> | |||
| </header> | |||
| @@ -160,133 +210,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/nostalgie/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #nostalgie — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #nostalgie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #nostalgie | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #nostalgie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #nostalgie</h1> | |||
| </header> | |||
| @@ -225,133 +275,131 @@ Will it be used for war, porn or surveillance?</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/parentalite/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #parentalité — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #parentalité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #parentalité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #parentalité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #parentalité</h1> | |||
| </header> | |||
| @@ -264,133 +314,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/partage/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #partage — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #partage"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #partage | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #partage"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #partage</h1> | |||
| </header> | |||
| @@ -168,133 +218,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/patriarcat/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #patriarcat — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #patriarcat"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #patriarcat | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #patriarcat"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #patriarcat</h1> | |||
| </header> | |||
| @@ -96,133 +146,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/photographie/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #photographie — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #photographie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #photographie | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #photographie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #photographie</h1> | |||
| </header> | |||
| @@ -226,133 +276,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/propriete/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #propriété — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #propriété"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #propriété | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #propriété"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #propriété</h1> | |||
| </header> | |||
| @@ -93,133 +143,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/psychologie/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #psychologie — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #psychologie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #psychologie | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #psychologie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #psychologie</h1> | |||
| </header> | |||
| @@ -115,133 +165,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/qualite/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #qualité — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #qualité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #qualité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #qualité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #qualité</h1> | |||
| </header> | |||
| @@ -174,133 +224,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/recherche/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #recherche — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #recherche"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #recherche | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #recherche"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #recherche</h1> | |||
| </header> | |||
| @@ -419,133 +469,131 @@ c’était comme si c’était hier — quelque chose comme ça.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/recyclage/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #recyclage — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #recyclage"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #recyclage | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #recyclage"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #recyclage</h1> | |||
| </header> | |||
| @@ -121,133 +171,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/reponse/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #réponse — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #réponse"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #réponse | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #réponse"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #réponse</h1> | |||
| </header> | |||
| @@ -139,133 +189,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/scopyleft/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #scopyleft — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #scopyleft"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #scopyleft | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #scopyleft"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #scopyleft</h1> | |||
| </header> | |||
| @@ -111,133 +161,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 203
- 155
david/2023/simplicite/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #simplicité — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #simplicité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #simplicité | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #simplicité"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #simplicité</h1> | |||
| </header> | |||
| @@ -152,7 +202,7 @@ | |||
| </ul> | |||
| <p>Je ne sais pas si c’est le fait de résider sur ces territoires mais les deux m’ont pas mal affecté. L’héritage de la colonisation en étant sur les lieux colonisés est encore plus difficile à porter.</p> | |||
| <hr /> | |||
| <p>Film de la semaine : <a href="https://en.wikipedia.org/wiki/The_Menu_(2022_film)">The Menu</a> (essayez de ne pas vous divulgâcher…).</p> | |||
| <p>Film de la semaine : <a href="https://en.wikipedia.org/wiki/The_Menu_(2022_film">The Menu</a>) (essayez de ne pas vous divulgâcher…).</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| @@ -247,133 +297,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/sociologie/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #sociologie — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #sociologie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #sociologie | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #sociologie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #sociologie</h1> | |||
| </header> | |||
| @@ -482,133 +532,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/solastalgia/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #solastalgia — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #solastalgia"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #solastalgia | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #solastalgia"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #solastalgia</h1> | |||
| </header> | |||
| @@ -197,133 +247,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/sport/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #sport — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #sport"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #sport | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #sport"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #sport</h1> | |||
| </header> | |||
| @@ -208,133 +258,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/technique/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #technique — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #technique"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #technique | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #technique"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #technique</h1> | |||
| </header> | |||
| @@ -412,133 +462,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/traces/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #traces — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #traces"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #traces | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #traces"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #traces</h1> | |||
| </header> | |||
| @@ -344,133 +394,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/tristesse/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #tristesse — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #tristesse"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #tristesse | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #tristesse"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #tristesse</h1> | |||
| </header> | |||
| @@ -216,133 +266,131 @@ aura été des plus malaisantes.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 202
- 154
david/2023/viande/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #viande — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #viande"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #viande | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #viande"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #viande</h1> | |||
| </header> | |||
| @@ -99,133 +149,131 @@ | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 203
- 155
david/2023/web/index.html
View File
| @@ -1,64 +1,114 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Tag #web — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #web"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Tag #web | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #web"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/triplicate_t3_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" | |||
| data-instant-intensity="viewport-all"> | |||
| <header> | |||
| <h1>Publications relatives au tag #web</h1> | |||
| </header> | |||
| @@ -182,7 +232,7 @@ | |||
| </ul> | |||
| <p>Je ne sais pas si c’est le fait de résider sur ces territoires mais les deux m’ont pas mal affecté. L’héritage de la colonisation en étant sur les lieux colonisés est encore plus difficile à porter.</p> | |||
| <hr /> | |||
| <p>Film de la semaine : <a href="https://en.wikipedia.org/wiki/The_Menu_(2022_film)">The Menu</a> (essayez de ne pas vous divulgâcher…).</p> | |||
| <p>Film de la semaine : <a href="https://en.wikipedia.org/wiki/The_Menu_(2022_film">The Menu</a>) (essayez de ne pas vous divulgâcher…).</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| @@ -404,133 +454,131 @@ Mais il est terminé, et c’est le plus important.</p> | |||
| </main> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil" | |||
| ><svg class="icon icon-home"> | |||
| <use | |||
| xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home" | |||
| ></use> | |||
| </svg> | |||
| Accueil</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS" | |||
| ><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant | |||
| ><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel" | |||
| ><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a | |||
| > | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr | |||
| class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340" | |||
| ><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr | |||
| > | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <nobr> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| <svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use> | |||
| </svg> | |||
| Accueil</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="/david/log/" title="Accès au flux RSS"> | |||
| <svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use> | |||
| </svg> | |||
| Suivre</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant> | |||
| <svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use> | |||
| </svg> | |||
| Pro</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"> | |||
| <svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use> | |||
| </svg> | |||
| Email</a> | |||
| </nobr> | |||
| • | |||
| <nobr> | |||
| <abbr class="nowrap" | |||
| title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"> | |||
| <svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use> | |||
| </svg> | |||
| Légal</abbr> | |||
| </nobr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <legend> | |||
| <svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </svg> | |||
| Thème | |||
| </legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 0
- 0
david/blogroll/index.html
View File
Some files were not shown because too many files changed in this diff
Loading…