Clean up font usage

Remove unused fonts. Add woff2 types for smaller downloads.
Offer woff2, woff, truetype/opentype versions of the font files.

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 

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
+
 

public_html/css/bebas/OFL.txt

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

public_html/css/hpr.css

@@ -13,24 +13,60 @@ https://creativecommons.org/publicdomain/
  *	- CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
  *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
 */
-@font-face {
-  font-family: "GNUTypewriter";
-  src:
-    local("GNUTypewriter"),
-    url("/css/gnutypewriter/gtw.woff") format("woff");
-}
 
+@font-face {
+  font-family: "BebasNeue";
+  src:
+    local("BEBAS NEUE"),
+    url("/css/bebas/BebasNeue.woff2") format("woff2"),
+    url("/css/bebas/BebasNeue.woff") format("woff"),
+    url("/css/bebas/BebasNeue.otf") format("opentype");
+}
+@font-face {
+  font-family: "PatrickHand";
+  src:
+    local("Patrick Hand"),
+	url("/css/patrickhand/PatrickHand-Regular.woff2") format("woff2"),
+    url("/css/patrickhand/PatrickHand-Regular.woff") format("woff"),
+	url("/css/patrickhand/PatrickHand-Regular.ttf") format("truetype");
+}
 :root {
-	--background-primary: #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;
+
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
+	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
+
+	--logo-font-family: var(--font-family-hpr);  
+	--logo-font-weight: bolder;
+	--logo-font-size: 7.5rem;
+	--logo-letter-spacing: -0.65rem;
+	--logo-line-height: 0.75;
+	--logo-margin: 0 0 0.25rem 0;
+
+	--tagline-font-family:"BebasNeue", sans-serif; 
+	--lane-button-font-family: "PatrickHand", var(--font-family-hpr); 
+	--lane-button-border: #80b4c0;
+	--input-border-primary: #4d4d4d;
+
+	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
+
+
+	--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;
@@ -39,7 +75,12 @@ https://creativecommons.org/publicdomain/
 	--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 {
@@ -55,64 +96,90 @@ body {
 	background-color: var(--background-primary);
 	color: var(--text-primary);
 	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
-	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem);
+	font-size: var(--font-size-default);
 	font-family: var(--font-family-hpr);
 	margin: 0;
 	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;
-	line-height: 1.5;
+	line-height: 1.0;
 	margin: 0;
 	padding: 0;
-	padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
+	padding-right: var(--link-spacing-horizontal);
+}
+#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/main-header-background.png");
-	color: var(--banner-text-primary);
+	max-width: var(--content-max-width);
+	margin: 0 auto;
 }
-body > header > * {
+body > header .bounding-box > * {
 	margin: 0;
 	padding: 0;
 	flex: 1 1 auto;
+	padding: 0.5rem;
+	background-image: none;
 }
 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;
-	text-align: center
+	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);
@@ -140,33 +207,33 @@ fieldset,
 input,
 textarea,
 blockquote {
-	font-family: 	inherit;
+	font-family: inherit;
 	color: inherit;
 	background: inherit;
 }
 
 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 {
@@ -174,24 +241,44 @@ img {
 	height: auto;
 }
 
-ul {
+dl, ul {
 	padding-left: 1.15rem;
 }
 
 li {
 	line-height: 1.25;
+	margin-bottom: 0.25rem;
+}
+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;
 	color: var(--link-primary-hover);
 }
-
 hr {
 	background: #4D4D4D;
 	border: 0;
@@ -199,7 +286,7 @@ hr {
 }
 
 audio {
-	padding: .7em 0em .5em 0em;
+	padding: 0.7em 0em 0.5em 0em;
 	clear: both;
 	position: relative;
 	z-index: auto;
@@ -217,56 +304,478 @@ p.meta {
 p.meta span label {
 	font-weight: bold;
 }
-
+article > p,
+#main_content > p,
+#main_content > section > p {
+	line-height: 1.45;
+}
 .lane {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-
+	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;
-	padding: 0.5rem;
-	border-width: 5px;
-	border-color: var(--link-primary);
+	margin: 0.5rem var(--link-spacing-horizontal);
+	padding: 0.5rem 0.25rem;
+	border-width: 3.5px;
+	border-color: var(--lane-button-border);
 	border-style: solid;
-	border-radius: 5px;
+	border-radius: 10px;
+	text-align: center;
+	background-image: url("../images/lane-button-background.png");
 
 }
+a.lane-button p {
+	font-family: var(--lane-button-font-family);
+	text-transform: lowercase;
+	font-size: 1.4em;
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	mask-repeat: repeat;
+	mask-size: 10%;
+	background-clip: text;
+	margin: -0.25rem;
+	letter-spacing: 1px;
+	padding: 0.25rem;
+}
+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;
-	filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);
+	height: clamp(100px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
 	transform: scaleX(0.9);		
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	mask-repeat: repeat;
+	mask-size: 70%;
+	padding: 0.5rem;
+  box-sizing: border-box;
+}
+#podcast_lane a.lane-button:first-of-type img {
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	mask-repeat: repeat;
+	mask-size: 60%;
+	padding: 0.1rem;
+}
+#podcast_lane a.lane-button:first-of-type p {
+	font-size: 1.5rem;
+}
+section:nth-of-type(odd) .lane a:nth-of-type(1) {
+	border-radius: 20px 15px 25px 15px;
+}
+section:nth-of-type(odd) .lane a:nth-of-type(2) {
+	border-radius: 20px 15px 25px 15px;
+}
+section:nth-of-type(odd) .lane a:nth-of-type(3) {
+	border-radius: 10px 25px 15px 20px;
+}
+section:nth-of-type(odd) .lane a:nth-of-type(4) {
+	border-radius: 15px 15px 10px 20px;
+}
+section:nth-of-type(even) .lane a:nth-of-type(1) {
+	border-radius: 25px 10px 15px 15px;	
+}
+section:nth-of-type(even) .lane a:nth-of-type(2) {
+	border-radius: 20px 10px 15px 10px;
+}
+section:nth-of-type(even) .lane a:nth-of-type(3) {
+	border-radius: 10px 20px 10px 15px;
+}
+section:nth-of-type(even) .lane a:nth-of-type(4) {
+	border-radius: 15px 10px 25px 30px;
 }
 #tag_line,
 #title {
 	text-transform: uppercase;
 }
