Update templates/content-new_year.tpl.html

Changes so the live links are not visable

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
 

_sql/sqlite/Rename_twt_table.sql

@@ -0,0 +1 @@
+ALTER TABLE twat_eps RENAME TO twt_eps;

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,86 @@ 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"),
-    url("/css/bebas/BebasNeue.woff") format("woff");
+    local("BEBAS NEUE"),
+    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("PatrickHand"),
-    url("/css/PatrickHand/PatrickHand-Regular.ttf") format("ttf");
+    local("Patrick Hand"),
+	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);
+
+	--episode-nav-padding: clamp(0.15em, 15px + 0.3vw, 0.4em);
+	--show-notes-pre-background: #f9e9c2; 
+	--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 +111,27 @@ body {
 	padding: 0;
 	min-height: 100vh;
 }
-
-body > nav {
+#top_navigation {
+	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 +140,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;
-	background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png");
-	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;
+	max-width: var(--content-max-width);
+	margin: 0 auto;
 }
-body > header > * {
+body > header .bounding-box > * {
 	margin: 0;
 	padding: 0;
 	flex: 1 1 auto;
@@ -132,6 +173,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 +186,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 +222,27 @@ blockquote {
 }
 
 h1 {
-	font-size: 1.5rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-1-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 h2,
 article * h1,
 section > header:first-child {
-	font-size: 1.45rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-2-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 h3,
 article * h2 {
-	font-size: 1.25rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-3-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 h4,
 article * h3 {
-	font-size: 1.15rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-4-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 img {
@@ -202,7 +250,7 @@ img {
 	height: auto;
 }
 
-ul {
+dl, ul {
 	padding-left: 1.15rem;
 }
 
@@ -213,9 +261,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 +316,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 +324,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 +352,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 +365,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 +374,61 @@ 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;
+}
+.lane.stack > article > footer {
+	margin-bottom: 1rem;
+}
 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: 4px;
+	border-width: 3.5px;
 	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.2em;
-	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%;
+	font-size: 1.4em;
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
 	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 +438,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-size: 60%;
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
 	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-size: 95%;
-	padding: 0px;
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	mask-repeat: repeat;
+	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.3em;
+	font-size: 1.5rem;
 }
 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 {
-	font-size: 7.5rem;
-	letter-spacing: -0.65rem;
-	line-height: 0.75;
+#title {
+	background-image:  url("/images/hpr-splatter-logo.svg");
+	background-repeat: no-repeat;
+	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-size: 1.15rem;
+	font-family: var(--tagline-font-family);
+	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 {
-	font-size: 2rem;
+#tag_line #tag1 {
+	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 +561,284 @@ fieldset > table td select {
 	display: block;
 	font-size: 1rem;
 }
-
 fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-
-fieldset > table td input,
-fieldset > table td textarea {
-	width: calc(100vw + -16vw + -1.5rem);
-	max-width: 100%;
+input {
 	border: thin solid var(--input-border-primary);
 	border-radius: 0.2rem;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
-
-fieldset > table td select {
-	appearance: none;
+input[type="submit"] {
+	background-color: var(--background-secondary);
+	color: var(--text-secondary);
+	font-weight: 400;
+	width: fit-content;
+}
+input[type="submit"]:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--background-primary);
+}
+select {
+	appearance: auto;
 	background: var(--background-primary);
 	color: var(--text-primary);
-	width: calc(100vw + -16vw + -0.40rem);
 	border: 1px solid var(--input-border-primary);
 	border-radius: 0.25rem;
 	cursor: pointer;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
-fieldset > table td select:focus{
+select:focus{
     background: var(--background-secondary);
 	color: var(--text-secondary);
-}
-fieldset > table td select:active {
+}select:active {
     background: var(--background-secondary);
 	color: var(--text-primary);
 }
+fieldset > input,
+fieldset > table td input,
+fieldset > table td textarea {
+	width: calc(100vw + -16vw + -1.5rem);
+	max-width: 100%;
+}
+fieldset > table td select {
+	width: calc(100vw + -16vw + -0.40rem);
+}
 fieldset > table td input[type="radio"] {
 	display: initial;
 	width: initial;
 	margin-bottom: 0.5rem;
 }
-
-fieldset > input {
-	background: var(--background-secondary);
-	color: white;
-	font-weight: 600;
-	padding: 0.5rem;
-	border: thin solid var(--input-border-primary);
-	border-radius: 0.2rem;
+#youtube {
+	--video-ratio: calc(390 / 640);
+	width: min(calc(89vw + 0px), 640px);
+	height: min(calc(calc(89vw + 0px) * var(--video-ratio)), 390px);
+}
+#upload_method pre {
+	max-width: 80vw;
+	overflow-x: scroll;
+}
+#search form {
+	flex: 1 1 100%;
+}
+#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;
+	display: none !important;
+}
+#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(2) {
+    display: inline-flex;
+}
+#hosts td:nth-child(-n+2) a {
+	color: var(--link-secondary);
+	flex: 1;
+}
+#hosts td:nth-child(-n+2) a:hover {
+	color: var(--link-secondary-hover);
+}
+#hosts td:nth-child(-n+2) a strong {
+    display: inline-block;
+	line-height: 1.5rem;
+}
+#hosts td:nth-child(2) {
+	padding: 0.25rem 0 0 8px;
+	width: calc(100% - 90px);	
+}
+
+#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: center;
+	align-items: center;
+	gap: 0.5rem;
+}
+#host_id {
+	text-align: center;
+}
+#host_id > h2 {
+	margin-top: 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 0 1rem 0;
+	padding: 0;
+	font-style: italic;
+}
+.series-desciption > *:last-child {
+	margin-bottom: 0;
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+#show_notes {
+	max-width: 98vw;
+}
+#show_notes pre
+{
+    overflow: auto;
+}
+#show_notes code {
+	display: inline-block;
+    background-color: var(--show-notes-pre-background);
+    border: 1px solid #ddd;
+	padding: 0.1em 0;
+}
+nav.episodes {
+	color: var(--background-primary);
+	font-size: 0.9em;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	max-width: 100vw;
+}
+nav.episodes span {
+	color: var(--text-primary);
+	display: inline-block;
+	text-align: center;
+	border: solid thin var(--text-primary);
+}
+nav.episodes span:nth-child(-n+2),
+nav.episodes span:nth-child(-n+2) a {
+	border-top-left-radius: 2rem;
+	border-bottom-left-radius: 2rem;
+}
+nav.episodes span:nth-child(n+3),
+nav.episodes span:nth-child(n+3) a {
+	border-top-right-radius: 2rem;
+	border-bottom-right-radius: 2rem;
+}
+nav.episodes span.no-link, 
+nav.episodes span a {
+	padding: 0.3em var(--episode-nav-padding) 0.1em var(--episode-nav-padding);
+	display: inline-block;
+	min-width: 4.4em;
+	min-height: 1.5em;
+}
+nav.episodes span a:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--link-secondary-hover);
+}
+nav.episodes svg {
+	margin: 0 0.2rem;
+	height: 0.85em;
+	max-width: 13px;
+	vertical-align: middle;
+}
+nav.episodes span a svg #arrow,
+nav.episodes span a svg #bar {
+	stroke: var(--link-primary);
+	fill: var(--link-primary);
+}
+nav.episodes span a:hover svg #arrow,
+nav.episodes span a:hover svg #bar {
+	stroke: var(--link-secondary-hover);
+	fill: var(--link-secondary-hover);
 }
 @media (min-width: 600px) {
-	body > header {
-		background-size: 200pt, cover;
-		background-position: left 128pt top -12pt, left top;
+	body > header .bounding-box {
 		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 +889,96 @@ 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: 2rem;
+	}
+	nav.episodes {
+		display: inline-block;
+	}
 }
 @media (min-width: 900px) {
-	.lane > article {
-		flex-basis: 32%;
-		max-width: 32%;
+	#podcast_lane > .lane,
+	#project_lane > .lane {
+		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;	
+		--show-notes-pre-background: #b54c08;
+	}
+	body > header {
+		background-image: url("/images/main-header-background-dark.png");
+		background-color: #22545a;
+	}	
+	img {
+		filter: brightness(0.70);
+	}
+	a.lane-button {
+		background-image: url("/images/lane-button-background-dark.png");
+		color: var(--lane-button-color);
+	}
+	a.lane-button img {
+		filter: none;
+	}
+	.lane > article > header {
+		color: var(--text-secondary);
+	}
+	#title a:hover {
+		color: var(--link-header-hover);
+	}
+	#hosts td:nth-child(-n+2) {
+		color: var(--text-primary);
+	}
+	nav.episodes span a:hover {
+		background-color: var(--link-primary-hover);
+		color: var(--link-navigation-hover);
+	}
+	nav.episodes span svg #arrow,
+	nav.episodes span svg #bar {
+		stroke: var(--text-primary);
+		fill: var(--text-primary);
+	}
+	nav.episodes span a:hover svg #arrow,
+	nav.episodes span a:hover svg #bar {
+		stroke: var(--link-navigation-hover);
+		fill: var(--link-navigation-hover);
+	}
 }

