Simplify header layout

Remove QR code, improve contrast of header links.

public_html/css/hpr.css

@@ -35,6 +35,7 @@ https://creativecommons.org/publicdomain/
 	--link-primary-hover: #b54c08/*#f8961e*/;
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
+	--link-title-color: #00003e;
 
 	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;
@@ -53,6 +54,13 @@ https://creativecommons.org/publicdomain/
     --for-tablet-landscape-up: 900px;
 	--for-desktop-up: 1200px;
     --for-big-desktop-up: 1800px; 
+
+	--default-header-x-font-weight: bold;
+	--default-header-x-margin: 1.25rem 0 0.75rem 0;
+	--default-header-1-font-size: 1.5rem;
+	--default-header-2-font-size: 1.45rem;
+	--default-header-3-font-size: 1.25rem;
+	--default-header-4-font-size: 1.15rem;
 }
 
 html {
@@ -74,24 +82,27 @@ body {
 	padding: 0;
 	min-height: 100vh;
 }
-
+#top_navigation {
-body > nav {
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-between;
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
+	padding: 0.5rem;
 }
-body > nav a {
+#top_navigation > nav a {
 	color: var(--link-secondary);
 }
-body > nav a:hover {
+#top_navigation > nav a:hover {
 	color: var(--link-secondary-hover);
 }
-body > nav ul {
+#top_navigation > nav menu {
 	background-color: inherit;
 	color: inherit;
 	margin: 0;
 	padding: 0.25rem;
 }
-body > nav ul li {
+#top_navigation > nav menu li {
 	display: inline-block;
 	background-color: inherit;
 	color: inherit;
@@ -100,7 +111,7 @@ body > nav ul li {
 	padding: 0;
 	padding-right: var(--link-spacing-horizontal);
 }
-body > nav ul li a {
+#top_navigation > nav menu li a {
 	padding: 0.25rem 0;
 }
 body > header {
@@ -108,13 +119,14 @@ body > header {
 	flex-direction: row;
 	flex-flow: wrap;
 	justify-content: space-between;
-	padding: 0.25rem;
+	padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem;
 	background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png");
 	background-size: 59%, cover;
 	background-repeat: no-repeat, no-repeat;
 	background-position: right -15px top -20px, left top;
 	color: var(--banner-text-primary);
 	align-items: center;
+	border-top: var(--background-secondary) solid 1rem;
 }
 body > header > * {
 	margin: 0;
@@ -168,27 +180,27 @@ blockquote {
 }
 
 h1 {
-	font-size: 1.5rem;
+	font-size: var(--default-header-1-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 h2,
 article * h1,
 section > header:first-child {
-	font-size: 1.45rem;
+	font-size: var(--default-header-2-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 h3,
 article * h2 {
-	font-size: 1.25rem;
+	font-size: var(--default-header-3-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 h4,
 article * h3 {
-	font-size: 1.15rem;
+	font-size: var(--default-header-4-font-size);
-	margin: 1.25rem 0 0.75rem 0;
+	margin: var(--default-header-x-margin);
 }
 
 img {
@@ -196,7 +208,7 @@ img {
 	height: auto;
 }
 
-ul {
+dl, ul {
 	padding-left: 1.15rem;
 }
 
@@ -207,9 +219,28 @@ li {
 li:last-child {
 	margin-bottom: 0.25rem;
 }
+
+dt, dd {
+	line-height: 1.25;
+}
+
+dt {
+    display: list-item;
+    list-style-type: disc;
+	margin-bottom: 0.15rem;
+}
+
+dd {
+	margin-bottom: 0.35rem;
+	margin-left: 1rem;
+}
+
 a {
-	text-decoration: none;
 	color: var(--link-primary);
+	text-decoration-style: dotted;
+	text-decoration-color: inherit;
+    text-decoration-thickness: .125rem;
+    text-underline-offset: 0.2rem;
 }
 a:hover {
 	cursor: pointer;
@@ -323,30 +354,49 @@ a.lane-button img {
 	text-transform: uppercase;
 }
 #tag_line {
-	line-height: 1;
+	line-height: 1.1;
 }
 #tag_line *,
 #title * {
 	margin: 0;
 	padding: 0;
 }
-#title h1 {
+#title a {
+	color: var(--link-title-color);
+}
+#title a:hover {
+	color: var(--link-primary-hover);
+}
+#title #site_acronym {
 	font-size: 7.5rem;
 	letter-spacing: -0.65rem;
 	line-height: 0.75;
+	margin-bottom: 0.25rem;
 }
-#tag_line h2 {
+#title #site_acronym a {
+	text-decoration: none;
+	text-shadow: 0 1px var(--link-secondary);
+}
+#title #site_name {
+	font-size: var(--default-header-2-font-size);
+	font-weight: bold;
+}
+
+#tag_line #tag1,
+#tag_line #tag2 {
 	text-transform: uppercase;
 	font-family: "BebasNeue", sans-serif;
-	font-size: 1.15rem;
+	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 h2:first-child {
+#tag_line #tag1 {
-	font-size: 2rem;
+	font-size: 2.3rem;
 }
-#tag_line h3 {
+#tag_line #tag3 {
+	text-align: center;
 	text-transform: capitalize;
-	font-size: 1.15rem;
+	font-weight: var(--default-header-x-font-weight);
 }
 #site_url {
 	font-family: "GNUTypewriter", monospace;
@@ -420,6 +470,16 @@ fieldset > input {
 .no-css {
 	display: none;
 }
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
 @media (min-width: 600px) {
 	body > header {
 		background-size: 200pt, cover;
@@ -427,22 +487,24 @@ fieldset > input {
 		justify-content: space-between;
 	}
 	#tag_line {
+		line-height: 1.1;
 		text-align: center;
 	}
-	#title h1 {
+	#title #tag1 {
 		font-size: 7.5rem;
 		letter-spacing: -0.65rem;
 		line-height: 0.75;
 	}
-	#tag_line h2 {
+	#tag_line #tag2 {
 		font-size: 1.82rem;
 		letter-spacing: 0.05rem;
 	}
-	#tag_line h2:first-child {
+	#tag_line #tag1 {
 		font-size: 4rem;
 	}
-	#tag_line h3 {
+	#tag_line #tag3 {
 		font-size: 1.85rem;
+		letter-spacing: 0.05rem;
 		margin-left: 5rem;
 	}
 	#qr_code {

templates/content-index.tpl.html

@@ -95,20 +95,20 @@
   <section id="latest_shows">
 	<header><h2>Latest Shows</h2></header>
 <!--% host_cnt = 0 %-->
-	<ul>
+	<dl>
 <!--% FOREACH latest_episodes IN DBI.query(query_latest_episodes)
 %-->
-		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a>
+<dt><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> (<!--% latest_episodes.date %-->) :: <!--% latest_episodes.title %--></a> by <!--% latest_episodes.host %--></dt>
-		<ul><li>
+		<dd>
 		<!--% latest_episodes.summary %-->
-        </li></ul>
+        </dd>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
-	</ul>
+	</dl>
   </section>
   <section id="latest_comments">
 	<header><h2>Latest Comments</h2></header>
-	<ul>
+	<dl>
 <!--% FOREACH item IN DBI.query('
 		WITH episode_comment_rank AS (
 		SELECT 
@@ -135,13 +135,9 @@
 	
 	')
 %-->
-	<li>hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %-->
+<dt><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a></dt>
-	<ul>
+	<dd>on hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %--></dd>
-		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a>
-		</li>
-	</ul>
-	</li>
 <!--% END %-->
-	</ul>
+	</dl>
   </section>
   </section>

templates/page.tpl.html

@@ -12,15 +12,6 @@
   <meta http-equiv="last-modified" content="<!--% format_feed_date(date.now) %-->">
   <meta name="keywords" content="Technology, Tech News, Education, Training" />
   <meta name="description" content="Hacker Public Radio is a podcast that releases shows every weekday Monday through Friday. Our shows are produced by the community (you) and can be on any topic that is of interest to hackers and hobbyists." />
-  <!-- Internal CSS -->
-  <style type="text/css">
-  article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
-          display: block;
-  }
-  #list1, #list2, #list3 {
-          display:none;
-  }
-  </style>
   <link rel="shortcut icon" href="<!--% absolute_url(baseurl) %-->hpr.ico" >
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Opus RSS" href="<!--% absolute_path(baseurl) %-->hpr_opus_rss.php" />
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Ogg Vorbis RSS" href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php" />
@@ -36,31 +27,29 @@
 </head>
 
 <body>
-<nav id="accessible_menu">
+<div id="top_navigation" class="sr-only">
-   <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
+	<nav id="accessible_menu">
-   - <a href="#main_content">skip to main content</a>
+		<menu>
-</nav>
+			<li><a href="#main_content">Skip to Main Content</a></li>
-<nav id="main_menu" class="menu" role="navigation">
+			<li><a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a></li>
-<!--% INCLUDE "navigation-main.tpl.html" %-->
+		</menu>
-</nav>
+	</nav>
+	<hr class="no-css">
+</div>
 <header role="banner">
-  <div id="title">
+  <hgroup id="title">
-	  <h1 id="site_acronym">HPR</h1>
+	  <h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1>
-      <h2 id="site_name">
+      <p id="site_name">
         <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker
         <a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">P</a>ublic
         <a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio
-      </h2>
+      </p>
-	  <h3 id="site_url">https://HackerPublicRadio.org</h3>
+  </hgroup>
-  </div>
+  <hgroup id="tag_line">
-  <div id="tag_line">
+    <h2 id="tag1">The Community Podcast</h2>
-    <h2>The Community Podcast</h2>
+	<p id="tag2">Sharing your ideas, projects, opinions since 2005</p>
-	<h2>Sharing your ideas, projects, opinions since 2005</h2>
+    <p id="tag3">New episodes every weekday </p>
-    <h3>New episodes every weekday </h3>
+  </hgroup>
-  </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">
-  </div>
 </header>
 <main id="main_content" role="main">
 <!--% INCLUDE $content %-->