Fix web splash (#5456)

* Fix web splash

* Untangle base styles

* Fix id name, remove log

src/style.css

@@ -1,3 +1,11 @@
+/**
+ * IMPORTANT
+ *
+ * Some of these styles are duplicated in the `web/index.html` and
+ * `bskyweb/templates/base.html` files. Depending on what you're updating, you
+ * may need to touch all three. Ask Eric if you aren't sure.
+ */
+
 @font-face {
   font-family: 'Inter-Regular';
   src: local('Inter-Regular'),
@@ -96,46 +104,43 @@
 */
 
 /**
- * Extend the react-native-web reset:
- * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+ * BEGIN STYLES
+ *
+ * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
  */
-html,
-body,
-#root {
-  width: 100%;
-  /* To smooth any scrolling behavior */
-  -webkit-overflow-scrolling: touch;
-  margin: 0px;
-  padding: 0px;
-  /* Allows content to fill the viewport and go beyond the bottom */
-  min-height: 100%;
+:root {
+  --text: black;
+  --background: white;
+  --backgroundLight: hsl(211, 20%, 95%);
 }
-#root {
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-grow: 1;
-  display: flex;
-  flex: 1;
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --text: white;
+    --background: black;
+    --backgroundLight: hsl(211, 20%, 20%);
+  }
 }
 
-html {
-  /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
-  -webkit-text-size-adjust: 100%;
-  height: calc(100% + env(safe-area-inset-top));
-  scrollbar-gutter: stable both-edges;
+html.theme--light {
+  --text: black;
+  --background: white;
+  --backgroundLight: hsl(211, 20%, 95%);
+  background-color: white;
 }
-html,
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Liberation Sans', Helvetica, Arial, sans-serif;
+html.theme--dark {
+  color-scheme: dark;
+  background-color: black;
+  --text: white;
+  --background: black;
+  --backgroundLight: hsl(211, 20%, 20%);
 }
-
-#preload {
-  width: 100px;
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+html.theme--dim {
+  color-scheme: dark;
+  background-color: hsl(211, 28%, 12%);
+  --text: white;
+  --background: hsl(211, 20%, 4%);
+  --backgroundLight: hsl(211, 20%, 10%);
 }
 
 /* Buttons and inputs have a font set by UA, so we'll have to reset that */
@@ -146,42 +151,6 @@ textarea {
   line-height: inherit;
 }
 
-/* Color theming */
-/* Default will always be white */
-:root {
-  --text: black;
-  --background: white;
-  --backgroundLight: hsl(211, 20%, 95%);
-}
-/* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: white;
-    --background: black;
-    --backgroundLight: hsl(211, 20%, 20%);
-    color-scheme: dark;
-  }
-}
-
-/* Overwrite those preferences with the selected theme */
-html.theme--light {
-  --text: black;
-  --background: white;
-  --backgroundLight: hsl(211, 20%, 95%);
-}
-html.theme--dark {
-  --text: white;
-  --background: black;
-  --backgroundLight: hsl(211, 20%, 20%);
-  color-scheme: dark;
-}
-html.theme--dim {
-  --text: white;
-  --background: hsl(211, 20%, 4%);
-  --backgroundLight: hsl(211, 20%, 10%);
-  color-scheme: dark;
-}
-
 /* Remove autofill styles on Webkit */
 input:autofill,
 input:-webkit-autofill,
@@ -200,19 +169,6 @@ input::-webkit-date-and-time-value {
   text-align: left;
 }
 
-body {
-  display: flex;
-  /* Allows you to scroll below the viewport; default value is visible */
-  overflow-y: auto;
-  overscroll-behavior-y: none;
-  text-rendering: optimizeLegibility;
-  background-color: var(--background);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -ms-overflow-style: scrollbar;
-  font-synthesis-weight: none;
-}
-
 /* Remove default link styling */
 a {
   color: inherit;