Update card flex layout and coloring

Use the secondary background color in the card header and shadows.

GETTING_STARTED.md

@@ -111,7 +111,7 @@ file are found in the comments within the file.
 
 Any database supported by the Perl:DBI and Perl::DBD modules can be used with 
 the site-generator program. Currently the hpr_generator project works with 
-a MySQL or SQLite database.
+an SQLite database.
 
 Find the [DBI] section of the file. It should look like the following
 
@@ -146,26 +146,6 @@ The hpr.db section of the driver option `dbi:SQLite:hpr.db` is the path
 to the sqlite file. The default assumes the hpr.db file is located in the same
 directory as the site-generator. 
 
-### MySQL
-
-Remove the comment character from the start of the database, driver, 
-user, and password option lines:
-
- ```
-# Configuration settings for MySQL
-database: mysql
-driver: dbi:mysql:database=hpr_hpr:hostname=localhost 
-user: hpr-generator
-password: *********
-```
-
-This assumes that the MySQL database service is available at the localhost 
-hostname, that the database name (hpr_hpr) is the database created from 
-the hpr.sql dump file or manually created by you, that the user (hpr-generator) 
-was added by you and has read rights to the hpr_hpr database, and that the 
-password (replace ********* with the actual password) matches the password set 
-for the hpr-generator database user.
-
 ## Configuring the website for viewing locally
 
 For HTML links to work when viewing the files on your local machine using the 

README.md

@@ -15,15 +15,6 @@ Static web page generator for the Hacker Public Radio website.
 		2.  Run `./utils/update-hpr.sh`
 	* SQLite v3.8.3 or greater is recommended. CTE WITH clauses are used in some template queries. Must convert WITH
 	  clauses to sub-queries when using earlier versions of SQLite.
-* With MySQL
-	* Create database hpr_hpr in the MySQL server from HPR dump file.
-		- ``sudo mysql --host=localhost < hpr.sql``
-	* Create a user that will be used by the site-generator.
-		- Suggested username: hpr-generator
-		- ``CREATE USER 'hpr-generator'@'localhost' IDENTIFIED BY '<password>';``
-	* Limit the user's privileges to EXECUTE and SELECT
-		- ``GRANT SELECT ON hpr_hpr.* TO 'hpr-generator'@'localhost';``
-		- ``GRANT EXECUTE ON `hpr_hpr`.* TO 'hpr-generator'@'localhost';``
 * Install the needed Perl modules using preferred method (distribution packages, CPAN, etc.)
     * Getopt::Long
     * Pod::Usage
@@ -35,7 +26,7 @@ Static web page generator for the Hacker Public Radio website.
     * Template::Plugin::HTML::Strip
     * DBI
     * Tie::DBI
-    * DBD::SQLite or DBD::mysql
+    * DBD::SQLite
     * Date::Calc
     * Text::CSV_XS
     * HTML::Entities
@@ -76,4 +67,6 @@ and add the label "**Feature Request**".
 * gordons
 * Ken Fallon
 * norrist
+* Paul Jewell
+
 

public_html/css/hpr.css

@@ -43,6 +43,9 @@ https://creativecommons.org/publicdomain/
 	--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%);
+	--shadow-cards: var(--shadow-secondary-color);
   /* screen breakpoints */
 	--for-phone-only: 599px;
     --for-tablet-portrait-up: 600px;
@@ -249,9 +252,51 @@ article > p,
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: 0.5rem;
+	gap: 1.0rem;
+	justify-content: space-around;
+	justify-items: space-around;
 
 }
+#podcast_lane > .lane,
+#project_lane > .lane,
+#latest_lane.lane {
+	justify-content: flex-start;
+}
+.lane > article {
+	/* Add shadows to create the "card" effect */
+	border-top: thin solid var(--shadow-cards);
+	border-left: thin solid var(--shadow-cards);
+	border-radius: 0.5rem;
+	box-shadow:
+      1px 2px 2px var(--shadow-cards),
+      2px 4px 4px var(--shadow-cards);
+	transition: 0.3s;
+	flex: 1 0 100%;
+	overflow-x: scroll;
+	padding-bottom: 1rem;
+}
+.lane > article:hover {
+	box-shadow: 
+      4px 8px 8px var(--shadow-cards),
+      8px 16px 16px var(--shadow-cards);
+}
+.lane > article > * {
+	margin-left: 1rem;
+	margin-right: 1rem;
+}
+.lane > article > header {
+	background: var(--background-secondary);
+	padding: 1.5rem 1rem 1rem 1rem;
+	margin: 0;
+	font-weight: bold;
+	font-size: 1.45rem;
+}
+.lane > article > header a {
+	color: var(--link-secondary);
+}
+.lane > article > header a:hover {
+	color: var(--link-secondary-hover);
+}
 a.lane-button {
 	display: flex;
 	flex-direction: column;
@@ -369,10 +414,14 @@ 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;
+		justify-content: space-between;
 	}
 	#tag_line {
 		text-align: center;
