feat(14): styled static selection screen
This commit is contained in:
efim
parent
de431a4bc0
commit
bed0387575
|
|
@ -543,10 +543,6 @@ video {
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
.bottom-20 {
|
||||
bottom: 5rem;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
|
@ -575,6 +571,10 @@ video {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-3\/4 {
|
||||
height: 75%;
|
||||
}
|
||||
|
|
@ -611,6 +611,14 @@ video {
|
|||
width: 75%;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-\[375px\] {
|
||||
width: 375px;
|
||||
}
|
||||
|
||||
.w-\[80px\] {
|
||||
width: 80px;
|
||||
}
|
||||
|
|
@ -619,10 +627,6 @@ video {
|
|||
width: var(--diameter);
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
@ -653,6 +657,10 @@ video {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
|
@ -661,10 +669,18 @@ video {
|
|||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-\[3px\] {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
|
@ -674,6 +690,11 @@ video {
|
|||
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 {
|
||||
--tw-bg-opacity: 1;
|
||||
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);
|
||||
}
|
||||
|
||||
.bg-50\% {
|
||||
background-size: 50%;
|
||||
.bg-60\% {
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
.bg-center {
|
||||
|
|
@ -729,11 +750,21 @@ video {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
|
@ -742,11 +773,21 @@ video {
|
|||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
|
|
@ -773,6 +814,10 @@ video {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.tracking-widest {
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.text-score-text {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(229 64% 46% / var(--tw-text-opacity));
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@
|
|||
</head>
|
||||
<body>
|
||||
<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
|
||||
id="controls"
|
||||
id="heading"
|
||||
class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
|
||||
>
|
||||
<h1
|
||||
|
|
@ -57,7 +57,8 @@
|
|||
</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
|
||||
id="paper"
|
||||
|
|
@ -66,7 +67,7 @@
|
|||
--diameter: 8rem;
|
||||
--bg-dark: hsl(230, 89%, 62%);
|
||||
--bg-bright: hsl(230, 89%, 65%);
|
||||
--top-offset: 7rem;
|
||||
--top-offset: 6rem;
|
||||
--left-offset: 6rem;
|
||||
"
|
||||
>
|
||||
|
|
@ -86,7 +87,7 @@
|
|||
--diameter: 8rem;
|
||||
--bg-dark: hsl(39, 89%, 49%);
|
||||
--bg-bright: hsl(40, 84%, 53%);
|
||||
--top-offset: 7rem;
|
||||
--top-offset: 6rem;
|
||||
--left-offset: 17rem;
|
||||
"
|
||||
>
|
||||
|
|
@ -106,7 +107,7 @@
|
|||
--diameter: 8rem;
|
||||
--bg-dark: hsl(349, 71%, 52%);
|
||||
--bg-bright: hsl(349, 70%, 56%);
|
||||
--top-offset: 16rem;
|
||||
--top-offset: 15rem;
|
||||
--left-offset: 11.5rem;
|
||||
"
|
||||
>
|
||||
|
|
@ -120,6 +121,13 @@
|
|||
</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
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ module.exports = {
|
|||
'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%)',
|
||||
'rock-dark': 'hsl(349, 71%, 52%)',
|
||||
'rock-bright': 'hsl(349, 70%, 56%)',
|
||||
'cyan-from': 'hsl(189, 59%, 53%)',
|
||||
'cyan-to': 'hsl(189, 58%, 57%)',
|
||||
'dark-text': 'hsl(229, 25%, 31%)',
|
||||
|
|
@ -30,7 +30,7 @@ module.exports = {
|
|||
'triangle-pattern': "url('images/bg-triangle.svg')",
|
||||
},
|
||||
backgroundSize: {
|
||||
'50%': '50%',
|
||||
'60%': '60%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue