Archived
4
2
This repository has been archived on 2024-09-28. You can view files and clone it, but cannot push or open issues or pull requests.
Roan Horning 87b7f7bde6
Create media breakpoint that matches original wide screen setting
For larger screens constrain viewing width and growth of font-size, and margins to approximately corresponding sizes of the original layout. Prevent things from getting too large.
2024-10-12 10:53:07 -04:00

473 lines
8.1 KiB
CSS

@charset "utf-8";
/* Website design Copyright Ken Fallon - Released into the public domain/
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/
*/
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;
}
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 {
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 <pre> */
background: #eee;
border: 1px solid #ddd;
overflow: auto;
clear: both;
padding: 0.5rem
}
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.hosts tr:nth-child(even) {
background-color:#cccccc;
border-bottom: thick solid white;
}
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;
}
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;
}
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;
}
}