Make episode navigation links more button like

Reviewed-on: HPR/hpr_generator#287

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/bebas/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2012 Patrick Wagesreiter (mail@patrickwagesreiter.at)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public_html/css/hpr.css

@@ -10,55 +10,84 @@ 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/
 */
-@font-face {
+
-  font-family: "GNUTypewriter";
-  src:
-    local("GNUTypewriter"),
-    url("/css/gnutypewriter/gtw.woff") format("woff");
-}
 @font-face {
   font-family: "BebasNeue";
   src:
-    local("BebasNeue"),
+    local("BEBAS NEUE"),
-    url("/css/bebas/BebasNeue.woff") format("woff");
+    url("/css/bebas/BebasNeue.woff2") format("woff2"),
+    url("/css/bebas/BebasNeue.woff") format("woff"),
+    url("/css/bebas/BebasNeue.otf") format("opentype");
 }
 @font-face {
   font-family: "PatrickHand";
   src:
     local("Patrick Hand"),
-    url("/css/PatrickHand/PatrickHand-Regular.ttf") format("ttf");
+	url("/css/patrickhand/PatrickHand-Regular.woff2") format("woff2"),
+    url("/css/patrickhand/PatrickHand-Regular.woff") format("woff"),
+	url("/css/patrickhand/PatrickHand-Regular.ttf") format("truetype");
 }
 :root {
 	--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
 	--text-primary: #4d4d4d; /* HPR Grey */
 	--banner-text-primary: #000000;
-	--background-secondary: #4d4d4d;
+	--banner-background-color: #40a5b9; 
+	/* --background-secondary: #4d4d4d; */
+	--background-secondary: #00003e;
 	--text-secondary: #dfdfdf;
 	--link-primary: #004852 /*#154a60*/;
 	--link-primary-hover: #b54c08/*#f8961e*/;
 	--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;
+	--logo-font-size: 7.5rem;
+	--logo-letter-spacing: -0.65rem;
+	--logo-line-height: 0.75;
+	--logo-margin: 0 0 0.25rem 0;
+
+	--tagline-font-family:"BebasNeue", sans-serif; 
+	--lane-button-font-family: "PatrickHand", var(--font-family-hpr); 
 	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;
 
 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
 
-	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
-	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
 
 	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
 	--shadow-secondary-color: hsl(0, 0%, 30.2%);
 	--shadow-cards: var(--shadow-secondary-color);
+
+	--content-max-width: 1080pt;
+
   /* screen breakpoints */
 	--for-phone-only: 599px;
     --for-tablet-portrait-up: 600px;
     --for-tablet-landscape-up: 900px;
 	--for-desktop-up: 1200px;
     --for-big-desktop-up: 1800px; 
+
+	--default-header-x-font-weight: bold;
+	--default-header-x-margin: 1.25rem 0 0.75rem 0;
+	--default-header-1-font-size: 1.5rem;
+	--default-header-2-font-size: 1.45rem;
+	--default-header-3-font-size: 1.25rem;
+	--default-header-4-font-size: 1.15rem;
 }
 
 html {
@@ -80,24 +109,27 @@ body {
 	padding: 0;
 	min-height: 100vh;
 }
-
+#top_navigation {
-body > nav {
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-between;
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
+	padding: 0.5rem;
 }
-body > nav a {
+#top_navigation > nav a {
 	color: var(--link-secondary);
 }
-body > nav a:hover {
+#top_navigation > nav a:hover {
 	color: var(--link-secondary-hover);
 }
-body > nav ul {
+#top_navigation > nav menu {
 	background-color: inherit;
 	color: inherit;
 	margin: 0;
 	padding: 0.25rem;
 }
-body > nav ul li {
+#top_navigation > nav menu li {
 	display: inline-block;
 	background-color: inherit;
 	color: inherit;
@@ -106,23 +138,30 @@ body > nav ul li {
 	padding: 0;
 	padding-right: var(--link-spacing-horizontal);
 }
-body > nav ul li a {
+#top_navigation > nav menu li a {
 	padding: 0.25rem 0;
 }
 body > header {
+	padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem;
+	background-color: var(--banner-background-color);
+	background-image: url("/images/main-header-background.png");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: left top;
+	color: var(--banner-text-primary);
+	align-items: center;
+	border-top: var(--background-secondary) solid 1rem;
+}
+body > header .bounding-box {
+	background: none;
 	display: flex;
 	flex-direction: row;
 	flex-flow: wrap;
 	justify-content: space-between;
-	padding: 0.25rem;
+	max-width: var(--content-max-width);
-	background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png");
+	margin: 0 auto;
-	background-size: 59%, cover;
-	background-repeat: no-repeat, no-repeat;
-	background-position: right -15px top -20px, left top;
-	color: var(--banner-text-primary);
-	align-items: center;
 }
-body > header > * {
+body > header .bounding-box > * {
 	margin: 0;
 	padding: 0;
 	flex: 1 1 auto;
@@ -132,6 +171,9 @@ body > header > * {
 body > main {
 	flex: 1 0 auto;
 	padding: 0.25rem;
+	max-width: var(--content-max-width);
+	margin-left: auto;
+	margin-right: auto;
 }
 body > footer {
 	flex: 0 1 auto;
@@ -142,6 +184,10 @@ body > footer {
 	text-align: center;
 	line-height: 1.25;
 }
+body > footer #copyright {
+	max-width: var(--content-max-width);
+	margin: 0 auto;
+}
 body > footer a {
 	color: var(--link-secondary);
 }
@@ -174,27 +220,27 @@ blockquote {
 }
 
 h1 {
-	font-size: 1.5rem;
+	font-size: var(--default-header-1-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 h2,
 article * h1,
 section > header:first-child {
-	font-size: 1.45rem;
+	font-size: var(--default-header-2-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 h3,
 article * h2 {
-	font-size: 1.25rem;
+	font-size: var(--default-header-3-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 h4,
 article * h3 {
-	font-size: 1.15rem;
+	font-size: var(--default-header-4-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 img {
@@ -202,7 +248,7 @@ img {
 	height: auto;
 }
 
-ul {
+dl, ul {
 	padding-left: 1.15rem;
 }
 
@@ -213,9 +259,28 @@ li {
 li:last-child {
 	margin-bottom: 0.25rem;
 }
+
+dt, dd {
+	line-height: 1.25;
+}
+
+dt {
+    display: list-item;
+    list-style-type: disc;
+	margin-bottom: 0.15rem;
+}
+
+dd {
+	margin-bottom: 0.35rem;
+	margin-left: 1rem;
+}
+
 a {
-	text-decoration: none;
 	color: var(--link-primary);
+	text-decoration-style: dotted;
+	text-decoration-color: inherit;
+    text-decoration-thickness: .125rem;
+    text-underline-offset: 0.2rem;
 }
 a:hover {
 	cursor: pointer;
@@ -249,7 +314,7 @@ p.meta span label {
 article > p,
 #main_content > p,
 #main_content > section > p {
-	line-height: 1.45;
+	line-height: var(--primary-content-line-height);
 }
 .lane {
 	display: flex;
@@ -257,15 +322,25 @@ article > p,
 	flex-wrap: wrap;
 	gap: 1.0rem;
 	justify-content: space-around;
-	justify-items: space-around;
+}
-
+.lane.stack {
+	flex-direction: column;
+	justify-content: flex-start;
+}
+.lane.stack > * {
+	flex: 1 0 100%;
 }
 #podcast_lane > .lane,
 #project_lane > .lane,
 #latest_lane.lane {
-	justify-content: flex-start;
+	justify-content: space-around;
 }
-.lane > article {
+.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);
 	border-left: thin solid var(--shadow-cards);
@@ -275,10 +350,11 @@ 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 {
+.lane > article:hover,
+#hosts tr:hover {
 	box-shadow: 
       4px 8px 8px var(--shadow-cards),
       8px 16px 16px var(--shadow-cards);
@@ -287,7 +363,8 @@ article > p,
 	margin-left: 1rem;
 	margin-right: 1rem;
 }
-.lane > article > header {
+.lane > article > header,
+.lane > article > h3:first-child {
 	background: var(--background-secondary);
 	padding: 1.5rem 1rem 1rem 1rem;
 	margin: 0;
@@ -295,40 +372,58 @@ article > p,
 	font-size: 1.45rem;
 	color: var(--background-primary);
 }
-.lane > article > header a {
+.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:first-child a {
 	color: var(--link-secondary);
 }
-.lane > article > header a:hover {
+.lane > article > header a:hover,
+.lane > article > h3:first-child:hover {
 	color: var(--link-secondary-hover);
 }
+.lane.stack> * > header * {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+.lane.stack > * > header p {
+	font-size: var(--default-header-4-font-size);
+	margin-left: 22px;
+}
 a.lane-button {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	margin: 0.5rem var(--link-spacing-horizontal);
 	padding: 0.5rem 0.25rem;
-	border-radius: 10px 25px 10px 25px;
+	border-width: 3.5px;
-	border-width: 4px;
 	border-color: var(--lane-button-border);
 	border-style: solid;
 	border-radius: 10px;
 	text-align: center;
-	image-rendering: pixelated;
 	background-image: url("../images/lane-button-background.png");
 
 }
 a.lane-button p {
-	font-family: 'Patrick Hand', cursive;
+	font-family: var(--lane-button-font-family);
 	text-transform: lowercase;
-	font-weight: bold;
+	font-size: 1.4em;
-	font-size: 1.2em;
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 20%;
 	mask-repeat: repeat;
+	mask-size: 10%;
 	background-clip: text;
-	color: black;
 	margin: -0.25rem;
-	transform: scaleY(1.1);
 	letter-spacing: 1px;
 	padding: 0.25rem;
 }
@@ -338,90 +433,108 @@ a.lane-button:hover {
       2px 4px 4px var(--link-primary-hover);
 }
 a.lane-button img {
-	height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
+	height: clamp(100px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
 	transform: scaleX(0.9);		
-	mask-image: url("../images/charcoal.png");		
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 60%;
 	mask-repeat: repeat;
-	padding: 0.7rem;
+	mask-size: 70%;
+	padding: 0.5rem;
   box-sizing: border-box;
 }
 #podcast_lane a.lane-button:first-of-type img {
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 95%;
+	mask-repeat: repeat;
-	padding: 0px;
+	mask-size: 60%;
+	padding: 0.1rem;
 }
 #podcast_lane a.lane-button:first-of-type p {
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	font-size: 1.5rem;
-	font-size: 1.3em;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(1) {
 	border-radius: 20px 15px 25px 15px;
-	background-size: 400%;
-	background-position: 50% 0%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(2) {
 	border-radius: 20px 15px 25px 15px;
-	background-size: 200%;
-	background-position: 0% 50%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(3) {
 	border-radius: 10px 25px 15px 20px;
-	background-size: 400%;
-	background-position: 75% 0%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(4) {
 	border-radius: 15px 15px 10px 20px;
-	background-size: 200%;
-	background-position: 25% 0%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(1) {
 	border-radius: 25px 10px 15px 15px;	
 }
 section:nth-of-type(even) .lane a:nth-of-type(2) {
 	border-radius: 20px 10px 15px 10px;
-	background-size: 200%;
-	background-position: 50% 0%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(3) {
 	border-radius: 10px 20px 10px 15px;
-	background-size: 200%;
-	background-position: % 50%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(4) {
 	border-radius: 15px 10px 25px 30px;
-	background-size: 800%;
-	background-position: 55% 50%;
 }
 #tag_line,
 #title {
 	text-transform: uppercase;
 }
 #tag_line {
-	line-height: 1;
+	line-height: 1.1;
 }
 #tag_line *,
 #title * {
 	margin: 0;
 	padding: 0;
+	flex: 1 1 auto;
+	background: none;
 }
-#title h1 {
+#title {
-	font-size: 7.5rem;
+	background-image:  url("/images/hpr-splatter-logo.svg");
-	letter-spacing: -0.65rem;
+	background-repeat: no-repeat;
-	line-height: 0.75;
+	background-size: 15rem;
+	background-position: left 8.5em top -2em;
 }
-#tag_line h2 {
+#title a {
+	color: var(--link-title-color);
+}
+#title a:hover {
+	color: var(--link-primary-hover);
+}
+#title #site_acronym {
+	font-family: var(--logo-font-family);
+	font-size: var(--logo-font-size);
+	font-weight: var(--logo-font-weight); 
+	letter-spacing: var(--logo-letter-spacing);
+	line-height: var(--logo-line-height);
+	margin: var(--logo-margin);
+	color: transparent;
+}
+#title #site_acronym a {
+	text-decoration: none;
+	text-shadow: 0 1px var(--link-secondary);
+}
+#title #site_name {
+	font-size: var(--default-header-2-font-size);
+	font-weight: bold;
+}
+#tag_line {
+	text-align: center;
+}
+#tag_line #tag1,
+#tag_line #tag2 {
 	text-transform: uppercase;
-	font-family: "BebasNeue", sans-serif;
+	font-family: var(--tagline-font-family);
-	font-size: 1.15rem;
+	font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size));
+	font-weight: var(--default-header-x-font-weight);
 	letter-spacing: 0.05rem;
 }
-#tag_line h2:first-child {
+#tag_line #tag1 {
-	font-size: 2rem;
+	font-size: clamp(2.1rem, calc(100vw - 360px + 1rem), 2.3rem);;
 }
-#tag_line h3 {
+#tag_line #tag3 {
+	text-align: center;
 	text-transform: capitalize;
-	font-size: 1.15rem;
+	font-weight: var(--default-header-x-font-weight);
 }
 #site_url {
 	font-family: "GNUTypewriter", monospace;
@@ -443,81 +556,247 @@ fieldset > table td select {
 	display: block;
 	font-size: 1rem;
 }
-
 fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-
+input {
-fieldset > table td input,
-fieldset > table td textarea {
-	width: calc(100vw + -16vw + -1.5rem);
-	max-width: 100%;
 	border: thin solid var(--input-border-primary);
 	border-radius: 0.2rem;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
-
+input[type="submit"] {
-fieldset > table td select {
+	background-color: var(--background-secondary);
-	appearance: none;
+	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);
-}
+}select:active {
-fieldset > table td 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 {
-fieldset > input {
+	--video-ratio: calc(390 / 640);
-	background: var(--background-secondary);
+	width: min(calc(89vw + 0px), 640px);
-	color: white;
+	height: min(calc(calc(89vw + 0px) * var(--video-ratio)), 390px);
-	font-weight: 600;
+}
-	padding: 0.5rem;
+#upload_method pre {
-	border: thin solid var(--input-border-primary);
+	max-width: 80vw;
-	border-radius: 0.2rem;
+	overflow-x: scroll;
+}
+#search form {
+	flex: 1 1 100%;
+}
+#search fieldset {
+	padding-top: 1rem;
+}
+#search fieldset > legend {
+	font-weight: var(--default-header-x-font-weight);
+}
+#search fieldset > input {
+	width: 94%;
+}
+#search fieldset > input[type="submit"] {
+	width: 100%;
+}
+#search fieldset > p {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
 }
 .no-css {
 	display: none;
 }
+#tags .date {
+	margin:0;
+	font-size: 1rem;
+}
+#tags #tag_initial_letter_index {
+	columns: 3 auto;
+}
+#tags #tag_initial_letter_index  li {
+	font-weight: bold;
+	list-style: none;
+}
+#tags .tag-index {
+	columns: 3 calc(var(--for-tablet-landscape-up) /3 );
+	column-gap: 1rem;
+}
+#tags .index-link {
+	text-align: right;
+}
+#comments > article > .show-meta {
+	font-size: smaller;
+}
+#hosts tr {
+	gap: 0;
+	justify-content: flex-start;
+}
+#hosts td {
+	display: inline-block;
+}
+#hosts td:nth-child(-n+2) {
+	background: var(--background-secondary);
+	color: var(--background-primary);
+}
+#hosts td:nth-child(-n+2) a {
+	color: var(--link-secondary);
+}
+#hosts td:nth-child(-n+2) a:hover {
+	color: var(--link-secondary-hover);
+}
+#hosts td:nth-child(2) {
+	padding: 0.25rem 0 0 8px;
+	width: calc(100% - 90px);	
+}
+
+#hosts td:nth-last-child(-n+2) {
+	padding: 0.5rem 0 0 95px;
+}
+#hosts td:nth-last-child(2)::before {
+	content: ;
+	content: "License: ";
+}
+#hosts td:nth-last-child(1)::before {
+	content: "Last Show: ";
+}
+#hosts td > img {
+	border-radius: 0.25rem;
+}
+#host {
+	justify-content: flex-start;
+	align-items: end;
+	gap: 0;
+}
+#host_id img {
+	border-radius: 0.25rem;
+}
+#host_meta {
+	flex: 1;
+	padding: 0 0 0.75rem 0;
+}
+#host_meta > div,
+#host_meta > p {
+	margin: 0.25rem 0;
+	line-height: var(--primary-content-line-height);
+}
+#host_meta > div > p {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+.series-description {
+	margin: 0;
+	padding: 0;
+	font-style: italic;
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	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 {
+	body > header .bounding-box {
-		background-size: 200pt, cover;
-		background-position: left 128pt top -12pt, left top;
 		justify-content: space-between;
 	}
 	#tag_line {
-		text-align: center;
+		line-height: 1;
 	}
