From fb46c133947fe58ed8c738df32356c50685e7eed Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 25 Oct 2025 16:21:55 -0400 Subject: [PATCH 1/6] 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 @@ -<< First, + -- 2.43.5 From 107583356210fcb2fc4812bd8743be5cd6a42ef4 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 25 Oct 2025 16:44:09 -0400 Subject: [PATCH 2/6] 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 @@ + + + + + + + + + + + + + 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 @@ + + + + + + + + + + + + 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 @@ + + + + + + + + + + + + + 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 @@ + + + + + + + + + -- 2.43.5 From c4d94bb01994ab90aa11ea65861034fbd5200bcf Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 25 Oct 2025 19:44:10 -0400 Subject: [PATCH 3/6] 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 @@ - -- 2.43.5 From c53c6d50aa1da61ce1d494fae0ceddfedb63eb1f Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 25 Oct 2025 19:48:41 -0400 Subject: [PATCH 4/6] 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, -- 2.43.5 From 70fd148928aaed3f05af8b5d2238160deb844833 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sun, 26 Oct 2025 00:44:10 -0400 Subject: [PATCH 5/6] 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"> - - - - - 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 @@ Date: Sun, 26 Oct 2025 00:45:34 -0400 Subject: [PATCH 6/6] 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); + } } -- 2.43.5