Cardify the correspondent pages

Move DuckDuckGo to top of list and make forms equal size
for all window sizes.

public_html/css/hpr.css

@@ -18,8 +18,8 @@ https://creativecommons.org/publicdomain/
   font-family: "BebasNeue";
   src:
     local("BEBAS NEUE"),
-    url("/css/bebas/BebasNeue.woff2") format("woff2");
-    url("/css/bebas/BebasNeue.woff") format("woff");
+    url("/css/bebas/BebasNeue.woff2") format("woff2"),
+    url("/css/bebas/BebasNeue.woff") format("woff"),
     url("/css/bebas/BebasNeue.otf") format("opentype");
 }
 @font-face {
@@ -27,7 +27,7 @@ https://creativecommons.org/publicdomain/
   src:
     local("Patrick Hand"),
 	url("/css/patrickhand/PatrickHand-Regular.woff2") format("woff2"),
-    url("/css/patrickhand/PatrickHand-Regular.woff") format("woff");
+    url("/css/patrickhand/PatrickHand-Regular.woff") format("woff"),
 	url("/css/patrickhand/PatrickHand-Regular.ttf") format("truetype");
 }
 :root {
@@ -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;
@@ -573,7 +574,7 @@ fieldset > table td input[type="radio"] {
 	margin-bottom: 0.5rem;
 }
 #search form {
-	flex: 1 1 auto
+	flex: 1 1 100%;
 }
 #search fieldset {
 	padding-top: 1rem;
@@ -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,

templates/content-correspondent.tpl.html

@@ -46,25 +46,33 @@
 
 			<!--% hosts = DBI.tie('hosts', 'hostid') %-->
 
-	<article>
 			<!--% 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 %--><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>
+					<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>
 
 					<!--% twat_show_summary(twat_show, 'hide_host') %-->
 					<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
-    <!--% END %-->
 				</article>
+				<!--% END %-->
+			</div>
 			<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>

templates/content-search.tpl.html

@@ -3,16 +3,6 @@
 		<h1>Search HPR.</h1>
 	</header>
 	<div class="lane">
-		<form name="google-search" method="get" action="https://www.google.com/search">
-			<fieldset><legend>Google</legend>
-				<input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
-				<input name="q" type="text" placeholder="Search HPR with Google"/>
-				<input type="submit" name="sa" value="Search HPR with Google" />
-				<p>
-				<a href="https://www.google.com/policies/privacy/">privacy policy</a>
-				</p>
-			</fieldset>
-		</form>
 		<form method="get" id="search" action="https://duckduckgo.com/">
 			<fieldset><legend>DuckDuckGo</legend>
 			<input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
@@ -26,6 +16,16 @@
 			</p>
 			</fieldset>
 		</form>
+		<form name="google-search" method="get" action="https://www.google.com/search">
+			<fieldset><legend>Google</legend>
+				<input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
+				<input name="q" type="text" placeholder="Search HPR with Google"/>
+				<input type="submit" name="sa" value="Search HPR with Google" />
+				<p>
+				<a href="https://www.google.com/policies/privacy/">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
 		<form method="get" action="https://www.bing.com/search">
 			<fieldset><legend>Bing</legend>
 				<input type="hidden" name="cp" value="utf-8" />