-	#title h1 {
+	#title #tag1 {
 		font-size: 7.5rem;
 		letter-spacing: -0.65rem;
 		line-height: 0.75;
 	}
-	#tag_line h2 {
+	#tag_line #tag2 {
 		font-size: 1.82rem;
 		letter-spacing: 0.05rem;
 	}
-	#tag_line h2:first-child {
+	#tag_line #tag1 {
 		font-size: 4rem;
 	}
-	#tag_line h3 {
+	#tag_line #tag3 {
 		font-size: 1.85rem;
+		letter-spacing: 0.05rem;
 		margin-left: 5rem;
 	}
 	#qr_code {
@@ -568,23 +847,85 @@ fieldset > input {
 		margin-bottom: 1.0rem;
 		width: 100%;
 	}
+	#search fieldset > input {
+		width: 55%;
+	}
+	#search fieldset > input[type="submit"] {
+		width: 40%;
+	}
 	body > main {
 		padding: 0.25rem 2rem;
 	}
-	.lane > article {
-		max-height: 40vw;
-		overflow-y: scroll
-	}
 	#latest_lane.lane section > ul {
 		margin: 0.5rem 3rem 0 1rem;	
 	}
+	#hosts tbody.lane.stack {
+		flex-direction: row;
+		justify-content: space-between;
+		gap: 1rem
+	}
+	#hosts tr {
+		flex: 1 1 45%;
+		max-width: 45%;
+	}
+	#host {
+		gap: 1rem;
+	}
+	nav.episodes {
+		display: inline-block;
+	}
 }
 @media (min-width: 900px) {
-	.lane > article {
+	#podcast_lane > .lane,
-		flex-basis: 32%;
+	#project_lane > .lane {
-		max-width: 32%;
+		justify-content: flex-start;
+		gap: 2rem;
 	}
 	#latest_lane.lane section {
 		flex: 1;
 	}
