[Flask] Aggregate your news and vote for the content you care about.
Change every possible component to relative sizing.
This saves a bunch of CSS instructions that manually update the size of adjacent components on resize.
Changed files
app/static/styles/home.css
@@ -1,36 +1,31 @@
1
1
.main {
2
2
height: 100%;
3
Removed:
position: absolute;
3
Added:
position: relative;
4
4
z-index: 0;
5
Removed:
left: 3%;
6
Removed:
right: 3%;
7
5
overflow: hidden;
8
6
}
9
7
10
8
.feed-post {
11
9
height: 100%;
12
Removed:
padding: 1px;
13
10
display: flex;
14
11
position: relative;
15
12
flex-wrap: wrap;
16
13
overflow: auto;
17
Removed:
justify-content: space-around;
14
Added:
justify-content: space-between;
18
15
}
19
16
20
17
.tab-yes {
21
18
height: 100%;
22
19
width: 3%;
23
20
float: left;
24
Removed:
position: fixed;
25
Removed:
left: 0;
21
Added:
position: relative;
26
22
background: var(--yes);
27
23
}
28
24
.tab-no {
29
25
height: 100%;
30
26
width: 3%;
31
27
float: right;
32
Removed:
position: fixed;
33
Removed:
right: 0;
28
Added:
position: relative;
34
29
background: var(--no);
35
30
}
36
31
@@ -41,16 +36,6 @@
41
36
42
37
.tab-no:hover {
43
38
width: 4%;
44
Removed:
transition: 0.2s;
45
Removed:
}
46
Removed:
47
Removed:
.tab-yes:hover ~ .main {
48
Removed:
left: 5%;
49
Removed:
transition: 0.2s;
50
Removed:
}
51
Removed:
52
Removed:
.tab-no:hover ~ .main {
53
Removed:
right: 5%;
54
39
transition: 0.2s;
55
40
}
56
41
app/static/styles/no.css
@@ -1,8 +1,7 @@
1
1
.main {
2
2
height: 100%;
3
Removed:
position: fixed;
3
Added:
position: relative;
4
4
z-index: 0;
5
Removed:
left: 7%;
6
5
overflow: auto;
7
6
}
8
7
@@ -29,16 +28,6 @@
29
28
transition: 0.2s;
30
29
}
31
30
32
Removed:
.tab-yes:hover ~ .main {
33
Removed:
left: 10%;
34
Removed:
transition: 0.2s;
35
Removed:
}
36
Removed:
37
Removed:
.tab-home:hover ~ .main {
38
Removed:
left: 8%;
39
Removed:
transition: 0.2s;
40
Removed:
}
41
Removed:
42
31
.tab-yes:hover ~ .tab-home {
43
32
width: 5%;
44
33
transition: 0.2s;
@@ -51,23 +40,28 @@
51
40
52
41
/* Archive. */
53
42
.feed-archive {
54
Removed:
width: 100%;
43
Added:
height: 100%;
55
44
display: flex;
56
45
position: relative;
57
46
flex-wrap: wrap;
58
Removed:
justify-content: space-around;
47
Added:
overflow: auto;
48
Added:
justify-content: space-between;
59
49
}
60
50
61
51
.archive {
52
Added:
max-height: 20%;
53
Added:
max-width: 25%;
62
54
background: white;
63
Removed:
position: relative;
64
55
border-radius: 14px;
65
56
padding: 1rem;
66
57
margin: 0.5rem;
58
Added:
overflow: hidden;
59
Added:
position: relative;
67
60
}
68
61
.archive:hover {
69
62
background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
70
63
cursor: pointer;
71
64
transition: 0.8s;
72
65
color: white;
66
Added:
overflow: auto;
73
67
}