Timeline: Add mobile layout, support Safari

Also
- Add comments in CSS
- Remove `-webkit` rules because most of them are deprecated

And uh, I forgot, but the title summarises them!

2 files changed, 179 insertions, 193 deletions

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 27d7c119..bf57d56d 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -1,18 +1,43 @@
+/* Adapted from https://codyhouse.co/gem/vertical-timeline/ with significant
+ * modifications.
+ * */
+
 :root {
+    --side-padding: 0;
     --background-color: rgb(232, 239, 245);
+    --content-background-color: white;
     --accent: hsl(205, 38%, 89%);
+
+    --timeline-line-width: 4px;
+
+    --icon-width: 60px;
+    --icon-border-width: 4px;
     --icon-border-color: white;
     --icon-color: white;
-    --content-background-color: white;
+    --icon-image-width: 40px;
+    --icon-size: 1.5rem;
+
+    --date-color: hsl(0, 0%, 48%);
 }
 
 [data-theme="dark"] {
     --background-color: #2C2F33;
+    --content-background-color: #23272A;
     --accent: hsl(0, 0%, 34%);
+
     --icon-border-color: hsl(0, 0%, 50%);
-    --content-background-color: #23272A;
 }
 
+@media (max-width: 1023px) {
+    :root {
+        --side-padding: 1.25rem;
+        --icon-width: 40px;
+        --icon-image-width: 30px;
+        --icon-size: 1.1rem;
+    }
+}
+
+/* Containers */
 .cd-timeline {
     overflow: hidden;
     padding: 3rem 0;
@@ -21,35 +46,69 @@
 
 .cd-timeline__container {
     position: relative;
-    padding: 1rem 0;
+    padding: 1rem var(--side-padding);
 }
 
+/* Line that goes through all the icons */
 .cd-timeline__container::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: calc(50% - 2px);
+
     height: 100%;
-    width: 4px;
+    width: var(--timeline-line-width);
     background-color: var(--accent);
+    z-index: 1;
 }
 
+@media (min-width: 1023px) {
+    .cd-timeline__container::before {
+        left: calc(50% - var(--timeline-line-width) / 2);
+    }
+}
+
+@media (max-width: 1023px) {
+    .cd-timeline__container::before {
+        margin-left: calc(var(--icon-width) / 2 - var(--timeline-line-width) / 2);
+    }
+}
+
+/* Each timeline item */
 .cd-timeline__block {
     display: flex;
     margin-bottom: 2.5rem;
 }
 
+/* Visual container of the timeline item */
 .cd-timeline__content.box {
     box-shadow: var(--accent) 0px 3px 0px 0px;
     background-color: var(--content-background-color);
 }
 
-@media (min-width: 768px) {
+@media (max-width: 1023px) {
+    .cd-timeline__content.box {
+        margin-left: 1rem;
+    }
+}
+
+@media (min-width: 1023px) {
     .cd-timeline__block:nth-child(even) {
         flex-direction: row-reverse;
     }
 }
 
+/* The title and text */
+.cd-timeline__content {
+    flex-grow: 1;
+}
+
+@media (min-width: 1023px) {
+    .cd-timeline__content  {
+        width: 45%;
+        flex-grow: 0;
+    }
+}
+
+/* Icon */
 .cd-timeline__img {
     display: flex;
     justify-content: center;
@@ -57,58 +116,90 @@
     flex-shrink: 0;
 
     border-radius: 50%;
-    height: 60px;
-    width: 60px;
-    box-shadow: 0 0 0 4px var(--icon-border-color),inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05);
+    height: var(--icon-width);
+    width: var(--icon-width);
+    box-shadow: 0 0 0 var(--icon-border-width) var(--icon-border-color),
+                inset 0 2px 0 rgba(0,0,0,.08),
+                0 3px 0 4px rgba(0,0,0,.05);
+    z-index: 2;
 
     /* Font Awesome icon size and color */
     color: var(--icon-color);
-    font-size: 1.5em;
+    font-size: var(--icon-size);
+}
 