+	#hosts tr {
+		flex: 1 1 30%;
+		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);
+	}
 }

public_html/images/icons/arrow-first-plain.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 8.0716972 9.7589998"
+   version="1.1"
+   id="svg1106"
+   width="8.0716972"
+   height="9.7589998"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="layer1"
+     transform="translate(-92.715063,-46.059054)">
+    <g
+       id="g5606">
+      <path
+         id="arrow"
+         style="stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;"
+         d="m 99.346123,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+      <rect
+         style="stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke"
+         id="bar"
+         width="1.5938228"
+         height="9.3528233"
+         x="92.918152"
+         y="46.262142"
+         rx="0"
+         ry="0.11228061" />
+    </g>
+  </g>
+</svg>

public_html/images/icons/arrow-last-plain.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 8.0039654 9.7589998"
+   version="1.1"
+   id="svg1106"
+   width="8.0039654"
+   height="9.7589998"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="layer1"
+     transform="translate(-92.782792,-46.059054)">
+    <g
+       id="g5606"
+       transform="matrix(-1,0,0,1,193.50182,0)">
+      <path
+         id="path9831"
+         style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 99.346123,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+      <rect
+         style="opacity:0.985023;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+         id="rect3544"
+         width="1.5938228"
+         height="9.3528233"
+         x="92.918152"
+         y="46.262142"
+         rx="0"
+         ry="0.11228061" />
+    </g>
+  </g>
+</svg>

public_html/images/icons/arrow-next-plain.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 6.3102736 9.6969385"
+   version="1.1"
+   id="arrow_next"
+   width="6.3102736"
+   height="9.6969385"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="next"
+     transform="translate(-92.71506,-46.084171)">
+    <path
+       id="arrow"
+       style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 94.155697,55.549619 -1.209147,-1.2065 3.421063,-3.423708 -3.386663,-3.386667 1.21708,-1.217083 4.595813,4.595813 z" />
+  </g>
+</svg>

public_html/images/icons/arrow-previous-plain.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 6.3102736 9.6969385"
+   version="1.1"
+   id="arrow_first"
+   width="6.3102736"
+   height="9.6969385"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="arrow"
+     transform="translate(-92.71506,-46.084171)">
+    <path
+       id="path9831"
+       style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 97.584696,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+  </g>
+</svg>

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>. 
@@ -64,6 +67,7 @@
 <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 @@
 	<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,30 +92,33 @@
 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. 
 		If you have any issue of concern please bring it to their attention first.
-    <br />
+		<br>
 		<em>As an anti-spam measure you may get an error back but we do get your email.</em></li>
 	<li>Website: <a href="<!--% absolute_url(baseurl,'') %-->" ><!--% absolute_url(baseurl,'') %--></a>. 
 		There is a comment link on each show where you can provide your constructive feedback.</li>
 	<li>Maillist: <a href="<!--% absolute_url(baseurl,'/maillist') %-->">Mailing list</a>. 
 		While the Janitors are the first point of contact, the HPR project is 
 		<a href="<!--% absolute_url(baseurl,'about.html#governance') %-->">governed</a> by the community.
-    Decisions about how Hacker Public Radio are made on the mailing list, and you can join it by going to :<br />
+		Decisions about how Hacker Public Radio are made on the mailing list, and you can join it by going to :<br>
 		<a href="<!--% absolute_url(baseurl,'/maillist') %-->"><!--% absolute_url(baseurl,'/maillist') %--></a></li>
 	<li>Mastodon: <a href="https://infosec.exchange/@hpr">https://infosec.exchange/@hpr</a> is the official HPR Mastodon instance
 		and is actively monitored.</li>
 	<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 @@
 	<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>
@@ -131,16 +142,19 @@
 	<li>2016-01-18: <a href="http://www.tripwire.com/state-of-security/security-awareness/information-security-podcast-roundup-2016-edition/">Information Security Podcast Roundup: 2016 Edition</a> from TripWire.com (<a href="<!--% absolute_url(baseurl,'press/2016-01-18_Information_Security_Podcast_Roundup_2016_Edition.pdf') %-->">Archived</a>)</li>
 	<li>2014-12-09: <a href="http://joeyh.name/blog/entry/podcasts_that_dont_suck_2014/">podcasts that don't suck, 2014 edition (Joey Hess)</a>(<a href="<!--% absolute_url(baseurl,'press/2014-12-09_podcasts_that_dont_suck_2014_edition.pdf') %-->">Archived</a>)</li>
 	<li>2014-06-30: <a href="http://opensource.com/life/14/6/hacker-public-radio">Free software on Hacker Public Radio</a> by Bryan Behrenshausen (Red Hat)(<a href="<!--% absolute_url(baseurl,'press/2014-06-30_Free_software_on_Hacker_Public_Radio.pdf') %-->">Archived</a>)</li>
