From 68e51c0a32e896bb368b16f85e8df9aeaae7dbf2 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 09:30:40 -0400
Subject: [PATCH 01/16] Initial reset of tags to use fluid responsive design

Use the clamping function to change the base font size as the size of the screen varies. Modify font-size, padding, and margin sizes to rely on the base font size (use rem units). In addition improve usage of white space by modifying line-height, margins, and padding of various tags.
---
 public_html/css/hpr.css | 110 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 107 insertions(+), 3 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 71668cd..c70ef43 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -4,17 +4,121 @@
 https://creativecommons.org/publicdomain/ 
  
 */
+/*
+ *	See the following for the modern CSS responsive design techniques used in this file:
+ *	- MDN web docs: Responsive design 
+ *		-- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+ *	- Matthew James Tayler: Responsive Font Size (Optimal Text at Every Breakpoint) 
+ *		-- https://matthewjamestaylor.com/responsive-font-size
+ *	- 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/
+*/ 
 
-p.meta span label { font-weight: bold; }
-@media only screen and (min-width: 479px) { 
+html { 
+	margin: 0; 
+	padding: 0; 
+	display: block;
+}
+
+body { 
+	display: block;
+	background: #dfdfdf; 
+	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
+	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); 
+	margin: 0;
+	padding: 0;
+}
 
-body {background: #dfdfdf;}
 div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
   font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */
   color: #4D4D4D; /* HPR Grey */
   background: white;
 }
 
+h1 {
+	font-size: 1.5rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+h2,
+article * h1 {
+	font-size: 1.45rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+h3,
+article * h2 {
+	font-size: 1.25rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+h4,
+article * h3 {
+	font-size: 1.15rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+ul {
+	padding-left: 1.15rem;
+}
+
+li {
+	line-height: 1.25;
+}
+
+a {
+	text-decoration: none;
+}
+
+a:hover {
+	cursor: pointer;
+}
+
+hr {
+	background: #4D4D4D;
+	border: 0;
+	height: 0.25em;
+}
+
+audio {
+	padding: .7em 0em .5em 0em; 
+	clear: both; 
+	position: relative; 
+	z-index:auto;
+}
+
+.audcredit { 
+	font-size: 75%;
+	margin-bottom: 1em;
+}
+
+p.meta {
+	line-height: 1.25;
+}
+
+p.meta span label {
+	font-weight: bold;
+}
+
+article > p,
+#maincontent > p {
+	line-height: 1.45;
+}
+
+article#previous_five_weeks > * {
+	line-height: 1.35;
+	margin: 0;
+	padding: 0;
+}
+
+article#previous_five_weeks > h3 {
+	margin: 1.5rem 0 0.5rem 0;
+}
 
 #container {
 	width: 100%;

From e8f01ba5c5cdb0d8416765b9a94b24448a371f9c Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:24:27 -0400
Subject: [PATCH 02/16] Use fluid design for main container margins and padding

---
 public_html/css/hpr.css | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index c70ef43..18259c4 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -121,28 +121,20 @@ article#previous_five_weeks > h3 {
 }
 
 #container {
-	width: 100%;
-	max-width: 58em;
-	margin: auto;
+	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;
-	padding: .5em;
-	border: thin solid;
 	background: white;
+	border: thin solid #4D4D4D;
 }
 
 .shadow {
   -moz-box-shadow:    2px 3px 6px 3px #675958;
   -webkit-box-shadow: 2px 3px 6px 3px #675958;
-  box-shadow:         2px 3px 6px 3px #675958;}
-
-#hprlogo { 
-  display: block; 
-  position: relative; 
-  top: 0; 
-  left: 0; 
-  border: 0; 
-  margin: 0.75em;
-  float:left;
+  box-shadow:         2px 3px 6px 3px #675958;
+}
 }
 
 #hpr_banner { 

From 6b2a324730f7878162dc15c6699065562061ae04 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:38:19 -0400
Subject: [PATCH 03/16] Modify whitespace and sizing of headers in banner

---
 public_html/css/hpr.css | 47 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 18259c4..bdbfcc9 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -135,22 +135,53 @@ article#previous_five_weeks > h3 {
   -webkit-box-shadow: 2px 3px 6px 3px #675958;
   box-shadow:         2px 3px 6px 3px #675958;
 }
+
+img#hprlogo {
+	max-width: 20vw;
+	padding-right: clamp(0.75rem, -0.25rem + 3vw , 1.5rem);
+	float: left;
+	margin-top: 1rem;
+	margin-bottom: clamp(0.75rem, -0.25rem + 2vw , 1.5rem);
 }
 
 #hpr_banner { 
-  display: block; 
-  position: relative;
+  /* display: inline-block; */ 
   border: 0; 
-  margin: 0.75em;
-  float: left;
+  margin: 0 0 0rem 0;
+  padding: 0;
 }
 
