merge in changes from upstream

public_html/css/hpr.css

@@ -25,22 +25,19 @@ https://creativecommons.org/publicdomain/
     local("BebasNeue"),
     url("/css/bebas/BebasNeue.woff") format("woff");
 }
-@font-face {
-  font-family: "PatrickHand";
-  src:
-    local("PatrickHand"),
-    url("/css/PatrickHand/PatrickHand-Regular.ttf") format("ttf");
-}
 :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;
 
 	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;
@@ -53,12 +50,22 @@ https://creativecommons.org/publicdomain/
 	--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 +87,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 +116,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 +149,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 +162,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 +198,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 +226,7 @@ img {
 	height: auto;
 }
 
-ul {
+dl, ul {
 	padding-left: 1.15rem;
 }
 
@@ -213,9 +237,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;
@@ -257,15 +300,21 @@ 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: flex-between;
 }
-.lane > article {
+.lane > article,
+#hosts tr {
 	/* Add shadows to create the "card" effect */
 	border-top: thin solid var(--shadow-cards);
 	border-left: thin solid var(--shadow-cards);
@@ -278,7 +327,8 @@ article > p,
 	overflow-x: scroll;
 	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 +337,8 @@ article > p,
 	margin-left: 1rem;
 	margin-right: 1rem;
 }
-.lane > article > header {
+.lane > article > header,
+.lane > article > h3 {
 	background: var(--background-secondary);
 	padding: 1.5rem 1rem 1rem 1rem;
 	margin: 0;
@@ -295,12 +346,22 @@ article > p,
 	font-size: 1.45rem;
 	color: var(--background-primary);
 }
-.lane > article > header a {
+.lane > article > header a,
+.lane > article > h3 a {
 	color: var(--link-secondary);
 }
-.lane > article > header a:hover {
+.lane > article > header a:hover,
+.lane > article > h3: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;
@@ -398,30 +459,60 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
 	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 {
+	background-image:  url("/images/hpr-splatter-logo.svg");
+	background-repeat: no-repeat;
+	background-size: 15rem;
+	background-position: left 8.5em top -2em;
+}
+#title a {
+	color: var(--link-title-color);
+}
+#title a:hover {
+	color: var(--link-primary-hover);
+}
+#title #site_acronym {
 	font-size: 7.5rem;
 	letter-spacing: -0.65rem;
 	line-height: 0.75;
+	margin-bottom: 0.25rem;
+	color: transparent;
 }
-#tag_line h2 {
+#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-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 + 2.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;
@@ -448,7 +539,7 @@ fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-
+fieldset > input,
 fieldset > table td input,
 fieldset > table td textarea {
 	width: calc(100vw + -16vw + -1.5rem);
@@ -483,41 +574,127 @@ fieldset > table td input[type="radio"] {
 	width: initial;
 	margin-bottom: 0.5rem;
 }
-
+#search form {
-fieldset > input {
+	flex: 1 1 auto
-	background: var(--background-secondary);
+}
-	color: white;
+#search fieldset {
-	font-weight: 600;
+	padding-top: 1rem;
-	padding: 0.5rem;
+}
-	border: thin solid var(--input-border-primary);
+#search fieldset > legend {
-	border-radius: 0.2rem;
+	font-weight: var(--default-header-x-font-weight);
+}
+#search fieldset > input {
+	width: 94%;
+}
+#search fieldset > input[type="submit"] {
+	background-color: var(--background-secondary);
+	color: var(--text-secondary);
+	width: 100%;
+}
+#search fieldset > input[type="submit"]:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--background-primary);
+}
+#search fieldset > p {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
 }
 .no-css {
 	display: none;
 }
+#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;
+}
+.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;
+}
 @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 +745,39 @@ 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%;
+	}
 }
 @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%;
+	}
 }

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-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-index.tpl.html

@@ -95,20 +95,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 +135,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">
+			<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" />
-</form>
+				<p>
-<br />
 				<a href="https://www.google.com/policies/privacy/">privacy policy</a>
 				</p>
-<hr />
+			</fieldset>
-<h2>DuckDuckGo</h2>
+		</form>
 		<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>
-<p>
 		<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 syndication">
 <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,15 +12,6 @@
   <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="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" />
@@ -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">