-  <li>2014-04-19: <a href="http://www.efytimes.com/e1/fullnews.asp?edid=136312">10 Useful Places Hosting Informative Podcasts On Linux</a> (<a href="<!--% absolute_url(baseurl,'press/2014-04-19_10_Useful_Places_Hosting_Informative_Podcasts_On_Linux.pdf') %-->">Archived</a>)
+	<li>2014-04-19: <a href="http://www.efytimes.com/e1/fullnews.asp?edid=136312">10 Useful Places Hosting Informative Podcasts On Linux</a> (<a href="<!--% absolute_url(baseurl,'press/2014-04-19_10_Useful_Places_Hosting_Informative_Podcasts_On_Linux.pdf') %-->">Archived</a>)</li>
 	<li>2014-04-11: <a href="http://blog.sleeplessbeastie.eu/2014/04/11/hand-picked-audio-podcasts-for-linux-users/">Hand-picked audio podcasts for Linux users</a> by Milosz Galazka (<a href="<!--% absolute_url(baseurl,'press/2014-04-11_hand-picked-audio-podcasts-for-linux-users.pdf') %-->">Archive</a>)</li>
 	<li>2013-10-11: <a href="http://www.linuxlinks.com/article/20130706190339587/LinuxPodcasts-Page1.html">Illuminating Linux Podcasts</a> by Dan Petersen (<a href="<!--% absolute_url(baseurl,'press/2013-10-11_Illuminating_Linux_Podcasts.pdf') %-->">Archive</a>)</li>
 	<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, 
@@ -158,12 +172,13 @@
 
 <h2 id="podcatcher_support">Podcatcher Support</h2>
 <p>
-  Please report your experiences with our feeds to admin@hpr</a>. 
+Please report your experiences with our feeds to admin@hpr. 
 </p>
 
 <h2 id="other_ways_to_help">Other ways to help</h2>
 <p>
 You can help by:
+</p>
 <ul>
 	<li>Spreading the word</li>
 	<li>Creating a HPR page on wikipedia</li>
@@ -181,11 +196,13 @@
 	<li>Improving the documentation on our gittea repo</li>
 	<li><a href="<!--% absolute_url(baseurl,'about.html#patrons') %-->">Support our Patrons</a></li>
 </ul>
-  </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="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>
@@ -199,19 +216,20 @@
 You can download the audio of the episodes directly from the command line using the following commands:
 </p>
 <ul>
-    <li>ogg:<br />
+	<li>ogg:<br>
 		<span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].ogg' -o "hpr#1.ogg"</span></li>
-    <li>spx:<br />
+	<li>spx:<br>
 		<span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].spx' -o "hpr#1.spx"</span></li>
-    <li>mp3:<br />
+	<li>mp3:<br>
 		<span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].mp3' -o "hpr#1.mp3"</span></li>
-  </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>
 
@@ -268,7 +286,7 @@
 <h2 id="upload_your_show">4. Upload your show<a href="<!--% absolute_url(baseurl,'about.html#upload_your_show') %-->">.</a></h2>
 <p>
 Once you have your audio ready you can post your show by going to the <a href="<!--% hub_baseurl %-->calendar.php">Calendar</a> 
-  page or press the <strong><a href="<!--% hub_baseurl %-->calendar.php">⇧Upload⇧</strong></a> button.
+page or press the <a href="<!--% hub_baseurl %-->calendar.php"><strong>⇧Upload⇧</strong></a> button.
 </p>
 <p>
 After you have selected a date you will be redirected to the <a href="<!--% hub_baseurl %-->request.php">request page</a>, 
@@ -285,7 +303,7 @@
 <h2 id="questions">Questions ?<a href="<!--% absolute_url(baseurl,'about.html#questions') %-->">.</a></h2>
 <p>
 Got any questions not covered here, then just email <strong>"admin" at "HPR"</strong>, 
