feat: initial styling of control
This commit is contained in:
efim
parent
6aa5c25a5e
commit
364d8a737a
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* div, section, span { */
|
||||
/* outline: 1px solid red; */
|
||||
/* } */
|
||||
|
|
|
|||
|
|
@ -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; */
|
||||
|
||||
/* } */
|
||||
|
|
|
|||
|
|
@ -17,11 +17,12 @@
|
|||
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">
|
||||
<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>
|
||||
|
||||
Score Rules You Picked The House Picked You Win You Lose Play Again
|
||||
|
||||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||
<style>
|
||||
.attribution {
|
||||
|
|
@ -34,11 +35,52 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="attribution">
|
||||
<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"
|
||||
>
|
||||
<section
|
||||
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
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
></div>
|
||||
<img
|
||||
src="../public/images/icon-paper.svg"
|
||||
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||
/>
|
||||
</div>
|
||||
<div class="absolute top-20 right-20">
|
||||
<img src="../public/images/icon-scissors.svg" />
|
||||
</div>
|
||||
<div class="absolute bottom-20 left-1/2 -translate-x-1/2">
|
||||
<img src="../public/images/icon-rock.svg" />
|
||||
</div>
|
||||
</section>
|
||||
</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>.
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue