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

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!

README.md

@@ -68,5 +68,5 @@ and add the label "**Feature Request**".
 * Ken Fallon
 * norrist
 * Paul Jewell
-
+* Lee Hanken
 

public_html/css/hpr.css

@@ -47,6 +47,7 @@ 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, */;
@@ -349,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,
@@ -363,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;
@@ -371,22 +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 {
+.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 * {
@@ -605,8 +609,8 @@ fieldset > table td input[type="radio"] {
 }
 #youtube {
 	--video-ratio: calc(390 / 640);
-	width: min(calc(95vw + 0px), 640px);
+	width: min(calc(89vw + 0px), 640px);
-	height: min(calc(calc(95vw + 0px) * var(--video-ratio)), 320px);
+	height: min(calc(calc(89vw + 0px) * var(--video-ratio)), 390px);
 }
 #upload_method pre {
 	max-width: 80vw;
@@ -632,7 +636,7 @@ fieldset > table td input[type="radio"] {
 	margin-bottom: 0.5rem;
 }
 .no-css {
-	display: none;
+	display: none !important;
 }
 #tags .date {
 	margin:0;
@@ -666,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);	
@@ -727,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;
@@ -823,6 +886,9 @@ fieldset > table td input[type="radio"] {
 	#host {
 		gap: 1rem;
 	}
+	nav.episodes {
+		display: inline-block;
+	}
 }
 @media (min-width: 900px) {
 	#podcast_lane > .lane,
@@ -838,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);
+	}
+}

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>

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>

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>

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>

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
 

templates/content-about.tpl.html

@@ -16,9 +16,12 @@
 	<li><a href="<!--% absolute_url(baseurl,'about.html#workflow') %-->">Workflow.</a></li>
 	<li><a href="<!--% absolute_url(baseurl,'about.html#faq') %-->">Frequently Asked Questions.</a></li>
 </ul>
-
+<div class="lane stack">
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="about">About HPR<a href="<!--% absolute_url(baseurl,'about.html#about') %-->">.</a></h1>
-
+	</header>
 <h2 id="community">The HPR Community<a href="<!--% absolute_url(baseurl,'about.html#community') %-->">.</a></h2>
 <p>What differentiates HPR from other podcasts is that the shows are crowd sourced from the community - 
 fellow listeners like <strong><a href="<!--% absolute_url(baseurl,'about.html#contact') %-->">you</a></strong>. 
@@ -40,7 +43,7 @@ You can copy and redistribute the shows for free provided you adhere to the
 <p>Hacker Public Radio (HPR) is an Internet Radio show (podcast) that releases shows every weekday Monday through Friday. 
 HPR has a long lineage going back to <a href="https://web.archive.org/web/20230323053905/http://www.oldskoolphreak.com/" >Radio FreeK America</a>, 
 <a href="https://web.archive.org/web/20220123174618/https://www.binrev.com/forums/" >Binary Revolution Radio</a> &amp; <a href="https://web.archive.org/web/20150208172826/http://www.nomicon.info/" >Infonomicon</a>, 
-and it is a rename of <a href="<!--% absolute_url(baseurl,'twat.html') %-->" >Today With a Techie</a> radio.
+and it is a rename of <a href="<!--% absolute_url(baseurl,'eps/index.html#twt_episodes') %-->" >Today With a Techie</a> radio.
 Please listen to StankDawg&#39;s &quot;<a href="<!--% media_path(1, 'hpr', 'mp3', baseurl, media_baseurl) %-->" >
 	Introduction to HPR</a>&quot; for more information.</p>
 
@@ -64,6 +67,7 @@ The schedule for the Community News shows can be downloaded as an <a href="<!--%
 <p>Our hosting is kindly provided to us by <a href="<!--% absolute_url(baseurl,'correspondents/0174.html') %-->">Josh Knapp</a> from <a href="https://anhonesthost.com/hosting/shared-hosting">AnHonestHost.com</a>, and he has the last word in issues related to site security. A changing team of volunteers called the "admins" or "Janitors", deal with the day to day operation of HPR. Acting as the first point of contact, processing the shows, coordinating policy discussions, removing spam, updating the website, etc. They are contactable via the email account admin @ HPR. They have no more say over policy than anyone else. Anyone who has shown a long term dedication to the project and is trusted by the community, can become an admin. 
 </p>
 <p>See the section <a href="<!--% absolute_url(baseurl,'about.html#stuff_you_need_to_know') %-->" >stuff you need to know</a> for more information.</p>
