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

Compare commits

base: HPR:b122f7c1c07bbde0121518b013f71bd3147c634a
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:2a119bd920b6dce2658b22eb82d26b9384625d03
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

3 Commits
b122f7c1c0 ... 2a119bd920

Author SHA1 Message Date
Roan Horning
2a119bd920 Match arrow icon stroke and fill colors to a tag color 2025-10-30 22:18:03 -04:00
Roan Horning
a8dc69d7ad 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.
 2025-10-30 22:15:18 -04:00
Roan Horning
09f5c60d60 Simplify SVG and make icons more distinctive 2025-10-30 22:03:46 -04:00
6 changed files with 84 additions and 97 deletions
Expand all files Collapse all files

33
public_html/css/hpr.css
View File

@@ -636,7 +636,7 @@ fieldset > table td input[type="radio"] {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.no-css { .no-css {
display: none; display: none !important;
} }
#tags .date { #tags .date {
margin:0; margin:0;
@@ -743,7 +743,7 @@ nav.episodes span {
color: var(--text-primary); color: var(--text-primary);
display: inline-block; display: inline-block;
text-align: center; 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),
nav.episodes span:nth-child(-n+2) a { nav.episodes span:nth-child(-n+2) a {
@@ -764,17 +764,24 @@ nav.episodes span a {
} }
nav.episodes span a:hover { nav.episodes span a:hover {
background-color: var(--link-primary-hover); background-color: var(--link-primary-hover);
color: var(--link-navigation-hover); color: var(--link-secondary-hover);
} }
nav.episodes span a img { nav.episodes svg {
filter: none;
}
nav.episodes img {
margin: 0 0.2rem; margin: 0 0.2rem;
height: 0.85em; height: 0.85em;
max-width: 13px; max-width: 13px;
vertical-align: middle; 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) { @media (min-width: 600px) {
body > header .bounding-box { body > header .bounding-box {
justify-content: space-between; justify-content: space-between;
@@ -924,8 +931,18 @@ nav.episodes img {
#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 { nav.episodes span a:hover {
background-color: var(--link-primary-hover); background-color: var(--link-primary-hover);
color: var(--link-navigation-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);
}
} }

44
public_html/images/icons/arrow-first-plain.svg
View File

@@ -1,34 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
viewBox="0 0 8.0716972 9.7589998" viewBox="0 0 12 12"
version="1.1" version="1.1"
id="svg1106" id="arrow_first"
width="8.0716972" width="12"
height="9.7589998" height="12"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs <path
id="defs1103" /> id="arrow"
<g style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
id="layer1" 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" />
transform="translate(-92.715063,-46.059054)"> <rect
<g 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="g5606"> id="bar"
<path width="2.2"
id="arrow" height="11.263"
style="stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;" x="0.5"
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" /> y="0.36860976"
<rect rx="0"
style="stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke" ry="0.0015425405" />
id="bar"
width="1.5938228"
height="9.3528233"
x="92.918152"
y="46.262142"
rx="0"
ry="0.11228061" />
</g>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 877 B

46
public_html/images/icons/arrow-last-plain.svg
View File

@@ -1,35 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
viewBox="0 0 8.0039654 9.7589998" viewBox="0 0 12 12"
version="1.1" version="1.1"
id="svg1106" id="arrow_last"
width="8.0039654" width="12"
height="9.7589998" height="12"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs <path
id="defs1103" /> id="arrow"
<g style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
id="layer1" 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" />
transform="translate(-92.782792,-46.059054)"> <rect
<g 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="g5606" id="bar"
transform="matrix(-1,0,0,1,193.50182,0)"> width="2.2"
<path height="11.263"
id="path9831" x="-11.503481"
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" y="0.40091875"
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" /> rx="0"
<rect ry="0.0015425405"
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" transform="scale(-1,1)" />
id="rect3544"
width="1.5938228"
height="9.3528233"
x="92.918152"
y="46.262142"
rx="0"
ry="0.11228061" />
</g>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 911 B

21
public_html/images/icons/arrow-next-plain.svg
View File

@@ -1,22 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
viewBox="0 0 6.3102736 9.6969385" viewBox="0 0 12 12"
version="1.1" version="1.1"
id="arrow_next" id="arrow_next"
width="6.3102736" width="12"
height="9.6969385" height="12"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs <path
id="defs1103" /> id="arrow"
<g style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
id="next" 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" />
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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 789 B

After

Width:  |  Height:  |  Size: 575 B

21
public_html/images/icons/arrow-previous-plain.svg
View File

@@ -1,22 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
viewBox="0 0 6.3102736 9.6969385" viewBox="0 0 12 12"
version="1.1" version="1.1"
id="arrow_first" id="arrow_previous"
width="6.3102736" width="12"
height="9.6969385" height="12"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs <path
id="defs1103" />
<g
id="arrow" id="arrow"
transform="translate(-92.71506,-46.084171)"> style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
<path 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" />
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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 795 B

After

Width:  |  Height:  |  Size: 578 B

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

@@ -117,16 +117,20 @@
<!--% IF folder %--> <!--% IF folder %-->
<!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %--> <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
<!--% END %--> <!--% 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 %--> <!--% 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 %--> <!--% 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 %--> <!--% END %-->
<!--% IF links.next %--> <!--% 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 %--> <!--% 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 %--> <!--% 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 %--> <!--% END %-->