Merge pull request 'Make host link click target larger on hosts listings page' (#293 ) from i277_Make-the-entire-Host-tile-a-link into main

Reviewed-on: #293
Make host link click target larger on hosts listings page
2025-11-03 14:18:15 +00:00 · 2025-11-02 10:38:05 -05:00 · 2025-11-02 12:37:31 +00:00 · 2025-11-02 00:58:51 -04:00 · 2025-11-01 21:08:42 -04:00 · 2025-11-02 00:43:05 +00:00
25 changed files with 1494 additions and 1206 deletions
--- a/NEWSITE_CONTRIBUTERS.md
+++ b/NEWSITE_CONTRIBUTERS.md
@@ -0,0 +1,17 @@
+# Basic Concept, Design and Guiding Light
+
+* Ken Fallon
+
+# Implementaion and Design Touches
+
+* Lee Hanken
+* Roan Horning
+
+# Constructive Feedback and Forward Looks
+
+* Archer72 (Mark Rice)
+* Dave Morris
+* kwoot
+
+Thanks to all the contributers who helped give HPR 
+its 2025 facelift!
--- a/README.md
+++ b/README.md
@@ -68,5 +68,5 @@ and add the label "**Feature Request**".
 * Ken Fallon
 * norrist
 * Paul Jewell
-
+* Lee Hanken

--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -10,7 +10,11 @@ https://creativecommons.org/publicdomain/
 *		-- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
 *	- Matthew James Tayler: Responsive Font Size (Optimal Text at Every Breakpoint) 
 *		-- https://matthewjamestaylor.com/responsive-font-size
- *	- CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
+ *	- CSS-Tricks: Linearly Scale font-size with CSS c
+ *	#welcome > p {
+ *	font-size: 1.25rem;
+ *	font-weight: 450;
+ *	}lamp() Based on the Viewport
 *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
 */

@@ -43,10 +47,12 @@ 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, */;
 	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
+	--font-size-emphasis: clamp(1.1rem, 15px + 0.3vw, 1.25rem);

 	--logo-font-family: var(--font-family-hpr);  
 	--logo-font-weight: bolder;
@@ -327,9 +333,13 @@ article > p,
 #podcast_lane > .lane,
 #project_lane > .lane,
 #latest_lane.lane {
-	justify-content: flex-between;
+	justify-content: space-around;
 }
 .lane > article,
+#welcome > p {
+	font-size: var(--font-size-emphasis);
+	font-weight: 450;
+}
 #hosts tr {
 	/* Add shadows to create the "card" effect */
 	border-top: thin solid var(--shadow-cards);
@@ -340,7 +350,7 @@ article > p,
      2px 4px 4px var(--shadow-cards);
 	transition: 0.3s;
 	flex: 1 0 100%;
-	overflow-x: scroll;
+	overflow: auto;
 	padding-bottom: 1rem;
 }
 .lane > article:hover,
@@ -354,7 +364,7 @@ article > p,
 	margin-right: 1rem;
 }
 .lane > article > header,
