Merge pull request 'apply a crafty style to the lane buttons' (#273 ) from lee/hpr_generator:newsite into newsite

Reviewed-on: #273
increased contrast of lane buttons, fixed font definition
2025-09-04 19:56:18 +00:00 · 2025-09-04 18:55:30 +01:00 · 2025-09-04 11:16:12 +01:00 · 2025-09-03 23:03:20 -04:00 · 2025-09-03 21:57:28 -04:00 · 2025-09-01 00:24:44 -04:00
16 changed files with 762 additions and 270 deletions
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -25,17 +25,27 @@ https://creativecommons.org/publicdomain/
    local("BebasNeue"),
    url("/css/bebas/BebasNeue.woff") format("woff");
 }
+@font-face {
+  font-family: "PatrickHand";
+  src:
+    local("PatrickHand"),
+    url("/css/patrickhand/PatrickHand-Regular.ttf") format("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;

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

 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
@@ -46,12 +56,22 @@ https://creativecommons.org/publicdomain/
 	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
 	--shadow-secondary-color: hsl(0, 0%, 30.2%);
 	--shadow-cards: var(--shadow-secondary-color);
+
+	--content-max-width: 1080pt;
+
  /* screen breakpoints */
 	--for-phone-only: 599px;
    --for-tablet-portrait-up: 600px;
    --for-tablet-landscape-up: 900px;
 	--for-desktop-up: 1200px;
    --for-big-desktop-up: 1800px; 
+
+	--default-header-x-font-weight: bold;
+	--default-header-x-margin: 1.25rem 0 0.75rem 0;
+	--default-header-1-font-size: 1.5rem;
+	--default-header-2-font-size: 1.45rem;
+	--default-header-3-font-size: 1.25rem;
+	--default-header-4-font-size: 1.15rem;
 }

 html {
@@ -73,24 +93,27 @@ body {
 	padding: 0;
 	min-height: 100vh;
 }
-
-body > nav {
+#top_navigation {
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-between;
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
+	padding: 0.5rem;
 }
-body > nav a {
+#top_navigation > nav a {
 	color: var(--link-secondary);
 }
-body > nav a:hover {
+#top_navigation > nav a:hover {
 	color: var(--link-secondary-hover);
 }
-body > nav ul {
+#top_navigation > nav menu {
 	background-color: inherit;
 	color: inherit;
 	margin: 0;
 	padding: 0.25rem;
 }
-body > nav ul li {
+#top_navigation > nav menu li {
 	display: inline-block;
 	background-color: inherit;
 	color: inherit;
@@ -99,23 +122,30 @@ body > nav ul li {
 	padding: 0;
 	padding-right: var(--link-spacing-horizontal);
 }
-body > nav ul li a {
+#top_navigation > nav menu li a {
 	padding: 0.25rem 0;
 }
 body > header {
+	padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem;
+	background-color: var(--banner-background-color);
+	background-image: url("/images/main-header-background.png");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: left top;
+	color: var(--banner-text-primary);
+	align-items: center;
+	border-top: var(--background-secondary) solid 1rem;
+}
+body > header .bounding-box {
+	background: none;
 	display: flex;
 	flex-direction: row;
 	flex-flow: wrap;
 	justify-content: space-between;
-	padding: 0.25rem;
-	background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png");
-	background-size: 59%, cover;
-	background-repeat: no-repeat, no-repeat;
-	background-position: right -15px top -20px, left top;
-	color: var(--banner-text-primary);
-	align-items: center;
+	max-width: var(--content-max-width);
+	margin: 0 auto;
 }
-body > header > * {
+body > header .bounding-box > * {
 	margin: 0;
 	padding: 0;
 	flex: 1 1 auto;
@@ -125,19 +155,22 @@ body > header > * {
 body > main {
 	flex: 1 0 auto;
 	padding: 0.25rem;
+	max-width: var(--content-max-width);
+	margin-left: auto;
+	margin-right: auto;
 }
 body > footer {
 	flex: 0 1 auto;
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
-	padding: 0.25rem;
+	padding: clamp(0.25rem, calc(100vw - var(--for-tablet-portrait-up) + 0.5rem), 0.5rem);
+	margin-top: 0.5rem;
 	text-align: center;
 	line-height: 1.25;
 }
-body > footer hr:first-child {
-	display: none;
-	margin: 0;
-	padding: 0;
+body > footer #copyright {
+	max-width: var(--content-max-width);
+	margin: 0 auto;
 }
 body > footer a {
 	color: var(--link-secondary);
@@ -171,27 +204,27 @@ blockquote {
 }

 h1 {
-	font-size: 1.5rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-1-font-size);
+	margin: var(--default-header-x-margin);
 }

 h2,
 article * h1,
 section > header:first-child {
-	font-size: 1.45rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-2-font-size);
+	margin: var(--default-header-x-margin);
 }

 h3,
 article * h2 {
-	font-size: 1.25rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-3-font-size);
+	margin: var(--default-header-x-margin);
 }

 h4,
 article * h3 {
-	font-size: 1.15rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-4-font-size);
+	margin: var(--default-header-x-margin);
 }

 img {
@@ -199,7 +232,7 @@ img {
 	height: auto;
 }

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

@@ -210,9 +243,28 @@ li {
 li:last-child {
 	margin-bottom: 0.25rem;
 }
+
+dt, dd {
+	line-height: 1.25;
+}
+
+dt {
+    display: list-item;
+    list-style-type: disc;
+	margin-bottom: 0.15rem;
+}
+
+dd {
+	margin-bottom: 0.35rem;
+	margin-left: 1rem;
+}
+
 a {
-	text-decoration: none;
 	color: var(--link-primary);
+	text-decoration-style: dotted;
+	text-decoration-color: inherit;
+    text-decoration-thickness: .125rem;
+    text-underline-offset: 0.2rem;
 }
 a:hover {
 	cursor: pointer;
@@ -254,15 +306,21 @@ article > p,
 	flex-wrap: wrap;
 	gap: 1.0rem;
 	justify-content: space-around;
-	justify-items: space-around;
-
+}
+.lane.stack {
+	flex-direction: column;
+	justify-content: flex-start;
+}
+.lane.stack > * {
+	flex: 1 0 100%;
 }
 #podcast_lane > .lane,
 #project_lane > .lane,
 #latest_lane.lane {
-	justify-content: flex-start;
+	justify-content: flex-between;
 }
-.lane > article {
+.lane > article,
+#hosts tr {
 	/* Add shadows to create the "card" effect */
 	border-top: thin solid var(--shadow-cards);
 	border-left: thin solid var(--shadow-cards);
@@ -275,7 +333,8 @@ article > p,
 	overflow-x: scroll;
 	padding-bottom: 1rem;
 }
-.lane > article:hover {
+.lane > article:hover,
+#hosts tr:hover {
 	box-shadow: 
      4px 8px 8px var(--shadow-cards),
      8px 16px 16px var(--shadow-cards);
@@ -284,66 +343,163 @@ article > p,
 	margin-left: 1rem;
 	margin-right: 1rem;
 }
-.lane > article > header {
+.lane > article > header,
+.lane > article > h3 {
 	background: var(--background-secondary);
 	padding: 1.5rem 1rem 1rem 1rem;
 	margin: 0;
 	font-weight: bold;
 	font-size: 1.45rem;
+	color: var(--background-primary);
 }
-.lane > article > header a {
+.lane > article > header a,
+.lane > article > h3 a {
 	color: var(--link-secondary);
 }
-.lane > article > header a:hover {
+.lane > article > header a:hover,
+.lane > article > h3:hover {
 	color: var(--link-secondary-hover);
 }
+.lane.stack> * > header * {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+.lane.stack > * > header p {
+	font-size: var(--default-header-4-font-size);
+	margin-left: 22px;
+}
 a.lane-button {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	margin: 0.5rem var(--link-spacing-horizontal);
-	padding: 0.5rem;
-	border-width: 5px;
-	border-color: var(--link-primary);
+	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: 'PatrickHand', sans-serif;
+	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%);
-	transform: scaleX(0.9);
+	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;
+	line-height: 1.1;
 }
 #tag_line *,
 #title * {
 	margin: 0;
 	padding: 0;
+	flex: 1 1 auto;
+	background: none;
 }
-#title h1 {
+#title {
+	background-image:  url("/images/hpr-splatter-logo.svg");
+	background-repeat: no-repeat;
+	background-size: 15rem;
+	background-position: left 8.5em top -2em;
+}
+#title a {
+	color: var(--link-title-color);
+}
+#title a:hover {
+	color: var(--link-primary-hover);
+}
+#title #site_acronym {
 	font-size: 7.5rem;
 	letter-spacing: -0.65rem;
 	line-height: 0.75;
+	margin-bottom: 0.25rem;
+	color: transparent;
 }
-#tag_line h2 {
+#title #site_acronym a {
+	text-decoration: none;
+	text-shadow: 0 1px var(--link-secondary);
+}
+#title #site_name {
+	font-size: var(--default-header-2-font-size);
+	font-weight: bold;
+}
+#tag_line {
+	text-align: center;
+}
+#tag_line #tag1,
+#tag_line #tag2 {
 	text-transform: uppercase;
 	font-family: "BebasNeue", sans-serif;
