Update main header and footer formatting

Move styles closer to new design displayed on hobbypublicradio.org.

public_html/css/hpr.css

@@ -13,14 +13,23 @@ https://creativecommons.org/publicdomain/
  *	- CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
  *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
 */
+@font-face {
+  font-family: "GNUTypewriter";
+  src:
+    local("GNUTypewriter"),
+    url("/css/gnutypewriter/gtw.woff") format("woff");
+}
 
 :root {
 	--background-primary: #dfdfdf;
 	--text-primary: #4d4d4d; /* HPR Grey */
+	--banner-text-primary: #000000;
 	--background-secondary: #4d4d4d;
 	--text-secondary: #dfdfdf;
 	--link-primary: #247ba0;
+	--link-primary-hover: #f8961e;
 	--link-secondary: #7fc5e2;
+	--link-secondary-hover: #f9c74f;
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
 
   /* screen breakpoints */
@@ -37,6 +46,7 @@ html {
 	margin: 0;
 	padding: 0;
 	display: flex;
+	flex-direction: column;
 }
 body {
 	display: flex;
@@ -58,6 +68,9 @@ body > nav {
 body > nav a {
 	color: var(--link-secondary);
 }
+body > nav a:hover {
+	color: var(--link-secondary-hover);
+}
 body > nav ul {
 	background-color: inherit;
 	color: inherit;
@@ -80,6 +93,7 @@ body > header {
 	justify-content: space-between;
 	padding: 0.25rem;
 	background-image: url("/images/main-header-background.png");
+	color: var(--banner-text-primary);
 }
 body > header > * {
 	margin: 0;
@@ -93,6 +107,7 @@ body > footer {
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
 	padding: 0.25rem;
+	text-align: center
 }
 body > footer hr:first-child {
 	display: none;
@@ -172,6 +187,7 @@ a {
 
 a:hover {
 	cursor: pointer;
+	color: var(--link-primary-hover);
 }
 
 hr {
@@ -200,9 +216,10 @@ p.meta span label {
 	font-weight: bold;
 }
 
-div.lane {
+.lane {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
 
 }
 a.lane-button {
@@ -218,9 +235,30 @@ a.lane-button {
 
 }
 
+#tag_line,
+#title {
+	text-transform: uppercase;
+}
+#tag_line *,
+#title * {
+	margin: 0;
+	padding: 0;
+}
+#title h1 {
+	font-size: 7.5rem;
+	letter-spacing: -0.65rem;
+	line-height: 0.75;
+}
+#tag_line h3 {
+	text-transform: capitalize;
+}
+#site_url {
+	font-family: "GNUTypewriter", monospace;
+	text-transform: none;
+}
 @media (min-width: 900px) {
-	body { 
-		background-color: white; 
+	#qr_code {
+		text-align: center;
 	}
 	#qr_code > img {
 		max-height: 195px;

templates/content-index.tpl.html

@@ -80,7 +80,7 @@
 	  </a>
 	</div>
   </section>
-  <section id="latest_lane">
+  <section id="latest_lane" class="lane">
   <!--% PROCESS 'shared-episode-summary.tpl.html' %-->
   <section id="latest_shows">
 	<header>Latest Shows</header>