public_html/images/icons/arrow-first.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_first"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+    <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     d="M 9.9303359,11.572157 11.530286,10.119277 7.0035163,5.9964088 11.484768,1.9181465 9.8743209,0.45252151 3.7931149,5.986851 Z" />
+  <rect
+     style="stroke-width:0.524;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-start:url(#Arrow1Lstart);paint-order:normal"
+     id="bar"
+     width="2.2"
+     height="11.263"
+     x="0.5"
+     y="0.36860976"
+     rx="0"
+     ry="0.0015425405" />
+</svg>

public_html/images/icons/arrow-last.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_last"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     d="M 2.0731448,11.604466 0.47319466,10.151586 4.9999643,6.0287178 0.51871266,1.9504555 2.1291598,0.48483049 8.2103658,6.01916 Z" />
+  <rect
+     style="stroke-width:0.524;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-start:url(#Arrow1Lstart);paint-order:normal"
+     id="bar"
+     width="2.2"
+     height="11.263"
+     x="-11.503481"
+     y="0.40091875"
+     rx="0"
+     ry="0.0015425405"
+     transform="scale(-1,1)" />
+</svg>

public_html/images/icons/arrow-next.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_next"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     d="M 2.0731448,11.604466 0.47319466,10.151586 4.9999643,6.0287178 0.51871266,1.9504555 2.1291598,0.48483049 8.2103658,6.01916 Z" />
+</svg>

public_html/images/icons/arrow-previous.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="arrow_previous"
+   width="12"
+   height="12"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     id="arrow"
+     style="stroke-width:0.584448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     d="M 9.9303359,11.572157 11.530286,10.119277 7.0035163,5.9964088 11.484768,1.9181465 9.8743209,0.45252151 3.7931149,5.986851 Z" />
+</svg>

site.cfg

@@ -10,7 +10,7 @@ driver: dbi:SQLite:hpr.db
 
 # Configure the location of the templates and the generated HTML
 [app_paths]
-templates_path: ./templates
+templates_path: ./templates:./public_html/images/icons
 output_path: ./public_html
 
 # Configure the root template page which pulls in the navigation and 
@@ -108,9 +108,9 @@ content: content-sitemap.tpl.html
 navigation: navigation-main.tpl.html
 content: content-tags.tpl.html
 
-[twat_episode]
+[twt_episode]
 navigation: navigation-get-shows.tpl.html
