diff --git a/_includes/default_head_tags.html b/_includes/default_head_tags.html index c54106f..a90c942 100644 --- a/_includes/default_head_tags.html +++ b/_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 %} diff --git a/_posts/2100-12-30-template.md b/_posts/2100-12-30-template.md index 98bbd41..4d67511 100644 --- a/_posts/2100-12-30-template.md +++ b/_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 @@ -361,4 +362,12 @@ function animate() { orbitControls.update(); renderer.render(scene, camera); } -</script> \ No newline at end of file +</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> \ No newline at end of file diff --git a/_sass/base.scss b/_sass/base.scss index 3c11d4a..4348eaf 100644 --- a/_sass/base.scss +++ b/_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; diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..bcf4727 Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/assets/images/alpha_test/ai_subtracted.png b/assets/images/alpha_test/ai_subtracted.png new file mode 100644 index 0000000..da6dca1 Binary files /dev/null and b/assets/images/alpha_test/ai_subtracted.png differ diff --git a/assets/images/alpha_test/original.jpg b/assets/images/alpha_test/original.jpg new file mode 100644 index 0000000..39dcfd7 Binary files /dev/null and b/assets/images/alpha_test/original.jpg differ diff --git a/assets/images/alpha_test/white_subtracted.png b/assets/images/alpha_test/white_subtracted.png new file mode 100644 index 0000000..d182f68 Binary files /dev/null and b/assets/images/alpha_test/white_subtracted.png differ