From 364d8a737aa068a440591f20b5bcbc4af0870f5d Mon Sep 17 00:00:00 2001 From: efim Date: Sat, 1 Jul 2023 04:58:37 +0000 Subject: [PATCH] feat: initial styling of control --- 14-rock-paper-scissors/src/input.css | 4 + .../src/main/resources/public/output.css | 302 ++++++++++++++++++ .../src/main/resources/templates/index.html | 52 ++- 14-rock-paper-scissors/tailwind.config.js | 17 +- 4 files changed, 365 insertions(+), 10 deletions(-) diff --git a/14-rock-paper-scissors/src/input.css b/14-rock-paper-scissors/src/input.css index b5c61c9..23f5843 100644 --- a/14-rock-paper-scissors/src/input.css +++ b/14-rock-paper-scissors/src/input.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +/* div, section, span { */ +/* outline: 1px solid red; */ +/* } */ 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 4d92b94..67a8640 100644 --- a/14-rock-paper-scissors/src/main/resources/public/output.css +++ b/14-rock-paper-scissors/src/main/resources/public/output.css @@ -521,3 +521,305 @@ video { --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } + +.fixed { + position: fixed; +} + +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.inset-x-0 { + left: 0px; + right: 0px; +} + +.inset-y-0 { + top: 0px; + bottom: 0px; +} + +.bottom-0 { + bottom: 0px; +} + +.bottom-20 { + bottom: 5rem; +} + +.left-1\/2 { + left: 50%; +} + +.left-28 { + left: 7rem; +} + +.right-20 { + right: 5rem; +} + +.top-20 { + top: 5rem; +} + +.top-28 { + top: 7rem; +} + +.top-1\/2 { + top: 50%; +} + +.mr-3 { + margin-right: 0.75rem; +} + +.block { + display: block; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.h-32 { + height: 8rem; +} + +.h-\[100px\] { + height: 100px; +} + +.h-\[375px\] { + height: 375px; +} + +.h-\[70px\] { + height: 70px; +} + +.h-screen { + height: 100vh; +} + +.h-28 { + height: 7rem; +} + +.h-24 { + height: 6rem; +} + +.w-10\/12 { + width: 83.333333%; +} + +.w-32 { + width: 8rem; +} + +.w-\[80px\] { + width: 80px; +} + +.w-full { + width: 100%; +} + +.w-screen { + width: 100vw; +} + +.w-28 { + width: 7rem; +} + +.w-24 { + width: 6rem; +} + +.grow { + flex-grow: 1; +} + +.-translate-x-1\/2 { + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-1\/2 { + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.flex-row { + flex-direction: row; +} + +.flex-col { + flex-direction: column; +} + +.place-items-center { + place-items: center; +} + +.items-center { + align-items: center; +} + +.justify-around { + justify-content: space-around; +} + +.rounded-full { + border-radius: 9999px; +} + +.rounded-md { + border-radius: 0.375rem; +} + +.border-\[3px\] { + border-width: 3px; +} + +.border-header-outline { + --tw-border-opacity: 1; + border-color: hsl(217 16% 45% / var(--tw-border-opacity)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.bg-gradient-to-b { + background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); +} + +.bg-triangle-pattern { + background-image: url('images/bg-triangle.svg'); +} + +.from-radial-gradient-top { + --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); +} + +.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); +} + +.from-gray-300 { + --tw-gradient-from: #d1d5db var(--tw-gradient-from-position); + --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.to-radial-gradient-bottom { + --tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position); +} + +.to-paper-darker { + --tw-gradient-to: hsl(230, 89%, 62%) 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); +} + +.bg-50\% { + background-size: 50%; +} + +.bg-center { + background-position: center; +} + +.bg-no-repeat { + background-repeat: no-repeat; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.pl-4 { + padding-left: 1rem; +} + +.pt-8 { + padding-top: 2rem; +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.font-bold { + font-weight: 700; +} + +.font-extrabold { + font-weight: 800; +} + +.uppercase { + text-transform: uppercase; +} + +.leading-none { + line-height: 1; +} + +.text-score-text { + --tw-text-opacity: 1; + color: hsl(229 64% 46% / var(--tw-text-opacity)); +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +/* div, section, span { */ + +/* outline: 1px solid red; */ + +/* } */ 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 56e4ec0..9d66cb7 100644 --- a/14-rock-paper-scissors/src/main/resources/templates/index.html +++ b/14-rock-paper-scissors/src/main/resources/templates/index.html @@ -17,11 +17,12 @@ href="../public/images/favicon-32x32.png" th:href="'public/images/favicon-32x32.png'" /> - + Frontend Mentor | Rock, Paper, Scissors - Score Rules You Picked The House Picked You Win You Lose Play Again - -
+
+
+

+ rock paper + scissors +

+

+ Score12 +

+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ diff --git a/14-rock-paper-scissors/tailwind.config.js b/14-rock-paper-scissors/tailwind.config.js index 8e751e0..4f315d0 100644 --- a/14-rock-paper-scissors/tailwind.config.js +++ b/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: [],