Apply card formatting to hosts table

Create single column card stack view
Apply to comments viewer, syndication, series, and series episodes pages.
2025-09-03 23:03:20 -04:00 · 2025-09-03 21:57:28 -04:00 · 2025-09-01 00:24:44 -04:00 · 2025-08-31 23:42:44 -04:00 · 2025-08-28 22:33:50 -04:00 · 2025-08-28 22:31:52 -04:00
17 changed files with 716 additions and 352 deletions
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -111,7 +111,7 @@ file are found in the comments within the file.

 Any database supported by the Perl:DBI and Perl::DBD modules can be used with 
 the site-generator program. Currently the hpr_generator project works with 
-a MySQL or SQLite database.
+an SQLite database.

 Find the [DBI] section of the file. It should look like the following

@@ -146,26 +146,6 @@ The hpr.db section of the driver option `dbi:SQLite:hpr.db` is the path
 to the sqlite file. The default assumes the hpr.db file is located in the same
 directory as the site-generator. 

-### MySQL
-
-Remove the comment character from the start of the database, driver, 
-user, and password option lines:
-
- ```
-# Configuration settings for MySQL
-database: mysql
-driver: dbi:mysql:database=hpr_hpr:hostname=localhost 
-user: hpr-generator
-password: *********
-```
-
-This assumes that the MySQL database service is available at the localhost 
-hostname, that the database name (hpr_hpr) is the database created from 
-the hpr.sql dump file or manually created by you, that the user (hpr-generator) 
-was added by you and has read rights to the hpr_hpr database, and that the 
-password (replace ********* with the actual password) matches the password set 
-for the hpr-generator database user.
-
 ## Configuring the website for viewing locally

 For HTML links to work when viewing the files on your local machine using the 
--- a/README.md
+++ b/README.md
@@ -15,15 +15,6 @@ Static web page generator for the Hacker Public Radio website.
 		2.  Run `./utils/update-hpr.sh`
 	* SQLite v3.8.3 or greater is recommended. CTE WITH clauses are used in some template queries. Must convert WITH
 	  clauses to sub-queries when using earlier versions of SQLite.
-* With MySQL
-	* Create database hpr_hpr in the MySQL server from HPR dump file.
-		- ``sudo mysql --host=localhost < hpr.sql``
-	* Create a user that will be used by the site-generator.
-		- Suggested username: hpr-generator
-		- ``CREATE USER 'hpr-generator'@'localhost' IDENTIFIED BY '<password>';``
-	* Limit the user's privileges to EXECUTE and SELECT
-		- ``GRANT SELECT ON hpr_hpr.* TO 'hpr-generator'@'localhost';``
-		- ``GRANT EXECUTE ON `hpr_hpr`.* TO 'hpr-generator'@'localhost';``
 * Install the needed Perl modules using preferred method (distribution packages, CPAN, etc.)
    * Getopt::Long
    * Pod::Usage
@@ -35,7 +26,7 @@ Static web page generator for the Hacker Public Radio website.
    * Template::Plugin::HTML::Strip
    * DBI
    * Tie::DBI
-    * DBD::SQLite or DBD::mysql
+    * DBD::SQLite
    * Date::Calc
    * Text::CSV_XS
    * HTML::Entities
@@ -76,4 +67,6 @@ and add the label "**Feature Request**".
 * gordons
 * Ken Fallon
 * norrist
+* Paul Jewell
+

