Browse Source

Try to avoid the FODT on dark theme selection

“Flash Of Default Theme”

See https://mxb.dev/blog/color-theme-switcher/

I had to move the theme definition to the html element (vs. body) with the side-effect to have a consistent scrollbar color.
master
David Larlet 1 year ago
parent
commit
35655abca0

+ 17
- 23
david/2020/01/03/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -110,28 +126,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/01/06/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -128,28 +144,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/01/10/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -126,28 +142,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/01/15/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -128,28 +144,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/01/17/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -122,28 +138,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/01/22/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -142,28 +158,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/01/29/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -166,28 +182,6 @@ Comme un hameau paisible au pied d’une montagne.</p>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/01/31/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -130,28 +146,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/02/07/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -230,28 +246,6 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/02/14/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -193,28 +209,6 @@ Ensuite je survole régulièrement et je marque &quot;comme lu&quot; (sans les l
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/02/21/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -170,28 +186,6 @@ mark::after {
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/03/13/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -177,28 +193,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/03/20/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -157,28 +173,6 @@ mark::after {
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/03/27/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -189,28 +205,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/04/03/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -156,28 +172,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/04/10/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -166,28 +182,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/04/18/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -194,28 +210,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/05/18/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -135,28 +151,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/05/20/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -172,28 +188,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/05/26/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -168,28 +184,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/06/12/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -154,28 +170,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/06/18/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -170,28 +186,6 @@ Le trou où la bête panse ses plaies, non le repaire où elle fourbit ses griff
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/11/27/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -133,28 +149,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/12/15/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -143,28 +159,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/12/21/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -187,28 +203,6 @@ L’alternative c’est l’ermitage.</p>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/2020/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -163,28 +179,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

@@ -156,28 +172,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

+ 17
- 23
david/templates/base_2020.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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>
@@ -31,6 +31,22 @@
<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 type="text/javascript">
function toggleTheme(themeName) {
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)
}
</script>
{% block extra_head %}{% endblock %}
<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
{% block content %}{% endblock content %}
@@ -64,28 +80,6 @@
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
/* This is a work in progress with Anthony https://ricaud.me */

// TODISCUSS:
// 1. give a way for the user to close that chooser?
// 2. store preferences? Done using localStorage
// 3. create the template from scratch in JS?
// 4. how to make it generic? (no need for forced-dark/light existing rules)

// Results from a Poll: https://mastodon.social/@dav/104093540923157521
// Avoir un moyen de changer de thème d'un site à la main :
// 49% => Utile
// 23% => Pas utile
// 9% => So 2000
// 19% => Je veux le même
// After 24 hours and 43 votes
// A bit hard to interpret, I guess people wanting it found it useful too!

function toggleTheme(themeName) {
document.body.classList.toggle('forced-dark', themeName === 'dark')
document.body.classList.toggle('forced-light', themeName === 'light')
}

function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild

Loading…
Cancel
Save