From fb46c133947fe58ed8c738df32356c50685e7eed Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 25 Oct 2025 16:21:55 -0400
Subject: [PATCH 01/12] First cut at navigation button style

---
 public_html/css/hpr.css         | 28 ++++++++++++++++++++++++++++
 templates/shared-utils.tpl.html | 12 ++++++------
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index cb3c32b..41e3f5e 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -730,6 +730,34 @@ fieldset > table td input[type="radio"] {
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
+nav.episodes {
+	color: var(--background-primary);
+}
+nav.episodes span {
+	color: var(--text-primary);
+	display: inline-block;
+	text-align: center;
+	border: inset thin var(--text-primary);
+}
+nav.episodes span:nth-child(-n+2) {
+	border-top-left-radius: 2rem;
+	border-bottom-left-radius: 2rem;
+}
+nav.episodes span:nth-child(n+3) {
+	border-top-right-radius: 2rem;
+	border-bottom-right-radius: 2rem;
+}
+nav.episodes span.no-link,
+nav.episodes span a {
+	padding: 0.5rem;
+	display: inline-block;
+	min-width: 5.5rem;
+}
+nav.episodes object {
+	margin: 0 0.2rem;
+	heigth: 0.85rem;
+	vertical-align: middle;
+}
 @media (min-width: 600px) {
 	body > header .bounding-box {
 		justify-content: space-between;
diff --git a/templates/shared-utils.tpl.html b/templates/shared-utils.tpl.html
index 4d9a2c5..39e9c89 100644
--- a/templates/shared-utils.tpl.html
+++ b/templates/shared-utils.tpl.html
@@ -117,16 +117,16 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<small><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first">&lt;&lt; First</a>,
+<nav class="episodes"><span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first"><object href="/images/icons/arrow-first-plain.svg">&lt;&lt;</object>First</a></span>,
     <!--% IF links.previous %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous">&lt; Previous</a>,
+    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous"><object href="/images/icons/arrow-previous-plain.svg">&lt;</object>Previous</a></span>,
     <!--% ELSE %-->
-    <span>&lt;</span> Previous,
+    <span class="no-link"><object href="/images/icons/arrow-previous-plain.svg">&lt;</object>Previous</span>,
     <!--% END %-->
     <!--% IF links.next %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next &gt;</a>,
+    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next<object href="/images/icons/arrow-next-plain.svg">&gt;</object></a></span>, 
     <!--% ELSE %-->
-    Next <span>&gt;</span>
+    <span class="no-link">Next<object href="/images/icons/arrow-next-plain.svg">&gt;</object></span>, 
     <!--% END %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest &gt;&gt;</a></small>
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest<object href="/images/icons/arrow-last-plain.svg">&gt;&gt;</object></a></span></nav>
 <!--% END %-->

From 107583356210fcb2fc4812bd8743be5cd6a42ef4 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 25 Oct 2025 16:44:09 -0400
Subject: [PATCH 02/12] Add arrow icons for episode navigation

---
 .../images/icons/arrow-first-plain.svg        | 39 ++++++++++++
 public_html/images/icons/arrow-last-plain.svg | 35 +++++++++++
 public_html/images/icons/arrow-next-plain.svg | 62 +++++++++++++++++++
 .../images/icons/arrow-previous-plain.svg     | 22 +++++++
 4 files changed, 158 insertions(+)
 create mode 100644 public_html/images/icons/arrow-first-plain.svg
 create mode 100644 public_html/images/icons/arrow-last-plain.svg
 create mode 100644 public_html/images/icons/arrow-next-plain.svg
 create mode 100644 public_html/images/icons/arrow-previous-plain.svg

diff --git a/public_html/images/icons/arrow-first-plain.svg b/public_html/images/icons/arrow-first-plain.svg
new file mode 100644
index 0000000..6ef04d2
--- /dev/null
+++ b/public_html/images/icons/arrow-first-plain.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 8.0716972 9.7589998"
+   version="1.1"
+   id="svg1106"
+   width="8.0716972"
+   height="9.7589998"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+    <link
+    xmlns="http://www.w3.org/1999/xhtml"
+    rel="stylesheet"
+    href="arrow.css"
+    type="text/css" />
+  <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;"
+         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" />
+      <rect
+         style="stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke"
+         id="bar"
+         width="1.5938228"
+         height="9.3528233"
+         x="92.918152"
+         y="46.262142"
+         rx="0"
+         ry="0.11228061" />
+    </g>
+  </g>
+</svg>
diff --git a/public_html/images/icons/arrow-last-plain.svg b/public_html/images/icons/arrow-last-plain.svg
new file mode 100644
index 0000000..bdb088b
--- /dev/null
+++ b/public_html/images/icons/arrow-last-plain.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 8.0039654 9.7589998"
+   version="1.1"
+   id="svg1106"
+   width="8.0039654"
+   height="9.7589998"
+   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"
+         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"
+         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" />
+      <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"
+         id="rect3544"
+         width="1.5938228"
+         height="9.3528233"
+         x="92.918152"
+         y="46.262142"
+         rx="0"
+         ry="0.11228061" />
+    </g>
+  </g>
+</svg>
diff --git a/public_html/images/icons/arrow-next-plain.svg b/public_html/images/icons/arrow-next-plain.svg
new file mode 100644
index 0000000..d26a265
--- /dev/null
+++ b/public_html/images/icons/arrow-next-plain.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 6.3102736 9.6969385"
+   version="1.1"
+   id="svg1106"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="arrow-next.svg"
+   width="6.3102736"
+   height="9.6969385"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1108"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="15.473418"
+     inkscape:cx="13.216214"
+     inkscape:cy="18.354057"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <sodipodi:guide
+       position="-0.11110969,-13.907476"
+       orientation="0,-1"
+       id="guide3546" />
+    <sodipodi:guide
+       position="-0.073513191,-14.304342"
+       orientation="0,-1"
+       id="guide3548" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1103" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-92.71506,-46.084171)">
+    <path
+       id="path9831"
+       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"
+       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" />
+  </g>
+</svg>
diff --git a/public_html/images/icons/arrow-previous-plain.svg b/public_html/images/icons/arrow-previous-plain.svg
new file mode 100644
index 0000000..8f6b0c9
--- /dev/null
+++ b/public_html/images/icons/arrow-previous-plain.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 6.3102736 9.6969385"
+   version="1.1"
+   id="svg1106"
+   width="6.3102736"
+   height="9.6969385"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="layer1"
+     transform="translate(-92.71506,-46.084171)">
+    <path
+       id="path9831"
+       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"
+       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" />
+  </g>
+</svg>

From c4d94bb01994ab90aa11ea65861034fbd5200bcf Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 25 Oct 2025 19:44:10 -0400
Subject: [PATCH 03/12] Add aria labels to episode navigation

---
 templates/shared-utils.tpl.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/shared-utils.tpl.html b/templates/shared-utils.tpl.html
index 39e9c89..f4c86b6 100644
--- a/templates/shared-utils.tpl.html
+++ b/templates/shared-utils.tpl.html
@@ -117,16 +117,16 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<nav class="episodes"><span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first"><object href="/images/icons/arrow-first-plain.svg">&lt;&lt;</object>First</a></span>,
+<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>,
     <!--% IF links.previous %-->
-    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous"><object href="/images/icons/arrow-previous-plain.svg">&lt;</object>Previous</a></span>,
+    <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>,
     <!--% ELSE %-->
-    <span class="no-link"><object href="/images/icons/arrow-previous-plain.svg">&lt;</object>Previous</span>,
+    <span class="no-link"><img src="/images/icons/arrow-previous-plain.svg" alt="<">Previous</span>,
     <!--% END %-->
     <!--% IF links.next %-->
-    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next<object href="/images/icons/arrow-next-plain.svg">&gt;</object></a></span>, 
+	<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>, 
     <!--% ELSE %-->
-    <span class="no-link">Next<object href="/images/icons/arrow-next-plain.svg">&gt;</object></span>, 
+	<span class="no-link">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></span>, 
     <!--% END %-->
-	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest<object href="/images/icons/arrow-last-plain.svg">&gt;&gt;</object></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<img src="/images/icons/arrow-last-plain.svg" alt=">>"></a></span></nav>
 <!--% END %-->

From c53c6d50aa1da61ce1d494fae0ceddfedb63eb1f Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 25 Oct 2025 19:48:41 -0400
Subject: [PATCH 04/12] Tweak display of episode navigation on small displays

---
 public_html/css/hpr.css | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 41e3f5e..8444e3d 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -732,6 +732,11 @@ fieldset > table td input[type="radio"] {
 }
 nav.episodes {
 	color: var(--background-primary);
+	font-size: 0.9em;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	max-width: 100vw;
 }
 nav.episodes span {
 	color: var(--text-primary);
@@ -747,15 +752,17 @@ nav.episodes span:nth-child(n+3) {
 	border-top-right-radius: 2rem;
 	border-bottom-right-radius: 2rem;
 }
-nav.episodes span.no-link,
+nav.episodes span.no-link, 
 nav.episodes span a {
-	padding: 0.5rem;
+	padding: 0.17em;
 	display: inline-block;
-	min-width: 5.5rem;
+	min-width: 4.4em;
+	min-height: 1.5em;
 }
-nav.episodes object {
+nav.episodes img {
 	margin: 0 0.2rem;
-	heigth: 0.85rem;
+	height: 0.85em;
+	max-width: 13px;
 	vertical-align: middle;
 }
 @media (min-width: 600px) {
@@ -854,6 +861,9 @@ nav.episodes object {
 	#host {
 		gap: 1rem;
 	}
+	nav.episodes {
+		display: inline-block;
+	}
 }
 @media (min-width: 900px) {
 	#podcast_lane > .lane,

From 70fd148928aaed3f05af8b5d2238160deb844833 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sun, 26 Oct 2025 00:44:10 -0400
Subject: [PATCH 05/12] Clean up arrow icons

---
 .../images/icons/arrow-first-plain.svg        |  5 --
 public_html/images/icons/arrow-next-plain.svg | 46 ++-----------------
 .../images/icons/arrow-previous-plain.svg     |  4 +-
 3 files changed, 5 insertions(+), 50 deletions(-)

diff --git a/public_html/images/icons/arrow-first-plain.svg b/public_html/images/icons/arrow-first-plain.svg
index 6ef04d2..7bed845 100644
--- a/public_html/images/icons/arrow-first-plain.svg
+++ b/public_html/images/icons/arrow-first-plain.svg
@@ -9,11 +9,6 @@
    height="9.7589998"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-    <link
-    xmlns="http://www.w3.org/1999/xhtml"
-    rel="stylesheet"
-    href="arrow.css"
-    type="text/css" />
   <defs
      id="defs1103" />
   <g
diff --git a/public_html/images/icons/arrow-next-plain.svg b/public_html/images/icons/arrow-next-plain.svg
index d26a265..7f6d523 100644
--- a/public_html/images/icons/arrow-next-plain.svg
+++ b/public_html/images/icons/arrow-next-plain.svg
@@ -4,58 +4,18 @@
 <svg
    viewBox="0 0 6.3102736 9.6969385"
    version="1.1"
-   id="svg1106"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
-   sodipodi:docname="arrow-next.svg"
+   id="arrow_next"
    width="6.3102736"
    height="9.6969385"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1108"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:document-units="mm"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:zoom="15.473418"
-     inkscape:cx="13.216214"
-     inkscape:cy="18.354057"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0">
-    <sodipodi:guide
-       position="-0.11110969,-13.907476"
-       orientation="0,-1"
-       id="guide3546" />
-    <sodipodi:guide
-       position="-0.073513191,-14.304342"
-       orientation="0,-1"
-       id="guide3548" />
-  </sodipodi:namedview>
   <defs
      id="defs1103" />
   <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
+     id="next"
      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"
        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" />
   </g>
diff --git a/public_html/images/icons/arrow-previous-plain.svg b/public_html/images/icons/arrow-previous-plain.svg
index 8f6b0c9..38d62d0 100644
--- a/public_html/images/icons/arrow-previous-plain.svg
+++ b/public_html/images/icons/arrow-previous-plain.svg
@@ -4,7 +4,7 @@
 <svg
    viewBox="0 0 6.3102736 9.6969385"
    version="1.1"
-   id="svg1106"
+   id="arrow_first"
    width="6.3102736"
    height="9.6969385"
    xmlns="http://www.w3.org/2000/svg"
@@ -12,7 +12,7 @@
   <defs
      id="defs1103" />
   <g
-     id="layer1"
+     id="arrow"
      transform="translate(-92.71506,-46.084171)">
     <path
        id="path9831"

From b122f7c1c07bbde0121518b013f71bd3147c634a Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sun, 26 Oct 2025 00:45:34 -0400
Subject: [PATCH 06/12] Make episode navigation links more button like

---
 public_html/css/hpr.css | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 8444e3d..3f9edb3 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -47,6 +47,7 @@ https://creativecommons.org/publicdomain/
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
 	--link-title-color: #00003e;
+	--link-navigation-hover: #030303;
 	--primary-content-line-height: 1.45;
 
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
@@ -744,11 +745,13 @@ nav.episodes span {
 	text-align: center;
 	border: inset thin var(--text-primary);
 }
-nav.episodes span:nth-child(-n+2) {
+nav.episodes span:nth-child(-n+2),
+nav.episodes span:nth-child(-n+2) a {
 	border-top-left-radius: 2rem;
 	border-bottom-left-radius: 2rem;
 }
-nav.episodes span:nth-child(n+3) {
+nav.episodes span:nth-child(n+3),
+nav.episodes span:nth-child(n+3) a {
 	border-top-right-radius: 2rem;
 	border-bottom-right-radius: 2rem;
 }
@@ -759,6 +762,13 @@ nav.episodes span a {
 	min-width: 4.4em;
 	min-height: 1.5em;
 }
+nav.episodes span a:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--link-navigation-hover);
+}
+nav.episodes span a img {
+	filter: none;
+}
 nav.episodes img {
 	margin: 0 0.2rem;
 	height: 0.85em;
@@ -914,4 +924,8 @@ nav.episodes img {
 	#hosts td:nth-child(-n+2) {
 		color: var(--text-primary);
 	}
+		nav.episodes span a:hover {
+		background-color: var(--link-primary-hover);
+		color: var(--link-navigation-hover);
+	}
 }

From 09f5c60d6073fb12f13a841b04070bef09cc6dd4 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Thu, 30 Oct 2025 22:03:46 -0400
Subject: [PATCH 07/12] Simplify SVG and make icons more distinctive

---
 .../images/icons/arrow-first-plain.svg        | 44 +++++++-----------
 public_html/images/icons/arrow-last-plain.svg | 46 ++++++++-----------
 public_html/images/icons/arrow-next-plain.svg | 21 +++------
 .../images/icons/arrow-previous-plain.svg     | 21 +++------
 4 files changed, 49 insertions(+), 83 deletions(-)

diff --git a/public_html/images/icons/arrow-first-plain.svg b/public_html/images/icons/arrow-first-plain.svg
index 7bed845..4d67727 100644
--- a/public_html/images/icons/arrow-first-plain.svg
+++ b/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"
-   width="8.0716972"
-   height="9.7589998"
+   id="arrow_first"
+   width="12"
+   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;"
-         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" />
-      <rect
-         style="stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke"
-         id="bar"
-         width="1.5938228"
-         height="9.3528233"
-         x="92.918152"
-         y="46.262142"
-         rx="0"
-         ry="0.11228061" />
-    </g>
-  </g>
+    <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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.524;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-start:url(#Arrow1Lstart);paint-order:normal"
+     id="bar"
+     width="2.2"
+     height="11.263"
+     x="0.5"
+     y="0.36860976"
+     rx="0"
+     ry="0.0015425405" />
 </svg>
diff --git a/public_html/images/icons/arrow-last-plain.svg b/public_html/images/icons/arrow-last-plain.svg
index bdb088b..00a3f28 100644
--- a/public_html/images/icons/arrow-last-plain.svg
+++ b/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"
-   width="8.0039654"
-   height="9.7589998"
+   id="arrow_last"
+   width="12"
+   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"
-         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"
-         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" />
-      <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"
-         id="rect3544"
-         width="1.5938228"
-         height="9.3528233"
-         x="92.918152"
-         y="46.262142"
-         rx="0"
-         ry="0.11228061" />
-    </g>
-  </g>
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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="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="2.2"
+     height="11.263"
+     x="-11.503481"
+     y="0.40091875"
+     rx="0"
+     ry="0.0015425405"
+     transform="scale(-1,1)" />
 </svg>
diff --git a/public_html/images/icons/arrow-next-plain.svg b/public_html/images/icons/arrow-next-plain.svg
index 7f6d523..e5ca5f9 100644
--- a/public_html/images/icons/arrow-next-plain.svg
+++ b/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"
-   height="9.6969385"
+   width="12"
+   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"
-       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" />
-  </g>
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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" />
 </svg>
diff --git a/public_html/images/icons/arrow-previous-plain.svg b/public_html/images/icons/arrow-previous-plain.svg
index 38d62d0..6fe8101 100644
--- a/public_html/images/icons/arrow-previous-plain.svg
+++ b/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"
-   width="6.3102736"
-   height="9.6969385"
+   id="arrow_previous"
+   width="12"
+   height="12"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1103" />
-  <g
+  <path
      id="arrow"
-     transform="translate(-92.71506,-46.084171)">
-    <path
-       id="path9831"
-       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"
-       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" />
-  </g>
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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" />
 </svg>

From a8dc69d7ad3efdcfc84a81f158b8af0370541f53 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Thu, 30 Oct 2025 22:15:18 -0400
Subject: [PATCH 08/12] Include arrow icon SVG directly in the html

This optimizes both the load time of the icons and allows them
to be modified via CSS.
---
 templates/shared-utils.tpl.html | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/templates/shared-utils.tpl.html b/templates/shared-utils.tpl.html
index f4c86b6..a33be6a 100644
--- a/templates/shared-utils.tpl.html
+++ b/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 %-->

From 2a119bd920b6dce2658b22eb82d26b9384625d03 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Thu, 30 Oct 2025 22:18:03 -0400
Subject: [PATCH 09/12] Match arrow icon stroke and fill colors to a tag color

---
 public_html/css/hpr.css | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 3f9edb3..3421689 100644
--- a/public_html/css/hpr.css
+++ b/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 {
-	filter: none;
-}
-nav.episodes img {
+nav.episodes svg {
 	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;
@@ -924,8 +931,18 @@ nav.episodes img {
 	#hosts td:nth-child(-n+2) {
 		color: var(--text-primary);
 	}
-		nav.episodes span a:hover {
+	nav.episodes span a:hover {
 		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);
+	}
 }

From b5755ddedb388a58aa5a494fb585eedcdf19f18d Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Fri, 31 Oct 2025 09:33:00 -0400
Subject: [PATCH 10/12] Rename arrow icons

---
 .../icons/{arrow-first-plain.svg => arrow-first.svg}      | 0
 .../images/icons/{arrow-last-plain.svg => arrow-last.svg} | 0
 .../images/icons/{arrow-next-plain.svg => arrow-next.svg} | 0
 .../{arrow-previous-plain.svg => arrow-previous.svg}      | 0
 templates/shared-utils.tpl.html                           | 8 ++++----
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename public_html/images/icons/{arrow-first-plain.svg => arrow-first.svg} (100%)
 rename public_html/images/icons/{arrow-last-plain.svg => arrow-last.svg} (100%)
 rename public_html/images/icons/{arrow-next-plain.svg => arrow-next.svg} (100%)
 rename public_html/images/icons/{arrow-previous-plain.svg => arrow-previous.svg} (100%)

diff --git a/public_html/images/icons/arrow-first-plain.svg b/public_html/images/icons/arrow-first.svg
similarity index 100%
rename from public_html/images/icons/arrow-first-plain.svg
rename to public_html/images/icons/arrow-first.svg
diff --git a/public_html/images/icons/arrow-last-plain.svg b/public_html/images/icons/arrow-last.svg
similarity index 100%
rename from public_html/images/icons/arrow-last-plain.svg
rename to public_html/images/icons/arrow-last.svg
diff --git a/public_html/images/icons/arrow-next-plain.svg b/public_html/images/icons/arrow-next.svg
similarity index 100%
rename from public_html/images/icons/arrow-next-plain.svg
rename to public_html/images/icons/arrow-next.svg
diff --git a/public_html/images/icons/arrow-previous-plain.svg b/public_html/images/icons/arrow-previous.svg
similarity index 100%
rename from public_html/images/icons/arrow-previous-plain.svg
rename to public_html/images/icons/arrow-previous.svg
diff --git a/templates/shared-utils.tpl.html b/templates/shared-utils.tpl.html
index a33be6a..5ff3660 100644
--- a/templates/shared-utils.tpl.html
+++ b/templates/shared-utils.tpl.html
@@ -117,10 +117,10 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<!--% arrow_first = "arrow-first-plain.svg" %--> 
-<!--% arrow_prev = "arrow-previous-plain.svg" %--> 
-<!--% arrow_next = "arrow-next-plain.svg" %--> 
-<!--% arrow_last = "arrow-last-plain.svg" %--> 
+<!--% arrow_first = "arrow-first.svg" %--> 
+<!--% arrow_prev = "arrow-previous.svg" %--> 
+<!--% arrow_next = "arrow-next.svg" %--> 
+<!--% arrow_last = "arrow-last.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"><!--% INSERT $arrow_prev %--><span class="no-css">&lt; </span>Previous</a></span>,

From 466ef289b133cd14178fd21f5ca5e810615fec6a Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Fri, 31 Oct 2025 09:45:31 -0400
Subject: [PATCH 11/12] Tweak espisode navigation button padding

---
 public_html/css/hpr.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 3421689..6b2a3e3 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -757,7 +757,7 @@ nav.episodes span:nth-child(n+3) a {
 }
 nav.episodes span.no-link, 
 nav.episodes span a {
-	padding: 0.17em;
+	padding: 0.3em 0.4em 0.1em 0.4em;
 	display: inline-block;
 	min-width: 4.4em;
 	min-height: 1.5em;

From d0c371a0f91f6de7269ad08ac78b39baab2af6d7 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Fri, 31 Oct 2025 09:59:00 -0400
Subject: [PATCH 12/12] Add arrow icon path to generator templates path

---
 site.cfg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site.cfg b/site.cfg
index 8ab7af0..16904de 100644
--- a/site.cfg
+++ b/site.cfg
@@ -10,7 +10,7 @@ driver: dbi:SQLite:hpr.db
 
 # Configure the location of the templates and the generated HTML
 [app_paths]
-templates_path: ./templates
+templates_path: ./templates:./public_html/images/icons
 output_path: ./public_html
 
 # Configure the root template page which pulls in the navigation and