public_html/css/hpr.css

@@ -4,17 +4,121 @@
 https://creativecommons.org/publicdomain/ 
  
 */
+/*
+ *	See the following for the modern CSS responsive design techniques used in this file:
+ *	- MDN web docs: Responsive design 
+ *		-- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+ *	- Matthew James Tayler: Responsive Font Size (Optimal Text at Every Breakpoint) 
+ *		-- https://matthewjamestaylor.com/responsive-font-size
+ *	- 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/
+*/ 
 
-p.meta span label { font-weight: bold; }
-@media only screen and (min-width: 479px) { 
+html { 
+	margin: 0; 
+	padding: 0; 
+	display: block;
+}
+
+body { 
+	display: block;
+	background: #dfdfdf; 
+	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
+	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); 
+	margin: 0;
+	padding: 0;
+}
 
-body {background: #dfdfdf;}
 div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
   font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */
   color: #4D4D4D; /* HPR Grey */
   background: white;
 }
 
+h1 {
+	font-size: 1.5rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+h2,
+article * h1 {
+	font-size: 1.45rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+h3,
+article * h2 {
+	font-size: 1.25rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+h4,
+article * h3 {
+	font-size: 1.15rem;
+	margin: 1.25rem 0 0.75rem 0;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+ul {
+	padding-left: 1.15rem;
+}
+
+li {
+	line-height: 1.25;
+}
+
+a {
+	text-decoration: none;
+}
+
+a:hover {
+	cursor: pointer;
+}
+
+hr {
+	background: #4D4D4D;
+	border: 0;
+	height: 0.25em;
+}
+
+audio {
+	padding: .7em 0em .5em 0em; 
+	clear: both; 
+	position: relative; 
+	z-index:auto;
+}
+
+.audcredit { 
+	font-size: 75%;
+	margin-bottom: 1em;
+}
+
+p.meta {
+	line-height: 1.25;
+}
+
+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 {
 	width: 100%;