-#hpr_banner h1 {margin: -.25em 0em -.5em 0em;}
-#hpr_banner h2 {font-size: 100%; font-weight: lighter; }
-#hpr_banner h3 {font-size: 90%; font-weight: lighter; }
+#hpr_banner p {
+	margin: 0 0 0.5rem 0;
+}
+
+#hpr_banner h1#sitename {
+	font-size: clamp(1.44rem, -1rem + 3vw , 2rem);
+	letter-spacing: 0.06rem;
+	margin: 0;
+	padding: 0;
+}
+
+#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: small;
+	font-size: smaller;
 }
 
 /* The main navigation menu */

From ad89f1fb4fee69a0956c5c29904c7ee6a88372b6 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:42:18 -0400
Subject: [PATCH 04/16] Modify white space of main menu

Add some accessiblility touches: change cursor to pointer on hover, change link color on active event.
---
 public_html/css/hpr.css | 182 +++++++---------------------------------
 1 file changed, 31 insertions(+), 151 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index bdbfcc9..124c11d 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -185,174 +185,54 @@ header > hr {
 }
 
 /* The main navigation menu */
-.menu {
-  background: #4D4D4D; /* HPR Grey */
+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: 0em 0em;
-  margin: 0em 0em;
-}
-
-.menu ul ul { /* Causes the sub menus not to be displayed, until hover shows them */
-  display: none;
-}
-
-#main_menu li a {display: block;}
-
-.menu ul li { padding: .25em 0em;}
-
-}
-
-.menu ul { /* The menu bar background across screen */
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  padding: 0 10px; /* Keeps sub menus to the left */
-  list-style: none;
-  position: relative;
-  margin: 0;
-  display: inline-table;
-}
-
-.menu ul:after { /* Forces the dropdown to be a block with non float */
-  content: ""; 
-  clear: both; 
-  display: block;
-}
-
-.menu ul li {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  float: left;
-  padding: .5em 1em;
-}
-
-.menu ul li a {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  display: block; 
-  text-decoration: none;
-}
-    
-.menu ul ul {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
   padding: 0;
-  position: absolute; 
-  top: 100%;
+  margin: 0;
 }
 
-.menu ul ul li {
-  background: #4D4D4D; /* HPR Grey */
+header > nav.menu ul {
+	margin: 0;
+	padding: 0.5rem;
+	background-color: inherit;
   color: white;
-  float: none; 
-  position: relative;
-}
-    
-.menu ul ul ul {
-  position: absolute; 
-  left: 100%; 
-  top:0;
 }
 
-
-hr {
-  background: #4D4D4D;  /* HPR Grey */
-  border: 0;
-  height: 0.25em;
+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);
 }
 
