Apply a crafty look to lane buttons

Per Ken's PR comment:
#266 (comment)

public_html/css/hpr.css

@@ -13,22 +13,142 @@ 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("BebasNeue"),
+    url("/css/bebas/BebasNeue.woff") format("woff");
+}
+@font-face {
+  font-family: "PatrickHand";
+  src:
+    local("PatrickHand"),
+    url("/css/PatrickHand/PatrickHand-Regular.ttf") format("ttf");
+}
+
+:root {
+	--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
+	--text-primary: #4d4d4d; /* HPR Grey */
+	--banner-text-primary: #000000;
+	--background-secondary: #4d4d4d;
+	--text-secondary: #dfdfdf;
+	--link-primary: #004852 /*#154a60*/;
+	--link-primary-hover: #b54c08/*#f8961e*/;
+	--link-secondary: #a8f8ff;
+	--link-secondary-hover: #f9e9c2;
+
+	--lane-button-border: #80b4c0;
+	--input-border-primary: #4d4d4d;
+
+	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
+
+	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
+	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
+
+	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
+	--shadow-secondary-color: hsl(0, 0%, 30.2%);
+	--shadow-cards: var(--shadow-secondary-color);
+  /* 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; 
+}
 
 html {
 	margin: 0;
 	padding: 0;
-	display: block;
+	display: flex;
+	flex-direction: column;
 }
-
 body {
-	display: block;
+	display: flex;
-	background: #dfdfdf;
+	flex-direction: column;
+	justify-content: flex-start;
+	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 {
+	background-color: var(--background-secondary);
+	color: var(--text-secondary);
+}
+body > nav a {
+	color: var(--link-secondary);
+}
+body > nav a:hover {
+	color: var(--link-secondary-hover);
+}
+body > nav ul {
+	background-color: inherit;
+	color: inherit;
+	margin: 0;
+	padding: 0.25rem;
+}
+body > nav ul li {	
+	display: inline-block;
+	background-color: inherit;
+	color: inherit;
+	line-height: 1.0;
+	margin: 0;
+	padding: 0;
+	padding-right: var(--link-spacing-horizontal);
+}
+body > nav ul li a {
+	padding: 0.25rem 0;
+}
+body > header {
+	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;
+}
+body > header > * {
+	margin: 0;
+	padding: 0;
+	flex: 1 1 auto;
+	padding: 0.5rem;
+	background-image: none;
+}
+body > main {
+	flex: 1 0 auto;
+	padding: 0.25rem;
+}
+body > footer {
+	flex: 0 1 auto;
+	background-color: var(--background-secondary);
+	color: var(--text-secondary);
+	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 a {
+	color: var(--link-secondary);
+}
+body > footer a:hover {
+	color: var(--link-secondary-hover);
+}
 div,
 h1,
 h2,
@@ -49,9 +169,9 @@ fieldset,
 input,
 textarea,
 blockquote {
-	font-family: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */
+	font-family: inherit;
-	color: #4D4D4D; /* HPR Grey */
+	color: inherit;
-	background: white;
+	background: inherit;
 }
 
 h1 {
@@ -60,7 +180,8 @@ h1 {
 }
 
 h2,
-article * h1 {
+article * h1,
+section > header:first-child {
 	font-size: 1.45rem;
 	margin: 1.25rem 0 0.75rem 0;
 }
@@ -88,16 +209,19 @@ ul {
 
 li {
 	line-height: 1.25;
+	margin-bottom: 0.25rem;
+}
+li:last-child {
+	margin-bottom: 0.25rem;
 }
-
 a {
 	text-decoration: none;
+	color: var(--link-primary);
 }
-
 a:hover {
 	cursor: pointer;
+	color: var(--link-primary-hover);
 }
-
 hr {
 	background: #4D4D4D;
 	border: 0;
@@ -105,7 +229,7 @@ hr {
 }
 
 audio {
-	padding: .7em 0em .5em 0em;
+	padding: 0.7em 0em 0.5em 0em;
 	clear: both;
 	position: relative;
 	z-index: auto;
@@ -123,359 +247,229 @@ p.meta {
 p.meta span label {
 	font-weight: bold;
 }
-
+article > p,
-article>p,
+#main_content > p,
-#maincontent>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;
+	justify-items: space-around;
 
-article#previous_five_weeks>* {
+}
-	line-height: 1.35;
+#podcast_lane > .lane,
+#project_lane > .lane,
+#latest_lane.lane {
+	justify-content: flex-start;
+}
+.lane > article {
+	/* 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 {
+	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 {
+	background: var(--background-secondary);
+	padding: 1.5rem 1rem 1rem 1rem;
 	margin: 0;
-	padding: 0;
+	font-weight: bold;
+	font-size: 1.45rem;
+	color: var(--background-primary);
 }
-
+.lane > article > header a {
-article#previous_five_weeks>h3 {
+	color: var(--link-secondary);
-	margin: 1.5rem 0 0.5rem 0;
 }
-
+.lane > article > header a:hover {
-#container {
+	color: var(--link-secondary-hover);
-	max-width: 58rem;
-	margin: 0.25rem;
-	padding: 0.75rem; /* fallback for browsers that don't support the clamp function) */
-	padding: clamp(0.75rem, -0.25rem + 3vw, 2.0rem);
-	overflow: hidden;
-	background: white;
-	border: thin solid #4D4D4D;
 }
-
+a.lane-button {
-.shadow {
+	display: flex;
-	-moz-box-shadow:    2px 3px 6px 3px #675958;
+	flex-direction: column;
-	-webkit-box-shadow: 2px 3px 6px 3px #675958;
+	justify-content: center;
-	box-shadow:         2px 3px 6px 3px #675958;
+	margin: 0.5rem var(--link-spacing-horizontal);
-}
-
-.thick_bar {
-	background-color: #4D4D4D;
-	color: white;
 	padding: 0.5rem;
-	margin: 1rem 0 1rem 0;
+	border-width: 5px;
+	border-color: var(--lane-button-border);
+	border-style: solid;
+	border-radius: 5px;
+	text-align: center;
+	background-image: url("../images/lane-item-background.png");
 }
-
+a.lane-button p {
-img#hprlogo {
+	font-family: 'Patrick Hand', cursive;
-	max-width: 20vw;
+	font-weight: bold;
-	padding-right: clamp(0.75rem, -0.25rem + 3vw, 1.5rem);
+	font-size: 1.2em;
-	float: left;
+	mask-image: url("../images/charcoal.png");		
-	margin-top: 1rem;
+	mask-size: 20%;
-	margin-bottom: clamp(0.75rem, -0.25rem + 2vw, 1.5rem);
+	mask-repeat: repeat;
+	background-clip: text;
+	color: black;
+	margin: -0.25rem;
 }
-
+a.lane-button:hover {
-#hpr_banner {
+	box-shadow: 
-	/* display: inline-block; */
+      1px 2px 2px var(--link-primary-hover),
-	border: 0;
+      2px 4px 4px var(--link-primary-hover);
-	margin: 0 0 0rem 0;
-	padding: 0;
 }
-
+a.lane-button img {
-#hpr_banner p {
+	height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
-	margin: 0 0 0.5rem 0;
+	/*filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);*/
+	transform: scaleX(0.9);
+	mask-image: url("../images/charcoal.png");		
+	mask-size: 60%;
+	mask-repeat: repeat;
 }
-
+#tag_line,
-#hpr_banner h1#sitename {
+#title {
-	font-size: clamp(1.44rem, -1rem + 3vw, 2rem);
+	text-transform: uppercase;
-	letter-spacing: 0.06rem;
-	margin: 0;
-	padding: 0;
 }
-
+#tag_line {
-#hpr_banner h2 {
-	font-size: clamp(0.74rem, -1rem + 2vw, 1rem);
-	font-weight: 510;
-	margin: 0 0 1rem 0;
-	padding: 0;
-}
-
-#hpr_banner h3 {
-	font-size: 1rem;
-	font-weight: normal;
-	margin: 0 0 0.5rem 0;
-	padding: 0;
-}
-
-header>hr {
-	clear: both;
-}
-
-#accessible_menu {
-	font-size: smaller;
-}
-
-/* The main navigation menu */
-header>nav.menu {
-	display: block;
-	background-color: #4D4D4D; /* HPR Grey */
-	text-align: Left;
-	clear: both; /* Forces the menu to appear after the HPR Header block */
-	padding: 0;
-	margin: 0;
-}
-
-header>nav.menu ul {
-	margin: 0;
-	padding: 0.5rem;
-	background-color: inherit;
-	color: white;
-}
-
-header>nav.menu ul li {
-	display: inline-block;
-	background-color: inherit;
-	color: inherit;
-	line-height: 1.5;
-	margin: 0;
-	padding: 0;
-	padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
-}
-
-header>nav.menu ul li a {
-	color: white;
-	text-decoration: none;
-	display: block;
-	padding: 0.25rem 0;
-}
-
-header>nav.menu ul li a:hover {
-	border-bottom: thin solid white;
-	padding: 0.15rem 0;
-	-webkit-transition: 0.3s ease-in-out color;
-	-moz-transition: 0.3s ease-in-out color;
-	transition: 0.3s ease-in-out color;
-}
-
-header>nav.menu ul li a:visited {
-	color: #EDEDED;
-}
-
-a:active,
-header>nav.menu ul li a:active {
-	color: red;
-}
-
-pre {
-	/* Add background, border and scrollbar to <pre> */
-	background: #eee;
-	border: 1px solid #ddd;
-	overflow: auto;
-	clear: both;
-	padding: 0.5rem
-}
-
-code {
-	background: #eee;
-	border-radius: 0.2rem;
-	font-size: 0.95rem;
-}
-
-pre code {
-	padding-right: 0.5rem;
-	font-size: 0.85rem;
 	line-height: 1;
 }
-
+#tag_line *,
-pre.comment {
+#title * {
-	white-space: pre-wrap;
+	margin: 0;
-	line-height: 1.2rem;
+	padding: 0;
 }
-
+#title h1 {
-table.hosts {
+	font-size: 7.5rem;
-	font-size: clamp(0.82rem, -0.25rem + 3vw, 1.0rem);
+	letter-spacing: -0.65rem;
-	width: 100%;
+	line-height: 0.75;
-	background: white;
-	margin: 0 auto;
-	border-collapse: collapse;
-	display: inline-table;
-
 }
-
+#tag_line h2 {
-table#t01,
+	text-transform: uppercase;
-table.hosts {
+	font-family: "BebasNeue", sans-serif;
-	display: block;
+	font-size: 1.15rem;
-	overflow-x: auto;
+	letter-spacing: 0.05rem;
 }
-
+#tag_line h2:first-child {
-table#t01 tbody,
+	font-size: 2rem;
-table.hosts tbody {
-	display: table;
 }
-
+#tag_line h3 {
-table#t01 tr:nth-child(even),
+	text-transform: capitalize;
-table.hosts tr:nth-child(even) {
-	background-color: #cccccc;
-	border-bottom: thick solid white;
-}
-
-table#t01 tr:nth-child(odd),
-table.hosts tr:nth-child(odd) {
-	background-color: white;
-	border-bottom: thick solid white;
-}
-
-table.hosts tr td img {
-	vertical-align: middle;
-	max-height: 80px;
-}
-
-table.hosts th:first-child,
-table.hosts td:first-child {
-	min-width: 60px;
-	max-width: 80px;
-	text-align: left;
-	height: 62px;
-}
-
-table.hosts th:nth-child(2),
-table.hosts td:nth-child(2) {
-	text-align: left;
-	padding-left: clamp(0.15rem, -0.25rem + 3vw, 0.5rem);
-}
-
-table.hosts th:nth-child(3),
-table.hosts td:nth-child(3),
-table.hosts th:nth-child(4),
-table.hosts td:nth-child(4) {
-	width: 10%;
-	padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem);
-}
-
-body>div>footer {
-	margin-top: 2rem;
-}
-
-footer #more_info nav.column {
-	clear: both;
-	font-size: 0.9rem;
-	margin-left: 0.5rem;
-}
-
-footer #more_info nav.column ul li {
-	float: left;
-	margin-right: 1.5rem;
-	margin-bottom: 1rem;
-}
-
-footer #more_info nav.column h2 {
-	font-size: 1.35rem;
-	margin-top: 0.5rem;
-}
-
-footer h1.thick_bar {
-	clear: left;
 	font-size: 1.15rem;
 }
