Change every possible component to relative sizing.

This saves a bunch of CSS instructions that manually update the size
of adjacent components on resize.

2 files changed, 13 insertions, 34 deletions

diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index c875893..553299c 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,36 +1,31 @@
 .main {
     height: 100%;
-    position: absolute;
+    position: relative;
     z-index: 0;
-    left: 3%;
-    right: 3%;
     overflow: hidden;
 }
 
 .feed-post {
     height: 100%;
-    padding: 1px;
     display: flex;
     position: relative;
     flex-wrap: wrap;
     overflow: auto;
-    justify-content: space-around;
+    justify-content: space-between;
 }
 
 .tab-yes {
     height: 100%;
     width: 3%;
     float: left;
-    position: fixed;
-    left: 0;
+    position: relative;
     background: var(--yes);
 }
 .tab-no {
     height: 100%;
     width: 3%;
     float: right;
-    position: fixed;
-    right: 0;
+    position: relative;
     background: var(--no);
 }
 
@@ -44,16 +39,6 @@
     transition: 0.2s;
 }
 
-.tab-yes:hover ~ .main {
-    left: 5%;
-    transition: 0.2s;
-}
-
-.tab-no:hover ~ .main {
-    right: 5%;
-    transition: 0.2s;
-}
-
 .post {
     max-height: 20%;
     max-width: 30%;
diff --git a/app/static/styles/no.css b/app/static/styles/no.css
index 4673cf3..8f20ce5 100644
--- a/app/static/styles/no.css
+++ b/app/static/styles/no.css
@@ -1,8 +1,7 @@
 .main {
     height: 100%;
-    position: fixed;
+    position: relative;
     z-index: 0;
-    left: 7%;
     overflow: auto;
 }
 
@@ -29,16 +28,6 @@
     transition: 0.2s;
 }
 
-.tab-yes:hover ~ .main {
-    left: 10%;
-    transition: 0.2s;
-}
-
-.tab-home:hover ~ .main {
-    left: 8%;
-    transition: 0.2s;
-}
-
 .tab-yes:hover ~ .tab-home {
     width: 5%;
     transition: 0.2s;
@@ -51,23 +40,28 @@
 
 /* Archive. */
 .feed-archive {
-    width: 100%;
+    height: 100%;
     display: flex;
     position: relative;
     flex-wrap: wrap;
-    justify-content: space-around;
+    overflow: auto;
+    justify-content: space-between;
 }
 
 .archive {
+    max-height: 20%;
+    max-width: 25%;
     background: white;
-    position: relative;
     border-radius: 14px;
     padding: 1rem;
     margin: 0.5rem;
+    overflow: hidden;
+    position: relative;
 }
 .archive:hover {
     background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
     cursor: pointer;
     transition: 0.8s;
     color: white;
+    overflow: auto;
 }