-/* The multi colum footer layout */
-
-#footer_page {
-  width:100%;
-}
-
-.column {
-  width:12%;
-  background-color: white;
-  color: #4D4D4D; /* HPR Grey */
-  float:left;
-  margin:0 10px;
+header > nav.menu ul li a {
+  color: white;
+	text-decoration: none;
   display: block;
+	padding: 0.25rem 0;
 }
 
-.column li {
-  list-style:none;
-  padding: .25em 0em;
-  font-size: 85%;
+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;
 }
 
-.thick_bar {
-  width:100%;
-  background-color: #4D4D4D; /* HPR Grey */
-  color: white;
-  float:left;   
-  clear: both;
-  height:1.5em;
-  padding: .5em 0em .5em 0em;
-  font-size: 1em;
-  margin: 1em 0em 1em 0em;
+header > nav.menu ul li a:visited{
+	color: #EDEDED;
 }
 
-#more_info {margin: auto;}
-nav.column { display: block; padding: 0em 1em 0em 1em;}
-#copyright {
-  font-size: small;
-  width:100%;
-  float:left;   
-}
-
-article, #copyright p {
-  padding: 0 10px;
-}
-
-audio {padding: .7em 0em .5em 0em; clear: both; position: relative; z-index:auto;}
-.audcredit { font-size: 75%;margin-bottom: 1em;}
-h1.showtitle { font-size: 125%;}
-
-/* Full Index Page styling */
-#index_full h2.title {
-	font-weight: lighter;
-	margin-bottom: -.5em;
-	padding: .5em 0em 0em 0em; 
-	font-size: 110%;}
-
-#index_full p.meta {font-size: 85%;}
-
-#small {
-  font-size: small;
-}
-
-p.author { font-size: 85%;}
-p.shownotes { padding: .5em;}
-#maincontent footer p { /* font-size: 75%; */ margin-bottom: 1em;}
-/* link styling */
-a:link {text-decoration: none;}
-
-table {
-    width:100%;
-}
-table, th, td {
-    border-collapse: collapse;
-    padding: 2px;
-    text-align: left;
-}
-table#t01, table#t01 th, table#t01 td {
-    border: 1px solid black;
-}
-table#t01 th, table#t01 td {
-    padding: 5px;
-    text-align: left;
-}
-table#t01 tr:nth-child(even) {
-    background-color: #eee;
-}
-table#t01 tr:nth-child(odd) {
-   background-color:#fff;
-}
-table#t01 th	{
-    background-color: #4D4D4D;
-    color: white;
+a:active, 
+header > nav.menu ul li a:active {
+	color: red;
 }
 
 pre { /* Add background, border and scrollbar to <pre> */

From d1539a3ca215e4716b3166cb9e1670e546acc85d Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:43:51 -0400
Subject: [PATCH 05/16] Add fluid responsive design to comment and code tags

---
 public_html/css/hpr.css | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 124c11d..02154a8 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -240,18 +240,16 @@ pre { /* Add background, border and scrollbar to <pre> */
     border: 1px solid #ddd;
     overflow: auto;
     clear: both;
+	padding: 0.5rem
 }
 
-table.hosts {
-	background: white
+pre code {
+	padding-right: 0.5rem;
+	font-size: 0.85rem;
+	line-height: 1;
 }
-table.hosts tr:nth-child(even) { background-color:#cccccc; }
-table.hosts tr:nth-child(odd) { background-color:white; }
-table.hosts tr td img { vertical-align:middle }
-
 pre.comment {
 	white-space: pre-wrap;
-	padding: 2px;
 	line-height: 1.2rem;
 }
 

From 7cd0cc3056d93b91fdd952f1ee8a24862f0634df Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:45:23 -0400
Subject: [PATCH 06/16] Add fluid responsive design to hosts table

---
 public_html/css/hpr.css | 67 ++++++++++++++++++++++++++---------------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 02154a8..3c6e1ad 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -253,31 +253,50 @@ pre.comment {
 	line-height: 1.2rem;
 }
 
-h3.title { margin: 1.25rem 0 0.75rem 0 }
-p.meta { margin: 0.25rem 0 }
-p.summary { margin: 0.25rem 0 }
-p.listen-in { margin-top: 0 }
+table.hosts {
+	font-size: clamp(0.82rem, -0.25rem + 3vw , 1.0rem);
+	width: 100%;
+	background: white;
+	margin: 0 auto;
+	border-collapse: collapse;
+	display: inline-table;
 
-@media only screen and (max-width: 680px) { 
-	#container {width: 95%;}
-	img#hprlogo {float: left; max-width: 85px; padding: .35em;}
-	.column {width: 15%;}
-	h1 {font-size: 140%;}
-	h2 {font-size: 120%;}
-	h3 {font-size: 100%;}
-	nav.column { display: block; padding: 0em .25em 0em .25em;}
-	#footer_page li {font-size: 85%; padding: .5em .25em .5em .25em;}
-	footer p {font-size: 75%;}
-	audio {float: none; }
 }
 
-@media only screen and (max-width: 479px) { 
-	body {background: #ffffff; color: #4D4D4D; font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */}
-	li {font-size: 100%; padding: .75em 0em .75em 0em; margin-left: -.25em;}
-	img#hprlogo {float: left; max-width: 65px; padding: .35em;}
-	.column {width: auto;}
-	h1#sitename { clear: both;}
-	a:link {text-decoration: none;}
-	audio {padding: .7em 0em .5em 0em; width: 95%; max-width: 300px;}
-	.audcredit { font-size: 65%; margin-bottom: 1em;}
+table.hosts tr:nth-child(even) { 
+	background-color:#cccccc; 
+	border-bottom: thick solid white;
+}
+
+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;
+}
+
+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);
+}
+
 }

From 51adbcd9384c00a8c4a8a98367089b51fe7459a6 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:46:32 -0400
Subject: [PATCH 07/16] Add fluid responsive design to page footer

---
 public_html/css/hpr.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 3c6e1ad..e23e890 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -299,4 +299,36 @@ table.hosts td:nth-child(4) {
 	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;
+}
+
+footer #copyright {
+	font-size: smaller;
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
+
 }

From 6062cfd6b4b3c23819ea0044a5a711445dc79b81 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:47:29 -0400
Subject: [PATCH 08/16] Clean up look of comment form

---
 public_html/css/hpr.css | 46 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index e23e890..fac8ea7 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -331,4 +331,50 @@ footer #copyright {
 	margin-right: 0.5rem;
 }
 
+fieldset > table, 
+fieldset > table thead, 
+fieldset > table tbody, 
+fieldset > table tr, 
+fieldset > table th, 
+fieldset > table td,
+fieldset > table td input,
+fieldset > table td textarea { 
+	display: block; 
+	font-size: 1rem;
+}
+
+fieldset > table {
+	width: calc(100vw + -16vw + -1rem);
+	max-width: 100%;
+}
+
+fieldset > table td input,
+fieldset > table td textarea {
+	width: calc(100vw + -16vw + -1.5rem);
+	max-width: 100%;
+	border: thin solid #DFDFDF;
+	margin-bottom: 0.5rem;
+	padding: 0.5rem;
+}
+
+fieldset > table td select {
+	margin-bottom: 0.5rem;
+	padding: 0.25rem;
+}
+
+fieldset > table td input[type="radio"] {
+	display: initial;
+	width: initial;
+	margin-bottom: 0.5rem;
+}
+
+fieldset > input {
+	background: #4D4D4D;
+	color: white;
+	font-weight: 600;
+	padding: 0.5rem;
+	border: thin solid #DFDFDF;
+	border-radius: 0.2rem;
+}
+
 }

From 69f19976fdd4953e406ec18e42401219424bf728 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:49:16 -0400
Subject: [PATCH 09/16] Use fluid responsive design for hr tag

