Make episode navigation links more button like

Reviewed-on: #287

NEWSITE_CONTRIBUTERS.md

@@ -0,0 +1,17 @@
+# Basic Concept, Design and Guiding Light
+
+* Ken Fallon
+
+# Implementaion and Design Touches
+
+* Lee Hanken
+* Roan Horning
+
+# Constructive Feedback and Forward Looks
+
+* Archer72 (Mark Rice)
+* Dave Morris
+* kwoot
+
+Thanks to all the contributers who helped give HPR 
+its 2025 facelift!

README.md

@@ -68,5 +68,5 @@ and add the label "**Feature Request**".
 * Ken Fallon
 * norrist
 * Paul Jewell
-
+* Lee Hanken
 

public_html/css/bebas/OFL.txt

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

public_html/css/hpr.css

@@ -10,20 +10,29 @@ https://creativecommons.org/publicdomain/
  *		-- 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
+ *	- CSS-Tricks: Linearly Scale font-size with CSS c
+ *	#welcome > p {
+ *	font-size: 1.25rem;
+ *	font-weight: 450;
+ *	}lamp() Based on the Viewport
  *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
 */
-@font-face {
+
-  font-family: "GNUTypewriter";
-  src:
-    local("GNUTypewriter"),
-    url("/css/gnutypewriter/gtw.woff") format("woff");
-}
 @font-face {
   font-family: "BebasNeue";
   src:
-    local("BebasNeue"),
+    local("BEBAS NEUE"),
-    url("/css/bebas/BebasNeue.woff") format("woff");
+    url("/css/bebas/BebasNeue.woff2") format("woff2"),
+    url("/css/bebas/BebasNeue.woff") format("woff"),
+    url("/css/bebas/BebasNeue.otf") format("opentype");
+}
+@font-face {
+  font-family: "PatrickHand";
+  src:
+    local("Patrick Hand"),
+	url("/css/patrickhand/PatrickHand-Regular.woff2") format("woff2"),
+    url("/css/patrickhand/PatrickHand-Regular.woff") format("woff"),
+	url("/css/patrickhand/PatrickHand-Regular.ttf") format("truetype");
 }
 :root {
 	--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
@@ -38,14 +47,27 @@ https://creativecommons.org/publicdomain/
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
 	--link-title-color: #00003e;
+	--link-navigation-hover: #030303;
+	--primary-content-line-height: 1.45;
 
+	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
+	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
+	--font-size-emphasis: clamp(1.1rem, 15px + 0.3vw, 1.25rem);
+
+	--logo-font-family: var(--font-family-hpr);  
+	--logo-font-weight: bolder;
+	--logo-font-size: 7.5rem;
+	--logo-letter-spacing: -0.65rem;
+	--logo-line-height: 0.75;
+	--logo-margin: 0 0 0.25rem 0;
+
+	--tagline-font-family:"BebasNeue", sans-serif; 
+	--lane-button-font-family: "PatrickHand", var(--font-family-hpr); 
 	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;
 
 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
 
-	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
-	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
 
 	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
 	--shadow-secondary-color: hsl(0, 0%, 30.2%);
@@ -292,7 +314,7 @@ p.meta span label {
 article > p,
 #main_content > p,
 #main_content > section > p {
-	line-height: 1.45;
+	line-height: var(--primary-content-line-height);
 }
 .lane {
 	display: flex;
@@ -311,9 +333,13 @@ article > p,
 #podcast_lane > .lane,
 #project_lane > .lane,
 #latest_lane.lane {
-	justify-content: flex-between;
+	justify-content: space-around;
 }
 .lane > article,
+#welcome > p {
+	font-size: var(--font-size-emphasis);
+	font-weight: 450;
+}
 #hosts tr {
 	/* Add shadows to create the "card" effect */
 	border-top: thin solid var(--shadow-cards);
@@ -324,7 +350,7 @@ article > p,
       2px 4px 4px var(--shadow-cards);
 	transition: 0.3s;
 	flex: 1 0 100%;
-	overflow-x: scroll;
+	overflow: auto;
 	padding-bottom: 1rem;
 }
 .lane > article:hover,