+#tag_line {
+	line-height: 1.1;
+}
 #tag_line *,
 #title * {
 	margin: 0;
 	padding: 0;
+	flex: 1 1 auto;
+	background: none;
 }
-#title h1 {
-	font-size: 7.5rem;
-	letter-spacing: -0.65rem;
-	line-height: 0.75;
+#title {
+	background-image:  url("/images/hpr-splatter-logo.svg");
+	background-repeat: no-repeat;
+	background-size: 15rem;
+	background-position: left 8.5em top -2em;
 }
-#tag_line h3 {
+#title a {
+	color: var(--link-title-color);
+}
+#title a:hover {
+	color: var(--link-primary-hover);
+}
+#title #site_acronym {
+	font-family: var(--logo-font-family);
+	font-size: var(--logo-font-size);
+	font-weight: var(--logo-font-weight); 
+	letter-spacing: var(--logo-letter-spacing);
+	line-height: var(--logo-line-height);
+	margin: var(--logo-margin);
+	color: transparent;
+}
+#title #site_acronym a {
+	text-decoration: none;
+	text-shadow: 0 1px var(--link-secondary);
+}
+#title #site_name {
+	font-size: var(--default-header-2-font-size);
+	font-weight: bold;
+}
+#tag_line {
+	text-align: center;
+}
+#tag_line #tag1,
+#tag_line #tag2 {
+	text-transform: uppercase;
+	font-family: var(--tagline-font-family);
+	font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size));
+	font-weight: var(--default-header-x-font-weight);
+	letter-spacing: 0.05rem;
+}
+#tag_line #tag1 {
+	font-size: clamp(2.1rem, calc(100vw - 360px + 1rem), 2.3rem);;
+}
+#tag_line #tag3 {
+	text-align: center;
 	text-transform: capitalize;
+	font-weight: var(--default-header-x-font-weight);
 }
 #site_url {
 	font-family: "GNUTypewriter", monospace;
 	text-transform: none;
 }
-@media (min-width: 900px) {
+fieldset { 
+	border: thin solid var(--input-border-primary); 
+	border-radius: 0.2rem;
+}
+fieldset > table,
+fieldset > table thead,
+fieldset > table tbody,
+fieldset > table tr,
+fieldset > table th,
+fieldset > table td,
+fieldset > table td input,
+fieldset > table td textarea,
+fieldset > table td select {
+	display: block;
+	font-size: 1rem;
+}
+
+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);
+	max-width: 100%;
+	border: thin solid var(--input-border-primary);
+	border-radius: 0.2rem;
+	margin-bottom: 0.5rem;
+	padding: 0.5rem;
+}
+
+fieldset > table td select {
+	appearance: none;
+	background: var(--background-primary);
+	color: var(--text-primary);
+	width: calc(100vw + -16vw + -0.40rem);
+	border: 1px solid var(--input-border-primary);
+	border-radius: 0.25rem;
+	cursor: pointer;
+	margin-bottom: 0.5rem;
+	padding: 0.5rem;
+}
+fieldset > table td select:focus{
+    background: var(--background-secondary);
+	color: var(--text-secondary);
+}
+fieldset > table td select:active {
+    background: var(--background-secondary);
+	color: var(--text-primary);
+}
+fieldset > table td input[type="radio"] {
+	display: initial;
+	width: initial;
+	margin-bottom: 0.5rem;
+}
+#search form {
+	flex: 1 1 auto
+}
+#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 {
+		line-height: 1;
+	}
+	#title #tag1 {
+		font-size: 7.5rem;
+		letter-spacing: -0.65rem;
+		line-height: 0.75;
+	}
+	#tag_line #tag2 {
+		font-size: 1.82rem;
+		letter-spacing: 0.05rem;
+	}
+	#tag_line #tag1 {
+		font-size: 4rem;
+	}
+	#tag_line #tag3 {
+		font-size: 1.85rem;
+		letter-spacing: 0.05rem;
+		margin-left: 5rem;
+	}
 	#qr_code {
 		text-align: center;