-.lane > article > h3 {
+.lane > article > h3:first-child {
 	background: var(--background-secondary);
 	padding: 1.5rem 1rem 1rem 1rem;
 	margin: 0;
@@ -362,12 +372,25 @@ article > p,
 	font-size: 1.45rem;
 	color: var(--background-primary);
 }
+.lane > article > header > .index-link {
+	float: right;
+}
+.lane.stack > article  {
+	border-radius: 0.5rem;
+	border: thin solid var(--background-secondary);
+	max-width: calc(100vw - 12px);
+}
+.lane.stack > article > header,
+.lane.stack > article > h3:first-child {
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+}
 .lane > article > header a,
-.lane > article > h3 a {
+.lane > article > h3:first-child a {
 	color: var(--link-secondary);
 }
 .lane > article > header a:hover,
-.lane > article > h3:hover {
+.lane > article > h3:first-child:hover {
 	color: var(--link-secondary-hover);
 }
 .lane.stack> * > header * {
@@ -533,46 +556,66 @@ fieldset > table td select {
 	display: block;
 	font-size: 1rem;
 }
-
 fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-fieldset > input,
-fieldset > table td input,
-fieldset > table td textarea {
-	width: calc(100vw + -16vw + -1.5rem);
-	max-width: 100%;
+input {
 	border: thin solid var(--input-border-primary);
 	border-radius: 0.2rem;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
-
-fieldset > table td select {
-	appearance: none;
+input[type="submit"] {
+	background-color: var(--background-secondary);
+	color: var(--text-secondary);
+	font-weight: 400;
+	width: fit-content;
+}
+input[type="submit"]:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--background-primary);
+}
+select {
+	appearance: auto;
 	background: var(--background-primary);
 	color: var(--text-primary);
-	width: calc(100vw + -16vw + -0.40rem);
 	border: 1px solid var(--input-border-primary);
 	border-radius: 0.25rem;
 	cursor: pointer;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
-fieldset > table td select:focus{
+select:focus{
    background: var(--background-secondary);
 	color: var(--text-secondary);
-}
-fieldset > table td select:active {
+}select:active {
    background: var(--background-secondary);
 	color: var(--text-primary);
 }
+fieldset > input,
+fieldset > table td input,
+fieldset > table td textarea {
+	width: calc(100vw + -16vw + -1.5rem);
+	max-width: 100%;
+}
+fieldset > table td select {
+	width: calc(100vw + -16vw + -0.40rem);
+}
 fieldset > table td input[type="radio"] {
 	display: initial;
 	width: initial;
 	margin-bottom: 0.5rem;
 }
+#youtube {
+	--video-ratio: calc(390 / 640);
+	width: min(calc(89vw + 0px), 640px);
+	height: min(calc(calc(89vw + 0px) * var(--video-ratio)), 390px);
+}
+#upload_method pre {
+	max-width: 80vw;
+	overflow-x: scroll;
+}
 #search form {
 	flex: 1 1 100%;
 }
@@ -586,20 +629,14 @@ fieldset > table td input[type="radio"] {
 	width: 94%;
 }
 #search fieldset > input[type="submit"] {
-	background-color: var(--background-secondary);
-	color: var(--text-secondary);
 	width: 100%;
 }
-#search fieldset > input[type="submit"]:hover {
-	background-color: var(--link-primary-hover);
-	color: var(--background-primary);
-}
 #search fieldset > p {
 	margin-top: 0.5rem;
 	margin-bottom: 0.5rem;
 }
 .no-css {
-	display: none;
+	display: none !important;
 }
 #tags .date {
 	margin:0;
@@ -633,12 +670,20 @@ fieldset > table td input[type="radio"] {
 	background: var(--background-secondary);
 	color: var(--background-primary);
 }
+#hosts td:nth-child(2) {
+    display: inline-flex;
+}
 #hosts td:nth-child(-n+2) a {
 	color: var(--link-secondary);
+	flex: 1;
 }
 #hosts td:nth-child(-n+2) a:hover {
 	color: var(--link-secondary-hover);
 }
+#hosts td:nth-child(-n+2) a strong {
+    display: inline-block;
+	line-height: 1.5rem;
+}
 #hosts td:nth-child(2) {
 	padding: 0.25rem 0 0 8px;
 	width: calc(100% - 90px);	
@@ -694,6 +739,57 @@ 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: solid 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.3em 0.4em 0.1em 0.4em;
+	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-secondary-hover);
+}
+nav.episodes svg {
+	margin: 0 0.2rem;
+	height: 0.85em;
+	max-width: 13px;
+	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) {
 	body > header .bounding-box {
 		justify-content: space-between;
@@ -790,6 +886,9 @@ fieldset > table td input[type="radio"] {
 	#host {
 		gap: 1rem;
 	}
+	nav.episodes {
+		display: inline-block;
+	}
 }
@media (min-width: 900px) {
 	#podcast_lane > .lane,
@@ -805,3 +904,53 @@ fieldset > table td input[type="radio"] {
 		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);
+	}
+	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);
+	}
+}
--- a/public_html/images/contribute-audacity-export-sm.png
+++ b/public_html/images/contribute-audacity-export-sm.png
--- a/public_html/images/contribute-audacity-record-sm.png
+++ b/public_html/images/contribute-audacity-record-sm.png
--- a/public_html/images/contribute-mumble-record-sm.png
+++ b/public_html/images/contribute-mumble-record-sm.png
--- a/public_html/images/icons/arrow-first.svg
+++ b/public_html/images/icons/arrow-first.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_first"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+    <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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" />
+  <rect
+     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="bar"
+     width="2.2"
+     height="11.263"
+     x="0.5"
+     y="0.36860976"
+     rx="0"
+     ry="0.0015425405" />
+</svg>
--- a/public_html/images/icons/arrow-last.svg
+++ b/public_html/images/icons/arrow-last.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_last"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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" />
+  <rect
+     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="bar"
+     width="2.2"
+     height="11.263"
+     x="-11.503481"
+     y="0.40091875"
+     rx="0"
+     ry="0.0015425405"
+     transform="scale(-1,1)" />
+</svg>
--- a/public_html/images/icons/arrow-next.svg
+++ b/public_html/images/icons/arrow-next.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_next"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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" />
+</svg>
--- a/public_html/images/icons/arrow-previous.svg
+++ b/public_html/images/icons/arrow-previous.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_previous"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     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" />
+</svg>
--- a/public_html/images/lane-button-background-dark.png
+++ b/public_html/images/lane-button-background-dark.png
--- a/public_html/images/main-header-background-dark.png
+++ b/public_html/images/main-header-background-dark.png
--- a/site.cfg
+++ b/site.cfg
@@ -10,7 +10,7 @@ driver: dbi:SQLite:hpr.db

 # Configure the location of the templates and the generated HTML
 [app_paths]