-  and we'll get in touch with you with all you need to know about getting your show published.<br />
+and we'll get in touch with you with all you need to know about getting your show published.<br>
 You can chat with other podcasters using IRC in the <strong>#oggcastplanet</strong> channel on the 
 <a href="https://web.libera.chat/gamja/?channels=oggcastplanet">libera.chat</a> network. 
 Follow us on <a href="https://infosec.exchange/@hpr">Mastodon</a> (use the tag <strong>#hpr</strong>) 
@@ -309,7 +327,7 @@
 That's not to say we won't help you with ways to improve the audio if you wish, or narrate your script if you can't 
 or won't record it yourself. 
 Drop into the IRC channel <a href="https://web.libera.chat/gamja/?channels=oggcastplanet">#oggcastplanet</a> where there are 
-  people who will help.<br />
+people who will help.
 </p>
 
 <h2 id="motto">Our Mottos</h2>
@@ -322,16 +340,18 @@
 <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>
 	<li>How did you get into podcasting/linux/geekdom?</li>
-    <li>What podcasts you listen to and can recommend</li>
+	<li>Whata podcasts you listen to and can recommend</li>
 	<li>What's in your bag? Tell us what tools/gear/stuff you keep close at hand.</li>
 	<li>What got you into Linux?</li>
 	<li>Your favorite Android applications.</li>
@@ -344,7 +364,7 @@
 	<li>Installing a VPN to your home network</li>
 	<li>Init and System.d</li>
 	<li>Episodes for the LPI, or the Networking series.</li>
-    <li>Beginning Audio Series for HPR and OSMP Release
+	<li>Beginning Audio Series for HPR and OSMP Release</li>
 	<li>Hackintosh computers - what are they, why would you want one.</li>
 	<li>Grub 2.0 introduction and customization.</li>
 	<li>FM Transmitter hack to listen into internet streams</li>
@@ -394,10 +414,13 @@
 	<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>
@@ -407,7 +430,7 @@
 <p>
 Once you upload a show, you will no longer be allowed to create or edit pages relating to 
 <a href="https://en.wikipedia.org/wiki/Hacker_Public_Radio">Hacker Public Radio</a> in 
-  <a href="https://en.wikipedia.org/wiki/Wikipedia:FAQ/Organizations">Wikipedia</a>.<br />
+<a href="https://en.wikipedia.org/wiki/Wikipedia:FAQ/Organizations">Wikipedia</a>.<br>
 See our <a href="<!--% absolute_url(baseurl,'about.html#faq_wikipedia') %-->">FAQ about 
 	the HPR Wikipedia page</a> for more information.
 </p>
@@ -482,7 +505,7 @@
 we have a policy that we don't listen to the shows before they are aired.
 This is a long standing tradition arising from the fact that HPR is a community of peers 
 who believe that any host has as much right to submit shows as any other.
-  <br />
+<br>
 We <strong>do</strong> transcode the audio into different formats.
 </p>
 <p>
@@ -493,8 +516,6 @@
 describes the agreed approach to this topic.
 </p>
 
-  </p>
-
 <h2 id="explicit_content">Your show will be signaled as containing explicit content
 	<a href="<!--% absolute_url(baseurl,'about.html#explicit') %-->">.</a></h2>
 <p>
@@ -545,13 +566,13 @@
 </p>
 <p>
 The following are standing reservations:
+</p>
 <ul>
 	<li>Anniversary episodes.</li>
 	<li>HPR Community News on the first Monday of the month.</li>
 	<li>The first day of the fourth month.</li>
 	<li>The days following new year.</li>
 </ul>
-  </p>
 
 <h2 id="utf8">We use UTF-8 end to end<a href="<!--% absolute_url(baseurl,'about.html#utf8') %-->">.</a></h2>
 <blockquote>See the video "<a href="https://www.youtube.com/watch?v=MijmeoH9LT4">Characters, Symbols and the Unicode Miracle - 
@@ -563,13 +584,13 @@
 When you includes output from the command line in the show notes, posting screen-shots of console or terminal output 
 makes it impossible for screen readers to access the text.
 Always try to include the raw output ( eg: embedded in &lt;pre&gt; tags) 
-  <br />
+<br>
 Include descriptive language in any link texts. 
-  <br />
+<br>
 Avoid structures like: <em>"For accessibility information click 
-    <a href="<!--% absolute_url(baseurl,'about.html#accessibility') %-->">here</a>"</em><br />
+	<a href="<!--% absolute_url(baseurl,'about.html#accessibility') %-->">here</a>"</em><br>
 Rather use: <em>"For more information click our 
-    <a href="<!--% absolute_url(baseurl,'about.html#accessibility') %-->">accessibility page</a>"</em><br />
+	<a href="<!--% absolute_url(baseurl,'about.html#accessibility') %-->">accessibility page</a>"</em>
 </p>
 
 <h2 id="international">Your show will be heard by an International Audience
@@ -600,8 +621,6 @@
 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>
@@ -612,10 +631,13 @@
 	<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.
@@ -658,11 +680,13 @@
 import the file you recorded earlier and edit it as you wish.
 </p>
 <p>
-  <img width="600" src="images/contribute-audacity-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
+<img srcset="images/contribute-audacity-record-sm.png 460w, images/contribute-audacity-record.png 640w"
+     sizes="(max-width: 460px) 95vw, 640px" 
+     src="images/contribute-audacity-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
 </p>
 <blockquote>Audacity is a free, easy-to-use and multilingual audio editor and recorder for 
 	Windows, Mac OS X, GNU/Linux and other operating systems.</blockquote>
-  <iframe width="640" height="390" src="//www.youtube.com/embed/ss8CyTwBOPY" style="border: none"></iframe>
+<iframe id="youtube" src="//www.youtube.com/embed/ss8CyTwBOPY"></iframe>
 <p>
 When you have finished editing your podcast you can export it.
 </p>
@@ -674,7 +698,9 @@
 	<li>Set <em>Bit depth</em> to <strong>24</strong>.</li>
 </ol>
 <p>
-  <img width="600" src="images/contribute-audacity-export.png" alt="Audacity Export Settings" title="Audacity Screenshot of an Export" >
+<img srcset="images/contribute-audacity-export-sm.png 460w, images/contribute-audacity-export.png 640w"
+     sizes="(max-width: 460px) 95vw, 640px" 
+src="images/contribute-audacity-export.png" alt="Audacity Export Settings" title="Audacity Screenshot of an Export" >
 </p>
 
 <h2 id="phone_interviews">Recording Interviews with the Phone<a href="<!--% absolute_url(baseurl,'about.html#phone_interviews') %-->">.</a></h2>
@@ -689,17 +715,19 @@
 <h2 id="round_table">Recording round table discussions<a href="<!--% absolute_url(baseurl,'about.html#round_table') %-->">.</a></h2>
 <p>
 If you would like to record with multiple participants then you can use <a href="https://www.mumble.com/">Mumble</a>. 
-  Connect to <strong>chatter.skyehaven.net</strong> Port: <strong>64738 </strong>.<br />
+Connect to <strong>chatter.skyehaven.net</strong> Port: <strong>64738 </strong>.<br>
 Walk through the audio wizard and then pop into the <strong>Hacker Public Radio</strong> room. 
 Once you are ready press the <strong>recording</strong> button, select <em>multichannel</em> and then <em>start</em>. 
 That will record multiple tracks, one for each participant which you can edit and then submit.
-  <br />
+<br>
 Kwisher made a <a href="<!--% absolute_url(baseurl) %-->mumble-howto">Mumble tutorial</a> 
 which you might find useful and <a href="<!--% absolute_url(baseurl) %-->correspondents/0228.html">Delwin</a> 
 has produced a number of short shows on how to configure the audio quality.
 </p>
 <p>
-  <img width="600" src="images/contribute-mumble-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
+<img srcset="images/contribute-mumble-record-sm.png 460w, images/contribute-mumble-record.png 640w"
+     sizes="(max-width: 460px) 95vw, 640px" 
+     src="images/contribute-mumble-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
 </p>
 
 <h2 id="background_music">Avoid Bedding/background music<a href="<!--% absolute_url(baseurl,'about.html#background_music') %-->">.</a></h2>
@@ -722,12 +750,13 @@
 <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>
@@ -740,15 +769,16 @@
 </ul>
 
 <h2>New Year Promo</h2>
-  <p>
 <ul>
 	<li><a href="<!--% absolute_url(baseurl) %-->promos/hpr-nye-promo.ogg">HPR New Years Promo</a></li>
 </ul>
-  </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="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, 
@@ -780,7 +810,7 @@
 </p>
 <p><strong>Note:</strong> This email address will be published on the HPR website and will be given out in the feeds, 
 so please use a <strong>public email</strong> address for this purpose. 
-  Where we publish it we pad it with dot nospam at-sign nospam dot. <br />
+Where we publish it we pad it with dot nospam at-sign nospam dot. <br>
 i.e. <em>hpr@example.com</em> becomes <em>hpr.nospam@nospam.example.com</em>. 
 If you do not want to have your email exposed, please contact the admin@hpr team to arrange a alias.
 </p>
@@ -791,10 +821,13 @@
 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:
@@ -802,27 +835,27 @@
 <h2 id="personal_information">Personal Information</h2>
 <p>
 Remember <em>All information will be displayed publicly</em>. The only exception is that your email address will be sent 
-  in the feed with some anti-spam additions.<br />
+in the feed with some anti-spam additions.<br>
 For example <em>hpr@example.com</em> will become <em>hpr.nospam@nospam.example.com</em>
 </p>
 <ul>
-    <li id="email"><strong>email:</strong> <em>already populated</em><br />
+	<li id="email"><strong>email:</strong> <em>already populated</em><br>
-    See notes <a href="<!--% absolute_url(baseurl,'about.html#requesting_slot') %-->">above</a><br />
+		See notes <a href="<!--% absolute_url(baseurl,'about.html#requesting_slot') %-->">above</a><br>
 	</li>
-    <li id="image"><strong>image:</strong> <em>Optional</em><br />
+	<li id="image"><strong>image:</strong> <em>Optional</em><br>
 		If you have associated a <a href="https://en.gravatar.com/">Gravatar</a> image with an email address, 
 		then it will be displayed here. 
 		Otherwise you can upload a 80x80 image .</li>
-    <li id="Name_Handle"><strong>Name/Handle:</strong> <em>Mandatory</em><br />
+	<li id="Name_Handle"><strong>Name/Handle:</strong> <em>Mandatory</em><br>
 		It should be the name you wish to be known as on HPR. It can be your real name, an Internet handle or both.</li>
-    <li id="Default_license"><strong>Your Default license:</strong> <em>Mandatory</em><br />
+	<li id="Default_license"><strong>Your Default license:</strong> <em>Mandatory</em><br>
 		This field tells us what your work is normally licensed under. All our shows are now released under a 
 		<a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 
 			International (CC BY-SA 4.0)</a> license, which means that while you continue to retain the copyright 
 		to your show you are allowing us (and everyone else) to use it provided we give you attribution and 
 		that we release it under the same license. Click the <a href="https://creativecommons.org/licenses/by-sa/4.0/">link</a>
 		for more information.</li>
-    <li id="Profile"><strong>Profile:</strong> <em>Optional</em><br />
+	<li id="Profile"><strong>Profile:</strong> <em>Optional</em><br>
 		Enter some text about yourself with links to your blog or other online presence.</li>
 </ul>
 <p>
@@ -830,45 +863,45 @@
 </p>
 <h2 id="episode_information">Episode Information</h2>
 <ul>
-    <li id="Title"><strong>Title:</strong> <em>Mandatory</em><br />
+	<li id="Title"><strong>Title:</strong> <em>Mandatory</em><br>
 		This will be a short descriptive title and will be used everywhere to identify your show. Any valid UTF-8 character is acceptable, but keep the length short and clear.</li>
-    <li id="Short_Summary"><strong>Summary:</strong> <em>Mandatory</em><br />
+	<li id="Short_Summary"><strong>Summary:</strong> <em>Mandatory</em><br>
 		This is a short 100 character summary of what your show is about. 
 		Please fill this out as it is used once the show has gone off the main page, on the mobile site, 
 		on printed brochures, on text to speech announcements, on twitter, <a href="https://infosec.exchange/@hpr">Mastodon</a> etc.</li>
-    <li id="Theme"><strong>Theme:</strong> <em>Automatic</em><br />
+	<li id="Theme"><strong>Theme:</strong> <em>Automatic</em><br>
 		The Intro, and the Outro will be added automatically. Please do not add it.
 	</li>
-    <li id="Explicit"><strong>Explicit:</strong> <em>Mandatory</em><br />
+	<li id="Explicit"><strong>Explicit:</strong> <em>Mandatory</em><br>
 		See <a href="https://web.archive.org/web/20150326185817/http://www.apple.com/uk/itunes/podcasts/specs.html">iTunes</a> 
 		for more information.</li>
-    <li id="License"><strong>License:</strong> <em>Mandatory</em><br />
+	<li id="License"><strong>License:</strong> <em>Mandatory</em><br>
 		All our shows are now released under a 
 		<a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> 
 		license, which means that while you continue to retain the copyright to your show you are allowing us (and everyone else) 
 		to use it provided we give you attribution and that we release it under the same license. 
 		Click the <a href="https://creativecommons.org/licenses/by-sa/4.0/">link</a> for more information.</li>
-    <li id="show_notes"><strong>show notes:</strong> <em>Mandatory</em><br />
+	<li id="show_notes"><strong>show notes:</strong> <em>Mandatory</em><br>
 		It is important to provide good show notes because:
 		<ul>
-      <li><strong>They provide the listeners with more information on the topic.</strong><br />
+			<li><strong>They provide the listeners with more information on the topic.</strong><br>
 				You have taken the time to record a show on a topic, so many people will want to find out more on the subject, 
 				therefore you should include links to give more information. It is not enough to just give it in the show itself 
 				as people may be listening while away from the Internet, and they may have forgotten or misheard your links.
 			</li>
-      <li><strong>They ensure your show gets posted on time.</strong><br />
+			<li><strong>They ensure your show gets posted on time.</strong><br>
 				If you do not supply show notes then your show notes will need to be edited manually by an HPR volunteer and 
 				this will most likely result in delays. During that time other shows will be processed and may get posted 
 				before your show. 
 				It is always better if you send us show notes yourself as you know best what information you are trying to convey.</li>
-      <li><strong>They encourage people to download your show.</strong><br />
+			<li><strong>They encourage people to download your show.</strong><br>
 				We produce a lot of shows and many people download based on the text in the show notes. 
 				If the show notes are not descriptive then it is less likely that 
 				it will get as many downloads as other shows with good show notes.</li>
-      <li><strong>They allow your show to be indexed by search engines.</strong><br />
+			<li><strong>They allow your show to be indexed by search engines.</strong><br>
 				Search engines cannot determine the content of your show from the audio alone. 
 				The only way for your show to be indexed is for you to describe in the associated text what you say in the audio.</li>
-      <li><strong>They make your show accessible to the deaf and hard of hearing.</strong><br />
+			<li><strong>They make your show accessible to the deaf and hard of hearing.</strong><br>
 				Your audio is completely inaccessible to those who have hearing problems, 
 				so the only way for your show to be of help to them is if you distill the essence of the show into the show notes. 
 				If you are using a script to prepare your show then include that.</li>
@@ -883,33 +916,33 @@
 						Please add them to an full_shownotes.html file which you can expect to be served from
 						<!--% absolute_url(baseurl) %-->eps/hpr9999/full_shownotes.html</li>
 				</ul>
-    
-    <li id="series"><strong>Series:</strong> <em>Optional</em><br />
-    Select the <a href="<!--% absolute_url(baseurl) %-->series/index.html">series</a> if any that your show is a part of.
 			</li>
-    <li id="tags"><strong>Tags:</strong> <em>Optional</em><br />
+		</ul>
+	</li>
+	<li id="series"><strong>Series:</strong> <em>Optional</em><br>
+			Select the <a href="<!--% absolute_url(baseurl) %-->series/index.html">series</a> if any that your show is a part of.</li>
+	<li id="tags"><strong>Tags:</strong> <em>Optional</em><br>
 			Add a list of comma separated tags. Pick the most important words from the shownotes. 
-    These are used to <a href="<!--% absolute_url(baseurl) %-->tags.html">find shows via the tags page</a>.
+			These are used to <a href="<!--% absolute_url(baseurl) %-->tags.html">find shows via the tags page</a>.</li>
-    </li>
+	<li id="upload_method"><strong>Upload Method:</strong> <em>Optional</em><br>
-    <li id="upload_method"><strong>Upload Method:</strong> <em>Optional</em><br />
+			You have the choice of the following options:<br>
-    You have the choice of the following options:<br />
 			<ul>
-        <li id="browser"><strong>Upload now via this browser</strong><br />
+				<li id="browser"><strong>Upload now via this browser</strong><br>
 					You can upload single or multiple files using this method. 
 					Chrome will display the percentage uploaded but to see this in Firefox you will need to install a 
 					<a href="https://addons.mozilla.org/en-US/firefox/addon/uploadprogress/">plugin</a>, or just wait.
 				</li>
-        <li id="url"><strong>Provide a url for us to get it from</strong><br />
+				<li id="url"><strong>Provide a url for us to get it from</strong><br>
 					Using this option may cause delays as a HPR volunteer will need to troubleshoot any issues that may occur, 
 					and this can result in your show not been posted on time. 
 					This must be publicly accessable using a curl or wget command. 
 					Please avoid services that require login or downloading via a browser.
 				</li>
-        <li id="upload_later"><strong>Other</strong><br />
+				<li id="upload_later"><strong>Other</strong><br>
 					The postal information will be sent to you after submission.
 				</li>
 			</ul>
-      <br />
+			<br>
 			If you want to submit an additional file with your show, then put them in a zip, or tgz file. 
 			This should expand to a directory with a index.html file that refers to the other files. 
 			This will be hosted in the eps directory under a new directory with the episode number.
@@ -920,7 +953,7 @@
 	  ...
 			</pre>
 			Ensure that all links are full urls, as relative urls will not work in RSS feeds. 
-      Adding additional files will delay processing as they need to be verified manually.
+			Adding additional files will delay processing as they need to be verified manually.</li>
 	</li>
 </ul>
 <p>
@@ -928,11 +961,13 @@
 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>
@@ -944,10 +979,13 @@
 	<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) 