-content: content-twat_episode.tpl.html
+content: content-twt_episode.tpl.html
 multipage: true
 filename: eps/twt[id]/index.html
 
@@ -130,6 +130,10 @@ content: content-promote.tpl.html
 navigation: navigation-about.tpl.html
 content: content-comments_viewer.tpl.html
 
+[new_year]
+navigation: navigation-about.tpl.html
+content: content-new_year.tpl.html
+
 [hpr_ogg]
 root_template: rss.tpl.xml
 content: rss-hpr.tpl.xml
@@ -171,3 +175,15 @@ media_file_extension: spx
 [comments]
 root_template: rss-comments.tpl.xml
 filename: comments.rss
+
+[correspondent_m3u]
+root_template: m3u.tpl.m3u8
+content: m3u-correspondent.tpl.m3u8
+filename: correspondents/[id]/playlist.m3u8
+multipage: true
+
+[series_episodes_m3u]
+root_template: m3u.tpl.m3u8
+content: m3u-series_episodes.tpl.m3u8
+filename: series/[id].m3u8
+multipage: true

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>
-	<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="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>
+	<header>
+		<h2><!--% item.comment_author_name %--> says: <!--% item.comment_title %--></h2>
+	</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

@@ -3,68 +3,48 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS "queries-correspondent.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
-<!--% results_hpr_shows = DBI.prepare(query_hpr_shows)
-%-->
-<!--% results_hpr_show_count = DBI.prepare(query_hpr_show_count) %-->
-<!--% hpr_shows_to_count = results_hpr_show_count.execute(id); %-->
-<!--% hpr_shows = results_hpr_shows.execute(id); %-->
-<!--% hpr_show_count = 0 %-->
-<!--% FOREACH show IN hpr_shows_to_count %-->
-<!--% hpr_show_count = hpr_show_count +1; %-->
-<!--% END %-->
+<!--% results_hpr_shows = DBI.prepare(query_hpr_shows) %-->
+	<!--% results_hpr_show_count = DBI.prepare(query_hpr_show_count) %-->
+	<!--% hpr_result_status = results_hpr_show_count.execute(id); %-->
+	<!--% hpr_shows = results_hpr_shows.execute(id); %-->
+	<!--% hpr_show_count = results_hpr_show_count.fetchrow_array %-->
 
-<!--% query_twat_show_count = DBI.prepare('
-		SELECT id
-		FROM twat_eps AS eps
-		WHERE eps.hostid = ?
-		')
-%-->
-<!--% query_twat_shows = DBI.prepare('
-		SELECT
-		eps.id,
-		CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
-		eps.date, eps.license, eps.duration,
-		eps.title, eps.summary, eps.tags,
-		eps.notes,
-		hosts.local_image,
-		hosts.hostid,
-		hosts.host, hosts.email, hosts.profile,
-		miniseries.name AS series, miniseries.id AS seriesid
-	FROM twat_eps AS eps
-	INNER JOIN hosts ON eps.hostid = hosts.hostid
-	INNER JOIN miniseries ON eps.series = miniseries.id
-	WHERE hosts.hostid = ?
-	ORDER BY eps.id DESC
-	')
-%-->
-<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
-<!--% twat_shows = query_twat_shows.execute(id); %-->
-<!--% twat_show_count = 0 %-->
-<!--% FOREACH show IN twat_shows_to_count %-->
-<!--% twat_show_count = twat_show_count +1; %-->
-<!--% END %-->
+	<!--% results_hpr_shows = DBI.prepare(query_twt_shows) %-->
+	<!--% results_twt_show_count = DBI.prepare(query_twt_show_count) %-->
+	<!--% twt_result_status = results_twt_show_count.execute(id); %-->
+	<!--% twt_shows = results_hpr_shows.execute(id); %-->
+	<!--% twt_show_count = results_twt_show_count.fetchrow_array %-->
 
-<!--% hosts = DBI.tie('hosts', 'hostid') %-->
+			<!--% 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>email:</label> <u><!--% this_host.email %--></u><br>
-		<label>profile:</label> <!--% this_host.profile %--><br><br>
-		<label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong>
-		</p>
+					<label>Host ID</label>: <!--% this_host.hostid %--></p>
+				</div>
+				<div id="host_meta">
+					<p><label>email:</label> <u><!--% this_host.email %--></u></p>
+					<div><label>profile:</label> <!--% this_host.profile %--></div>
+					<p><label>episodes:</label> <strong><!--% hpr_show_count + twt_show_count %--></strong></p>
+					<p><a href="<!--% absolute_url(baseurl,'//correspondents') %-->/<!--% zero_pad_left(this_host.hostid) %-->/playlist.m3u8">Download the M3U playlist</a>.</p>
+				</div>
+			</div>
+			<div id="episodes" 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>
-	<!--% END %-->
-	<!--% FOREACH twat_show IN twat_shows; %-->
-
-		<!--% twat_show_summary(twat_show, 'hide_host') %-->
-		<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
-    <!--% END %-->
 				</article>
-	<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
+				<!--% END %-->
+				<!--% FOREACH twt_show IN twt_shows; %-->
+				<article>
+
+					<!--% twt_show_summary(twt_show, 'hide_host') %-->
+					<p class="listen-in"><!--% display_listen_in(twt_show.id,"twt") %--></p>
+				</article>
+				<!--% END %-->
+			</div>
+			<p><a href="<!--% absolute_url(baseurl) %-->../about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>

templates/content-correspondents.tpl.html

@@ -1,33 +1,34 @@
 <!--% 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 />
+	<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">
-	<th >Avatar</th>
-	<th >Name &amp; Host ID</th>
-	<th >License</th>
-	<th >Last Show</th>
+	<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 
 		from hosts as h 
 		inner join (select hostid, max(date) as date from eps group by hostid) as e 
 		on h.hostid = e.hostid
-		order by h.host'
+		order by h.host COLLATE NOCASE asc'
 	) %-->
-	<tr>
+	<tr class="lane">
 	<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>
 
-		<td><strong><!--% host.host %--></strong><br>
-
-			Host ID: <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(host.hostid) %-->.html"><!--% host.hostid %--></a></td>
+		<td><a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(host.hostid) %-->.html"><strong><!--% host.host %--></strong><br>
+			Host ID: <!--% host.hostid %--></a></td>
 		<td><!--% host.license %--></td>
 		<td><!--% host.date %--></td>
 	</tr><!--% host_cnt = host_cnt + 1 %-->
 	<!--% END %-->
+	</tbody>
 	</table>
-	<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
-</article>
+	<p><a href="<!--% absolute_url(baseurl) %-->../about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>

templates/content-episode.tpl.html

@@ -26,7 +26,7 @@ Hosted by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pa
 <h3><!--% show_series(episode.series, episode.seriesid, "Part of the series") %--></h3> 
 <p><em><!--% episode.series_description %--></em></p>
 	</header>
-	<div><!--% episode.notes %--></div>
+	<div id="show_notes"><!--% episode.notes %--></div>
 <footer>
 <p>
 <!--% episode_navigation %-->
@@ -61,11 +61,11 @@ Subscribe to the comments <a href="<!--% absolute_path(baseurl) %-->comments.rss
         <h2>Leave Comment</h2>
         <p>
         <strong>Note to Verbose Commenters</strong><br />
-        If you can't fit everything you want to say in the comment below then you really should <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">record</a> a response show instead.
+        If you can't fit everything you want to say in the comment below then you really should <a href="<!--% absolute_url(baseurl) %-->../../about.html#so_you_want_to_record_a_podcast">record</a> a response show instead.
         </p>
         <p>
         <strong>Note to Spammers</strong><br />
-		All comments are moderated. All links are checked by humans. We strip out all html. Feel free to <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">record</a> a show about yourself, or your industry, or any other topic we may find interesting. <em>We also check shows for spam :)</em>.
+		All comments are moderated. All links are checked by humans. We strip out all html. Feel free to <a href="<!--% absolute_url(baseurl) %-->../../about.html#so_you_want_to_record_a_podcast">record</a> a show about yourself, or your industry, or any other topic we may find interesting. <em>We also check shows for spam :)</em>.
         </p>
         <form method="POST" action="<!--% hub_baseurl %-->comment_confirm.php">
         <fieldset>

