From d82f7b7dd13788fd5478b72285cde1cb76041d4d Mon Sep 17 00:00:00 2001
From: Nick Bowler <nbowler@draconx.ca>
Date: Tue, 10 May 2022 23:30:13 -0400
Subject: [PATCH] Make archive file icon shadows visible in dark mode.

On a black background, the black icon shadows are invisible.  This is
not a huge problem but we can use CSS rules to make them visible again.

To do this, the SVG embedding is adjusted to automatically add classes
based on the filename in order to differentiate between the various
images, and additional classes are added to the icons to enable
selectors to match the shadows.

The results seem OK.
---
 content/icons/down.svg   |  2 ++
 content/icons/folder.svg |  3 +++
 content/icons/return.svg |  2 ++
 content/icons/up.svg     |  2 ++
 content/style.scss       |  7 +++++++
 layouts/embed-svg.xsl    | 20 ++++++++++++++++++--
 6 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/content/icons/down.svg b/content/icons/down.svg
index 95b82af..0c05c06 100644
--- a/content/icons/down.svg
+++ b/content/icons/down.svg
@@ -67,6 +67,7 @@
     <radialGradient
        inkscape:collect="always"
        xlink:href="#linearGradient8662"
+       class="shadow"
        id="radialGradient1444"
        gradientUnits="userSpaceOnUse"
        gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,1.614716e-15,16.87306)"
@@ -174,6 +175,7 @@
        sodipodi:rx="15.644737"
        sodipodi:cy="36.421127"
        sodipodi:cx="24.837126"
+       class="shadow"
        id="path8660"
        style="opacity:0.20454545;color:#000000;fill:url(#radialGradient1444);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible"
        sodipodi:type="arc" />
diff --git a/content/icons/folder.svg b/content/icons/folder.svg
index 79b25c3..ff2f8d7 100644
--- a/content/icons/folder.svg
+++ b/content/icons/folder.svg
@@ -42,6 +42,7 @@
        r="117.14286" />
     <linearGradient
        inkscape:collect="always"
+       class="shadow"
        id="linearGradient5060">
       <stop
          style="stop-color:black;stop-opacity:1;"
@@ -81,6 +82,7 @@
     <linearGradient
        inkscape:collect="always"
        xlink:href="#linearGradient5048"
+       class="shadow"
        id="linearGradient6715"
        gradientUnits="userSpaceOnUse"
        gradientTransform="matrix(2.774389,0,0,1.969706,-1892.179,-872.8854)"
@@ -281,6 +283,7 @@
     <g
        style="display:inline"
        transform="matrix(2.262383e-2,0,0,2.086758e-2,43.38343,36.36962)"
+       class="shadow"
        id="g6707">
       <rect
          style="opacity:0.40206185;color:black;fill:url(#linearGradient6715);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
diff --git a/content/icons/return.svg b/content/icons/return.svg
index d3cce96..81a5b90 100644
--- a/content/icons/return.svg
+++ b/content/icons/return.svg
@@ -80,6 +80,7 @@
     <radialGradient
        inkscape:collect="always"
        xlink:href="#linearGradient8662"
+       class="shadow"
        id="radialGradient8668"
        cx="24.837126"
        cy="36.421127"
@@ -208,6 +209,7 @@
        sodipodi:rx="15.644737"
        sodipodi:cy="36.421127"
        sodipodi:cx="24.837126"
+       class="shadow"
        id="path8660"
        style="opacity:0.14117647;color:#000000;fill:url(#radialGradient8668);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
        sodipodi:type="arc" />
diff --git a/content/icons/up.svg b/content/icons/up.svg
index 54263df..63e8db3 100644
--- a/content/icons/up.svg
+++ b/content/icons/up.svg
@@ -89,6 +89,7 @@
     <radialGradient
        inkscape:collect="always"
        xlink:href="#linearGradient8662"
+       class="shadow"
        id="radialGradient1444"
        gradientUnits="userSpaceOnUse"
        gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,1.614716e-15,16.87306)"
@@ -174,6 +175,7 @@
        sodipodi:rx="15.644737"
        sodipodi:cy="36.421127"
        sodipodi:cx="24.837126"
+       class="shadow"
        id="path8660"
        style="opacity:0.29946521;color:#000000;fill:url(#radialGradient1444);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible"
        sodipodi:type="arc" />
diff --git a/content/style.scss b/content/style.scss
index fb33f88..727a865 100644
--- a/content/style.scss
+++ b/content/style.scss
@@ -454,6 +454,13 @@ ul.ordered > {
     #footer { padding: 0 1em; }
 }
 
+// lighten icon shadows in dark mode
+@media (prefers-color-scheme: dark) {
+    svg.icons { path.shadow, g.shadow>* { opacity: 0.7; } }
+    svg.icons .shadow>stop { stop-color: #aaa; }
+    svg.return path.shadow { opacity: 0.45; }
+}
+
 // page-specific dark mode styles
 @media (prefers-color-scheme: dark) and (min-width: 35em) {
     #page_weblog_responsive_tables {
diff --git a/layouts/embed-svg.xsl b/layouts/embed-svg.xsl
index 2b3f8e2..0aee04d 100644
--- a/layouts/embed-svg.xsl
+++ b/layouts/embed-svg.xsl
@@ -2,7 +2,7 @@
 <!--
   Nick's web site: SVG embedding.
 
-  Copyright © 2021 Nick Bowler
+  Copyright © 2021-2022 Nick Bowler
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -110,7 +110,23 @@
         <xsl:value-of select='concat("es-", generate-id($idnode))' />
       </xsl:attribute>
     </xsl:if>
-    <xsl:apply-templates mode='embed-svg' select='@*[local-name()!="id"]' />
+    <xsl:choose>
+      <xsl:when test='$idnode/@src and not(parent::*)'>
+        <!-- remove .svg suffix -->
+        <xsl:variable name='raw'
+          select='substring($idnode/@src, 1, string-length($idnode/@src)-4)' />
+
+        <xsl:attribute name='class'>
+          <xsl:value-of select='normalize-space(concat(@class, " embed ",
+            translate($raw, "/", " ")))' />
+        </xsl:attribute>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:apply-templates mode='embed-svg' select='@class' />
+      </xsl:otherwise>
+    </xsl:if>
+    <xsl:apply-templates mode='embed-svg'
+      select='@*[local-name()!="id" and local-name()!="class"]' />
     <xsl:apply-templates mode='embed-svg' select='node()'>
       <xsl:sort select='-count(self::svg:metadata)' data-type='number' />
     </xsl:apply-templates>
-- 
2.43.2