Homepage load animations 2.

3 files changed, 87 insertions, 38 deletions

diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index 654b42f..3812189 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -2,16 +2,14 @@
     --primary-color: #003B5C;
     --secondary-color: #C3D7EE;
     --home: rgba(200, 200, 200, 0.7);
-    --yes: rgba(0, 255, 0, 0.7);
-    --no: rgba(255, 0, 0, 0.7);
+    --yes: #5cff5c;
+    --no: #ff5c5c;
     font-size: 18;
     --fast-speed: 0.2s;
     --med-speed: 0.4s;
     --slow-speed: 1s;
 }
 
-* {}
-
 body {
     font-family: 'Liberation Sans', sans-serif;
     line-height: 1.2;
@@ -33,3 +31,43 @@ p {
     margin-left: 1rem;
     margin-right: 1rem;
 }
+
+/* Animation on page load. */
+@keyframes fade-refresh {
+    0% {
+        opacity: 0%;
+    }
+    100% {
+        opacity: 100%;
+    }
+}
+
+@keyframes squeeze-refresh {
+    0% {
+        width: 50%;
+    }
+    100% {
+        /* opacity: 100%; */
+        width: 10%;
+    }
+}
+
+@keyframes home-refresh {
+    0% {
+        transform: translateY(100%);
+        /* opacity: 0%; */
+    }
+    100% {
+        transform: translateY(0);
+        /* opacity: 100%; */
+    }
+}
+
+@keyframes yes-refresh {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index f4ba121..290909f 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -5,6 +5,8 @@
     position: absolute;
     left: 0;
     background: var(--yes);
+    animation-name: squeeze-refresh;
+    animation-duration: var(--med-speed);
 }
 .tab-yes:hover ~ .feed-post {
     left: 6%;
@@ -17,6 +19,8 @@
     position: absolute;
     right: 0;
     background: var(--no);
+    animation-name: squeeze-refresh;
+    animation-duration: var(--med-speed);
 }
 .tab-no:hover ~ .feed-post {
     left: 0%;
@@ -37,6 +41,8 @@
     flex-wrap: wrap;
     overflow: auto;
     justify-content: space-between;
+    animation-name: fade-refresh;
+    animation-duration: var(--slow-speed);
 }
 
 .post-wrapper {
@@ -91,7 +97,7 @@
 .post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
 
 /* Dynamic content reajustment if browser window is made too narrow */
-@media (max-width: 800px) {
+@media (max-width: 900px) {
     .feed-post {
         display: inline;
     }
diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css
index fa6b917..bcaf7a4 100644
--- a/app/static/styles/yes.css
+++ b/app/static/styles/yes.css
@@ -1,51 +1,33 @@
 /* Main page area. */
+:root {background: var(--yes);}
+
 .main {
     height: 100%;
     position: relative;
     z-index: 0;
     overflow: hidden;
-}
-
-/* Feeds. */
-.feed-message {
-    height: 100%;
-    width: 25%;
-    position: relative;
-    float: left;
-    overflow: auto;
-}
-.feed-news {
-    height: 100%;
-    width: 55%;
-    display: flex;
-    position: relative;
-    float: left;
-    flex-wrap: wrap;
-    overflow: auto;
-    justify-content: space-between;
-}
-.feed-ads {
-    height: 100%;
-    width: 20%;
-    position: relative;
-    float: right;
-    overflow: auto;
+    /* animation-name: yes-refresh; */
+    /* animation-duration: var(--slow-speed); */
 }
 
 /* Tabs. */
 .tab-no {
     height: 100%;
     width: 3%;
-    float: right;
-    position: relative;
+    position: absolute;
+    right: 0;
     background: var(--no);
+    /* animation-name: yes-refresh; */
+    /* animation-duration: var(--slow-speed); */
 }
 .tab-home {
     height: 100%;
     width: 3%;
     float: right;
-    position: relative;
-    background: var(--home);
+    position: absolute;
+    /* background: var(--home); */
+    /* animation-name: yes-refresh; */
+    animation-duration: var(--slow-speed);
 }
 .tab-home:hover {
     width: 4%;
@@ -60,7 +42,15 @@
     transition: 0.2s;
 }
 
-/* Messages. */
+
+/* Feeds. */
+.feed-message {
+    height: 100%;
+    width: 25%;
+    position: relative;
+    float: left;
+    overflow: auto;
+}
 .message {
     background: white;
     border-radius: 14px;
@@ -74,7 +64,16 @@
     color: white;
 }
 
-/* News. */
+.feed-news {
+    height: 100%;
+    width: 55%;
+    display: flex;
+    position: relative;
+    float: left;
+    flex-wrap: wrap;
+    overflow: auto;
+    justify-content: space-between;
+}
 .news {
     max-height: 10%;
     max-width: 50%;
@@ -93,7 +92,13 @@
     overflow: auto;
 }
 
-/* Ads. */
+.feed-ads {
+    height: 100%;
+    width: 20%;
+    position: relative;
+    float: right;
+    overflow: auto;
+}
 .ad {
     background: white;
     border-radius: 14px;