---
 public_html/css/hpr.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index fac8ea7..14bf6fb 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -136,6 +136,13 @@ article#previous_five_weeks > h3 {
   box-shadow:         2px 3px 6px 3px #675958;
 }
 
+.thick_bar {
+	background-color: #4D4D4D;
+	color: white;
+	padding: 0.5rem;
+	margin: 1rem 0 1rem 0;
+}
+
 img#hprlogo {
 	max-width: 20vw;
 	padding-right: clamp(0.75rem, -0.25rem + 3vw , 1.5rem);

From 87b7f7bde6f871c5291cbc035dea10e2793b2f16 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:53:07 -0400
Subject: [PATCH 10/16] Create media breakpoint that matches original wide
 screen setting

For larger screens constrain viewing width and growth of font-size, and margins to approximately corresponding sizes of the original layout. Prevent things from getting too large.
---
 public_html/css/hpr.css | 85 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 14bf6fb..5508037 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -384,4 +384,89 @@ fieldset > input {
 	border-radius: 0.2rem;
 }
 
+@media only screen and (min-width: 58rem) {
+	#container {
+		margin: 0.5rem auto;
+	}
+
+	.shadow {
+	  -moz-box-shadow:    1px 2px 5px 2px #675958;
+	  -webkit-box-shadow: 1px 2px 5px 2px #675958;
+	  box-shadow:         1px 2px 5px 2px #675958;
+	}
+
+	img#hprlogo {
+		margin-bottom: 1.5rem;
+	}
+
+	#hpr_banner {
+		float: left;
+	}
+
+	#hpr_banner h1#sitename {
+		font-size: 2rem;
+	}
+
+	#hpr_banner h2 {
+		font-size: 1rem;
+	}
+
+	header > hr {
+		clear: right;
+	}
+
+	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, 
+	fieldset > table tr, 
+	fieldset > table th, 
+	fieldset > table td,
+	fieldset > table td input,
+	fieldset > table td textarea { 
+		display: revert; 
+		width: revert;
+	}
+
+	fieldset > table tr { 
+		vertical-align: baseline;
+	}
+
+	fieldset > table tr:nth-child(3) {
+		vertical-align: top;
+	}
+
+	fieldset > table tr:nth-child(3) td:first-child {
+		padding-top: 0.5rem;
+	}
+
+	fieldset > table tr:nth-last-child(3) td:first-child {
+		padding-top: 1rem;
+	}
+
+	fieldset > table tr:nth-last-child(2) {
+		vertical-align: top;	
+	}
+	fieldset > table tr:nth-last-child(2) td:first-child {
+		padding-top: 0.75rem;
+	}
+
+	fieldset > table td input[type="radio"] {
+		margin-top: 1.5rem;
+	}
 }

From 9655c56ee65e1cf2d360905f68bdac8257f4cb96 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 11:02:06 -0400
Subject: [PATCH 11/16] Format CSS for consistency

---
 public_html/css/hpr.css | 232 ++++++++++++++++++++++------------------
 1 file changed, 127 insertions(+), 105 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 5508037..10f155c 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -12,27 +12,46 @@ https://creativecommons.org/publicdomain/
  *		-- https://matthewjamestaylor.com/responsive-font-size
  *	- 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/
-*/ 
+*/
 
-html { 
-	margin: 0; 
-	padding: 0; 
+html {
+	margin: 0;
+	padding: 0;
 	display: block;
 }
 
-body { 
+body {
 	display: block;
-	background: #dfdfdf; 
+	background: #dfdfdf;
 	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
-	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); 
+	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem);
 	margin: 0;
 	padding: 0;
 }
 
-div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
-  font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */
-  color: #4D4D4D; /* HPR Grey */
-  background: white;
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+img,
+form,
+fieldset,
+input,
+textarea,
+blockquote {
+	font-family: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */
+	color: #4D4D4D; /* HPR Grey */
+	background: white;
 }
 
 h1 {
@@ -86,13 +105,13 @@ hr {
 }
 
 audio {
-	padding: .7em 0em .5em 0em; 
-	clear: both; 
-	position: relative; 
-	z-index:auto;
+	padding: .7em 0em .5em 0em;
+	clear: both;
+	position: relative;
+	z-index: auto;
 }
 
-.audcredit { 
+.audcredit {
 	font-size: 75%;
 	margin-bottom: 1em;
 }
@@ -105,18 +124,18 @@ p.meta span label {
 	font-weight: bold;
 }
 
-article > p,
-#maincontent > p {
+article>p,
+#maincontent>p {
 	line-height: 1.45;
 }
 
-article#previous_five_weeks > * {
+article#previous_five_weeks>* {
 	line-height: 1.35;
 	margin: 0;
 	padding: 0;
 }
 
-article#previous_five_weeks > h3 {
+article#previous_five_weeks>h3 {
 	margin: 1.5rem 0 0.5rem 0;
 }
 
@@ -124,16 +143,16 @@ article#previous_five_weeks > h3 {
 	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);