-	font-size: 1.15rem;
+	font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size));
+	font-weight: var(--default-header-x-font-weight);
 	letter-spacing: 0.05rem;
 }
-#tag_line h2:first-child {
-	font-size: 2rem;
+#tag_line #tag1 {
+	font-size: clamp(2.1rem, calc(100vw - 360px + 2.1rem), 2.3rem);
 }
-#tag_line h3 {
+#tag_line #tag3 {
+	text-align: center;
 	text-transform: capitalize;
-	font-size: 1.15rem;
+	font-weight: var(--default-header-x-font-weight);
 }
 #site_url {
 	font-family: "GNUTypewriter", monospace;
@@ -370,7 +526,7 @@ fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-
+fieldset > input,
 fieldset > table td input,
 fieldset > table td textarea {
 	width: calc(100vw + -16vw + -1.5rem);
@@ -405,41 +561,127 @@ fieldset > table td input[type="radio"] {
 	width: initial;
 	margin-bottom: 0.5rem;
 }
-
-fieldset > input {
-	background: var(--background-secondary);
-	color: white;
-	font-weight: 600;
-	padding: 0.5rem;
-	border: thin solid var(--input-border-primary);
-	border-radius: 0.2rem;
+#search form {
+	flex: 1 1 auto
+}
+#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 {
-		background-size: 200pt, cover;
-		background-position: left 128pt top -12pt, left top;
+	body > header .bounding-box {
 		justify-content: space-between;
 	}
 	#tag_line {
-		text-align: center;
+		line-height: 1;
 	}
