From 38d81ceddaddedbc3e8bf95eb32b67a5167832fb Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Thu, 24 Jul 2025 22:18:56 -0400
Subject: [PATCH] Intial card layout design

Format episodes, series, syndication pages with card format.
---
 public_html/css/hpr.css                | 44 +++++++++++++++++++++++---
 templates/content-episodes.tpl.html    | 15 +++++----
 templates/content-series.tpl.html      | 24 +++++++-------
 templates/content-syndication.tpl.html | 11 +++----
 4 files changed, 65 insertions(+), 29 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index cc489ba..166417e 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -249,9 +249,35 @@ article > p,
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: 0.5rem;
+	gap: 1.0rem;
+	justify-content: space-between;
+	justify-items: space-between;
 
 }
+#podcast_lane > .lane,
+#project_lane > .lane,
+#latest_lane.lane {
+	justify-content: flex-start;
+}
+.lane > article {
+	padding: 1.0rem;
+	/* Add shadows to create the "card" effect */
+	border-top: thin solid hsl(190deg 48% 49% / 0.2);
+	border-left: thin solid hsl(190deg 48% 49% / 0.2);
+	border-radius: 0.5rem;
+	box-shadow:
+      1px 2px 2px hsl(190deg 48% 49% / 0.2),
+      2px 4px 4px hsl(190deg 48% 49% / 0.2);
+	transition: 0.3s;
+	width: max-content;
+	flex: 1 0 50%;
+	overflow-y: scroll;
+}
+.lane > article:hover {
+	box-shadow: 
+      4px 8px 8px hsl(190deg 48% 49% / 0.2),
+      8px 16px 16px hsl(190deg 48% 49% / 0.2);
+}
 a.lane-button {
 	display: flex;
 	flex-direction: column;
@@ -369,7 +395,10 @@ fieldset > input {
 	border: thin solid var(--input-border-primary);
 	border-radius: 0.2rem;
 }
-@media (min-width: 900px) {
+.no-css {
+	display: none;
+}
+@media (min-width: 600px) {
 	body > header {
 		background-size: 200pt, cover;
 		background-position: left 128pt top -12pt, left top;
@@ -395,9 +424,7 @@ fieldset > input {
 	}
 	#qr_code {
 		text-align: center;
-	}
-	#qr_code > img {
-		max-height: 195px;
+		max-width: 195px;
 	}
 	fieldset>table,
 	fieldset>table thead,
@@ -446,4 +473,11 @@ fieldset > input {
 	body > main {
 		padding: 0.25rem 2rem;
 	}
+	.lane > article {
+		flex-basis: 30%;
+	/*	max-width: 30%; */ 
+	}
+	#latest_lane.lane section > ul {
+		margin: 0.5rem 3rem 0 1rem;	
+	}
 }
diff --git a/templates/content-episodes.tpl.html b/templates/content-episodes.tpl.html
index 45eda53..b074c6c 100644
--- a/templates/content-episodes.tpl.html
+++ b/templates/content-episodes.tpl.html
@@ -1,24 +1,26 @@
  <!--% PROCESS 'shared-episode-summary.tpl.html' %-->
  <!--% PROCESS "queries-episodes.tpl.html" %-->
-<article>
-    <header>
-        <h1>Complete Archive of Shows.</h1>
+	<h1>Complete Archive of Shows.</h1>
         <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>
-    </header>
+<div class="lane">
 <!--% USE DBI(constants.driver) %-->
 <!--% FOREACH episodes IN DBI.query(query_episodes) 
 %-->
+	<article>
 	<!--% show_summary(episodes) %-->
 	<p class="listen-in"><!--% display_listen_in(episodes.id) %--></p>
+	</article>
 <!--% END %-->
+</div>
 <h2 id="twt_episodes">Today With a Techie Archived Shows</h2>
 	<p>
 		<!-- 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>
-<!--% FOREACH twat_episode IN DBI.query('
+	<div class="lane">
+	<!--% FOREACH twat_episode IN DBI.query('
 	SELECT 
         eps.id, 
         eps.explicit, 
@@ -33,8 +35,9 @@
 	ORDER BY eps.id DESC
 	') 
 %-->
+	<article>
 	<!--% twat_show_summary(twat_episode) %-->
+ </article>
 <!--% END %-->
 
-</article>
 
diff --git a/templates/content-series.tpl.html b/templates/content-series.tpl.html
index 797ce9d..35303ca 100644
--- a/templates/content-series.tpl.html
+++ b/templates/content-series.tpl.html
@@ -1,17 +1,19 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS "queries-series.tpl.html" %-->
-  <article>
 <!--% USE DBI(constants.driver) %-->
 <h1 class="title">In-Depth Series</h1>
+<div class="lane">
 <!--% FOREACH series IN DBI.query(query_episodes) %-->
-	<h2><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></h2>
-<ul>
-	<li>Number of episodes: <!--% series.number_of_episodes %--></li>
-	<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
-	<li>Date of earliest show: <!--% series.earliest_show %--></li>
-	<li>Date of latest show: <!--% series.latest_show %--></li>
-	<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
-</ul>
-<em><!--% series.description %--></em>
-<!--% END %-->
+  <article>
+	<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
+	<ul>
+		<li>Number of episodes: <!--% series.number_of_episodes %--></li>
+		<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
+		<li>Date of earliest show: <!--% series.earliest_show %--></li>
+		<li>Date of latest show: <!--% series.latest_show %--></li>
+		<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
+	</ul>
+	<em><!--% series.description %--></em>
   </article>
+<!--% END %-->
+</div>
diff --git a/templates/content-syndication.tpl.html b/templates/content-syndication.tpl.html
index d07ea99..3beedb2 100644
--- a/templates/content-syndication.tpl.html
+++ b/templates/content-syndication.tpl.html
@@ -1,14 +1,10 @@
 <h1>RSS Syndication</h1>
-
-<article>
-  <header>
     <h2>Subscribe to our Feeds</h2>
-  </header>
   <p>
   Great that you want to listen. Have a look below at the feeds that best suite your listening habits.
   </p>
-</article>
-<article>
+  <div class="lane">
+  <article>
   <header>
     <h2><img src="<!--% absolute_path(baseurl) %-->images/feed.png" alt="rss logo"> The Community News Summary</h2>
     <h3>One show a month</h3>
@@ -77,7 +73,8 @@
     <li><a href="<!--% absolute_path(baseurl) %-->comments.rss">Listener contributed comments to the episodes</a></li>
   </ul>
 </article>
-<hr />
+<div>
+<hr class="no-css">
 <h1>Other Download Options</h1>
 <article>
   <header>