--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -26,16 +26,20 @@ https://creativecommons.org/publicdomain/
    url("/css/bebas/BebasNeue.woff") format("woff");
 }
 :root {
-	--background-primary: #dfdfdf;
+	--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: #f8961e;
+	--link-primary-hover: #b54c08/*#f8961e*/;
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
+	--link-title-color: #00003e;

+	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;

 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
@@ -43,12 +47,25 @@ https://creativecommons.org/publicdomain/
 	--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 {
@@ -70,24 +87,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;
@@ -96,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;
-	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;
@@ -122,19 +149,22 @@ 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;
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
-	padding: 0.25rem;
+	padding: clamp(0.25rem, calc(100vw - var(--for-tablet-portrait-up) + 0.5rem), 0.5rem);
+	margin-top: 0.5rem;
 	text-align: center;
 	line-height: 1.25;
 }
-body > footer hr:first-child {
-	display: none;
-	margin: 0;
-	padding: 0;
+body > footer #copyright {
+	max-width: var(--content-max-width);
+	margin: 0 auto;
 }
 body > footer a {
 	color: var(--link-secondary);
@@ -168,27 +198,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 {
@@ -196,7 +226,7 @@ img {
 	height: auto;
 }

-ul {
+dl, ul {
 	padding-left: 1.15rem;
 }

@@ -207,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;
@@ -249,24 +298,90 @@ article > p,
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: 0.5rem;
-
+	gap: 1.0rem;
+	justify-content: 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-between;
+}
+.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);
+	border-radius: 0.5rem;
+	box-shadow:
+      1px 2px 2px var(--shadow-cards),
+      2px 4px 4px var(--shadow-cards);
+	transition: 0.3s;
+	flex: 1 0 100%;
+	overflow-x: scroll;
+	padding-bottom: 1rem;
+}
+.lane > article:hover,
+#hosts tr:hover {
+	box-shadow: 
+      4px 8px 8px var(--shadow-cards),
+      8px 16px 16px var(--shadow-cards);
+}
+.lane > article > * {
+	margin-left: 1rem;
+	margin-right: 1rem;
+}
+.lane > article > header,
+.lane > article > h3 {
+	background: var(--background-secondary);
+	padding: 1.5rem 1rem 1rem 1rem;
+	margin: 0;
+	font-weight: bold;
+	font-size: 1.45rem;
+	color: var(--background-primary);
+}
+.lane > article > header a,
+.lane > article > h3 a {
+	color: var(--link-secondary);
+}
+.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;
 	justify-content: center;
-	margin: 0.5rem var(--link-spacing-horizontal);
+	margin: 0.5rem;
 	padding: 0.5rem;
 	border-width: 5px;
-	border-color: var(--link-primary);
+	border-color: var(--lane-button-border);
 	border-style: solid;
 	border-radius: 5px;
 	text-align: center;

 }
+a.lane-button:hover {
+	box-shadow: 
+      1px 2px 2px var(--link-primary-hover),
+      2px 4px 4px var(--link-primary-hover);
+}
 a.lane-button img {
-	height: 110px;
+	height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
 	filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);
 	transform: scaleX(0.9);
 }
@@ -275,30 +390,60 @@ a.lane-button img {
 	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 {
-	font-size: 2rem;
+#tag_line #tag1 {
+	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;
@@ -325,7 +470,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);
@@ -360,44 +505,132 @@ fieldset > table td input[type="radio"] {
 	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;
+#search form {
+	flex: 1 1 auto
 }
-@media (min-width: 900px) {
-	body > header {
-		background-size: 200pt, cover;
-		background-position: left 128pt top -12pt, left top;
+#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"] {
+	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 .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 {
 		text-align: center;
-	}
-	#qr_code > img {
-		max-height: 195px;
+		max-width: 195px;
 	}
 	fieldset>table,
 	fieldset>table thead,
@@ -443,7 +676,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;
 	}
+	#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) {
+	#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%;
+	}
 }
--- a/public_html/images/icons/search.svg
+++ b/public_html/images/icons/search.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   fill="currentColor"
+   version="1.1"
+   id="svg883"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <title
+     id="title18331">Search Icon</title>
+  <defs
+     id="defs887" />
+  <ellipse
+     style="opacity:0.995734;fill:none;stroke:#010001;stroke-width:1.81467;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+     id="path1376"
+     cx="14.284247"
+     cy="9.0682373"
+     rx="6.5925374"
+     ry="6.5925369" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.84169;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 2.8483937,21.838389 10.399215,13.84375"
+     id="path1882" />
+  <path
+     id="path1376-6"
+     style="opacity:0.995734;fill:none;stroke:#010001;stroke-width:1.21;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="M 14.133134,5.0939128 C 16.342061,5.259387 18.056426,6.9596051 18.240557,9.1075843 18.055629,6.9365 16.307909,5.2286717 14.133134,5.0939128 Z" />
+  <metadata
+     id="metadata18329">
+    <rdf:RDF>
+      <cc:License
+         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+      <cc:Work
+         rdf:about="">
+        <cc:license
+           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+        <dc:title>Search Icon</dc:title>
+        <dc:date>2025-08-05</dc:date>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Roan Horning</dc:title>
+          </cc:Agent>
+        </dc:creator>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>
--- a/public_html/images/qr_code_logo.png
+++ b/public_html/images/qr_code_logo.png
--- a/12
+++ b/12
@@ -56,19 +56,9 @@ Perl Template Toolkit.
        * SQLite v3.8.3 or greater is recommended. CTE WITH clauses are used in some template queries.
          Must convert WITH clauses to sub-queries when using earlier versions of SQLite.

