Added theme color and env inset fixes

This commit is contained in:
mxdanger 2022-05-06 16:49:43 -07:00
parent 486a2ac278
commit e438757d9a
3 changed files with 15 additions and 12 deletions

View file

@ -32,7 +32,7 @@ html, body {
svg.icon {
display: inline-block;
vertical-align: -.125em;
vertical-align: -.125em;
}
body[data-mode] {
@ -235,12 +235,13 @@ #exportString {
#bottomBar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: left .3s ease-in-out, margin-left .3s ease-in-out;
margin-left: env(safe-area-inset-right);
margin-right: env(safe-area-inset-right);
bottom: 0;
left: 0;
right: 0;
transition: left .3s ease-in-out, padding-left .3s linear;
padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
}
@media (prefers-reduced-motion: reduce) {
@ -250,7 +251,7 @@ @media (prefers-reduced-motion: reduce) {
}
#wrapper:not(.listHidden) > #bottomBar {
margin-left: 0;
padding-left: 0.5rem !important;
left: 400px !important;
}
@ -389,9 +390,9 @@ .period-group {
}
@media (prefers-reduced-motion: reduce) {
.period-group {
transition: none;
}
.period-group {
transition: none;
}
}
.period-group[data-active=true] {

View file

@ -38,6 +38,8 @@
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no, viewport-fit=cover"> <!-- user-scalable=no -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#222">
<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">

View file

@ -3,7 +3,7 @@
"display": "minimal-ui",
"scope": "/",
"start_url": "/",
"name": "r/place atlas",
"name": "r/place Atlas",
"short_name": "placeAtlas2",
"description": "The atlas for the r/place event from 2022",
"icons": [