[Flask] Aggregate your news and vote for the content you care about.
Homepage feed becomes linear if viewport < 800px.
Ah, responsive layout for mobile users.
app/static/styles/default.css
@@ -4,27 +4,32 @@
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:
font-size: 20;
7
Added:
font-size: 18;
8
8
--fast-speed: 0.2s;
9
9
--med-speed: 0.4s;
10
10
--slow-speed: 1s;
11
11
}
12
12
13
Removed:
* {
14
Removed:
margin: 0;
15
Removed:
padding: 0;
16
Removed:
}
13
Added:
* {}
17
14
18
15
body {
19
16
font-family: 'Liberation Sans', sans-serif;
20
17
line-height: 1.2;
18
Added:
margin: 0;
19
Added:
padding: 0;
21
20
}
22
21
23
22
h1 {
23
Added:
margin-left: 2rem;
24
Added:
margin-right: 1rem;
24
25
}
25
26
26
27
h2 {
28
Added:
margin-left: 1rem;
29
Added:
margin-right: 1rem;
27
30
}
28
31
29
32
p {
33
Added:
margin-left: 1rem;
34
Added:
margin-right: 1rem;
30
35
}
app/static/styles/home.css
@@ -40,52 +40,62 @@
40
40
}
41
41
42
42
.post-wrapper {
43
Added:
/* background: blue; */
43
44
position: relative;
44
Removed:
max-height: 25%;
45
Added:
/* height: 20rem; */
46
Added:
height: 20%;
45
47
max-width: 40%;
46
48
margin: 1rem;
47
Removed:
/* background: blue; */
48
49
perspective: 600px;
49
50
}
50
51
51
52
.post {
52
53
position: relative;
53
54
margin: 0 auto;
54
Removed:
height: 80%;
55
Added:
height: 100%;
55
56
width: 100%;
56
57
background: white;
57
58
border-radius: 12px;
58
Removed:
padding: 1rem;
59
59
overflow: hidden;
60
Removed:
transition-duration: 0.4s;
60
Added:
transition-duration: var(--med-speed);
61
61
}
62
62
.post-wrapper:hover > .post {
63
Removed:
width: 60%;
64
Removed:
overflow: auto;
63
Added:
width: 65%;
64
Added:
overflow-y: auto;
65
65
}
66
66
67
67
.btn-yes {
68
68
height: 100%;
69
Removed:
width: 20%;
69
Added:
width: 15%;
70
70
position: absolute;
71
71
left: 0;
72
72
background: var(--yes);
73
Removed:
border-radius: 12px;
73
Added:
border-radius: 8px;
74
74
transform: rotateY(-90deg);
75
Removed:
transition-duration: 1s;
75
Added:
transition-duration: var(--slow-speed);
76
76
transform-origin: right;
77
77
}
78
78
.post-wrapper:hover > .btn-yes {transform: rotateY(0deg);}
79
79
80
80
.btn-no {
81
81
height: 100%;
82
Removed:
width: 20%;
82
Added:
width: 15%;
83
83
position: absolute;
84
84
right: 0;
85
85
background: var(--no);
86
Removed:
border-radius: 12px;
86
Added:
border-radius: 8px;
87
87
transform: rotateY(90deg);
88
88
transition-duration: 1s;
89
89
transform-origin: left;
90
90
}
91
91
.post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
92
Added:
93
Added:
/* Dynamic content reajustment if browser window is made too narrow */
94
Added:
@media (max-width: 800px) {
95
Added:
.feed-post {
96
Added:
display: inline;
97
Added:
}
98
Added:
.post-wrapper {
99
Added:
max-width: 100%;
100
Added:
}
101
Added:
}
app/templates/home.html
@@ -19,6 +19,9 @@
19
19
<h2>{{post.date}}</h2>
20
20
<p>{{post.content}}</p>
21
21
</div>
22
Added:
{% if post.type == message %}
23
Added:
<!-- implement a drop-down "drawer" quick reply feature -->
24
Added:
{% endif %}
22
25
</div>
23
26
24
27
{% endfor %}