+
 <h3 id="recent_policy_changes">Recent Policy Changes</h3>
 <ul>
 	<li><a href="https://lists.hackerpublicradio.com/pipermail/hpr/2024-October/004791.html">Clarification that contributions are CC BY-SA 4.0 unless otherwise stated</a></li>
@@ -76,6 +80,7 @@ The schedule for the Community News shows can be downloaded as an <a href="<!--%
 	<li><a href="https://lists.hackerpublicradio.com/pipermail/hpr/2021-December/004341.html">Removal of "by arranged permission" 
 			when posting to HPR</a></li>
 </ul>
+
 <h2 id ="patrons" >Please support our Patrons<a href="<!--% absolute_url(baseurl,'about.html#patrons') %-->">.</a></h2>
 <p>
 Our hosting is kindly provided by <a href="<!--% absolute_url(baseurl) %-->correspondents/0174.html">Josh</a> from 
@@ -87,11 +92,14 @@ reduce his costs in funding the hosting. He is also accepting bitcoins to <em>1K
 Please also consider supporting the <a href="https://archive.org/donate/">https://archive.org/donate/</a> who are 
 now hosting our media files.
 </p>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
-<h1 id="contact">Primary Contact Points<a href="<!--% absolute_url(baseurl,'about.html#contact') %-->">.</a></h1>
+	<header>
-
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="contact">Contact<a href="<!--% absolute_url(baseurl,'about.html#contact') %-->">.</a></h1>
+	</header>
+<h2 id="contact_primary">Primary Contact Points</h2>
 <ul>
 	<li>email: <strong>admin -at- hackerpublicradio org</strong>, will put you in touch with the Janitors who are 
 		the first point of contact for any issues related to the HPR community. 
@@ -110,7 +118,7 @@ now hosting our media files.
 	<li>Matrix: <a href="https://matrix.to/#/#hpr:matrix.org" >https://matrix.to/#/#hpr:matrix.org</a> is the official HPR Matrix channel
 		and is actively monitored.</li>
 </ul>
-<h3 id="contact_secondary">Secondary Contact Points</h3>
+<h2 id="contact_secondary">Secondary Contact Points</h2>
 <p>These platforms are monitored from time to time. Commenting here is less likely to get an immediate response.</p>
 <ul>
 	<li><a href="https://t.me/+6fEhQrf5IEc4ZGU8">Telegram</a></li>
@@ -119,10 +127,13 @@ now hosting our media files.
 	<li><a href="https://www.linkedin.com/company/hackerpublicradio/" >Linked-In</a></li>
 	<li><a href="http://itunes.apple.com/us/podcast/hacker-public-radio/id281699640" >iTunes</a></li>
 </ul>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id ="press" >In the Press<a href="<!--% absolute_url(baseurl,'about.html#press') %-->">.</a></h1>
+	</header>
 <ul>
 	<li>2019-10-18: <a href="https://blog.feedspot.com/hacker_podcasts/">Top 10 Hacker Podcasts You Must Follow in 2019</a> (<a href="<!--% absolute_url(baseurl,'press/2019-10-18_blog.feedspot.com-hacker_podcasts-Top_10_Hacker_Podcasts_You_Must_Follow_in_2019.pdf') %-->">Archived</a>)</li>
 	<li>2018-08-01: <a href="https://www.linuxlinks.com/review-hacker-public-radio-podcasts-hacker-community/">Review: The Linux Podcast Scene - all the movers and shakers</a> (<a href="<!--% absolute_url(baseurl,'press/2018-08-01_linuxlinks.com_review-linux-podcast-scene-movers-shakers.pdf') %-->">Archived</a>)</li>
@@ -137,10 +148,13 @@ now hosting our media files.
 	<li>2012-12-24: <a href="http://www.maketecheasier.com/10-great-podcasts-for-linux-open-source-geeks/">10 Great Podcasts for Linux &amp; Open Source Geeks</a> by Rebecca "Ruji" Chapnik (<a href="<!--% absolute_url(baseurl,'press/2012-12-24_10-great-podcasts-for-linux-open-source-geeks.pdf') %-->">Archived</a>)</li>
 	<li>2011-08-01: <a href="http://www.linuxformat.com/archives?issue=147">Linux Format: Pick the perfect geek podcast in our roundup</a> by Mayank Sharma in Linux Format Magazine(<a href="<!--% absolute_url(baseurl,'press/2011-08-01_hpr-linux-format.png') %-->">Archive</a>)</li>
 </ul>
