HPR/hpr_generator
8
1
Fork 5
Code Issues 34 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Compare commits

base: HPR:107583356210fcb2fc4812bd8743be5cd6a42ef4
Branches Tags
HPR:main HPR:i274-hacker-to-hobbyist HPR:kdmurrayhpr/main HPR:167_Several_templates_use_non-existent_absolute_url HPR:I123_Future_episodes_are_not_being_produced HPR:I30-Series_name_for_filename
HPR:2023-03 HPR:2023-02
...
compare: HPR:c53c6d50aa1da61ce1d494fae0ceddfedb63eb1f
Branches Tags
HPR:main HPR:i274-hacker-to-hobbyist HPR:kdmurrayhpr/main HPR:167_Several_templates_use_non-existent_absolute_url HPR:I123_Future_episodes_are_not_being_produced HPR:I30-Series_name_for_filename
HPR:2023-03 HPR:2023-02

2 Commits
1075833562 ... c53c6d50aa

Author SHA1 Message Date
Roan Horning
c53c6d50aa Tweak display of episode navigation on small displays 2025-10-25 19:48:41 -04:00
Roan Horning
c4d94bb019 Add aria labels to episode navigation 2025-10-25 19:44:10 -04:00
2 changed files with 21 additions and 11 deletions
Expand all files Collapse all files

20
public_html/css/hpr.css
View File

@@ -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,

12
templates/shared-utils.tpl.html
View File

@@ -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 %-->