Homepage feed becomes linear if viewport < 800px.

Ah, responsive layout for mobile users.

1 files changed, 22 insertions, 12 deletions

diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index a92c6a3..f4ba121 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -40,52 +40,62 @@
 }
 
 .post-wrapper {
+    /* background: blue; */
     position: relative;
-    max-height: 25%;
+    /* height: 20rem; */
+    height: 20%;
     max-width: 40%;
     margin: 1rem;
-    /* background: blue; */
     perspective: 600px;
 }
 
 .post {
     position: relative;
     margin: 0 auto;
-    height: 80%;
+    height: 100%;
     width: 100%;
     background: white;
     border-radius: 12px;
-    padding: 1rem;
     overflow: hidden;
-    transition-duration: 0.4s;
+    transition-duration: var(--med-speed);
 }
 .post-wrapper:hover > .post {
-    width: 60%;
-    overflow: auto;
+    width: 65%;
+    overflow-y: auto;
 }
 
 .btn-yes {
     height: 100%;
-    width: 20%;
+    width: 15%;
     position: absolute;
     left: 0;
     background: var(--yes);
-    border-radius: 12px;
+    border-radius: 8px;
     transform: rotateY(-90deg);
-    transition-duration: 1s;
+    transition-duration: var(--slow-speed);
     transform-origin: right;
 }
 .post-wrapper:hover > .btn-yes {transform: rotateY(0deg);}
 
 .btn-no {
     height: 100%;
-    width: 20%;
+    width: 15%;
     position: absolute;
     right: 0;
     background: var(--no);
-    border-radius: 12px;
+    border-radius: 8px;
     transform: rotateY(90deg);
     transition-duration: 1s;
     transform-origin: left;
 }
 .post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
+
+/* Dynamic content reajustment if browser window is made too narrow */
+@media (max-width: 800px) {
+    .feed-post {
+        display: inline;
+    }
+    .post-wrapper {
+        max-width: 100%;
+    }
+}