@@ -338,7 +364,7 @@ article > p,
 	margin-right: 1rem;
 }
 .lane > article > header,
-.lane > article > h3 {
+.lane > article > h3:first-child {
 	background: var(--background-secondary);
 	padding: 1.5rem 1rem 1rem 1rem;
 	margin: 0;
@@ -346,12 +372,25 @@ article > p,
 	font-size: 1.45rem;
 	color: var(--background-primary);
 }
+.lane > article > header > .index-link {
+	float: right;
+}
+.lane.stack > article  {
+	border-radius: 0.5rem;
+	border: thin solid var(--background-secondary);
+	max-width: calc(100vw - 12px);
+}
+.lane.stack > article > header,
+.lane.stack > article > h3:first-child {
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+}
 .lane > article > header a,
-.lane > article > h3 a {
+.lane > article > h3:first-child a {
 	color: var(--link-secondary);
 }
 .lane > article > header a:hover,
-.lane > article > h3:hover {
+.lane > article > h3:first-child:hover {
 	color: var(--link-secondary-hover);
 }
 .lane.stack> * > header * {
@@ -368,28 +407,23 @@ a.lane-button {
 	justify-content: center;
 	margin: 0.5rem var(--link-spacing-horizontal);
 	padding: 0.5rem 0.25rem;
-	border-radius: 10px 25px 10px 25px;
+	border-width: 3.5px;
-	border-width: 4px;
 	border-color: var(--lane-button-border);
 	border-style: solid;
 	border-radius: 10px;
 	text-align: center;
-	image-rendering: pixelated;
 	background-image: url("../images/lane-button-background.png");
 
 }
 a.lane-button p {
-	font-family: 'Patrick Hand', cursive;
+	font-family: var(--lane-button-font-family);
 	text-transform: lowercase;
-	font-weight: bold;
+	font-size: 1.4em;
-	font-size: 1.2em;
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 20%;
 	mask-repeat: repeat;
+	mask-size: 10%;
 	background-clip: text;
-	color: black;
 	margin: -0.25rem;
-	transform: scaleY(1.1);
 	letter-spacing: 1px;
 	padding: 0.25rem;
 }
@@ -399,60 +433,46 @@ a.lane-button:hover {
       2px 4px 4px var(--link-primary-hover);
 }
 a.lane-button img {
-	height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
+	height: clamp(100px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
-	transform: scaleX(0.9);
+	transform: scaleX(0.9);		
-	mask-image: url("../images/charcoal.png");		
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 60%;
 	mask-repeat: repeat;
-	padding: 0.7rem;
+	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.35), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 95%;
+	mask-repeat: repeat;
-	padding: 0px;
+	mask-size: 60%;
+	padding: 0.1rem;
 }
 #podcast_lane a.lane-button:first-of-type p {
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	font-size: 1.5rem;
-	font-size: 1.3em;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(1) {
 	border-radius: 20px 15px 25px 15px;
-	background-size: 400%;
-	background-position: 50% 0%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(2) {
 	border-radius: 20px 15px 25px 15px;
-	background-size: 200%;
-	background-position: 0% 50%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(3) {
 	border-radius: 10px 25px 15px 20px;
-	background-size: 400%;
-	background-position: 75% 0%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(4) {
 	border-radius: 15px 15px 10px 20px;
-	background-size: 200%;
-	background-position: 25% 0%;
 }
 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;
-	background-size: 200%;
-	background-position: 50% 0%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(3) {
 	border-radius: 10px 20px 10px 15px;
-	background-size: 200%;
-	background-position: % 50%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(4) {
 	border-radius: 15px 10px 25px 30px;
-	background-size: 800%;
-	background-position: 55% 50%;
 }
 #tag_line,
 #title {
@@ -481,10 +501,12 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
 	color: var(--link-primary-hover);
 }
 #title #site_acronym {
-	font-size: 7.5rem;
+	font-family: var(--logo-font-family);
-	letter-spacing: -0.65rem;
+	font-size: var(--logo-font-size);
-	line-height: 0.75;
+	font-weight: var(--logo-font-weight); 
-	margin-bottom: 0.25rem;
+	letter-spacing: var(--logo-letter-spacing);
+	line-height: var(--logo-line-height);
+	margin: var(--logo-margin);
 	color: transparent;
 }
 #title #site_acronym a {
@@ -501,13 +523,13 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
 #tag_line #tag1,
 #tag_line #tag2 {
 	text-transform: uppercase;
-	font-family: "BebasNeue", sans-serif;
+	font-family: var(--tagline-font-family);
 	font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size));
 	font-weight: var(--default-header-x-font-weight);
 	letter-spacing: 0.05rem;
 }
 #tag_line #tag1 {
-	font-size: clamp(2.1rem, calc(100vw - 360px + 2.1rem), 2.3rem);
+	font-size: clamp(2.1rem, calc(100vw - 360px + 1rem), 2.3rem);;
 }
 #tag_line #tag3 {
 	text-align: center;
@@ -534,48 +556,68 @@ fieldset > table td select {
 	display: block;
 	font-size: 1rem;
 }
-
 fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-fieldset > input,
+input {
-fieldset > table td input,
-fieldset > table td textarea {
-	width: calc(100vw + -16vw + -1.5rem);
-	max-width: 100%;
 	border: thin solid var(--input-border-primary);
 	border-radius: 0.2rem;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
-
+input[type="submit"] {
-fieldset > table td select {
+	background-color: var(--background-secondary);
-	appearance: none;
+	color: var(--text-secondary);
+	font-weight: 400;
+	width: fit-content;
+}
+input[type="submit"]:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--background-primary);
+}
+select {
+	appearance: auto;
 	background: var(--background-primary);
 	color: var(--text-primary);
-	width: calc(100vw + -16vw + -0.40rem);
 	border: 1px solid var(--input-border-primary);
 	border-radius: 0.25rem;
 	cursor: pointer;
 	margin-bottom: 0.5rem;
 	padding: 0.5rem;
 }
-fieldset > table td select:focus{
+select:focus{
     background: var(--background-secondary);
 	color: var(--text-secondary);
-}
+}select:active {
-fieldset > table td select:active {
     background: var(--background-secondary);
 	color: var(--text-primary);
 }
+fieldset > input,
+fieldset > table td input,
+fieldset > table td textarea {
+	width: calc(100vw + -16vw + -1.5rem);
+	max-width: 100%;
+}
+fieldset > table td select {
+	width: calc(100vw + -16vw + -0.40rem);
+}
 fieldset > table td input[type="radio"] {
 	display: initial;
 	width: initial;
 	margin-bottom: 0.5rem;
 }
+#youtube {
+	--video-ratio: calc(390 / 640);
+	width: min(calc(89vw + 0px), 640px);
+	height: min(calc(calc(89vw + 0px) * var(--video-ratio)), 390px);
+}
+#upload_method pre {
+	max-width: 80vw;
+	overflow-x: scroll;
+}
 #search form {
-	flex: 1 1 auto
+	flex: 1 1 100%;
 }
 #search fieldset {
 	padding-top: 1rem;
@@ -587,14 +629,8 @@ fieldset > table td input[type="radio"] {
 	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;
@@ -658,6 +694,28 @@ fieldset > table td input[type="radio"] {
 #hosts td > img {
 	border-radius: 0.25rem;
 }
+#host {
+	justify-content: flex-start;
+	align-items: end;
+	gap: 0;
+}
+#host_id img {
+	border-radius: 0.25rem;
+}
+#host_meta {
+	flex: 1;
+	padding: 0 0 0.75rem 0;
+}
+#host_meta > div,
+#host_meta > p {
+	margin: 0.25rem 0;
+	line-height: var(--primary-content-line-height);
+}
+#host_meta > div > p {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
 .series-description {
 	margin: 0;
 	padding: 0;
@@ -673,6 +731,50 @@ fieldset > table td input[type="radio"] {
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
+nav.episodes {
+	color: var(--background-primary);
+	font-size: 0.9em;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	max-width: 100vw;
+}
+nav.episodes span {
+	color: var(--text-primary);
+	display: inline-block;
+	text-align: center;
+	border: inset thin var(--text-primary);
+}
+nav.episodes span:nth-child(-n+2),
+nav.episodes span:nth-child(-n+2) a {
+	border-top-left-radius: 2rem;
+	border-bottom-left-radius: 2rem;
+}
+nav.episodes span:nth-child(n+3),
+nav.episodes span:nth-child(n+3) a {
+	border-top-right-radius: 2rem;
+	border-bottom-right-radius: 2rem;
+}
+nav.episodes span.no-link, 
+nav.episodes span a {
+	padding: 0.17em;
+	display: inline-block;
+	min-width: 4.4em;
+	min-height: 1.5em;
+}
+nav.episodes span a:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--link-navigation-hover);
+}
+nav.episodes span a img {
+	filter: none;
+}
+nav.episodes img {
+	margin: 0 0.2rem;
+	height: 0.85em;
+	max-width: 13px;
+	vertical-align: middle;
+}
 @media (min-width: 600px) {
 	body > header .bounding-box {
 		justify-content: space-between;
@@ -766,6 +868,12 @@ fieldset > table td input[type="radio"] {
 		flex: 1 1 45%;
 		max-width: 45%;
 	}
+	#host {
+		gap: 1rem;
+	}
+	nav.episodes {
+		display: inline-block;
+	}
 }
 @media (min-width: 900px) {
 	#podcast_lane > .lane,
@@ -780,4 +888,44 @@ fieldset > table td input[type="radio"] {
 		flex: 1 1 30%;
 		max-width: 30%;
 	}
-}
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+		--link-primary: #bbdfe7;
+		--link-header-hover: #b54c08; /* original --link-primary-hover */;
+		--link-primary-hover: var(--link-secondary-hover);
+		--background-primary: #4d4d4d; /* HPR Grey */
+		--text-primary: #dfdfdf /*#fffff7#fafafa#fbfbee #dfdfdf */;
+		--banner-text-primary: #b6b6b6; 
+		--shadow-secondary-color: hsl(0, 0%, 40%);
+		--input-border-primary: var(--shadow-secondary-color);
+		--lane-button-color: #d5e6ea;	
+	}
+	body > header {
+		background-image: url("/images/main-header-background-dark.png");
+		background-color: #22545a;
+	}	
+	img {
+		filter: brightness(0.70);
+	}
+	a.lane-button {
+		background-image: url("/images/lane-button-background-dark.png");
+		color: var(--lane-button-color);
+	}
+	a.lane-button img {
+		filter: none;
+	}
+	.lane > article > header {
+		color: var(--text-secondary);
+	}
+	#title a:hover {
+		color: var(--link-header-hover);
+	}
+	#hosts td:nth-child(-n+2) {
+		color: var(--text-primary);
+	}
+		nav.episodes span a:hover {
+		background-color: var(--link-primary-hover);
+		color: var(--link-navigation-hover);
+	}
+}

