public_html/css/hpr.css

@@ -14,93 +14,19 @@ https://creativecommons.org/publicdomain/
  *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
 */
 
-:root {
-	--background-primary: #dfdfdf;
-	--text-primary: #4d4d4d; /* HPR Grey */
-	--background-secondary: #4d4d4d;
-	--text-secondary: #dfdfdf;
-	--link-primary: #247ba0;
-	--link-secondary: #7fc5e2;
-	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
-
-  /* screen breakpoints */
-	--for-phone-only: 599px;
-    --for-tablet-portrait-up: 600px;
-    --for-tablet-landscape-up: 900px;
-	--for-desktop-up: 1200px;
-    --for-big-desktop-up: 1800px; 
-
-
-}
-
 html {
 	margin: 0;
 	padding: 0;
-	display: flex;
+	display: block;
-}
-body {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	background-color: var(--background-primary);
-	color: var(--text-primary);
-	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
-	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem);
-	font-family: var(--font-family-hpr);
-	margin: 0;
-	padding: 0;
 }
 
-body > nav {
+body {
-	background-color: var(--background-secondary);
+	display: block;
-	color: var(--text-secondary);
+	background: #dfdfdf;
-}
+	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
-body > nav a {
+	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem);
-	color: var(--link-secondary);
-}
-body > nav ul {
-	background-color: inherit;
-	color: inherit;
-	margin: 0;
-	padding: 0.25rem;
-}
-body > nav ul li {
-	display: inline-block;
-	background-color: inherit;
-	color: inherit;
-	line-height: 1.5;
 	margin: 0;
 	padding: 0;
-	padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
-}
-body > header {
-	display: flex;
-	flex-direction: row;
-	flex-flow: wrap;
-	justify-content: space-between;
-	padding: 0.25rem;
-	background-image: url("/images/main-header-background.png");
-}
-body > header > * {
-	margin: 0;
-	padding: 0;
-	flex: 1 1 auto;
-}
-body > main {
-	padding: 0.25rem;
-}
-body > footer {
-	background-color: var(--background-secondary);
-	color: var(--text-secondary);
-	padding: 0.25rem;
-}
-body > footer hr:first-child {
-	display: none;
-	margin: 0;
-	padding: 0;
-}
-body > footer a {
-	color: var(--link-secondary);
 }
 
 div,