-	#title h1 {
+	#title #tag1 {
 		font-size: 7.5rem;
 		letter-spacing: -0.65rem;
 		line-height: 0.75;
 	}
-	#tag_line h2 {
+	#tag_line #tag2 {
 		font-size: 1.82rem;
 		letter-spacing: 0.05rem;
 	}
-	#tag_line h2:first-child {
+	#tag_line #tag1 {
 		font-size: 4rem;
 	}
-	#tag_line h3 {
+	#tag_line #tag3 {
 		font-size: 1.85rem;
+		letter-spacing: 0.05rem;
 		margin-left: 5rem;
 	}
 	#qr_code {
@@ -490,23 +732,39 @@ fieldset > input {
 		margin-bottom: 1.0rem;
 		width: 100%;
 	}
+	#search fieldset > input {
+		width: 55%;
+	}
+	#search fieldset > input[type="submit"] {
+		width: 40%;
+	}
 	body > main {
 		padding: 0.25rem 2rem;
 	}
-	.lane > article {
-		max-height: 40vw;
-		overflow-y: scroll
-	}
-	.lane > article:nth-last-child(2),
-	.lane > article:last-child {
-	}
 	#latest_lane.lane section > ul {
 		margin: 0.5rem 3rem 0 1rem;	
 	}
+	#hosts tbody.lane.stack {
+		flex-direction: row;
+		justify-content: space-between;
+		gap: 1rem
+	}
+	#hosts tr {
+		flex: 1 1 45%;
+		max-width: 45%;
+	}
 }
@media (min-width: 900px) {
-	.lane > article {
-		flex-basis: 32%;
-		max-width: 32%;
+	#podcast_lane > .lane,
+	#project_lane > .lane {
+		justify-content: flex-start;
+		gap: 2rem;
 	}
-
+	#latest_lane.lane section {
+		flex: 1;
+	}
+	#hosts tr {
+		flex: 1 1 30%;
+		max-width: 30%;
+	}
+}
--- a/public_html/css/patrickhand/OFL.txt
+++ b/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.
--- a/public_html/css/patrickhand/PatrickHand-Regular.ttf
+++ b/public_html/css/patrickhand/PatrickHand-Regular.ttf
--- a/public_html/images/charcoal.png
+++ b/public_html/images/charcoal.png
--- a/public_html/images/icons/search.svg
+++ b/public_html/images/icons/search.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   fill="currentColor"
+   version="1.1"
+   id="svg883"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <title
+     id="title18331">Search Icon</title>
+  <defs
+     id="defs887" />
+  <ellipse
+     style="opacity:0.995734;fill:none;stroke:#010001;stroke-width:1.81467;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+     id="path1376"
+     cx="14.284247"
+     cy="9.0682373"
+     rx="6.5925374"
+     ry="6.5925369" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.84169;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 2.8483937,21.838389 10.399215,13.84375"
+     id="path1882" />
+  <path
+     id="path1376-6"
+     style="opacity:0.995734;fill:none;stroke:#010001;stroke-width:1.21;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="M 14.133134,5.0939128 C 16.342061,5.259387 18.056426,6.9596051 18.240557,9.1075843 18.055629,6.9365 16.307909,5.2286717 14.133134,5.0939128 Z" />
+  <metadata
+     id="metadata18329">
+    <rdf:RDF>
+      <cc:License
+         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+      <cc:Work
+         rdf:about="">
+        <cc:license
+           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+        <dc:title>Search Icon</dc:title>
+        <dc:date>2025-08-05</dc:date>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Roan Horning</dc:title>
+          </cc:Agent>
+        </dc:creator>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>
--- a/public_html/images/lane-button-background.png
+++ b/public_html/images/lane-button-background.png
--- a/public_html/images/qr_code_logo.png
+++ b/public_html/images/qr_code_logo.png
--- a/templates/content-comments_viewer.tpl.html
+++ b/templates/content-comments_viewer.tpl.html
@@ -7,7 +7,8 @@
 <h2>Comment Viewer</h2>
 <p>Because of the spammers we have had to turn on comment moderation. Sorry about the delay this will cause.</p>
 <p><a href="<!--% absolute_path(baseurl) %-->comments.rss">Subscribe</a> to the comment feed.</p>