-        With MySQL
-        * Create database hpr_hpr in the MySQL server from HPR dump file.
-                - sudo mysql --host=localhost < hpr.sql
-        * Create a user that will be used by the site-generator.
-                - Suggested username: hpr-generator
-                - CREATE USER 'hpr-generator'@'localhost' IDENTIFIED BY '<password>';
-        * Limit the user's privileges to EXECUTE and SELECT
-                - GRANT SELECT ON hpr_hpr.* TO 'hpr-generator'@'localhost';
-                - GRANT EXECUTE ON `hpr_hpr`.* TO 'hpr-generator'@'localhost';
-
        Install the needed Perl modules using preferred method (distribution packages, CPAN, etc.)
                * Config::Std
-                * DBD::SQLite or DBD:mysql
+                * DBD::SQLite
                * DBI
                * Data::Dumper
                * Date::Calc
--- a/templates/content-comments_viewer.tpl.html
+++ b/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>
--- a/templates/content-correspondents.tpl.html
+++ b/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">
-	<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 
@@ -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>
--- a/templates/content-episodes.tpl.html
+++ b/templates/content-episodes.tpl.html
@@ -1,24 +1,26 @@
 <!--% PROCESS 'shared-episode-summary.tpl.html' %-->
 <!--% PROCESS "queries-episodes.tpl.html" %-->
-<article>
-    <header>
-        <h1>Complete Archive of Shows.</h1>
+	<h1>Complete Archive of Shows.</h1>
        <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>
-    </header>
+<div class="lane">
 <!--% USE DBI(constants.driver) %-->
 <!--% FOREACH episodes IN DBI.query(query_episodes) 
 %-->
+	<article>
 	<!--% show_summary(episodes) %-->
 	<p class="listen-in"><!--% display_listen_in(episodes.id) %--></p>
+	</article>
 <!--% END %-->
+</div>
 <h2 id="twt_episodes">Today With a Techie Archived Shows</h2>
 	<p>
 		<!-- 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>
