Best styling codeblock

config.toml

@@ -176,6 +176,13 @@ navbar_items = [
     ] },
 ]
 
+# Specify light/dark colorscheme
+# Supported values:
+# "auto" (use preference set by browser)
+# "dark" (dark background, light foreground)
+# "light" (light background, dark foreground) (default)
+colorscheme = "light"
+
 [extra.favicon]
 favicon_16x16 = "/icons/favicon-16x16.png"
 favicon_32x32 = "/icons/favicon-32x32.png"

sass/deep-thought.sass

@@ -7,6 +7,14 @@
 $family-sans-serif: "Jost", sans-serif;
 $footer-padding: 1.0rem 2.5rem;
 
+@mixin base_dark
+    body,
+    img,
+    picture,
+    video,
+    pre
+        filter: invert(1) hue-rotate(180deg);
+
 html
     scroll-behavior: smooth;
 
@@ -17,16 +25,30 @@ body
     min-height: 100vh;
 
 
-body[theme="dark"]
-    filter: invert(1) hue-rotate(180deg);
+html[theme="dark"]
+    @include base_dark()
+
 
+html[theme="auto"]
+    @media (prefers-color-scheme: dark)
+        @include base_dark()
+
 
 section
     flex: 1;
 
-
-img[theme="dark"],
-picture[theme="dark"],
-video[theme="dark"],
-pre[theme="dark"]
-    filter: invert(1) hue-rotate(180deg);
+.content pre 
+    table 
+        td, th
+            border: none;
+            padding-bottom: 0px;
+        td:nth-of-type(1)
+            text-align: center;
+            user-select: none;
+    mark
+        // If you want your highlights to take the full width.
+        display: block;
+
+.content pre[data-linenos]
+    padding-left: 1em;
+    padding-right: 1em;

static/js/site.js

@@ -170,13 +170,17 @@ function search() {
   );
 }
 