+	padding: clamp(0.75rem, -0.25rem + 3vw, 2.0rem);
 	overflow: hidden;
 	background: white;
 	border: thin solid #4D4D4D;
 }
 
 .shadow {
-  -moz-box-shadow:    2px 3px 6px 3px #675958;
-  -webkit-box-shadow: 2px 3px 6px 3px #675958;
-  box-shadow:         2px 3px 6px 3px #675958;
+	-moz-box-shadow:    2px 3px 6px 3px #675958;
+	-webkit-box-shadow: 2px 3px 6px 3px #675958;
+	box-shadow:         2px 3px 6px 3px #675958;
 }
 
 .thick_bar {
@@ -145,17 +164,17 @@ article#previous_five_weeks > h3 {
 
 img#hprlogo {
 	max-width: 20vw;
-	padding-right: clamp(0.75rem, -0.25rem + 3vw , 1.5rem);
+	padding-right: clamp(0.75rem, -0.25rem + 3vw, 1.5rem);
 	float: left;
 	margin-top: 1rem;
-	margin-bottom: clamp(0.75rem, -0.25rem + 2vw , 1.5rem);
+	margin-bottom: clamp(0.75rem, -0.25rem + 2vw, 1.5rem);
 }
 
-#hpr_banner { 
-  /* display: inline-block; */ 
-  border: 0; 
-  margin: 0 0 0rem 0;
-  padding: 0;
+#hpr_banner {
+	/* display: inline-block; */
+	border: 0;
+	margin: 0 0 0rem 0;
+	padding: 0;
 }
 
 #hpr_banner p {
@@ -163,27 +182,27 @@ img#hprlogo {
 }
 
 #hpr_banner h1#sitename {
-	font-size: clamp(1.44rem, -1rem + 3vw , 2rem);
+	font-size: clamp(1.44rem, -1rem + 3vw, 2rem);
 	letter-spacing: 0.06rem;
 	margin: 0;
 	padding: 0;
 }
 
 #hpr_banner h2 {
-	font-size: clamp(0.74rem, -1rem + 2vw , 1rem);
+	font-size: clamp(0.74rem, -1rem + 2vw, 1rem);
 	font-weight: 510;
 	margin: 0 0 1rem 0;
 	padding: 0;
 }
 
-#hpr_banner h3 { 
+#hpr_banner h3 {
 	font-size: 1rem;
 	font-weight: normal;
 	margin: 0 0 0.5rem 0;
 	padding: 0;
 }
 
-header > hr {
+header>hr {
 	clear: both;
 }
 
@@ -192,40 +211,40 @@ header > hr {
 }
 
 /* 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 {
+	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 {
+header>nav.menu ul {
 	margin: 0;
 	padding: 0.5rem;
 	background-color: inherit;
-  color: white;
+	color: white;
 }
 
-header > nav.menu ul li {
+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);
+	padding: 0;
+	padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
 }
 
-header > nav.menu ul li a {
-  color: white;
+header>nav.menu ul li a {
+	color: white;
 	text-decoration: none;
-  display: block;
+	display: block;
 	padding: 0.25rem 0;
 }
 
-header > nav.menu ul li a:hover {
+header>nav.menu ul li a:hover {
 	border-bottom: thin solid white;
 	padding: 0.15rem 0;
 	-webkit-transition: 0.3s ease-in-out color;
@@ -233,20 +252,21 @@ header > nav.menu ul li a:hover {
 	transition: 0.3s ease-in-out color;
 }
 
-header > nav.menu ul li a:visited{
+header>nav.menu ul li a:visited {
 	color: #EDEDED;
 }
 
-a:active, 
-header > nav.menu ul li a:active {
+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;
+pre {
+	/* Add background, border and scrollbar to <pre> */
+	background: #eee;
+	border: 1px solid #ddd;
+	overflow: auto;
+	clear: both;
 	padding: 0.5rem
 }
 
@@ -255,13 +275,14 @@ pre code {
 	font-size: 0.85rem;
 	line-height: 1;
 }