-<!--% FOREACH twat_episode IN DBI.query('
+	<div class="lane">
+	<!--% FOREACH twat_episode IN DBI.query('
 	SELECT 
        eps.id, 
        eps.explicit, 
@@ -33,8 +35,9 @@
 	ORDER BY eps.id DESC
 	') 
 %-->
+	<article>
 	<!--% twat_show_summary(twat_episode) %-->
+ </article>
 <!--% END %-->

-</article>

--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -36,66 +36,79 @@

 	<!--% 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>Welcome</header>
-		<p>Hacker Public Radio is a podcast that releases shows every weekday Monday to Friday. The shows are contributed by the public and can be on any topic that is of interest to hackers, makers, hobbyists, etc.</p>
+		<header><h2>Welcome</h2></header>
+		<p>Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a welcoming community that offers positive feedback and encourages respectful debate.</p>
 		<div id="call_for_shows">
 			<!--% display_call_for_shows() %-->
 		</div>
  </section>
  <section id="podcast_lane">
-	  <header>Podcast</header>
+	  <header><h2>The Podcast</h2></header>
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html#recording_a_podcast">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="" height="110">
 		  Record
 	  </a>
-	  <a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="" height="110">
 		  Schedule
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/rss-fill.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/rss-fill.svg" alt="" height="110">
 		 Subscribe 
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/volume-up-fill.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/volume-up-fill.svg" alt="" height="110">
 		 Listen 
 	  </a>
 	</div>
  </section>
  <section id="project_lane">
-	  <header>Project</header>
+	  <header><h2>The Project</h2></header>
 	  <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="">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="" height="110">
 		 Host 
 	  </a>
+	  <br class="no-css">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/stack-fill.svg" alt="">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/stack-fill.svg" alt="" height="110">
 		 Series 
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/question-mark.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/question-mark.svg" alt="" height="110">
 		 About 
 	  </a>
+	  <br class="no-css">
+	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->search.html">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/search.svg" alt="" height="110">
+		Search 
+	  </a>
 	</div>
  </section>
  <section id="latest_lane" class="lane">
  <!--% PROCESS 'shared-episode-summary.tpl.html' %-->
  <section id="latest_shows">
-	<header>Latest Shows</header>
+	<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></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 <!--% latest_episodes.host %--></dt>
+		<dd>
+		<!--% latest_episodes.summary %-->
+        </dd>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
-	</ul>
+	</dl>
  </section>
  <section id="latest_comments">
-	<header>Latest Comments</header>
-	<ul>
+	<header><h2>Latest Comments</h2></header>
+	<dl>
 <!--% FOREACH item IN DBI.query('
 		WITH episode_comment_rank AS (
 		SELECT 
@@ -122,12 +135,9 @@
 	
 	')
 %-->
-	<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>
+  </section>
  </section>
--- a/templates/content-search.tpl.html
+++ b/templates/content-search.tpl.html
@@ -1,45 +1,123 @@
- <article>
-    <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/">
-  <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>
+<section id="search">
+	<header>
+		<h1>Search HPR.</h1>
+	</header>
+	<div class="lane">
+		<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" 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" />
+			<p>
+			<a href="https://duckduckgo.com/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>
--- a/templates/content-series.tpl.html
+++ b/templates/content-series.tpl.html
@@ -1,17 +1,20 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS "queries-series.tpl.html" %-->
-  <article>
 <!--% USE DBI(constants.driver) %-->
 <h1 class="title">In-Depth Series</h1>
+<div class="lane stack">
 <!--% FOREACH series IN DBI.query(query_episodes) %-->
-	<h2><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></h2>
-<ul>
-	<li>Number of episodes: <!--% series.number_of_episodes %--></li>
-	<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
-	<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>
-</ul>
-<em><!--% series.description %--></em>
-<!--% END %-->
+
+  <article>
+	<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
+	<ul>
+		<li>Number of episodes: <!--% series.number_of_episodes %--></li>
+		<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
+		<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>
+	</ul>
+	<div class="series-description"><!--% series.description %--></div>
  </article>
+<!--% END %-->
+</div>
--- a/templates/content-series_episode.tpl.html
+++ b/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>
-<!--% 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 %-->
--- a/templates/content-syndication.tpl.html
+++ b/templates/content-syndication.tpl.html
@@ -1,24 +1,20 @@
 <h1>RSS Syndication</h1>
-
-<article>
-  <header>
    <h2>Subscribe to our Feeds</h2>
-  </header>
  <p>
  Great that you want to listen. Have a look below at the feeds that best suite your listening habits.
  </p>
-</article>
-<article>
+  <div class="lane stack">
+  <article>
  <header>
+	<hgroup>
    <h2><img src="<!--% absolute_path(baseurl) %-->images/feed.png" alt="rss logo"> The Community News Summary</h2>
-    <h3>One show a month</h3>
+    <p>One show a month</p>
+	</hgroup>
  </header>
-  <p>
-  If you get overwhelmend by the amount of shows we produce, then this is a good place to start.
-  </p>
-  <p>
-  Every month, the HPR Janitors put down their mops had have a chat about all the shows, and what else has been going on in the HPR community. This is a regular show scheduled for the first Monday of the month. 
-  </p>
+  <p>If you get overwhelmend by the amount of shows we produce, then this is a good place to start.</p>
+
+  <p>Every month, the HPR Janitors put down their mops had have a chat about all the shows, and what else has been going on in the HPR community. This is a regular show scheduled for the first Monday of the month.</p>
+
  <ul>
    <li><a href="<!--% absolute_path(baseurl) %-->hpr_opus_rss.php?series=47">opus</a>.</li>
    <li><a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=47">ogg</a>.</li>
@@ -30,8 +26,10 @@
 </article>
 <article>
  <header>
+	<hgroup>
    <h2><img src="<!--% absolute_path(baseurl) %-->images/feed.png" alt="rss logo"> Two week Audio feed</h2>
-    <h3>5 shows a week</h3>
+    <p>5 shows a week</p>
+	</hgroup>
  </header>
  <p>
  Use these feeds to keep up to date with the latest HPR Episodes.
@@ -77,8 +75,10 @@
    <li><a href="<!--% absolute_path(baseurl) %-->comments.rss">Listener contributed comments to the episodes</a></li>
  </ul>
 </article>
-<hr />
+<div>
+<hr class="no-css">
 <h1>Other Download Options</h1>
+<div class="lane syndication">
 <article>
  <header>
    <h2>Site Replication Sources</h2>
@@ -111,25 +111,27 @@

 <article>
  <header>
-  <h1>Download Archive</h1>
+  <h2>Download Archive</h2>
+ </header>
  <p>Please be aware that our Archive exceeds <strong>200Gb</strong></em>. We are happy for you to download them, but please make sure that you are not going to incur additional bandwidth charges on your side.</p>
  <p>We will be happy to physically send episodes anywhere in the world if bandwidth is an issue.</p>
-  </header>
-  <h2>Full Episode Guide</h2>
-  <p>
-  The <a href="<!--% absolute_path(baseurl) %-->eps/index.html">compete episode guide</a> is available to you, and it lists all the shows on one page going right back to the very first episode.
-  </p>
-  <h2>Command line download</h2>
-  <p>
-  You can download the audio of the episodes directly from the command line using the following commands:
-  </p>
-  <ul>
-  <li>ogg:<br />
-  <span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].ogg' -o "hpr#1.ogg"</span></li>
-  <li>spx:<br />
-  <span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].spx' -o "hpr#1.spx"</span></li>
-  <li>mp3:<br />
-  <span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].mp3' -o "hpr#1.mp3"</span></li>
-  </ul>
-
 </article>
+
+<article>
+  <header><h2>Full Episode Guide</h2></header>
+  <p>The <a href="<!--% absolute_path(baseurl) %-->eps/index.html">compete episode guide</a> is available to you, and it lists all the shows on one page going right back to the very first episode.</p>
+</article>
+
+<article>
+  <header><h2>Command line download</h2></header>
+  <p>You can download the audio of the episodes directly from the command line using the following commands:</p>
+  <ul>
+  <li>ogg:<br>
+  <code>curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].ogg' -o "hpr#1.ogg"</code></li>
+  <li>spx:<br>
+  <code>curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].spx' -o "hpr#1.spx"</code></li>
+  <li>mp3:<br>
+  <code>curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].mp3' -o "hpr#1.mp3"</code></li>
+  </ul>
+</article>
+</div>
--- a/templates/content-tags.tpl.html
+++ b/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>
--- a/templates/page.tpl.html
+++ b/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,39 +27,37 @@
 </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
