Match arrow icon stroke and fill colors to a tag color

This optimizes both the load time of the icons and allows them
to be modified via CSS.

public_html/css/hpr.css

@@ -636,7 +636,7 @@ fieldset > table td input[type="radio"] {
 	margin-bottom: 0.5rem;
 }
 .no-css {
-	display: none;
+	display: none !important;
 }
 #tags .date {
 	margin:0;
@@ -743,7 +743,7 @@ nav.episodes span {
 	color: var(--text-primary);
 	display: inline-block;
 	text-align: center;
-	border: inset thin var(--text-primary);
+	border: solid thin var(--text-primary);
 }
 nav.episodes span:nth-child(-n+2),
 nav.episodes span:nth-child(-n+2) a {
@@ -764,17 +764,24 @@ nav.episodes span a {
 }
 nav.episodes span a:hover {
 	background-color: var(--link-primary-hover);
-	color: var(--link-navigation-hover);
+	color: var(--link-secondary-hover);
 }
-nav.episodes span a img {
+nav.episodes svg {
-	filter: none;
-}
-nav.episodes img {
 	margin: 0 0.2rem;
 	height: 0.85em;
 	max-width: 13px;
 	vertical-align: middle;
 }
+nav.episodes span a svg #arrow,
+nav.episodes span a svg #bar {
+	stroke: var(--link-primary);
+	fill: var(--link-primary);
+}
+nav.episodes span a:hover svg #arrow,
+nav.episodes span a:hover svg #bar {
+	stroke: var(--link-secondary-hover);
+	fill: var(--link-secondary-hover);
+}
 @media (min-width: 600px) {
 	body > header .bounding-box {
 		justify-content: space-between;
@@ -928,4 +935,14 @@ nav.episodes img {
 		background-color: var(--link-primary-hover);
 		color: var(--link-navigation-hover);
 	}
+	nav.episodes span svg #arrow,
+	nav.episodes span svg #bar {
+		stroke: var(--text-primary);
+		fill: var(--text-primary);
+	}
+	nav.episodes span a:hover svg #arrow,
+	nav.episodes span a:hover svg #bar {
+		stroke: var(--link-navigation-hover);
+		fill: var(--link-navigation-hover);
+	}
 }

public_html/images/icons/arrow-first-plain.svg

@@ -1,34 +1,24 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   viewBox="0 0 8.0716972 9.7589998"
+   viewBox="0 0 12 12"
    version="1.1"
-   id="svg1106"
+   id="arrow_first"
-   width="8.0716972"
+   width="12"
-   height="9.7589998"
+   height="12"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1103" />
-  <g
-     id="layer1"
-     transform="translate(-92.715063,-46.059054)">
-    <g
-       id="g5606">
     <path
      id="arrow"
-         style="stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-         d="m 99.346123,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+     d="M 9.9303359,11.572157 11.530286,10.119277 7.0035163,5.9964088 11.484768,1.9181465 9.8743209,0.45252151 3.7931149,5.986851 Z" />
   <rect
-         style="stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke"
+     style="stroke-width:0.524;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-start:url(#Arrow1Lstart);paint-order:normal"
      id="bar"
-         width="1.5938228"
+     width="2.2"
-         height="9.3528233"
+     height="11.263"
-         x="92.918152"
+     x="0.5"
-         y="46.262142"
+     y="0.36860976"
      rx="0"
-         ry="0.11228061" />
+     ry="0.0015425405" />
-    </g>
-  </g>
 </svg>

public_html/images/icons/arrow-last-plain.svg

@@ -1,35 +1,25 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   viewBox="0 0 8.0039654 9.7589998"
+   viewBox="0 0 12 12"
    version="1.1"
-   id="svg1106"
+   id="arrow_last"
-   width="8.0039654"
+   width="12"
-   height="9.7589998"
+   height="12"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1103" />
-  <g
-     id="layer1"
-     transform="translate(-92.782792,-46.059054)">
-    <g
-       id="g5606"
-       transform="matrix(-1,0,0,1,193.50182,0)">
   <path
-         id="path9831"
+     id="arrow"
-         style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-         d="m 99.346123,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+     d="M 2.0731448,11.604466 0.47319466,10.151586 4.9999643,6.0287178 0.51871266,1.9504555 2.1291598,0.48483049 8.2103658,6.01916 Z" />
   <rect