templates/content-episodes.tpl.html

@@ -4,7 +4,7 @@
         <p>
         All this information is available to the public. Scrape if you wish but if we can format the data for you then we're happy to help.
         </p>
-<div class="lane">
+<div class="lane stack">
 <!--% USE DBI(constants.driver) %-->
 <!--% FOREACH episodes IN DBI.query(query_episodes) 
 %-->
@@ -19,8 +19,8 @@
 		<!-- Creative Commons License -->
 		<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/"><img alt="Creative Commons License" border="0" src="https://creativecommons.org/images/public/somerights20.png" width="88" height="31" /></a><br>The following work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License</a>.</p>
 	<p>Today With a Techie Radio was brought to you by <a href="https://en.wikipedia.org/wiki/Infonomicon">The Infonomicon Computer Club</a></p>
-	<div class="lane">
-	<!--% FOREACH twat_episode IN DBI.query('
+	<div class="lane stack">
+	<!--% FOREACH twt_episode IN DBI.query('
 	SELECT 
         eps.id, 
         eps.explicit, 
@@ -29,15 +29,16 @@
         hosts.hostid, 
         hosts.host, hosts.email, hosts.local_image, 
 		miniseries.name AS series, miniseries.id AS seriesid
-    FROM twat_eps as eps
+    FROM twt_eps as eps
 	INNER JOIN hosts ON eps.hostid = hosts.hostid 
 	INNER JOIN miniseries ON eps.series = miniseries.id
 	ORDER BY eps.id DESC
 	') 
 %-->
 	<article>
-	<!--% twat_show_summary(twat_episode) %-->
+	<!--% twt_show_summary(twt_episode) %-->
  </article>
 <!--% END %-->
+	</div>
 
 

templates/content-index-announcement.tpl.html

@@ -1 +1,22 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
+<div class="lane stack">
+	<article>
+		<header>
+			<h2 class="title"><a href="<!--% absolute_path(baseurl) %-->new_year.html">The Fourteenth Annual 26 Hour New Year's Eve Show</a></h2>
+		</header>
+		<h3>Welcome every <a href="https://www.timeanddate.com/counters/multicountdown.html">TimeZone</a>!</h3>
+		<p>
+		<em>If you keep talking, we'll keep recording.</em>
+		</p>
+		<p>For those who don't know, on New Year's Eve 2025-12-31 10:00 UTC (5:00 AM EST), we will have a recording going on the HPR Mumble server for anyone to come on and say "Happy New Year" and talk about whatever they want. 
+		We will leave the recording going until at least 2026-01-01 12:00 UTC (7:00 AM EST), and keep recording until the conversation stops.</p>
+		<p>
+		So please stop in. Say "Hi" and maybe join in the conversation with other HPR listeners and contributors. It's always a good time!!<br>
+		<audio controls preload="none">
+			<source src="<!--% absolute_path(baseurl) %-->promos/hpr-nye-promo.ogg" type="audio/ogg">
+		</audio>
+		</p>
+		<p><a href="<!--% absolute_path(baseurl) %-->new_year.html">More information…</a></p>
+
+	</article>
+</div>

templates/content-index.tpl.html

@@ -3,7 +3,6 @@
 <!--% PROCESS 'shared-listen-now.tpl.html' %-->
 <!--% PROCESS 'shared-show-transcript.tpl.html' %-->
 <!--% PROCESS 'shared-call_for_shows.tpl.html' %-->
-<!--% INCLUDE 'content-index-announcement.tpl.html' %-->
 <!--% PROCESS "queries-index.tpl.html" %-->
 <!--% MACRO tidy_notes(all_lines) BLOCK %-->
 <!--% lines = all_lines %-->
@@ -36,8 +35,8 @@
 
 	<!--% 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>
+<!--% PROCESS 'content-index-announcement.tpl.html' %-->
 		<div id="call_for_shows">
 			<!--% display_call_for_shows() %-->
 		</div>
@@ -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,21 @@
   <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>
-		<ul><li>
+<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 <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(latest_episodes.hostid) %-->.html"><!--% latest_episodes.host %--></a></dt>
+		<dd>
 		<!--% latest_episodes.summary %-->
-        </li></ul>
+        </dd>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
-	</ul>
+	</dl>
+	<p><a href="<!--% absolute_path(baseurl) %-->eps/index.html">More Episodes…</a></p>
   </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 +135,10 @@
 	
 	')
 %-->
-	<li>hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %-->
-	<ul>
-		<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>
+<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>
+	<dd>on hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %--></dd>
 <!--% END %-->
-	</ul>
+	</dl>
+	<p><a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">More Comments…</a></p>
   </section>
   </section>

templates/content-new_year.tpl.html

@@ -0,0 +1,64 @@
+<!--% PROCESS 'shared-utils.tpl.html' %-->
+
+<h1><u>The Fourteenth Annual 26 Hour New Years Eve Show</u></h1>
+<h2>Welcome every <a href="https://www.timeanddate.com/counters/multicountdown.html">TimeZone</a>!</h2>
+<p>
+<em>If you keep talking, we'll keep recording.</em>
+</p>
+<p>For those who don't know, on New Years Eve 2025-12-31 10:00 UTC (5:00 AM EST), we will have a recording going on the HPR Mumble server for anyone to come on and say "Happy New Years" and talk about whatever they want. 
+We will leave the recording going until at least 2026-01-01 12:00 UTC (7:00 AM EST), and keep recording until the conversation stops.</p>
+<p>
+So please stop in. Say "Hi" and maybe join in the conversation with other HPR listeners and contributors. It's always a good time!!<br />
+</p>
+
+<h2>History</h2>
+
+<p>Suggested by <a href="https://hackerpublicradio.org/correspondents/0128.html">pokey</a> in 2011.
+As podcasting tends to be a one way conversation, he thought it would be nice to get all the FLOSS, Linux, Free Culture, podcasters and Listeners in one place to get together and chat in person.
+Initially it was planned to be just a few hours, but we kept missing members from other parts of the world. 
+The show was extended to welcome ever time zone to the New Year, which actually turns out to be <a href="https://en.wikipedia.org/wiki/List_of_UTC_offsets">38 Timezones</a>, over 26 Hours.</p>
+
+<p>So we will record for at least 26 Hours, but will keep the recording going for an "After Show".
+Some years the after show has been even longer than the show itself.
+While this is on the HPR Site, it is entirely a community initiative which is supported heavily by the fine folks over at the <a href="https://linuxlugcast.com/">LinuxLugCast</a>, with the Mumble Server been provided by <a href="https://hackerpublicradio.org/correspondents/0228.html">Delwin</a>.</p>
+
+<h2>Ground Rules</h2>
+<h3>Use Push to Talk, and a Headset</h3>
+
+<p>With so many people on the chat, you must use push to talk. 
+You also need to use a Headset so the audio of the room is not fed back. 
+If there is a problem with your setup, then please drop and listen to the stream. 
+Trying to correct poor audio in post is a lot of work, that someone else will have to do.</p>
+
+<h3>Be Polite</h3>
+
+<p>When you enter the room please do not interrupt ongoing conversations. 
+Wait for a pause in the conversation and say Hi.
+It's quite common for people you might not know to join as they wish to speak with other people in the room. 
+They may have been waiting all year for the chance to meet, so please give people the space to have these conversations.</p>
+
+<h3>Do not announce the Time Zones</h3>
+
+<p>As there are so <a moz-do-not-send="true" href="https://en.wikipedia.org/wiki/Time_zone">many Time Zones</a> there is no need to interrupt the conversation to announce every one. 
+If you are joining from a time zone that is currently switching to the New Year, then please wait for a pause and wish people Happy New Year.</p>
+
+<h3>Don't Fill Dead Air</h3>
+
+<p>This is a relaxed meet-up, and not a traditional "Radio Broadcast". 
+If there are no conversations going on at a given time, don't feel the need to "fill dead air". 
+Before the recording is posted as a podcast the <a href="https://manual.audacityteam.org/man/truncate_silence.html">silences will be truncated</a>.</p>
+
+<h3>Do not monopolise the conversation</h3>
+
+<p>Please be mindful that you (or your beverage of choice) may be speaking too much ;-).</p>
+
+<h3>You are a Guest</h3>
+
+<p>Be respectful, and remember that attendance on the New Year Show does not <a href="https://hub.hackerpublicradio.org/calendar.php">constitute a show</a>.</p>
+
+<h3>CC-BY-SA</h3>
+
+<p>The recording will be released as a podcast on HPR under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> license. 
+The recordings will be released mid year, when there is a lull in submissions.</p>
+
+

templates/content-search.tpl.html

@@ -1,45 +1,123 @@
- <article>
+<section id="search">
 	<header>
 		<h1>Search HPR.</h1>
 	</header>
-<hr />
-<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/">
+	<div class="lane">
+		<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>
-<br />
-<a href="https://duckduckgo.com/privacy">privacy policy</a>
-</p>
-<hr />
-<h2>Bing</h2>
-<p>
-<form method="get" action="https://www.bing.com/search">
-<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>
-<br />
-<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
-</p>
-  </article>
+			<p>
+			<a href="https://duckduckgo.com/privacy">privacy policy</a>
+			</p>
+			</fieldset>
+		</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" />
+				<p>
+				<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>
@@ -12,8 +13,9 @@
 		<li>Date of earliest show: <!--% series.earliest_show %--></li>
 		<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>
+		<li><a href="<!--% absolute_url(baseurl,'//series') %-->/<!--% zero_pad_left(series.id) %-->.m3u8">Download the M3U playlist</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>
@@ -14,14 +13,18 @@
 	<li>Date of earliest show: <!--% series.earliest_show %--></li>
 	<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>
+	<li><a href="<!--% absolute_url(baseurl,'//series') %-->/<!--% zero_pad_left(series.id) %-->.m3u8">Download the M3U playlist</a></li>
 </ul>
-<div><em><!--% series.description %--></em></div>
-<!--% END %-->
+<p><em><!--% series.description %--></em></p>
+<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>
-<!--% END %-->
+<footer class="listen-in"><!--% display_listen_in(show.id) %--></footer>
 </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'] %-->
-
-<style>
-    .columns3 { columns: 3 auto; list-style-type: none }
-    hr.thin {
-        border: 0;
-        height: 0;
-        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>
+<header>
+	<hgroup>
+	<h1 class="title"><a id="TOP">Search by Tag</a></h1>
+	<p class="date">Page 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 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/content-twt_episode.tpl.html

@@ -6,23 +6,23 @@
 <!--% query_episodes = DBI.prepare('
 		WITH episode_maxmin AS (
 					SELECT MAX(id) AS \'latest\', MIN(id) AS \'earliest\', ? AS \'id\' 
-					FROM twat_eps AS eps
+					FROM twt_eps AS eps
 		),
 		episode_date AS (
 			SELECT eps.date 
-			FROM twat_eps AS eps
+			FROM twt_eps AS eps
 			WHERE eps.id = ?
 		),
 		episode_previous AS (
 			SELECT MAX(id) AS \'previous\', ? AS \'id\'
-			FROM twat_eps AS eps
+			FROM twt_eps AS eps
 			INNER JOIN episode_date
 			ON eps.date < episode_date.date
 			WHERE eps.id > 1
 		),
 		episode_next AS (
 			SELECT MIN(id) AS \'next\', ? AS \'id\'
-			FROM twat_eps AS eps
+			FROM twt_eps AS eps
 			INNER JOIN episode_date
 				ON eps.date > episode_date.date
 		)
@@ -34,7 +34,7 @@
 			   hosts.hostid, hosts.host,
 			   miniseries.name AS \'series\', miniseries.id AS \'seriesid\',
 			   miniseries.description AS \'series_description\'
-		FROM twat_eps AS eps
+		FROM twt_eps AS eps
 		INNER JOIN hosts ON eps.hostid = hosts.hostid
 		INNER JOIN miniseries ON eps.series = miniseries.id
 		INNER JOIN episode_maxmin ON eps.id = episode_maxmin.id
@@ -55,8 +55,8 @@
 <p><!--% show_avatar(episode.hostid, episode.host) %-->
 Hosted by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(episode.hostid) %-->.html"><!--% episode.host %--></a> on <span><!--% day_and_date(episode.date) %--></span> is flagged as <span><!--% display_explicit(episode.explicit) %--></span> and is released under a <span><!--% episode.license %--> license</span>. <br>
 <!--% display_tags(episode.tags) %--> <br>
-<!--% listen_now(episode, "twat", baseurl, media_baseurl) %-->
-<!--% display_listen_in(episode.id, "twat") %-->  
+<!--% listen_now(episode, "twt", baseurl, media_baseurl) %-->
+<!--% display_listen_in(episode.id, "twt") %-->  
 </p>
 <h3><!--% show_series(episode.series, episode.seriesid, "Part of the series") %--></h3> 
 <p><em><!--% episode.series_description %--></em></p>

templates/ids-correspondent_m3u.tpl.html

@@ -0,0 +1,7 @@
+<!--% USE DBI(constants.driver) %-->
+<!--% FOREACH host IN DBI.query(
+	'select h.hostid from hosts as h'
+) %-->
+,<!--% host.hostid %-->
+<!--% END %-->
+

templates/ids-series_episodes_m3u.tpl.html

@@ -0,0 +1,7 @@
+<!--% USE DBI(constants.driver, constants.user, constants.password) %-->
+<!--% FOREACH series IN DBI.query(
+	'select s.id from miniseries as s'
+) %-->
+,<!--% series.id %-->
+<!--% END %-->
+

templates/ids-twt_episode.tpl.html

@@ -1,6 +1,6 @@
 <!--% USE DBI(constants.driver) %-->
 <!--% FOREACH episode IN DBI.query(
-	'select eps.id from twat_eps AS eps'
+	'select eps.id from twt_eps AS eps'
 ) %-->
 ,<!--% episode.id %-->
 <!--% END %-->

templates/m3u-correspondent.tpl.m3u8

@@ -0,0 +1,24 @@
+<!--% PROCESS 'shared-utils.tpl.html' %-->
+<!--% PROCESS 'queries-correspondent.tpl.html' %-->
+<!--% USE DBI(constants.driver) %-->
+<!--% results_hpr_shows = DBI.prepare(query_hpr_shows) %-->
+<!--% hpr_shows = results_hpr_shows.execute(id); %-->
+<!--% FOREACH hpr_show IN hpr_shows; %-->
+#EXTINF: <!--% hpr_show.duration %-->,<!--% hpr_show.host %--> - <!--% hpr_show.title %-->
+
+
+<!--% media_path(hpr_show.id, 'hpr', 'mp3', baseurl, media_baseurl) %-->
+
+
+<!--% END %-->
+<!--% results_hpr_shows = DBI.prepare(query_twt_shows) %-->
+<!--% twt_result_status = results_twt_show_count.execute(id); %-->
+<!--% twt_shows = results_hpr_shows.execute(id); %-->
+<!--% FOREACH hpr_show IN twt_shows; %-->
+#EXTINF: <!--% hpr_show.duration %-->,<!--% hpr_show.host %--> - <!--% hpr_show.title %-->
+
+
+<!--% media_path(hpr_show.id, 'twt', 'mp3', baseurl, media_baseurl) %-->
+
+
+<!--% END %-->

templates/m3u-series_episodes.tpl.m3u8

@@ -0,0 +1,13 @@
+<!--% PROCESS 'shared-utils.tpl.html' %-->
+<!--% PROCESS 'queries-series_episodes.tpl.html' %-->
+<!--% USE DBI(constants.driver) %-->
+<!--% results_hpr_shows = DBI.prepare(query_shows_sql) %-->
+<!--% hpr_shows = results_hpr_shows.execute(id); %-->
+<!--% FOREACH hpr_show IN hpr_shows; %-->
+#EXTINF: <!--% hpr_show.duration %-->,<!--% hpr_show.host %--> - <!--% hpr_show.title %-->
+
+
+<!--% media_path(hpr_show.id, 'hpr', 'mp3', baseurl, media_baseurl) %-->
+
+
+<!--% END %-->

templates/m3u.tpl.m3u8

@@ -0,0 +1,2 @@
+#EXTM3U
+<!--% INCLUDE $content %-->

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 -->
-  <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="shortcut icon" href="/hpr.ico" >
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Opus RSS" href="<!--% absolute_path(baseurl) %-->hpr_opus_rss.php" />
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Ogg Vorbis RSS" href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php" />
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio MP3 RSS" href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php" />
@@ -36,31 +27,31 @@
 </head>
 
 <body>
-<nav id="accessible_menu">
-   <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
-   - <a href="#main_content">skip to main content</a>
-</nav>
-<nav id="main_menu" class="menu" role="navigation">
-<!--% INCLUDE "navigation-main.tpl.html" %-->
-</nav>
+<div id="top_navigation" class="sr-only">
+	<nav id="accessible_menu">
+		<menu>
+			<li><a href="#main_content">Skip to Main Content</a></li>
+			<li><a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a></li>
+		</menu>
+	</nav>
+	<hr class="no-css">
+</div>
 <header role="banner">
-  <div id="title">
-	  <h1 id="site_acronym">HPR</h1>
-      <h2 id="site_name">
+<div class="bounding-box">
+  <hgroup id="title">
+	  <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>
-	  <h3 id="site_url">https://HackerPublicRadio.org</h3>
-  </div>
-  <div id="tag_line">
-    <h2>The Community Podcast</h2>
-	<h2>Sharing your ideas, projects, opinions since 2005</h2>
-    <h3>New episodes every weekday </h3>
-  </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>
+      </p>
+  </hgroup>
+  <hgroup id="tag_line">
+    <h2 id="tag1">The Community Podcast</h2>
+	<p id="tag2">Sharing your ideas, projects, opinions since 2005</p>
+    <p id="tag3">New episodes every weekday </p>
+  </hgroup>
+</div>
 </header>
 <main id="main_content" role="main">
 <!--% INCLUDE $content %-->

templates/queries-correspondent.tpl.html

@@ -1,4 +1,11 @@
-<!--% query_hpr_shows = '
+<!--% query_hpr_shows = 'WITH
+	comment_tallies AS (	
+		SELECT 
+			eps_id,
+			COUNT(eps_id) AS eps_tally
+		FROM comments
+		GROUP BY eps_id 
+	)
 	SELECT
 		eps.id,
 		eps.explicit,
@@ -8,17 +15,44 @@
 		hosts.local_image,
 		hosts.hostid,
 		hosts.host, hosts.email, hosts.profile,
-		miniseries.name AS series, miniseries.id AS seriesid
+		miniseries.name AS series, miniseries.id AS seriesid,
+		COALESCE(comment_tallies.eps_tally,0) AS commentsTally
 	FROM eps
 	INNER JOIN hosts ON eps.hostid = hosts.hostid
 	INNER JOIN miniseries ON eps.series = miniseries.id
+	LEFT JOIN comment_tallies ON eps.id = comment_tallies.eps_id
 	WHERE hosts.hostid = ? AND eps.date < date(\'now\', \'+1 days\')
 	ORDER BY eps.id + 0 DESC
 	'
 %-->
 <!--% query_hpr_show_count = '
-	SELECT id
+	SELECT COUNT(id) as Tally
 	FROM eps
 	WHERE eps.hostid = ? AND eps.date < date(\'now\', \'+1 days\')
 	'
 %-->
+<!--% query_twt_show_count = '
+		SELECT COUNT(id) as Tally
+		FROM twt_eps AS eps
+		WHERE eps.hostid = ?
+		'
+%-->
+<!--% query_twt_shows = '
+		SELECT
+			eps.id,
+			CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
+			eps.date, eps.license, eps.duration,
+			eps.title, eps.summary, eps.tags,
+			eps.notes,
+			hosts.local_image,
+			hosts.hostid,
+			hosts.host, hosts.email, hosts.profile,
+			miniseries.name AS series, miniseries.id AS seriesid
+		FROM twt_eps AS eps
+		INNER JOIN hosts ON eps.hostid = hosts.hostid
+		INNER JOIN miniseries ON eps.series = miniseries.id
+		WHERE hosts.hostid = ?
+		ORDER BY eps.id DESC
+		'
+%-->
+

templates/queries-episodes.tpl.html

@@ -1,14 +1,24 @@
-<!--% query_episodes = 'SELECT
+<!--% query_episodes = 'WITH
+	comment_tallies AS (	
+		SELECT 
+			eps_id,
+			COUNT(eps_id) AS eps_tally
+		FROM comments
+		GROUP BY eps_id 
+	)
+	SELECT
         eps.id,
         eps.explicit,
         eps.date, eps.license, eps.title, eps.summary,
         eps.duration, eps.notes, eps.tags,
         hosts.hostid,
         hosts.host, hosts.email, hosts.local_image,
-        miniseries.name AS series, miniseries.id AS seriesid
+        miniseries.name AS series, miniseries.id AS seriesid,
+		COALESCE(comment_tallies.eps_tally,0) AS commentsTally
     FROM eps
         INNER JOIN hosts ON eps.hostid = hosts.hostid
         INNER JOIN miniseries ON eps.series = miniseries.id
+		LEFT JOIN comment_tallies ON eps.id = comment_tallies.eps_id
         WHERE eps.date <= date(\'now\')
         ORDER BY eps.id + 0 DESC'
 %-->

templates/queries-series_episodes.tpl.html

@@ -14,14 +14,24 @@
 		 WHERE miniseries.id = ?
 		 ORDER BY name'
 %-->
-<!--% query_shows_sql = 'SELECT
+<!--% query_shows_sql = 'WITH
+	comment_tallies AS (	
+		SELECT 
+			eps_id,
+			COUNT(eps_id) AS eps_tally
+		FROM comments
+		GROUP BY eps_id 
+	)
+	SELECT
 	id, date, title,
 	duration, summary, notes,
 	explicit, eps.license, tags,
-	hosts.host, hosts.hostid
+	hosts.host, hosts.hostid,
+	COALESCE(comment_tallies.eps_tally,0) AS commentsTally
 	FROM eps
 	INNER JOIN hosts
 	ON eps.hostid = hosts.hostid
+	LEFT JOIN comment_tallies ON eps.id = comment_tallies.eps_id
 	WHERE series = ? AND eps.date < date(\'now\', \'+1 days\')
 	ORDER BY eps.id DESC
 	'

templates/queries-tags.tpl.html

@@ -1 +1 @@
-<!--% query_tags = 'SELECT id, tags FROM eps' %-->
+<!--% query_tags = 'SELECT id, tags FROM eps WHERE eps.date <= date(\'now\')' %-->

templates/rss-comments.tpl.xml

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

templates/shared-episode-summary.tpl.html

@@ -41,7 +41,7 @@ or
 	<span><label>Flag:</label> <!--% display_explicit(show.explicit) %-->.</span> 
 	<span><!--% show_series(show.series, show.seriesid) %--></span>  <br>
 	<!--% IF hide_tags == "" %--><!--% display_tags(show.tags) %--><!--% END %-->
-	<!--% IF show.comentsTally || show.commentsTally == 0 %-->
+	<!--% IF show.commentsTally || show.commentsTally == 0 %-->
 	<span><label>Comments:</label> <!--% display_comments_tally(show.id, show.commentsTally) %--></span>
 	<!--% END %-->
 <!--% END %-->
@@ -56,7 +56,7 @@ or
 	<p class="summary"><!--% show.summary %--></p>
 <!--% END %-->
 
-<!--% MACRO twat_show_summary(show, hide_host) BLOCK %-->
+<!--% MACRO twt_show_summary(show, hide_host) BLOCK %-->
 
 	<h3 class="title"><a href="<!--% absolute_path(baseurl) %-->eps/twt<!--% zero_pad_left(show.id) %-->/index.html">Today with a Techie Ep.<!--% show.id %--> :: <!--% show.title %--></a> <!--% IF hide_host == "" %--> 
 		hosted by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(show.hostid) %-->.html"><!--% show.host %--></a>

templates/shared-utils.tpl.html

@@ -93,7 +93,7 @@
 <!--% END %-->
 
 <!--% MACRO media_path(episode_id, episode_type, media_type, baseurl, media_baseurl) BLOCK %-->
-        <!--% IF episode_type == "twat" %-->
+        <!--% IF episode_type == "twt" %-->
                 <!--% episode_type = "twt" %-->
                 <!--% padding = 3 %-->
                 <!--% media_folder = "eps/"; padding = 3 %-->
@@ -117,16 +117,20 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<small><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first">&lt;&lt; First</a>,
+<!--% arrow_first = "arrow-first.svg" %--> 
+<!--% arrow_prev = "arrow-previous.svg" %--> 
+<!--% arrow_next = "arrow-next.svg" %--> 
+<!--% arrow_last = "arrow-last.svg" %--> 
+<nav class="episodes" aria-description="Navigation to other episodes"><span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first" aria-label="first episode"><!--% INSERT $arrow_first %--><span class="no-css">&lt;&lt; </span>First</a></span>,
     <!--% IF links.previous %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous">&lt; Previous</a>,
+    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous" aria-label="previous episode"><!--% INSERT $arrow_prev %--><span class="no-css">&lt; </span>Previous</a></span>,
     <!--% ELSE %-->
-    <span>&lt;</span> Previous,
+    <span class="no-link"><!--% INSERT $arrow_prev %--><span class="no-css">&lt; </span>Previous</span>,
     <!--% END %-->
     <!--% IF links.next %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next &gt;</a>,
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next" aria-label="next episode">Next<span class="no-css"> &gt;</span><!--% INSERT $arrow_next %--></a></span>, 
     <!--% ELSE %-->
-    Next <span>&gt;</span>
+	<span class="no-link">Next<span class="no-css"> &gt;</span><!--% INSERT $arrow_next %--></span>, 
     <!--% END %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest &gt;&gt;</a></small>
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last" aria-label="latest episode">Latest<span class="no-css"> &gt;&gt;</span><!--% INSERT $arrow_last %--></a></span></nav>
 <!--% END %-->