Homepage feed becomes linear if viewport < 800px.

Ah, responsive layout for mobile users.

2 files changed, 32 insertions, 17 deletions

diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index e36da55..654b42f 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -4,27 +4,32 @@
     --home: rgba(200, 200, 200, 0.7);
     --yes: rgba(0, 255, 0, 0.7);
     --no: rgba(255, 0, 0, 0.7);
-    font-size: 20;
+    font-size: 18;
     --fast-speed: 0.2s;
     --med-speed: 0.4s;
     --slow-speed: 1s;
 }
 
-* {
-    margin: 0;
-    padding: 0;
-}
+* {}
 
 body {
     font-family: 'Liberation Sans', sans-serif;
     line-height: 1.2;
+    margin: 0;
+    padding: 0;
 }
 
 h1 {
+    margin-left: 2rem;
+    margin-right: 1rem;
 }
 
 h2 {
+    margin-left: 1rem;
+    margin-right: 1rem;
 }
 
 p {
+    margin-left: 1rem;
+    margin-right: 1rem;
 }
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%;
+    }
+}