Initial reset of tags to use fluid responsive design

Use the clamping function to change the base font size as the size of the screen varies. Modify font-size, padding, and margin sizes to rely on the base font size (use rem units). In addition improve usage of white space by modifying line-height, margins, and padding of various tags.
This commit is contained in:
Roan Horning 2024-10-12 09:30:40 -04:00
parent 39d2ef86ad
commit 68e51c0a32
Signed by: rho_n
GPG Key ID: 234AEF20B72D5769

View File

@ -4,17 +4,121 @@
https://creativecommons.org/publicdomain/ 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; } html {
@media only screen and (min-width: 479px) { 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 { 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, */ font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */
color: #4D4D4D; /* HPR Grey */ color: #4D4D4D; /* HPR Grey */
background: white; 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 { #container {
width: 100%; width: 100%;