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%;