-<hr />
+<hr class="no-css">
+<section id="comments" class="lane stack">
 <!--% FOREACH item IN DBI.query('
 		SELECT C.*, 
 			H.host, H.hostid AS host_id, 
@@ -26,18 +27,18 @@
 		LIMIT 30
 	')
 %-->
-
 <article>
-<header>
-	<h1><!--% item.comment_author_name %--> says: <!--% item.comment_title %--></h1>
-	<p><small>Posted at <!--% item.comment_timestamp %--> relating to the show <a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html">hpr<!--% item.eps_id %--></a> which was released on <!--% item.episode_date %--> by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a> entitled <em><!--% item.episode_title %--></em></small>
-</p>
-</header>
-<p class="comment">
-<!--% item.comment_text FILTER html_line_break %-->
-</p>
-<footer>
-Listen in <a href="<!--% media_path(item.eps_id, 'hpr', 'ogg', baseurl, media_baseurl) %-->">ogg</a>, <a href="<!--% media_path(item.eps_id, 'hpr', 'spx', baseurl, media_baseurl) %-->">spx</a>, or <a href="<!--% media_path(item.eps_id, 'hpr', 'mp3', baseurl, media_baseurl) %-->">mp3</a> format.</p></footer>
+	<header>
+		<h2><!--% item.comment_author_name %--> says: <!--% item.comment_title %--></h2>
+	</header>
+	<p class="show-meta">Posted at <!--% item.comment_timestamp %--> relating to the show <a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html">hpr<!--% item.eps_id %--></a> which was released on <!--% item.episode_date %--> by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a> entitled <em><!--% item.episode_title %--></em></small>
+	</p>
+	<p class="comment">
+	<!--% item.comment_text FILTER html_line_break %-->
+	</p>
+	<footer>
+		Listen in <a href="<!--% media_path(item.eps_id, 'hpr', 'ogg', baseurl, media_baseurl) %-->">ogg</a>, <a href="<!--% media_path(item.eps_id, 'hpr', 'spx', baseurl, media_baseurl) %-->">spx</a>, or <a href="<!--% media_path(item.eps_id, 'hpr', 'mp3', baseurl, media_baseurl) %-->">mp3</a> format.</p></footer>
 </article>
-<hr />	
+<hr class="no-css">	
 <!--% END %-->
+</section>
--- a/templates/content-correspondents.tpl.html
+++ b/templates/content-correspondents.tpl.html
@@ -1,15 +1,17 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS 'shared-avatar.tpl.html' %-->
-<article>
 	<h2 class="title">Correspondents</h2>
 	<p>For more information on how to become a Correspondent see our <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">contribute</a></center> page. To add a logo here, either email one to admin at hpr or setup your email on <a href="https://en.gravatar.com/">Gravatar</a>. To protect your browsing privacy we gather the images every hour and serve them directly from HPR.<p />
 <!--% USE DBI(constants.driver) %-->
 <!--% host_cnt = 0 %-->
-	<table class="hosts">
-	<th >Avatar</th>
-	<th >Name &amp; Host ID</th>
-	<th >License</th>
-	<th >Last Show</th>
+	<table id="hosts" class="hosts lane stack">
+	<tbody class="lane stack">
+	<tr class="no-css">
+	<th>Avatar</th>
+	<th>Name &amp; Host ID</th>
+	<th>License</th>
+	<th>Last Show</th>
+	</tr>
 	<!--% FOREACH host IN DBI.query(
 		'select h.hostid, h.host, h.license, e.date, 
 		h.local_image 
@@ -18,7 +20,7 @@
 		on h.hostid = e.hostid
 		order by h.host'
 	) %-->
-	<tr>
+	<tr class="lane">
 	<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>

 		<td><strong><!--% host.host %--></strong><br>
@@ -28,6 +30,6 @@
 		<td><!--% host.date %--></td>
 	</tr><!--% host_cnt = host_cnt + 1 %-->
 	<!--% END %-->
+	</tbody>
 	</table>
 	<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
-</article>
--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -36,66 +36,79 @@

 	<!--% delta = date.calc.N_Delta_YMD(2005,9,19, date.format(date.now, '%Y'),date.format(date.now, '%m'),date.format(date.now, '%d')) %-->
 	<section id="welcome">
-		<header>Welcome</header>
-		<p>Hacker Public Radio is a podcast that releases shows every weekday Monday to Friday. The shows are contributed by the public and can be on any topic that is of interest to hackers, makers, hobbyists, etc.</p>
+		<header><h2>Welcome</h2></header>
+		<p>Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a welcoming community that offers positive feedback and encourages respectful debate.</p>
 		<div id="call_for_shows">
 			<!--% display_call_for_shows() %-->
 		</div>
  </section>
  <section id="podcast_lane">
-	  <header>Podcast</header>
+	  <header><h2>The Podcast</h2></header>
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html#recording_a_podcast">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="">
-		  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>Host</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,13 +135,9 @@
 	
 	')
 %-->
-	<li>hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %-->
-	<ul>
-		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a>
-		</li>
-	</ul>
-	</li>
+<dt><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a></dt>
+	<dd>on hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %--></dd>
 <!--% END %-->
-	</ul>
+	</dl>
  </section>
  </section>
--- a/templates/content-search.tpl.html
+++ b/templates/content-search.tpl.html
@@ -1,45 +1,123 @@
- <article>
-    <header>
-        <h1>Search HPR.</h1>
-    </header>
-<hr />
-<h2>Search Show Tags</h2>
-<p>
-<a href="<!--% absolute_path(baseurl) %-->tags.html">Complete list of all the Tags</a></p>
-<hr />
-<h2>Google</h2>
-<form name="google-search" method="get" action="https://www.google.com/search">
-  <input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
-  <input name="q" type="text" placeholder="Search HPR with Google"/>
-  <input type="submit" name="sa" value="Search HPR with Google" />
-</form>
-<br />
-<a href="https://www.google.com/policies/privacy/">privacy policy</a>
-</p>
-<hr />
-<h2>DuckDuckGo</h2>
-<form method="get" id="search" action="https://duckduckgo.com/">
-  <input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
-  <input type="hidden" name="k8" value="#444444"/>
-  <input type="hidden" name="k9" value="#D51920"/>
-  <input type="hidden" name="kt" value="h"/>
-  <input type="text" name="q" maxlength="255" placeholder="Search HPR with DuckDuckGo"/>
-  <input type="submit" value="Search HPR with DuckDuckGo" />
-</form>
-<br />
-<a href="https://duckduckgo.com/privacy">privacy policy</a>
-</p>
-<hr />
-<h2>Bing</h2>
-<p>
-<form method="get" action="https://www.bing.com/search">
-<input type="hidden" name="cp" value="utf-8" />
-<input type="hidden" name="FORM" value="FREESS" />
-<input type="text" name="q" size="30" placeholder="Search HPR with Bing"/>
-<input type="submit" value="Search HPR with Bing" />
-<input type="hidden" name="q1" value="site:www.hackerpublicradio.org" />
-</form>
-<br />
-<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
-</p>
-  </article>
+<section id="search">
+	<header>
+		<h1>Search HPR.</h1>
+	</header>
+	<div class="lane">
+		<form name="google-search" method="get" action="https://www.google.com/search">
+			<fieldset><legend>Google</legend>
+				<input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
+				<input name="q" type="text" placeholder="Search HPR with Google"/>
+				<input type="submit" name="sa" value="Search HPR with Google" />
+				<p>
+				<a href="https://www.google.com/policies/privacy/">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
+		<form method="get" id="search" action="https://duckduckgo.com/">
+			<fieldset><legend>DuckDuckGo</legend>
+			<input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
+			<input type="hidden" name="k8" value="#444444"/>
+			<input type="hidden" name="k9" value="#D51920"/>
+			<input type="hidden" name="kt" value="h"/>
+			<input type="text" name="q" maxlength="255" placeholder="Search HPR with DuckDuckGo"/>
+			<input type="submit" value="Search HPR with DuckDuckGo" />
+			<p>
+			<a href="https://duckduckgo.com/privacy">privacy policy</a>
+			</p>
+			</fieldset>
+		</form>
+		<form method="get" action="https://www.bing.com/search">
+			<fieldset><legend>Bing</legend>
+				<input type="hidden" name="cp" value="utf-8" />
+				<input type="hidden" name="FORM" value="FREESS" />
+				<input type="text" name="q" size="30" placeholder="Search HPR with Bing"/>
+				<input type="submit" value="Search HPR with Bing" />
+				<input type="hidden" name="q1" value="site:www.hackerpublicradio.org" />
+				<p>
+				<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
+	</div>
+</section>
+<section id="tags">
+<!--% PROCESS 'shared-utils.tpl.html' %-->
+<!--% PROCESS "queries-tags.tpl.html" %-->
+<!--% USE DBI(constants.driver) %-->
+<!--% PERL %-->
+$Template::Stash::PRIVATE = undef; # Allow . in tag
+<!--% END %-->
+<!--% USE String %-->
+<!--% uniq_tag_count = 0 %-->
+<!--% FOREACH episode IN DBI.query(query_tags);
+    ep_id = episode.id;
+    ep_tags = episode.tags;
+    FOREACH tag_str IN ep_tags.csv_parse;
+        NEXT UNLESS tag_str;
+        NEXT IF tag_str == '';
+        tag = tag_str.lower;
+		tag_index = String.new(tag).push('_');
+        first_char = tag.substr(0,1);
+        IF first_char == '.';
+            first_char = '&#x0002E;'; # Unicode .
+        END;
+        IF all_tags.${first_char}.exists(tag_index);
+            all_tags.${first_char}.${tag_index}.count = all_tags.${first_char}.${tag_index}.count + 1;
+            all_tags.${first_char}.${tag_index}.urls.push(ep_id);
+        ELSE;
+            all_tags.${first_char}.${tag_index}.count = 1;
+            uniq_tag_count = uniq_tag_count + 1;
+            all_tags.${first_char}.${tag_index}.urls = [ep_id];
+        END;
+    END;
+END %-->
+<!--% USE date %-->
+<!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] %-->
+<header>
+	<hgroup>
+	<h1 id="TOP" class="title">Search by Tag</h1>
+	<p class="date">Generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
+	</hgroup>
+</header>
+	<p>This section summarises all of the tags currently used throughout the
+	database. The tags are in alphabetical order and each is followed by links to
+	the show numbers where it is used so you can see the context the author used
+	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
+	<h4>Alphabetical index</h4>
+	<p>This is an index to the initial letters of the tags below.</p>
+	<ul id="tag_initial_letter_index">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+        <!--% END %-->
+    <!--% END %-->
+	</ul>
+	<hr class="no-css">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
+	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
+	        <ul class="tag-index">
+                <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
+				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
+    	        	<li>
+    	        		<a id="<!--% tag_to_id(tag_id) %-->"><strong><!--% tag %--></strong></a>: 
+                        <!--% ep_links = [] %-->
+                        <!--% FOREACH ep_id IN all_tags.${first_char}.${tag_index}.urls.nsort;
+							ep_links.push("<a href=\"${absolute_path(baseurl)}eps/hpr" _ zero_pad_left(ep_id) _ '/index.html"'
+                                ' target="_blank" aria-label="' _ tag _
+                                ' - show ' _ ep_id _ '">' _ ep_id _ '</a>');
+                        END %-->
+                        <!--% ep_links.join(', ') %-->
+    	        	</li>
+                <!--% END %-->
+	        </ul>
+        <!--% END %-->
+    <!--% END %-->
+	<p><a href="#TOP">Go to TOP of page</a></p>
+</article>
+<!--% PERL %-->
+$Template::Stash::PRIVATE = 1;
+<!--% END %-->
+
+</section>
--- a/templates/content-series.tpl.html
+++ b/templates/content-series.tpl.html
@@ -2,8 +2,9 @@
 <!--% PROCESS "queries-series.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
 <h1 class="title">In-Depth Series</h1>
