Cardify the correspondent pages

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

public_html/css/bebas/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2012 Patrick Wagesreiter (mail@patrickwagesreiter.at)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public_html/css/hpr.css

@@ -13,17 +13,22 @@ https://creativecommons.org/publicdomain/
  *	- CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
  *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
 */
-@font-face {
+
-  font-family: "GNUTypewriter";
-  src:
-    local("GNUTypewriter"),
-    url("/css/gnutypewriter/gtw.woff") format("woff");
-}
 @font-face {
   font-family: "BebasNeue";
   src:
-    local("BebasNeue"),
+    local("BEBAS NEUE"),
-    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 {
+  font-family: "PatrickHand";
+  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.ttf") format("truetype");
 }
 :root {
 	--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
@@ -38,14 +43,25 @@ 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);
+
+	--logo-font-family: var(--font-family-hpr);  
+	--logo-font-weight: bolder;
+	--logo-font-size: 7.5rem;
+	--logo-letter-spacing: -0.65rem;
+	--logo-line-height: 0.75;
+	--logo-margin: 0 0 0.25rem 0;
+
+	--tagline-font-family:"BebasNeue", sans-serif; 
+	--lane-button-font-family: "PatrickHand", var(--font-family-hpr); 
 	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;
 
 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
 
-	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
-	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
 
 	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
 	--shadow-secondary-color: hsl(0, 0%, 30.2%);
@@ -292,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;
@@ -368,28 +384,23 @@ a.lane-button {
 	justify-content: center;
 	margin: 0.5rem var(--link-spacing-horizontal);
 	padding: 0.5rem 0.25rem;
-	border-radius: 10px 25px 10px 25px;
+	border-width: 3.5px;
-	border-width: 4px;
 	border-color: var(--lane-button-border);
 	border-style: solid;
 	border-radius: 10px;
 	text-align: center;
-	image-rendering: pixelated;
 	background-image: url("../images/lane-button-background.png");
 
 }
 a.lane-button p {
-	font-family: 'Patrick Hand', cursive;
+	font-family: var(--lane-button-font-family);
 	text-transform: lowercase;
-	font-weight: bold;
+	font-size: 1.4em;
-	font-size: 1.2em;
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 20%;
 	mask-repeat: repeat;
+	mask-size: 10%;
 	background-clip: text;
-	color: black;
 	margin: -0.25rem;
-	transform: scaleY(1.1);
 	letter-spacing: 1px;
 	padding: 0.25rem;
 }
@@ -399,60 +410,46 @@ a.lane-button:hover {
       2px 4px 4px var(--link-primary-hover);
 }
 a.lane-button img {
-	height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
+	height: clamp(100px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
-	transform: scaleX(0.9);
+	transform: scaleX(0.9);		
-	mask-image: url("../images/charcoal.png");		
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 60%;
 	mask-repeat: repeat;
-	padding: 0.7rem;
+	mask-size: 70%;
+	padding: 0.5rem;
   box-sizing: border-box;
 }
 #podcast_lane a.lane-button:first-of-type img {
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
-	mask-size: 95%;
+	mask-repeat: repeat;
-	padding: 0px;
+	mask-size: 60%;
+	padding: 0.1rem;
 }
 #podcast_lane a.lane-button:first-of-type p {
-	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
+	font-size: 1.5rem;
-	font-size: 1.3em;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(1) {
 	border-radius: 20px 15px 25px 15px;
-	background-size: 400%;
-	background-position: 50% 0%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(2) {
 	border-radius: 20px 15px 25px 15px;
-	background-size: 200%;
-	background-position: 0% 50%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(3) {
 	border-radius: 10px 25px 15px 20px;
-	background-size: 400%;
-	background-position: 75% 0%;
 }
 section:nth-of-type(odd) .lane a:nth-of-type(4) {
 	border-radius: 15px 15px 10px 20px;
-	background-size: 200%;
-	background-position: 25% 0%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(1) {
 	border-radius: 25px 10px 15px 15px;	
 }
 section:nth-of-type(even) .lane a:nth-of-type(2) {
 	border-radius: 20px 10px 15px 10px;
-	background-size: 200%;
-	background-position: 50% 0%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(3) {
 	border-radius: 10px 20px 10px 15px;
-	background-size: 200%;
-	background-position: % 50%;
 }
 section:nth-of-type(even) .lane a:nth-of-type(4) {
 	border-radius: 15px 10px 25px 30px;
-	background-size: 800%;
-	background-position: 55% 50%;
 }
 #tag_line,
 #title {
@@ -481,10 +478,12 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
 	color: var(--link-primary-hover);
 }
 #title #site_acronym {
-	font-size: 7.5rem;
+	font-family: var(--logo-font-family);
-	letter-spacing: -0.65rem;
+	font-size: var(--logo-font-size);
-	line-height: 0.75;
+	font-weight: var(--logo-font-weight); 
-	margin-bottom: 0.25rem;
+	letter-spacing: var(--logo-letter-spacing);
+	line-height: var(--logo-line-height);
+	margin: var(--logo-margin);
 	color: transparent;
 }
 #title #site_acronym a {
@@ -501,13 +500,13 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
 #tag_line #tag1,
 #tag_line #tag2 {
 	text-transform: uppercase;
-	font-family: "BebasNeue", sans-serif;
+	font-family: var(--tagline-font-family);
 	font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size));
 	font-weight: var(--default-header-x-font-weight);
 	letter-spacing: 0.05rem;
 }
 #tag_line #tag1 {
