HPR/hpr_generator
5
0
Fork 0
Code Issues 33 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial reset of tags to use fluid responsive design

Browse Source 
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
1 changed files with 107 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
public_html/css/hpr.css
View File

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