[Flask] Aggregate your news and vote for the content you care about.
Add perspective to btn-wrapper.
app/static/styles/home.css
@@ -6,7 +6,10 @@
6
6
position: relative;
7
7
background: var(--yes);
8
8
}
9
Removed:
.tab-yes:hover {width: 4%; transition: 0.2s;}
9
Added:
.tab-yes:hover ~ .feed-post {
10
Added:
width: 4%;
11
Added:
transition: 0.2s;
12
Added:
}
10
13
.tab-no {
11
14
height: 100%;
12
15
width: 3%;
@@ -29,28 +32,41 @@
29
32
.post-wrapper {
30
33
position: relative;
31
34
max-height: 25%;
32
Removed:
max-width: 33%;
35
Added:
max-width: 40%;
36
Added:
perspective: 600px;
37
Added:
perspective-origin: bottom;
33
38
}
34
39
35
40
.post {
41
Added:
position: relative;
36
42
height: 70%;
37
43
background: white;
44
Added:
z-index: -1;
38
45
border-radius: 12px;
39
46
padding: 1rem;
40
47
margin: 1rem;
41
48
overflow: hidden;
42
49
}
43
50
.post:hover {overflow: auto;}
44
Removed:
.post:hover + .btn-wrapper {transform: rotateX(0deg);}
51
Added:
.post:hover + .btn-wrapper {
52
Added:
opacity: 100%;
53
Added:
animation: btn-wrapper;
54
Added:
animation-duration: 1s;
55
Added:
}
45
56
57
Added:
@keyframes btn-wrapper {
58
Added:
from{transform: rotateX(-90deg);}
59
Added:
to {transform: rotateX(0deg);}
60
Added:
}
61
Added:
46
62
.btn-wrapper {
47
63
position: relative;
48
64
top: -0.6rem;
49
65
z-index: 1;
50
Removed:
transition: 400ms transform ease-in-out;
51
Removed:
transform: rotateX(90deg);
66
Added:
transform: rotateX(-90deg);
67
Added:
/* transition: 400ms transform ease-in-out; */
68
Added:
/* animation-fill-mode: forwards; */
52
69
}
53
Removed:
.btn-wrapper:hover {transform: rotateX(0deg);}
54
70
55
71
.btn-yes {
56
72
height: 25%;