diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 71668cd..c70ef43 100644
--- a/public_html/css/hpr.css
+++ b/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%;