-
+#site_url {
-footer #copyright {
+	font-family: "GNUTypewriter", monospace;
-	font-size: smaller;
+	text-transform: none;
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
 }
-
+fieldset { 
-fieldset>table,
+	border: thin solid var(--input-border-primary); 
-fieldset>table thead,
+	border-radius: 0.2rem;
-fieldset>table tbody,
+}
-fieldset>table tr,
+fieldset > table,
-fieldset>table th,
+fieldset > table thead,
-fieldset>table td,
+fieldset > table tbody,
-fieldset>table td input,
+fieldset > table tr,
-fieldset>table td textarea {
+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 {
+fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
 
-fieldset>table td input,
+fieldset > table td input,
-fieldset>table td textarea {
+fieldset > table td textarea {
 	width: calc(100vw + -16vw + -1.5rem);
 	max-width: 100%;
-	border: thin solid #DFDFDF;
+	border: thin solid var(--input-border-primary);
+	border-radius: 0.2rem;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
 
-fieldset>table td select {
+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.25rem;
+	padding: 0.5rem;
 }
-
+fieldset > table td select:focus{
-fieldset>table td input[type="radio"] {
+    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;
 }
 
-fieldset>input {
+fieldset > input {
-	background: #4D4D4D;
+	background: var(--background-secondary);
 	color: white;
 	font-weight: 600;
 	padding: 0.5rem;
-	border: thin solid #DFDFDF;
+	border: thin solid var(--input-border-primary);
 	border-radius: 0.2rem;
 }
-
+.no-css {
-@media only screen and (min-width: 58rem) {
+	display: none;
-	#container {
+}
-		margin: 0.5rem auto;
+@media (min-width: 600px) {
+	body > header {
+		background-size: 200pt, cover;
+		background-position: left 128pt top -12pt, left top;
+		justify-content: space-between;
 	}
-
+	#tag_line {
-	.shadow {
+		text-align: center;
-		-moz-box-shadow:    1px 2px 5px 2px #675958;
-		-webkit-box-shadow: 1px 2px 5px 2px #675958;
-		box-shadow:         1px 2px 5px 2px #675958;
 	}
-
+	#title h1 {
-	img#hprlogo {
+		font-size: 7.5rem;
-		margin-bottom: 1.5rem;
+		letter-spacing: -0.65rem;
+		line-height: 0.75;
 	}
-
+	#tag_line h2 {
-	#hpr_banner {
+		font-size: 1.82rem;
-		float: left;
+		letter-spacing: 0.05rem;
 	}
-
+	#tag_line h2:first-child {
-	#hpr_banner h1#sitename {
+		font-size: 4rem;
-		font-size: 2rem;
 	}
-
+	#tag_line h3 {
-	#hpr_banner h2 {
+		font-size: 1.85rem;
-		font-size: 1rem;
+		margin-left: 5rem;
 	}
-
+	#qr_code {
-	header>hr {
+		text-align: center;
-		clear: right;
+		max-width: 195px;
 	}
-
-	table.hosts td:first-child {
-		height: 80px;
-	}
-
-	footer #more_info nav.column {
-		clear: none;
-		float: left;
-		width: 19.5%;
-		margin-left: 0;
-	}
-
-	footer #more_info nav.column:first-child {
-		margin-left: 0.5rem;
-	}
-
-	footer #more_info nav.column ul li {
-		float: none;
-		margin-bottom: 0.5rem;
-	}
-
 	fieldset>table,
 	fieldset>table thead,
 	fieldset>table tbody,
@@ -483,7 +477,8 @@ fieldset>input {
 	fieldset>table th,
 	fieldset>table td,
 	fieldset>table td input,
-	fieldset>table td textarea {
+	fieldset>table td textarea,
+	fieldset>table td select {
 		display: revert;
 		width: revert;
 	}
@@ -515,4 +510,97 @@ fieldset>input {
 	fieldset>table td input[type="radio"] {
 		margin-top: 1.5rem;
 	}
+	fieldset>table td select {
+		margin-bottom: 1.0rem;
+		width: 100%;
+	}
+	body > main {
+		padding: 0.25rem 2rem;
+	}
+	.lane > article {
+		max-height: 40vw;
+		overflow-y: scroll
+	}
+	#latest_lane.lane section > ul {
+		margin: 0.5rem 3rem 0 1rem;	
+	}
 }
+@media (min-width: 900px) {
+	.lane > article {
+		flex-basis: 32%;
+		max-width: 32%;
+	}
+	#latest_lane.lane section {
+		flex: 1;
+	}
+}
+
+@media (max-width: 480px) {
+	#main_menu {
+		display: none;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		width: 100%;
+		z-index: 1000;
+	}
+
+	.hamburger {
+		display: block ! important;
+	}
+
+		#main_menu.is_open {
+		display: block;
+		position: relative;	
+		left: 0;
+		width: 100%;
+	}
+
+	#main_menu.is_open ul {
+		width: fit-content;
+		margin: 0 auto;
+	}
+
+	#main_menu.is_open ul li {
+		display: block;
+		margin-bottom: 0.5rem;
+	}
+
+}
+
+.hamburger {
+	float: right;
+	background-color: var(--background-secondary);
+	border: none;
+	display: none;
+}
+
+.icon {
+	display: block;
+  mask-size: contain;
+  background-color: var(--link-secondary);
+  height: var(--font-size-default);
+  padding: 0.25rem;
+  border: solid 1px var(--link-secondary);
+  transition: background-color 0.2s ease;
+}
+
+.icon:hover {
+	background-color: var(--link-secondary-hover);
+}
+
+.hamburger_icon {
+	display: block;
+}
+
+.hamburger_icon.is_open {
+	display: none ! important;
+}
+
+.close_icon {
+	display: none;
+}
+
+.close_icon.is_open {
+	display: block ! important;
+}

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/calendar-2-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z"/></svg>

