Merge pull request #14 from sarfarazstark/challenge-progress

Challenge progress
sarfarazstark · Aug 1, 2024 · fb4692a · fb4692a
2 parents b126f34 + 8947517
commit fb4692a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 42 deletions.
diff --git a/rock-paper-scissors-master/index.html b/rock-paper-scissors-master/index.html
@@ -13,35 +13,36 @@
 </head>
 
 <body
-  class="bg-radial-gradient bg-no-repeat bg-cover w-screen h-auto min-h-full md:min-h-screen flex flex-col gap-32 lg:gap-0 lg:grid lg:items-start grid-cols-4 justify-items-center items-center p-5 py-8 font-barlow relative">
-  <main class="col-span-2 col-start-2 w-full h-auto md:max-w-3xl flex flex-col items-center gap-32 lg:gap-10">
-    <header class="border-[3px] border-rps-header-outline rounded-xl w-full flex justify-between p-8">
-      <img src="./images/logo.svg" alt="logo" class="">
+  class="bg-radial-gradient bg-no-repeat bg-cover md:w-screen lg:w-full w-full h-auto min-h-full md:min-h-screen flex flex-col gap-24 lg:gap-0 lg:grid lg:items-start grid-cols-4 justify-items-center items-center py-8 font-barlow relative">
+  <main class="col-span-2 col-start-2 w-full h-auto md:max-w-3xl flex flex-col items-center gap-24 lg:gap-10">
+    <header
+      class="border-[3px] border-rps-header-outline rounded-xl flex justify-between items-center p-8 m-5 md:m-0 md:w-full">
+      <img src="./images/logo.svg" class="w-2/5" alt="logo">
       <div class="bg-white px-10 py-4 text-center rounded-md">
         <small class="text-xs md:text-base font-semibold tracking-widest uppercase text-rps-score-text">Score</small>
         <h2 class="font-bold text-4xl md:text-6xl leading-[0.9] text-rps-dark-text" id="score">00</h2>
       </div>
     </header>
 
-    <ul id="choose" class="grid grid-cols-2 gap-10 items-end justify-items-center lg:p-10 p-0 relative">
+    <ul id="choose" class="grid grid-cols-2 gap-6 items-end justify-items-center lg:p-10 p-2 relative">
       <li data-beat="2" data-index="0" class="rounded-full p-5 pb-6 justify-self-end shadow-rps-inner-shadow cursor-pointer bg-rps-paper-gradient-end 
         active:shadow-none active:pb-5 group">
         <button
-          class="bg-white py-8 px-10 rounded-full group-active:border-none group-active:py-9 border-rps-header-outline border-opacity-35 border-t-[6px]">
+          class="bg-white w-32 h-32 flex justify-center items-center rounded-full group-active:border-none group-active:py-9 border-rps-header-outline border-opacity-35 border-t-[6px]">
           <img src="./images/icon-paper.svg" alt="paper">
         </button>
       </li>
       <li data-beat="0" data-index="1"
         class="rounded-full p-5 pb-6 justify-self-start shadow-rps-inner-shadow bg-rps-scissors-gradient-start cursor-pointer active:shadow-none active:pb-5 group">
         <button
-          class="bg-white py-8 px-10 rounded-full group-active:border-none group-active:py-9 border-rps-header-outline border-opacity-35 border-t-[6px]">
+          class="bg-white w-32 h-32 flex justify-center items-center rounded-full group-active:border-none group-active:py-9 border-rps-header-outline border-opacity-35 border-t-[6px]">
           <img src="./images/icon-scissors.svg" alt="scissors">
         </button>
       </li>
       <li data-beat="1" data-index="2"
         class="col-span-2 rounded-full p-5 pb-6 shadow-rps-inner-shadow bg-rps-rock-gradient-start cursor-pointer active:shadow-none active:pb-5 active:mt-1 group">
         <button
-          class="bg-white py-9 px-10 rounded-full group-active:border-none group-active:py-10 border-rps-header-outline border-opacity-35 border-t-[6px]">
+          class="bg-white w-32 h-32 flex justify-center items-center rounded-full group-active:border-none group-active:py-10 border-rps-header-outline border-opacity-35 border-t-[6px]">
           <img src="./images/icon-rock.svg" alt="rock">
         </button>
       </li>

diff --git a/rock-paper-scissors-master/style.css b/rock-paper-scissors-master/style.css
@@ -800,6 +800,10 @@ video {
   margin: 0px;
 }
 