-  </div>
-    </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 %-->
 </main>
 <footer role="contentinfo">
-  <hr>
+  <hr class="no-css">
  <div id="copyright">
 	  <span>Unless otherwise stated, our shows are released 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.</span>
--- a/utils/check-dependencies.sh
+++ b/utils/check-dependencies.sh
@@ -1,73 +1,67 @@
-#!/bin/bash - 
+#!/bin/bash -
 #===============================================================================
 #
 #          FILE: check-dependencies.sh
-# 
-#         USAGE: ./check-dependencies.sh 
-# 
-#   DESCRIPTION: Check that Perl module dependencies for the hpr_generator 
+#
+#         USAGE: ./check-dependencies.sh
+#
+#   DESCRIPTION: Check that Perl module dependencies for the hpr_generator
 #		  are installed.
-# 
+#
 #       OPTIONS: ---
 #  REQUIREMENTS: ---
 #          BUGS: ---
 #         NOTES: ---
 #        AUTHOR: Roan "Rho`n" Horning (roan.horning@gmail.com)
-#  ORGANIZATION: 
+#  ORGANIZATION:
 #       CREATED: 09/05/2024 09:55:00 PM
 #      REVISION:  ---
 #===============================================================================

-set -o nounset                              # Treat unset variables as an error
+set -o nounset # Treat unset variables as an error

 #---  FUNCTION  ----------------------------------------------------------------