-
+</article>
-<hr>
+<hr class="no-css">
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="how_to_help">How to Help<a href="<!--% absolute_url(baseurl,'about.html#how_to_help') %-->">.</a></h1>
-
+	</header>
 <p>
 Hacker Public Radio is a communty podcast where the shows are provided by the community, and is also
 <a href="<!--% absolute_url(baseurl,'about.html#governance') %-->">governed</a> by the community, 
@@ -182,10 +196,13 @@ You can help by:
 	<li>Improving the documentation on our gittea repo</li>
 	<li><a href="<!--% absolute_url(baseurl,'about.html#patrons') %-->">Support our Patrons</a></li>
 </ul>
-
+</article>
-<hr>
+<hr class="no-css">
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="download">Download Archive<a href="<!--% absolute_url(baseurl,'about.html#download') %-->">.</a></h1>
-
+	</header>
 <p>Please be aware that our Archive exceeds <strong>62Gb</strong> <em>(Ogg: 21Gb, Spx: 16Gb, mp3: 25Gb)</em>. We are happy for you to download them, but please make sure that you are not going to incur additional bandwidth charges on your side.</p>
 
 <p>We will be happy to post you the episodes on physical media anywhere in the world if bandwidth is an issue.</p>
@@ -206,11 +223,13 @@ You can download the audio of the episodes directly from the command line using
 	<li>mp3:<br>
 		<span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].mp3' -o "hpr#1.mp3"</span></li>
 </ul>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="so_you_want_to_record_a_podcast">So you want to record a podcast<a href="<!--% absolute_url(baseurl,'about.html#so_you_want_to_record_a_podcast') %-->">.</a></h1>
-
+	</header>
 <p>Well you've come to the right place. Our goal here at HPR is to make it as easy as possible for you to get a podcast released. We take care of the hard bits so you don't need to. Recording your first show is always a daunting prospect but <a href="<!--% absolute_url(baseurl) %-->correspondents/index.html">hundreds of people</a> like yourself have done it and so can you.
 </p>
 
@@ -321,11 +340,13 @@ people who will help.
 <a href="https://web.libera.chat/gamja/?channels=oggcastplanet">#oggcastplanet</a> channel on libera.chat 
 and chat with a live person 24/7.
 </p>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="requested_topics">Requested topics<a href="<!--% absolute_url(baseurl,'about.html#requested_topics') %-->">.</a></h1>
-
+	</header>
 <p>This is a list of topics that have been requested by the community. 
 Feel free to add it to the list by emailing admin at hpr or by tweeting us on <a href="https://twitter.com/hpr">@HPR</a>.</p>
 <ul>
@@ -393,10 +414,13 @@ Feel free to add it to the list by emailing admin at hpr or by tweeting us on <a
 	<li>#IPFS (and don't leave out IPNS!). I'd really like to get a better understanding of practical use of this.</li>
 	<li>Any experiences integrating Dell/Wyse thin- and zero- clients into linux networks.</li>
 </ul>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="agreement">Stuff you need to know<a href="<!--% absolute_url(baseurl,'about.html#agreement') %-->">.</a></h1>
+	</header>
 <p>
 This is some important information that you will need to know before uploading to HPR.
 </p>
@@ -597,8 +621,6 @@ They will be used on a first come first go basis, when there is no conflict with
 These shows contain a message alerting listeners to the fact that we had free slots that were not filled.
 </p>
 
-<hr>
-
 <h1 id="scheduling_guidelines">Scheduling Guidelines</h1>
 <ol>
 	<li>You must have your audio recording ready to upload <strong>before</strong> you pick a slot.</li>
@@ -609,10 +631,13 @@ These shows contain a message alerting listeners to the fact that we had free sl
 	<li>If you are uploading a series of shows then post them one every two weeks.</li>
 	<li>If you have a non urgent show that is timeless, then add it to the <a href="<!--% absolute_url(baseurl,'about.html#reserve_queue') %-->">Reserve Queue</a>.</li>
 </ol>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="recording_a_podcast">Recording a Podcast</h1>
+	</header>
 <p>
 On this page you will find information on how to record a podcast. Our golden rule is <strong>Any audio is better than no audio.</strong> 
 so keep that in mind. Don't forget to <strong>introduce yourself</strong> in your show.
@@ -725,12 +750,13 @@ We will by default mix down your show to one channel mono and we will
 <p>
 There is no need to add any information to the file as that will be inserted based on the information you fill in when you upload the show.
 </p>
