efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

for size, colors, position, this should be what i need i hope
This commit is contained in:
efim 2023-07-01 05:38:59 +00:00
parent 364d8a737a
commit de431a4bc0
3 changed files with 89 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: 7rem;
}
.right-20 {
right: 5rem;
}
.top-20 {
top: 5rem;
}
.top-28 {
top: 7rem;
.left-\[var\(--left-offset\)\] {
left: var(--left-offset);
}
.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 {
display: grid;
}
.h-32 {
height: 8rem;
.h-3\/4 {
height: 75%;
}
.h-\[100px\] {
@ -608,30 +591,34 @@ video {
height: 70px;
}
.h-\[var\(--diameter\)\] {
height: var(--diameter);
}
.h-screen {
height: 100vh;
}
.h-28 {
height: 7rem;
}
.h-24 {
height: 6rem;
.w-1\/3 {
width: 33.333333%;
}
.w-10\/12 {
width: 83.333333%;
}
.w-32 {
width: 8rem;
.w-3\/4 {
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 {
--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);
.from-\[var\(--bg-bright\)\] {
--tw-gradient-from: var(--bg-bright) var(--tw-gradient-from-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);
}
@ -736,22 +699,24 @@ video {
--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);
.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);
}
.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-\[var\(--bg-dark\)\] {
--tw-gradient-to: var(--bg-dark) 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%;
}

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

@ -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

8
14-rock-paper-scissors/tailwind.config.js
View File

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