public_html/images/icons/close-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"/></svg>

public_html/images/icons/menu-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"/></svg>

public_html/images/icons/mic-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9998 1C14.7612 1 16.9998 3.23858 16.9998 6V10C16.9998 12.7614 14.7612 15 11.9998 15C9.23833 15 6.99976 12.7614 6.99976 10V6C6.99976 3.23858 9.23833 1 11.9998 1ZM3.05469 11H5.07065C5.55588 14.3923 8.47329 17 11.9998 17C15.5262 17 18.4436 14.3923 18.9289 11H20.9448C20.4837 15.1716 17.1714 18.4839 12.9998 18.9451V23H10.9998V18.9451C6.82814 18.4839 3.51584 15.1716 3.05469 11Z"/></svg>

public_html/images/icons/question-mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 19C12.8284 19 13.5 19.6716 13.5 20.5C13.5 21.3284 12.8284 22 12 22C11.1716 22 10.5 21.3284 10.5 20.5C10.5 19.6716 11.1716 19 12 19ZM12 2C15.3137 2 18 4.68629 18 8C18 10.1646 17.2474 11.2907 15.3259 12.9231C13.3986 14.5604 13 15.2969 13 17H11C11 14.526 11.787 13.3052 14.031 11.3989C15.5479 10.1102 16 9.43374 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8V9H6V8C6 4.68629 8.68629 2 12 2Z"/></svg>

public_html/images/icons/rss-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3C12.9411 3 21 11.0589 21 21H18C18 12.7157 11.2843 6 3 6V3ZM3 10C9.07513 10 14 14.9249 14 21H11C11 16.5817 7.41828 13 3 13V10ZM3 17C5.20914 17 7 18.7909 7 21H3V17Z"/></svg>

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>

public_html/images/icons/stack-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z"/></svg>

public_html/images/icons/user-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13Z"/></svg>

public_html/images/icons/volume-up-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"/></svg>

public_html/js/menu.js

@@ -0,0 +1,27 @@
+const hamburger = document.querySelector('.hamburger');
+const mainNav = document.querySelector('#main_menu');
+const hamburgerIcon = document.querySelector('.hamburger_icon');
+const closeIcon = document.querySelector('.close_icon');
+
+hamburger.addEventListener('click', function() {
+    const isOpen = this.getAttribute('aria-expanded') === 'true';
+
+    this.setAttribute('aria-expanded', !isOpen);
+    
+    mainNav.classList.toggle('is_open');
+    hamburgerIcon.classList.toggle('is_open');
+    closeIcon.classList.toggle('is_open');
+
+    if (!isOpen) {
+        const firstLink = mainNav.querySelector('a');
+        if (firstLink) firstLink.focus();
+    }
+});
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && mainNav.classList.contains('is_open')) {
+        mainNav.classList.remove('is_open');
+        hamburger.setAttribute('aria-expanded', 'false');
+        hamburger.focus();
+    }
+});

