make demo landing elements take up the whole screen

Author: g-harel

demo/index.html

@@ -4,7 +4,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <style>
             html {
-                font-size: calc(0.5vw + 0.9rem);
+                font-size: calc(0.1vw + 1.2rem);
             }
 
             body {
@@ -15,10 +15,11 @@
             }
 
             header {
+                align-items: center;
                 display: flex;
                 flex-direction: column;
-                align-items: center;
-                padding: 2rem 0;
+                height: 20vh;
+                padding: 5vh 0 0;
                 user-select: none;
                 -moz-user-select: none;
             }
@@ -45,11 +46,15 @@
             }
 
             .example {
-                padding: 2.5rem 2rem;
+                align-items: center;
+                display: flex;
+                height: 50vh;
+                padding: 5vh 2rem;
             }
 
             .how-it-works {
                 cursor: pointer;
+                height: 10vh;
                 transform: rotate(-2deg) translateY(-1px);
                 user-select: none;
             }
@@ -72,6 +77,7 @@
             .container .title {
                 color: #aaa;
                 font-weight: 700;
+                margin: 1rem 0 0.5rem;
                 max-width: 1000px;
                 text-transform: uppercase;
                 user-select: none;
@@ -82,7 +88,7 @@
                 border: 1px solid #eee;
                 border-radius: 0.5rem;
                 display: flex;
-                margin: 1.5rem 0;
+                margin: 1rem 0;
                 max-width: 1000px;
                 width: 100%;
             }
@@ -147,6 +153,5 @@
         </main>
         <script src="./example.ts"></script>
         <script src="./content.ts"></script>
-        <!-- TODO fix unexpanded landing alignment -->
     </body>
 </html>

demo/internal/debug.ts

@@ -1,5 +1,5 @@
 // If debug is initially set to false it will not be toggleable.
-let debug = true && location.hostname === "localhost";
+let debug = false && location.hostname === "localhost";
 export const isDebug = () => debug;
 
 const debugListeners: ((debug: boolean) => void)[] = [];