-
+</article>
-
+<hr class="no-css">
-<hr>
+<article>
-
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="promote_hpr">Please promote HPR<a href="<!--% absolute_url(baseurl,'about.html#promote_hpr') %-->') %-->">.</a></h1>
-
+	</header>
 <p>Feel free to use the promotional material to spread the word in your podcasts, or have them played on to other shows.</p>
 <h2>General HPR promotion</h2>
 <ul>
@@ -746,10 +772,13 @@ There is no need to add any information to the file as that will be inserted bas
 <ul>
 	<li><a href="<!--% absolute_url(baseurl) %-->promos/hpr-nye-promo.ogg">HPR New Years Promo</a></li>
 </ul>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="requesting_slot">Picking a slot for your show</h1>
+	</header>
 <p>
 Any host can select any free slot a up to year in advance, by recording their show and uploading it to the desired slot. 
 In exceptional circumstances it may be necessary to reserve a slot while not having the audio available, 
@@ -792,10 +821,13 @@ Once you open the link, you can fill in the information at your leisure.
 The upload form works on the assumption you will be posting one show at a time, from the same IP address. 
 Once you have pressed submit you will not be able to edit any of the information.
 </p>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="adding_an_episode">Adding an Episode</h1>
+	</header>
 <p>
 The unique link sent by email will allow you to manage both the episode and information about yourself that is displayed on HPR. 
 The following information will be requested:
@@ -929,11 +961,13 @@ Press submit and your show will be sent to the HPR Volunteers to be processed.
 Keep an eye on the <a href="<!--% hub_baseurl %-->calendar.php">calendar</a> for when it is posted.
 Your show information is used to process the media files, on the website, in the RSS feeds, and on social media sites.
 </p>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="workflow">Workflow</h1>
-
+	</header>
 <ol>
 	<li>REQUEST_UNVERIFIED    - </li>
 	<li>REQUEST_EMAIL_SENT    - email sent</li>
@@ -945,10 +979,13 @@ Your show information is used to process the media files, on the website, in the
 	<li>UPLOADED_TO_IA        - on the IA and visible</li>
 	<li>UPLOADED_TO_RSYNC_NET - archived on rsync.net</li>
 </ol>
-
+</article>
-<hr>
+<hr class="no-css">
-
+<article>
+	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="faq">Frequently Asked Questions</h1>
+	</header>
 <h2 data-number="0.1" id="what-is-hacker-public-radio"><span class="header-section-number">0.1</span> What is Hacker Public Radio?</h2>
 <ul>
 	<li><p>Hacker Public Radio (HPR) is an Internet Radio show (podcast) that releases shows (episodes) 
@@ -1183,3 +1220,5 @@ for your show. This will be up for enough time to get the key necessary for to p
 However keep in mind that we will be very suspicious of any submission done this way and will be checking it in detail, 
 so expect delays in processing.
 </p>
+</article>
+</div>

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); %-->
+			<!--% twt_shows_to_count = query_twt_show_count.execute(id); %-->
-			<!--% twat_shows = query_twat_shows.execute(id); %-->
+			<!--% twt_shows = query_twt_shows.execute(id); %-->
-			<!--% twat_show_count = 0 %-->
+			<!--% twt_show_count = 0 %-->
-			<!--% FOREACH show IN twat_shows_to_count %-->
+			<!--% FOREACH show IN twt_shows_to_count %-->
-			<!--% twat_show_count = twat_show_count +1; %-->
+			<!--% 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') %-->
+					<!--% twt_show_summary(twt_show, 'hide_host') %-->
-					<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
+					<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>

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>
+		<td><a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(host.hostid) %-->.html"><strong><!--% host.host %--></strong><br>
-
+			Host ID: <!--% host.hostid %--></a></td>
-			Host ID: <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(host.hostid) %-->.html"><!--% 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>

templates/content-episodes.tpl.html

@@ -20,7 +20,7 @@
 		<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 stack">
-	<!--% FOREACH twat_episode IN DBI.query('
+	<!--% FOREACH twt_episode IN DBI.query('
 	SELECT 
         eps.id, 
         eps.explicit, 
@@ -36,7 +36,7 @@
 	') 
 %-->
 	<article>
-	<!--% twat_show_summary(twat_episode) %-->
+	<!--% twt_show_summary(twt_episode) %-->
  </article>
 <!--% END %-->
 	</div>

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>

templates/content-twt_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) %-->
+<!--% listen_now(episode, "twt", baseurl, media_baseurl) %-->
-<!--% display_listen_in(episode.id, "twat") %-->  
+<!--% 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>

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>

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 %-->