From ebe230ee0a0637f282ceb9d4463e5eb84192eee3 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Tue, 15 Jul 2025 21:06:33 -0400
Subject: [PATCH] Initial formatting of swim lanes on main landing page

---
 public_html/css/hpr.css          | 37 ++++++++++++++++++++-
 templates/content-index.tpl.html | 56 +++++++++++++++++++++++++++-----
 2 files changed, 83 insertions(+), 10 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 55465ab..f0ca14e 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -23,6 +23,14 @@ https://creativecommons.org/publicdomain/
 	--link-secondary: #7fc5e2;
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
 
+  /* screen breakpoints */
+	--for-phone-only: 599px;
+    --for-tablet-portrait-up: 600px;
+    --for-tablet-landscape-up: 900px;
+	--for-desktop-up: 1200px;
+    --for-big-desktop-up: 1800px; 
+
+
 }
 
 html {
@@ -71,6 +79,7 @@ body > header {
 	flex-flow: wrap;
 	justify-content: space-between;
 	padding: 0.25rem;
+	background-image: url("/images/main-header-background.png");
 }
 body > header > * {
 	margin: 0;
@@ -125,7 +134,8 @@ h1 {
 }
 
 h2,
-article * h1 {
+article * h1,
+section > header:first-child {
 	font-size: 1.45rem;
 	margin: 1.25rem 0 0.75rem 0;
 }
@@ -190,4 +200,29 @@ p.meta span label {
 	font-weight: bold;
 }
 
+div.lane {
+	display: flex;
+	flex-direction: row;
 
+}
+a.lane-button {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin: 0.5rem;
+	padding: 0.5rem;
+	border-width: 5px;
+	border-color: var(--link-primary);
+	border-style: solid;
+	border-radius: 5px;
+
+}
+
+@media (min-width: 900px) {
+	body { 
+		background-color: white; 
+	}
+	#qr_code > img {
+		max-height: 195px;
+	}
+}
diff --git a/templates/content-index.tpl.html b/templates/content-index.tpl.html
index 0879318..f51cceb 100644
--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -23,11 +23,6 @@
 <!--% END %-->
 <!--% after_html %-->
 <!--% END %-->
-<hr>
-  <article>
-    <header>
-        <h3>Welcome to HPR, the Community Podcast</h3>
-    </header>
 	<!--% days_till_next_episode = 0 %-->
 	<!--% USE DBI(constants.driver) %-->
 	<!--% USE date %-->
@@ -40,10 +35,52 @@
 	<!--% days_till_next_episode = calc.Delta_Days(now.0,now.1,now.2,slot_date.0,slot_date.1,slot_date.2) %-->
 
 	<!--% delta = date.calc.N_Delta_YMD(2005,9,19, date.format(date.now, '%Y'),date.format(date.now, '%m'),date.format(date.now, '%d')) %-->
-	<p>We started producing shows as <a href="<!--% absolute_path(baseurl) %-->eps/index.html#twt_episodes"><em>Today with a Techie</em></a> on 2005-09-19, <!--% delta.0 %--> years, <!--% delta.1 %--> months, <!--% delta.2 %--> days ago. Our shows are produced by <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">listeners</a> like you and can be on any <a href="<!--% absolute_path(baseurl) %-->eps/index.html">topics</a> that <strong>"are of interest to <a href="https://en.wikipedia.org/wiki/hacker_(hobbyist)">hackers</a>"</strong>. If you listen to HPR then please consider contributing one show a year. If you <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">record</a> your show now it could be <a href="<!--% hub_baseurl %-->calendar.php">released</a> in <strong><!--% days_till_next_episode %--></strong> days.</p>
-  </article>
-  <!--% display_call_for_shows() %-->
-  <hr>
+	<section id="welcome">
+		<header>Welcome</header>
+		<p>Hacker Public Radio is a podcast that releases shows every weekday Monday to Friday. The shows are contributed by the public and can be on any topic that is of interest to hackers, makers, hobbyists, etc.</p>
+		<div id="call_for_shows">
+			<!--% display_call_for_shows() %-->
+		</div>
+  </section>
+  <section id="podcast_lane">
+	  <header>Podcast</header>
+	  <div class="lane">
+	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html#recording_a_podcast">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="Microphone icon">
+		  Record
+	  </a>
+	  <a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
+		  <img src="" alt="Calendar icon">
+		  Schedule
+	  </a>
+	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="RSS icon">
+		 Subscribe 
+	  </a>
+	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
+		  <img src="" alt="Speaker icon">
+		 Listen 
+	  </a>
+	</div>
+  </section>
+  <section id="project_lane">
+	  <header>Project</header>
+	  <div class="lane">
+	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->correspondents/index.html">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="Person icon">
+		 Host 
+	  </a>
+	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">
+		  <img src="" alt="Stack of Books icon">
+		 Series 
+	  </a>
+	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="Question Mark icon">
+		 About 
+	  </a>
+	</div>
+  </section>
+  <section id="latest_lane">
   <!--% PROCESS 'shared-episode-summary.tpl.html' %-->
 <h1>Latest Shows</h1>
 <!--% host_cnt = 0 %-->
@@ -81,3 +118,4 @@
 	<p>
 	Get a <a href="<!--% absolute_path(baseurl) %-->eps/index.html">full list</a> of all our shows.
 	</p>
+  </section>