1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
@tailwind base;
@tailwind components;
@tailwind utilities;
/* debug class *//*
* {
border: 1px solid red;
}
*/
@layer components {
/* Game Card */
.gameCard {
aspect-ratio: 5/7;
width: 18.75em; /*300px;*/
perspective: 2500px;
@apply relative flex justify-center items-end;
}
.gameCardCoverImg {
@apply w-full h-full object-cover rounded-md;
}
.gameCardWrapper {
transition: all 0.5s;
z-index: -1;
box-shadow: -15px 15px 32px -8px rgba(0, 0, 0, 0.75);
@apply absolute w-full h-full rounded-md;
}
.gameCard:hover .gameCardWrapper {
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
box-shadow: -10px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.gameCardWrapper::before,
.gameCardWrapper::after {
content: "";
transition: all 0.5s;
@apply opacity-0 w-full h-20 absolute left-0 rounded-md;
}
.gameCardWrapper::before {
background-image: linear-gradient(
to top,
transparent 46%,
rgba(12, 13, 19, 0.5) 68%,
rgba(12, 13, 19) 97%
);
@apply top-0 h-full rounded-md;
}
.gameCardWrapper::after {
background-image: linear-gradient(
to bottom,
transparent 46%,
rgba(12, 13, 19, 0.5) 68%,
rgba(12, 13, 19) 97%
);
@apply bottom-0 opacity-100 rounded-md;
}
.gameCard:hover .gameCardWrapper::before,
.gameCardWrapper::after {
@apply opacity-100;
}
.gameTitleImg {
padding: 5%;
transition: transform 0.5s;
@apply w-full max-h-40 object-contain;
}
.gameCard:hover .gameTitleImg {
transform: translate3d(0%, -50px, 100px);
}
.gameCharacterImg {
transition: all 0.5s;
z-index: -1;
@apply w-full max-h-80 object-contain opacity-0 absolute;
}
.gameCard:hover .gameCharacterImg {
transform: translate3d(0%, -30%, 100px);
@apply opacity-100;
}
/* Sidebar */
@keyframes sidebar-enter {
from {
left: -16rem;
@apply -left-72;
}
to {
@apply left-0;
}
}
@keyframes sidebar-exit {
from {
@apply left-0;
}
to {
@apply -left-72;
}
}
@media (max-width: 768px)
{
.sidebarInit {
@apply -left-72;
}
.sidebarOpen {
animation-name: sidebar-enter;
@apply left-0;
}
.sidebarClosed {
animation-name: sidebar-exit;
@apply -left-72;
}
.sidebar-animation {
animation-duration: 0.5s;
animation-iteration-count: 1;
}
}
}
|
