Adjusted the viewport size for mobile support

danieldotwav · Dec 1, 2023 · 7fdf86d · 7fdf86d
1 parent 914e9af
commit 7fdf86d
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 111 deletions.
diff --git a/dlx-solver.js b/dlx-solver.js
@@ -505,9 +505,6 @@ inputs.forEach(function (input) {
 	});
 });
 
-
-
-
 ////////////////////////////////////////
 // Random Sudoku Generation
 ///////////////////////////////////
@@ -689,3 +686,12 @@ function setupPuzzle(puzzle) {
 		}
 	}
 }
+
+
+////////////////////////////////////////
+// Banner Generation
+///////////////////////////////////
+
+document.querySelector(".banner__close").addEventListener("click", function () {
+	this.closest(".banner").style.display = "none";
+})
diff --git a/index.html b/index.html
@@ -4,42 +4,56 @@
 <head>
     <title>Sudoku Solver</title>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=0.7">
     <script src="https://kit.fontawesome.com/your-fontawesome-kit-code.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300">
     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
     <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+          rel="stylesheet">
 </head>
 
 <body>
-    <div class="header">
-        <header-top>
-            DLX Sudoku Puzzle Solver
-        </header-top>
 
-        <!-- New buttons for puzzle generation -->
-        <div class="header-content">
-            <div class="button-container header-button">
-                <button type="button" class="button-common" id="GenerateEasyButton">
-                    <span>Easy Puzzle</span>
-                </button>
-            </div>
-            <div class="button-container header-button">
-                <button type="button" class="button-common" id="GenerateMediumButton">
-                    <span>Medium Puzzle</span>
-                </button>
-            </div>
-            <div class="button-container header-button">
-                <button type="button" class="button-common" id="GenerateHardButton">
-                    <span>Hard Puzzle</span>
-                </button>
+    <div class="banner">
+        <div class="banner__content">
+            <div class="banner__text">
+
+                <div class="header__title">
+                    DLX Sudoku Puzzle Solver
+                </div>
+
+                <div class="banner__name">
+                    <a href="https://github.com/danieldotwav" target="_blank">by Daniel Rivas</a>
+                </div>
+
             </div>
+            <button class="banner__close" type="button">
+                <span class="material-icons">close</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- New buttons for puzzle generation -->
+    <div class="header__content">
+        <div class="button-container header-button">
+            <button type="button" class="button-common" id="GenerateEasyButton">
+                <span>Easy Puzzle</span>
+            </button>
+        </div>
+        <div class="button-container header-button">
+            <button type="button" class="button-common" id="GenerateMediumButton">
+                <span>Medium Puzzle</span>
+            </button>
+        </div>
+        <div class="button-container header-button">
+            <button type="button" class="button-common" id="GenerateHardButton">
+                <span>Hard Puzzle</span>
+            </button>
         </div>
 
-        <header-bottom>
-            <a href="https://github.com/danieldotwav" target="_blank">Daniel Rivas</a>
-            <div id="timer" class="timer-box">Time: 00:00</div>
-        </header-bottom>
     </div>
+
     <div>
         <div class="main-content">
             <header id="OutcomeText">&nbsp;</header>
@@ -164,6 +178,12 @@
         </div>
     </div>
 
+    <div class="header__footer">
+        <div id="timer" class="timer__box">
+            Time: 00:00
+        </div>
+    </div>
+
     <script type="text/javascript" src="dlx-solver.js"></script>
 </body>