diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index d979989..55465ab 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -14,21 +14,86 @@ https://creativecommons.org/publicdomain/ * -- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */ +:root { + --background-primary: #dfdfdf; + --text-primary: #4d4d4d; /* HPR Grey */ + --background-secondary: #4d4d4d; + --text-secondary: #dfdfdf; + --link-primary: #247ba0; + --link-secondary: #7fc5e2; + --font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; + +} + html { margin: 0; padding: 0; - display: block; + display: flex; } - body { - display: block; - background: #dfdfdf; + display: flex; + flex-direction: column; + justify-content: flex-start; + background-color: var(--background-primary); + color: var(--text-primary); font-size: 1rem; /* fallback for browsers that don't support the clamp function) */ font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); + font-family: var(--font-family-hpr); margin: 0; padding: 0; } +body > nav { + background-color: var(--background-secondary); + color: var(--text-secondary); +} +body > nav a { + color: var(--link-secondary); +} +body > nav ul { + background-color: inherit; + color: inherit; + margin: 0; + padding: 0.25rem; +} +body > nav ul li { + display: inline-block; + background-color: inherit; + color: inherit; + line-height: 1.5; + margin: 0; + padding: 0; + padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem); +} +body > header { + display: flex; + flex-direction: row; + flex-flow: wrap; + justify-content: space-between; + padding: 0.25rem; +} +body > header > * { + margin: 0; + padding: 0; + flex: 1 1 auto; +} +body > main { + padding: 0.25rem; +} +body > footer { + background-color: var(--background-secondary); + color: var(--text-secondary); + padding: 0.25rem; +} +body > footer hr:first-child { + display: none; + margin: 0; + padding: 0; +} +body > footer a { + color: var(--link-secondary); +} + div, h1, h2, @@ -49,9 +114,9 @@ fieldset, input, textarea, blockquote { - font-family: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */ - color: #4D4D4D; /* HPR Grey */ - background: white; + font-family: inherit; + color: inherit; + background: inherit; } h1 { @@ -92,6 +157,7 @@ li { a { text-decoration: none; + color: var(--link-primary); } a:hover { @@ -124,395 +190,4 @@ p.meta span label { font-weight: bold; } -article>p, -#maincontent>p { - line-height: 1.45; -} -article#previous_five_weeks>* { - line-height: 1.35; - margin: 0; - padding: 0; -} - -article#previous_five_weeks>h3 { - margin: 1.5rem 0 0.5rem 0; -} - -#container { - max-width: 58rem; - margin: 0.25rem; - padding: 0.75rem; /* fallback for browsers that don't support the clamp function) */ - padding: clamp(0.75rem, -0.25rem + 3vw, 2.0rem); - overflow: hidden; - background: white; - border: thin solid #4D4D4D; -} - -.shadow { - -moz-box-shadow: 2px 3px 6px 3px #675958; - -webkit-box-shadow: 2px 3px 6px 3px #675958; - box-shadow: 2px 3px 6px 3px #675958; -} - -.thick_bar { - background-color: #4D4D4D; - color: white; - padding: 0.5rem; - margin: 1rem 0 1rem 0; -} - -img#hprlogo { - max-width: 20vw; - padding-right: clamp(0.75rem, -0.25rem + 3vw, 1.5rem); - float: left; - margin-top: 1rem; - margin-bottom: clamp(0.75rem, -0.25rem + 2vw, 1.5rem); -} - -#hpr_banner { - /* display: inline-block; */ - border: 0; - margin: 0 0 0rem 0; - padding: 0; -} - -#hpr_banner p { - margin: 0 0 0.5rem 0; -} - -#hpr_banner h1#sitename { - font-size: clamp(1.44rem, -1rem + 3vw, 2rem); - letter-spacing: 0.06rem; - margin: 0; - padding: 0; -} - -#hpr_banner h2 { - font-size: clamp(0.74rem, -1rem + 2vw, 1rem); - font-weight: 510; - margin: 0 0 1rem 0; - padding: 0; -} - -#hpr_banner h3 { - font-size: 1rem; - font-weight: normal; - margin: 0 0 0.5rem 0; - padding: 0; -} - -header>hr { - clear: both; -} - -#accessible_menu { - font-size: smaller; -} - -/* The main navigation menu */ -header>nav.menu { - display: block; - background-color: #4D4D4D; /* HPR Grey */ - text-align: Left; - clear: both; /* Forces the menu to appear after the HPR Header block */ - padding: 0; - margin: 0; -} - -header>nav.menu ul { - margin: 0; - padding: 0.5rem; - background-color: inherit; - color: white; -} - -header>nav.menu ul li { - display: inline-block; - background-color: inherit; - color: inherit; - line-height: 1.5; - margin: 0; - padding: 0; - padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem); -} - -header>nav.menu ul li a { - color: white; - text-decoration: none; - display: block; - padding: 0.25rem 0; -} - -header>nav.menu ul li a:hover { - border-bottom: thin solid white; - padding: 0.15rem 0; - -webkit-transition: 0.3s ease-in-out color; - -moz-transition: 0.3s ease-in-out color; - transition: 0.3s ease-in-out color; -} - -header>nav.menu ul li a:visited { - color: #EDEDED; -} - -a:active, -header>nav.menu ul li a:active { - color: red; -} - -pre { - /* Add background, border and scrollbar to 
 */