@@ -123,9 +49,9 @@ fieldset,
 input,
 textarea,
 blockquote {
-	font-family: 	inherit;
+	font-family: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */
-	color: inherit;
+	color: #4D4D4D; /* HPR Grey */
-	background: inherit;
+	background: white;
 }
 
 h1 {
@@ -134,8 +60,7 @@ h1 {
 }
 
 h2,
-article * h1,
+article * h1 {
-section > header:first-child {
 	font-size: 1.45rem;
 	margin: 1.25rem 0 0.75rem 0;
 }
@@ -167,7 +92,6 @@ li {
 
 a {
 	text-decoration: none;
-	color: var(--link-primary);
 }
 
 a:hover {
@@ -200,29 +124,395 @@ p.meta span label {
 	font-weight: bold;
 }
 
-div.lane {
+article>p,
-	display: flex;
+#maincontent>p {
-	flex-direction: row;
+	line-height: 1.45;
-
 }
-a.lane-button {
+
-	display: flex;
+article#previous_five_weeks>* {
-	flex-direction: column;
+	line-height: 1.35;
-	justify-content: center;
+	margin: 0;
-	margin: 0.5rem;
+	padding: 0;
+}
+
+article#previous_five_weeks>h3 {
+	margin: 1.5rem 0 0.5rem 0;
+}
+
+#container {
+	max-width: 58rem;
+	margin: 0.25rem;
+	padding: 0.75rem; /* fallback for browsers that don't support the clamp function) */
+	padding: clamp(0.75rem, -0.25rem + 3vw, 2.0rem);
+	overflow: hidden;
+	background: white;
+	border: thin solid #4D4D4D;
+}
+
+.shadow {
+	-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 {
+	background-color: #4D4D4D;
+	color: white;
 	padding: 0.5rem;
-	border-width: 5px;
+	margin: 1rem 0 1rem 0;
-	border-color: var(--link-primary);
+}
-	border-style: solid;
+
-	border-radius: 5px;
+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: inline-block; */
+	border: 0;
+	margin: 0 0 0rem 0;
+	padding: 0;
+}
+
+#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: smaller;
+}
+
+/* The main navigation menu */
+header>nav.menu {
+	display: block;
+	background-color: #4D4D4D; /* HPR Grey */
+	text-align: Left;
+	clear: both; /* Forces the menu to appear after the HPR Header block */
+	padding: 0;
+	margin: 0;
+}
+
+header>nav.menu ul {
+	margin: 0;
+	padding: 0.5rem;
+	background-color: inherit;
+	color: white;
+}
+
+header>nav.menu ul li {
+	display: inline-block;
+	background-color: inherit;
+	color: inherit;
+	line-height: 1.5;
+	margin: 0;
+	padding: 0;
+	padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
+}
+
+header>nav.menu ul li a {
+	color: white;
+	text-decoration: none;
+	display: block;
+	padding: 0.25rem 0;
+}
+
+header>nav.menu ul li a:hover {
+	border-bottom: thin solid white;
+	padding: 0.15rem 0;
+	-webkit-transition: 0.3s ease-in-out color;
+	-moz-transition: 0.3s ease-in-out color;
+	transition: 0.3s ease-in-out color;
+}
+
+header>nav.menu ul li a:visited {
+	color: #EDEDED;
+}
+
+a:active,
+header>nav.menu ul li a:active {
+	color: red;
+}
+
+pre {
+	/* Add background, border and scrollbar to <pre> */
+	background: #eee;
+	border: 1px solid #ddd;
+	overflow: auto;
+	clear: both;
+	padding: 0.5rem
+}
+
+code {
+	background: #eee;
+	border-radius: 0.2rem;
+	font-size: 0.95rem;
+}
+
+pre code {
+	padding-right: 0.5rem;
+	font-size: 0.85rem;
+	line-height: 1;
+}
+
+pre.comment {
+	white-space: pre-wrap;
+	line-height: 1.2rem;
+}
+
+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 (min-width: 900px) {
+table#t01,
-	body { 
+table.hosts {
+	display: block;
+	overflow-x: auto;
+}
+
+table#t01 tbody,
+table.hosts tbody {
+	display: table;
+}
+
+table#t01 tr:nth-child(even),
+table.hosts tr:nth-child(even) {
+	background-color: #cccccc;
+	border-bottom: thick solid white;
+}
+
+table#t01 tr:nth-child(odd),
+table.hosts tr:nth-child(odd) {
 	background-color: white;
+	border-bottom: thick solid white;
 }
-	#qr_code > img {
+
-		max-height: 195px;
+table.hosts tr td img {
+	vertical-align: middle;
+	max-height: 80px;
+}
+
+table.hosts th:first-child,
+table.hosts td:first-child {
+	min-width: 60px;
+	max-width: 80px;
+	text-align: left;
+	height: 62px;
+}
+
+table.hosts th:nth-child(2),
+table.hosts td:nth-child(2) {
+	text-align: left;
+	padding-left: clamp(0.15rem, -0.25rem + 3vw, 0.5rem);
+}
+
+table.hosts th:nth-child(3),
+table.hosts td:nth-child(3),
+table.hosts th:nth-child(4),
+table.hosts td:nth-child(4) {
+	width: 10%;
+	padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem);
+}
+
+body>div>footer {
+	margin-top: 2rem;
+}
+
+footer #more_info nav.column {
+	clear: both;
+	font-size: 0.9rem;
+	margin-left: 0.5rem;
+}
+
+footer #more_info nav.column ul li {
+	float: left;
+	margin-right: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+footer #more_info nav.column h2 {
+	font-size: 1.35rem;
+	margin-top: 0.5rem;
+}
+
+footer h1.thick_bar {
+	clear: left;
+	font-size: 1.15rem;
+}
+
+footer #copyright {
+	font-size: smaller;
+	margin-left: 0.5rem;
+	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;
+}
+
+@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;
+	}
+
+	table.hosts td:first-child {
+		height: 80px;
+	}
+
+	footer #more_info nav.column {
+		clear: none;
+		float: left;
+		width: 19.5%;
+		margin-left: 0;
+	}
+
+	footer #more_info nav.column:first-child {
+		margin-left: 0.5rem;
+	}
+
+	footer #more_info nav.column ul li {
+		float: none;
+		margin-bottom: 0.5rem;
+	}
+
+	fieldset>table,
+	fieldset>table thead,
+	fieldset>table tbody,
+	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;
 	}
 }

templates/content-index.tpl.html

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

templates/page.tpl.html

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