diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index 5508037..10f155c 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -12,27 +12,46 @@ https://creativecommons.org/publicdomain/ * -- 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/ -*/ +*/ -html { - margin: 0; - padding: 0; +html { + margin: 0; + padding: 0; display: block; } -body { +body { display: block; - background: #dfdfdf; + background: #dfdfdf; font-size: 1rem; /* fallback for browsers that don't support the clamp function) */ - font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); + font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); margin: 0; padding: 0; } -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; +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 { @@ -86,13 +105,13 @@ hr { } audio { - padding: .7em 0em .5em 0em; - clear: both; - position: relative; - z-index:auto; + padding: .7em 0em .5em 0em; + clear: both; + position: relative; + z-index: auto; } -.audcredit { +.audcredit { font-size: 75%; margin-bottom: 1em; } @@ -105,18 +124,18 @@ p.meta span label { font-weight: bold; } -article > p, -#maincontent > p { +article>p, +#maincontent>p { line-height: 1.45; } -article#previous_five_weeks > * { +article#previous_five_weeks>* { line-height: 1.35; margin: 0; padding: 0; } -article#previous_five_weeks > h3 { +article#previous_five_weeks>h3 { margin: 1.5rem 0 0.5rem 0; } @@ -124,16 +143,16 @@ article#previous_five_weeks > h3 { 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); + 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; + -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 { @@ -145,17 +164,17 @@ article#previous_five_weeks > h3 { img#hprlogo { max-width: 20vw; - padding-right: clamp(0.75rem, -0.25rem + 3vw , 1.5rem); + 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); + 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 { + /* display: inline-block; */ + border: 0; + margin: 0 0 0rem 0; + padding: 0; } #hpr_banner p { @@ -163,27 +182,27 @@ img#hprlogo { } #hpr_banner h1#sitename { - font-size: clamp(1.44rem, -1rem + 3vw , 2rem); + 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-size: clamp(0.74rem, -1rem + 2vw, 1rem); font-weight: 510; margin: 0 0 1rem 0; padding: 0; } -#hpr_banner h3 { +#hpr_banner h3 { font-size: 1rem; font-weight: normal; margin: 0 0 0.5rem 0; padding: 0; } -header > hr { +header>hr { clear: both; } @@ -192,40 +211,40 @@ header > hr { } /* 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 { + 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 { +header>nav.menu ul { margin: 0; padding: 0.5rem; background-color: inherit; - color: white; + color: white; } -header > nav.menu ul li { +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); + padding: 0; + padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem); } -header > nav.menu ul li a { - color: white; +header>nav.menu ul li a { + color: white; text-decoration: none; - display: block; + display: block; padding: 0.25rem 0; } -header > nav.menu ul li a:hover { +header>nav.menu ul li a:hover { border-bottom: thin solid white; padding: 0.15rem 0; -webkit-transition: 0.3s ease-in-out color; @@ -233,20 +252,21 @@ header > nav.menu ul li a:hover { transition: 0.3s ease-in-out color; } -header > nav.menu ul li a:visited{ +header>nav.menu ul li a:visited { color: #EDEDED; } -a:active, -header > nav.menu ul li a:active { +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; +pre { + /* Add background, border and scrollbar to*/ + background: #eee; + border: 1px solid #ddd; + overflow: auto; + clear: both; padding: 0.5rem } @@ -255,13 +275,14 @@ pre code { 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); + font-size: clamp(0.82rem, -0.25rem + 3vw, 1.0rem); width: 100%; background: white; margin: 0 auto; @@ -270,18 +291,18 @@ table.hosts { } -table.hosts tr:nth-child(even) { - background-color:#cccccc; +table.hosts tr:nth-child(even) { + background-color: #cccccc; border-bottom: thick solid white; } -table.hosts tr:nth-child(odd) { - background-color:white; +table.hosts tr:nth-child(odd) { + background-color: white; border-bottom: thick solid white; } -table.hosts tr td img { - vertical-align:middle; +table.hosts tr td img { + vertical-align: middle; max-height: 80px; } @@ -306,14 +327,14 @@ table.hosts td:nth-child(4) { padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem); } -body > div > footer { +body>div>footer { margin-top: 2rem; } footer #more_info nav.column { clear: both; font-size: 0.9rem; - margin-left: 0.5rem; + margin-left: 0.5rem; } footer #more_info nav.column ul li { @@ -338,25 +359,25 @@ footer #copyright { 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; +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 { +fieldset>table { width: calc(100vw + -16vw + -1rem); max-width: 100%; } -fieldset > table td input, -fieldset > table td textarea { +fieldset>table td input, +fieldset>table td textarea { width: calc(100vw + -16vw + -1.5rem); max-width: 100%; border: thin solid #DFDFDF; @@ -364,18 +385,18 @@ fieldset > table td textarea { padding: 0.5rem; } -fieldset > table td select { +fieldset>table td select { margin-bottom: 0.5rem; padding: 0.25rem; } -fieldset > table td input[type="radio"] { +fieldset>table td input[type="radio"] { display: initial; width: initial; margin-bottom: 0.5rem; } -fieldset > input { +fieldset>input { background: #4D4D4D; color: white; font-weight: 600; @@ -390,9 +411,9 @@ fieldset > input { } .shadow { - -moz-box-shadow: 1px 2px 5px 2px #675958; - -webkit-box-shadow: 1px 2px 5px 2px #675958; - box-shadow: 1px 2px 5px 2px #675958; + -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 { @@ -411,7 +432,7 @@ fieldset > input { font-size: 1rem; } - header > hr { + header>hr { clear: right; } @@ -431,42 +452,43 @@ fieldset > input { 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; + 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 { + fieldset>table tr { vertical-align: baseline; } - fieldset > table tr:nth-child(3) { + fieldset>table tr:nth-child(3) { vertical-align: top; } - fieldset > table tr:nth-child(3) td:first-child { + fieldset>table tr:nth-child(3) td:first-child { padding-top: 0.5rem; } - fieldset > table tr:nth-last-child(3) td:first-child { + 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) { + vertical-align: top; } - fieldset > table tr:nth-last-child(2) td:first-child { + + fieldset>table tr:nth-last-child(2) td:first-child { padding-top: 0.75rem; } - fieldset > table td input[type="radio"] { + fieldset>table td input[type="radio"] { margin-top: 1.5rem; } -} +} \ No newline at end of file