-templates_path: ./templates
+templates_path: ./templates:./public_html/images/icons
 output_path: ./public_html

 # Configure the root template page which pulls in the navigation and 
@@ -108,9 +108,9 @@ content: content-sitemap.tpl.html
 navigation: navigation-main.tpl.html
 content: content-tags.tpl.html

-[twat_episode]
+[twt_episode]
 navigation: navigation-get-shows.tpl.html
-content: content-twat_episode.tpl.html
+content: content-twt_episode.tpl.html
 multipage: true
 filename: eps/twt[id]/index.html

--- a/templates/content-about.tpl.html
+++ b/templates/content-about.tpl.html
--- a/templates/content-correspondent.tpl.html
+++ b/templates/content-correspondent.tpl.html
@@ -13,13 +13,13 @@
 	<!--% hpr_show_count = hpr_show_count +1; %-->
 	<!--% END %-->

-	<!--% query_twat_show_count = DBI.prepare('
+	<!--% query_twt_show_count = DBI.prepare('
 		SELECT id
 		FROM twat_eps AS eps
 		WHERE eps.hostid = ?
 		')
 		%-->
-		<!--% query_twat_shows = DBI.prepare('
+		<!--% query_twt_shows = DBI.prepare('
 			SELECT
 			eps.id,
 			CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
@@ -37,11 +37,11 @@
 			ORDER BY eps.id DESC
 			')
 			%-->
-			<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
-			<!--% twat_shows = query_twat_shows.execute(id); %-->
-			<!--% twat_show_count = 0 %-->
-			<!--% FOREACH show IN twat_shows_to_count %-->
-			<!--% twat_show_count = twat_show_count +1; %-->
+			<!--% twt_shows_to_count = query_twt_show_count.execute(id); %-->
+			<!--% twt_shows = query_twt_shows.execute(id); %-->
+			<!--% twt_show_count = 0 %-->
+			<!--% FOREACH show IN twt_shows_to_count %-->
+			<!--% twt_show_count = twt_show_count +1; %-->
 			<!--% END %-->

 			<!--% hosts = DBI.tie('hosts', 'hostid') %-->
@@ -57,7 +57,7 @@
 				<div id="host_meta">
 					<p><label>email:</label> <u><!--% this_host.email %--></u></p>
 					<div><label>profile:</label> <!--% this_host.profile %--></div>
-					<p><label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong></p>
+					<p><label>episodes:</label> <strong><!--% hpr_show_count + twt_show_count %--></strong></p>
 				</div>
 			</div>
 			<div class="lane stack">
@@ -67,12 +67,12 @@
 					<p class="listen-in"><!--% display_listen_in(hpr_show.id) %--></p>
 				</article>
 				<!--% END %-->
-				<!--% FOREACH twat_show IN twat_shows; %-->
+				<!--% FOREACH twt_show IN twt_shows; %-->
 				<article>

-					<!--% twat_show_summary(twat_show, 'hide_host') %-->
-					<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
+					<!--% twt_show_summary(twt_show, 'hide_host') %-->
+					<p class="listen-in"><!--% display_listen_in(twt_show.id,"twt") %--></p>
 				</article>
 				<!--% END %-->
 			</div>
-			<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
+			<p><a href="<!--% absolute_url(baseurl) %-->../about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
--- a/templates/content-correspondents.tpl.html
+++ b/templates/content-correspondents.tpl.html
@@ -1,7 +1,7 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS 'shared-avatar.tpl.html' %-->
 	<h2 class="title">Correspondents</h2>
-	<p>For more information on how to become a Correspondent see our <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">contribute</a></center> page. To add a logo here, either email one to admin at hpr or setup your email on <a href="https://en.gravatar.com/">Gravatar</a>. To protect your browsing privacy we gather the images every hour and serve them directly from HPR.<p />
+	<p>For more information on how to become a Correspondent see our <a href="<!--% absolute_url(baseurl) %-->../about.html#so_you_want_to_record_a_podcast">contribute</a></center> page. To add a logo here, either email one to admin at hpr or setup your email on <a href="https://en.gravatar.com/">Gravatar</a>. To protect your browsing privacy we gather the images every hour and serve them directly from HPR.<p />
 <!--% USE DBI(constants.driver) %-->
 <!--% host_cnt = 0 %-->
 	<table id="hosts" class="hosts lane stack">
@@ -23,13 +23,12 @@
 	<tr class="lane">
 	<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>

-		<td><strong><!--% host.host %--></strong><br>
-
-			Host ID: <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(host.hostid) %-->.html"><!--% host.hostid %--></a></td>
+		<td><a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(host.hostid) %-->.html"><strong><!--% host.host %--></strong><br>
+			Host ID: <!--% host.hostid %--></a></td>
 		<td><!--% host.license %--></td>
 		<td><!--% host.date %--></td>
 	</tr><!--% host_cnt = host_cnt + 1 %-->
 	<!--% END %-->
 	</tbody>
 	</table>
-	<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
+	<p><a href="<!--% absolute_url(baseurl) %-->../about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
--- a/templates/content-episodes.tpl.html
+++ b/templates/content-episodes.tpl.html
@@ -4,7 +4,7 @@
        <p>
        All this information is available to the public. Scrape if you wish but if we can format the data for you then we're happy to help.
        </p>
-<div class="lane">
+<div class="lane stack">
 <!--% USE DBI(constants.driver) %-->
 <!--% FOREACH episodes IN DBI.query(query_episodes) 
 %-->
@@ -19,8 +19,8 @@
 		<!-- Creative Commons License -->
 		<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/"><img alt="Creative Commons License" border="0" src="https://creativecommons.org/images/public/somerights20.png" width="88" height="31" /></a><br>The following work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License</a>.</p>
 	<p>Today With a Techie Radio was brought to you by <a href="https://en.wikipedia.org/wiki/Infonomicon">The Infonomicon Computer Club</a></p>
-	<div class="lane">
-	<!--% FOREACH twat_episode IN DBI.query('
+	<div class="lane stack">
+	<!--% FOREACH twt_episode IN DBI.query('
 	SELECT 
        eps.id, 
        eps.explicit, 
@@ -36,8 +36,9 @@
 	') 
 %-->
 	<article>
-	<!--% twat_show_summary(twat_episode) %-->
+	<!--% twt_show_summary(twt_episode) %-->
 </article>
 <!--% END %-->
+	</div>


--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -36,7 +36,6 @@

 	<!--% delta = date.calc.N_Delta_YMD(2005,9,19, date.format(date.now, '%Y'),date.format(date.now, '%m'),date.format(date.now, '%d')) %-->
 	<section id="welcome">
-		<header><h2>Welcome</h2></header>
 		<p>Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a welcoming community that offers positive feedback and encourages respectful debate.</p>
 		<div id="call_for_shows">
 			<!--% display_call_for_shows() %-->
@@ -50,7 +49,7 @@
 			<p>Record</p>
 	  </a>
 	  <br class="no-css">
-<a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
+	  <a class="lane-button" href="<!--% hub_baseurl %-->calendar.php">
 			<img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="" height="110">
 			<p>Schedule</p>
 	  </a>
--- a/templates/content-syndication.tpl.html
+++ b/templates/content-syndication.tpl.html
@@ -78,7 +78,7 @@
 <div>
 <hr class="no-css">
 <h1>Other Download Options</h1>
-<div class="lane syndication">
+<div class="lane stack">
 <article>
  <header>
    <h2>Site Replication Sources</h2>
--- a/templates/content-twat_episode.tpl.html
+++ b/templates/content-twat_episode.tpl.html
@@ -55,8 +55,8 @@
 <p><!--% show_avatar(episode.hostid, episode.host) %-->
 Hosted by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(episode.hostid) %-->.html"><!--% episode.host %--></a> on <span><!--% day_and_date(episode.date) %--></span> is flagged as <span><!--% display_explicit(episode.explicit) %--></span> and is released under a <span><!--% episode.license %--> license</span>. <br>
 <!--% display_tags(episode.tags) %--> <br>
-<!--% listen_now(episode, "twat", baseurl, media_baseurl) %-->
-<!--% display_listen_in(episode.id, "twat") %-->  
+<!--% listen_now(episode, "twt", baseurl, media_baseurl) %-->
+<!--% display_listen_in(episode.id, "twt") %-->  
 </p>
 <h3><!--% show_series(episode.series, episode.seriesid, "Part of the series") %--></h3> 
 <p><em><!--% episode.series_description %--></em></p>
--- a/templates/ids-twat_episode.tpl.html
+++ b/templates/ids-twat_episode.tpl.html
--- a/templates/page.tpl.html
+++ b/templates/page.tpl.html
@@ -12,7 +12,7 @@
  <meta http-equiv="last-modified" content="<!--% format_feed_date(date.now) %-->">
  <meta name="keywords" content="Technology, Tech News, Education, Training" />
  <meta name="description" content="Hacker Public Radio is a podcast that releases shows every weekday Monday through Friday. Our shows are produced by the community (you) and can be on any topic that is of interest to hackers and hobbyists." />
-  <link rel="shortcut icon" href="<!--% absolute_url(baseurl) %-->hpr.ico" >
+  <link rel="shortcut icon" href="/hpr.ico" >
  <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Opus RSS" href="<!--% absolute_path(baseurl) %-->hpr_opus_rss.php" />
  <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Ogg Vorbis RSS" href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php" />
  <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio MP3 RSS" href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php" />
--- a/templates/rss-comments.tpl.xml
+++ b/templates/rss-comments.tpl.xml
@@ -50,11 +50,11 @@
  %-->

  <item>
-    <title><!--% item.comment_author_name | html_strip | xml_entity %--> says: <!--% item.comment_title | html_strip | xml_entity %--></title>
-    <author>feedback.nospam@nospam.hackerpublicradio.org (<!--% item.comment_author_name | html_strip | xml_entity %-->)</author>
+    <title><!--% item.comment_author_name | html_strip  %--> says: <!--% item.comment_title | html_strip  %--></title>
+    <author>feedback.nospam@nospam.hackerpublicradio.org (<!--% item.comment_author_name | html_strip  %-->)</author>
    <link><!--% absolute_url(http_baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comments</link>
    <description><![CDATA[<strong>
-    RE: hpr<!--% zero_pad_left(item.eps_id) %-->::<!--% item.episode_date %--> <em><!--% item.episode_title | html_strip | xml_entity %--></em> by <a href="<!--% absolute_url(http_baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a></strong><!--% rss_show_series(item.series_name, item.series_id) | html_strip | xml_entity %--><br />
+    RE: hpr<!--% zero_pad_left(item.eps_id) %-->::<!--% item.episode_date %--> <em><!--% item.episode_title | html_strip  %--></em> by <a href="<!--% absolute_url(http_baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a></strong><!--% rss_show_series(item.series_name, item.series_id) | html_strip  %--><br />
 <!--% display_episode_duration(item.episode_duration) %--><!--% display_listen_in(item.eps_id) %--><br /><!--% item.comment_text FILTER html_line_break %-->
 ]]></description>
    <pubDate><!--% format_feed_date(item.comment_timestamp) %--></pubDate>
--- a/templates/shared-episode-summary.tpl.html
+++ b/templates/shared-episode-summary.tpl.html
@@ -56,7 +56,7 @@ or
 	<p class="summary"><!--% show.summary %--></p>
 <!--% END %-->

-<!--% MACRO twat_show_summary(show, hide_host) BLOCK %-->
+<!--% MACRO twt_show_summary(show, hide_host) BLOCK %-->

 	<h3 class="title"><a href="<!--% absolute_path(baseurl) %-->eps/twt<!--% zero_pad_left(show.id) %-->/index.html">Today with a Techie Ep.<!--% show.id %--> :: <!--% show.title %--></a> <!--% IF hide_host == "" %--> 
 		hosted by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(show.hostid) %-->.html"><!--% show.host %--></a>
--- a/templates/shared-utils.tpl.html
+++ b/templates/shared-utils.tpl.html
@@ -93,7 +93,7 @@
 <!--% END %-->

 <!--% MACRO media_path(episode_id, episode_type, media_type, baseurl, media_baseurl) BLOCK %-->
-        <!--% IF episode_type == "twat" %-->
+        <!--% IF episode_type == "twt" %-->
                <!--% episode_type = "twt" %-->
                <!--% padding = 3 %-->
                <!--% media_folder = "eps/"; padding = 3 %-->
@@ -117,16 +117,20 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<small><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first">&lt;&lt; First</a>,
+<!--% arrow_first = "arrow-first.svg" %--> 
+<!--% arrow_prev = "arrow-previous.svg" %--> 
+<!--% arrow_next = "arrow-next.svg" %--> 
+<!--% arrow_last = "arrow-last.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 %-->
-    <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"><!--% INSERT $arrow_prev %--><span class="no-css">&lt; </span>Previous</a></span>,
    <!--% ELSE %-->
-    <span>&lt;</span> Previous,
+    <span class="no-link"><!--% INSERT $arrow_prev %--><span class="no-css">&lt; </span>Previous</span>,
    <!--% END %-->
    <!--% 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<span class="no-css"> &gt;</span><!--% INSERT $arrow_next %--></a></span>, 
    <!--% ELSE %-->
-    Next <span>&gt;</span>
+	<span class="no-link">Next<span class="no-css"> &gt;</span><!--% INSERT $arrow_next %--></span>, 
    <!--% 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<span class="no-css"> &gt;&gt;</span><!--% INSERT $arrow_last %--></a></span></nav>
 <!--% END %-->
Author	SHA1	Message	Date
Roan Horning	2f779fb9d0	Merge pull request 'Make host link click target larger on hosts listings page' (#293 ) from i277_Make-the-entire-Host-tile-a-link into main Reviewed-on: #293	2025-11-03 14:18:15 +00:00
Roan Horning	7a02c7b1c1	Make host link click target larger on hosts listings page In effect, make the whole table cell a link.	2025-11-02 10:38:05 -05:00
Roan Horning	48fbd272e4	Merge pull request '[i289] Rename Today with a Techie acronym references' (#292 ) from i289_Rename-Today-with-a-Techie-acronym-references into main Reviewed-on: #292	2025-11-02 12:37:31 +00:00
Roan Horning	b850c51e4f	Change variable names to twt_...	2025-11-02 00:58:51 -04:00
Roan Horning	3bf5769b52	Rename template files	2025-11-01 21:08:42 -04:00
Roan Horning	67e56ea102	Merge pull request '[I289] Fix relative link to about page' (#290 ) from i289_Become-a-Correspondent-link-fails into main Reviewed-on: #290	2025-11-02 00:43:05 +00:00
Roan Horning	2c9e75bf1a	Fix relative link to about page	2025-11-01 20:38:33 -04:00
Roan Horning	ccc904c691	Merge pull request '[i 284] Make the first previous next latest navigation bar clearer' (#288 ) from i284-Make-the-first-previous-next-latest-navigation-bar-clearer into main Reviewed-on: #288	2025-10-31 14:06:13 +00:00
Roan Horning	d0c371a0f9	Add arrow icon path to generator templates path	2025-10-31 09:59:00 -04:00
Roan Horning	466ef289b1	Tweak espisode navigation button padding	2025-10-31 09:45:31 -04:00
Roan Horning	b5755ddedb	Rename arrow icons	2025-10-31 09:33:00 -04:00
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
Roan Horning	b122f7c1c0	Make episode navigation links more button like	2025-10-26 00:45:34 -04:00
Roan Horning	70fd148928	Clean up arrow icons	2025-10-26 00:44:10 -04:00
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
Roan Horning	1075833562	Add arrow icons for episode navigation	2025-10-25 16:44:09 -04:00
Roan Horning	fb46c13394	First cut at navigation button style	2025-10-25 16:21:55 -04:00
Roan Horning	f78789fdc4	Merge pull request 'First cut at dark theme' (#287 ) from i275_User-desiresa-Dark-Theme into main Reviewed-on: #287	2025-10-25 18:05:44 +00:00
Roan Horning	4327c15823	Merge branch 'main' into i275_User-desiresa-Dark-Theme	2025-10-25 18:05:17 +00:00
Roan Horning	39c14fb3e4	Fix scrollbar issue on chrome based browsers	2025-10-25 13:44:39 -04:00
Roan Horning	47e1ebf69c	Improve contrast of header and link text for dark theme	2025-10-25 13:06:22 -04:00
Roan Horning	88f9362279	Reduce brightness of images for dark theme	2025-10-25 13:04:15 -04:00
Roan Horning	96e4d9a402	First cut at dark theme Add reduced brightness background images for main header and lane buttons. Use CSS filters to reduce brightness of host page images. Redefine text and background color variables.	2025-10-23 22:07:30 -04:00
Roan Horning	b3e9ccc546	Updating contributors Add page recognizing the contributors to the HPR redesign of 2025.	2025-10-21 22:23:26 -04:00
Roan Horning	5f601251db	Merge pull request '[I-283] Clarify the jump location' (#285 ) from i283_Clarify-the-jump-location into main Reviewed-on: #285	2025-10-18 15:43:02 +00:00
Roan Horning	af2da91d7c	Fix youtube imbed size	2025-10-18 11:11:47 -04:00
Roan Horning	3c7f02a09c	Add go top of page link to major sections Per [issure 283](#283), add a link to each major section of the about page which allows the user to move to the index of topics at the top of the page.	2025-10-18 10:54:57 -04:00
Roan Horning	81c8220e30	"Cardify" the about page Make about page layout consistent with the look of other pages. This also makes each section more visually distinct from the others.	2025-10-18 09:53:33 -04:00
Roan Horning	b694a6f547	Fix syndication page layout	2025-10-18 08:31:46 -04:00
Roan Horning	d0f5fac2b4	Merge pull request 'new website design' (#266 ) from newsite into main Reviewed-on: #266	2025-10-18 03:31:35 +00:00
Roan Horning	82563d0a48	Set max width for "stacked" articles Prevent content from over flowing display width.	2025-10-17 23:17:18 -04:00
Roan Horning	4ff0738531	Fix missing closing tag	2025-10-17 00:03:28 -04:00
Roan Horning	69c298922a	Add rounded border to "stack" articles Not sure when this broke.	2025-10-16 23:41:18 -04:00
Roan Horning	a87e7f12a6	Fix mistyped CSS value	2025-10-14 21:48:08 -04:00
Roan Horning	4fbf32eaa9	Add mobile sized images for the about page	2025-10-13 22:11:45 -04:00
Roan Horning	dc274983fe	Fix sizing of contribute recording images on about page Set size for large displays to 640px	2025-10-13 10:49:43 -04:00
Roan Horning	ee749cf1bb	Overflow pre tag content when larger than viewport width	2025-10-12 23:59:33 -04:00
Roan Horning	6bc40e11c1	Format HTML	2025-10-12 23:57:37 -04:00
Roan Horning	4e853f04f3	Make images and iframe on about page responsive	2025-10-12 23:05:20 -04:00
Roan Horning	fb01dd8e3f	Fix missing list related closing tags	2025-10-12 09:16:03 -04:00
Roan Horning	61aabd8ef1	Fix html tag issues Remove xhtml closing slash to hr and br tags Fix mixed ordered closing tags Remove extraneous closing tags	2025-10-12 08:47:58 -04:00
Roan Horning	b32544f938	Emphasize welcome text on index page	2025-10-12 07:57:33 -04:00
Roan Horning	bca63a36fb	Merge branch 'main' into newsite	2025-10-12 07:35:55 -04:00
Roan Horning	9d1b94f686	Use hub_baseurl variable in schedule lane button link URL	2025-10-09 21:33:57 -04:00
Roan Horning	a9ff01f392	Pull form elements into generic tag references Allow common properties to be easily referenced from both HPR website and Hub website.	2025-10-09 21:27:14 -04:00
Roan Horning	fbcf5be2a6	Set root path to hpr.ico Make sure all pages can reach the hpr.ico image.	2025-10-09 21:25:23 -04:00
Ken Fallon	5310ee1912	Merge pull request 'Remove the xml_entity causing issues with feed' (#281 ) from I280_UTF-8_not_rendering_properly_in_comments_feed into main Reviewed-on: #281 Reviewed-by: Roan Horning <rho_n@josh@dao-mail.com>	2025-09-17 11:35:10 +00:00
Ken Fallon	bc7f7a7347	Remove the xml_entity causing issues with feed	2025-09-16 11:41:57 +02:00