-	background: #eee;
-	border: 1px solid #ddd;
-	overflow: auto;
-	clear: both;
-	padding: 0.5rem
-}
-
-code {
-	background: #eee;
-	border-radius: 0.2rem;
-	font-size: 0.95rem;
-}
-
-pre code {
-	padding-right: 0.5rem;
-	font-size: 0.85rem;
-	line-height: 1;
-}
-
-pre.comment {
-	white-space: pre-wrap;
-	line-height: 1.2rem;
-}
-
-table.hosts {
-	font-size: clamp(0.82rem, -0.25rem + 3vw, 1.0rem);
-	width: 100%;
-	background: white;
-	margin: 0 auto;
-	border-collapse: collapse;
-	display: inline-table;
-
-}
-
-table#t01,
-table.hosts {
-	display: block;
-	overflow-x: auto;
-}
-
-table#t01 tbody,
-table.hosts tbody {
-	display: table;
-}
-
-table#t01 tr:nth-child(even),
-table.hosts tr:nth-child(even) {
-	background-color: #cccccc;
-	border-bottom: thick solid white;
-}
-
-table#t01 tr:nth-child(odd),
-table.hosts tr:nth-child(odd) {
-	background-color: white;
-	border-bottom: thick solid white;
-}
-
-table.hosts tr td img {
-	vertical-align: middle;
-	max-height: 80px;
-}
-
-table.hosts th:first-child,
-table.hosts td:first-child {
-	min-width: 60px;
-	max-width: 80px;
-	text-align: left;
-	height: 62px;
-}
-
-table.hosts th:nth-child(2),
-table.hosts td:nth-child(2) {
-	text-align: left;
-	padding-left: clamp(0.15rem, -0.25rem + 3vw, 0.5rem);
-}
-
-table.hosts th:nth-child(3),
-table.hosts td:nth-child(3),
-table.hosts th:nth-child(4),
-table.hosts td:nth-child(4) {
-	width: 10%;
-	padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem);
-}
-
-body>div>footer {
-	margin-top: 2rem;
-}
-
-footer #more_info nav.column {
-	clear: both;
-	font-size: 0.9rem;
-	margin-left: 0.5rem;
-}
-
-footer #more_info nav.column ul li {
-	float: left;
-	margin-right: 1.5rem;
-	margin-bottom: 1rem;
-}
-
-footer #more_info nav.column h2 {
-	font-size: 1.35rem;
-	margin-top: 0.5rem;
-}
-
-footer h1.thick_bar {
-	clear: left;
-	font-size: 1.15rem;
-}
-
-footer #copyright {
-	font-size: smaller;
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
-}
-
-fieldset>table,
-fieldset>table thead,
-fieldset>table tbody,
-fieldset>table tr,
-fieldset>table th,
-fieldset>table td,
-fieldset>table td input,
-fieldset>table td textarea {
-	display: block;
-	font-size: 1rem;
-}
-
-fieldset>table {
-	width: calc(100vw + -16vw + -1rem);
-	max-width: 100%;
-}
-
-fieldset>table td input,
-fieldset>table td textarea {
-	width: calc(100vw + -16vw + -1.5rem);
-	max-width: 100%;
-	border: thin solid #DFDFDF;
-	margin-bottom: 0.5rem;
-	padding: 0.5rem;
-}
-
-fieldset>table td select {
-	margin-bottom: 0.5rem;
-	padding: 0.25rem;
-}
-
-fieldset>table td input[type="radio"] {
-	display: initial;
-	width: initial;
-	margin-bottom: 0.5rem;
-}
-
-fieldset>input {
-	background: #4D4D4D;
-	color: white;
-	font-weight: 600;
-	padding: 0.5rem;
-	border: thin solid #DFDFDF;
-	border-radius: 0.2rem;
-}
-
-@media only screen and (min-width: 58rem) {
-	#container {
-		margin: 0.5rem auto;
-	}
-
-	.shadow {
-		-moz-box-shadow:    1px 2px 5px 2px #675958;
-		-webkit-box-shadow: 1px 2px 5px 2px #675958;
-		box-shadow:         1px 2px 5px 2px #675958;
-	}
-
-	img#hprlogo {
-		margin-bottom: 1.5rem;
-	}
-
-	#hpr_banner {
-		float: left;
-	}
-
-	#hpr_banner h1#sitename {
-		font-size: 2rem;
-	}
-
-	#hpr_banner h2 {
-		font-size: 1rem;
-	}
-
-	header>hr {
-		clear: right;
-	}
-
-	table.hosts td:first-child {
-		height: 80px;
-	}
-
-	footer #more_info nav.column {
-		clear: none;
-		float: left;
-		width: 19.5%;
-		margin-left: 0;
-	}
-
-	footer #more_info nav.column:first-child {
-		margin-left: 0.5rem;
-	}
-
-	footer #more_info nav.column ul li {
-		float: none;
-		margin-bottom: 0.5rem;
-	}
-
-	fieldset>table,
-	fieldset>table thead,
-	fieldset>table tbody,
-	fieldset>table tr,
-	fieldset>table th,
-	fieldset>table td,
-	fieldset>table td input,
-	fieldset>table td textarea {
-		display: revert;
-		width: revert;
-	}
-
-	fieldset>table tr {
-		vertical-align: baseline;
-	}
-
-	fieldset>table tr:nth-child(3) {
-		vertical-align: top;
-	}
-
-	fieldset>table tr:nth-child(3) td:first-child {
-		padding-top: 0.5rem;
-	}
-
-	fieldset>table tr:nth-last-child(3) td:first-child {
-		padding-top: 1rem;
-	}
-
-	fieldset>table tr:nth-last-child(2) {
-		vertical-align: top;
-	}
-
-	fieldset>table tr:nth-last-child(2) td:first-child {
-		padding-top: 0.75rem;
-	}
-
-	fieldset>table td input[type="radio"] {
-		margin-top: 1.5rem;
-	}
-}
diff --git a/public_html/images/Richard_Querin_atomic-plain.svg b/public_html/images/Richard_Querin_atomic-plain.svg
new file mode 100644
index 0000000..2313474
--- /dev/null
+++ b/public_html/images/Richard_Querin_atomic-plain.svg
@@ -0,0 +1,122 @@
+
+
+
+
+  
+  
+  
+    
+      
+        image/svg+xml
+        
+        
+      
+    
+  
+  
+    
+    
+    
+    
+      
+      
+      
+      
+    
+    
+    
+  
+
diff --git a/public_html/images/qr_code_logo.png b/public_html/images/qr_code_logo.png
new file mode 100644
index 0000000..b8dd512
Binary files /dev/null and b/public_html/images/qr_code_logo.png differ
diff --git a/templates/page.tpl.html b/templates/page.tpl.html
index 6b9659d..428affb 100644
--- a/templates/page.tpl.html
+++ b/templates/page.tpl.html
@@ -36,113 +36,45 @@
    
 
 
-
-

+
+
 

-  
-  

-    

-      Site Map
-      - skip to main content
-      

-      

+  

+	  
HPR

+      

         Hacker
         Public
         Radio
-      

-    
Your ideas, projects, opinions - podcasted.

-    
New episodes every weekday Monday through Friday.

-    This page was generated by  at 

-
+      

+	  
https://HackerPublicRadio.org

+  

+  

+    
The Community Podcast

+	
Sharing your ideas, projects, opinions since 2005

+    
New episodes every weekday
+  

+    
+  

+  

+	  QR code of HPR URL
   

-  

-  
-  
 
-
-

+

 
 

-
-