+		max-width: 195px;
 	}
-	#qr_code > img {
-		max-height: 195px;
+	fieldset>table,
+	fieldset>table thead,
+	fieldset>table tbody,
+	fieldset>table tr,
+	fieldset>table th,
+	fieldset>table td,
+	fieldset>table td input,
+	fieldset>table td textarea,
+	fieldset>table td select {
+		display: revert;
+		width: revert;
+	}
+
+	fieldset>table tr {
+		vertical-align: baseline;
+	}
+
+	fieldset>table tr:nth-child(3) {
+		vertical-align: top;
+	}
+
+	fieldset>table tr:nth-child(3) td:first-child {
+		padding-top: 0.5rem;
+	}
+
+	fieldset>table tr:nth-last-child(3) td:first-child {
+		padding-top: 1rem;
+	}
+
+	fieldset>table tr:nth-last-child(2) {
+		vertical-align: top;
+	}
+
+	fieldset>table tr:nth-last-child(2) td:first-child {
+		padding-top: 0.75rem;
+	}
+
+	fieldset>table td input[type="radio"] {
+		margin-top: 1.5rem;
+	}
+	fieldset>table td select {
+		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%;
 	}
 }

public_html/css/patrickhand/OFL.txt

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

public_html/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>

site-generator

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

templates/content-comments_viewer.tpl.html

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

templates/content-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>

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>
 

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="">
-		  Record
+			<img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="" height="110">
+			<p>Record</p>
 	  </a>
-	  <a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="">
-		  Schedule
+	  <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">
+			<p>Schedule</p>
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/rss-fill.svg" alt="">
-		 Subscribe 
+	  <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">
+			<p>Subscribe</p>
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/volume-up-fill.svg" alt="">
-		 Listen 
+	  <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">
+			<p>Listen</p>
 	  </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="">
-		 Host 
+			<img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="" height="110">
+			<p>Hosts</p>
 	  </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="">
-		 Series 
+			<img src="<!--% absolute_path(baseurl) %-->images/icons/stack-fill.svg" alt="" height="110">
+			<p>Series</p>
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/question-mark.svg" alt="">
-		 About 
+	  <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">
+			<p>About</p>
+	  </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">
+			<p>Search</p>
 	  </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>

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>

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>

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

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>

templates/content-tags.tpl.html

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

templates/navigation-main.tpl.html

@@ -1,11 +1,7 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
-		<ul>	
-			<li><a href="<!--% hub_baseurl %-->calendar.php"><strong>⇧Upload⇧</strong></a></li>
-			<li><a href="<!--% absolute_path(baseurl) %-->index.html"><strong>Home »</strong></a></li>
-			<li><a href="<!--% absolute_path(baseurl) %-->syndication.html">Get Shows</a></li>
-			<li><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Give Shows</a></li>
-			<li><a href="<!--% absolute_path(baseurl) %-->about.html#how_to_help">Contribute</a></li>
-			<li><a href="<!--% absolute_path(baseurl) %-->tags.html">Tags</a></li>
-			<li><a href="<!--% absolute_path(baseurl) %-->about.html">About</a></li>
-			<li><a href="<!--% absolute_path(baseurl) %-->search.html">Search</a></li>
-		</ul>
+	<ul>	
+		<li><a href="<!--% absolute_path(baseurl) %-->index.html">Home</a></li>
+		<li><a href="<!--% hub_baseurl %-->calendar.php">Upload</a></li>
+		<li><a href="<!--% absolute_path(baseurl) %-->syndication.html">Download</a></li>
+		<li><a href="<!--% absolute_path(baseurl) %-->about.html">About</a></li>
+	</ul>

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="<!--% absolute_path(baseurl) %-->#main_content">skip to main content</a>
-</nav>
-<nav class="menu" role="navigation">
-<!--% INCLUDE $navigation %-->
-</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>

utils/check-dependencies.sh

@@ -18,7 +18,7 @@
 #      REVISION:  ---
 #===============================================================================
 
-set -o nounset                              # Treat unset variables as an error
+set -o nounset # Treat unset variables as an error
 
 #---  FUNCTION  ----------------------------------------------------------------
 #          NAME: is_module_installed
@@ -27,47 +27,41 @@ set -o nounset                              # Treat unset variables as an error
 #       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."