Update responsive layout for footer and latest lanes

Per Ken's PR comment:
HPR/hpr_generator#266 (comment)

public_html/css/hpr.css

@@ -26,16 +26,17 @@ https://creativecommons.org/publicdomain/
     url("/css/bebas/BebasNeue.woff") format("woff");
 }
 :root {
-	--background-primary: #dfdfdf;
+	--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
 	--text-primary: #4d4d4d; /* HPR Grey */
 	--banner-text-primary: #000000;
 	--background-secondary: #4d4d4d;
 	--text-secondary: #dfdfdf;
 	--link-primary: #004852 /*#154a60*/;
-	--link-primary-hover: #f8961e;
+	--link-primary-hover: #b54c08/*#f8961e*/;
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
 
+	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;
 
 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
@@ -130,15 +131,11 @@ body > footer {
 	flex: 0 1 auto;
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
-	padding: 0.25rem;
+	padding: clamp(0.25rem, calc(100vw - var(--for-tablet-portrait-up) + 0.5rem), 0.5rem);
+	margin-top: 0.5rem;
 	text-align: center;
 	line-height: 1.25;
 }
-body > footer hr:first-child {
-	display: none;
-	margin: 0;
-	padding: 0;
-}
 body > footer a {
 	color: var(--link-secondary);
 }
@@ -304,14 +301,19 @@ a.lane-button {
 	margin: 0.5rem var(--link-spacing-horizontal);
 	padding: 0.5rem;
 	border-width: 5px;
-	border-color: var(--link-primary);
+	border-color: var(--lane-button-border);
 	border-style: solid;
 	border-radius: 5px;
 	text-align: center;
 
 }
+a.lane-button:hover {
+	box-shadow: 
+      1px 2px 2px var(--link-primary-hover),
+      2px 4px 4px var(--link-primary-hover);
+}
 a.lane-button img {
-	height: 110px;
+	height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
 	filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);
 	transform: scaleX(0.9);
 }
@@ -497,9 +499,6 @@ fieldset > input {
 		max-height: 40vw;
 		overflow-y: scroll
 	}
-	.lane > article:nth-last-child(2),
-	.lane > article:last-child {
-	}
 	#latest_lane.lane section > ul {
 		margin: 0.5rem 3rem 0 1rem;	
 	}
@@ -509,4 +508,7 @@ fieldset > input {
 		flex-basis: 32%;
 		max-width: 32%;
 	}
-
+	#latest_lane.lane section {
+		flex: 1;
+	}
+}

templates/content-index.tpl.html

@@ -36,46 +36,51 @@
 
 	<!--% delta = date.calc.N_Delta_YMD(2005,9,19, date.format(date.now, '%Y'),date.format(date.now, '%m'),date.format(date.now, '%d')) %-->
 	<section id="welcome">
-		<header>Welcome</header>
-		<p>Hacker Public Radio is a podcast that releases shows every weekday Monday to Friday. The shows are contributed by the public and can be on any topic that is of interest to hackers, makers, hobbyists, etc.</p>
+		<header><h2>Welcome</h2></header>
+		<p>Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a welcoming community that offers positive feedback and encourages respectful debate.</p>
 		<div id="call_for_shows">
 			<!--% display_call_for_shows() %-->
 		</div>
   </section>
   <section id="podcast_lane">
-	  <header>Podcast</header>
+	  <header><h2>The Podcast</h2></header>
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html#recording_a_podcast">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="" height="110">
 		  Record
 	  </a>
-	  <a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="" height="110">
 		  Schedule
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/rss-fill.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/rss-fill.svg" alt="" height="110">
 		 Subscribe 
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/volume-up-fill.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/volume-up-fill.svg" alt="" height="110">
 		 Listen 
 	  </a>
 	</div>
   </section>
   <section id="project_lane">
-	  <header>Project</header>
+	  <header><h2>The Project</h2></header>
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->correspondents/index.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="" height="110">
 		 Host 
 	  </a>
+	  <br class="no-css">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/stack-fill.svg" alt="">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/stack-fill.svg" alt="" height="110">
 		 Series 
 	  </a>
-	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
-		  <img src="<!--% absolute_path(baseurl) %-->images/icons/question-mark.svg" alt="">
+	  <br class="no-css">
+<a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
+		  <img src="<!--% absolute_path(baseurl) %-->images/icons/question-mark.svg" alt="" height="110">
 		 About 
 	  </a>
 	</div>
@@ -83,18 +88,21 @@
   <section id="latest_lane" class="lane">
   <!--% PROCESS 'shared-episode-summary.tpl.html' %-->
   <section id="latest_shows">
-	<header>Latest Shows</header>
+	<header><h2>Latest Shows</h2></header>
 <!--% host_cnt = 0 %-->
 	<ul>
 <!--% 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>
+		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a>
+		<ul><li>
+		<!--% latest_episodes.summary %-->
+        </li></ul>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
 	</ul>
   </section>
   <section id="latest_comments">
-	<header>Latest Comments</header>
+	<header><h2>Latest Comments</h2></header>
 	<ul>
 <!--% FOREACH item IN DBI.query('
 		WITH episode_comment_rank AS (

templates/page.tpl.html

@@ -66,7 +66,7 @@
 <!--% INCLUDE $content %-->
 </main>
 <footer role="contentinfo">
-  <hr>
+  <hr class="no-css">
   <div id="copyright">
 	  <span>Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
     Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> license.</span>