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

feat(14): initial static styling of showdown

This commit is contained in:
efim 2023-07-01 07:25:20 +00:00
parent bed0387575
commit 9fc2e959fa
4 changed files with 174 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
14-rock-paper-scissors/src/input.css
View File

@ -2,6 +2,6 @@
@tailwind components;
@tailwind utilities;
/* div, section, span { */
/* div, section, span, p { */
/* outline: 1px solid red; */
/* } */

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

@ -563,6 +563,10 @@ video {
margin-right: 0.75rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.block {
display: block;
}
@ -571,6 +575,10 @@ video {
display: flex;
}
.grid {
display: grid;
}
.h-10 {
height: 2.5rem;
}
@ -615,6 +623,10 @@ video {
width: 8rem;
}
.w-\[100px\] {
width: 100px;
}
.w-\[375px\] {
width: 375px;
}
@ -640,11 +652,25 @@ video {
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-x-\[var\(--translation\)\] {
--tw-translate-x: calc(var(--translation) * -1);
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));
}
.-translate-y-\[var\(--translation\)\] {
--tw-translate-y: calc(var(--translation) * -1);
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));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
@ -695,11 +721,21 @@ video {
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.bg-radial-gradient-top {
--tw-bg-opacity: 1;
background-color: hsl(214 47% 23% / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-radial-gradient-bottom {
--tw-bg-opacity: 1;
background-color: hsl(237 49% 15% / var(--tw-bg-opacity));
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
@ -750,9 +786,9 @@ video {
background-repeat: no-repeat;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-2 {
@ -760,19 +796,22 @@ video {
padding-bottom: 0.5rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.pl-4 {
padding-left: 1rem;
}
.pt-10 {
padding-top: 2.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -828,7 +867,7 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
/* div, section, span { */
/* div, section, span, p { */
/* outline: 1px solid red; */

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

@ -62,13 +62,15 @@
>
<div
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)]"
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] 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: 6rem;
--left-offset: 6rem;
--translation: 50%;
position: absolute;
"
>
<div
@ -82,13 +84,15 @@
<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)]"
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] 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: 6rem;
--left-offset: 17rem;
--translation: 50%;
position: absolute;
"
>
<div
@ -102,13 +106,15 @@
<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)]"
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] 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: 15rem;
--left-offset: 11.5rem;
--translation: 50%;
position: absolute;
"
>
<div

116
14-rock-paper-scissors/src/main/resources/templates/showdown.html Normal file
View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
href="../public/output.css"
th:href="'public/output.css'"
rel="stylesheet"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../public/images/favicon-32x32.png"
th:href="'public/images/favicon-32x32.png'"
/>
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap"
rel="stylesheet"
/>
<title>Frontend Mentor | Rock, Paper, Scissors</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main
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
id="heading"
class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
>
<h1
class="pl-4 text-xl font-bold leading-none text-white uppercase grow"
>
<span class="block">rock</span> <span class="block">paper</span>
<span class="block">scissors</span>
</h1>
<h2
class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md w-[80px] h-[70px] text-score-text rouned-md"
>
<span class="text-xs uppercase">Score</span
><span class="text-4xl font-extrabold">12</span>
</h2>
</section>
<section id="showdown" class="grid grid-cols-2 w-[375px] h-[375px]">
<div id="players-choice"
class="flex relative flex-col items-center pt-10"
>
<!-- This will be imported fragment -->
<div
id="rock"
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] 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: 0rem;
--left-offset: 0rem;
--translation: 0%;
position: relative;
"
>
<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>
<p class="absolute top-1/2 tracking-widest text-center text-white uppercase text-md">You picked</p>
</div>
<div id="house-choice"
class="flex relative flex-col items-center"
>
<!-- This will be imported fragment -->
<div
class="mt-14 rounded-full bg-radial-gradient-top h-[100px] w-[100px]"
>
</div>
<p class="absolute top-1/2 tracking-widest text-center text-white uppercase text-md">The house picked</p>
</div>
</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>
<footer class="fixed inset-x-0 bottom-0 attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Your Name Here</a>.
</footer>
</body>
</html>