Add max width to the app with the black backdrop

consensusnetworks · Sep 27, 2023 · ee79320 · ee79320
1 parent f852b62
commit ee79320
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -16,7 +16,12 @@
     <title>Casimir</title>
   </head>
   <body>
-    <div id="app"></div>
+<!-- 
+    <div style="position: relative; height: 100vh; width: 100vw; display: flex; justify-content: center; border: aqua solid 2px;">
+      <div style="position: absolute; top: 0px; left: 0px; height: 319px; width: 100vw; background-color: #000;"></div> -->
+      <div id="app"></div>
+    <!-- </div> -->
+
     <script type="module">
       import { Buffer } from "buffer"
       window.Buffer = Buffer

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
@@ -5,12 +5,26 @@
 :root {
 font-family: 'IBM Plex Sans', sans-serif;
 font-synthesis: none;
+
+max-width: 1400px;
+margin: auto;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-text-size-adjust: 100%;
 }
 
+:root::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 319px;
+    background-color: #000;
+    z-index: -1;
+  }
+
 .tooltip_container{
     position: relative;
 }