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

Add fluid responsive design to hosts table

Browse Source
This commit is contained in:
Roan Horning 2024-10-12 10:45:23 -04:00
parent d1539a3ca2
commit 7cd0cc3056
Signed by: rho_n
GPG Key ID: 234AEF20B72D5769
1 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
public_html/css/hpr.css
View File

@ -253,31 +253,50 @@ pre.comment {
line-height: 1.2rem; line-height: 1.2rem;
} }
h3.title { margin: 1.25rem 0 0.75rem 0 } table.hosts {
p.meta { margin: 0.25rem 0 } font-size: clamp(0.82rem, -0.25rem + 3vw , 1.0rem);
p.summary { margin: 0.25rem 0 } width: 100%;
p.listen-in { margin-top: 0 } background: white;
margin: 0 auto;
border-collapse: collapse;
display: inline-table;
@media only screen and (max-width: 680px) {
#container {width: 95%;}
img#hprlogo {float: left; max-width: 85px; padding: .35em;}
.column {width: 15%;}
h1 {font-size: 140%;}
h2 {font-size: 120%;}
h3 {font-size: 100%;}
nav.column { display: block; padding: 0em .25em 0em .25em;}
#footer_page li {font-size: 85%; padding: .5em .25em .5em .25em;}
footer p {font-size: 75%;}
audio {float: none; }
} }
@media only screen and (max-width: 479px) { table.hosts tr:nth-child(even) {
body {background: #ffffff; color: #4D4D4D; font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */} background-color:#cccccc;
li {font-size: 100%; padding: .75em 0em .75em 0em; margin-left: -.25em;} border-bottom: thick solid white;
img#hprlogo {float: left; max-width: 65px; padding: .35em;} }
.column {width: auto;}
h1#sitename { clear: both;} table.hosts tr:nth-child(odd) {
a:link {text-decoration: none;} background-color:white;
audio {padding: .7em 0em .5em 0em; width: 95%; max-width: 300px;} border-bottom: thick solid white;
.audcredit { font-size: 65%; margin-bottom: 1em;} }
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);
}
} }