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.

diff --git a/content/icons/down.svg b/content/icons/down.svg
index 95b82afd11f63166b2f07d335b8a35951f667b14..0c05c068d7025860d18449ea55f5cbebd9f96233 100644 (file)
--- 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 79b25c305beded4252b7359bda5e67493877ac8f..ff2f8d7312c038ccd714962422877cd7645ea097 100644 (file)
--- 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 d3cce96f1bee79a9a35b2aa72dac530b5f9d9778..81a5b906e03141b3372138c07bc2fbe9c2b9ee18 100644 (file)
--- 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 54263df3e53745c408e187863ac8ad67aa803f11..63e8db3274238fa862644108860e3f3041ba1d37 100644 (file)
--- 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 fb33f88d96ac3cd24cd89fcc7dc9d53d3af51bec..727a865d905e27c56f60e460088c6217e51e31f6 100644 (file)
--- 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 2b3f8e2a7dcd187d0fcab8c9d188927468049226..0aee04d9dcc7ef7ee7b0156b125eda24b1f7cdab 100644 (file)
--- 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>