From 09611b72871e15bed0da0f3c7ed96b12cc9e0709 Mon Sep 17 00:00:00 2001
From: blendoit <blendoit@gmail.com>
Date: Wed, 29 Jan 2020 07:02:48 -0800
Subject: Homepage: only use transitions.

Next step is to try only keyframes for more fine-grain control.
---
 app/static/styles/default.css |  5 +++--
 app/static/styles/home.css    | 50 +++++++++++++++++++++++++------------------
 app/templates/home.html       |  1 -
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index 4f56c17..e36da55 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -4,9 +4,10 @@
     --home: rgba(200, 200, 200, 0.7);
     --yes: rgba(0, 255, 0, 0.7);
     --no: rgba(255, 0, 0, 0.7);
-    background-image: url(../img/home.png);
-    background-repeat: repeat-x;
     font-size: 20;
+    --fast-speed: 0.2s;
+    --med-speed: 0.4s;
+    --slow-speed: 1s;
 }
 
 * {
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index a0c6606..ddbe261 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,29 +1,39 @@
 /* Tabs. */
 .tab-yes {
     height: 100%;
-    width: 3%;
+    width: 10%;
     float: left;
     position: relative;
     background: var(--yes);
 }
 .tab-yes:hover ~ .feed-post {
-    width: 4%;
-    transition: 0.2s;
+    left: 6%;
+    right: 0%;
+    transition: var(--fast-transition);
 }
 .tab-no {
     height: 100%;
-    width: 3%;
+    width: 10%;
     float: right;
     position: relative;
     background: var(--no);
 }
-.tab-no:hover {width: 4%; transition: 0.2s;}
+.tab-no:hover ~ .feed-post {
+    left: 0%;
+    right: 6%;
+    transition: var(--fast-transition);
+}
 
 /* Feed of posts. */
 .feed-post {
     height: 100%;
+    left: 3%;
+    right: 3%;
+    background: white;
+    background-image: url(../img/home.png);
+    background-repeat: repeat-x;
     display: flex;
-    position: relative;
+    position: absolute;
     flex-wrap: wrap;
     overflow: auto;
     justify-content: space-between;
@@ -31,6 +41,7 @@
 
 .post-wrapper {
     position: relative;
+    z-index: 1;
     max-height: 25%;
     max-width: 40%;
     perspective: 600px;
@@ -41,38 +52,35 @@
     position: relative;
     height: 70%;
     background: white;
-    z-index: -1;
+    z-index: 0;
     border-radius: 12px;
     padding: 1rem;
     margin: 1rem;
     overflow: hidden;
+    transition-duration: var(--fast-speed);
 }
-.post:hover {overflow: auto;}
-.post:hover + .btn-wrapper {
-    opacity: 100%;
-    animation: btn-wrapper;
-    animation-duration: 1s;
+.post:hover {
+    overflow: auto;
+    height: 40%;
 }
-
-@keyframes btn-wrapper {
-    from{transform: rotateX(-90deg);}
-    to {transform: rotateX(0deg);}
+.post:hover + .btn-wrapper {
+    /* opacity: 100%; */
+    transform: rotateX(0deg);
 }
 
 .btn-wrapper {
     position: relative;
-    top: -0.6rem;
     z-index: 1;
     transform: rotateX(-90deg);
-    /* transition: 400ms transform ease-in-out; */
-    /* animation-fill-mode: forwards; */
+    transition-duration: var(--med-speed);
 }
 
 .btn-yes {
     height: 25%;
-    width: 45%;
+    width: 40%;
     float: left;
     left: 1rem;
+    z-index: 2;
     position: relative;
     background: var(--yes);
     border-radius: 12px;
@@ -80,7 +88,7 @@
 
 .btn-no {
     height: 25%;
-    width: 45%;
+    width: 40%;
     float: right;
     right: 1rem;
     position: relative;
diff --git a/app/templates/home.html b/app/templates/home.html
index d21c427..5990c14 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -17,7 +17,6 @@
             <h2>{{post.date}}</h2>
             <p>{{post.content}}</p>
         </div>
-
         <div class="btn-wrapper">
             <a href="{{ url_for('home') }}" class="btn-yes"></a>
             <a href="{{ url_for('home') }}" class="btn-no"></a>
-- 
cgit v1.2.3