From a7dbfffa8e21f36d243290506386bf26ee7c7706 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Sun, 2 Jul 2023 11:50:47 +0000
Subject: [PATCH] feat(14): styling of desktop rules modal

---
 .../src/main/resources/public/output.css      | 38 +++++++++++++++++
 .../src/main/resources/templates/index.html   | 42 +++++++++++--------
 2 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/14-rock-paper-scissors/src/main/resources/public/output.css b/14-rock-paper-scissors/src/main/resources/public/output.css
index ad45726..12a3544 100644
--- a/14-rock-paper-scissors/src/main/resources/public/output.css
+++ b/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;
+  }
+}
diff --git a/14-rock-paper-scissors/src/main/resources/templates/index.html b/14-rock-paper-scissors/src/main/resources/templates/index.html
index ff095f6..a523de7 100644
--- a/14-rock-paper-scissors/src/main/resources/templates/index.html
+++ b/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
-        class="flex flex-col justify-between w-full h-full"
-        >
+        <div 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"
-          >Rules</h1>
+            class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase md:h-12"
+          >
+            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 openButton = document.getElementById("rules-button");
-         const closeButton = document.getElementById("close-dialog-button");
-         openButton.addEventListener("click", function() {
-           dialog.showModal();
-         });
-         closeButton.addEventListener("click", function() {
-           dialog.close();
-         });
+          const dialog = document.getElementById("rules-dialog");
+          const openButton = document.getElementById("rules-button");
+          const closeButton = document.getElementById("close-dialog-button");
+          openButton.addEventListener("click", function () {
+            dialog.showModal();
+          });
+          closeButton.addEventListener("click", function () {
+            dialog.close();
+          });
         </script>
       </div>
     </main>