feat(14): styling of desktop rules modal

14-rock-paper-scissors/src/main/resources/public/output.css

@@ -1032,3 +1032,41 @@ video {
   animation: quickly-appear 2s;
   transform-origin: center;
 }
+
+@media (min-width: 768px) {
+  .md\:absolute {
+    position: absolute;
+  }
+
+  .md\:end-5 {
+    inset-inline-end: 1.25rem;
+  }
+
+  .md\:top-5 {
+    top: 1.25rem;
+  }
+
+  .md\:h-12 {
+    height: 3rem;
+  }
+
+  .md\:h-\[400px\] {
+    height: 400px;
+  }
+
+  .md\:w-\[400px\] {
+    width: 400px;
+  }
+
+  .md\:w-12 {
+    width: 3rem;
+  }
+
+  .md\:rounded-xl {
+    border-radius: 0.75rem;
+  }
+
+  .md\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+}

14-rock-paper-scissors/src/main/resources/templates/index.html

@@ -178,22 +178,28 @@
       <!-- This is rules overlay modal window -->
       <dialog
         id="rules-dialog"
-        class="w-screen h-screen"
+        class="w-screen h-screen md:rounded-lg md:w-[400px] md:h-[400px]"
       >
-        <div
+        <div class="flex flex-col justify-between w-full h-full">
-        class="flex flex-col justify-between w-full h-full"
-        >
           <h1
-            class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase"
+            class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase md:h-12"
-          >Rules</h1>
+          >
+            Rules
+          </h1>
           <div class="grid place-content-center grow">
-            <img src="../public/images/image-rules.svg" alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock." />
+            <img
+              src="../public/images/image-rules.svg"
+              alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock."
+            />
           </div>
           <button
             id="close-dialog-button"
-            class="grid place-content-center h-32"
+            class="grid place-content-center h-32 md:absolute md:top-5 md:w-12 md:h-12 md:end-5"
           >
-            <img src="../public/images/icon-close.svg" alt="Close rules display" />
+            <img
+              src="../public/images/icon-close.svg"
+              alt="Close rules display"
+            />
           </button>
         </div>
       </dialog>
@@ -206,15 +212,15 @@
           Rules
         </button>
         <script type="text/javascript">
-         const dialog = document.getElementById("rules-dialog");
+          const dialog = document.getElementById("rules-dialog");
-         const openButton = document.getElementById("rules-button");
+          const openButton = document.getElementById("rules-button");
-         const closeButton = document.getElementById("close-dialog-button");
+          const closeButton = document.getElementById("close-dialog-button");
-         openButton.addEventListener("click", function() {
+          openButton.addEventListener("click", function () {
-           dialog.showModal();
+            dialog.showModal();
-         });
+          });
-         closeButton.addEventListener("click", function() {
+          closeButton.addEventListener("click", function () {
-           dialog.close();
+            dialog.close();
-         });
+          });
         </script>
       </div>
     </main>