@@ -1182,3 +1220,5 @@
 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-comments_viewer.tpl.html

@@ -7,7 +7,8 @@
 <h2>Comment Viewer</h2>
 <p>Because of the spammers we have had to turn on comment moderation. Sorry about the delay this will cause.</p>
 <p><a href="<!--% absolute_path(baseurl) %-->comments.rss">Subscribe</a> to the comment feed.</p>
-<hr />
+<hr class="no-css">
+<section id="comments" class="lane stack">
 <!--% FOREACH item IN DBI.query('
 		SELECT C.*, 
 			H.host, H.hostid AS host_id, 
@@ -26,18 +27,18 @@
 		LIMIT 30
 	')
 %-->
-
 <article>
 	<header>
-	<h1><!--% item.comment_author_name %--> says: <!--% item.comment_title %--></h1>
+		<h2><!--% item.comment_author_name %--> says: <!--% item.comment_title %--></h2>
-	<p><small>Posted at <!--% item.comment_timestamp %--> relating to the show <a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html">hpr<!--% item.eps_id %--></a> which was released on <!--% item.episode_date %--> by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a> entitled <em><!--% item.episode_title %--></em></small>
-</p>
 	</header>
+	<p class="show-meta">Posted at <!--% item.comment_timestamp %--> relating to the show <a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html">hpr<!--% item.eps_id %--></a> which was released on <!--% item.episode_date %--> by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a> entitled <em><!--% item.episode_title %--></em></small>
+	</p>
 	<p class="comment">
 	<!--% item.comment_text FILTER html_line_break %-->
 	</p>
 	<footer>
 		Listen in <a href="<!--% media_path(item.eps_id, 'hpr', 'ogg', baseurl, media_baseurl) %-->">ogg</a>, <a href="<!--% media_path(item.eps_id, 'hpr', 'spx', baseurl, media_baseurl) %-->">spx</a>, or <a href="<!--% media_path(item.eps_id, 'hpr', 'mp3', baseurl, media_baseurl) %-->">mp3</a> format.</p></footer>
 </article>
-<hr />	
+<hr class="no-css">	
 <!--% END %-->
+</section>

templates/content-correspondent.tpl.html

@@ -46,25 +46,33 @@
 
 			<!--% hosts = DBI.tie('hosts', 'hostid') %-->
 
-	<article>
 			<!--% this_host = hosts.$id %-->
 			<h2 class="title">Correspondent</h2>
+			<div id="host" class="lane">
+				<div id="host_id">
 					<h2><!--% this_host.host %--></h2>
 					<p><!--% get_avatar(this_host.hostid, this_host.host) %--><br>
-		<label>Host ID</label>: <!--% this_host.hostid %--><br><br>
+					<label>Host ID</label>: <!--% this_host.hostid %--></p>
-		<label>email:</label> <u><!--% this_host.email %--></u><br>
+				</div>
-		<label>profile:</label> <!--% this_host.profile %--><br><br>
+				<div id="host_meta">
-		<label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong>
+					<p><label>email:</label> <u><!--% this_host.email %--></u></p>
-		</p>
+					<div><label>profile:</label> <!--% this_host.profile %--></div>
+					<p><label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong></p>
+				</div>
+			</div>
+			<div class="lane stack">
 				<!--% FOREACH hpr_show IN hpr_shows; %-->
-
+				<article>
 					<!--% show_summary(hpr_show, 'hide_host') %-->
 					<p class="listen-in"><!--% display_listen_in(hpr_show.id) %--></p>
+				</article>
 				<!--% END %-->
 				<!--% FOREACH twat_show IN twat_shows; %-->
+				<article>
 
 					<!--% twat_show_summary(twat_show, 'hide_host') %-->
 					<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
-    <!--% END %-->
 				</article>
+				<!--% END %-->
+			</div>
 			<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,15 +1,17 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS 'shared-avatar.tpl.html' %-->
-<article>
 	<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 />
 <!--% USE DBI(constants.driver) %-->
 <!--% host_cnt = 0 %-->
-	<table class="hosts">
+	<table id="hosts" class="hosts lane stack">
+	<tbody class="lane stack">
+	<tr class="no-css">
 	<th>Avatar</th>
 	<th>Name &amp; Host ID</th>
 	<th>License</th>
 	<th>Last Show</th>
+	</tr>
 	<!--% FOREACH host IN DBI.query(
 		'select h.hostid, h.host, h.license, e.date, 
 		h.local_image 
@@ -18,7 +20,7 @@
 		on h.hostid = e.hostid
 		order by h.host'
 	) %-->
-	<tr>
+	<tr class="lane">
 	<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>
 
 		<td><strong><!--% host.host %--></strong><br>
@@ -28,6 +30,6 @@
 		<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>
-</article>

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,7 +19,7 @@
 		<!-- 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">
+	<div class="lane stack">
 	<!--% FOREACH twat_episode IN DBI.query('
 	SELECT 
         eps.id, 
@@ -39,5 +39,6 @@
 	<!--% twat_show_summary(twat_episode) %-->
  </article>
 <!--% END %-->
+	</div>
 
 

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>
@@ -71,7 +70,7 @@
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->correspondents/index.html">
 			<img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="" height="110">
-			<p>Host</p>
+			<p>Hosts</p>
 	  </a>
 	  <br class="no-css">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">
@@ -95,20 +94,20 @@
   <section id="latest_shows">
 	<header><h2>Latest Shows</h2></header>
 <!--% host_cnt = 0 %-->
-	<ul>
+	<dl>
 <!--% FOREACH latest_episodes IN DBI.query(query_latest_episodes)
 %-->
-		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a>
+<dt><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> (<!--% latest_episodes.date %-->) :: <!--% latest_episodes.title %--></a> by <!--% latest_episodes.host %--></dt>
-		<ul><li>
+		<dd>
 		<!--% latest_episodes.summary %-->
-        </li></ul>
+        </dd>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
-	</ul>
+	</dl>
   </section>
   <section id="latest_comments">
 	<header><h2>Latest Comments</h2></header>
-	<ul>
+	<dl>
 <!--% FOREACH item IN DBI.query('
 		WITH episode_comment_rank AS (
 		SELECT 
@@ -135,13 +134,9 @@
 	
 	')
 %-->
-	<li>hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %-->
+<dt><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a></dt>
-	<ul>
+	<dd>on hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %--></dd>
-		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a>
-		</li>
-	</ul>
-	</li>
 <!--% END %-->
-	</ul>
+	</dl>
   </section>
   </section>

templates/content-search.tpl.html

@@ -1,45 +1,123 @@
- <article>
+<section id="search">
 	<header>
 		<h1>Search HPR.</h1>
 	</header>
-<hr />
+	<div class="lane">
-<h2>Search Show Tags</h2>
-<p>
-<a href="<!--% absolute_path(baseurl) %-->tags.html">Complete list of all the Tags</a></p>
-<hr />
-<h2>Google</h2>
-<form name="google-search" method="get" action="https://www.google.com/search">
-  <input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
-  <input name="q" type="text" placeholder="Search HPR with Google"/>
-  <input type="submit" name="sa" value="Search HPR with Google" />
-</form>
-<br />
-<a href="https://www.google.com/policies/privacy/">privacy policy</a>
-</p>
-<hr />
-<h2>DuckDuckGo</h2>
 		<form method="get" id="search" action="https://duckduckgo.com/">
+			<fieldset><legend>DuckDuckGo</legend>
 			<input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
 			<input type="hidden" name="k8" value="#444444"/>
 			<input type="hidden" name="k9" value="#D51920"/>
 			<input type="hidden" name="kt" value="h"/>
 			<input type="text" name="q" maxlength="255" placeholder="Search HPR with DuckDuckGo"/>
 			<input type="submit" value="Search HPR with DuckDuckGo" />
-</form>
+			<p>
-<br />
 			<a href="https://duckduckgo.com/privacy">privacy policy</a>
 			</p>
-<hr />
+			</fieldset>
-<h2>Bing</h2>
+		</form>
+		<form name="google-search" method="get" action="https://www.google.com/search">
+			<fieldset><legend>Google</legend>
+				<input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
+				<input name="q" type="text" placeholder="Search HPR with Google"/>
+				<input type="submit" name="sa" value="Search HPR with Google" />
 				<p>
+				<a href="https://www.google.com/policies/privacy/">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
 		<form method="get" action="https://www.bing.com/search">
+			<fieldset><legend>Bing</legend>
 				<input type="hidden" name="cp" value="utf-8" />
 				<input type="hidden" name="FORM" value="FREESS" />
 				<input type="text" name="q" size="30" placeholder="Search HPR with Bing"/>
 				<input type="submit" value="Search HPR with Bing" />
 				<input type="hidden" name="q1" value="site:www.hackerpublicradio.org" />
-</form>
+				<p>
-<br />
 				<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
 				</p>
+			</fieldset>
+		</form>
+	</div>
+</section>
+<section id="tags">
+<!--% PROCESS 'shared-utils.tpl.html' %-->
+<!--% PROCESS "queries-tags.tpl.html" %-->
+<!--% USE DBI(constants.driver) %-->
+<!--% PERL %-->
+$Template::Stash::PRIVATE = undef; # Allow . in tag
+<!--% END %-->
+<!--% USE String %-->
+<!--% uniq_tag_count = 0 %-->
+<!--% FOREACH episode IN DBI.query(query_tags);
+    ep_id = episode.id;
+    ep_tags = episode.tags;
+    FOREACH tag_str IN ep_tags.csv_parse;
+        NEXT UNLESS tag_str;
+        NEXT IF tag_str == '';
+        tag = tag_str.lower;
+		tag_index = String.new(tag).push('_');
+        first_char = tag.substr(0,1);
+        IF first_char == '.';
+            first_char = '&#x0002E;'; # Unicode .
+        END;
+        IF all_tags.${first_char}.exists(tag_index);
+            all_tags.${first_char}.${tag_index}.count = all_tags.${first_char}.${tag_index}.count + 1;
+            all_tags.${first_char}.${tag_index}.urls.push(ep_id);
+        ELSE;
+            all_tags.${first_char}.${tag_index}.count = 1;
+            uniq_tag_count = uniq_tag_count + 1;
+            all_tags.${first_char}.${tag_index}.urls = [ep_id];
+        END;
+    END;
+END %-->
+<!--% USE date %-->
+<!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] %-->
+<header>
+	<hgroup>
+	<h1 id="TOP" class="title">Search by Tag</h1>
+	<p class="date">Generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
+	</hgroup>
+</header>
+	<p>This section summarises all of the tags currently used throughout the
+	database. The tags are in alphabetical order and each is followed by links to
+	the show numbers where it is used so you can see the context the author used
+	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
+	<h4>Alphabetical index</h4>
+	<p>This is an index to the initial letters of the tags below.</p>
+	<ul id="tag_initial_letter_index">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+        <!--% END %-->
+    <!--% END %-->
+	</ul>
+	<hr class="no-css">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
+	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
+	        <ul class="tag-index">
+                <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
+				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
+    	        	<li>
+    	        		<a id="<!--% tag_to_id(tag_id) %-->"><strong><!--% tag %--></strong></a>: 
+                        <!--% ep_links = [] %-->
+                        <!--% FOREACH ep_id IN all_tags.${first_char}.${tag_index}.urls.nsort;
+							ep_links.push("<a href=\"${absolute_path(baseurl)}eps/hpr" _ zero_pad_left(ep_id) _ '/index.html"'
+                                ' target="_blank" aria-label="' _ tag _
+                                ' - show ' _ ep_id _ '">' _ ep_id _ '</a>');
+                        END %-->
+                        <!--% ep_links.join(', ') %-->
+    	        	</li>
+                <!--% END %-->
+	        </ul>
+        <!--% END %-->
+    <!--% END %-->
+	<p><a href="#TOP">Go to TOP of page</a></p>
 </article>
+<!--% PERL %-->
+$Template::Stash::PRIVATE = 1;
+<!--% END %-->
+
+</section>

templates/content-series.tpl.html

@@ -2,8 +2,9 @@
 <!--% PROCESS "queries-series.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
 <h1 class="title">In-Depth Series</h1>
-<div class="lane">
+<div class="lane stack">
 <!--% FOREACH series IN DBI.query(query_episodes) %-->
+
   <article>
 	<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
 	<ul>
@@ -13,7 +14,7 @@
 		<li>Date of latest show: <!--% series.latest_show %--></li>
 		<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
 	</ul>
-	<em><!--% series.description %--></em>
+	<div class="series-description"><!--% series.description %--></div>
   </article>
 <!--% END %-->
 </div>

templates/content-series_episode.tpl.html

@@ -5,7 +5,6 @@
 <!--% query_series = DBI.prepare(query_series_sql)
 %-->
 <!--% series_result = query_series.execute(id) %-->
-<article>
 <!--% FOREACH series IN series_result %-->
 <h1 class="title">In-Depth Series: <!--% series.name %--></h1>
 <ul>
@@ -15,13 +14,16 @@
 	<li>Date of latest show: <!--% series.latest_show %--></li>
 	<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->&full=1&gomax=1">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->&full=1&gomax=1">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->&full=1&gomax=1">mp3</a></li>
 </ul>
-<div><em><!--% series.description %--></em></div>
+<p><em><!--% series.description %--></em></p>
-<!--% END %-->
+<section id="series_episodes" class="lane stack">
 <!--% query_shows = DBI.prepare(query_shows_sql)
 %-->
 <!--% show_results = query_shows.execute(id) %-->
 <!--% FOREACH show IN show_results %-->
+<article>
 <!--% show_summary(show) %-->
-<p class="listen-in"><!--% display_listen_in(show.id) %--></p>
+<footer class="listen-in"><!--% display_listen_in(show.id) %--></footer>
-<!--% END %-->
 </article>
+<!--% END %-->
+</section>
+<!--% END %-->

templates/content-syndication.tpl.html

@@ -3,7 +3,7 @@
   <p>
   Great that you want to listen. Have a look below at the feeds that best suite your listening habits.
   </p>
-  <div class="lane">
+  <div class="lane stack">
   <article>
   <header>
 	<hgroup>
@@ -78,7 +78,7 @@
 <div>
 <hr class="no-css">
 <h1>Other Download Options</h1>
-<div class="lane">
+<div class="lane stack">
 <article>
   <header>
     <h2>Site Replication Sources</h2>

templates/content-tags.tpl.html

@@ -1,3 +1,4 @@
+<section id="tags">
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS "queries-tags.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
@@ -30,39 +31,31 @@ $Template::Stash::PRIVATE = undef; # Allow . in tag
 END %-->
 <!--% USE date %-->
 <!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] %-->
-
+<header>
-<style>
+	<hgroup>
-    .columns3 { columns: 3 auto; list-style-type: none }
+	<h1 class="title"><a id="TOP">Search by Tag</a></h1>
-    hr.thin {
+	<p class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
-        border: 0;
+	</hgroup>
-        height: 0;
+</header>
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    }
-    p.ralign { text-align: right }
-</style>
-<article>
-	<a id="TOP"><h1 class="title">Tag summary</h1></a>
-	<h4 class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></h4>
 	<p>This section summarises all of the tags currently used throughout the
 	database. The tags are in alphabetical order and each is followed by links to
 	the show numbers where it is used so you can see the context the author used
 	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
 	<h4>Alphabetical index</h4>
 	<p>This is an index to the initial letters of the tags below.</p>
-	<ul class="columns3">
+	<ul id="tag_initial_letter_index">
     <!--% FOREACH first_char IN all_first %-->
         <!--% IF all_tags.${first_char} %-->
-            <li><a href="<!--% absolute_path(baseurl) %-->tags.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
         <!--% END %-->
     <!--% END %-->
 	</ul>
-	<hr>
+	<hr class="no-css">
     <!--% FOREACH first_char IN all_first %-->
         <!--% IF all_tags.${first_char} %-->
-		<p class="ralign"><a href="<!--% absolute_path(baseurl) %-->tags.html#TOP">&UpArrow; Go to index</a></p>
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
 	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
-	        <ul>
+	        <ul class="tag-index">
                 <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
 				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
     	        	<li>
@@ -84,3 +77,5 @@ END %-->
 <!--% PERL %-->
 $Template::Stash::PRIVATE = 1;
 <!--% END %-->
+
+</section>

templates/page.tpl.html

@@ -12,16 +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." />
-  <!-- Internal CSS -->
+  <link rel="shortcut icon" href="/hpr.ico" >
-  <style type="text/css">
-  article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
-          display: block;
-  }
-  #list1, #list2, #list3 {
-          display:none;
-  }
-  </style>
-  <link rel="shortcut icon" href="<!--% absolute_url(baseurl) %-->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" />
@@ -36,30 +27,30 @@
 </head>
 
 <body>
