From 181c9fbad955517e3f7a004d87d5c99ceaa57df4 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Fri, 5 Sep 2025 23:08:10 -0400
Subject: [PATCH] Cardify the correspondent pages

---
 public_html/css/hpr.css                  |  28 +++++-
 templates/content-correspondent.tpl.html | 120 ++++++++++++-----------
 2 files changed, 91 insertions(+), 57 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index f1a69bc..8a75302 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -43,6 +43,7 @@ https://creativecommons.org/publicdomain/
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
 	--link-title-color: #00003e;
+	--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);
@@ -307,7 +308,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;
@@ -656,6 +657,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;
@@ -764,6 +787,9 @@ fieldset > table td input[type="radio"] {
 		flex: 1 1 45%;
 		max-width: 45%;
 	}
+	#host {
+		gap: 1rem;
+	}
 }
 @media (min-width: 900px) {
 	#podcast_lane > .lane,
diff --git a/templates/content-correspondent.tpl.html b/templates/content-correspondent.tpl.html
index e534255..7f9edbc 100644
--- a/templates/content-correspondent.tpl.html
+++ b/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) %-->
-<!--% hpr_shows_to_count = results_hpr_show_count.execute(id); %-->
-<!--% hpr_shows = results_hpr_shows.execute(id); %-->
-<!--% hpr_show_count = 0 %-->
-<!--% FOREACH show IN hpr_shows_to_count %-->
-<!--% hpr_show_count = hpr_show_count +1; %-->
-<!--% END %-->
+	%-->
+	<!--% results_hpr_show_count = DBI.prepare(query_hpr_show_count) %-->
+	<!--% hpr_shows_to_count = results_hpr_show_count.execute(id); %-->
+	<!--% hpr_shows = results_hpr_shows.execute(id); %-->
+	<!--% hpr_show_count = 0 %-->
+	<!--% FOREACH show IN hpr_shows_to_count %-->
+	<!--% hpr_show_count = hpr_show_count +1; %-->
+	<!--% 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('
-		SELECT
-		eps.id,
-		CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
-		eps.date, eps.license, eps.duration,
-		eps.title, eps.summary, eps.tags,
-		eps.notes,
-		hosts.local_image,
-		hosts.hostid,
-		hosts.host, hosts.email, hosts.profile,
-		miniseries.name AS series, miniseries.id AS seriesid
-	FROM twat_eps AS eps
-	INNER JOIN hosts ON eps.hostid = hosts.hostid
-	INNER JOIN miniseries ON eps.series = miniseries.id
-	WHERE hosts.hostid = ?
-	ORDER BY eps.id DESC
-	')
-%-->
-<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
-<!--% twat_shows = query_twat_shows.execute(id); %-->
-<!--% twat_show_count = 0 %-->
-<!--% FOREACH show IN twat_shows_to_count %-->
-<!--% twat_show_count = twat_show_count +1; %-->
-<!--% END %-->
+		%-->
+		<!--% query_twat_shows = DBI.prepare('
+			SELECT
+			eps.id,
+			CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
+			eps.date, eps.license, eps.duration,
+			eps.title, eps.summary, eps.tags,
+			eps.notes,
+			hosts.local_image,
+			hosts.hostid,
+			hosts.host, hosts.email, hosts.profile,
+			miniseries.name AS series, miniseries.id AS seriesid
+			FROM twat_eps AS eps
+			INNER JOIN hosts ON eps.hostid = hosts.hostid
+			INNER JOIN miniseries ON eps.series = miniseries.id
+			WHERE hosts.hostid = ?
+			ORDER BY eps.id DESC
+			')
+			%-->
+			<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
+			<!--% twat_shows = query_twat_shows.execute(id); %-->
+			<!--% twat_show_count = 0 %-->
+			<!--% FOREACH show IN twat_shows_to_count %-->
+			<!--% twat_show_count = twat_show_count +1; %-->
+			<!--% END %-->
 
-<!--% hosts = DBI.tie('hosts', 'hostid') %-->
+			<!--% hosts = DBI.tie('hosts', 'hostid') %-->
 
-	<article>
-		<!--% this_host = hosts.$id %-->
-		<h2 class="title">Correspondent</h2>
-		<h2><!--% this_host.host %--></h2>
-		<p><!--% get_avatar(this_host.hostid, this_host.host) %--><br>
-		<label>Host ID</label>: <!--% this_host.hostid %--><br><br>
-		<label>email:</label> <u><!--% this_host.email %--></u><br>
-		<label>profile:</label> <!--% this_host.profile %--><br><br>
-		<label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong>
-		</p>
-	<!--% FOREACH hpr_show IN hpr_shows; %-->
+			<!--% this_host = hosts.$id %-->
+			<h2 class="title">Correspondent</h2>
+			<div id="host" class="lane">
+				<div id="host_id">
+					<h2><!--% this_host.host %--></h2>
+					<p><!--% get_avatar(this_host.hostid, this_host.host) %--><br>
+					<label>Host ID</label>: <!--% this_host.hostid %--></p>
+				</div>
+				<div id="host_meta">
+					<p><label>email:</label> <u><!--% this_host.email %--></u></p>
+					<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') %-->
-    <p class="listen-in"><!--% display_listen_in(hpr_show.id) %--></p>
-	<!--% END %-->
-	<!--% FOREACH twat_show IN twat_shows; %-->
-
-		<!--% twat_show_summary(twat_show, 'hide_host') %-->
-		<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>
+					<!--% twat_show_summary(twat_show, 'hide_host') %-->
+					<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
+				</article>
+				<!--% END %-->
+			</div>
+			<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>