-<div class="lane">
+<div class="lane stack">
 <!--% FOREACH series IN DBI.query(query_episodes) %-->
+
  <article>
 	<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
 	<ul>
@@ -13,7 +14,7 @@
 		<li>Date of latest show: <!--% series.latest_show %--></li>
 		<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
 	</ul>
-	<em><!--% series.description %--></em>
+	<div class="series-description"><!--% series.description %--></div>
  </article>
 <!--% END %-->
 </div>
--- a/templates/content-series_episode.tpl.html
+++ b/templates/content-series_episode.tpl.html
@@ -5,7 +5,6 @@
 <!--% query_series = DBI.prepare(query_series_sql)
 %-->
 <!--% series_result = query_series.execute(id) %-->
-<article>
 <!--% FOREACH series IN series_result %-->
 <h1 class="title">In-Depth Series: <!--% series.name %--></h1>
 <ul>
@@ -15,13 +14,16 @@
 	<li>Date of latest show: <!--% series.latest_show %--></li>
 	<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->&full=1&gomax=1">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->&full=1&gomax=1">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->&full=1&gomax=1">mp3</a></li>
 </ul>
-<div><em><!--% series.description %--></em></div>
-<!--% END %-->
+<p><em><!--% series.description %--></em></p>
+<section id="series_episodes" class="lane stack">
 <!--% query_shows = DBI.prepare(query_shows_sql)
 %-->
 <!--% show_results = query_shows.execute(id) %-->
 <!--% FOREACH show IN show_results %-->
