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

feat(14): styled static selection screen

This commit is contained in:
efim 2023-07-01 05:54:34 +00:00
parent de431a4bc0
commit bed0387575
3 changed files with 72 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -543,10 +543,6 @@ video {
bottom: 0px; bottom: 0px;
} }
.bottom-20 {
bottom: 5rem;
}
.left-1\/2 { .left-1\/2 {
left: 50%; left: 50%;
} }
@ -575,6 +571,10 @@ video {
display: flex; display: flex;
} }
.h-10 {
height: 2.5rem;
}
.h-3\/4 { .h-3\/4 {
height: 75%; height: 75%;
} }
@ -611,6 +611,14 @@ video {
width: 75%; width: 75%;
} }
.w-32 {
width: 8rem;
}
.w-\[375px\] {
width: 375px;
}
.w-\[80px\] { .w-\[80px\] {
width: 80px; width: 80px;
} }
@ -619,10 +627,6 @@ video {
width: var(--diameter); width: var(--diameter);
} }
.w-full {
width: 100%;
}
.w-screen { .w-screen {
width: 100vw; width: 100vw;
} }
@ -653,6 +657,10 @@ video {
align-items: center; align-items: center;
} }
.justify-between {
justify-content: space-between;
}
.justify-around { .justify-around {
justify-content: space-around; justify-content: space-around;
} }
@ -661,10 +669,18 @@ video {
border-radius: 9999px; border-radius: 9999px;
} }
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md { .rounded-md {
border-radius: 0.375rem; border-radius: 0.375rem;
} }
.border {
border-width: 1px;
}
.border-\[3px\] { .border-\[3px\] {
border-width: 3px; border-width: 3px;
} }
@ -674,6 +690,11 @@ video {
border-color: hsl(217 16% 45% / var(--tw-border-opacity)); border-color: hsl(217 16% 45% / var(--tw-border-opacity));
} }
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.bg-white { .bg-white {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@ -717,8 +738,8 @@ video {
--tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position); --tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position);
} }
.bg-50\% { .bg-60\% {
background-size: 50%; background-size: 60%;
} }
.bg-center { .bg-center {
@ -729,11 +750,21 @@ video {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-2 { .py-2 {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.pl-4 { .pl-4 {
padding-left: 1rem; padding-left: 1rem;
} }
@ -742,11 +773,21 @@ video {
padding-top: 2rem; padding-top: 2rem;
} }
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-4xl { .text-4xl {
font-size: 2.25rem; font-size: 2.25rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-xl { .text-xl {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
@ -773,6 +814,10 @@ video {
line-height: 1; line-height: 1;
} }
.tracking-widest {
letter-spacing: 0.1em;
}
.text-score-text { .text-score-text {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(229 64% 46% / var(--tw-text-opacity)); color: hsl(229 64% 46% / var(--tw-text-opacity));

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

@ -36,10 +36,10 @@
</head> </head>
<body> <body>
<main <main
class="flex flex-col items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom" class="flex flex-col justify-between items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom"
> >
<section <section
id="controls" id="heading"
class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]" class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
> >
<h1 <h1
@ -57,7 +57,8 @@
</section> </section>
<section <section
class="w-full bg-center bg-no-repeat bg-50% bg-triangle-pattern h-[375px] h-[375px] relative" id="controls"
class=" bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative"
> >
<div <div
id="paper" id="paper"
@ -66,7 +67,7 @@
--diameter: 8rem; --diameter: 8rem;
--bg-dark: hsl(230, 89%, 62%); --bg-dark: hsl(230, 89%, 62%);
--bg-bright: hsl(230, 89%, 65%); --bg-bright: hsl(230, 89%, 65%);
--top-offset: 7rem; --top-offset: 6rem;
--left-offset: 6rem; --left-offset: 6rem;
" "
> >
@ -86,7 +87,7 @@
--diameter: 8rem; --diameter: 8rem;
--bg-dark: hsl(39, 89%, 49%); --bg-dark: hsl(39, 89%, 49%);
--bg-bright: hsl(40, 84%, 53%); --bg-bright: hsl(40, 84%, 53%);
--top-offset: 7rem; --top-offset: 6rem;
--left-offset: 17rem; --left-offset: 17rem;
" "
> >
@ -106,7 +107,7 @@
--diameter: 8rem; --diameter: 8rem;
--bg-dark: hsl(349, 71%, 52%); --bg-dark: hsl(349, 71%, 52%);
--bg-bright: hsl(349, 70%, 56%); --bg-bright: hsl(349, 70%, 56%);
--top-offset: 16rem; --top-offset: 15rem;
--left-offset: 11.5rem; --left-offset: 11.5rem;
" "
> >
@ -120,6 +121,13 @@
</div> </div>
</section> </section>
<div class="py-12">
<button
class="w-32 h-10 text-base text-2xl tracking-widest text-white uppercase rounded-lg border border-white"
>
Rules
</button>
</div>
</main> </main>
<footer class="fixed inset-x-0 bottom-0 attribution"> <footer class="fixed inset-x-0 bottom-0 attribution">
Challenge by Challenge by

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

@ -8,8 +8,8 @@ module.exports = {
'scissors-bright': 'hsl(40, 84%, 53%)', 'scissors-bright': 'hsl(40, 84%, 53%)',
'paper-dark': 'hsl(230, 89%, 62%)', 'paper-dark': 'hsl(230, 89%, 62%)',
'paper-bright': 'hsl(230, 89%, 65%)', 'paper-bright': 'hsl(230, 89%, 65%)',
'rock-from': 'hsl(349, 71%, 52%)', 'rock-dark': 'hsl(349, 71%, 52%)',
'rock-to': 'hsl(349, 70%, 56%)', 'rock-bright': 'hsl(349, 70%, 56%)',
'cyan-from': 'hsl(189, 59%, 53%)', 'cyan-from': 'hsl(189, 59%, 53%)',
'cyan-to': 'hsl(189, 58%, 57%)', 'cyan-to': 'hsl(189, 58%, 57%)',
'dark-text': 'hsl(229, 25%, 31%)', 'dark-text': 'hsl(229, 25%, 31%)',
@ -30,7 +30,7 @@ module.exports = {
'triangle-pattern': "url('images/bg-triangle.svg')", 'triangle-pattern': "url('images/bg-triangle.svg')",
}, },
backgroundSize: { backgroundSize: {
'50%': '50%', '60%': '60%',
}, },
}, },
}, },