feat(layout): misc improvements to markup and css

assets/static/css/bcarlin.css

@@ -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";
+      }
+    }
+  }
+}

assets/static/js/bcarlin.js

@@ -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.classList.toggle('active');
+  menu.ariaHidden = false;
-    menu.ariaHidden = false;
+  menuToggle.ariaExpanded = true;
-    menuToggle.ariaExpanded = true;
+  body.style.overflow = 'hidden';
-    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')) {
+  navigator.clipboard.writeText(acc)
-    menu.classList.remove('active');
+    .then(() => {
-    menu.ariaHidden = true;
+      e.target.classList.add('copied');
-    menuToggle.ariaExpanded = false;
+
-    body.style.overflow = 'auto';
+      setTimeout(() => {
-  }
+        e.target.classList.remove('copied');
-});
+      }, 5000);
+    })
+    .catch(() => {
+      e.target.classList.add('not-copied');
+    });
+}

content/blog/008-embracing-modern-css/index.en.md

@@ -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: 

content/blog/008-embracing-modern-css/index.fr.md

@@ -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:

layouts/_markup/render-codeblock.html

@@ -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 */ -}}

layouts/blog/single.html

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