Change vertical to horizontal animation for consistency.

1 files changed, 29 insertions, 44 deletions

diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index d18729d..d7828c3 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -2,8 +2,8 @@
 .tab-yes {
     height: 100%;
     width: 10%;
-    float: left;
-    position: relative;
+    position: absolute;
+    left: 0;
     background: var(--yes);
 }
 .tab-yes:hover ~ .feed-post {
@@ -14,8 +14,8 @@
 .tab-no {
     height: 100%;
     width: 10%;
-    float: right;
-    position: relative;
+    position: absolute;
+    right: 0;
     background: var(--no);
 }
 .tab-no:hover ~ .feed-post {
@@ -41,66 +41,51 @@
 
 .post-wrapper {
     position: relative;
-    z-index: 1;
     max-height: 25%;
     max-width: 40%;
+    margin: 1rem;
+    background: blue;
     perspective: 600px;
-    perspective-origin: bottom;
 }
 
-@keyframes post {
-    0% {}
-    100% {overflow: auto; height: 40%;}
-}
 .post {
     position: relative;
-    height: 70%;
+    margin: 0 auto;
+    height: 50%;
+    width: 70%;
     background: white;
-    z-index: 0;
     border-radius: 12px;
     padding: 1rem;
-    margin: 1rem;
     overflow: hidden;
+    transition-duration: 1s;
 }
-.post:hover {
-    animation-name: post;
-    animation-duration: var(--med-speed);
-    animation-fill-mode: both;
-}
-.post:hover + .btn-wrapper {
-    animation-name: btn-wrapper;
-    animation-duration: var(--med-speed);
-    animation-fill-mode: both;
-}
-
-@keyframes btn-wrapper {
-    0% {}
-    100% {transform: rotateX(0deg); opacity: 100%;}
-}
-.btn-wrapper {
-    position: relative;
-    z-index: 1;
-    opacity: 0%;
-    transform: rotateX(-90deg);
+.post-wrapper:hover > .post {
+    width: 60%;
+    overflow: auto;
 }
 
 .btn-yes {
-    height: 25%;
-    width: 40%;
-    float: left;
-    left: 1rem;
-    z-index: 2;
-    position: relative;
+    height: 100%;
+    width: 20%;
+    position: absolute;
+    left: 0;
     background: var(--yes);
     border-radius: 12px;
+    transform: rotateY(-90deg);
+    transition-duration: 1s;
+    transform-origin: right;
 }
+.post-wrapper:hover > .btn-yes {transform: rotateY(0deg);}
 
 .btn-no {
-    height: 25%;
-    width: 40%;
-    float: right;
-    right: 1rem;
-    position: relative;
+    height: 100%;
+    width: 20%;
+    position: absolute;
+    right: 0;
     background: var(--no);
     border-radius: 12px;
+    transform: rotateY(90deg);
+    transition-duration: 1s;
+    transform-origin: left;
 }
+.post-wrapper:hover > .btn-no {transform: rotateY(0deg);}