+<div id="top_navigation" class="sr-only">
 	<nav id="accessible_menu">
-   <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
+		<menu>
-   - <a href="#main_content">skip to main content</a>
+			<li><a href="#main_content">Skip to Main Content</a></li>
-</nav>
+			<li><a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a></li>
-<nav id="main_menu" class="menu" role="navigation">
+		</menu>
-<!--% INCLUDE "navigation-main.tpl.html" %-->
 	</nav>
+	<hr class="no-css">
+</div>
 <header role="banner">
-  <div id="title">
+<div class="bounding-box">
-	  <h1 id="site_acronym">HPR</h1>
+  <hgroup id="title">
-      <h2 id="site_name">
+	  <h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1>
+      <p id="site_name">
         <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker
         <a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">P</a>ublic
         <a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio
-      </h2>
+      </p>
-	  <h3 id="site_url">https://HackerPublicRadio.org</h3>
+  </hgroup>
-  </div>
+  <hgroup id="tag_line">
-  <div id="tag_line">
+    <h2 id="tag1">The Community Podcast</h2>
-    <h2>The Community Podcast</h2>
+	<p id="tag2">Sharing your ideas, projects, opinions since 2005</p>
-	<h2>Sharing your ideas, projects, opinions since 2005</h2>
+    <p id="tag3">New episodes every weekday </p>
-    <h3>New episodes every weekday </h3>
+  </hgroup>
-  </div>
-  <div id="qr_code">
-	  <img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="HPR logo as a QR code to the HPR URL">
 </div>
 </header>
 <main id="main_content" role="main">

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>
+    <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 | xml_entity %-->)</author>
+    <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>

templates/shared-utils.tpl.html

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