Update menu position and color

Zikoat · Aug 3, 2024 · 91175b1 · 91175b1
1 parent 1373ee4
commit 91175b1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -1,24 +1,28 @@
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>Minefield Resurrected</title>
   </head>
   <body>
-    <button onclick="toggleMenu()" class="menubutton ui">
-      <img alt="menu button" id="menubutton" src="/menubutton.png" />
-    </button>
-    <!-- todo change visuals of menu to not be a square, but to only be the icon with a white "shadow" around the icon contours.  -->
-    <div class="menu ui" id="menu" style="display: none">
-      <div><a href="https://discord.gg/XzpSVxx">Discord</a></div>
-      <div>
-        <a href="https://github.com/Zikoat/infinite-minesweeper">Source code</a>
+    <div class="container">
+      <button onclick="toggleMenu()" class="menubutton ui">
+        <img alt="menu button" id="menubutton" src="/menubutton.png" />
+      </button>
+      <div class="menu ui" id="menu">
+        <div><a href="https://discord.gg/XzpSVxx">Discord</a></div>
+        <div>
+          <a href="https://github.com/Zikoat/infinite-minesweeper"
+            >Source code</a
+          >
+        </div>
+        <!-- todo add settings -->
+        <div>Score:<span id="score"></span></div>
+        <div><button onclick="restart()">restart</button><br /></div>
+        <hr />
+        <div>Zoom: Ctrl +</div>
+        <div>Keyboard controls:<br />arrow keys and z/x</div>
       </div>
-      <!-- todo add settings -->
-      <div>Score:<span id="score"></span></div>
-      <div><button onclick="restart()">restart</button><br /></div>
-      <hr />
-      <div>Zoom: Ctrl +</div>
-      <div>Keyboard controls:<br />arrow keys and z/x</div>
     </div>
     <script src="./src/index.ts" async type="module"></script>
   </body>

diff --git a/src/css/stylesheet.css b/src/css/stylesheet.css
@@ -30,26 +30,39 @@ canvas,
   src: url("../assets/fonts/silkscreen.ttf") format("truetype");
 }
 
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+
 .ui {
   font-family: "silkscreen";
   font-size: 16px;
-  border: 2px solid #696969;
   background-color: #292929;
   padding: 2px;
-  position: absolute;
-  top: 2px;
-  left: 2px;
   color: lightgray;
   zoom: 2;
 }
 
 .menubutton {
-  width: 2em;
+  width: 3em;
+  height: 3em;
+  border: 2px solid darkgray;
 }
 
 .menubutton > img {
   image-rendering: pixelated;
   width: 100%;
+  filter: brightness(2);
+}
+
+.menu {
+  display: none;
+  border: 2px solid darkgray;
 }
 
 .menu button {
@@ -60,19 +73,6 @@ canvas,
   color: lightgray;
 }
 
-.menu {
-  display: none;
-  position: absolute;
-  top: 32px;
-  left: 2px;
-  border: 2px solid #696969;
-}
-
-button {
-  border: 2px #696969;
-  padding: 4px;
-  border-style: dashed;
-}
 a {
   color: dodgerblue;
 }