+function setTheme(color) {
+    document.documentElement.setAttribute("theme", color);
+    document.getElementById("dark-mode").setAttribute("title", "Switch to "+color+" theme");
+}
+
 function documentReadyCallback() {
 
   if (localStorage.getItem("theme") === "dark") {
-    document.body.setAttribute("theme", "dark");
-    document.querySelectorAll("img, picture, video, pre").forEach(img => img.setAttribute("theme", "dark"));
-    document.querySelectorAll(".vimeo, .youtube, .chart").forEach(video => video.setAttribute("theme", "dark"));
-    document.getElementById("dark-mode").setAttribute("title", "Switch to light theme");
+    setTheme("dark");
+  } else if (localStorage.getItem("theme") === "light") {
+    setTheme("light");
   }
 
   document.querySelector(".navbar-burger").addEventListener("click", () => {
@@ -215,23 +219,16 @@ function documentReadyCallback() {
   });
 
   document.getElementById("dark-mode").addEventListener("click", () => {
+    const theme = document.documentElement.getAttribute("theme");
+    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
     if (
-      localStorage.getItem("theme") == null ||
-      localStorage.getItem("theme") == "light"
+      theme === "light" || theme === null || (theme === "auto" && !isDarkMode)
     ) {
       localStorage.setItem("theme", "dark");
-      document.body.setAttribute("theme", "dark");
-      document.querySelectorAll("img, picture, video, pre").forEach(img => img.setAttribute("theme", "dark"));
-      document.querySelectorAll(".vimeo, .youtube, .chart").forEach(video => video.setAttribute("theme", "dark"));
-
-      document.getElementById("dark-mode").setAttribute("title", "Switch to light theme");
+      setTheme("dark");
     } else {
       localStorage.setItem("theme", "light");
-      document.body.removeAttribute("theme", "dark");
-      document.querySelectorAll("img, picture, video, pre").forEach(img => img.removeAttribute("theme", "dark"))
-      document.querySelectorAll(".vimeo, .youtube, .chart").forEach(video => video.removeAttribute("theme", "dark"));
-
-      document.getElementById("dark-mode").setAttribute("title", "Switch to dark theme");
+      setTheme("light");
     }
   });
 

templates/404.html

@@ -10,9 +10,7 @@ <h1 class="title is-2">HTTP 404</h1>
         It seems you are looking for something that I don't have.
       </p>
       {% if config.extra.author.avatar %}
-      <figure class="image is-flex is-justify-content-center is-align-items-center">
-        <img class="is-rounded" src="{{ config.extra.author.avatar }}" style="max-width: 192px" />
-      </figure>
+        {% include 'author_avatar.html' %}
       {% endif %}
       {{ macros:: social_links( social_config=config.extra.social) }}
       <p class="my-6">

templates/author_avatar.html

@@ -0,0 +1,4 @@
+<figure class="image is-flex is-justify-content-center is-align-items-center">
+  {% set image = resize_image(path=config.extra.author.avatar, width=192, format="webp", op="fit_width") %}
+  <img class="is-rounded" src="{{ image.url }}" style="max-width: 192px" alt="Avatar"/>
+</figure>

templates/base.html

@@ -1,14 +1,18 @@
 {% import 'macros.html' as macros %}
 
 <!DOCTYPE html>
-<html lang="{{lang}}">
+<html lang="{{lang}}" {% if config.extra.colorscheme %}theme="{{ config.extra.colorscheme }}"{% endif %}>
 
 <head>
   <meta charset="utf-8" />
   <meta content="width=device-width, initial-scale=1" name="viewport" />
   <meta content="#ffffff" name="theme-color" />
   <meta content="#da532c" name="msapplication-TileColor" />
 
+  <script>
+    if (localStorage.getItem("theme")) document.documentElement.setAttribute("theme", localStorage.getItem("theme"));
+  </script>
+
   {% if config.extra.favicon.webmanifest %}
   <link href='{{ config.extra.favicon.webmanifest }}' rel="manifest" />
   {% endif %}
@@ -33,8 +37,10 @@
   <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" integrity="sha384-oGm59HWAkwO32h2w8u0B98wKBZJwd6MbWtAJwQKCTffZjOXHXrnyv9Syjovgc+UV" crossorigin="anonymous">
   {% endif %}
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1.9.1/css/academicons.min.css" integrity="sha384-FIue+PI4SsI9XfHCz8dBLg33b0c1fMJgNU3X//L26FYbGnlSEfWmNT7zgWc2N9b6" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
+  <link rel="preload" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1.9.1/css/academicons.min.css" as="style" integrity="sha384-FIue+PI4SsI9XfHCz8dBLg33b0c1fMJgNU3X//L26FYbGnlSEfWmNT7zgWc2N9b6" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1.9.1/css/academicons.min.css" integrity="sha384-FIue+PI4SsI9XfHCz8dBLg33b0c1fMJgNU3X//L26FYbGnlSEfWmNT7zgWc2N9b6" crossorigin="anonymous"></noscript>
+  <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" as="style" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"></noscript>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" integrity="sha384-IJLmUY0f1ePPX6uSCJ9Bxik64/meJmjSYD7dHaJqTXXEBE4y+Oe9P2KBZa/z7p0Q" crossorigin="anonymous">
   <link href="{{ get_url(path='deep-thought.css') }}" rel="stylesheet" />
   {% block user_custom_stylesheet %}
@@ -119,11 +125,12 @@
     <div class="modal-background"></div>
     <div class="modal-card">
       <header class="modal-card-head">
-        <p class="modal-card-title">Search</p>
+        <h2 class="modal-card-title">Search</h2>
       </header>
       <section class="modal-card-body">
         <div class="field mb-2">
           <div class="control">
+            <label for="search" class="sr-only">Search text</label>
             <input class="input" id="search" placeholder="Search this website." type="search" />
           </div>
         </div>

templates/index.html

@@ -5,11 +5,9 @@
   <div class="container">
     <div class="has-text-centered">
       <h1 class="title is-2">{{ section.title }}</h1>
-      <p class="subtitle is-4">{{ section.description }}</p>
+      <h2 class="subtitle is-4">{{ section.description }}</h2>
       {% if config.extra.author.avatar %}
-      <figure class="image is-flex is-justify-content-center is-align-items-center">
-        <img class="is-rounded" src="{{ config.extra.author.avatar }}" style="max-width: 192px" />
-      </figure>
+        {% include 'author_avatar.html' %}
       {% endif %}
       {{ macros:: social_links( social_config=config.extra.social) }}
     </div>

templates/macros.html

@@ -6,6 +6,7 @@
     <span class="icon is-large" title="Google Scholar">
 			<i class="ai ai-google-scholar ai-lg"></i>
     </span>
+    <span class="sr-only">Google scholar</span>
   </a>
   {% endif %}
 
@@ -14,6 +15,7 @@
     <span class="icon is-large" title="ORCiD">
       <i class="fab fa-orcid fa-lg"></i>
     </span>
+    <span class="sr-only">ORCiD</span>
   </a>
   {% endif %}
 
@@ -22,6 +24,7 @@
     <span class="icon is-large" title="Facebook">
       <i class="fab fa-facebook fa-lg"></i>
     </span>
+    <span class="sr-only">Facebook</span>
   </a>
   {% endif %}
 
@@ -30,6 +33,7 @@
     <span class="icon is-large" title="Twitter">
       <i class="fab fa-twitter fa-lg"></i>
     </span>
+    <span class="sr-only">Twitter</span>
   </a>
   {% endif %}
 
@@ -38,6 +42,7 @@
     <span class="icon is-large" title="LinkedIn">
       <i class="fab fa-linkedin fa-lg"></i>
     </span>
+    <span class="sr-only">LinkedIn</span>
   </a>
   {% endif %}
 
@@ -46,6 +51,7 @@
     <span class="icon is-large" title="GitHub">
       <i class="fab fa-github fa-lg"></i>
     </span>
+    <span class="sr-only">GitHub</span>
   </a>
   {% endif %}
 
@@ -54,6 +60,7 @@
     <span class="icon is-large" title="GitLab">
       <i class="fab fa-gitlab fa-lg"></i>
     </span>
+    <span class="sr-only">GitLab</span>
   </a>
   {% endif %}
 
@@ -62,6 +69,7 @@
     <span class="icon is-large" title="Stack Overflow">
       <i class="fab fa-stack-overflow fa-lg"></i>
     </span>
+    <span class="sr-only">Stack Overflow</span>
   </a>
   {% endif %}
 
@@ -70,6 +78,7 @@
     <span class="icon is-large" title="Keybase">
       <i class="fab fa-keybase fa-lg"></i>
     </span>
+    <span class="sr-only">Keybase</span>
   </a>
   {% endif %}
 
@@ -78,6 +87,7 @@
     <span class="icon is-large" title="Mastodon">
       <i class="fab fa-mastodon fa-lg"></i>
     </span>
+    <span class="sr-only">Mastodon</span>
   </a>
   {% endif %}
 
@@ -86,6 +96,7 @@
     <span class="icon is-large" title="Instagram">
       <i class="fab fa-instagram fa-lg"></i>
     </span>
+    <span class="sr-only">Instagram</span>
   </a>
   {% endif %}
 
@@ -94,6 +105,7 @@
     <span class="icon is-large" title="Behance">
       <i class="fab fa-behance fa-lg"></i>
     </span>
+    <span class="sr-only">Behance</span>
   </a>
   {% endif %}
 
@@ -102,6 +114,7 @@
     <span class="icon is-large" title="Email">
       <i class="far fa-envelope fa-lg"></i>
     </span>
+    <span class="sr-only">Email</span>
   </a>
   {% endif %}
 
@@ -110,6 +123,7 @@
     <span class="icon is-large" title="Medium">
       <i class="fab fa-medium fa-lg"></i>
     </span>
+    <span class="sr-only">Medium</span>
   </a>
   {% endif %}
 
@@ -118,6 +132,7 @@
     <span class="icon is-large" title="Google play">
       <i class="fab fa-google-play fa-lg"></i>
     </span>
+    <span class="sr-only">Google play</span>
   </a>
   {% endif %}
 
@@ -126,6 +141,7 @@
     <span class="icon is-large" title="RSS Feed">
       <i class="fas fa-rss fa-lg"></i>
     </span>
+    <span class="sr-only">RSS Feed</span>
   </a>
   {% endif %}
 </p>