First cut at navigation button style

This commit is contained in:
2025-10-25 16:21:55 -04:00
parent f78789fdc4
commit fb46c13394
2 changed files with 34 additions and 6 deletions

View File

@@ -730,6 +730,34 @@ fieldset > table td input[type="radio"] {
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
border: 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) { @media (min-width: 600px) {
body > header .bounding-box { body > header .bounding-box {
justify-content: space-between; justify-content: space-between;

View File

@@ -117,16 +117,16 @@
<!--% IF folder %--> <!--% IF folder %-->
<!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %--> <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
<!--% END %--> <!--% 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 %--> <!--% 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 %--> <!--% ELSE %-->
<span>&lt;</span> Previous, <span class="no-link"><object href="/images/icons/arrow-previous-plain.svg">&lt;</object>Previous</span>,
<!--% END %--> <!--% END %-->
<!--% IF links.next %--> <!--% 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 %--> <!--% ELSE %-->
Next <span>&gt;</span> <span class="no-link">Next<object href="/images/icons/arrow-next-plain.svg">&gt;</object></span>,
<!--% END %--> <!--% 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 %--> <!--% END %-->