add test page

_includes/default_head_tags.html

@@ -14,7 +14,9 @@
 <!-- Theme tags -->
 <meta name="theme-color" content="#fcfcfc">
 <link rel="icon" type="image/x-icon" href="/favicon.ico">
-<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+<link rel="icon" type="image/png" href="/favicon/android-chrome-512x512.png" media="(prefers-color-scheme: light)">
+<link rel="icon" type="image/png" href="/favicon/android-chrome-512x512.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 
 <!-- Description tags -->
 {% if page.excerpt %}

_posts/2100-12-30-template.md

@@ -3,6 +3,7 @@ title:
 layout: post
 excerpt: A one sentence summary.
 draft: true
+redirect_from: /template/
 
  # Just a helper for the path if the page has lots of images.
 images: /assets/images/2024
@@ -362,3 +363,11 @@ function animate() {
   renderer.render(scene, camera);
 }
 </script>
+
+<figure class="multiple">
+<img src="/assets/images/alpha_test/original.jpg" class = "no-dim">
+<img src="/assets/images/alpha_test/white_subtracted.png" class = "no-dim">
+<img src="/assets/images/alpha_test/white_subtracted.png" class = "no-dim" style="filter: brightness(2);">
+<img src="/assets/images/alpha_test/ai_subtracted.png">
+<figcaption> Here are some images, (top left) original, (top right) white subtracted and replaced with alpha, (bottom left) same but brightened, (bottom right) ai background removal tool (loses shadow) </figcaption>
+</figure>

_sass/base.scss

@@ -387,9 +387,14 @@ img.invertable {
     --theme-bg-color: #222;
     --theme-subtle-outline: oklch(50% 0 50);
   }
-  img:not(.invertable) {
+
+  // Two main image classes are "invertable" i.e look good inverted
+  // and "no-dim" i.e don't get dimmed in night mode
+  // All other images get dimmed in night mode
+  img:not(.invertable):not(.no-dim) {
     opacity: 0.75;
   }
+
   svg.invertable,
   img.invertable {
     opacity: 1;