updates after testing

xebia · Jul 11, 2024 · d89c852 · d89c852
1 parent 2b02725
commit d89c852
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/game-landscape.html b/game-landscape.html
@@ -13,19 +13,17 @@
             #game-canvas {
                 width: 100%;
                 height: auto;
-                position: absolute;
-                top: 135px;
             }
         }
     </style>
     <script defer data-domain="github-copilot.xebia.ms" src="https://plausible.io/js/script.js"></script>
 </head>
 <body>
+    <div id="top">
+        <a href="javascript:history.back()" class="back-button">Back</a>
+        <div id="title-frame">Levels of Enlightenment</div>
+    </div>
     <div id="game-container">
-        <div id="top">
-            <a href="javascript:history.back()" class="back-button">Back</a>
-            <div id="title-frame">Levels of Enlightenment</div>
-        </div>
         <canvas id="game-canvas"></canvas>
         <div id="tooltip" style="display: none;">Tooltip Text</div>
     </div>

diff --git a/styles.css b/styles.css
@@ -368,18 +368,26 @@ h1 {
 }
 
 #title-frame {
-    position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 80%;
     font-weight: 700;
     font-size: xxx-large;
+    float: left;
     color: white;
     text-align: center;
     padding: 10px 0;
     z-index: 10; /* Ensure it's above the canvas */
 }
 
+#top {
+    height: 72px;
+    width: 100%;
+}
+
+#top a {
+    float: left
+}
 /* Styles specific to the game landscape interface */
 #game-container {
     display: flex;
@@ -392,8 +400,6 @@ h1 {
 }
 
 #game-canvas {
-    position: absolute;
-    top: 135px;
     width: 800px;
     height: 600px;
     border: 5px solid #8B4513; /* Leathery brown border for the canvas */