templates/content-episodes.tpl.html

@@ -1,24 +1,26 @@
  <!--% PROCESS 'shared-episode-summary.tpl.html' %-->
  <!--% PROCESS "queries-episodes.tpl.html" %-->
-<article>
+	<h1>Complete Archive of Shows.</h1>
-    <header>
-        <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

@@ -23,11 +23,6 @@
 <!--% END %-->
 <!--% after_html %-->
 <!--% END %-->
-<hr>
-  <article>
-    <header>
-        <h3>Welcome to HPR, the Community Podcast</h3>
-    </header>
 	<!--% days_till_next_episode = 0 %-->
 	<!--% USE DBI(constants.driver) %-->
 	<!--% USE date %-->
@@ -40,44 +35,113 @@
 	<!--% days_till_next_episode = calc.Delta_Days(now.0,now.1,now.2,slot_date.0,slot_date.1,slot_date.2) %-->
 
 	<!--% delta = date.calc.N_Delta_YMD(2005,9,19, date.format(date.now, '%Y'),date.format(date.now, '%m'),date.format(date.now, '%d')) %-->
-	<p>We started producing shows as <a href="<!--% absolute_path(baseurl) %-->eps/index.html#twt_episodes"><em>Today with a Techie</em></a> on 2005-09-19, <!--% delta.0 %--> years, <!--% delta.1 %--> months, <!--% delta.2 %--> days ago. Our shows are produced by <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">listeners</a> like you and can be on any <a href="<!--% absolute_path(baseurl) %-->eps/index.html">topics</a> that <strong>"are of interest to <a href="https://en.wikipedia.org/wiki/hacker_(hobbyist)">hackers</a>"</strong>. If you listen to HPR then please consider contributing one show a year. If you <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">record</a> your show now it could be <a href="<!--% hub_baseurl %-->calendar.php">released</a> in <strong><!--% days_till_next_episode %--></strong> days.</p>
+	<section id="welcome">
-  </article>
+		<header><h2>Welcome</h2></header>
-  <!--% display_call_for_shows() %-->
+		<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>
-  <hr>
+		<div id="call_for_shows">
+			<!--% display_call_for_shows() %-->
+		</div>
+  </section>
+  <section id="podcast_lane">
+	  <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="" height="110">
+		  <p>Record</p>
+	  </a>
+	  <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>
+	  <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>
+	  <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><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="" 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="" height="110">
+		 <p>Series</p>
+	  </a>
+	  <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' %-->
-<h1>Latest Shows</h1>
+  <section id="latest_shows">
+	<header><h2>Latest Shows</h2></header>
 <!--% host_cnt = 0 %-->