-    @media (min-width: 768px) {
+@media (min-width: 1023px) {
+    .cd-timeline__img {
         order: 1;
+
+        position: absolute;
+        left: calc(50% - var(--icon-width) / 2);
     }
 }
 
+/* Icon that uses pydis logo */
 .cd-timeline__img img {
-    width: 40px;
-    height: 40px;
-    margin-left: 2px;
-    margin-top: 2px;
-}
+    /* Visually centering the pydis logo requires a margin adjustment here
+     * due to the right and bottom box shadow on the logo which is not very
+     * visible on the page.
+     *
+     * HACK: Hardcoded and specific to the pydis logo.
+     * */
+    margin-top: 1px;
+    margin-left: 1px;
 
-.cd-timeline__date {
-    font-size: .9rem;
+    width: var(--icon-image-width);
+    height: var(--icon-image-width);
 }
 
-.cd-timeline__content {
-    flex-grow: 1;
+/* Date next to icons */
+.cd-timeline__date {
+    position: absolute;
+    width: 100%;
+    margin-top: 1rem;
+    z-index: 3;
 
-    @media (min-width: 768px) {
-        width: 45%;
-        flex-grow: 0;
-    }
+    font-size: .9rem;
+    color: var(--date-color);
 }
 
-@media (min-width: 64rem) {
+@media (min-width: 1023px) {
     .cd-timeline__date {
-        position: absolute;
-        width: 100%;
         left: 54%;
-        margin-top: 1rem;
     }
+
     .cd-timeline__block:nth-child(even) .cd-timeline__date {
         left: auto;
         right: 54%;
-        text-align: right
+        text-align: right;
     }
+}
 
-    .cd-timeline__img {
-        left: calc(50% - 30px);
-        position: absolute;
+@media (max-width: 1023px) {
+    .cd-timeline__date {
+        /*
+         * On mobile, place the date at the top of the text box left-aligned
+         * with the other text in the box. When margin-left is zero, the date
+         * is left-aligned to the right of the icon, but left of the icon's
+         * right box shadow.
+         *
+         * However, we're not adding --icon-border-width here because the
+         * 'margin-left: 1rem' for content boxes are aligned from before the
+         * left of the right icon-border.
+         *
+         * 1.25rem is the left padding of content boxes from Bulma.
+         * */
+        margin-left: calc(1rem + 1.25rem);
+        margin-top: .75rem;
+    }
+
+    .cd-timeline__content .title {
+        /* Make space for the date text */
+        margin-top: 1.25rem;
     }
 }
 
+/* Icon background colors */
 .pastel-red {
     background-color: #ff7878 !important;
 }
@@ -152,6 +243,7 @@
     background-color: #7c9a21 !important;
 }
 .pastel-dark-blue {
+    /* Works well for both themes */
     background-color: #576297 !important;
 }
 
@@ -167,118 +259,55 @@ img, video, svg {
     max-width: 100%
 }
 
-
-/* Bounce-in and bounce-out animations */
-@media (min-width: 64rem) {
+/* Bounce-in and bounce-out animations, desktop-only */
+@media (min-width: 1023px) {
     .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden {
         visibility: hidden
     }
     .cd-timeline__img--bounce-in {
-        -webkit-animation: icon-bounce 0.6s;
         animation: icon-bounce 0.6s;
     }
     .cd-timeline__content--bounce-in,
     .cd-timeline__date--bounce-in {
-        -webkit-animation: item-bounce-left 0.6s;
         animation: item-bounce-left 0.6s;
     }
     .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in,
     .cd-timeline__block:nth-child(even) .cd-timeline__date--bounce-in {
-        -webkit-animation-name: item-bounce-right;
         animation-name: item-bounce-right;
     }
     .cd-timeline__img--bounce-out {
-        -webkit-animation: icon-bounce-out 0.6s;
         animation: icon-bounce-out 0.6s;
     }
     .cd-timeline__content--bounce-out,
     .cd-timeline__date--bounce-out {
-        -webkit-animation: item-bounce-out 0.6s;
         animation: item-bounce-out 0.6s;
     }
 }
 
-@-webkit-keyframes icon-bounce {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5)
-    }
-    60% {
-        opacity: 1;
-        -webkit-transform: scale(1.2);
-        transform: scale(1.2)
-    }
-    100% {
-        -webkit-transform: scale(1);
-        transform: scale(1)
-    }
-}
-
 @keyframes icon-bounce {
     0% {
         opacity: 0;
-        -webkit-transform: scale(0.5);
         transform: scale(0.5);
     }
     60% {
         opacity: 1;
-        -webkit-transform: scale(1.2);
         transform: scale(1.2);
     }
     100% {
-        -webkit-transform: scale(1);
         transform: scale(1);
     }
 }
 
-@-webkit-keyframes item-bounce-left {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateX(-100px);
-        transform: translateX(-100px)
-    }
-    60% {
-        opacity: 1;
-        -webkit-transform: translateX(20px);
-        transform: translateX(20px)
-    }
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
-}
-
 @keyframes item-bounce-left {
     0% {
         opacity: 0;
-        -webkit-transform: translateX(-100px);
         transform: translateX(-100px)
     }
     60% {
         opacity: 1;
-        -webkit-transform: translateX(20px);
         transform: translateX(20px)
     }
     100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
-}
-
-@-webkit-keyframes item-bounce-right {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateX(100px);
-        transform: translateX(100px)
-    }
-    60% {
-        opacity: 1;
-        -webkit-transform: translateX(-20px);
-        transform: translateX(-20px)
-    }
-    100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0)
     }
 }