-	font-size: clamp(2.1rem, calc(100vw - 360px + 2.1rem), 2.3rem);
+	font-size: clamp(2.1rem, calc(100vw - 360px + 1rem), 2.3rem);;
 }
 #tag_line #tag3 {
 	text-align: center;
@@ -575,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;
@@ -658,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;
@@ -766,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,
@@ -780,4 +804,4 @@ fieldset > table td input[type="radio"] {
 		flex: 1 1 30%;
 		max-width: 30%;
 	}
-}
+}

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) %-->
+	<!--% results_hpr_show_count = DBI.prepare(query_hpr_show_count) %-->
-<!--% hpr_shows_to_count = results_hpr_show_count.execute(id); %-->
+	<!--% hpr_shows_to_count = results_hpr_show_count.execute(id); %-->
-<!--% hpr_shows = results_hpr_shows.execute(id); %-->
+	<!--% hpr_shows = results_hpr_shows.execute(id); %-->
-<!--% hpr_show_count = 0 %-->
+	<!--% hpr_show_count = 0 %-->
-<!--% FOREACH show IN hpr_shows_to_count %-->
+	<!--% FOREACH show IN hpr_shows_to_count %-->
-<!--% hpr_show_count = hpr_show_count +1; %-->
+	<!--% hpr_show_count = hpr_show_count +1; %-->
-<!--% END %-->
+	<!--% 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('
+		<!--% query_twat_shows = DBI.prepare('
-		SELECT
+			SELECT
-		eps.id,
+			eps.id,
-		CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
+			CASE eps.explicit WHEN 1 THEN \'Explicit\' ELSE \'Clean\' END AS explicit ,
-		eps.date, eps.license, eps.duration,
+			eps.date, eps.license, eps.duration,
-		eps.title, eps.summary, eps.tags,
+			eps.title, eps.summary, eps.tags,
-		eps.notes,
+			eps.notes,
-		hosts.local_image,
+			hosts.local_image,
-		hosts.hostid,
+			hosts.hostid,
-		hosts.host, hosts.email, hosts.profile,
+			hosts.host, hosts.email, hosts.profile,
-		miniseries.name AS series, miniseries.id AS seriesid
+			miniseries.name AS series, miniseries.id AS seriesid
-	FROM twat_eps AS eps
+			FROM twat_eps AS eps
-	INNER JOIN hosts ON eps.hostid = hosts.hostid
+			INNER JOIN hosts ON eps.hostid = hosts.hostid
-	INNER JOIN miniseries ON eps.series = miniseries.id
+			INNER JOIN miniseries ON eps.series = miniseries.id
-	WHERE hosts.hostid = ?
+			WHERE hosts.hostid = ?
-	ORDER BY eps.id DESC
+			ORDER BY eps.id DESC
-	')
+			')
-%-->
+			%-->
-<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
+			<!--% twat_shows_to_count = query_twat_show_count.execute(id); %-->
-<!--% twat_shows = query_twat_shows.execute(id); %-->
+			<!--% twat_shows = query_twat_shows.execute(id); %-->
-<!--% twat_show_count = 0 %-->
+			<!--% twat_show_count = 0 %-->
-<!--% FOREACH show IN twat_shows_to_count %-->
+			<!--% FOREACH show IN twat_shows_to_count %-->
-<!--% twat_show_count = twat_show_count +1; %-->
+			<!--% twat_show_count = twat_show_count +1; %-->
-<!--% END %-->
+			<!--% END %-->
 
-<!--% hosts = DBI.tie('hosts', 'hostid') %-->
+			<!--% hosts = DBI.tie('hosts', 'hostid') %-->
 
-	<article>
+			<!--% this_host = hosts.$id %-->
-		<!--% this_host = hosts.$id %-->
+			<h2 class="title">Correspondent</h2>
-		<h2 class="title">Correspondent</h2>
+			<div id="host" class="lane">
-		<h2><!--% this_host.host %--></h2>
+				<div id="host_id">
-		<p><!--% get_avatar(this_host.hostid, this_host.host) %--><br>
+					<h2><!--% this_host.host %--></h2>
-		<label>Host ID</label>: <!--% this_host.hostid %--><br><br>
+					<p><!--% get_avatar(this_host.hostid, this_host.host) %--><br>
-		<label>email:</label> <u><!--% this_host.email %--></u><br>
+					<label>Host ID</label>: <!--% this_host.hostid %--></p>
-		<label>profile:</label> <!--% this_host.profile %--><br><br>
+				</div>
-		<label>episodes:</label> <strong><!--% hpr_show_count + twat_show_count %--></strong>
+				<div id="host_meta">
-		</p>
+					<p><label>email:</label> <u><!--% this_host.email %--></u></p>
-	<!--% FOREACH hpr_show IN hpr_shows; %-->
+					<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') %-->
+					<!--% twat_show_summary(twat_show, 'hide_host') %-->
-    <p class="listen-in"><!--% display_listen_in(hpr_show.id) %--></p>
+					<p class="listen-in"><!--% display_listen_in(twat_show.id,"twat") %--></p>
-	<!--% END %-->
+				</article>
-	<!--% FOREACH twat_show IN twat_shows; %-->
+				<!--% END %-->
-
+			</div>
-		<!--% twat_show_summary(twat_show, 'hide_host') %-->
+			<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
-		<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>

templates/content-index.tpl.html

@@ -71,7 +71,7 @@
 	  <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="" height="110">
-			<p>Host</p>
+			<p>Hosts</p>
 	  </a>
 	  <br class="no-css">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">

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" />