+	<ul>
 <!--% FOREACH latest_episodes IN DBI.query(query_latest_episodes)
 %-->
-<hr>
+		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a>
-<article>
+		<ul><li>
-	<header>
+		<!--% latest_episodes.summary %-->
-			<h1><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a></h1>
+        </li></ul>
-		<h3><!--% latest_episodes.summary%--></h3>
-		<p class="meta"$><!--% show_avatar(latest_episodes.hostid, latest_episodes.host, host_cnt) %-->
-	Hosted by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(latest_episodes.hostid) %-->.html"><!--% latest_episodes.host %--></a> on <!--% day_and_date(latest_episodes.date) %--> is flagged as <!--% display_explicit(latest_episodes.explicit) %--> and released under a <!--% latest_episodes.license %--> license. <br>
-	<!--% display_tags(latest_episodes.tags) %-->
-	<span><!--% show_series(latest_episodes.series, latest_episodes.seriesid) %--></span>
-	<span><label>Comments: </label><!--% display_comments_tally(latest_episodes.id, latest_episodes.eps_tally) %--></span><br>
-<!--% listen_now(latest_episodes, "hpr", baseurl, media_baseurl) %-->
-		</p>
-	</header>
-		<p>See <a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">episode show notes</a> for more information.</p>
-</article>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
-<article id="previous_five_weeks">
+	</ul>
-    <header>
+  </section>
-        <hr>
+  <section id="latest_comments">
-        <h1>Previous five weeks</h1>
+	<header><h2>Latest Comments</h2></header>
-    </header>
+	<ul>
-<!--% FOREACH last_5_weeks_episodes IN DBI.query(query_last_5_weeks_episodes)
+<!--% FOREACH item IN DBI.query('
+		WITH episode_comment_rank AS (
+		SELECT 
+			comments.eps_id
+		  ,	comments.id as comment_id
+		  , comments.comment_author_name
+		  , comments.comment_timestamp
+		  , comments.comment_title
+		  , RANK() OVER (PARTITION BY eps_id ORDER BY id ) AS comment_number
+		FROM comments 
+	)
+	SELECT 
+		  episode_comment_rank.*	  
+		, hosts.host
+		, eps.title AS episode_title
+		, eps.date AS episode_date
+	FROM episode_comment_rank 
+	INNER JOIN eps 
+	  ON episode_comment_rank.eps_id = eps.id 
+	INNER JOIN hosts 
+	  ON eps.hostid = hosts.hostid 
+	ORDER BY episode_comment_rank.comment_timestamp DESC 
+	LIMIT 10;
+	
+	')
 %-->
-	<!--% show_summary(last_5_weeks_episodes) %-->
+	<li>hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %-->
-	<p class="listen-in"><!--% display_listen_in(last_5_weeks_episodes.id) %--></p>
+	<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>
 <!--% END %-->
-</article>
+	</ul>
-<h1>Older Shows</h1>
+  </section>
-	<p>
+  </section>
-	Get a <a href="<!--% absolute_path(baseurl) %-->eps/index.html">full list</a> of all our shows.
-	</p>

templates/content-series.tpl.html

@@ -1,17 +1,19 @@
 <!--% 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">
 <!--% FOREACH series IN DBI.query(query_episodes) %-->
-	<h2><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></h2>
+  <article>
-<ul>
+	<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
-	<li>Number of episodes: <!--% series.number_of_episodes %--></li>
+	<ul>
-	<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
+		<li>Number of episodes: <!--% series.number_of_episodes %--></li>
-	<li>Date of earliest show: <!--% series.earliest_show %--></li>
+		<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
-	<li>Date of latest show: <!--% series.latest_show %--></li>
+		<li>Date of earliest show: <!--% series.earliest_show %--></li>
-	<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
+		<li>Date of latest show: <!--% series.latest_show %--></li>
-</ul>
+		<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>
-<em><!--% series.description %--></em>
+	</ul>
-<!--% END %-->
+	<em><!--% series.description %--></em>
   </article>
+<!--% END %-->
+</div>

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>
+  <div class="lane">
-<article>
+  <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>
+  <p>If you get overwhelmend by the amount of shows we produce, then this is a good place to start.</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>
+
-  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">
 <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/navigation-main.tpl.html

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

templates/page.tpl.html

@@ -12,7 +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." />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Internal CSS -->
   <style type="text/css">
   article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
@@ -33,116 +32,55 @@
   <link rel="stylesheet" href="/css/hpr.css" media="screen" type="text/css" />
   <script src="/JavaScript/html5.js"></script>
   <![endif]-->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes"/> 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> 
 </head>
 
-<body id="give">
+<body>
-<div id="container" class="shadow">
+<nav id="accessible_menu">
-<header>
+   <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
-  <a href="<!--% absolute_path(baseurl) %-->"><img id="hprlogo" src="<!--% absolute_path(baseurl) %-->images/hpr_logo.png" alt="hprlogo"></a>
+   - <a href="#main_content">skip to main content</a>
-  <div id="hpr_banner">
+</nav>
-    <p id="accessible_menu">
+<button type="button" id="hamburger-menu" class="hamburger" aria-controls="main-navigation" aria-expanded="false" aria-label="Toggle navigation menu">
-      <a href="<!--% absolute_path(baseurl) %-->sitemap.html">Site Map</a>
+  <i aria-hidden="true" class="icon hamburger_icon" style="mask: url('<!--% absolute_path(baseurl) %-->images/icons/menu-line.svg') no-repeat center;"></i>
-      - <a href="#maincontent">skip to main content</a>
+  <i aria-hidden="true" class="icon close_icon" style="mask: url('<!--% absolute_path(baseurl) %-->images/icons/close-line.svg') no-repeat center;"></i>
-      </p>
+</button>
-      <h1 id="sitename">
+<nav id="main_menu" class="menu" role="navigation">
+<!--% INCLUDE "navigation-main.tpl.html" %-->
+</nav>
+<header role="banner">
+  <div id="title">
+	  <h1 id="site_acronym">HPR</h1>
+      <h2 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
-      </h1>
+      </h2>
-    <h2>Your ideas, projects, opinions - podcasted.</h2>
+	  <h3 id="site_url">https://HackerPublicRadio.org</h3>
-    <h3>New episodes every weekday Monday through Friday.<br />
+  </div>
-    <em><small>This page was <a href="https://repo.anhonesthost.net/HPR/hpr_generator">generated</a> by <a href="mailto:<!--% generator_email %-->"><!--% generator_name %--></a> at <time dateTime="<!--% format_iso8601_date(date.now) %-->"><!--% format_feed_date(date.now) %--></time></small></em></h3>
+  <div id="tag_line">
-
+    <h2>The Community Podcast</h2>
+	<h2>Sharing your ideas, projects, opinions since 2005</h2>
+    <h3>New episodes every weekday </h3>
+  </div>
+  <div id="qr_code">
+	  <img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="HPR logo as a QR code to the HPR URL">
   </div>
-  <hr />
-  
-  <nav class="menu" role="navigation">
-<!--% INCLUDE $navigation %-->
-  </nav>
 </header>
-
+<main id="main_content" role="main">
-<main id="maincontent">
 <!--% INCLUDE $content %-->
 </main>
-
+<footer role="contentinfo">
-<footer id="footer_page">
+  <hr class="no-css">
-  <h1 class="thick_bar">More Information...</h1>
-  <div id="more_info">
-    <nav class="column">
-      <h2>Ancestry</h2>
-      <ul>
-        <li><a href="http://audio.textfiles.com/shows/radiofreekamerica/">Radio Freek America</a></li>
-        <li><a href="http://audio.textfiles.com/shows/binrev/">BinRev Radio</a></li>
-        <li><a href="http://audio.textfiles.com/shows/infonomicon/">Infonomicon</a></li>
-        <li><a href="http://audio.textfiles.com/shows/twat/">Today With a Techie</a></li>
-      </ul>
-    </nav>
-    <nav class="column">
-      <h2>Social</h2>
-      <ul>
-        <li><a href="https://lists.hackerpublicradio.com/mailman/listinfo/hpr" >Mailing list</a></li>
-        <li><a rel="me" href="https://infosec.exchange/@hpr" >Mastodon</a></li>
-        <li><a href="https://matrix.to/#/#hpr:matrix.org" >Matrix</a></li>
-        <li><a href="mumble://chatter.skyehaven.net:64738/Hacker%20Public%20Radio?version=1.2.0" >Mumble</a></li>
-        <li><a href="https://web.libera.chat/gamja/?channels=oggcastplanet" target="_blank">#oggcastplanet</a></li>
-        <li><a href="https://t.me/+6fEhQrf5IEc4ZGU8">Telegram</a></li>
-        <li><a href="https://twitter.com/HPR">Twitter.com</a></li>
-        <li><a href="https://www.facebook.com/HenryPartickReilly" target="_blank">Facebook</a></li>
-        <li><a href="https://www.linkedin.com/company/hackerpublicradio/" target="_blank">Linked-In</a></li>
-      </ul>
-    </nav>    
-    <nav class="column">
-      <h2>Unaffiliates</h2>
-      <ul>
-        <li><a href="https://archive.org/details/hackerpublicradio">Archive.org</a></li>
-        <li><a href="https://music.amazon.fr/podcasts/9d9e6211-ff78-4501-93b6-6a9e560c4dbd/hacker-public-radio">Amazon Music</a></li>
-        <li><a href="https://podcasts.google.com/feed/aHR0cDovL2hhY2tlcnB1YmxpY3JhZGlvLm9yZy9ocHJfcnNzLnBocA">Google Podcasts</a></li>
-        <li><a href="https://www.iheart.com/podcast/256-hacker-public-radio-30994513/" target="_blank">iHeart Radio</a></li>
-        <li><a href="https://podcasts.apple.com/us/podcast/hacker-public-radio/id281699640">iTunes</a></li>
-        <li><a href="https://www.listennotes.com/de/podcasts/hacker-public-radio-hacker-public-radio-mNH-jsI7LcJ/">Listen Notes</a></li>
-        <li><a href="https://www.mixcloud.com/hackerpublicradio/">MixCloud</a></li>
-        <li><a href="https://player.fm/series/hacker-public-radio">PlayerFM</a></li>
-        <li><a href="https://www.podchaser.com/podcasts/hacker-public-radio-76781">Podchaser</a></li>
-        <li><a href="https://nl.radio.net/podcast/hacker-public-radio">Radio.net</a></li>
-        <li><a href="https://open.spotify.com/show/7e2hYcnHj9vKgUzsIOf4r3">Spotify</a></li>
-        <li><a href="https://toppodcast.com/podcast_feeds/hacker-public-radio/">Top Podcasts</a></li>
-      </ul>
-    </nav>
-    <nav class="column">
-      <h2>Commons</h2>
-      <ul>
-        <li><a href="https://freeculturepodcasts.org/">Free Culture Podcasts</a></li>
-        <li><a href="https://archive.org/details/hackerpublicradio">archive.org</a></li>
-        <li><a href="https://repo.anhonesthost.net/HPR/">HPR Source Code</a></li>
-        <li><a href="https://cchits.net/">cchits.net</a></li>
-        <li><a href="https://freesound.org/">freesound.org</a></li>
-        <li><a href="https://librivox.org/">librivox.org</a></li>
-        <li><a href="https://openclipart.org/">openclipart.org</a></li>
-        <li><a href="https://openfontlibrary.org/">openfontlibrary.org</a></li>
-        <li><a href="https://www.openrouteservice.org/">openrouteservice.org/</a></li>
-        <li><a href="https://pixabay.com/">pixabay.com/</a></li>
-      </ul>
-    </nav>
-    <nav class="column">
-      <h2>Patrons</h2>
-      <ul>
-        <li><a href="https://anhonesthost.com/hosting/shared-hosting">AnHonestHost.com</a></li>
-        <li><a href="https://archive.org/donate/">Archive.org</a></li>
-        <li><a href="https://rsync.net/">rsync.net</a></li>
-      </ul>
-    </nav>
-  </div><!-- more_info -->
-  <h1 class="thick_bar">Copyright Information</h1>  
   <div id="copyright">
-    <p>
+	  <span>Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
-    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>
-    Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> license.</p>
+    <span>
-    <p>
     The <span property="dct:title">HPR Website Design</span> is released to the <a rel="license" href="https://creativecommons.org/publicdomain/mark/1.0/">Public Domain</a>.
-    </p>
+    </span>
-  </div><!-- copyright -->
+  </div>
-  <hr />
+ <div id="generated_by">This page was <a href="https://repo.anhonesthost.net/HPR/hpr_generator">generated</a> by <a href="mailto:<!--% generator_email %-->"><!--% generator_name %--></a> at <time dateTime="<!--% format_iso8601_date(date.now) %-->"><!--% format_feed_date(date.now) %--></time></em>
+ </div>
 </footer>
-</div>
+<script src="/js/menu.js"></script>
-<!-- shadow -->
+</body>
+</html>