Compare commits

..

3 commits

6 changed files with 141 additions and 23 deletions

View file

@ -50,7 +50,6 @@
--pico-font-family-sans-serif: 'Nunito Sans', sans-serif, var(--pico-font-family-emoji);
--pico-card-sectioning-background-color: transparent;
--pico-typography-spacing-vertical: calc(1.5 * var(--pico-spacing));
--markup-color: rgb(194 198 207 / 100%);
}
@media only screen and (prefers-color-scheme: light) {
@ -58,6 +57,10 @@
--pico-background-color: rgb(247 249 252 / 100%);
--pico-card-background-color: rgb(255 255 255 / 100%);
--pico-card-sectioning-background-color: transparent;
--pico-code-color: inherit;
--color-codeblock-meta-background: rgb(255 255 255 / 100%);
--markup-color: rgb(194 198 207 / 100%);
}
.admonition.warning {
@ -72,6 +75,13 @@
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--pico-code-color: inherit;
--color-codeblock-meta-background: rgb(0 0 0 / 30%);
--markup-color: rgb(89 94 104 / 100%);
}
.admonition.warning {
--admonition-background-color: rgb(52 46 38 / 100%);
--admonition-border-color: rgb(255 208 143 / 100%);
@ -222,11 +232,6 @@ body {
}
}
@media (width >= 1024px) {
.metadata p {
display: inline;
}
}
/*
@ -256,6 +261,15 @@ main {
margin-top: 0.3em;
}
@media (width >= 1024px) {
.metadata p {
display: inline;
}
}
.tags i {
margin-inline-start: 0.5em;
}
.category a {
font-family: var(--pico-font-family-sans-serif);
@ -444,3 +458,47 @@ main {
}
}
}
/*
* Code blocks
*/
.highlight {
position: relative;
> div {
display: inline-block;
position: absolute;
right: 0;
top: 0;
padding: 0.5em 1.2em;
color: var(--pico-muted-color);
background-color: var(--color-codeblock-meta-background);
font-family: var(--pico-font-family-monospace);
font-size: 0.7em;
line-height: 1em;
border-end-start-radius: var(--pico-border-radius);
span {
border-inline-start: inset 1px var(--pico-muted-color);
padding-inline-start: 1em;
margin-inline-start: 1em;
cursor: pointer;
&::before {
content: "\ecd5";
font-family: "remixicon";
font-weight: normal;
margin-inline-end: 0.5em;
}
&.copied::before {
content: "\eb7b";
}
&.not-copied::before {
content: "\eca1";
}
}
}
}

View file

@ -2,21 +2,68 @@
// Listens for clicks on the mobile menu toggle and the main menu close toggle.
window.addEventListener('click', function(e) {
if (e.target.matches('#menu-toggle, #menu-toggle i')) {
openMenu();
} else if (e.target.matches('#menu-close, #menu-close i')) {
closeMenu();
} else if (e.target.matches('[data-action="copy"]')) {
copyCodeToClipboard(e);
}
});
function openMenu() {
const menu = document.getElementById('menu'),
menuToggle = document.getElementById('menu-toggle'),
body = document.body;
if (e.target.matches('#menu-toggle, #menu-toggle i')) {
menu.classList.toggle('active');
menu.ariaHidden = false;
menuToggle.ariaExpanded = true;
body.style.overflow = 'hidden';
menu.classList.toggle('active');
menu.ariaHidden = false;
menuToggle.ariaExpanded = true;
body.style.overflow = 'hidden';
}
function closeMenu() {
const menu = document.getElementById('menu'),
menuToggle = document.getElementById('menu-toggle'),
body = document.body;
menu.classList.remove('active');
menu.ariaHidden = true;
menuToggle.ariaExpanded = false;
body.style.overflow = 'auto';
}
function copyCodeToClipboard(e) {
const codeTag = e.target.closest('.highlight').querySelector("code");
if (!codeTag) return;
const tw = document.createTreeWalker(
codeTag,
NodeFilter.SHOW_TEXT,
(node) => {
if (node.parentElement.matches(".ln")) {
return NodeFilter.FILTER_REJECT;
}
return NodeFilter.FILTER_ACCEPT;
},
);
let acc = "";
while (tw.nextNode()) {
acc += tw.currentNode.textContent;
}
if (e.target.matches('#menu-close, #menu-close i')) {
menu.classList.remove('active');
menu.ariaHidden = true;
menuToggle.ariaExpanded = false;
body.style.overflow = 'auto';
}
});
navigator.clipboard.writeText(acc)
.then(() => {
e.target.classList.add('copied');
setTimeout(() => {
e.target.classList.remove('copied');
}, 5000);
})
.catch(() => {
e.target.classList.add('not-copied');
});
}

View file

@ -1,7 +1,7 @@
---
# vim: spell spelllang=en
title: 'Embracing Modern CSS'
slug: '008-embracing-modern-css'
slug: '8-embracing-modern-css'
date: '2025-07-06T14:29:26+02:00'
draft: false
categories:

View file

@ -1,7 +1,7 @@
---
# vim: spell spelllang=fr
title: 'Adopter un CSS moderne'
slug: '008-adopter-css-moderne'
slug: '8-adopter-css-moderne'
date: '2025-07-06T14:29:26+02:00'
draft: false
categories:

View file

@ -0,0 +1,13 @@
{{- $result := transform.HighlightCodeBlock . }}
<div class="highlight">
<div>
{{- .Type -}}
<span data-action="copy">copy</span>
</div>
<pre tabindex="0" class="chroma">
{{- /* chomp newline */ -}}
<code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ $result.Inner }}</code>
{{- /* chomp newline */ -}}
</pre>
</div>
{{- /* chomp trailing newline */ -}}

View file

@ -5,10 +5,10 @@
<header>
{{ with .GetTerms "categories" }}
<p class="category">
{{ range . }}
{{- range . }}
<a class="p-category" rel="tag" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ break }}
{{ end }}
{{- break }}
{{- end }}
</p>
{{ end }}
<h1 class="p-name">