+
 pre.comment {
 	white-space: pre-wrap;
 	line-height: 1.2rem;
 }
 
 table.hosts {
-	font-size: clamp(0.82rem, -0.25rem + 3vw , 1.0rem);
+	font-size: clamp(0.82rem, -0.25rem + 3vw, 1.0rem);
 	width: 100%;
 	background: white;
 	margin: 0 auto;
@@ -270,18 +291,18 @@ table.hosts {
 
 }
 
-table.hosts tr:nth-child(even) { 
-	background-color:#cccccc; 
+table.hosts tr:nth-child(even) {
+	background-color: #cccccc;
 	border-bottom: thick solid white;
 }
 
-table.hosts tr:nth-child(odd) { 
-	background-color:white; 
+table.hosts tr:nth-child(odd) {
+	background-color: white;
 	border-bottom: thick solid white;
 }
 
-table.hosts tr td img { 
-	vertical-align:middle;
+table.hosts tr td img {
+	vertical-align: middle;
 	max-height: 80px;
 }
 
@@ -306,14 +327,14 @@ table.hosts td:nth-child(4) {
 	padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem);
 }
 
-body > div > footer {
+body>div>footer {
 	margin-top: 2rem;
 }
 
 footer #more_info nav.column {
 	clear: both;
 	font-size: 0.9rem;
-	margin-left: 0.5rem;	
+	margin-left: 0.5rem;
 }
 
 footer #more_info nav.column ul li {
@@ -338,25 +359,25 @@ footer #copyright {
 	margin-right: 0.5rem;
 }
 
-fieldset > table, 
-fieldset > table thead, 
-fieldset > table tbody, 
-fieldset > table tr, 
-fieldset > table th, 
-fieldset > table td,
-fieldset > table td input,
-fieldset > table td textarea { 
-	display: block; 
+fieldset>table,
+fieldset>table thead,
+fieldset>table tbody,
+fieldset>table tr,
+fieldset>table th,
+fieldset>table td,
+fieldset>table td input,
+fieldset>table td textarea {
+	display: block;
 	font-size: 1rem;
 }
 
-fieldset > table {
+fieldset>table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
 
-fieldset > table td input,
-fieldset > table td textarea {
+fieldset>table td input,
+fieldset>table td textarea {
 	width: calc(100vw + -16vw + -1.5rem);
 	max-width: 100%;
 	border: thin solid #DFDFDF;
@@ -364,18 +385,18 @@ fieldset > table td textarea {
 	padding: 0.5rem;
 }
 
-fieldset > table td select {
+fieldset>table td select {
 	margin-bottom: 0.5rem;
 	padding: 0.25rem;
 }
 
-fieldset > table td input[type="radio"] {
+fieldset>table td input[type="radio"] {
 	display: initial;
 	width: initial;
 	margin-bottom: 0.5rem;
 }
 
-fieldset > input {
+fieldset>input {
 	background: #4D4D4D;
 	color: white;
 	font-weight: 600;
@@ -390,9 +411,9 @@ fieldset > input {
 	}
 
 	.shadow {
-	  -moz-box-shadow:    1px 2px 5px 2px #675958;
-	  -webkit-box-shadow: 1px 2px 5px 2px #675958;
-	  box-shadow:         1px 2px 5px 2px #675958;
+		-moz-box-shadow:    1px 2px 5px 2px #675958;
+		-webkit-box-shadow: 1px 2px 5px 2px #675958;
+		box-shadow:         1px 2px 5px 2px #675958;
 	}
 
 	img#hprlogo {
@@ -411,7 +432,7 @@ fieldset > input {
 		font-size: 1rem;
 	}
 
-	header > hr {
+	header>hr {
 		clear: right;
 	}
 
@@ -431,42 +452,43 @@ fieldset > input {
 		margin-bottom: 0.5rem;
 	}
 
-	fieldset > table, 
-	fieldset > table thead, 
-	fieldset > table tbody, 
-	fieldset > table tr, 
-	fieldset > table th, 
-	fieldset > table td,
-	fieldset > table td input,
-	fieldset > table td textarea { 
-		display: revert; 
+	fieldset>table,
+	fieldset>table thead,
+	fieldset>table tbody,
+	fieldset>table tr,
+	fieldset>table th,
+	fieldset>table td,
+	fieldset>table td input,
+	fieldset>table td textarea {
+		display: revert;
 		width: revert;
 	}
 
-	fieldset > table tr { 
+	fieldset>table tr {
 		vertical-align: baseline;
 	}
 
-	fieldset > table tr:nth-child(3) {
+	fieldset>table tr:nth-child(3) {
 		vertical-align: top;
 	}
 
-	fieldset > table tr:nth-child(3) td:first-child {
+	fieldset>table tr:nth-child(3) td:first-child {
 		padding-top: 0.5rem;
 	}
 
-	fieldset > table tr:nth-last-child(3) td:first-child {
+	fieldset>table tr:nth-last-child(3) td:first-child {
 		padding-top: 1rem;
 	}
 
-	fieldset > table tr:nth-last-child(2) {
-		vertical-align: top;	
+	fieldset>table tr:nth-last-child(2) {
+		vertical-align: top;
 	}
-	fieldset > table tr:nth-last-child(2) td:first-child {
+
+	fieldset>table tr:nth-last-child(2) td:first-child {
 		padding-top: 0.75rem;
 	}
 
-	fieldset > table td input[type="radio"] {
+	fieldset>table td input[type="radio"] {
 		margin-top: 1.5rem;
 	}
-}
+}
\ No newline at end of file

From 2b0b02ecb7ddbd010dd0518a348643f40f2b3f60 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 11:05:52 -0400
Subject: [PATCH 12/16] Remove uneeded in-line styling and tag attributes

---
 templates/content-correspondents.tpl.html | 2 +-
 templates/page.tpl.html                   | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/templates/content-correspondents.tpl.html b/templates/content-correspondents.tpl.html
index 21badfe..fd68237 100644
--- a/templates/content-correspondents.tpl.html
+++ b/templates/content-correspondents.tpl.html
@@ -18,7 +18,7 @@
 		on h.hostid = e.hostid
 		order by h.host'
 	) %-->
-	<tr height="80">
+	<tr>
 	<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>
 
 		<td><strong><!--% host.host %--></strong><br>
diff --git a/templates/page.tpl.html b/templates/page.tpl.html
index 47d72c7..8008f89 100644
--- a/templates/page.tpl.html
+++ b/templates/page.tpl.html
@@ -67,7 +67,7 @@
 </main>
 
 <footer id="footer_page">
-  <h1 class="thick_bar"><span style="padding-left: 1em;">More Information...</span></h1>
+  <h1 class="thick_bar">More Information...</h1>
   <div id="more_info">
     <nav class="column">
       <h2>Ancestry</h2>
@@ -133,7 +133,7 @@
       </ul>
     </nav>
   </div><!-- more_info -->
-  <h1 class="thick_bar"><span style="padding-left: 1em;">Copyright Information</span></h1>  
+  <h1 class="thick_bar">Copyright Information</h1>  
   <div id="copyright">
     <p>
     Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
@@ -141,7 +141,6 @@
     <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>
-    <hr />
   </div><!-- copyright -->
   <hr />
 </footer>

From 8f31864b835b6db768af1940eddf396752388981 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 11:06:41 -0400
Subject: [PATCH 13/16] Add id attribute to previous five weeks section

---
 templates/content-index.tpl.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/content-index.tpl.html b/templates/content-index.tpl.html
index 1c9b563..b40c545 100644
--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -69,7 +69,7 @@
 </article>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
-<article>
+<article id="previous_five_weeks">
     <header>
         <hr>
         <h1>Previous five weeks</h1>

From 84d868cf2574330754fa797cadd3a2f9d7527711 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sun, 13 Oct 2024 17:02:05 -0400
Subject: [PATCH 14/16] Add Download Options page

Implement template file and add download page to site.cfg
---
 site.cfg                            |  4 +++
 templates/content-download.tpl.html | 56 +++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 templates/content-download.tpl.html

diff --git a/site.cfg b/site.cfg
index 4a4e280..1421c0f 100644
--- a/site.cfg
+++ b/site.cfg
@@ -97,6 +97,10 @@ content: content-episode.tpl.html
 multipage: true
 filename: eps/hpr[id]/index.html
 
+[download]
+navigation: navigation-get-shows.tpl.html
+content: content-download.tpl.html
+
 [syndication]
 navigation: navigation-get-shows.tpl.html
 content: content-syndication.tpl.html
diff --git a/templates/content-download.tpl.html b/templates/content-download.tpl.html
new file mode 100644
index 0000000..88aff59
--- /dev/null
+++ b/templates/content-download.tpl.html
@@ -0,0 +1,56 @@
+<article>
+	<header>
+        <h1>Download Archive</h1>
+        <p>Please be aware that our Archive exceeds <strong>62Gb</strong> <em>(Ogg: 21Gb, Spx: 16Gb, mp3: 25Gb)</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 post you DVD's of the episodes anywhere in the world if bandwidth is an issue.</p>
+    </header>
+        <h2>Full Episode Guide</h2>
+        <p>
+        The <a href="./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 'https://www.hackerpublicradio.org/eps/hpr[0001-3657].ogg' -o "hpr#1.ogg"</span></li>
+          <li>spx:<br />
+          <span style="font-family:monospace;">curl 'https://www.hackerpublicradio.org/eps/hpr[0001-3657].spx' -o "hpr#1.spx"</span></li>
+          <li>mp3:<br />
+          <span style="font-family:monospace;">curl 'https://www.hackerpublicradio.org/eps/hpr[0001-3657].mp3' -o "hpr#1.mp3"</span></li>
+        </li>
+        </ul>
+        <h2>Full RSS feed, BitTorrent and Magnet links</h2>
+        <p>The full rss feed is updated daily and contains the complete show note with links to supporting articles. The torrent/magnet also contains this information and is a snaphot of the archive taken between 2007 and November 2013. </p>
+        <ul>
+          <li><span style="font-family:monospace;">ogg: <a href="hpr_total_ogg_rss.php">rss</a>, <a href="https://www.talkgeektome.us/torrents/HPR-Ogg-2007-Nov2013.torrent">torrent</a>, <a href="magnet:?xt=urn:btih:390C66903BBB2B6A067C438C70B2E90988AA8207&dn=HPR-Ogg-2007-Nov2013&tr=http%3A%2F%2Ftracker.info-underground.net%3A16880%2Fannounce">magnet</a></span></li>
+          <li><span style="font-family:monospace;">spx: <a href="hpr_total_spx_rss.php">rss</a>, <a href="https://www.talkgeektome.us/torrents/HPR-Mp3-2007-Nov2013.torrent">torrent</a>, <a href="magnet:?xt=urn:btih:E2573BEF0209B8C2E3C7908BAF220EC34D4A5B8E&dn=HPR-Speex-2007-Nov2013&tr=http%3A%2F%2Ftracker.info-underground.net%3A16880%2Fannounce">magnet</a></span></li>
+          <li><span style="font-family:monospace;">mp3: <a href="hpr_total_rss.php">rss</a>, <a href="https://www.talkgeektome.us/torrents/HPR-Mp3-2007-Nov2013.torrent">torrent</a>, <a href="magnet:?xt=urn:btih:6E9492AD78BCCA2B8D6A42C9C0BCAB0E6FA778F8&dn=HPR-Mp3-2007-Nov2013&tr=http%3A%2F%2Ftracker.info-underground.net%3A16880%2Fannounce">magnet</a></span></li>
+        </ul>
+        <h3>Direct download of the remaining shows</h3>
+        <p>
+        You can download the remaining episodes since the torrent was created directly from the command line using the following commands:
+        </p>
+        <ul>
+          <li>ogg:<br />
+          <span style="font-family:monospace;">curl 'https://www.hackerpublicradio.org/eps/hpr[1391-3657].ogg' -o "hpr#1.ogg"</span>
+          </li>
+        </li>
+        </ul>
+        <ul>
+          <li>spx:<br />
+          <span style="font-family:monospace;">curl 'https://www.hackerpublicradio.org/eps/hpr[1391-3657].spx' -o "hpr#1.spx"</span>
+          </li>
+        </li>
+        </ul>
+        <ul>
+          <li>mp3:<br />
+          <span style="font-family:monospace;">curl 'https://www.hackerpublicradio.org/eps/hpr[1391-3657].mp3' -o "hpr#1.mp3"</span>
+          </li>
+        </li>
+        </ul>
+      <footer>
+      <p>Big to DeepGeek and the team for providing the BitTorrent service.</p>
+      </footer>
+</article>

From b802a8a7b26978a6c2690028e5dee35b1f2a37d1 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sun, 13 Oct 2024 17:22:18 -0400
Subject: [PATCH 15/16] Add Contact page

Implement template file and add reference in site.cfg
---
 site.cfg                           |  4 ++++
 templates/content-contact.tpl.html | 21 +++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 templates/content-contact.tpl.html

diff --git a/site.cfg b/site.cfg
index 4a4e280..91f6691 100644
--- a/site.cfg
+++ b/site.cfg
@@ -124,6 +124,10 @@ media_baseurl: https://www.hackerpublicradio.org/eps/
 navigation: navigation-about.tpl.html
 content: content-mumble-howto.tpl.html
 
+[contact]
+navigation: navigation-about.tpl.html
+content: content-contact.tpl.html
+
 [comments_viewer]
 navigation: navigation-about.tpl.html
 content: content-comments_viewer.tpl.html
diff --git a/templates/content-contact.tpl.html b/templates/content-contact.tpl.html
new file mode 100644
index 0000000..aff0945
--- /dev/null
+++ b/templates/content-contact.tpl.html
@@ -0,0 +1,21 @@
+<article>
+    <header>
+        <h1>Contact</h1>
+    </header>
+    <p>We are always looking for more hosts...</p>
+    <ul>
+      <li>email: <strong>admin -at- hackerpublicradio org</strong><br />
+      <em>As an anti-spam measure you will get an error back but we do get your email.</em></li>
+      <li>Website: <a href="http://www.www.hackerpublicradio.org" target="_blank">www.www.hackerpublicradio.org</a></li>
+      <li>Mailist: <a href="http://www.hackerpublicradio.org/maillist" target="_blank">Maillist</a></li>
+      <li><a href="https://web.libera.chat/gamja/?channels=oggcastplanet" target="_blank">#oggcastplanet</a></li>
+      <li><a href="https://www.facebook.com/home.php?sk=group_130169220378872¬if_t=group_r2j" target="_blank">Facebook</a></li>
+      <li><a href="https://www.linkedin.com/company/hackerpublicradio/" target="_blank">Linked-In</a></li>
+      <li><a href="http://itunes.apple.com/us/podcast/hacker-public-radio/id281699640" target="_blank">iTunes</a></li>
+    </ul>
+    <h2>Mail List</h2>
+    <p>
+    HPR is governed by the community, so decisions about how Hacker Public Radio should be run are made on the mailing list you can join it by going to :<br />
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.hackerpublicradio.org/maillist">http://www.hackerpublicradio.org/maillist</a>
+    </p>
+</article>

From e4e1813bc08c32eb70fd1ba5780395a15785c76e Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sun, 13 Oct 2024 17:25:34 -0400
Subject: [PATCH 16/16] Fix URL for hackerpublicradio.org

---
 templates/content-contact.tpl.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/content-contact.tpl.html b/templates/content-contact.tpl.html
index aff0945..6f90661 100644
--- a/templates/content-contact.tpl.html
+++ b/templates/content-contact.tpl.html
@@ -6,7 +6,7 @@
     <ul>
       <li>email: <strong>admin -at- hackerpublicradio org</strong><br />
       <em>As an anti-spam measure you will get an error back but we do get your email.</em></li>
-      <li>Website: <a href="http://www.www.hackerpublicradio.org" target="_blank">www.www.hackerpublicradio.org</a></li>
+      <li>Website: <a href="http://www.hackerpublicradio.org" target="_blank">www.hackerpublicradio.org</a></li>
       <li>Mailist: <a href="http://www.hackerpublicradio.org/maillist" target="_blank">Maillist</a></li>
       <li><a href="https://web.libera.chat/gamja/?channels=oggcastplanet" target="_blank">#oggcastplanet</a></li>
       <li><a href="https://www.facebook.com/home.php?sk=group_130169220378872¬if_t=group_r2j" target="_blank">Facebook</a></li>