+<article>
 <!--% show_summary(show) %-->
-<p class="listen-in"><!--% display_listen_in(show.id) %--></p>
-<!--% END %-->
+<footer class="listen-in"><!--% display_listen_in(show.id) %--></footer>
 </article>
+<!--% END %-->
+</section>
+<!--% END %-->
--- a/templates/content-syndication.tpl.html
+++ b/templates/content-syndication.tpl.html
@@ -3,18 +3,18 @@
  <p>
  Great that you want to listen. Have a look below at the feeds that best suite your listening habits.
  </p>
-  <div class="lane">
+  <div class="lane stack">
  <article>
  <header>
+	<hgroup>
    <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>
@@ -26,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.
@@ -76,6 +78,7 @@
 <div>
 <hr class="no-css">
 <h1>Other Download Options</h1>
+<div class="lane syndication">
 <article>
  <header>
    <h2>Site Replication Sources</h2>
@@ -108,25 +111,27 @@

 <article>
  <header>
-  <h1>Download Archive</h1>
+  <h2>Download Archive</h2>
+ </header>
  <p>Please be aware that our Archive exceeds <strong>200Gb</strong></em>. We are happy for you to download them, but please make sure that you are not going to incur additional bandwidth charges on your side.</p>
  <p>We will be happy to physically send episodes anywhere in the world if bandwidth is an issue.</p>
-  </header>
-  <h2>Full Episode Guide</h2>
-  <p>
-  The <a href="<!--% absolute_path(baseurl) %-->eps/index.html">compete episode guide</a> is available to you, and it lists all the shows on one page going right back to the very first episode.
-  </p>
-  <h2>Command line download</h2>
-  <p>
-  You can download the audio of the episodes directly from the command line using the following commands:
-  </p>
-  <ul>
-  <li>ogg:<br />
-  <span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].ogg' -o "hpr#1.ogg"</span></li>
-  <li>spx:<br />
-  <span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].spx' -o "hpr#1.spx"</span></li>
-  <li>mp3:<br />
-  <span style="font-family:monospace;">curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].mp3' -o "hpr#1.mp3"</span></li>
-  </ul>
-
 </article>