@@ -286,86 +315,43 @@ img, video, svg {
 @keyframes item-bounce-right {
     0% {
         opacity: 0;
-        -webkit-transform: translateX(100px);
         transform: translateX(100px)
     }
     60% {
         opacity: 1;
-        -webkit-transform: translateX(-20px);
         transform: translateX(-20px)
     }
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0)
     }
 }
 
-@-webkit-keyframes icon-bounce-out {
-    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 icon-bounce-out {
     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 item-bounce-out {
-    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 item-bounce-out {
     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);
     }
 }
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index b3c8dce1..7097d1f1 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -20,7 +20,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jul 11th, 2023</span>
+          <span class="cd-timeline__date">Jul 11th, 2023</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -42,7 +42,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jan 30th, 2023</span>
+          <span class="cd-timeline__date">Jan 30th, 2023</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -65,7 +65,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Nov 25th, 2022</span>
+          <span class="cd-timeline__date">Nov 25th, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -84,7 +84,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Oct 24th, 2022</span>
+          <span class="cd-timeline__date">Oct 24th, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -113,7 +113,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">July 21st, 2022</span>
+          <span class="cd-timeline__date">July 21st, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -140,7 +140,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">May 19th, 2022</span>
+          <span class="cd-timeline__date">May 19th, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -160,7 +160,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Feb 21st, 2022</span>
+          <span class="cd-timeline__date">Feb 21st, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -180,7 +180,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Feb 12th, 2022</span>
+          <span class="cd-timeline__date">Feb 12th, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -199,7 +199,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Feb 9th, 2022</span>
+          <span class="cd-timeline__date">Feb 9th, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -221,7 +221,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Feb 2nd, 2022</span>
+          <span class="cd-timeline__date">Feb 2nd, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -244,7 +244,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jan 19, 2022</span>
+          <span class="cd-timeline__date">Jan 19, 2022</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -262,7 +262,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Oct 4th, 2021</span>
+          <span class="cd-timeline__date">Oct 4th, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -289,7 +289,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">May 24th, 2021</span>
+          <span class="cd-timeline__date">May 24th, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -310,7 +310,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">July 9, 2021</span>
+          <span class="cd-timeline__date">July 9, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -335,7 +335,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">May 24, 2021</span>
+          <span class="cd-timeline__date">May 24, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -359,7 +359,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">April 23, 2021</span>
+          <span class="cd-timeline__date">April 23, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -383,7 +383,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Mar 21st, 2021</span>
+          <span class="cd-timeline__date">Mar 21st, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -410,7 +410,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Mar 13th, 2021</span>
+          <span class="cd-timeline__date">Mar 13th, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -437,7 +437,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Mar 13th, 2021</span>
+          <span class="cd-timeline__date">Mar 13th, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -462,7 +462,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Mar 1st, 2021</span>
+          <span class="cd-timeline__date">Mar 1st, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -487,7 +487,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Feb 18th, 2021</span>
+          <span class="cd-timeline__date">Feb 18th, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -505,7 +505,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">February 8th, 2021</span>
+          <span class="cd-timeline__date">February 8th, 2021</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -530,7 +530,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">December 1st - 25th, 2020</span>
+          <span class="cd-timeline__date">December 1st - 25th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -554,7 +554,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Nov 29th, 2020</span>
+          <span class="cd-timeline__date">Nov 29th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -575,7 +575,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Oct 22nd, 2020</span>
+          <span class="cd-timeline__date">Oct 22nd, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -593,7 +593,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Oct 21st, 2020</span>
+          <span class="cd-timeline__date">Oct 21st, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -615,7 +615,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Aug 16th, 2020</span>
+          <span class="cd-timeline__date">Aug 16th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -635,7 +635,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jul 31st, 2020</span>
+          <span class="cd-timeline__date">Jul 31st, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -661,7 +661,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jun 4th, 2020</span>
+          <span class="cd-timeline__date">Jun 4th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -681,7 +681,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">May 28th, 2020</span>
+          <span class="cd-timeline__date">May 28th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -701,7 +701,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">May 25th, 2020</span>
+          <span class="cd-timeline__date">May 25th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -721,7 +721,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Apr 17th, 2020</span>
+          <span class="cd-timeline__date">Apr 17th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -747,7 +747,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Apr 14, 2020</span>
+          <span class="cd-timeline__date">Apr 14, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -766,7 +766,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Apr 5th, 2020</span>
+          <span class="cd-timeline__date">Apr 5th, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -787,7 +787,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jan 17, 2020</span>
+          <span class="cd-timeline__date">Jan 17, 2020</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -813,7 +813,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Dec 22nd, 2019</span>
+          <span class="cd-timeline__date">Dec 22nd, 2019</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -830,7 +830,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Sept 22nd, 2019</span>
+          <span class="cd-timeline__date">Sept 22nd, 2019</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -849,7 +849,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Oct 26th, 2019</span>
+          <span class="cd-timeline__date">Oct 26th, 2019</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -869,7 +869,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Sep 15, 2019</span>
+          <span class="cd-timeline__date">Sep 15, 2019</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -889,7 +889,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Apr 8th, 2019</span>
+          <span class="cd-timeline__date">Apr 8th, 2019</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -911,7 +911,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Dec 19th, 2018</span>
+          <span class="cd-timeline__date">Dec 19th, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -932,7 +932,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Nov 24th, 2018</span>
+          <span class="cd-timeline__date">Nov 24th, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -951,7 +951,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Oct 1st, 2018</span>
+          <span class="cd-timeline__date">Oct 1st, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -972,7 +972,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jul 10th, 2018</span>
+          <span class="cd-timeline__date">Jul 10th, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -992,7 +992,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jun 20th, 2018</span>
+          <span class="cd-timeline__date">Jun 20th, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -1012,7 +1012,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jun 9th, 2018</span>
+          <span class="cd-timeline__date">Jun 9th, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -1034,7 +1034,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">May 21st, 2018</span>
+          <span class="cd-timeline__date">May 21st, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -1056,7 +1056,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Mar 23rd, 2018</span>
+          <span class="cd-timeline__date">Mar 23rd, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -1078,7 +1078,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Mar 4th, 2018</span>
+          <span class="cd-timeline__date">Mar 4th, 2018</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -1097,7 +1097,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Feb 3rd, 2018</span>
+          <span class="cd-timeline__date">Feb 3rd, 2018</span>
         </div>
 
             <div class="cd-timeline__content box">
@@ -1117,7 +1117,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Nov 10th, 2017</span>
+          <span class="cd-timeline__date">Nov 10th, 2017</span>
         </div>
 
         <div class="cd-timeline__content box">
@@ -1135,7 +1135,7 @@
         </div>
 
         <div class="is-flex is-justify-content-space-between">
-          <span class="cd-timeline__date has-text-grey">Jan 8th, 2017</span>
+          <span class="cd-timeline__date">Jan 8th, 2017</span>
         </div>
 
         <div class="cd-timeline__content box">