public_html/images/icons/arrow-first-plain.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 8.0716972 9.7589998"
+   version="1.1"
+   id="svg1106"
+   width="8.0716972"
+   height="9.7589998"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="layer1"
+     transform="translate(-92.715063,-46.059054)">
+    <g
+       id="g5606">
+      <path
+         id="arrow"
+         style="stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;"
+         d="m 99.346123,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+      <rect
+         style="stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:fill markers stroke"
+         id="bar"
+         width="1.5938228"
+         height="9.3528233"
+         x="92.918152"
+         y="46.262142"
+         rx="0"
+         ry="0.11228061" />
+    </g>
+  </g>
+</svg>

public_html/images/icons/arrow-last-plain.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 8.0039654 9.7589998"
+   version="1.1"
+   id="svg1106"
+   width="8.0039654"
+   height="9.7589998"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="layer1"
+     transform="translate(-92.782792,-46.059054)">
+    <g
+       id="g5606"
+       transform="matrix(-1,0,0,1,193.50182,0)">
+      <path
+         id="path9831"
+         style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 99.346123,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+      <rect
+         style="opacity:0.985023;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.406177;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+         id="rect3544"
+         width="1.5938228"
+         height="9.3528233"
+         x="92.918152"
+         y="46.262142"
+         rx="0"
+         ry="0.11228061" />
+    </g>
+  </g>
+</svg>

