Fix dark mode background across chrome and firefox

2021-08-01 01:03:13 -04:00
parent ee40b651a9
commit a617232868
4 changed files with 54 additions and 39 deletions
--- a/css/main.css
+++ b/css/main.css
@@ -13,12 +13,21 @@
 }

 html {
-  width: 100%;
-  height: 100%;
  background-color: whitesmoke;
+  margin: 0;
+  padding: 0;
 }

 body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  background-color: whitesmoke;
+}
+
+.root {
  font-family: 'Open Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
@@ -71,6 +80,7 @@ a:hover {
 }

 canvas {
+  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
@@ -208,7 +218,8 @@ h1.title {
 }

 div.header {
-  margin: 20px 0 20px;
+  /* this is padding instead of margin to prevent <html> from poking out behind top of page */
+  padding: 20px 0 20px;
  text-align: center;
 }

--- a/css/main_dark.css
+++ b/css/main_dark.css
@@ -1,6 +1,6 @@
 /* Dark theme */

-html {
+body {
  filter: invert(90%);
 }