+
+<article>
+  <header><h2>Full Episode Guide</h2></header>
+  <p>The <a href="<!--% absolute_path(baseurl) %-->eps/index.html">compete episode guide</a> is available to you, and it lists all the shows on one page going right back to the very first episode.</p>
+</article>
+
+<article>
+  <header><h2>Command line download</h2></header>
+  <p>You can download the audio of the episodes directly from the command line using the following commands:</p>
+  <ul>
+  <li>ogg:<br>
+  <code>curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].ogg' -o "hpr#1.ogg"</code></li>
+  <li>spx:<br>
+  <code>curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].spx' -o "hpr#1.spx"</code></li>
+  <li>mp3:<br>
+  <code>curl '<!--% absolute_path(baseurl) %-->eps/hpr[0001-<!--% episode.latest %-->].mp3' -o "hpr#1.mp3"</code></li>
+  </ul>
+</article>
+</div>
--- a/templates/content-tags.tpl.html
+++ b/templates/content-tags.tpl.html
@@ -1,3 +1,4 @@
+<section id="tags">
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS "queries-tags.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
@@ -30,39 +31,31 @@ $Template::Stash::PRIVATE = undef; # Allow . in tag
 END %-->
 <!--% USE date %-->
 <!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] %-->
-
-<style>
-    .columns3 { columns: 3 auto; list-style-type: none }
-    hr.thin {
-        border: 0;
-        height: 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    }
-    p.ralign { text-align: right }
-</style>
-<article>
-	<a id="TOP"><h1 class="title">Tag summary</h1></a>
-	<h4 class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></h4>
+<header>
+	<hgroup>
+	<h1 class="title"><a id="TOP">Search by Tag</a></h1>
+	<p class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
+	</hgroup>
+</header>
 	<p>This section summarises all of the tags currently used throughout the
 	database. The tags are in alphabetical order and each is followed by links to
 	the show numbers where it is used so you can see the context the author used
 	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
 	<h4>Alphabetical index</h4>
 	<p>This is an index to the initial letters of the tags below.</p>
-	<ul class="columns3">
+	<ul id="tag_initial_letter_index">
    <!--% FOREACH first_char IN all_first %-->
        <!--% IF all_tags.${first_char} %-->
-            <li><a href="<!--% absolute_path(baseurl) %-->tags.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
        <!--% END %-->
    <!--% END %-->
 	</ul>
-	<hr>
+	<hr class="no-css">
    <!--% FOREACH first_char IN all_first %-->
        <!--% IF all_tags.${first_char} %-->
-		<p class="ralign"><a href="<!--% absolute_path(baseurl) %-->tags.html#TOP">&UpArrow; Go to index</a></p>
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
 	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
-	        <ul>
+	        <ul class="tag-index">
                <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
 				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
    	        	<li>
@@ -84,3 +77,5 @@ END %-->
 <!--% PERL %-->
 $Template::Stash::PRIVATE = 1;
 <!--% END %-->
+
+</section>
--- a/templates/page.tpl.html
+++ b/templates/page.tpl.html
@@ -12,15 +12,6 @@
  <meta http-equiv="last-modified" content="<!--% format_feed_date(date.now) %-->">
  <meta name="keywords" content="Technology, Tech News, Education, Training" />
  <meta name="description" content="Hacker Public Radio is a podcast that releases shows every weekday Monday through Friday. Our shows are produced by the community (you) and can be on any topic that is of interest to hackers and hobbyists." />
-  <!-- Internal CSS -->
-  <style type="text/css">
-  article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
-          display: block;
-  }
-  #list1, #list2, #list3 {
-          display:none;
-  }
-  </style>
  <link rel="shortcut icon" href="<!--% absolute_url(baseurl) %-->hpr.ico" >
  <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Opus RSS" href="<!--% absolute_path(baseurl) %-->hpr_opus_rss.php" />
  <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Ogg Vorbis RSS" href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php" />
@@ -36,37 +27,37 @@
 </head>

 <body>
-<nav id="accessible_menu">
-   <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
-   - <a href="#main_content">skip to main content</a>
-</nav>
-<nav id="main_menu" class="menu" role="navigation">
-<!--% INCLUDE "navigation-main.tpl.html" %-->
-</nav>
+<div id="top_navigation" class="sr-only">
+	<nav id="accessible_menu">
+		<menu>
+			<li><a href="#main_content">Skip to Main Content</a></li>
+			<li><a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a></li>
+		</menu>
+	</nav>
+	<hr class="no-css">
+</div>
 <header role="banner">
-  <div id="title">
-	  <h1 id="site_acronym">HPR</h1>
-      <h2 id="site_name">
+<div class="bounding-box">
+  <hgroup id="title">
+	  <h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1>
+      <p id="site_name">
        <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker
        <a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">P</a>ublic
        <a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio
-      </h2>
-	  <h3 id="site_url">https://HackerPublicRadio.org</h3>
-  </div>
-  <div id="tag_line">
-    <h2>The Community Podcast</h2>
-	<h2>Sharing your ideas, projects, opinions since 2005</h2>
-    <h3>New episodes every weekday </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>
Author	SHA1	Message	Date
Roan Horning	dcfd801b9a	Merge pull request 'apply a crafty style to the lane buttons' (#273 ) from lee/hpr_generator:newsite into newsite Reviewed-on: #273	2025-09-04 19:56:18 +00:00
Lee Hanken	4654adaa42	increased contrast of lane buttons, fixed font definition	2025-09-04 18:55:30 +01:00
Lee Hanken	f3b156b31f	merge in changes from upstream	2025-09-04 11:16:12 +01:00
Roan Horning	7ae15005de	Apply card formatting to hosts table	2025-09-03 23:03:20 -04:00
Roan Horning	be17edd6ac	Create single column card stack view Apply to comments viewer, syndication, series, and series episodes pages.	2025-09-03 21:57:28 -04:00
Roan Horning	3454bb717e	Tweak responsive display of main page lane buttons	2025-09-01 00:24:44 -04:00
Roan Horning	7118a3da0a	Add maximum content width Help with readability of the website on large screens.	2025-08-31 23:42:44 -04:00
Roan Horning	a8f4eea501	Change secondary background color Match the color of the main HPR logo acronym.	2025-08-28 22:33:50 -04:00
Roan Horning	edf64b668c	Tweak search page layout	2025-08-28 22:31:52 -04:00
Lee Hanken	7235230e7f	improve readability by sligtly spacing letters	2025-08-28 23:41:16 +01:00
Roan Horning	9c2b43e11f	Update search page to include tag index	2025-08-27 11:42:32 -04:00
Roan Horning	8bf4f67cce	Fix footer background color	2025-08-24 22:12:19 -04:00
Roan Horning	bad3e3e3da	Tweak swim lane icon spacing on small screens	2025-08-24 22:03:31 -04:00
Roan Horning	4e08ebad63	Fix tag_line line height for larger devices	2025-08-24 21:49:18 -04:00
Roan Horning	310f14c4bd	Tweak syndication page layout Vertically flow content and clean up card header white spacing.	2025-08-24 21:47:38 -04:00
Roan Horning	97116aad4b	Add fallback background color to main header	2025-08-24 21:32:20 -04:00
Roan Horning	02864bed9e	Merge branch 'newsite' of repo.anhonesthost.net:HPR/hpr_generator into newsite	2025-08-24 09:05:56 -04:00
Roan Horning	b12a7fb4e7	Simplify header layout Remove QR code, improve contrast of header links.	2025-08-24 09:00:33 -04:00
Roan Horning	ca90c1f580	Simplify header layout Remove QR code, improve contrast of header links.	2025-08-23 23:03:17 -04:00
Roan Horning	8a20ac971e	Add default CSS header variables	2025-08-23 22:57:05 -04:00
Roan Horning	798ccc42bc	Remove top menu Remove main navigation and make skip to main accessibility link visible to screen readers only.	2025-08-23 22:38:53 -04:00
Roan Horning	0bdc847f0f	use html definition list for latest lists	2025-08-23 22:34:22 -04:00
Lee Hanken	6915d74de1	apply a crafty style to the lane buttons	2025-08-22 12:17:37 +01:00
Roan Horning	6b8c97815a	Reformat top navigation menus Have accessibility menu appear on same line as main menu.	2025-08-08 22:50:52 -04:00
Roan Horning	4336183437	Remove CSS included at top of each page	2025-08-08 21:36:21 -04:00
Roan Horning	e5d8d20e85	Update QR code to work more easily Needed to up the number of bits used to make the code more easily decoded.	2025-08-08 21:09:11 -04:00
Roan Horning	3991c95533	Finish moving syndication page to card format	2025-08-07 20:57:00 -04:00
Roan Horning	29e2647c85	Add search button to project lane on landing page	2025-08-05 22:44:15 -04:00
Roan Horning	96d4f14b6f	Update responsive layout for footer and latest lanes	2025-08-03 23:59:06 -04:00
Roan Horning	f2b00145ad	Add episode summary to information about latest shows	2025-08-03 23:30:15 -04:00
Roan Horning	e9df7bc900	Update theme colors for links	2025-08-03 23:14:17 -04:00
Roan Horning	c742794f15	Use no-css class on page footer hr tag	2025-08-03 22:45:01 -04:00
Roan Horning	90710665c9	Add level 2 header tag to page section header tags	2025-08-03 22:40:16 -04:00
Roan Horning	6347b39d74	Text changes to landing page Per Ken's PR comment: #266 (comment)	2025-08-03 22:36:56 -04:00
Roan Horning	033fc310bf	Fix lane icon default height when no css Add height attribute to image and br tags for formatting when no css is available.	2025-08-03 22:27:13 -04:00