1 files changed, 93 insertions, 21 deletions

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 73698c7c..0a4dfbb6 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -61,20 +61,6 @@ button, input, textarea, select {
     background-color: #576297 !important;
 }
 
-.video-container {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-bottom: 75%;
-}
-.video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
 .pydis-logo-banner {
     background-color: #7289DA !important;
     border-radius: 10px;
@@ -3497,8 +3483,8 @@ mark {
     align-items: center;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
     box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
@@ -3509,17 +3495,23 @@ mark {
     color: white;
 }
 
+@media (max-width: 64rem) {
+    .cd-timeline__img i {
+	font-size: 0.9em;
+    }
+}
+
 .cd-timeline__img img {
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
     margin-left: 2px;
     margin-top: 2px;
 }
 
 @media (max-width: 64rem) {
     .cd-timeline__img img {
-        width: 30px;
-        height: 30px;
+        width: 20px;
+        height: 20px;
         margin-left: 2px;
         margin-top: 2px;
     }
@@ -3532,7 +3524,7 @@ mark {
         -ms-flex-order: 1;
         order: 1;
         margin-left: calc(5% - 30px);
-        will-change: transform
+        will-change: transform;
     }
 
     .cd-timeline__block:nth-child(even) .cd-timeline__img {
@@ -3646,6 +3638,14 @@ mark {
         -webkit-animation-name: cd-bounce-2-inverse;
         animation-name: cd-bounce-2-inverse
     }
+    .cd-timeline__img--bounce-out {
+        -webkit-animation: cd-bounce-out-1 0.6s;
+        animation: cd-bounce-out-1 0.6s;
+    }
+    .cd-timeline__content--bounce-out {
+        -webkit-animation: cd-bounce-out-2 0.6s;
+        animation: cd-bounce-out-2 0.6s;
+    }
 }
 
 @-webkit-keyframes cd-bounce-1 {
@@ -3749,3 +3749,75 @@ mark {
         transform: translateX(0)
     }
 }
+
+@-webkit-keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2)
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5)
+    }
+}
+
+@keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+}
+
+@-webkit-keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}
+
+@keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}