Apply card formatting to hosts table

public_html/css/hpr.css

@@ -313,7 +313,8 @@ article > p,
 #latest_lane.lane {
 	justify-content: flex-between;
 }
-.lane > article {
+.lane > article,
+#hosts tr {
 	/* Add shadows to create the "card" effect */
 	border-top: thin solid var(--shadow-cards);
 	border-left: thin solid var(--shadow-cards);
@@ -326,7 +327,8 @@ article > p,
 	overflow-x: scroll;
 	padding-bottom: 1rem;
 }
-.lane > article:hover {
+.lane > article:hover,
+#hosts tr:hover {
 	box-shadow: 
       4px 8px 8px var(--shadow-cards),
       8px 16px 16px var(--shadow-cards);
@@ -552,6 +554,41 @@ fieldset > table td input[type="radio"] {
 #comments > article > .show-meta {
 	font-size: smaller;
 }
+#hosts tr {
+	gap: 0;
+	justify-content: flex-start;
+}
+#hosts td {
+	display: inline-block;
+}
+#hosts td:nth-child(-n+2) {
+	background: var(--background-secondary);
+	color: var(--background-primary);
+}
+#hosts td:nth-child(-n+2) a {
+	color: var(--link-secondary);
+}
+#hosts td:nth-child(-n+2) a:hover {
+	color: var(--link-secondary-hover);
+}
+#hosts td:nth-child(2) {
+	padding: 0.25rem 0 0 8px;
+	width: calc(100% - 90px);	
+}
+
+#hosts td:nth-last-child(-n+2) {
+	padding: 0.5rem 0 0 95px;
+}
+#hosts td:nth-last-child(2)::before {
+	content: ;
+	content: "License: ";
+}
+#hosts td:nth-last-child(1)::before {
+	content: "Last Show: ";
+}
+#hosts td > img {
+	border-radius: 0.25rem;
+}
 .series-description {
 	margin: 0;
 	padding: 0;
@@ -651,6 +688,15 @@ fieldset > table td input[type="radio"] {
 	#latest_lane.lane section > ul {
 		margin: 0.5rem 3rem 0 1rem;	
 	}
+	#hosts tbody.lane.stack {
+		flex-direction: row;
+		justify-content: space-between;
+		gap: 1rem
+	}
+	#hosts tr {
+		flex: 1 1 45%;
+		max-width: 45%;
+	}
 }
 @media (min-width: 900px) {
 	#podcast_lane > .lane,
@@ -661,4 +707,8 @@ fieldset > table td input[type="radio"] {
 	#latest_lane.lane section {
 		flex: 1;
 	}
+	#hosts tr {
+		flex: 1 1 30%;
+		max-width: 30%;
+	}
 }

templates/content-correspondents.tpl.html

@@ -1,15 +1,17 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS 'shared-avatar.tpl.html' %-->
-<article>
 	<h2 class="title">Correspondents</h2>
 	<p>For more information on how to become a Correspondent see our <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">contribute</a></center> page. To add a logo here, either email one to admin at hpr or setup your email on <a href="https://en.gravatar.com/">Gravatar</a>. To protect your browsing privacy we gather the images every hour and serve them directly from HPR.<p />
 <!--% USE DBI(constants.driver) %-->
 <!--% host_cnt = 0 %-->
-	<table class="hosts">
+	<table id="hosts" class="hosts lane stack">
-	<th >Avatar</th>
+	<tbody class="lane stack">
-	<th >Name &amp; Host ID</th>
+	<tr class="no-css">
-	<th >License</th>
+	<th>Avatar</th>
-	<th >Last Show</th>
+	<th>Name &amp; Host ID</th>
+	<th>License</th>
+	<th>Last Show</th>
+	</tr>
 	<!--% FOREACH host IN DBI.query(
 		'select h.hostid, h.host, h.license, e.date, 
 		h.local_image 
@@ -18,7 +20,7 @@
 		on h.hostid = e.hostid
 		order by h.host'
 	) %-->
-	<tr>
+	<tr class="lane">
 	<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>
 
 		<td><strong><!--% host.host %--></strong><br>
@@ -28,6 +30,6 @@
 		<td><!--% host.date %--></td>
 	</tr><!--% host_cnt = host_cnt + 1 %-->
 	<!--% END %-->
+	</tbody>
 	</table>
 	<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
-</article>