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

View File

@ -10,7 +10,7 @@
box-shadow: 0px 4px 2px -2px var(--color-borders-dark); } box-shadow: 0px 4px 2px -2px var(--color-borders-dark); }
#newToolTipMain > * { padding: .5rem 1rem !important; } #newToolTipMain > * { padding: .5rem 1rem !important; }
#newToolTipMain > table td { padding: .5rem 1em; vertical-align: top; } #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; } #newToolTipMain.visible { display: block !important; }
} }

View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <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" /> <link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#aa4400" /> <meta name="theme-color" content="#aa4400" />
@ -27,7 +27,7 @@
</head> </head>
<body class="loading"> <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> </body>
</html> </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