public_html/images/icons/arrow-next-plain.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 6.3102736 9.6969385"
+   version="1.1"
+   id="arrow_next"
+   width="6.3102736"
+   height="9.6969385"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="next"
+     transform="translate(-92.71506,-46.084171)">
+    <path
+       id="arrow"
+       style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 94.155697,55.549619 -1.209147,-1.2065 3.421063,-3.423708 -3.386663,-3.386667 1.21708,-1.217083 4.595813,4.595813 z" />
+  </g>
+</svg>

public_html/images/icons/arrow-previous-plain.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 6.3102736 9.6969385"
+   version="1.1"
+   id="arrow_first"
+   width="6.3102736"
+   height="9.6969385"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1103" />
+  <g
+     id="arrow"
+     transform="translate(-92.71506,-46.084171)">
+    <path
+       id="path9831"
+       style="color:#000000;fill:#000000;fill-opacity:0.984314;stroke:#000000;stroke-width:0.463;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 97.584696,55.549619 1.209147,-1.2065 -3.421063,-3.423708 3.386663,-3.386667 -1.21708,-1.217083 -4.595813,4.595813 z" />
+  </g>
+</svg>

templates/content-correspondent.tpl.html

@@ -4,67 +4,75 @@
 <!--% PROCESS "queries-correspondent.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
 <!--% results_hpr_shows = DBI.prepare(query_hpr_shows)
