From 59cab449208172a39f033f336d835b93536b1296 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Sun, 2 Jul 2023 12:07:13 +0000
Subject: [PATCH] feat(14): header desktop styling

---
 .../src/main/resources/public/output.css      | 51 +++++++++++++++++--
 .../src/main/resources/templates/index.html   | 10 ++--
 2 files changed, 52 insertions(+), 9 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 12a3544..c1fa4d4 100644
--- a/14-rock-paper-scissors/src/main/resources/public/output.css
+++ b/14-rock-paper-scissors/src/main/resources/public/output.css
@@ -1046,27 +1046,70 @@ video {
     top: 1.25rem;
   }
 
+  .md\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
   .md\:h-12 {
     height: 3rem;
   }
 
+  .md\:h-36 {
+    height: 9rem;
+  }
+
+  .md\:h-4\/5 {
+    height: 80%;
+  }
+
   .md\:h-\[400px\] {
     height: 400px;
   }
 
-  .md\:w-\[400px\] {
-    width: 400px;
+  .md\:w-1\/2 {
+    width: 50%;
   }
 
   .md\:w-12 {
     width: 3rem;
   }
 
-  .md\:rounded-xl {
-    border-radius: 0.75rem;
+  .md\:w-40 {
+    width: 10rem;
+  }
+
+  .md\:w-\[400px\] {
+    width: 400px;
   }
 
   .md\:rounded-lg {
     border-radius: 0.5rem;
   }
+
+  .md\:rounded-xl {
+    border-radius: 0.75rem;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .md\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:leading-\[2\.2rem\] {
+    line-height: 2.2rem;
+  }
+
+  .md\:leading-none {
+    line-height: 1;
+  }
 }
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 a523de7..8c635f0 100644
--- a/14-rock-paper-scissors/src/main/resources/templates/index.html
+++ b/14-rock-paper-scissors/src/main/resources/templates/index.html
@@ -41,19 +41,19 @@
     >
       <section
         id="heading"
-        class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
+        class="flex flex-row items-center w-10/12 rounded-md md:w-1/2 md:h-36 md:rounded-xl border-[3px] border-header-outline h-[100px]"
       >
         <h1
-          class="pl-4 text-xl font-bold leading-none text-white uppercase grow"
+          class="pl-4 text-xl font-bold leading-none text-white uppercase md:text-5xl grow md:leading-[2.2rem]"
         >
           <span class="block">rock</span> <span class="block">paper</span>
           <span class="block">scissors</span>
         </h1>
         <h2
-          class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md w-[80px] h-[70px] text-score-text rouned-md"
+          class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md md:mr-5 md:w-40 md:h-4/5 md:rounded-lg w-[80px] h-[70px] text-score-text rouned-md"
         >
-          <span class="text-xs uppercase">Score</span>
-          <span id="the-score-number" class="text-4xl font-extrabold">12</span>
+          <span class="text-xs uppercase md:text-xl md:leading-none">Score</span>
+          <span id="the-score-number" class="text-4xl font-extrabold md:text-6xl">12</span>
           <script type="text/javascript">
             document.body.addEventListener("updateScore", function (evt) {
               let scoreElement = document.querySelector("#the-score-number");