[Flask] Aggregate your news and vote for the content you care about.
Homepage: only use transitions.
Next step is to try only keyframes for more fine-grain control.
app/static/styles/default.css
@@ -4,9 +4,10 @@
4
4
--home: rgba(200, 200, 200, 0.7);
5
5
--yes: rgba(0, 255, 0, 0.7);
6
6
--no: rgba(255, 0, 0, 0.7);
7
Removed:
background-image: url(../img/home.png);
8
Removed:
background-repeat: repeat-x;
9
7
font-size: 20;
8
Added:
--fast-speed: 0.2s;
9
Added:
--med-speed: 0.4s;
10
Added:
--slow-speed: 1s;
10
11
}
11
12
12
13
* {
app/static/styles/home.css
@@ -1,29 +1,39 @@
1
1
/* Tabs. */
2
2
.tab-yes {
3
3
height: 100%;
4
Removed:
width: 3%;
4
Added:
width: 10%;
5
5
float: left;
6
6
position: relative;
7
7
background: var(--yes);
8
8
}
9
9
.tab-yes:hover ~ .feed-post {
10
Removed:
width: 4%;
11
Removed:
transition: 0.2s;
10
Added:
left: 6%;
11
Added:
right: 0%;
12
Added:
transition: var(--fast-transition);
12
13
}
13
14
.tab-no {
14
15
height: 100%;
15
Removed:
width: 3%;
16
Added:
width: 10%;
16
17
float: right;
17
18
position: relative;
18
19
background: var(--no);
19
20
}
20
Removed:
.tab-no:hover {width: 4%; transition: 0.2s;}
21
Added:
.tab-no:hover ~ .feed-post {
22
Added:
left: 0%;
23
Added:
right: 6%;
24
Added:
transition: var(--fast-transition);
25
Added:
}
21
26
22
27
/* Feed of posts. */
23
28
.feed-post {
24
29
height: 100%;
30
Added:
left: 3%;
31
Added:
right: 3%;
32
Added:
background: white;
33
Added:
background-image: url(../img/home.png);
34
Added:
background-repeat: repeat-x;
25
35
display: flex;
26
Removed:
position: relative;
36
Added:
position: absolute;
27
37
flex-wrap: wrap;
28
38
overflow: auto;
29
39
justify-content: space-between;
@@ -31,6 +41,7 @@
31
41
32
42
.post-wrapper {
33
43
position: relative;
44
Added:
z-index: 1;
34
45
max-height: 25%;
35
46
max-width: 40%;
36
47
perspective: 600px;
@@ -41,38 +52,35 @@
41
52
position: relative;
42
53
height: 70%;
43
54
background: white;
44
Removed:
z-index: -1;
55
Added:
z-index: 0;
45
56
border-radius: 12px;
46
57
padding: 1rem;
47
58
margin: 1rem;
48
59
overflow: hidden;
60
Added:
transition-duration: var(--fast-speed);
49
61
}
50
Removed:
.post:hover {overflow: auto;}
62
Added:
.post:hover {
63
Added:
overflow: auto;
64
Added:
height: 40%;
65
Added:
}
51
66
.post:hover + .btn-wrapper {
52
Removed:
opacity: 100%;
53
Removed:
animation: btn-wrapper;
54
Removed:
animation-duration: 1s;
67
Added:
/* opacity: 100%; */
68
Added:
transform: rotateX(0deg);
55
69
}
56
70
57
Removed:
@keyframes btn-wrapper {
58
Removed:
from{transform: rotateX(-90deg);}
59
Removed:
to {transform: rotateX(0deg);}
60
Removed:
}
61
Removed:
62
71
.btn-wrapper {
63
72
position: relative;
64
Removed:
top: -0.6rem;
65
73
z-index: 1;
66
74
transform: rotateX(-90deg);
67
Removed:
/* transition: 400ms transform ease-in-out; */
68
Removed:
/* animation-fill-mode: forwards; */
75
Added:
transition-duration: var(--med-speed);
69
76
}
70
77
71
78
.btn-yes {
72
79
height: 25%;
73
Removed:
width: 45%;
80
Added:
width: 40%;
74
81
float: left;
75
82
left: 1rem;
83
Added:
z-index: 2;
76
84
position: relative;
77
85
background: var(--yes);
78
86
border-radius: 12px;
@@ -80,7 +88,7 @@
80
88
81
89
.btn-no {
82
90
height: 25%;
83
Removed:
width: 45%;
91
Added:
width: 40%;
84
92
float: right;
85
93
right: 1rem;
86
94
position: relative;
app/templates/home.html
@@ -17,7 +17,6 @@
17
17
<h2>{{post.date}}</h2>
18
18
<p>{{post.content}}</p>
19
19
</div>
20
Removed:
21
20
<div class="btn-wrapper">
22
21
<a href="{{ url_for('home') }}" class="btn-yes"></a>
23
22
<a href="{{ url_for('home') }}" class="btn-no"></a>