+.m-5 {
+  margin: 1.25rem;
+}
+
 .my-14 {
   margin-top: 3.5rem;
   margin-bottom: 3.5rem;
@@ -1090,6 +1094,14 @@ video {
   height: 0.5rem;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1134,6 +1146,10 @@ video {
   min-height: 24rem;
 }
 
+.min-h-full {
+  min-height: 100%;
+}
+
 .min-h-max {
   min-height: -moz-max-content;
   min-height: max-content;
@@ -1148,14 +1164,6 @@ video {
   min-height: 100vh;
 }
 
-.min-h-\[900px\] {
-  min-height: 900px;
-}
-
-.min-h-full {
-  min-height: 100%;
-}
-
 .w-1 {
   width: 0.25rem;
 }
@@ -1184,6 +1192,10 @@ video {
   width: 0.5rem;
 }
 
+.w-2\/5 {
+  width: 40%;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1252,10 +1264,6 @@ video {
   width: 100vw;
 }
 
-.min-w-\[600px\] {
-  min-width: 600px;
-}
-
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -1359,11 +1367,11 @@ video {
 
 @keyframes spread {
   0% {
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05),inset 0 -6px 0px rgba(0,0,0,0.35);;
   }
 
   100% {
-    box-shadow: 0 0 0px 40px rgba(255, 255, 255, 0.05), 0 0 0px 80px rgba(255, 255, 255, 0.03), 0 0 0px 120px rgba(255, 255, 255, 0.01);
+    box-shadow: 0 0 0px 40px rgba(255, 255, 255, 0.05), 0 0 0px 80px rgba(255, 255, 255, 0.03), 0 0 0px 120px rgba(255, 255, 255, 0.01), inset 0 -6px 0px rgba(0,0,0,0.35);;
   }
 }
 
@@ -1523,10 +1531,18 @@ video {
   gap: 5rem;
 }
 
+.gap-24 {
+  gap: 6rem;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
 
+.gap-32 {
+  gap: 8rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -1555,10 +1571,6 @@ video {
   gap: 2rem;
 }
 
-.gap-32 {
-  gap: 8rem;
-}
-
 .gap-x-12 {
   -moz-column-gap: 3rem;
        column-gap: 3rem;
@@ -3031,6 +3043,10 @@ input[type="number"] {
     grid-row-start: 2;
   }
 
+  .md\:m-0 {
+    margin: 0px;
+  }
+
   .md\:mt-12 {
     margin-top: 3rem;
   }
@@ -3047,10 +3063,22 @@ input[type="number"] {
     width: 1.5rem;
   }
 
+  .md\:w-full {
+    width: 100%;
+  }
+
+  .md\:w-screen {
+    width: 100vw;
+  }
+
   .md\:min-w-\[600px\] {
     min-width: 600px;
   }
 
+  .md\:max-w-3xl {
+    max-width: 48rem;
+  }
+
   .md\:max-w-lg {
     max-width: 32rem;
   }
@@ -3059,10 +3087,6 @@ input[type="number"] {
     max-width: 28rem;
   }
 
-  .md\:max-w-3xl {
-    max-width: 48rem;
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3220,10 +3244,6 @@ input[type="number"] {
     max-width: 42rem;
   }
 
-  .lg\:max-w-3xl {
-    max-width: 48rem;
-  }
-
   .lg\:max-w-5xl {
     max-width: 64rem;
   }
@@ -3434,12 +3454,6 @@ input[type="number"] {
   }
 }
 
-@media (min-width: 1280px) {
-  .xl\:min-h-\[clamp\(750px\2c 100vh\2c 100vh\)\] {
-    min-height: clamp(750px,100vh,100vh);
-  }
-}
-
 @media (min-width: 1536px) {
   .\32xl\:absolute {
     position: absolute;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -85,11 +85,12 @@ module.exports = {
 			keyframes: {
 				spread: {
 					'0%': {
-						boxShadow: '0 0 0 0 rgba(0, 0, 0, 0.05)',
+						boxShadow:
+							'0 0 0 0 rgba(0, 0, 0, 0.05),inset 0 -6px 0px rgba(0,0,0,0.35);',
 					},
 					'100%': {
 						boxShadow:
-							'0 0 0px 40px rgba(255, 255, 255, 0.05), 0 0 0px 80px rgba(255, 255, 255, 0.03), 0 0 0px 120px rgba(255, 255, 255, 0.01)',
+							'0 0 0px 40px rgba(255, 255, 255, 0.05), 0 0 0px 80px rgba(255, 255, 255, 0.03), 0 0 0px 120px rgba(255, 255, 255, 0.01), inset 0 -6px 0px rgba(0,0,0,0.35);',
 					},
 				},
 			},