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

Compare commits

base: HPR:i284-Make-the-first-previous-next-latest-navigation-bar-clearer
Branches Tags
HPR:main HPR:i284-Make-the-first-previous-next-latest-navigation-bar-clearer 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 lee:main lee:newsite lee:kdmurrayhpr/main lee:167_Several_templates_use_non-existent_absolute_url lee:I145_Various_bug_fixes lee:I123_Future_episodes_are_not_being_produced lee:I30-Series_name_for_filename
HPR:2023-03 HPR:2023-02 lee:2023-03 lee:2023-02
..
compare: lee:main
Branches Tags
lee:main lee:newsite lee:kdmurrayhpr/main lee:167_Several_templates_use_non-existent_absolute_url lee:I145_Various_bug_fixes lee:I123_Future_episodes_are_not_being_produced lee:I30-Series_name_for_filename HPR:main HPR:i284-Make-the-first-previous-next-latest-navigation-bar-clearer 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
lee:2023-03 lee:2023-02 HPR:2023-03 HPR:2023-02

1 Commits
i284-Make- ... main

Author SHA1 Message Date
Lee Hanken
d972b50582 replace lane button background image with linear gradient 2025-10-23 10:31:22 +01:00
8 changed files with 8 additions and 210 deletions
Expand all files Collapse all files

93
public_html/css/hpr.css
View File

@@ -47,7 +47,6 @@ 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, */;
@@ -350,7 +349,7 @@ article > p,
2px 4px 4px var(--shadow-cards);
transition: 0.3s;
flex: 1 0 100%;
overflow: auto;
overflow-x: scroll;
padding-bottom: 1rem;
}
.lane > article:hover,
@@ -412,8 +411,7 @@ a.lane-button {
border-style: solid;
border-radius: 10px;
text-align: center;
background-image: url("../images/lane-button-background.png");
background: linear-gradient(to bottom, #a9d9db, #d6f0f1);
}
a.lane-button p {
font-family: var(--lane-button-font-family);
@@ -731,50 +729,6 @@ fieldset > table td input[type="radio"] {
clip: rect(0, 0, 0, 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) {
body > header .bounding-box {
justify-content: space-between;
@@ -871,9 +825,6 @@ nav.episodes img {
#host {
gap: 1rem;
}
nav.episodes {
display: inline-block;
}
}
@media (min-width: 900px) {
#podcast_lane > .lane,
@@ -889,43 +840,3 @@ nav.episodes img {
max-width: 30%;
}
}
@media (prefers-color-scheme: dark) {
:root {
--link-primary: #bbdfe7;
--link-header-hover: #b54c08; /* original --link-primary-hover */;
--link-primary-hover: var(--link-secondary-hover);
--background-primary: #4d4d4d; /* HPR Grey */
--text-primary: #dfdfdf /*#fffff7#fafafa#fbfbee #dfdfdf */;
--banner-text-primary: #b6b6b6;
--shadow-secondary-color: hsl(0, 0%, 40%);
--input-border-primary: var(--shadow-secondary-color);
--lane-button-color: #d5e6ea;
}
body > header {
background-image: url("/images/main-header-background-dark.png");
background-color: #22545a;
}
img {
filter: brightness(0.70);
}
a.lane-button {
background-image: url("/images/lane-button-background-dark.png");
color: var(--lane-button-color);
}
a.lane-button img {
filter: none;
}
.lane > article > header {
color: var(--text-secondary);
}
#title a:hover {
color: var(--link-header-hover);
}
#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);
}
}

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

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

Before

Width:  |  Height:  |  Size: 1.1 KiB

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

@@ -1,35 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 1.3 KiB

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

@@ -1,22 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 789 B

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

@@ -1,22 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 795 B

BIN
public_html/images/lane-button-background-dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
public_html/images/main-header-background-dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 611 KiB

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

@@ -117,16 +117,16 @@
<!--% IF folder %-->
<!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
<!--% 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>,
<small><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first">&lt;&lt; First</a>,
<!--% 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>,
<a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous">&lt; Previous</a>,
<!--% ELSE %-->
<span class="no-link"><img src="/images/icons/arrow-previous-plain.svg" alt="<">Previous</span>,
<span>&lt;</span> Previous,
<!--% END %-->
<!--% 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>,
<a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next &gt;</a>,
<!--% ELSE %-->
<span class="no-link">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></span>,
Next <span>&gt;</span>
<!--% 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>
<a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest &gt;&gt;</a></small>
<!--% END %-->