progress

src/client/index.css

@@ -8,11 +8,26 @@
   height: 100vh;
   background-color: #eee;
   z-index: 999999999;
+  font-size: 1rem;
+  padding: 1rem;
+  text-align: center;
+  user-select: none;
 }
 
 @media (prefers-color-scheme: dark) {
   .ora--wrapper {
-    background-color: #000000;
+    background-color: #111;
     color: #eee;
   }
 }
+
+.ora--wrapper div {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+  margin: 3rem auto;
+  width: 100%;
+}
+
+.ora--wrapper div h1 {
+  margin-bottom: 0.5rem;
+}

src/client/index.js

@@ -9,12 +9,6 @@ function init() {
   wrapper.classList.add('hidden')
 
   const inner = window.document.createElement('div')
-  Object.assign(inner.style, {
-    fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
-    margin: '3em auto',
-    width: '100%',
-    maxWidth: '20em',
-  })
   inner.innerHTML = `
     <h1>Overtime ⏱</h1>
     <p>You have no time left on this website 🥺</p>