-%-->
+	%-->
-<!--% results_hpr_show_count = DBI.prepare(query_hpr_show_count) %-->
+	<!--% results_hpr_show_count = DBI.prepare(query_hpr_show_count) %-->
-<!--% hpr_shows_to_count = results_hpr_show_count.execute(id); %-->
+	<!--% hpr_shows_to_count = results_hpr_show_count.execute(id); %-->
-<!--% hpr_shows = results_hpr_shows.execute(id); %-->
+	<!--% hpr_shows = results_hpr_shows.execute(id); %-->
-<!--% hpr_show_count = 0 %-->
+	<!--% hpr_show_count = 0 %-->
-<!--% FOREACH show IN hpr_shows_to_count %-->
+	<!--% FOREACH show IN hpr_shows_to_count %-->
-<!--% hpr_show_count = hpr_show_count +1; %-->
+	<!--% hpr_show_count = hpr_show_count +1; %-->
-<!--% END %-->
+	<!--% END %-->
 
-<!--% query_twat_show_count = DBI.prepare('
+	<!--% query_twat_show_count = DBI.prepare('
 		SELECT id
 		FROM twat_eps AS eps
 		WHERE eps.hostid = ?
 		')
-%-->
+		%-->
-<!--% query_twat_shows = DBI.prepare('
+		<!--% query_twat_shows = DBI.prepare('
-		SELECT
+			SELECT
-		eps.id,
+			eps.id,
-		CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
+			CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
-		eps.date, eps.license, eps.duration,
+			eps.date, eps.license, eps.duration,
-		eps.title, eps.summary, eps.tags,
+			eps.title, eps.summary, eps.tags,
-		eps.notes,
+			eps.notes,
-		hosts.local_image,
+			hosts.local_image,
-		hosts.hostid,
+			hosts.hostid,
-		hosts.host, hosts.email, hosts.profile,
+			hosts.host, hosts.email, hosts.profile,
-		miniseries.name AS series, miniseries.id AS seriesid
+			miniseries.name AS series, miniseries.id AS seriesid
-	FROM twat_eps AS eps
+			FROM twat_eps AS eps
-	INNER JOIN hosts ON eps.hostid = hosts.hostid
+			INNER JOIN hosts ON eps.hostid = hosts.hostid
-	INNER JOIN miniseries ON eps.series = miniseries.id
+			INNER JOIN miniseries ON eps.series = miniseries.id
-	WHERE hosts.hostid = ?
+			WHERE hosts.hostid = ?
-	ORDER BY eps.id DESC
+			ORDER BY eps.id DESC
-	')
+			')
-%-->
+			%-->
-<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
+			<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
-<!--% twat_shows = query_twat_shows.execute(id); %-->
+			<!--% twat_shows = query_twat_shows.execute(id); %-->
-<!--% twat_show_count = 0 %-->
+			<!--% twat_show_count = 0 %-->
-<!--% FOREACH show IN twat_shows_to_count %-->
+			<!--% FOREACH show IN twat_shows_to_count %-->
-<!--% twat_show_count = twat_show_count +1; %-->
+			<!--% twat_show_count = twat_show_count +1; %-->
-<!--% END %-->
+			<!--% END %-->
 
-<!--% hosts = DBI.tie('hosts', 'hostid') %-->
+			<!--% hosts = DBI.tie('hosts', 'hostid') %-->
 
-	<article>
+			<!--% this_host = hosts.$id %-->
-		<!--% this_host = hosts.$id %-->
+			<h2 class="title">Correspondent</h2>
-		<h2 class="title">Correspondent</h2>
+			<div id="host" class="lane">
-		<h2><!--% this_host.host %--></h2>
+				<div id="host_id">
-		<p><!--% get_avatar(this_host.hostid, this_host.host) %--><br>
+					<h2><!--% this_host.host %--></h2>
-		<label>Host ID</label>: <!--% this_host.hostid %--><br><br>
+					<p><!--% get_avatar(this_host.hostid, this_host.host) %--><br>
-		<label>email:</label> <u><!--% this_host.email %--></u><br>
+					<label>Host ID</label>: <!--% this_host.hostid %--></p>
-		<label>profile:</label> <!--% this_host.profile %--><br><br>
+				</div>
-		<label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong>
+				<div id="host_meta">
-		</p>
+					<p><label>email:</label> <u><!--% this_host.email %--></u></p>
-	<!--% FOREACH hpr_show IN hpr_shows; %-->
+					<div><label>profile:</label> <!--% this_host.profile %--></div>
+					<p><label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong></p>
+				</div>
+			</div>
+			<div class="lane stack">
+				<!--% FOREACH hpr_show IN hpr_shows; %-->
+				<article>
+					<!--% show_summary(hpr_show, 'hide_host') %-->
+					<p class="listen-in"><!--% display_listen_in(hpr_show.id) %--></p>
+				</article>
+				<!--% END %-->
+				<!--% FOREACH twat_show IN twat_shows; %-->
+				<article>
 
-	<!--% show_summary(hpr_show, 'hide_host') %-->
+					<!--% twat_show_summary(twat_show, 'hide_host') %-->
-    <p class="listen-in"><!--% display_listen_in(hpr_show.id) %--></p>
+					<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
-	<!--% END %-->
+				</article>
-	<!--% FOREACH twat_show IN twat_shows; %-->
+				<!--% END %-->
-
+			</div>
-		<!--% twat_show_summary(twat_show, 'hide_host') %-->
+			<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
-		<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
-    <!--% END %-->
-	</article>
-	<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>

templates/content-episodes.tpl.html

@@ -4,7 +4,7 @@
         <p>
         All this information is available to the public. Scrape if you wish but if we can format the data for you then we're happy to help.
         </p>
-<div class="lane">
+<div class="lane stack">
 <!--% USE DBI(constants.driver) %-->
 <!--% FOREACH episodes IN DBI.query(query_episodes) 
 %-->
@@ -19,7 +19,7 @@
 		<!-- Creative Commons License -->
 		<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/"><img alt="Creative Commons License" border="0" src="https://creativecommons.org/images/public/somerights20.png" width="88" height="31" /></a><br>The following work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License</a>.</p>
 	<p>Today With a Techie Radio was brought to you by <a href="https://en.wikipedia.org/wiki/Infonomicon">The Infonomicon Computer Club</a></p>
-	<div class="lane">
+	<div class="lane stack">
 	<!--% FOREACH twat_episode IN DBI.query('
 	SELECT 
         eps.id, 
@@ -39,5 +39,6 @@
 	<!--% twat_show_summary(twat_episode) %-->
  </article>
 <!--% END %-->
+	</div>
 
 

templates/content-index.tpl.html

@@ -36,7 +36,6 @@
 
 	<!--% 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><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() %-->
@@ -50,7 +49,7 @@
 			<p>Record</p>
 	  </a>
 	  <br class="no-css">
-<a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
+	  <a class="lane-button" href="<!--% hub_baseurl %-->calendar.php">
 			<img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="" height="110">
 			<p>Schedule</p>
 	  </a>
@@ -71,7 +70,7 @@
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->correspondents/index.html">
 			<img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="" height="110">
-			<p>Host</p>
+			<p>Hosts</p>
 	  </a>
 	  <br class="no-css">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">

templates/content-search.tpl.html

@@ -3,16 +3,6 @@
 		<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/"/>
@@ -26,6 +16,16 @@
 			</p>
 			</fieldset>
 		</form>
+		<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" action="https://www.bing.com/search">
 			<fieldset><legend>Bing</legend>
 				<input type="hidden" name="cp" value="utf-8" />

templates/content-syndication.tpl.html

@@ -78,7 +78,7 @@
 <div>
 <hr class="no-css">
 <h1>Other Download Options</h1>
-<div class="lane syndication">
+<div class="lane stack">
 <article>
   <header>
     <h2>Site Replication Sources</h2>

templates/page.tpl.html

@@ -12,7 +12,7 @@
   <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." />
-  <link rel="shortcut icon" href="<!--% absolute_url(baseurl) %-->hpr.ico" >
+  <link rel="shortcut icon" href="/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" />
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio MP3 RSS" href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php" />

templates/rss-comments.tpl.xml

@@ -50,11 +50,11 @@
   %-->
 
   <item>
-    <title><!--% item.comment_author_name | html_strip | xml_entity %--> says: <!--% item.comment_title | html_strip | xml_entity %--></title>
+    <title><!--% item.comment_author_name | html_strip  %--> says: <!--% item.comment_title | html_strip  %--></title>
-    <author>feedback.nospam@nospam.hackerpublicradio.org (<!--% item.comment_author_name | html_strip | xml_entity %-->)</author>
+    <author>feedback.nospam@nospam.hackerpublicradio.org (<!--% item.comment_author_name | html_strip  %-->)</author>
     <link><!--% absolute_url(http_baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comments</link>
     <description><![CDATA[<strong>
-    RE: hpr<!--% zero_pad_left(item.eps_id) %-->::<!--% item.episode_date %--> <em><!--% item.episode_title | html_strip | xml_entity %--></em> by <a href="<!--% absolute_url(http_baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a></strong><!--% rss_show_series(item.series_name, item.series_id) | html_strip | xml_entity %--><br />
+    RE: hpr<!--% zero_pad_left(item.eps_id) %-->::<!--% item.episode_date %--> <em><!--% item.episode_title | html_strip  %--></em> by <a href="<!--% absolute_url(http_baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a></strong><!--% rss_show_series(item.series_name, item.series_id) | html_strip  %--><br />
 <!--% display_episode_duration(item.episode_duration) %--><!--% display_listen_in(item.eps_id) %--><br /><!--% item.comment_text FILTER html_line_break %-->
 ]]></description>
     <pubDate><!--% format_feed_date(item.comment_timestamp) %--></pubDate>

templates/shared-utils.tpl.html

@@ -117,16 +117,16 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<small><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first">&lt;&lt; First</a>,
+<nav class="episodes" aria-description="Navigation to other episodes"><span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first" aria-label="first episode"><img src="/images/icons/arrow-first-plain.svg" alt="<<">First</a></span>,
     <!--% IF links.previous %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous">&lt; Previous</a>,
+    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous" aria-label="previous episode"><img src="/images/icons/arrow-previous-plain.svg" alt="<">Previous</a></span>,
     <!--% ELSE %-->
-    <span>&lt;</span> Previous,
+    <span class="no-link"><img src="/images/icons/arrow-previous-plain.svg" alt="<">Previous</span>,
     <!--% END %-->
     <!--% IF links.next %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next &gt;</a>,
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next" aria-label="next episode">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></a></span>, 
     <!--% ELSE %-->
-    Next <span>&gt;</span>
+	<span class="no-link">Next<img src="/images/icons/arrow-next-plain.svg" alt=">"></span>, 
     <!--% END %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest &gt;&gt;</a></small>
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last" aria-label="latest episode">Latest<img src="/images/icons/arrow-last-plain.svg" alt=">>"></a></span></nav>
 <!--% END %-->