feat: initial styling of control

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

@@ -6,8 +6,8 @@ module.exports = {
       colors: {
         'scissors-from': 'hsl(39, 89%, 49%)',
         'scissors-to': 'hsl(40, 84%, 53%)',
-        'paper-from': 'hsl(230, 89%, 62%)',
-        'paper-to': 'hsl(230, 89%, 65%)',
+        'paper-darker': 'hsl(230, 89%, 62%)',
+        'paper-brighter': 'hsl(230, 89%, 65%)',
         'rock-from': 'hsl(349, 71%, 52%)',
         'rock-to': 'hsl(349, 70%, 56%)',
         'cyan-from': 'hsl(189, 59%, 53%)',
@@ -15,8 +15,8 @@ module.exports = {
         'dark-text': 'hsl(229, 25%, 31%)',
         'score-text': 'hsl(229, 64%, 46%)',
         'header-outline': 'hsl(217, 16%, 45%)',
-        'radial-gradient-bottom': 'hsl(214, 47%, 23%)',
-        'radial-gradient-top': 'hsl(237, 49%, 15%)',
+        'radial-gradient-top': 'hsl(214, 47%, 23%)',
+        'radial-gradient-bottom': 'hsl(237, 49%, 15%)',
       },
       fontFamily: {
         'sans': ['Barlow Semi Condensed', 'sans-serif'], // This will set Roboto as the default sans font
@@ -24,7 +24,14 @@ module.exports = {
       fontWeight: {
         'normal': 400,
         'bold': 700,
-      }
+      },
+      backgroundImage: {
+        // this is still from the output.css hmmm.
+        'triangle-pattern': "url('images/bg-triangle.svg')",
+      },
+      backgroundSize: {
+        '50%': '50%',
+      },
     },
   },
   plugins: [],