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

[i 284] Make the first previous next latest navigation bar clearer #288

Open
rho_n wants to merge 6 commits from i284-Make-the-first-previous-next-latest-navigation-bar-clearer into main
pull from: i284-Make-the-first-previous-next-latest-navigation-bar-clearer
merge into: HPR:main
Conversation 0 Commits 6 Files Changed 6 +171 -6
6 changed files with 171 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public_html/css/hpr.css
View File

@@ -47,6 +47,7 @@ https://creativecommons.org/publicdomain/
--link-secondary: #a8f8ff; --link-secondary: #a8f8ff;
--link-secondary-hover: #f9e9c2; --link-secondary-hover: #f9e9c2;
--link-title-color: #00003e; --link-title-color: #00003e;
--link-navigation-hover: #030303;
--primary-content-line-height: 1.45; --primary-content-line-height: 1.45;
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; --font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
@@ -730,6 +731,50 @@ 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);
font-size: 0.9em;
display: flex;
flex-direction: row;
justify-content: space-around;
max-width: 100vw;
}
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),
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) a {
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;
}
nav.episodes span.no-link,
nav.episodes span a {
padding: 0.17em;
display: inline-block;
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;
max-width: 13px;
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;
@@ -826,6 +871,9 @@ fieldset > table td input[type="radio"] {
#host { #host {
gap: 1rem; gap: 1rem;
} }
nav.episodes {
display: inline-block;
}
} }
@media (min-width: 900px) { @media (min-width: 900px) {
#podcast_lane > .lane, #podcast_lane > .lane,
@@ -876,4 +924,8 @@ fieldset > table td input[type="radio"] {
#hosts td:nth-child(-n+2) { #hosts td:nth-child(-n+2) {
color: var(--text-primary); color: var(--text-primary);
} }
nav.episodes span a:hover {
background-color: var(--link-primary-hover);
color: var(--link-navigation-hover);
}
} }

34
public_html/images/icons/arrow-first-plain.svg Normal file
View File

@@ -0,0 +1,34 @@
<?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">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

35
public_html/images/icons/arrow-last-plain.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

22
public_html/images/icons/arrow-next-plain.svg Normal file
View File

@@ -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="arrow_next"
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="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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 789 B

22
public_html/images/icons/arrow-previous-plain.svg Normal file
View File

@@ -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="arrow_first"
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="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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 795 B

12
templates/shared-utils.tpl.html
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" 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 %--> <!--% 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" aria-label="previous episode"><img src="/images/icons/arrow-previous-plain.svg" alt="<">Previous</a></span>,
<!--% ELSE %--> <!--% ELSE %-->
<span>&lt;</span> Previous, <span class="no-link"><img src="/images/icons/arrow-previous-plain.svg" alt="<">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" aria-label="next episode">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></a></span>,
<!--% ELSE %--> <!--% ELSE %-->
Next <span>&gt;</span> <span class="no-link">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></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" aria-label="latest episode">Latest<img src="/images/icons/arrow-last-plain.svg" alt=">>"></a></span></nav>
<!--% END %--> <!--% END %-->