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

This commit is contained in:
Joshua Ramon Enslin 2023-03-08 13:41:57 +01:00
parent 063a330f74
commit 50f682dbc2
Signed by: jrenslin
GPG Key ID: 46016F84501B70AE
8 changed files with 13 additions and 13 deletions

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; }

View File

@ -10,7 +10,7 @@
box-shadow: 0px 4px 2px -2px var(--color-borders-dark); }
#newToolTipMain > * { padding: .5rem 1rem !important; }
#newToolTipMain > table td { padding: .5rem 1em; vertical-align: top; }
@media screen and (min-width:75em) {
@media screen and (min-width: 768px) {
#newToolTipMain.visible { display: block !important; }
}

View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="assets/css/csvxml.min.css?63d1403bd5902" />
<link rel="stylesheet" type="text/css" href="assets/css/csvxml.min.css?64087fbae5a12" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#aa4400" />
@ -27,7 +27,7 @@
</head>
<body class="loading">
<script src="assets/js/csvxmlV2.min.js?63d1403bd5904" type="text/javascript" async></script>
<script src="assets/js/csvxmlV2.min.js?64087fbae5a14" type="text/javascript" async></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long