museum-digital/csvxml
35
0
Fork 0
Code Issues 3 Pull Requests Releases Activity

Use px-based values over em-based ones for media queries

Browse Source
This commit is contained in:
Joshua Ramon Enslin
2023-03-08 13:41:57 +01:00
parent 063a330f74
commit 50f682dbc2
8 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/css/csvxml.css
View File

@ -137,11 +137,11 @@ td { padding: .3em .5em; border-bottom: 1px solid var(--color-borders); }
background: var(--color-borders); border-radius: .2em;
color: var(--color-borders-dark); }
@media screen and (min-width: 75em) {
@media screen and (min-width: 768px) {
#helpSection > div { display: grid; grid-template-columns: 1fr 1fr; }
#helpSection > div > div { display: inline-block; grid-column: auto; }
}
@media screen and (min-width: 95em) {
@media screen and (min-width: 1366px) {
#helpSection > div { grid-template-columns: 1fr 1fr 1fr; }
}
@ -191,7 +191,7 @@ header { display: block; width: 100%; padding: 0 2em; font-size: 1rem; z-ind
header#mainHeader { margin-bottom: 2em;
background: var(--color-fg-less); color: var(--color-bg-raised2); display: table; }
header#mainHeader > * { display: table-cell; }
@media screen and (max-width: 70em) {
@media screen and (max-width: 768px) {
header#mainHeader > * { min-width: 20%; }
}
header#mainHeader > *:last-child { text-align: right; }
@ -215,7 +215,7 @@ header#mainHeader h2 { display: inline-block; vertical-align: middle; font-weigh
header#mainHeader > a:focus > img,
header#mainHeader > a:hover > img { opacity: .7; }
@media screen and (min-width: 75em) {
@media screen and (min-width: 768px) {
header nav > div > div { display: none; position: absolute; right: 0; top: 100%; width: 300px;
background: var(--color-fg-less); text-align: left; }
@ -232,7 +232,7 @@ header#mainHeader > a:hover > img { opacity: .7; }
header { padding: 0 10em; }
}
@media screen and (max-width: 75em) {
@media screen and (max-width: 768px) {
body { font-size: 1.08em; }
h1 img { display: none; }
header .branding { padding: .7rem; }