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.
This commit is contained in:
Roan Horning 2024-10-12 10:53:07 -04:00
parent 69f19976fd
commit 87b7f7bde6
Signed by: rho_n
GPG Key ID: 234AEF20B72D5769

View File

@ -384,4 +384,89 @@ fieldset > input {
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;
}
}