@@ -395,9 +444,7 @@ fieldset > input {
 	}
 	#qr_code {
 		text-align: center;
-	}
+		max-width: 195px;
-	#qr_code > img {
-		max-height: 195px;
 	}
 	fieldset>table,
 	fieldset>table thead,
@@ -446,4 +493,20 @@ fieldset > input {
 	body > main {
 		padding: 0.25rem 2rem;
 	}
+	.lane > article {
+		max-height: 40vw;
+		overflow-y: scroll
+	}
+	.lane > article:nth-last-child(2),
+	.lane > article:last-child {
+	}
+	#latest_lane.lane section > ul {
+		margin: 0.5rem 3rem 0 1rem;	
+	}
 }
+@media (min-width: 900px) {
+	.lane > article {
+		flex-basis: 32%;
+		max-width: 32%;
+	}
+

site-generator

@@ -56,19 +56,9 @@ Perl Template Toolkit.
         * SQLite v3.8.3 or greater is recommended. CTE WITH clauses are used in some template queries.
           Must convert WITH clauses to sub-queries when using earlier versions of SQLite.
 
-        With MySQL
-        * Create database hpr_hpr in the MySQL server from HPR dump file.
-                - sudo mysql --host=localhost < hpr.sql
-        * Create a user that will be used by the site-generator.
-                - Suggested username: hpr-generator
-                - CREATE USER 'hpr-generator'@'localhost' IDENTIFIED BY '<password>';
-        * Limit the user's privileges to EXECUTE and SELECT
-                - GRANT SELECT ON hpr_hpr.* TO 'hpr-generator'@'localhost';
-                - GRANT EXECUTE ON `hpr_hpr`.* TO 'hpr-generator'@'localhost';
-
         Install the needed Perl modules using preferred method (distribution packages, CPAN, etc.)
                 * Config::Std
-                * DBD::SQLite or DBD:mysql
+                * DBD::SQLite
                 * DBI
                 * Data::Dumper
                 * Date::Calc

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

templates/content-index.tpl.html

@@ -131,3 +131,4 @@
 <!--% END %-->
 	</ul>
   </section>
+  </section>

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>
+  <article>
-<ul>
+	<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>
+	</ul>
-<em><!--% series.description %--></em>
+	<em><!--% series.description %--></em>
-<!--% END %-->
   </article>
+<!--% END %-->
+</div>

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>
+  <div class="lane">
-<article>
+  <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>

templates/page.tpl.html

@@ -56,9 +56,7 @@
   <div id="tag_line">
     <h2>The Community Podcast</h2>
 	<h2>Sharing your ideas, projects, opinions since 2005</h2>
-    <h3>New episodes every weekday
+    <h3>New episodes every weekday </h3>
-  </div>
-    </h3>
   </div>
   <div id="qr_code">
 	  <img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="HPR logo as a QR code to the HPR URL">

utils/check-dependencies.sh

@@ -29,8 +29,7 @@ set -o nounset                              # Treat unset variables as an error
 function is_module_installed {
   HR="----------------------"
   perl -e "use ${1} "
-	if  [ $? -ne 0 ]
+  if [ $? -ne 0 ]; then
-	then
     echo ${HR}
   else
     echo "Found module ${1}"
@@ -38,35 +37,30 @@ function is_module_installed {
   fi
 }
 
-MODULES=( \
+MODULES=(
-	 "Getopt::Long" \
+  "Getopt::Long"
-	 "Pod::Usage" \
+  "Pod::Usage"
-	 "Config::Std" \
+  "Config::Std"
-	 "Template" \
+  "Template"
-	 "Template::Plugin::File" \
+  "Template::Plugin::File"
-	 "Template::Plugin::DBI" \
+  "Template::Plugin::DBI"
-	 "Template::Plugin::HTML::Strip" \
+  "Template::Plugin::HTML::Strip"
-	 "DBI" \
+  "DBI"
-	 "Tie::DBI" \
+  "Tie::DBI"
-	 "DBD::SQLite" \
+  "DBD::SQLite"
-	 "DBD::mysql" \
+  "Date::Calc"
-	 "Date::Calc" \
+  "Text::CSV_XS"
-	 "Text::CSV_XS" \
 )
 
 echo "The following modules must be installed for the site-generator to function: "
-for module in "${MODULES[@]}"
+for module in "${MODULES[@]}"; do
-do
   echo "* ${module}"
 done
-echo "When MySQL is used, the DBD:mysql module is required (otherwise it is optional)"
-echo "When SQLite is used, then the DBD:SQLite module is required (otherwise it is optional)"
 
 echo "Scanning for modules ..."
 echo "----------------------"
 
-for module in "${MODULES[@]}"
+for module in "${MODULES[@]}"; do
-do
   is_module_installed "${module}"
 done