-         style="opacity:0.985023;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+     style="stroke-width:0.524;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-start:url(#Arrow1Lstart);paint-order:normal"
-         id="rect3544"
+     id="bar"
-         width="1.5938228"
+     width="2.2"
-         height="9.3528233"
+     height="11.263"
-         x="92.918152"
+     x="-11.503481"
-         y="46.262142"
+     y="0.40091875"
      rx="0"
-         ry="0.11228061" />
+     ry="0.0015425405"
-    </g>
+     transform="scale(-1,1)" />
-  </g>
 </svg>

public_html/images/icons/arrow-next-plain.svg

@@ -1,22 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   viewBox="0 0 6.3102736 9.6969385"
+   viewBox="0 0 12 12"
    version="1.1"
    id="arrow_next"
-   width="6.3102736"
+   width="12"
-   height="9.6969385"
+   height="12"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1103" />
-  <g
-     id="next"
-     transform="translate(-92.71506,-46.084171)">
   <path
      id="arrow"
-       style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-       d="m 94.155697,55.549619 -1.209147,-1.2065 3.421063,-3.423708 -3.386663,-3.386667 1.21708,-1.217083 4.595813,4.595813 z" />
+     d="M 2.0731448,11.604466 0.47319466,10.151586 4.9999643,6.0287178 0.51871266,1.9504555 2.1291598,0.48483049 8.2103658,6.01916 Z" />
-  </g>
 </svg>

public_html/images/icons/arrow-previous-plain.svg

@@ -1,22 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   viewBox="0 0 6.3102736 9.6969385"
+   viewBox="0 0 12 12"
    version="1.1"
-   id="arrow_first"
+   id="arrow_previous"
-   width="6.3102736"
+   width="12"
-   height="9.6969385"
+   height="12"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1103" />
-  <g
-     id="arrow"
-     transform="translate(-92.71506,-46.084171)">
   <path
-       id="path9831"
+     id="arrow"
-       style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-       d="m 97.584696,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+     d="M 9.9303359,11.572157 11.530286,10.119277 7.0035163,5.9964088 11.484768,1.9181465 9.8743209,0.45252151 3.7931149,5.986851 Z" />
-  </g>
 </svg>

templates/shared-utils.tpl.html

@@ -117,16 +117,20 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<nav class="episodes" aria-description="Navigation to other episodes"><span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first" aria-label="first episode"><img src="/images/icons/arrow-first-plain.svg" alt="<<">First</a></span>,
+<!--% arrow_first = "arrow-first-plain.svg" %--> 
+<!--% arrow_prev = "arrow-previous-plain.svg" %--> 
+<!--% arrow_next = "arrow-next-plain.svg" %--> 
+<!--% arrow_last = "arrow-last-plain.svg" %--> 
+<nav class="episodes" aria-description="Navigation to other episodes"><span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first" aria-label="first episode"><!--% INSERT $arrow_first %--><span class="no-css">&lt;&lt; </span>First</a></span>,
     <!--% IF links.previous %-->
-    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous" aria-label="previous episode"><img src="/images/icons/arrow-previous-plain.svg" alt="<">Previous</a></span>,
+    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous" aria-label="previous episode"><!--% INSERT $arrow_prev %--><span class="no-css">&lt; </span>Previous</a></span>,
     <!--% ELSE %-->
-    <span class="no-link"><img src="/images/icons/arrow-previous-plain.svg" alt="<">Previous</span>,
+    <span class="no-link"><!--% INSERT $arrow_prev %--><span class="no-css">&lt; </span>Previous</span>,
     <!--% END %-->
     <!--% IF links.next %-->
-	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next" aria-label="next episode">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></a></span>, 
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next" aria-label="next episode">Next<span class="no-css"> &gt;</span><!--% INSERT $arrow_next %--></a></span>, 
     <!--% ELSE %-->
-	<span class="no-link">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></span>, 
+	<span class="no-link">Next<span class="no-css"> &gt;</span><!--% INSERT $arrow_next %--></span>, 
     <!--% END %-->
-	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last" aria-label="latest episode">Latest<img src="/images/icons/arrow-last-plain.svg" alt=">>"></a></span></nav>
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last" aria-label="latest episode">Latest<span class="no-css"> &gt;&gt;</span><!--% INSERT $arrow_last %--></a></span></nav>
 <!--% END %-->