feat(14): styled 3 controls, with css vars

for size, colors, position, this should be what i need i hope

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

@@ -539,11 +539,6 @@ video {
   right: 0px;
 }
 
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
-}
-
 .bottom-0 {
   bottom: 0px;
 }
@@ -556,26 +551,18 @@ video {
   left: 50%;
 }
 
-.left-28 {
+.left-\[var\(--left-offset\)\] {
-  left: 7rem;
+  left: var(--left-offset);
-}
-
-.right-20 {
-  right: 5rem;
-}
-
-.top-20 {
-  top: 5rem;
-}
-
-.top-28 {
-  top: 7rem;
 }
 
 .top-1\/2 {
   top: 50%;
 }
 
+.top-\[var\(--top-offset\)\] {
+  top: var(--top-offset);
+}
+
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -588,12 +575,8 @@ video {
   display: flex;
 }
 
-.grid {
+.h-3\/4 {
-  display: grid;
+  height: 75%;
-}
-
-.h-32 {
-  height: 8rem;
 }
 
 .h-\[100px\] {
@@ -608,30 +591,34 @@ video {
   height: 70px;
 }
 
+.h-\[var\(--diameter\)\] {
+  height: var(--diameter);
+}
+
 .h-screen {
   height: 100vh;
 }
 
-.h-28 {
+.w-1\/3 {
-  height: 7rem;
+  width: 33.333333%;
-}
-
-.h-24 {
-  height: 6rem;
 }
 
 .w-10\/12 {
   width: 83.333333%;
 }
 
-.w-32 {
+.w-3\/4 {
-  width: 8rem;
+  width: 75%;
 }
 
 .w-\[80px\] {
   width: 80px;
 }
 
+.w-\[var\(--diameter\)\] {
+  width: var(--diameter);
+}
+
 .w-full {
   width: 100%;
 }
@@ -640,14 +627,6 @@ video {
   width: 100vw;
 }
 
-.w-28 {
-  width: 7rem;
-}
-
-.w-24 {
-  width: 6rem;
-}
-
 .grow {
   flex-grow: 1;
 }
@@ -670,10 +649,6 @@ video {
   flex-direction: column;
 }
 
-.place-items-center {
-  place-items: center;
-}
-
 .items-center {
   align-items: center;
 }
@@ -712,21 +687,9 @@ video {
   background-image: url('images/bg-triangle.svg');
 }
 
-.from-radial-gradient-top {
+.from-\[var\(--bg-bright\)\] {
-  --tw-gradient-from: hsl(214, 47%, 23%) var(--tw-gradient-from-position);
+  --tw-gradient-from: var(--bg-bright) var(--tw-gradient-from-position);
-  --tw-gradient-to: hsl(214 47% 23% / 0) var(--tw-gradient-to-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-paper-brighter {
-  --tw-gradient-from: hsl(230, 89%, 65%) var(--tw-gradient-from-position);
-  --tw-gradient-to: hsl(230 89% 65% / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-gray-200 {
-  --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -736,22 +699,24 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.to-radial-gradient-bottom {
+.from-radial-gradient-top {
-  --tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position);
+  --tw-gradient-from: hsl(214, 47%, 23%) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(214 47% 23% / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.to-paper-darker {
+.to-\[var\(--bg-dark\)\] {
-  --tw-gradient-to: hsl(230, 89%, 62%) var(--tw-gradient-to-position);
+  --tw-gradient-to: var(--bg-dark) var(--tw-gradient-to-position);
-}
-
-.to-gray-50 {
-  --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
 }
 
 .to-gray-100 {
   --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
 }
 
+.to-radial-gradient-bottom {
+  --tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position);
+}
+
 .bg-50\% {
   background-size: 50%;
 }

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

@@ -39,6 +39,7 @@
       class="flex flex-col items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom"
     >
       <section
+        id="controls"
         class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
       >
         <h1
@@ -54,27 +55,71 @@
           ><span class="text-4xl font-extrabold">12</span>
         </h2>
       </section>
+
       <section
         class="w-full bg-center bg-no-repeat bg-50% bg-triangle-pattern h-[375px] h-[375px] relative"
       >
         <div
-          class="absolute relative top-28 left-28 w-32 h-32 bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-paper-brighter to-paper-darker"
+          id="paper"
+          class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
+          style="
+            --diameter: 8rem;
+            --bg-dark: hsl(230, 89%, 62%);
+            --bg-bright: hsl(230, 89%, 65%);
+            --top-offset: 7rem;
+            --left-offset: 6rem;
+          "
         >
           <div
-            class="absolute top-1/2 left-1/2 w-24 h-24 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
+            class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
           ></div>
           <img
             src="../public/images/icon-paper.svg"
-            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+            class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
           />
         </div>
-        <div class="absolute top-20 right-20">
+
-          <img src="../public/images/icon-scissors.svg" />
+        <div
+          id="scissors"
+          class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
+          style="
+            --diameter: 8rem;
+            --bg-dark: hsl(39, 89%, 49%);
+            --bg-bright: hsl(40, 84%, 53%);
+            --top-offset: 7rem;
+            --left-offset: 17rem;
+          "
+        >
+          <div
+            class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
+          ></div>
+          <img
+            src="../public/images/icon-scissors.svg"
+            class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
+          />
         </div>
-        <div class="absolute bottom-20 left-1/2 -translate-x-1/2">
+
-          <img src="../public/images/icon-rock.svg" />
+        <div
+          id="rock"
+          class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
+          style="
+            --diameter: 8rem;
+            --bg-dark: hsl(349, 71%, 52%);
+            --bg-bright: hsl(349, 70%, 56%);
+            --top-offset: 16rem;
+            --left-offset: 11.5rem;
+          "
+        >
+          <div
+            class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
+          ></div>
+          <img
+            src="../public/images/icon-rock.svg"
+            class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
+          />
         </div>
       </section>
+
     </main>
     <footer class="fixed inset-x-0 bottom-0 attribution">
       Challenge by

14-rock-paper-scissors/tailwind.config.js

@@ -4,10 +4,10 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'scissors-from': 'hsl(39, 89%, 49%)',
+        'scissors-dark': 'hsl(39, 89%, 49%)',
-        'scissors-to': 'hsl(40, 84%, 53%)',
+        'scissors-bright': 'hsl(40, 84%, 53%)',
-        'paper-darker': 'hsl(230, 89%, 62%)',
+        'paper-dark': 'hsl(230, 89%, 62%)',
-        'paper-brighter': 'hsl(230, 89%, 65%)',
+        'paper-bright': 'hsl(230, 89%, 65%)',
         'rock-from': 'hsl(349, 71%, 52%)',
         'rock-to': 'hsl(349, 70%, 56%)',
         'cyan-from': 'hsl(189, 59%, 53%)',