-#          NAME: is_module_installed 
-#   DESCRIPTION: Tests if the supplied module is found on the system 
+#          NAME: is_module_installed
+#   DESCRIPTION: Tests if the supplied module is found on the system
 #    PARAMETERS: Name of the denpendent Perl module
 #       RETURNS: 0 if not found, 1 if found
 #-------------------------------------------------------------------------------
 function is_module_installed {
-	HR="----------------------"
-	perl -e "use ${1} " 
-	if  [ $? -ne 0 ]
-	then
-		echo ${HR}
-	else
-		echo "Found module ${1}"
-		echo ${HR}
-	fi
+  HR="----------------------"
+  perl -e "use ${1} "
+  if [ $? -ne 0 ]; then
+    echo ${HR}
+  else
+    echo "Found module ${1}"
+    echo ${HR}
+  fi
 }

-MODULES=( \
-	 "Getopt::Long" \
-	 "Pod::Usage" \
-	 "Config::Std" \
-	 "Template" \
-	 "Template::Plugin::File" \
-	 "Template::Plugin::DBI" \
-	 "Template::Plugin::HTML::Strip" \
-	 "DBI" \
-	 "Tie::DBI" \
-	 "DBD::SQLite" \
-	 "DBD::mysql" \
-	 "Date::Calc" \
-	 "Text::CSV_XS" \
+MODULES=(
+  "Getopt::Long"
+  "Pod::Usage"
+  "Config::Std"
+  "Template"
+  "Template::Plugin::File"
+  "Template::Plugin::DBI"
+  "Template::Plugin::HTML::Strip"
+  "DBI"
+  "Tie::DBI"
+  "DBD::SQLite"
+  "Date::Calc"
+  "Text::CSV_XS"
 )

 echo "The following modules must be installed for the site-generator to function: "
-for module in "${MODULES[@]}"
-do
-	echo "* ${module}"
+for module in "${MODULES[@]}"; do
+  echo "* ${module}"
 done
-echo "When MySQL is used, the DBD:mysql module is required (otherwise it is optional)"
-echo "When SQLite is used, then the DBD:SQLite module is required (otherwise it is optional)"

 echo "Scanning for modules ..."
 echo "----------------------"

-for module in "${MODULES[@]}"
-do
-	is_module_installed "${module}"
+for module in "${MODULES[@]}"; do
+  is_module_installed "${module}"
 done

 echo "Finished scanning."
Author	SHA1	Message	Date
Roan Horning	7ae15005de	Apply card formatting to hosts table	2025-09-03 23:03:20 -04:00
Roan Horning	be17edd6ac	Create single column card stack view Apply to comments viewer, syndication, series, and series episodes pages.	2025-09-03 21:57:28 -04:00
Roan Horning	3454bb717e	Tweak responsive display of main page lane buttons	2025-09-01 00:24:44 -04:00
Roan Horning	7118a3da0a	Add maximum content width Help with readability of the website on large screens.	2025-08-31 23:42:44 -04:00
Roan Horning	a8f4eea501	Change secondary background color Match the color of the main HPR logo acronym.	2025-08-28 22:33:50 -04:00
Roan Horning	edf64b668c	Tweak search page layout	2025-08-28 22:31:52 -04:00
Roan Horning	9c2b43e11f	Update search page to include tag index	2025-08-27 11:42:32 -04:00
Roan Horning	8bf4f67cce	Fix footer background color	2025-08-24 22:12:19 -04:00
Roan Horning	bad3e3e3da	Tweak swim lane icon spacing on small screens	2025-08-24 22:03:31 -04:00
Roan Horning	4e08ebad63	Fix tag_line line height for larger devices	2025-08-24 21:49:18 -04:00
Roan Horning	310f14c4bd	Tweak syndication page layout Vertically flow content and clean up card header white spacing.	2025-08-24 21:47:38 -04:00
Roan Horning	97116aad4b	Add fallback background color to main header	2025-08-24 21:32:20 -04:00
Roan Horning	02864bed9e	Merge branch 'newsite' of repo.anhonesthost.net:HPR/hpr_generator into newsite	2025-08-24 09:05:56 -04:00
Roan Horning	b12a7fb4e7	Simplify header layout Remove QR code, improve contrast of header links.	2025-08-24 09:00:33 -04:00
Roan Horning	ca90c1f580	Simplify header layout Remove QR code, improve contrast of header links.	2025-08-23 23:03:17 -04:00
Roan Horning	8a20ac971e	Add default CSS header variables	2025-08-23 22:57:05 -04:00
Roan Horning	798ccc42bc	Remove top menu Remove main navigation and make skip to main accessibility link visible to screen readers only.	2025-08-23 22:38:53 -04:00
Roan Horning	0bdc847f0f	use html definition list for latest lists	2025-08-23 22:34:22 -04:00
Roan Horning	6b8c97815a	Reformat top navigation menus Have accessibility menu appear on same line as main menu.	2025-08-08 22:50:52 -04:00
Roan Horning	4336183437	Remove CSS included at top of each page	2025-08-08 21:36:21 -04:00
Roan Horning	e5d8d20e85	Update QR code to work more easily Needed to up the number of bits used to make the code more easily decoded.	2025-08-08 21:09:11 -04:00
Roan Horning	3991c95533	Finish moving syndication page to card format	2025-08-07 20:57:00 -04:00
Roan Horning	29e2647c85	Add search button to project lane on landing page	2025-08-05 22:44:15 -04:00
Roan Horning	96d4f14b6f	Update responsive layout for footer and latest lanes	2025-08-03 23:59:06 -04:00
Roan Horning	f2b00145ad	Add episode summary to information about latest shows	2025-08-03 23:30:15 -04:00
Roan Horning	e9df7bc900	Update theme colors for links	2025-08-03 23:14:17 -04:00
Roan Horning	c742794f15	Use no-css class on page footer hr tag	2025-08-03 22:45:01 -04:00
Roan Horning	90710665c9	Add level 2 header tag to page section header tags	2025-08-03 22:40:16 -04:00
Roan Horning	6347b39d74	Text changes to landing page Per Ken's PR comment: #266 (comment)	2025-08-03 22:36:56 -04:00
Roan Horning	033fc310bf	Fix lane icon default height when no css Add height attribute to image and br tags for formatting when no css is available.	2025-08-03 22:27:13 -04:00
Roan Horning	6acaf1b28c	Update card flex layout and coloring Use the secondary background color in the card header and shadows.	2025-07-30 21:51:03 -04:00
Roan Horning	115d831c94	Merge branch 'newsite' into newsite-cards	2025-07-26 16:46:02 -04:00
Roan Horning	f58aa02980	Merge branch 'main' into newsite	2025-07-26 16:45:29 -04:00
Roan Horning	2e43f79d52	Merge pull request '#267 update-dependencies' (#268 ) from update-dependencies into main Reviewed-on: #268 Reviewed-by: Roan Horning <rho_n@josh@dao-mail.com>	2025-07-26 20:40:01 +00:00
Roan Horning	38d81cedda	Intial card layout design Format episodes, series, syndication pages with card format.	2025-07-24 22:18:56 -04:00
Roan Horning	8e2fb783b6	Add missing section end tag	2025-07-24 22:12:55 -04:00
Roan Horning	d0727a0f0c	Remove extraneous closing div tag	2025-07-24 22:02:10 -04:00
Paul Jewell	00ab3b3065	#267 - Remove mysql instructions from site-generator	2025-07-24 08:27:39 +01:00
Paul Jewell	4af0c021eb	#267 - Remove mysql instructions from GETTING_STARTED.md	2025-07-24 08:25:58 +01:00
Paul Jewell	3abeb25b03	#267 - Remove references to mysql from README.md	2025-07-24 08:21:50 +01:00
Paul Jewell	e2fd890669	#267 - remove dependency check for DBD::mysql	2025-07-24 08:18:51 +01:00