From 2fbb5c4bda3b1e99ca1daa2a344e1132a0b7db1e Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 16:26:55 +0800
Subject: [PATCH 01/17] Timeline: Initial rewrite of CSS

---
 pydis_site/static/css/home/timeline.css | 4030 ++---------------------
 pydis_site/static/js/timeline/main.js   |   10 +
 pydis_site/templates/home/timeline.html |  946 +++---
 3 files changed, 839 insertions(+), 4147 deletions(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index d42bbfc0b..b8fa02c98 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -1,3826 +1,374 @@
-h2 {
-    font-size: 2em;
-}
-
-@media (max-width: 500px) {
-    h2 {
-        font-size: 1em;
-    }
-}
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend {
-    display: block
-}
-
-ol, ul {
-    list-style: none
-}
-
-blockquote, q {
-    quotes: none
-}
-
-button, input, textarea, select {
-    margin: 0
-}
-
-.pastel-red {
-    background-color: #FF7878 !important;
-}
-
-.pastel-orange {
-    background-color: #FFBF76 !important;
-}
-
-.pastel-green {
-    background-color: #8bd6a7 !important;
-}
-
-.pastel-blue {
-    background-color: #8edbec !important;
-}
-
-.pastel-purple {
-    background-color: #CBB1FF !important;
-}
-
-.pastel-pink {
-    background-color: #F6ACFF !important;
-}
-
-.pastel-lime {
-    background-color: #b6df3a !important;
-}
-
-.pastel-dark-blue {
-    background-color: #576297 !important;
-}
-
-.pydis-logo-banner {
-    background-color: #7289DA !important;
-    border-radius: 10px;
-}
-
-.pydis-logo-banner img {
-    padding-right: 20px;
-}
-
-.btn, .form-control, .link, .reset {
-    background-color: transparent;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    color: inherit;
-    line-height: inherit;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none
-}
-
-select.form-control::-ms-expand {
-    display: none
-}
-
-textarea {
-    resize: vertical;
-    overflow: auto;
-    vertical-align: top
-}
-
-input::-ms-clear {
-    display: none
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0
-}
-
-img, video, svg {
-    max-width: 100%
-}
-
-[data-theme] {
-    background-color: hsl(0, 0%, 100%);
-    background-color: var(--color-bg, #fff);
-    color: hsl(240, 4%, 20%);
-    color: var(--color-contrast-high, #313135)
-}
-
-:root {
-    --space-unit: 1em;
-    --space-xxxxs: calc(0.125*var(--space-unit));
-    --space-xxxs: calc(0.25*var(--space-unit));
-    --space-xxs: calc(0.375*var(--space-unit));
-    --space-xs: calc(0.5*var(--space-unit));
-    --space-sm: calc(0.75*var(--space-unit));
-    --space-md: calc(1.25*var(--space-unit));
-    --space-lg: calc(2*var(--space-unit));
-    --space-xl: calc(3.25*var(--space-unit));
-    --space-xxl: calc(5.25*var(--space-unit));
-    --space-xxxl: calc(8.5*var(--space-unit));
-    --space-xxxxl: calc(13.75*var(--space-unit));
-    --component-padding: var(--space-md)
-}
-
-:root {
-    --max-width-xxs: 32rem;
-    --max-width-xs: 38rem;
-    --max-width-sm: 48rem;
-    --max-width-md: 64rem;
-    --max-width-lg: 80rem;
-    --max-width-xl: 90rem;
-    --max-width-xxl: 120rem
-}
-
-.container {
-    width: calc(100% - 1.25em);
-    width: calc(100% - 2*var(--component-padding));
-    margin-left: auto;
-    margin-right: auto
-}
-
-.max-width-xxs {
-    max-width: 32rem;
-    max-width: var(--max-width-xxs)
-}
-
-.max-width-xs {
-    max-width: 38rem;
-    max-width: var(--max-width-xs)
-}
-
-.max-width-sm {
-    max-width: 48rem;
-    max-width: var(--max-width-sm)
-}
-
-.max-width-md {
-    max-width: 64rem;
-    max-width: var(--max-width-md)
-}
-
-.max-width-lg {
-    max-width: 80rem;
-    max-width: var(--max-width-lg)
-}
-
-.max-width-xl {
-    max-width: 90rem;
-    max-width: var(--max-width-xl)
-}
-
-.max-width-xxl {
-    max-width: 120rem;
-    max-width: var(--max-width-xxl)
-}
-
-.max-width-adaptive-sm {
-    max-width: 38rem;
-    max-width: var(--max-width-xs)
-}
-
-@media (min-width: 64rem) {
-    .max-width-adaptive-sm {
-        max-width: 48rem;
-        max-width: var(--max-width-sm)
-    }
-}
-
-.max-width-adaptive-md {
-    max-width: 38rem;
-    max-width: var(--max-width-xs)
-}
-
-@media (min-width: 64rem) {
-    .max-width-adaptive-md {
-        max-width: 64rem;
-        max-width: var(--max-width-md)
-    }
-}
-
-.max-width-adaptive, .max-width-adaptive-lg {
-    max-width: 38rem;
-    max-width: var(--max-width-xs)
-}
-
-@media (min-width: 64rem) {
-    .max-width-adaptive, .max-width-adaptive-lg {
-        max-width: 64rem;
-        max-width: var(--max-width-md)
-    }
-}
-
-@media (min-width: 90rem) {
-    .max-width-adaptive, .max-width-adaptive-lg {
-        max-width: 80rem;
-        max-width: var(--max-width-lg)
-    }
-}
-
-.max-width-adaptive-xl {
-    max-width: 38rem;
-    max-width: var(--max-width-xs)
-}
-
-@media (min-width: 64rem) {
-    .max-width-adaptive-xl {
-        max-width: 64rem;
-        max-width: var(--max-width-md)
-    }
-}
-
-@media (min-width: 90rem) {
-    .max-width-adaptive-xl {
-        max-width: 90rem;
-        max-width: var(--max-width-xl)
-    }
-}
-
-.grid {
-    --grid-gap: 0px;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap
-}
-
-.grid>* {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%
-}
-
-[class*="grid-gap"] {
-    margin-bottom: 1em * -1;
-    margin-bottom: calc(var(--grid-gap, 1em)*-1);
-    margin-right: 1em * -1;
-    margin-right: calc(var(--grid-gap, 1em)*-1)
-}
-
-[class*="grid-gap"]>* {
-    margin-bottom: 1em;
-    margin-bottom: var(--grid-gap, 1em);
-    margin-right: 1em;
-    margin-right: var(--grid-gap, 1em)
-}
-
-.grid-gap-xxxxs {
-    --grid-gap: var(--space-xxxxs)
-}
-
-.grid-gap-xxxs {
-    --grid-gap: var(--space-xxxs)
-}
-
-.grid-gap-xxs {
-    --grid-gap: var(--space-xxs)
-}
-
-.grid-gap-xs {
-    --grid-gap: var(--space-xs)
-}
-
-.grid-gap-sm {
-    --grid-gap: var(--space-sm)
-}
-
-.grid-gap-md {
-    --grid-gap: var(--space-md)
-}
-
-.grid-gap-lg {
-    --grid-gap: var(--space-lg)
-}
-
-.grid-gap-xl {
-    --grid-gap: var(--space-xl)
-}
-
-.grid-gap-xxl {
-    --grid-gap: var(--space-xxl)
-}
-
-.grid-gap-xxxl {
-    --grid-gap: var(--space-xxxl)
-}
-
-.grid-gap-xxxxl {
-    --grid-gap: var(--space-xxxxl)
-}
-
-.col {
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%
-}
-
-.col-1 {
-    -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(8.33% - 0.01px - 1em);
-    flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(8.33% - 0.01px - 1em);
-    max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-2 {
-    -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(16.66% - 0.01px - 1em);
-    flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(16.66% - 0.01px - 1em);
-    max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-3 {
-    -ms-flex-preferred-size: calc(25% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(25% - 0.01px - 1em);
-    flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(25% - 0.01px - 1em);
-    max-width: calc(25% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-4 {
-    -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(33.33% - 0.01px - 1em);
-    flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(33.33% - 0.01px - 1em);
-    max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-5 {
-    -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(41.66% - 0.01px - 1em);
-    flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(41.66% - 0.01px - 1em);
-    max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-6 {
-    -ms-flex-preferred-size: calc(50% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(50% - 0.01px - 1em);
-    flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(50% - 0.01px - 1em);
-    max-width: calc(50% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-7 {
-    -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(58.33% - 0.01px - 1em);
-    flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(58.33% - 0.01px - 1em);
-    max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-8 {
-    -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(66.66% - 0.01px - 1em);
-    flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(66.66% - 0.01px - 1em);
-    max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-9 {
-    -ms-flex-preferred-size: calc(75% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(75% - 0.01px - 1em);
-    flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(75% - 0.01px - 1em);
-    max-width: calc(75% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-10 {
-    -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(83.33% - 0.01px - 1em);
-    flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(83.33% - 0.01px - 1em);
-    max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-11 {
-    -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(91.66% - 0.01px - 1em);
-    flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(91.66% - 0.01px - 1em);
-    max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em))
-}
-
-.col-12 {
-    -ms-flex-preferred-size: calc(100% - 0.01px - 1em);
-    -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em));
-    flex-basis: calc(100% - 0.01px - 1em);
-    flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em));
-    max-width: calc(100% - 0.01px - 1em);
-    max-width: calc(100% - 0.01px - var(--grid-gap, 1em))
-}
-
-@media (min-width: 32rem) {
-    .col\@xs {
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-        max-width: 100%
-    }
-    .col-1\@xs {
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(8.33% - 0.01px - 1em);
-        flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(8.33% - 0.01px - 1em);
-        max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-2\@xs {
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(16.66% - 0.01px - 1em);
-        flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(16.66% - 0.01px - 1em);
-        max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-3\@xs {
-        -ms-flex-preferred-size: calc(25% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(25% - 0.01px - 1em);
-        flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(25% - 0.01px - 1em);
-        max-width: calc(25% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-4\@xs {
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(33.33% - 0.01px - 1em);
-        flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(33.33% - 0.01px - 1em);
-        max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-5\@xs {
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(41.66% - 0.01px - 1em);
-        flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(41.66% - 0.01px - 1em);
-        max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-6\@xs {
-        -ms-flex-preferred-size: calc(50% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(50% - 0.01px - 1em);
-        flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(50% - 0.01px - 1em);
-        max-width: calc(50% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-7\@xs {
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(58.33% - 0.01px - 1em);
-        flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(58.33% - 0.01px - 1em);
-        max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-8\@xs {
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(66.66% - 0.01px - 1em);
-        flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(66.66% - 0.01px - 1em);
-        max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-9\@xs {
-        -ms-flex-preferred-size: calc(75% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(75% - 0.01px - 1em);
-        flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(75% - 0.01px - 1em);
-        max-width: calc(75% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-10\@xs {
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(83.33% - 0.01px - 1em);
-        flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(83.33% - 0.01px - 1em);
-        max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-11\@xs {
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(91.66% - 0.01px - 1em);
-        flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(91.66% - 0.01px - 1em);
-        max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-12\@xs {
-        -ms-flex-preferred-size: calc(100% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(100% - 0.01px - 1em);
-        flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(100% - 0.01px - 1em);
-        max-width: calc(100% - 0.01px - var(--grid-gap, 1em))
-    }
-}
-
-@media (min-width: 48rem) {
-    .col\@sm {
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-        max-width: 100%
-    }
-    .col-1\@sm {
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(8.33% - 0.01px - 1em);
-        flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(8.33% - 0.01px - 1em);
-        max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-2\@sm {
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(16.66% - 0.01px - 1em);
-        flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(16.66% - 0.01px - 1em);
-        max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-3\@sm {
-        -ms-flex-preferred-size: calc(25% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(25% - 0.01px - 1em);
-        flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(25% - 0.01px - 1em);
-        max-width: calc(25% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-4\@sm {
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(33.33% - 0.01px - 1em);
-        flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(33.33% - 0.01px - 1em);
-        max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-5\@sm {
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(41.66% - 0.01px - 1em);
-        flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(41.66% - 0.01px - 1em);
-        max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-6\@sm {
-        -ms-flex-preferred-size: calc(50% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(50% - 0.01px - 1em);
-        flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(50% - 0.01px - 1em);
-        max-width: calc(50% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-7\@sm {
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(58.33% - 0.01px - 1em);
-        flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(58.33% - 0.01px - 1em);
-        max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-8\@sm {
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(66.66% - 0.01px - 1em);
-        flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(66.66% - 0.01px - 1em);
-        max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-9\@sm {
-        -ms-flex-preferred-size: calc(75% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(75% - 0.01px - 1em);
-        flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(75% - 0.01px - 1em);
-        max-width: calc(75% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-10\@sm {
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(83.33% - 0.01px - 1em);
-        flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(83.33% - 0.01px - 1em);
-        max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-11\@sm {
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(91.66% - 0.01px - 1em);
-        flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(91.66% - 0.01px - 1em);
-        max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-12\@sm {
-        -ms-flex-preferred-size: calc(100% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(100% - 0.01px - 1em);
-        flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(100% - 0.01px - 1em);
-        max-width: calc(100% - 0.01px - var(--grid-gap, 1em))
-    }
-}
-
-@media (min-width: 64rem) {
-    .col\@md {
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-        max-width: 100%
-    }
-    .col-1\@md {
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(8.33% - 0.01px - 1em);
-        flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(8.33% - 0.01px - 1em);
-        max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-2\@md {
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(16.66% - 0.01px - 1em);
-        flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(16.66% - 0.01px - 1em);
-        max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-3\@md {
-        -ms-flex-preferred-size: calc(25% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(25% - 0.01px - 1em);
-        flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(25% - 0.01px - 1em);
-        max-width: calc(25% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-4\@md {
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(33.33% - 0.01px - 1em);
-        flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(33.33% - 0.01px - 1em);
-        max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-5\@md {
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(41.66% - 0.01px - 1em);
-        flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(41.66% - 0.01px - 1em);
-        max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-6\@md {
-        -ms-flex-preferred-size: calc(50% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(50% - 0.01px - 1em);
-        flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(50% - 0.01px - 1em);
-        max-width: calc(50% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-7\@md {
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(58.33% - 0.01px - 1em);
-        flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(58.33% - 0.01px - 1em);
-        max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-8\@md {
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(66.66% - 0.01px - 1em);
-        flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(66.66% - 0.01px - 1em);
-        max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-9\@md {
-        -ms-flex-preferred-size: calc(75% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(75% - 0.01px - 1em);
-        flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(75% - 0.01px - 1em);
-        max-width: calc(75% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-10\@md {
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(83.33% - 0.01px - 1em);
-        flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(83.33% - 0.01px - 1em);
-        max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-11\@md {
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(91.66% - 0.01px - 1em);
-        flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(91.66% - 0.01px - 1em);
-        max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-12\@md {
-        -ms-flex-preferred-size: calc(100% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(100% - 0.01px - 1em);
-        flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(100% - 0.01px - 1em);
-        max-width: calc(100% - 0.01px - var(--grid-gap, 1em))
-    }
-}
-
-@media (min-width: 80rem) {
-    .col\@lg {
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-        max-width: 100%
-    }
-    .col-1\@lg {
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(8.33% - 0.01px - 1em);
-        flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(8.33% - 0.01px - 1em);
-        max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-2\@lg {
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(16.66% - 0.01px - 1em);
-        flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(16.66% - 0.01px - 1em);
-        max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-3\@lg {
-        -ms-flex-preferred-size: calc(25% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(25% - 0.01px - 1em);
-        flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(25% - 0.01px - 1em);
-        max-width: calc(25% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-4\@lg {
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(33.33% - 0.01px - 1em);
-        flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(33.33% - 0.01px - 1em);
-        max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-5\@lg {
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(41.66% - 0.01px - 1em);
-        flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(41.66% - 0.01px - 1em);
-        max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-6\@lg {
-        -ms-flex-preferred-size: calc(50% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(50% - 0.01px - 1em);
-        flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(50% - 0.01px - 1em);
-        max-width: calc(50% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-7\@lg {
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(58.33% - 0.01px - 1em);
-        flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(58.33% - 0.01px - 1em);
-        max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-8\@lg {
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(66.66% - 0.01px - 1em);
-        flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(66.66% - 0.01px - 1em);
-        max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-9\@lg {
-        -ms-flex-preferred-size: calc(75% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(75% - 0.01px - 1em);
-        flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(75% - 0.01px - 1em);
-        max-width: calc(75% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-10\@lg {
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(83.33% - 0.01px - 1em);
-        flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(83.33% - 0.01px - 1em);
-        max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-11\@lg {
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(91.66% - 0.01px - 1em);
-        flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(91.66% - 0.01px - 1em);
-        max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-12\@lg {
-        -ms-flex-preferred-size: calc(100% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(100% - 0.01px - 1em);
-        flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(100% - 0.01px - 1em);
-        max-width: calc(100% - 0.01px - var(--grid-gap, 1em))
-    }
-}
-
-@media (min-width: 90rem) {
-    .col\@xl {
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-        max-width: 100%
-    }
-    .col-1\@xl {
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(8.33% - 0.01px - 1em);
-        flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(8.33% - 0.01px - 1em);
-        max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-2\@xl {
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(16.66% - 0.01px - 1em);
-        flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(16.66% - 0.01px - 1em);
-        max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-3\@xl {
-        -ms-flex-preferred-size: calc(25% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(25% - 0.01px - 1em);
-        flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(25% - 0.01px - 1em);
-        max-width: calc(25% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-4\@xl {
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(33.33% - 0.01px - 1em);
-        flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(33.33% - 0.01px - 1em);
-        max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-5\@xl {
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(41.66% - 0.01px - 1em);
-        flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(41.66% - 0.01px - 1em);
-        max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-6\@xl {
-        -ms-flex-preferred-size: calc(50% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(50% - 0.01px - 1em);
-        flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(50% - 0.01px - 1em);
-        max-width: calc(50% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-7\@xl {
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(58.33% - 0.01px - 1em);
-        flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(58.33% - 0.01px - 1em);
-        max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-8\@xl {
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(66.66% - 0.01px - 1em);
-        flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(66.66% - 0.01px - 1em);
-        max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-9\@xl {
-        -ms-flex-preferred-size: calc(75% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(75% - 0.01px - 1em);
-        flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(75% - 0.01px - 1em);
-        max-width: calc(75% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-10\@xl {
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(83.33% - 0.01px - 1em);
-        flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(83.33% - 0.01px - 1em);
-        max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-11\@xl {
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(91.66% - 0.01px - 1em);
-        flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(91.66% - 0.01px - 1em);
-        max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em))
-    }
-    .col-12\@xl {
-        -ms-flex-preferred-size: calc(100% - 0.01px - 1em);
-        -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em));
-        flex-basis: calc(100% - 0.01px - 1em);
-        flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em));
-        max-width: calc(100% - 0.01px - 1em);
-        max-width: calc(100% - 0.01px - var(--grid-gap, 1em))
-    }
-}
-
-:root {
-    --radius-sm: calc(var(--radius, 0.25em)/2);
-    --radius-md: var(--radius, 0.25em);
-    --radius-lg: calc(var(--radius, 0.25em)*2);
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1);
-    --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);
-    --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);
-    --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
-    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)
-}
-
-:root {
-    --body-line-height: 1.4;
-    --heading-line-height: 1.2
-}
-
-body {
-    color: hsl(240, 4%, 20%);
-    color: var(--color-contrast-high, #313135)
-}
-
-h1, h2, h3, h4 {
-    color: hsl(240, 8%, 12%);
-    color: var(--color-contrast-higher, #1c1c21);
-    line-height: 1.2;
-    line-height: var(--heading-line-height, 1.2)
-}
-
-.text-xxxl {
-    font-size: 2.48832em;
-    font-size: var(--text-xxxl, 2.488em)
-}
-
-small, .text-sm {
-    font-size: 0.83333em;
-    font-size: var(--text-sm, 0.833em)
-}
-
-.text-xs {
-    font-size: 0.69444em;
-    font-size: var(--text-xs, 0.694em)
-}
-
-strong, .text-bold {
-    font-weight: bold
-}
-
-s {
-    text-decoration: line-through
-}
-
-u, .text-underline {
-    text-decoration: underline
-}
-
-
-.text-component h1, .text-component h2, .text-component h3, .text-component h4 {
-    line-height: 1.2;
-    line-height: var(--component-heading-line-height, 1.2);
-    margin-bottom: 0.25em;
-    margin-bottom: calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1))
-}
-
-.text-component h2, .text-component h3, .text-component h4 {
-    margin-top: 0.75em;
-    margin-top: calc(var(--space-sm)*var(--text-vspace-multiplier, 1))
-}
-
-.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li {
-    line-height: 1.4;
-    line-height: var(--component-body-line-height)
-}
-
-.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block {
-    margin-bottom: 0.75em;
-    margin-bottom: calc(var(--space-sm)*var(--text-vspace-multiplier, 1))
-}
-
-.text-component ul, .text-component ol {
-    padding-left: 1em
-}
-
-.text-component ul {
-    list-style-type: disc
-}
-
-.text-component ol {
-    list-style-type: decimal
-}
-
-.text-component img {
-    display: block;
-    margin: 0 auto
-}
-
-.text-component figcaption {
-    text-align: center;
-    margin-top: 0.5em;
-    margin-top: var(--space-xs)
-}
-
-.text-component em {
-    font-style: italic
-}
-
-.text-component hr {
-    margin-top: 2em;
-    margin-top: calc(var(--space-lg)*var(--text-vspace-multiplier, 1));
-    margin-bottom: 2em;
-    margin-bottom: calc(var(--space-lg)*var(--text-vspace-multiplier, 1));
-    margin-left: auto;
-    margin-right: auto
-}
-
-.text-component>*:first-child {
-    margin-top: 0
-}
-
-.text-component>*:last-child {
-    margin-bottom: 0
-}
-
-.text-component__block--full-width {
-    width: 100vw;
-    margin-left: calc(50% - 50vw)
-}
-
-@media (min-width: 48rem) {
-    .text-component__block--left, .text-component__block--right {
-        width: 45%
-    }
-    .text-component__block--left img, .text-component__block--right img {
-        width: 100%
-    }
-    .text-component__block--left {
-        float: left;
-        margin-right: 0.75em;
-        margin-right: calc(var(--space-sm)*var(--text-vspace-multiplier, 1))
-    }
-    .text-component__block--right {
-        float: right;
-        margin-left: 0.75em;
-        margin-left: calc(var(--space-sm)*var(--text-vspace-multiplier, 1))
-    }
-}
-
-@media (min-width: 90rem) {
-    .text-component__block--outset {
-        width: calc(100% + 10.5em);
-        width: calc(100% + 2*var(--space-xxl))
-    }
-    .text-component__block--outset img {
-        width: 100%
-    }
-    .text-component__block--outset:not(.text-component__block--right) {
-        margin-left: -5.25em;
-        margin-left: calc(-1*var(--space-xxl))
-    }
-    .text-component__block--left, .text-component__block--right {
-        width: 50%
-    }
-    .text-component__block--right.text-component__block--outset {
-        margin-right: -5.25em;
-        margin-right: calc(-1*var(--space-xxl))
-    }
-}
-
-:root {
-    --icon-xxs: 12px;
-    --icon-xs: 16px;
-    --icon-sm: 24px;
-    --icon-md: 32px;
-    --icon-lg: 48px;
-    --icon-xl: 64px;
-    --icon-xxl: 128px
-}
-
-.icon--xxs {
-    font-size: 12px;
-    font-size: var(--icon-xxs)
-}
-
-.icon--xs {
-    font-size: 16px;
-    font-size: var(--icon-xs)
-}
-
-.icon--sm {
-    font-size: 24px;
-    font-size: var(--icon-sm)
-}
-
-.icon--md {
-    font-size: 32px;
-    font-size: var(--icon-md)
-}
-
-.icon--lg {
-    font-size: 48px;
-    font-size: var(--icon-lg)
-}
-
-.icon--xl {
-    font-size: 64px;
-    font-size: var(--icon-xl)
-}
-
-.icon--xxl {
-    font-size: 128px;
-    font-size: var(--icon-xxl)
-}
-
-.icon--is-spinning {
-    -webkit-animation: icon-spin 1s infinite linear;
-    animation: icon-spin 1s infinite linear
-}
-
-@-webkit-keyframes icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg)
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg)
-    }
-}
-
-@keyframes icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg)
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg)
-    }
-}
-
-.icon use {
-    color: inherit;
-    fill: currentColor
-}
-
-.btn {
-    position: relative;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -ms-flex-align: center;
-    align-items: center;
-    white-space: nowrap;
-    text-decoration: none;
-    line-height: 1;
-    font-size: 1em;
-    font-size: var(--btn-font-size, 1em);
-    padding-top: 0.5em;
-    padding-top: var(--btn-padding-y, 0.5em);
-    padding-bottom: 0.5em;
-    padding-bottom: var(--btn-padding-y, 0.5em);
-    padding-left: 0.75em;
-    padding-left: var(--btn-padding-x, 0.75em);
-    padding-right: 0.75em;
-    padding-right: var(--btn-padding-x, 0.75em);
-    border-radius: 0.25em;
-    border-radius: var(--btn-radius, 0.25em)
-}
-
-.btn--primary {
-    background-color: hsl(220, 90%, 56%);
-    background-color: var(--color-primary, #2a6df4);
-    color: hsl(0, 0%, 100%);
-    color: var(--color-white, #fff)
-}
-
-.btn--subtle {
-    background-color: hsl(240, 1%, 83%);
-    background-color: var(--color-contrast-low, #d3d3d4);
-    color: hsl(240, 8%, 12%);
-    color: var(--color-contrast-higher, #1c1c21)
-}
-
-.btn--accent {
-    background-color: hsl(355, 90%, 61%);
-    background-color: var(--color-accent, #f54251);
-    color: hsl(0, 0%, 100%);
-    color: var(--color-white, #fff)
-}
-
-.btn--disabled {
-    cursor: not-allowed
-}
-
-.btn--sm {
-    font-size: 0.8em;
-    font-size: var(--btn-font-size-sm, 0.8em)
-}
-
-.btn--md {
-    font-size: 1.2em;
-    font-size: var(--btn-font-size-md, 1.2em)
-}
-
-.btn--lg {
-    font-size: 1.4em;
-    font-size: var(--btn-font-size-lg, 1.4em)
-}
-
-.btn--icon {
-    padding: 0.5em;
-    padding: var(--btn-padding-y, 0.5em)
-}
-
-.form-control {
-    background-color: hsl(0, 0%, 100%);
-    background-color: var(--color-bg, #f2f2f2);
-    padding-top: 0.5em;
-    padding-top: var(--form-control-padding-y, 0.5em);
-    padding-bottom: 0.5em;
-    padding-bottom: var(--form-control-padding-y, 0.5em);
-    padding-left: 0.75em;
-    padding-left: var(--form-control-padding-x, 0.75em);
-    padding-right: 0.75em;
-    padding-right: var(--form-control-padding-x, 0.75em);
-    border-radius: 0.25em;
-    border-radius: var(--form-control-radius, 0.25em)
-}
-
-.form-control::-webkit-input-placeholder {
-    color: hsl(240, 1%, 48%);
-    color: var(--color-contrast-medium, #79797c)
-}
-
-.form-control::-moz-placeholder {
-    opacity: 1;
-    color: hsl(240, 1%, 48%);
-    color: var(--color-contrast-medium, #79797c)
-}
-
-.form-control:-ms-input-placeholder {
-    color: hsl(240, 1%, 48%);
-    color: var(--color-contrast-medium, #79797c)
-}
-
-.form-control:-moz-placeholder {
-    color: hsl(240, 1%, 48%);
-    color: var(--color-contrast-medium, #79797c)
-}
-
-.form-control[disabled], .form-control[readonly] {
-    cursor: not-allowed
-}
-
-.form-legend {
-    color: hsl(240, 8%, 12%);
-    color: var(--color-contrast-higher, #1c1c21);
-    line-height: 1.2;
-    font-size: 1.2em;
-    font-size: var(--text-md, 1.2em);
-    margin-bottom: 0.375em;
-    margin-bottom: var(--space-xxs)
-}
-
-.form-label {
-    display: inline-block
-}
-
-.form__msg-error {
-    background-color: hsl(355, 90%, 61%);
-    background-color: var(--color-error, #f54251);
-    color: hsl(0, 0%, 100%);
-    color: var(--color-white, #fff);
-    font-size: 0.83333em;
-    font-size: var(--text-sm, 0.833em);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    padding: 0.5em;
-    padding: var(--space-xs);
-    margin-top: 0.75em;
-    margin-top: var(--space-sm);
-    border-radius: 0.25em;
-    border-radius: var(--radius-md, 0.25em);
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px)
-}
-
-.form__msg-error::before {
-    content: '';
-    position: absolute;
-    left: 0.75em;
-    left: var(--space-sm);
-    top: 0;
-    -webkit-transform: translateY(-100%);
-    -ms-transform: translateY(-100%);
-    transform: translateY(-100%);
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    border-bottom-color: hsl(355, 90%, 61%);
-    border-bottom-color: var(--color-error)
-}
-
-.form__msg-error--is-visible {
-    position: relative;
-    clip: auto
-}
-
-.radio-list>*, .checkbox-list>* {
-    position: relative;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-    margin-bottom: 0.375em;
-    margin-bottom: var(--space-xxs)
-}
-
-.radio-list>*:last-of-type, .checkbox-list>*:last-of-type {
-    margin-bottom: 0
-}
-
-.radio-list label, .checkbox-list label {
-    line-height: 1.4;
-    line-height: var(--body-line-height);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none
-}
-
-.radio-list input, .checkbox-list input {
-    vertical-align: top;
-    margin-right: 0.25em;
-    margin-right: var(--space-xxxs);
-    -ms-flex-negative: 0;
-    flex-shrink: 0
-}
-
-:root {
-    --zindex-header: 2;
-    --zindex-popover: 5;
-    --zindex-fixed-element: 10;
-    --zindex-overlay: 15
-}
-
-@media not all and (min-width: 32rem) {
-    .display\@xs {
-        display: none !important
-    }
-}
-
-@media (min-width: 32rem) {
-    .hide\@xs {
-        display: none !important
-    }
-}
-
-@media not all and (min-width: 48rem) {
-    .display\@sm {
-        display: none !important
-    }
-}
-
-@media (min-width: 48rem) {
-    .hide\@sm {
-        display: none !important
-    }
-}
-
-@media not all and (min-width: 64rem) {
-    .display\@md {
-        display: none !important
-    }
-}
-
-@media (min-width: 64rem) {
-    .hide\@md {
-        display: none !important
-    }
-}
-
-@media not all and (min-width: 80rem) {
-    .display\@lg {
-        display: none !important
-    }
-}
-
-@media (min-width: 80rem) {
-    .hide\@lg {
-        display: none !important
-    }
-}
-
-@media not all and (min-width: 90rem) {
-    .display\@xl {
-        display: none !important
-    }
-}
-
-@media (min-width: 90rem) {
-    .hide\@xl {
-        display: none !important
-    }
-}
-
-:root {
-    --display: block
-}
-
-.is-visible {
-    display: block !important;
-    display: var(--display) !important
-}
-
-.is-hidden {
-    display: none !important
-}
-
-.sr-only {
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-    -webkit-clip-path: inset(50%);
-    clip-path: inset(50%);
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    border: 0;
-    white-space: nowrap
-}
-
-.flex {
-    display: -ms-flexbox;
-    display: flex
-}
-
-.inline-flex {
-    display: -ms-inline-flexbox;
-    display: inline-flex
-}
-
-.flex-wrap {
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap
-}
-
-.flex-column {
-    -ms-flex-direction: column;
-    flex-direction: column
-}
-
-.flex-row {
-    -ms-flex-direction: row;
-    flex-direction: row
-}
-
-.flex-center {
-    -ms-flex-pack: center;
-    justify-content: center;
-    -ms-flex-align: center;
-    align-items: center
-}
-
-.justify-start {
-    -ms-flex-pack: start;
-    justify-content: flex-start
-}
-
-.justify-end {
-    -ms-flex-pack: end;
-    justify-content: flex-end
-}
-
-.justify-center {
-    -ms-flex-pack: center;
-    justify-content: center
-}
-
-.justify-between {
-    -ms-flex-pack: justify;
-    justify-content: space-between
-}
-
-.items-center {
-    -ms-flex-align: center;
-    align-items: center
-}
-
-.items-start {
-    -ms-flex-align: start;
-    align-items: flex-start
-}
-
-.items-end {
-    -ms-flex-align: end;
-    align-items: flex-end
-}
-
-@media (min-width: 32rem) {
-    .flex-wrap\@xs {
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap
-    }
-    .flex-column\@xs {
-        -ms-flex-direction: column;
-        flex-direction: column
-    }
-    .flex-row\@xs {
-        -ms-flex-direction: row;
-        flex-direction: row
-    }
-    .flex-center\@xs {
-        -ms-flex-pack: center;
-        justify-content: center;
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .justify-start\@xs {
-        -ms-flex-pack: start;
-        justify-content: flex-start
-    }
-    .justify-end\@xs {
-        -ms-flex-pack: end;
-        justify-content: flex-end
-    }
-    .justify-center\@xs {
-        -ms-flex-pack: center;
-        justify-content: center
-    }
-    .justify-between\@xs {
-        -ms-flex-pack: justify;
-        justify-content: space-between
-    }
-    .items-center\@xs {
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .items-start\@xs {
-        -ms-flex-align: start;
-        align-items: flex-start
-    }
-    .items-end\@xs {
-        -ms-flex-align: end;
-        align-items: flex-end
-    }
-}
-
-@media (min-width: 48rem) {
-    .flex-wrap\@sm {
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap
-    }
-    .flex-column\@sm {
-        -ms-flex-direction: column;
-        flex-direction: column
-    }
-    .flex-row\@sm {
-        -ms-flex-direction: row;
-        flex-direction: row
-    }
-    .flex-center\@sm {
-        -ms-flex-pack: center;
-        justify-content: center;
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .justify-start\@sm {
-        -ms-flex-pack: start;
-        justify-content: flex-start
-    }
-    .justify-end\@sm {
-        -ms-flex-pack: end;
-        justify-content: flex-end
-    }
-    .justify-center\@sm {
-        -ms-flex-pack: center;
-        justify-content: center
-    }
-    .justify-between\@sm {
-        -ms-flex-pack: justify;
-        justify-content: space-between
-    }
-    .items-center\@sm {
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .items-start\@sm {
-        -ms-flex-align: start;
-        align-items: flex-start
-    }
-    .items-end\@sm {
-        -ms-flex-align: end;
-        align-items: flex-end
-    }
-}
-
-@media (min-width: 64rem) {
-    .flex-wrap\@md {
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap
-    }
-    .flex-column\@md {
-        -ms-flex-direction: column;
-        flex-direction: column
-    }
-    .flex-row\@md {
-        -ms-flex-direction: row;
-        flex-direction: row
-    }
-    .flex-center\@md {
-        -ms-flex-pack: center;
-        justify-content: center;
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .justify-start\@md {
-        -ms-flex-pack: start;
-        justify-content: flex-start
-    }
-    .justify-end\@md {
-        -ms-flex-pack: end;
-        justify-content: flex-end
-    }
-    .justify-center\@md {
-        -ms-flex-pack: center;
-        justify-content: center
-    }
-    .justify-between\@md {
-        -ms-flex-pack: justify;
-        justify-content: space-between
-    }
-    .items-center\@md {
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .items-start\@md {
-        -ms-flex-align: start;
-        align-items: flex-start
-    }
-    .items-end\@md {
-        -ms-flex-align: end;
-        align-items: flex-end
-    }
-}
-
-@media (min-width: 80rem) {
-    .flex-wrap\@lg {
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap
-    }
-    .flex-column\@lg {
-        -ms-flex-direction: column;
-        flex-direction: column
-    }
-    .flex-row\@lg {
-        -ms-flex-direction: row;
-        flex-direction: row
-    }
-    .flex-center\@lg {
-        -ms-flex-pack: center;
-        justify-content: center;
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .justify-start\@lg {
-        -ms-flex-pack: start;
-        justify-content: flex-start
-    }
-    .justify-end\@lg {
-        -ms-flex-pack: end;
-        justify-content: flex-end
-    }
-    .justify-center\@lg {
-        -ms-flex-pack: center;
-        justify-content: center
-    }
-    .justify-between\@lg {
-        -ms-flex-pack: justify;
-        justify-content: space-between
-    }
-    .items-center\@lg {
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .items-start\@lg {
-        -ms-flex-align: start;
-        align-items: flex-start
-    }
-    .items-end\@lg {
-        -ms-flex-align: end;
-        align-items: flex-end
-    }
-}
-
-@media (min-width: 90rem) {
-    .flex-wrap\@xl {
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap
-    }
-    .flex-column\@xl {
-        -ms-flex-direction: column;
-        flex-direction: column
-    }
-    .flex-row\@xl {
-        -ms-flex-direction: row;
-        flex-direction: row
-    }
-    .flex-center\@xl {
-        -ms-flex-pack: center;
-        justify-content: center;
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .justify-start\@xl {
-        -ms-flex-pack: start;
-        justify-content: flex-start
-    }
-    .justify-end\@xl {
-        -ms-flex-pack: end;
-        justify-content: flex-end
-    }
-    .justify-center\@xl {
-        -ms-flex-pack: center;
-        justify-content: center
-    }
-    .justify-between\@xl {
-        -ms-flex-pack: justify;
-        justify-content: space-between
-    }
-    .items-center\@xl {
-        -ms-flex-align: center;
-        align-items: center
-    }
-    .items-start\@xl {
-        -ms-flex-align: start;
-        align-items: flex-start
-    }
-    .items-end\@xl {
-        -ms-flex-align: end;
-        align-items: flex-end
-    }
-}
-
-.flex-grow {
-    -ms-flex-positive: 1;
-    flex-grow: 1
-}
-
-.flex-shrink-0 {
-    -ms-flex-negative: 0;
-    flex-shrink: 0
-}
-
-.flex-gap-xxxs {
-    margin-bottom: -0.25em;
-    margin-bottom: calc(-1*var(--space-xxxs));
-    margin-right: -0.25em;
-    margin-right: calc(-1*var(--space-xxxs))
-}
-
-.flex-gap-xxxs>* {
-    margin-bottom: 0.25em;
-    margin-bottom: var(--space-xxxs);
-    margin-right: 0.25em;
-    margin-right: var(--space-xxxs)
-}
-
-.flex-gap-xxs {
-    margin-bottom: -0.375em;
-    margin-bottom: calc(-1*var(--space-xxs));
-    margin-right: -0.375em;
-    margin-right: calc(-1*var(--space-xxs))
-}
-
-.flex-gap-xxs>* {
-    margin-bottom: 0.375em;
-    margin-bottom: var(--space-xxs);
-    margin-right: 0.375em;
-    margin-right: var(--space-xxs)
-}
-
-.flex-gap-xs {
-    margin-bottom: -0.5em;
-    margin-bottom: calc(-1*var(--space-xs));
-    margin-right: -0.5em;
-    margin-right: calc(-1*var(--space-xs))
-}
-
-.flex-gap-xs>* {
-    margin-bottom: 0.5em;
-    margin-bottom: var(--space-xs);
-    margin-right: 0.5em;
-    margin-right: var(--space-xs)
-}
-
-.flex-gap-sm {
-    margin-bottom: -0.75em;
-    margin-bottom: calc(-1*var(--space-sm));
-    margin-right: -0.75em;
-    margin-right: calc(-1*var(--space-sm))
-}
-
-.flex-gap-sm>* {
-    margin-bottom: 0.75em;
-    margin-bottom: var(--space-sm);
-    margin-right: 0.75em;
-    margin-right: var(--space-sm)
-}
-
-.flex-gap-md {
-    margin-bottom: -1.25em;
-    margin-bottom: calc(-1*var(--space-md));
-    margin-right: -1.25em;
-    margin-right: calc(-1*var(--space-md))
-}
-
-.flex-gap-md>* {
-    margin-bottom: 1.25em;
-    margin-bottom: var(--space-md);
-    margin-right: 1.25em;
-    margin-right: var(--space-md)
-}
-
-.flex-gap-lg {
-    margin-bottom: -2em;
-    margin-bottom: calc(-1*var(--space-lg));
-    margin-right: -2em;
-    margin-right: calc(-1*var(--space-lg))
-}
-
-.flex-gap-lg>* {
-    margin-bottom: 2em;
-    margin-bottom: var(--space-lg);
-    margin-right: 2em;
-    margin-right: var(--space-lg)
-}
-
-.flex-gap-xl {
-    margin-bottom: -3.25em;
-    margin-bottom: calc(-1*var(--space-xl));
-    margin-right: -3.25em;
-    margin-right: calc(-1*var(--space-xl))
-}
-
-.flex-gap-xl>* {
-    margin-bottom: 3.25em;
-    margin-bottom: var(--space-xl);
-    margin-right: 3.25em;
-    margin-right: var(--space-xl)
-}
-
-.flex-gap-xxl {
-    margin-bottom: -5.25em;
-    margin-bottom: calc(-1*var(--space-xxl));
-    margin-right: -5.25em;
-    margin-right: calc(-1*var(--space-xxl))
-}
-
-.flex-gap-xxl>* {
-    margin-bottom: 5.25em;
-    margin-bottom: var(--space-xxl);
-    margin-right: 5.25em;
-    margin-right: var(--space-xxl)
-}
-
-.margin-xxxxs {
-    margin: 0.125em;
-    margin: var(--space-xxxxs)
-}
-
-.margin-xxxs {
-    margin: 0.25em;
-    margin: var(--space-xxxs)
-}
-
-.margin-xxs {
-    margin: 0.375em;
-    margin: var(--space-xxs)
-}
-
-.margin-xs {
-    margin: 0.5em;
-    margin: var(--space-xs)
-}
-
-.margin-sm {
-    margin: 0.75em;
-    margin: var(--space-sm)
-}
-
-.margin-md {
-    margin: 1.25em;
-    margin: var(--space-md)
-}
-
-.margin-lg {
-    margin: 2em;
-    margin: var(--space-lg)
-}
-
-.margin-xl {
-    margin: 3.25em;
-    margin: var(--space-xl)
-}
-
-.margin-xxl {
-    margin: 5.25em;
-    margin: var(--space-xxl)
-}
-
-.margin-xxxl {
-    margin: 8.5em;
-    margin: var(--space-xxxl)
-}
-
-.margin-xxxxl {
-    margin: 13.75em;
-    margin: var(--space-xxxxl)
-}
-
-.margin-auto {
-    margin: auto
-}
-
-.margin-top-xxxxs {
-    margin-top: 0.125em;
-    margin-top: var(--space-xxxxs)
-}
-
-.margin-top-xxxs {
-    margin-top: 0.25em;
-    margin-top: var(--space-xxxs)
-}
-
-.margin-top-xxs {
-    margin-top: 0.375em;
-    margin-top: var(--space-xxs)
-}
-
-.margin-top-xs {
-    margin-top: 0.5em;
-    margin-top: var(--space-xs)
-}
-
-.margin-top-sm {
-    margin-top: 0.75em;
-    margin-top: var(--space-sm)
-}
-
-.margin-top-md {
-    margin-top: 1.25em;
-    margin-top: var(--space-md)
-}
-
-.margin-top-lg {
-    margin-top: 2em;
-    margin-top: var(--space-lg)
-}
-
-.margin-top-xl {
-    margin-top: 3.25em;
-    margin-top: var(--space-xl)
-}
-
-.margin-top-xxl {
-    margin-top: 5.25em;
-    margin-top: var(--space-xxl)
-}
-
-.margin-top-xxxl {
-    margin-top: 8.5em;
-    margin-top: var(--space-xxxl)
-}
-
-.margin-top-xxxxl {
-    margin-top: 13.75em;
-    margin-top: var(--space-xxxxl)
-}
-
-.margin-top-auto {
-    margin-top: auto
-}
-
-.margin-bottom-xxxxs {
-    margin-bottom: 0.125em;
-    margin-bottom: var(--space-xxxxs)
-}
-
-.margin-bottom-xxxs {
-    margin-bottom: 0.25em;
-    margin-bottom: var(--space-xxxs)
-}
-
-.margin-bottom-xxs {
-    margin-bottom: 0.375em;
-    margin-bottom: var(--space-xxs)
-}
-
-.margin-bottom-xs {
-    margin-bottom: 0.5em;
-    margin-bottom: var(--space-xs)
-}
-
-.margin-bottom-sm {
-    margin-bottom: 0.75em;
-    margin-bottom: var(--space-sm)
-}
-
-.margin-bottom-md {
-    margin-bottom: 1.25em;
-    margin-bottom: var(--space-md)
-}
-
-.margin-bottom-lg {
-    margin-bottom: 2em;
-    margin-bottom: var(--space-lg)
-}
-
-.margin-bottom-xl {
-    margin-bottom: 3.25em;
-    margin-bottom: var(--space-xl)
-}
-
-.margin-bottom-xxl {
-    margin-bottom: 5.25em;
-    margin-bottom: var(--space-xxl)
-}
-
-.margin-bottom-xxxl {
-    margin-bottom: 8.5em;
-    margin-bottom: var(--space-xxxl)
-}
-
-.margin-bottom-xxxxl {
-    margin-bottom: 13.75em;
-    margin-bottom: var(--space-xxxxl)
-}
-
-.margin-bottom-auto {
-    margin-bottom: auto
-}
-
-.margin-right-xxxxs {
-    margin-right: 0.125em;
-    margin-right: var(--space-xxxxs)
-}
-
-.margin-right-xxxs {
-    margin-right: 0.25em;
-    margin-right: var(--space-xxxs)
-}
-
-.margin-right-xxs {
-    margin-right: 0.375em;
-    margin-right: var(--space-xxs)
-}
-
-.margin-right-xs {
-    margin-right: 0.5em;
-    margin-right: var(--space-xs)
-}
-
-.margin-right-sm {
-    margin-right: 0.75em;
-    margin-right: var(--space-sm)
-}
-
-.margin-right-md {
-    margin-right: 1.25em;
-    margin-right: var(--space-md)
-}
-
-.margin-right-lg {
-    margin-right: 2em;
-    margin-right: var(--space-lg)
-}
-
-.margin-right-xl {
-    margin-right: 3.25em;
-    margin-right: var(--space-xl)
-}
-
-.margin-right-xxl {
-    margin-right: 5.25em;
-    margin-right: var(--space-xxl)
-}
-
-.margin-right-xxxl {
-    margin-right: 8.5em;
-    margin-right: var(--space-xxxl)
-}
-
-.margin-right-xxxxl {
-    margin-right: 13.75em;
-    margin-right: var(--space-xxxxl)
-}
-
-.margin-right-auto {
-    margin-right: auto
-}
-
-.margin-left-xxxxs {
-    margin-left: 0.125em;
-    margin-left: var(--space-xxxxs)
-}
-
-.margin-left-xxxs {
-    margin-left: 0.25em;
-    margin-left: var(--space-xxxs)
-}
-
-.margin-left-xxs {
-    margin-left: 0.375em;
-    margin-left: var(--space-xxs)
-}
-
-.margin-left-xs {
-    margin-left: 0.5em;
-    margin-left: var(--space-xs)
-}
-
-.margin-left-sm {
-    margin-left: 0.75em;
-    margin-left: var(--space-sm)
-}
-
-.margin-left-md {
-    margin-left: 1.25em;
-    margin-left: var(--space-md)
-}
-
-.margin-left-lg {
-    margin-left: 2em;
-    margin-left: var(--space-lg)
-}
-
-.margin-left-xl {
-    margin-left: 3.25em;
-    margin-left: var(--space-xl)
-}
-
-.margin-left-xxl {
-    margin-left: 5.25em;
-    margin-left: var(--space-xxl)
-}
-
-.margin-left-xxxl {
-    margin-left: 8.5em;
-    margin-left: var(--space-xxxl)
-}
-
-.margin-left-xxxxl {
-    margin-left: 13.75em;
-    margin-left: var(--space-xxxxl)
-}
-
-.margin-left-auto {
-    margin-left: auto
-}
-
-.margin-x-xxxxs {
-    margin-left: 0.125em;
-    margin-left: var(--space-xxxxs);
-    margin-right: 0.125em;
-    margin-right: var(--space-xxxxs)
-}
-
-.margin-x-xxxs {
-    margin-left: 0.25em;
-    margin-left: var(--space-xxxs);
-    margin-right: 0.25em;
-    margin-right: var(--space-xxxs)
-}
-
-.margin-x-xxs {
-    margin-left: 0.375em;
-    margin-left: var(--space-xxs);
-    margin-right: 0.375em;
-    margin-right: var(--space-xxs)
-}
-
-.margin-x-xs {
-    margin-left: 0.5em;
-    margin-left: var(--space-xs);
-    margin-right: 0.5em;
-    margin-right: var(--space-xs)
-}
-
-.margin-x-sm {
-    margin-left: 0.75em;
-    margin-left: var(--space-sm);
-    margin-right: 0.75em;
-    margin-right: var(--space-sm)
-}
-
-.margin-x-md {
-    margin-left: 1.25em;
-    margin-left: var(--space-md);
-    margin-right: 1.25em;
-    margin-right: var(--space-md)
-}
-
-.margin-x-lg {
-    margin-left: 2em;
-    margin-left: var(--space-lg);
-    margin-right: 2em;
-    margin-right: var(--space-lg)
-}
-
-.margin-x-xl {
-    margin-left: 3.25em;
-    margin-left: var(--space-xl);
-    margin-right: 3.25em;
-    margin-right: var(--space-xl)
-}
-
-.margin-x-xxl {
-    margin-left: 5.25em;
-    margin-left: var(--space-xxl);
-    margin-right: 5.25em;
-    margin-right: var(--space-xxl)
-}
-
-.margin-x-xxxl {
-    margin-left: 8.5em;
-    margin-left: var(--space-xxxl);
-    margin-right: 8.5em;
-    margin-right: var(--space-xxxl)
-}
-
-.margin-x-xxxxl {
-    margin-left: 13.75em;
-    margin-left: var(--space-xxxxl);
-    margin-right: 13.75em;
-    margin-right: var(--space-xxxxl)
-}
-
-.margin-x-auto {
-    margin-left: auto;
-    margin-right: auto
-}
-
-.margin-y-xxxxs {
-    margin-top: 0.125em;
-    margin-top: var(--space-xxxxs);
-    margin-bottom: 0.125em;
-    margin-bottom: var(--space-xxxxs)
-}
-
-.margin-y-xxxs {
-    margin-top: 0.25em;
-    margin-top: var(--space-xxxs);
-    margin-bottom: 0.25em;
-    margin-bottom: var(--space-xxxs)
-}
-
-.margin-y-xxs {
-    margin-top: 0.375em;
-    margin-top: var(--space-xxs);
-    margin-bottom: 0.375em;
-    margin-bottom: var(--space-xxs)
-}
-
-.margin-y-xs {
-    margin-top: 0.5em;
-    margin-top: var(--space-xs);
-    margin-bottom: 0.5em;
-    margin-bottom: var(--space-xs)
-}
-
-.margin-y-sm {
-    margin-top: 0.75em;
-    margin-top: var(--space-sm);
-    margin-bottom: 0.75em;
-    margin-bottom: var(--space-sm)
-}
-
-.margin-y-md {
-    margin-top: 1.25em;
-    margin-top: var(--space-md);
-    margin-bottom: 1.25em;
-    margin-bottom: var(--space-md)
-}
-
-.margin-y-lg {
-    margin-top: 2em;
-    margin-top: var(--space-lg);
-    margin-bottom: 2em;
-    margin-bottom: var(--space-lg)
-}
-
-.margin-y-xl {
-    margin-top: 3.25em;
-    margin-top: var(--space-xl);
-    margin-bottom: 3.25em;
-    margin-bottom: var(--space-xl)
-}
-
-.margin-y-xxl {
-    margin-top: 5.25em;
-    margin-top: var(--space-xxl);
-    margin-bottom: 5.25em;
-    margin-bottom: var(--space-xxl)
-}
-
-.margin-y-xxxl {
-    margin-top: 8.5em;
-    margin-top: var(--space-xxxl);
-    margin-bottom: 8.5em;
-    margin-bottom: var(--space-xxxl)
-}
-
-.margin-y-xxxxl {
-    margin-top: 13.75em;
-    margin-top: var(--space-xxxxl);
-    margin-bottom: 13.75em;
-    margin-bottom: var(--space-xxxxl)
-}
-
-.margin-y-auto {
-    margin-top: auto;
-    margin-bottom: auto
-}
-
-@media not all and (min-width: 32rem) {
-    .has-margin\@xs {
-        margin: 0 !important
-    }
-}
-
-@media not all and (min-width: 48rem) {
-    .has-margin\@sm {
-        margin: 0 !important
-    }
-}
-
-@media not all and (min-width: 64rem) {
-    .has-margin\@md {
-        margin: 0 !important
-    }
-}
-
-@media not all and (min-width: 80rem) {
-    .has-margin\@lg {
-        margin: 0 !important
-    }
-}
-
-@media not all and (min-width: 90rem) {
-    .has-margin\@xl {
-        margin: 0 !important
-    }
-}
-
-.padding-md {
-    padding: 1.25em;
-    padding: var(--space-md)
-}
-
-.padding-xxxxs {
-    padding: 0.125em;
-    padding: var(--space-xxxxs)
-}
-
-.padding-xxxs {
-    padding: 0.25em;
-    padding: var(--space-xxxs)
-}
-
-.padding-xxs {
-    padding: 0.375em;
-    padding: var(--space-xxs)
-}
-
-.padding-xs {
-    padding: 0.5em;
-    padding: var(--space-xs)
-}
-
-.padding-sm {
-    padding: 0.75em;
-    padding: var(--space-sm)
-}
-
-.padding-lg {
-    padding: 2em;
-    padding: var(--space-lg)
-}
-
-.padding-xl {
-    padding: 3.25em;
-    padding: var(--space-xl)
-}
-
-.padding-xxl {
-    padding: 5.25em;
-    padding: var(--space-xxl)
-}
-
-.padding-xxxl {
-    padding: 8.5em;
-    padding: var(--space-xxxl)
-}
-
-.padding-xxxxl {
-    padding: 13.75em;
-    padding: var(--space-xxxxl)
-}
-
-.padding-component {
-    padding: 1.25em;
-    padding: var(--component-padding)
-}
-
-.padding-top-md {
-    padding-top: 1.25em;
-    padding-top: var(--space-md)
-}
-
-.padding-top-xxxxs {
-    padding-top: 0.125em;
-    padding-top: var(--space-xxxxs)
-}
-
-.padding-top-xxxs {
-    padding-top: 0.25em;
-    padding-top: var(--space-xxxs)
-}
-
-.padding-top-xxs {
-    padding-top: 0.375em;
-    padding-top: var(--space-xxs)
-}
-
-.padding-top-xs {
-    padding-top: 0.5em;
-    padding-top: var(--space-xs)
-}
-
-.padding-top-sm {
-    padding-top: 0.75em;
-    padding-top: var(--space-sm)
-}
-
-.padding-top-lg {
-    padding-top: 2em;
-    padding-top: var(--space-lg)
-}
-
-.padding-top-xl {
-    padding-top: 3.25em;
-    padding-top: var(--space-xl)
-}
-
-.padding-top-xxl {
-    padding-top: 5.25em;
-    padding-top: var(--space-xxl)
-}
-
-.padding-top-xxxl {
-    padding-top: 8.5em;
-    padding-top: var(--space-xxxl)
-}
-
-.padding-top-xxxxl {
-    padding-top: 13.75em;
-    padding-top: var(--space-xxxxl)
-}
-
-.padding-top-component {
-    padding-top: 1.25em;
-    padding-top: var(--component-padding)
-}
-
-.padding-bottom-md {
-    padding-bottom: 1.25em;
-    padding-bottom: var(--space-md)
-}
-
-.padding-bottom-xxxxs {
-    padding-bottom: 0.125em;
-    padding-bottom: var(--space-xxxxs)
-}
-
-.padding-bottom-xxxs {
-    padding-bottom: 0.25em;
-    padding-bottom: var(--space-xxxs)
-}
-
-.padding-bottom-xxs {
-    padding-bottom: 0.375em;
-    padding-bottom: var(--space-xxs)
-}
-
-.padding-bottom-xs {
-    padding-bottom: 0.5em;
-    padding-bottom: var(--space-xs)
-}
-
-.padding-bottom-sm {
-    padding-bottom: 0.75em;
-    padding-bottom: var(--space-sm)
-}
-
-.padding-bottom-lg {
-    padding-bottom: 2em;
-    padding-bottom: var(--space-lg)
-}
-
-.padding-bottom-xl {
-    padding-bottom: 3.25em;
-    padding-bottom: var(--space-xl)
-}
-
-.padding-bottom-xxl {
-    padding-bottom: 5.25em;
-    padding-bottom: var(--space-xxl)
-}
-
-.padding-bottom-xxxl {
-    padding-bottom: 8.5em;
-    padding-bottom: var(--space-xxxl)
-}
-
-.padding-bottom-xxxxl {
-    padding-bottom: 13.75em;
-    padding-bottom: var(--space-xxxxl)
-}
-
-.padding-bottom-component {
-    padding-bottom: 1.25em;
-    padding-bottom: var(--component-padding)
-}
-
-.padding-right-md {
-    padding-right: 1.25em;
-    padding-right: var(--space-md)
-}
-
-.padding-right-xxxxs {
-    padding-right: 0.125em;
-    padding-right: var(--space-xxxxs)
-}
-
-.padding-right-xxxs {
-    padding-right: 0.25em;
-    padding-right: var(--space-xxxs)
-}
-
-.padding-right-xxs {
-    padding-right: 0.375em;
-    padding-right: var(--space-xxs)
-}
-
-.padding-right-xs {
-    padding-right: 0.5em;
-    padding-right: var(--space-xs)
-}
-
-.padding-right-sm {
-    padding-right: 0.75em;
-    padding-right: var(--space-sm)
-}
-
-.padding-right-lg {
-    padding-right: 2em;
-    padding-right: var(--space-lg)
-}
-
-.padding-right-xl {
-    padding-right: 3.25em;
-    padding-right: var(--space-xl)
-}
-
-.padding-right-xxl {
-    padding-right: 5.25em;
-    padding-right: var(--space-xxl)
-}
-
-.padding-right-xxxl {
-    padding-right: 8.5em;
-    padding-right: var(--space-xxxl)
-}
-
-.padding-right-xxxxl {
-    padding-right: 13.75em;
-    padding-right: var(--space-xxxxl)
-}
-
-.padding-right-component {
-    padding-right: 1.25em;
-    padding-right: var(--component-padding)
-}
-
-.padding-left-md {
-    padding-left: 1.25em;
-    padding-left: var(--space-md)
-}
-
-.padding-left-xxxxs {
-    padding-left: 0.125em;
-    padding-left: var(--space-xxxxs)
-}
-
-.padding-left-xxxs {
-    padding-left: 0.25em;
-    padding-left: var(--space-xxxs)
-}
-
-.padding-left-xxs {
-    padding-left: 0.375em;
-    padding-left: var(--space-xxs)
-}
-
-.padding-left-xs {
-    padding-left: 0.5em;
-    padding-left: var(--space-xs)
-}
-
-.padding-left-sm {
-    padding-left: 0.75em;
-    padding-left: var(--space-sm)
-}
-
-.padding-left-lg {
-    padding-left: 2em;
-    padding-left: var(--space-lg)
-}
-
-.padding-left-xl {
-    padding-left: 3.25em;
-    padding-left: var(--space-xl)
-}
-
-.padding-left-xxl {
-    padding-left: 5.25em;
-    padding-left: var(--space-xxl)
-}
-
-.padding-left-xxxl {
-    padding-left: 8.5em;
-    padding-left: var(--space-xxxl)
-}
-
-.padding-left-xxxxl {
-    padding-left: 13.75em;
-    padding-left: var(--space-xxxxl)
-}
-
-.padding-left-component {
-    padding-left: 1.25em;
-    padding-left: var(--component-padding)
-}
-
-.padding-x-md {
-    padding-left: 1.25em;
-    padding-left: var(--space-md);
-    padding-right: 1.25em;
-    padding-right: var(--space-md)
-}
-
-.padding-x-xxxxs {
-    padding-left: 0.125em;
-    padding-left: var(--space-xxxxs);
-    padding-right: 0.125em;
-    padding-right: var(--space-xxxxs)
-}
-
-.padding-x-xxxs {
-    padding-left: 0.25em;
-    padding-left: var(--space-xxxs);
-    padding-right: 0.25em;
-    padding-right: var(--space-xxxs)
-}
-
-.padding-x-xxs {
-    padding-left: 0.375em;
-    padding-left: var(--space-xxs);
-    padding-right: 0.375em;
-    padding-right: var(--space-xxs)
-}
-
-.padding-x-xs {
-    padding-left: 0.5em;
-    padding-left: var(--space-xs);
-    padding-right: 0.5em;
-    padding-right: var(--space-xs)
-}
-
-.padding-x-sm {
-    padding-left: 0.75em;
-    padding-left: var(--space-sm);
-    padding-right: 0.75em;
-    padding-right: var(--space-sm)
-}
-
-.padding-x-lg {
-    padding-left: 2em;
-    padding-left: var(--space-lg);
-    padding-right: 2em;
-    padding-right: var(--space-lg)
-}
-
-.padding-x-xl {
-    padding-left: 3.25em;
-    padding-left: var(--space-xl);
-    padding-right: 3.25em;
-    padding-right: var(--space-xl)
-}
-
-.padding-x-xxl {
-    padding-left: 5.25em;
-    padding-left: var(--space-xxl);
-    padding-right: 5.25em;
-    padding-right: var(--space-xxl)
-}
-
-.padding-x-xxxl {
-    padding-left: 8.5em;
-    padding-left: var(--space-xxxl);
-    padding-right: 8.5em;
-    padding-right: var(--space-xxxl)
-}
-
-.padding-x-xxxxl {
-    padding-left: 13.75em;
-    padding-left: var(--space-xxxxl);
-    padding-right: 13.75em;
-    padding-right: var(--space-xxxxl)
-}
-
-.padding-x-component {
-    padding-left: 1.25em;
-    padding-left: var(--component-padding);
-    padding-right: 1.25em;
-    padding-right: var(--component-padding)
-}
-
-.padding-y-md {
-    padding-top: 1.25em;
-    padding-top: var(--space-md);
-    padding-bottom: 1.25em;
-    padding-bottom: var(--space-md)
-}
-
-.padding-y-xxxxs {
-    padding-top: 0.125em;
-    padding-top: var(--space-xxxxs);
-    padding-bottom: 0.125em;
-    padding-bottom: var(--space-xxxxs)
-}
-
-.padding-y-xxxs {
-    padding-top: 0.25em;
-    padding-top: var(--space-xxxs);
-    padding-bottom: 0.25em;
-    padding-bottom: var(--space-xxxs)
-}
-
-.padding-y-xxs {
-    padding-top: 0.375em;
-    padding-top: var(--space-xxs);
-    padding-bottom: 0.375em;
-    padding-bottom: var(--space-xxs)
-}
-
-.padding-y-xs {
-    padding-top: 0.5em;
-    padding-top: var(--space-xs);
-    padding-bottom: 0.5em;
-    padding-bottom: var(--space-xs)
-}
-
-.padding-y-sm {
-    padding-top: 0.75em;
-    padding-top: var(--space-sm);
-    padding-bottom: 0.75em;
-    padding-bottom: var(--space-sm)
-}
-
-.padding-y-lg {
-    padding-top: 2em;
-    padding-top: var(--space-lg);
-    padding-bottom: 2em;
-    padding-bottom: var(--space-lg)
-}
-
-.padding-y-xl {
-    padding-top: 3.25em;
-    padding-top: var(--space-xl);
-    padding-bottom: 3.25em;
-    padding-bottom: var(--space-xl)
+:root {
+  --background-color: rgb(232, 239, 245);
+  --accent: hsl(205, 38%, 89%);
+  --icon-border-color: white;
+  --content-background-color: white;
 }
 
-.padding-y-xxl {
-    padding-top: 5.25em;
-    padding-top: var(--space-xxl);
-    padding-bottom: 5.25em;
-    padding-bottom: var(--space-xxl)
+[data-theme="dark"] {
+  --background-color: #2C2F33;
+  --accent: hsl(0, 0%, 34%);
+  --icon-border-color: grey;
+  --content-background-color: #23272A;
 }
 
-.padding-y-xxxl {
-    padding-top: 8.5em;
-    padding-top: var(--space-xxxl);
-    padding-bottom: 8.5em;
-    padding-bottom: var(--space-xxxl)
+.cd-timeline {
+  overflow: hidden;
+  padding: 3rem 0;
+  background-color: var(--background-color);
 }
 
-.padding-y-xxxxl {
-    padding-top: 13.75em;
-    padding-top: var(--space-xxxxl);
-    padding-bottom: 13.75em;
-    padding-bottom: var(--space-xxxxl)
+.cd-timeline__container {
+  position: relative;
+  padding: 1rem 0;
 }
 
-.padding-y-component {
-    padding-top: 1.25em;
-    padding-top: var(--component-padding);
-    padding-bottom: 1.25em;
-    padding-bottom: var(--component-padding)
+.cd-timeline__container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 100%;
+  width: 4px;
+  background-color: var(--accent);
 }
 
-@media not all and (min-width: 32rem) {
-    .has-padding\@xs {
-        padding: 0 !important
-    }
+.cd-timeline__block {
+  display: flex;
+  margin-bottom: 2rem;
 }
 
-@media not all and (min-width: 48rem) {
-    .has-padding\@sm {
-        padding: 0 !important
-    }
+.cd-timeline__content.box {
+  box-shadow: var(--accent) 0px 3px 0px 0px;
+  background-color: var(--content-background-color);
 }
 
-@media not all and (min-width: 64rem) {
-    .has-padding\@md {
-        padding: 0 !important
-    }
+@media (min-width: 768px) {
+  .cd-timeline__block:nth-child(even) {
+    flex-direction: row-reverse;
+  }
 }
 
-@media not all and (min-width: 80rem) {
-    .has-padding\@lg {
-        padding: 0 !important
-    }
-}
+.cd-timeline__img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
 
-@media not all and (min-width: 90rem) {
-    .has-padding\@xl {
-        padding: 0 !important
-    }
-}
+  border-radius: 50%;
+  height: 60px;
+  width: 60px;
 
-.truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap
-}
+  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);
+  color: var(--icon-outline-color);
 
-.text-replace {
-    overflow: hidden;
-    color: transparent;
-    text-indent: 100%;
-    white-space: nowrap
-}
+  font-size: 1.5em;
 
-.text-center {
-    text-align: center
+  @media (min-width: 768px) {
+    order: 1;
+  }
 }
 
-.text-left {
-    text-align: left
+.cd-timeline__img img {
+  width: 40px;
+  height: 40px;
+  margin-left: 2px;
+  margin-top: 2px;
 }
 
-.text-right {
-    text-align: right
+.cd-timeline__date {
+  font-size: .9rem;
 }
 
-@media (min-width: 32rem) {
-    .text-center\@xs {
-        text-align: center
-    }
-    .text-left\@xs {
-        text-align: left
-    }
-    .text-right\@xs {
-        text-align: right
-    }
-}
+.cd-timeline__content {
+  flex-grow: 1;
 
-@media (min-width: 48rem) {
-    .text-center\@sm {
-        text-align: center
-    }
-    .text-left\@sm {
-        text-align: left
-    }
-    .text-right\@sm {
-        text-align: right
-    }
+  @media (min-width: 768px) {
+    width: 45%;
+    flex-grow: 0;
+  }
 }
 
 @media (min-width: 64rem) {
-    .text-center\@md {
-        text-align: center
-    }
-    .text-left\@md {
-        text-align: left
-    }
-    .text-right\@md {
-        text-align: right
-    }
-}
-
-@media (min-width: 80rem) {
-    .text-center\@lg {
-        text-align: center
-    }
-    .text-left\@lg {
-        text-align: left
-    }
-    .text-right\@lg {
-        text-align: right
-    }
-}
-
-@media (min-width: 90rem) {
-    .text-center\@xl {
-        text-align: center
-    }
-    .text-left\@xl {
-        text-align: left
-    }
-    .text-right\@xl {
-        text-align: right
-    }
-}
-
-.color-inherit {
-    color: inherit
-}
-
-.color-contrast-medium {
-    color: hsl(240, 1%, 48%);
-    color: var(--color-contrast-medium, #79797c)
-}
-
-.color-contrast-high {
-    color: hsl(240, 4%, 20%);
-    color: var(--color-contrast-high, #313135)
-}
-
-.color-contrast-higher {
-    color: hsl(240, 8%, 12%);
-    color: var(--color-contrast-higher, #1c1c21)
-}
-
-.color-primary {
-    color: hsl(220, 90%, 56%);
-    color: var(--color-primary, #2a6df4)
-}
-
-.color-accent {
-    color: hsl(355, 90%, 61%);
-    color: var(--color-accent, #f54251)
-}
-
-.color-success {
-    color: hsl(94, 48%, 56%);
-    color: var(--color-success, #88c559)
-}
-
-.color-warning {
-    color: hsl(46, 100%, 61%);
-    color: var(--color-warning, #ffd138)
-}
-
-.color-error {
-    color: hsl(355, 90%, 61%);
-    color: var(--color-error, #f54251)
-}
-
-.width-100\% {
-    width: 100%
-}
-
-.height-100\% {
-    height: 100%
-}
-
-.media-wrapper {
-    position: relative;
-    height: 0;
-    padding-bottom: 56.25%
-}
-
-.media-wrapper iframe, .media-wrapper video, .media-wrapper img {
+  .cd-timeline__date {
     position: absolute;
-    top: 0;
-    left: 0;
     width: 100%;
-    height: 100%
-}
-
-.media-wrapper video, .media-wrapper img {
-    -o-object-fit: cover;
-    object-fit: cover
-}
-
-.media-wrapper--4\:3 {
-    padding-bottom: 75%
-}
-
-:root, [data-theme="default"] {
-    --color-primary-darker: hsl(220, 90%, 36%);
-    --color-primary-darker-h: 220;
-    --color-primary-darker-s: 90%;
-    --color-primary-darker-l: 36%;
-    --color-primary-dark: hsl(220, 90%, 46%);
-    --color-primary-dark-h: 220;
-    --color-primary-dark-s: 90%;
-    --color-primary-dark-l: 46%;
-    --color-primary: hsl(220, 90%, 56%);
-    --color-primary-h: 220;
-    --color-primary-s: 90%;
-    --color-primary-l: 56%;
-    --color-primary-light: hsl(220, 90%, 66%);
-    --color-primary-light-h: 220;
-    --color-primary-light-s: 90%;
-    --color-primary-light-l: 66%;
-    --color-primary-lighter: hsl(220, 90%, 76%);
-    --color-primary-lighter-h: 220;
-    --color-primary-lighter-s: 90%;
-    --color-primary-lighter-l: 76%;
-    --color-accent-darker: hsl(355, 90%, 41%);
-    --color-accent-darker-h: 355;
-    --color-accent-darker-s: 90%;
-    --color-accent-darker-l: 41%;
-    --color-accent-dark: hsl(355, 90%, 51%);
-    --color-accent-dark-h: 355;
-    --color-accent-dark-s: 90%;
-    --color-accent-dark-l: 51%;
-    --color-accent: hsl(355, 90%, 61%);
-    --color-accent-h: 355;
-    --color-accent-s: 90%;
-    --color-accent-l: 61%;
-    --color-accent-light: hsl(355, 90%, 71%);
-    --color-accent-light-h: 355;
-    --color-accent-light-s: 90%;
-    --color-accent-light-l: 71%;
-    --color-accent-lighter: hsl(355, 90%, 81%);
-    --color-accent-lighter-h: 355;
-    --color-accent-lighter-s: 90%;
-    --color-accent-lighter-l: 81%;
-    --color-black: hsl(240, 8%, 12%);
-    --color-black-h: 240;
-    --color-black-s: 8%;
-    --color-black-l: 12%;
-    --color-white: hsl(0, 0%, 100%);
-    --color-white-h: 0;
-    --color-white-s: 0%;
-    --color-white-l: 100%;
-    --color-success-darker: hsl(94, 48%, 36%);
-    --color-success-darker-h: 94;
-    --color-success-darker-s: 48%;
-    --color-success-darker-l: 36%;
-    --color-success-dark: hsl(94, 48%, 46%);
-    --color-success-dark-h: 94;
-    --color-success-dark-s: 48%;
-    --color-success-dark-l: 46%;
-    --color-success: hsl(94, 48%, 56%);
-    --color-success-h: 94;
-    --color-success-s: 48%;
-    --color-success-l: 56%;
-    --color-success-light: hsl(94, 48%, 66%);
-    --color-success-light-h: 94;
-    --color-success-light-s: 48%;
-    --color-success-light-l: 66%;
-    --color-success-lighter: hsl(94, 48%, 76%);
-    --color-success-lighter-h: 94;
-    --color-success-lighter-s: 48%;
-    --color-success-lighter-l: 76%;
-    --color-error-darker: hsl(355, 90%, 41%);
-    --color-error-darker-h: 355;
-    --color-error-darker-s: 90%;
-    --color-error-darker-l: 41%;
-    --color-error-dark: hsl(355, 90%, 51%);
-    --color-error-dark-h: 355;
-    --color-error-dark-s: 90%;
-    --color-error-dark-l: 51%;
-    --color-error: hsl(355, 90%, 61%);
-    --color-error-h: 355;
-    --color-error-s: 90%;
-    --color-error-l: 61%;
-    --color-error-light: hsl(355, 90%, 71%);
-    --color-error-light-h: 355;
-    --color-error-light-s: 90%;
-    --color-error-light-l: 71%;
-    --color-error-lighter: hsl(355, 90%, 81%);
-    --color-error-lighter-h: 355;
-    --color-error-lighter-s: 90%;
-    --color-error-lighter-l: 81%;
-    --color-warning-darker: hsl(46, 100%, 41%);
-    --color-warning-darker-h: 46;
-    --color-warning-darker-s: 100%;
-    --color-warning-darker-l: 41%;
-    --color-warning-dark: hsl(46, 100%, 51%);
-    --color-warning-dark-h: 46;
-    --color-warning-dark-s: 100%;
-    --color-warning-dark-l: 51%;
-    --color-warning: hsl(46, 100%, 61%);
-    --color-warning-h: 46;
-    --color-warning-s: 100%;
-    --color-warning-l: 61%;
-    --color-warning-light: hsl(46, 100%, 71%);
-    --color-warning-light-h: 46;
-    --color-warning-light-s: 100%;
-    --color-warning-light-l: 71%;
-    --color-warning-lighter: hsl(46, 100%, 81%);
-    --color-warning-lighter-h: 46;
-    --color-warning-lighter-s: 100%;
-    --color-warning-lighter-l: 81%;
-    --color-bg: hsl(0, 0%, 100%);
-    --color-bg-h: 0;
-    --color-bg-s: 0%;
-    --color-bg-l: 100%;
-    --color-contrast-lower: hsl(0, 0%, 95%);
-    --color-contrast-lower-h: 0;
-    --color-contrast-lower-s: 0%;
-    --color-contrast-lower-l: 95%;
-    --color-contrast-low: hsl(240, 1%, 83%);
-    --color-contrast-low-h: 240;
-    --color-contrast-low-s: 1%;
-    --color-contrast-low-l: 83%;
-    --color-contrast-medium: hsl(240, 1%, 48%);
-    --color-contrast-medium-h: 240;
-    --color-contrast-medium-s: 1%;
-    --color-contrast-medium-l: 48%;
-    --color-contrast-high: hsl(240, 4%, 20%);
-    --color-contrast-high-h: 240;
-    --color-contrast-high-s: 4%;
-    --color-contrast-high-l: 20%;
-    --color-contrast-higher: hsl(240, 8%, 12%);
-    --color-contrast-higher-h: 240;
-    --color-contrast-higher-s: 8%;
-    --color-contrast-higher-l: 12%
-}
-
-@supports (--css: variables) {
-    @media (min-width: 64rem) {
-        :root {
-            --space-unit: 1.25em
-        }
-    }
-}
-
-:root {
-    --radius: 0.25em
-}
-
-:root {
-    --font-primary: sans-serif;
-    --text-base-size: 1em;
-    --text-scale-ratio: 1.2;
-    --text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio));
-    --text-sm: calc(var(--text-xs)*var(--text-scale-ratio));
-    --text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio));
-    --text-lg: calc(var(--text-md)*var(--text-scale-ratio));
-    --text-xl: calc(var(--text-lg)*var(--text-scale-ratio));
-    --text-xxl: calc(var(--text-xl)*var(--text-scale-ratio));
-    --text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio));
-    --body-line-height: 1.4;
-    --heading-line-height: 1.2;
-    --font-primary-capital-letter: 1
-}
-
-@supports (--css: variables) {
-    @media (min-width: 64rem) {
-        :root {
-            --text-base-size: 1.25em;
-            --text-scale-ratio: 1.25
-        }
-    }
-}
-
-mark {
-    background-color: hsla(355, 90%, 61%, 0.2);
-    background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
-    color: inherit
-}
-
-.text-component {
-    --line-height-multiplier: 1;
-    --text-vspace-multiplier: 1
-}
-
-.text-component blockquote {
-    padding-left: 1em;
-    border-left: 4px solid hsl(240, 1%, 83%);
-    border-left: 4px solid var(--color-contrast-low)
-}
-
-.text-component hr {
-    background: hsl(240, 1%, 83%);
-    background: var(--color-contrast-low);
-    height: 1px
-}
-
-.text-component figcaption {
-    font-size: 0.83333em;
-    font-size: var(--text-sm);
-    color: hsl(240, 1%, 48%);
-    color: var(--color-contrast-medium)
-}
-
-.article.text-component {
-    --line-height-multiplier: 1.13;
-    --text-vspace-multiplier: 1.2
-}
-
-:root {
-    --btn-font-size: 1em;
-    --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);
-    --btn-font-size-md: calc(var(--btn-font-size) + 0.2em);
-    --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);
-    --btn-radius: 0.25em;
-    --btn-padding-x: var(--space-sm);
-    --btn-padding-y: var(--space-xs)
-}
-
-.btn {
-    --color-shadow: hsla(240, 8%, 12%, 0.15);
-    --color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);
-    box-shadow: 0 4px 16px hsla(240, 8%, 12%, 0.15);
-    box-shadow: 0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);
-    cursor: pointer
-}
-
-.btn--primary {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-
-.btn--accent {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-
-.btn--disabled {
-    opacity: 0.6
-}
-
-:root {
-    --form-control-padding-x: var(--space-sm);
-    --form-control-padding-y: var(--space-xs);
-    --form-control-radius: 0.25em
-}
-
-.form-control {
-    border: 2px solid hsl(240, 1%, 83%);
-    border: 2px solid var(--color-contrast-low)
-}
-
-.form-control:focus {
-    outline: none;
-    border-color: hsl(220, 90%, 56%);
-    border-color: var(--color-primary);
-    --color-shadow: hsla(220, 90%, 56%, 0.2);
-    --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
-    box-shadow: undefined;
-    box-shadow: 0 0 0 3px var(--color-shadow)
-}
-
-.form-control:focus:focus {
-    box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
-    box-shadow: 0 0 0 3px var(--color-shadow)
-}
-
-.form-control[aria-invalid="true"] {
-    border-color: hsl(355, 90%, 61%);
-    border-color: var(--color-error)
-}
-
-.form-control[aria-invalid="true"]:focus {
-    --color-shadow: hsla(355, 90%, 61%, 0.2);
-    --color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);
-    box-shadow: undefined;
-    box-shadow: 0 0 0 3px var(--color-shadow)
-}
-
-.form-control[aria-invalid="true"]:focus:focus {
-    box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2);
-    box-shadow: 0 0 0 3px var(--color-shadow)
-}
-
-.form-label {
-    font-size: 0.83333em;
-    font-size: var(--text-sm)
-}
-
-:root {
-    --cd-color-1: hsl(206, 21%, 24%);
-    --cd-color-1-h: 206;
-    --cd-color-1-s: 21%;
-    --cd-color-1-l: 24%;
-    --cd-color-2: hsl(205, 38%, 89%);
-    --cd-color-2-h: 205;
-    --cd-color-2-s: 38%;
-    --cd-color-2-l: 89%;
-    --cd-color-3: hsl(207, 10%, 55%);
-    --cd-color-3-h: 207;
-    --cd-color-3-s: 10%;
-    --cd-color-3-l: 55%;
-    --cd-color-4: hsl(111, 51%, 60%);
-    --cd-color-4-h: 111;
-    --cd-color-4-s: 51%;
-    --cd-color-4-l: 60%;
-    --cd-color-5: hsl(356, 53%, 49%);
-    --cd-color-5-h: 356;
-    --cd-color-5-s: 53%;
-    --cd-color-5-l: 49%;
-    --cd-color-6: hsl(47, 85%, 61%);
-    --cd-color-6-h: 47;
-    --cd-color-6-s: 85%;
-    --cd-color-6-l: 61%;
-    --cd-header-height: 200px;
-    --font-primary: 'Droid Serif', serif;
-    --font-secondary: 'Open Sans', sans-serif
-}
-
-[data-theme="dark"] {
-    --cd-color-2: hsl(0, 0%, 34%);
-    --cd-color-2-h: 0;
-    --cd-color-2-s: 0%;
-    --cd-color-2-l: 34%;
-}
-
-@supports (--css: variables) {
-    @media (min-width: 64rem) {
-        :root {
-            --cd-header-height: 300px
-        }
-    }
-}
-
-.cd-main-header {
-    height: 200px;
-    height: var(--cd-header-height);
-    background: hsl(206, 21%, 24%);
-    background: var(--cd-color-1);
-    color: hsl(0, 0%, 100%);
-    color: var(--color-white);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-
-.cd-main-header h1 {
-    color: inherit
-}
-
-.cd-timeline {
-    overflow: hidden;
-    padding: 2em 0;
-    padding: var(--space-lg) 0;
-    color: hsl(207, 10%, 55%);
-    color: var(--cd-color-3);
-    background-color: hsl(205, 38%, 93.45%);
-    background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05));
-}
-
-[data-theme="dark"] .cd-timeline {
-    background-color: #2C2F33;
-}
+    left: 54%;
+    margin-top: 1rem;
+  }
+  .cd-timeline__block:nth-child(even) .cd-timeline__date {
+    left: auto;
+    right: 54%;
+    text-align: right
+  }
 
-.cd-timeline h2 {
-    font-weight: 700
+  .cd-timeline__img {
+    left: calc(50% - 30px);
+    position: absolute;
+  }
 }
 
-.cd-timeline__container {
-    position: relative;
-    padding: 1.25em 0;
-    padding: var(--space-md) 0
+.pastel-red {
+    background-color: #ff7878 !important;
 }
-
-.cd-timeline__container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 18px;
-    height: 100%;
-    width: 4px;
-    background: hsl(205, 38%, 89%);
-    background: var(--cd-color-2)
+[data-theme="dark"] .pastel-red {
+    background-color: #a44848 !important;
 }
-
-@media (min-width: 64rem) {
-    .cd-timeline__container::before {
-        left: 50%;
-        -webkit-transform: translateX(-50%);
-        -ms-transform: translateX(-50%);
-        transform: translateX(-50%)
-    }
+.pastel-orange {
+    background-color: #ffbf76 !important;
 }
-
-.cd-timeline__block {
-    display: -ms-flexbox;
-    display: flex;
-    position: relative;
-    z-index: 1;
-    margin-bottom: 2em;
-    margin-bottom: var(--space-lg)
+[data-theme="dark"] .pastel-orange {
+    background-color: #967147 !important;
 }
-
-.cd-timeline__block:last-child {
-    margin-bottom: 0
+.pastel-green {
+    background-color: #8bd6a7 !important;
 }
-
-@media (min-width: 64rem) {
-    .cd-timeline__block:nth-child(even) {
-        -ms-flex-direction: row-reverse;
-        flex-direction: row-reverse
-    }
+[data-theme="dark"] .pastel-green {
+    background-color: #649f7a !important;
 }
-
-.cd-timeline__img {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    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)
+.pastel-blue {
+    background-color: #8edbec !important;
 }
-
-[data-theme="dark"] .cd-timeline__img {
-    box-shadow: 0 0 0 4px var(--cd-color-2), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
+[data-theme="dark"] .pastel-blue {
+    background-color: #3d7986 !important;
 }
-
-.cd-timeline__img i {
-    font-size: 1.5em;
-    color: white;
+.pastel-purple {
+    background-color: #cbb1ff !important;
 }
-
-@media (max-width: 64rem) {
-    .cd-timeline__img i {
-	font-size: 0.9em;
-    }
+[data-theme="dark"] .pastel-purple {
+    background-color: #8775ad !important;
 }
-
-.cd-timeline__img img {
-    width: 40px;
-    height: 40px;
-    margin-left: 2px;
-    margin-top: 2px;
+.pastel-pink {
+    background-color: #f6acff !important;
 }
-
-@media (max-width: 64rem) {
-    .cd-timeline__img img {
-        width: 20px;
-        height: 20px;
-        margin-left: 2px;
-        margin-top: 2px;
-    }
+[data-theme="dark"] .pastel-pink {
+    background-color: #79507e !important;
 }
-
-@media (min-width: 64rem) {
-    .cd-timeline__img {
-        width: 60px;
-        height: 60px;
-        -ms-flex-order: 1;
-        order: 1;
-        margin-left: calc(5% - 30px);
-        will-change: transform;
-    }
-
-    .cd-timeline__block:nth-child(even) .cd-timeline__img {
-        margin-right: calc(5% - 30px)
-    }
+.pastel-lime {
+    background-color: #b6df3a !important;
 }
-
-.cd-timeline__img--picture {
-    background-color: #7289DA;
+[data-theme="dark"] .pastel-lime {
+    background-color: #7c9a21 !important;
 }
 
-.cd-timeline__img--movie {
-    background-color: hsl(356, 53%, 49%);
-    background-color: var(--cd-color-5)
+.pastel-dark-blue {
+    background-color: #576297 !important;
 }
 
-.cd-timeline__img--location {
-    background-color: hsl(47, 85%, 61%);
-    background-color: var(--cd-color-6)
+.pydis-logo-banner {
+    background-color: #7289da !important;
+    border-radius: 10px;
 }
-
-.cd-timeline__content {
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    position: relative;
-    margin-left: 1.25em;
-    margin-left: var(--space-md);
-    border-radius: 0.25em;
-    border-radius: var(--radius-md);
-    padding: 1.25em;
-    padding: var(--space-md);
-    box-shadow: 0 3px 0 hsl(205, 38%, 89%);
-    box-shadow: 0 3px 0 var(--cd-color-2)
+[data-theme="dark"] .pydis-logo-banner {
+  background-color: #3B4774 !important;
 }
-
-.cd-timeline__content::before {
-    content: '';
-    position: absolute;
-    top: 16px;
-    right: 100%;
-    width: 0;
-    height: 0;
-    border: 7px solid transparent;
-    border-right-color: hsl(0, 0%, 100%);
-    border-right-color: var(--cd-color-2)
+.pydis-logo-banner img {
+    padding-right: 20px;
 }
-
-.cd-timeline__content h2 {
-    color: hsl(206, 21%, 24%);
-    color: var(--cd-color-1)
+img, video, svg {
+    max-width: 100%
 }
 
-@media (min-width: 64rem) {
-    .cd-timeline__content {
-        width: 45%;
-        -ms-flex-positive: 0;
-        flex-grow: 0;
-        will-change: transform;
-        margin: 0;
-        font-size: 0.9em;
-        --line-height-multiplier: 1.2
-    }
-    .cd-timeline__content::before {
-        top: 24px
-    }
-    .cd-timeline__block:nth-child(odd) .cd-timeline__content::before {
-        right: auto;
-        left: 100%;
-        width: 0;
-        height: 0;
-        border: 7px solid transparent;
-        border-left-color: hsl(0, 0%, 100%);
-        border-left-color: var(--cd-color-2)
-    }
-}
 
-@media (min-width: 64rem) {
-    .cd-timeline__date {
-        position: absolute;
-        width: 100%;
-        left: 120%;
-        top: 20px
-    }
-    .cd-timeline__block:nth-child(even) .cd-timeline__date {
-        left: auto;
-        right: 120%;
-        text-align: right
-    }
-}
+/* ANIMATION */
 
 @media (min-width: 64rem) {
-    .cd-timeline__img--hidden, .cd-timeline__content--hidden {
-        visibility: hidden
-    }
-    .cd-timeline__img--bounce-in {
-        -webkit-animation: cd-bounce-1 0.6s;
-        animation: cd-bounce-1 0.6s
-    }
-    .cd-timeline__content--bounce-in {
-        -webkit-animation: cd-bounce-2 0.6s;
-        animation: cd-bounce-2 0.6s
-    }
-    .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in {
-        -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 {
-    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)
-    }
-}
+  .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden {
+    visibility: hidden
+  }
+  .cd-timeline__img--bounce-in {
+    -webkit-animation: cd-bounce-1 0.6s;
+    animation: cd-bounce-1 0.6s;
+  }
+  .cd-timeline__content--bounce-in,
+  .cd-timeline__date--bounce-in {
+    -webkit-animation: cd-bounce-2 0.6s;
+    animation: cd-bounce-2 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: 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,
+  .cd-timeline__date--bounce-out {
+    -webkit-animation: cd-bounce-out-3 0.6s;
+    animation: cd-bounce-out-2 0.6s;
+  }
+}
+
+/* @-webkit-keyframes cd-bounce-1 { */
+/*     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 cd-bounce-1 {
-    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 cd-bounce-2 {
-    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)
-    }
-}
+  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 cd-bounce-2 { */
+/*     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 cd-bounce-2 {
-    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)
-    }
+  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 cd-bounce-2-inverse {
-    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)
-    }
+  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 cd-bounce-2-inverse {
-    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)
-    }
+  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 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)
-    }
+  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);
-    }
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
 
-    60% {
-        -webkit-transform: scale(1.2);
-        transform: scale(1.2);
-    }
+  60% {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
 
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-    }
+  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)
-    }
+  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)
-    }
+  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/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js
index 2ff7df57e..67a50d43e 100644
--- a/pydis_site/static/js/timeline/main.js
+++ b/pydis_site/static/js/timeline/main.js
@@ -5,6 +5,7 @@
 		this.blocks = this.element.getElementsByClassName("cd-timeline__block");
 		this.images = this.element.getElementsByClassName("cd-timeline__img");
 		this.contents = this.element.getElementsByClassName("cd-timeline__content");
+		this.dates = this.element.getElementsByClassName("cd-timeline__date");
 		this.offset = 0.8;
 		this.hideBlocks();
 	};
@@ -20,6 +21,7 @@
 				if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
 					self.images[i].classList.add("cd-timeline__img--hidden");
 					self.contents[i].classList.add("cd-timeline__content--hidden");
+					self.dates[i].classList.add("cd-timeline__date--hidden");
 				}
 			})(i);
 		}
@@ -36,10 +38,13 @@
 					// add bounce-in animation
 					self.images[i].classList.add("cd-timeline__img--bounce-in");
 					self.contents[i].classList.add("cd-timeline__content--bounce-in");
+					self.dates[i].classList.add("cd-timeline__date--bounce-in");
 					self.images[i].classList.remove("cd-timeline__img--hidden");
 					self.contents[i].classList.remove("cd-timeline__content--hidden");
+					self.dates[i].classList.remove("cd-timeline__date--hidden");
 					self.images[i].classList.remove("cd-timeline__img--bounce-out");
 					self.contents[i].classList.remove("cd-timeline__content--bounce-out");
+					self.dates[i].classList.remove("cd-timeline__date--bounce-out");
 				}
 			})(i);
 		}
@@ -55,8 +60,10 @@
 				if(self.contents[i].classList.contains("cd-timeline__content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
 					self.images[i].classList.remove("cd-timeline__img--bounce-in");
 					self.contents[i].classList.remove("cd-timeline__content--bounce-in");
+					self.dates[i].classList.remove("cd-timeline__date--bounce-in");
 					self.images[i].classList.add("cd-timeline__img--bounce-out");
 					self.contents[i].classList.add("cd-timeline__content--bounce-out");
+					self.dates[i].classList.add("cd-timeline__date--bounce-out");
 				}
 			})(i);
 		}
@@ -87,6 +94,9 @@
 			} else if (event.target.classList.contains("cd-timeline__content--bounce-out")) {
 				event.target.classList.add("cd-timeline__content--hidden");
 				event.target.classList.remove("cd-timeline__content--bounce-out");
+			} else if (event.target.classList.contains("cd-timeline__date--bounce-out")) {
+				event.target.classList.add("cd-timeline__date--hidden");
+				event.target.classList.remove("cd-timeline__date--bounce-out");
 			}
 		}
 
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index 23a6459c5..935c073c3 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -10,17 +10,23 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
-  <section class="cd-timeline js-cd-timeline">
-    <div class="container max-width-lg cd-timeline__container">
+  <section class="cd-timeline js-cd-timeline section">
+    <div class="container cd-timeline__container">
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-comments"></i>
+        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+          <span class="icon">
+            <i class="fa fa-comments"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Switch to new paste service</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jul 11th, 2023</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Switch to new paste service</h2>
+          <p class="content">
             We migrate over to <a href="https://github.com/supakeen/pinnwand">pinnwand</a>
             as the service that powers our paste bin over at
             <a href="https://paste.pythondiscord.com">https://paste.pythondiscord.com/</a>.
@@ -28,58 +34,63 @@ <h2 class="has-text-dark">Switch to new paste service</h2>
             pastes, additional support for text highlighting languages, and plus, it's written in
             Python!
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jul 11th, 2023</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Retirement of Joe and Sebastiaan</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jan 30th, 2023</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Retirement of Joe and Sebastiaan</h2>
+          <p class="content">
             Having been at the helm of Python Discord for over 5 and 3 years respectively, Joe and
             Sebastiaan retire and step down. They gain the @Founders role and continue as advisors
             to the @Directors, the new name of the original @Owners role.
 
             At the same time, Mina and Zig join Leon as co-directors.
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jan 30th, 2023</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-comments"></i>
+        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-comments"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Switch to forum-based help system</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Nov 25th, 2022</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Switch to forum-based help system</h2>
+          <p class="content">
             We migrate our help system to use a forum channel, retiring our home-grown rotating help
             system after 3 years of service and nearly 500,000 help sessions. Forum channels offer
             a better experience as members can create their own dedicated thread in a discoverable place.
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Nov 25th, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python 3.11 Release Stream</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Oct 24th, 2022</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python 3.11 Release Stream</h2>
+          <p class="content">
             With the Python 3.10 Release Stream being such a success, we brought it back for the
             release of Python 3.11. Hosted by Leon, and CPython 3.11 Release Manager, Pablo Galindo,
             they were joined by other CPython Core Developers. Together, they discuss the specific
@@ -92,20 +103,23 @@ <h2 class="has-text-dark">Python 3.11 Release Stream</h2>
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Oct 24th, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div class="cd-timeline__img has-background-primary pastel-lime cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-dice"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">July 21st, 2022</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Summer Code Jam 2022 (CJ9)</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Summer Code Jam 2022 (CJ9)</h2>
+          <p class="content">
             We host the 9th Code Jam. This year, teams had to use <b>websockets</b> to create a
             project based on the theme, <b>It's not a bug, it's a feature</b>. In all, 24 teams
             submitted their projects. At the end, we held a livestream demoing the top 10 projects
@@ -118,128 +132,143 @@ <h2 class="has-text-dark">Summer Code Jam 2022 (CJ9)</h2>
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">July 21st, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div style="background-color: grey;" class="cd-timeline__img cd-timeline__img--picture">
+        <div style="background-color: grey;" class="cd-timeline__img has-background-primary cd-timeline__img--picture">
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Partnership with pyqtgraph</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">May 19th, 2022</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Partnership with pyqtgraph</h2>
+          <p class="content">
             The <code>#pyqtgraph</code> channel is created for the Scientific Graphics and GUI
             library pyqtgraph, joining <code>#black-formatter</code>.
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">May 19th, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-robot"></i>
+        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-robot"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Addition of @Sir Robin</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Feb 21st, 2022</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Addition of @Sir Robin</h2>
+          <p class="content">
             Our arsenal of bots grows! We add @Sir Robin to power and manage all of our future
             events and to support the Events Team.
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Feb 21st, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
-          <i class="fa fa-question"></i>
+        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-question"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Trivia Night</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Feb 12th, 2022</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Trivia Night</h2>
+          <p class="content">
             How well do you know Python inside out? Members got to find out in a Trivia Night event.
             Contestants were given questions about Python's internals, its development, and more.
             To win, contestants had to get the most questions right while being fast to answer.
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Feb 12th, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Creation of Events Team</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Feb 9th, 2022</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Creation of Events Team</h2>
+          <p class="content">
             We form the Events Team to organise and run future events. Led by Kat and comprised by
             staff members, the goal of the team is to ultimately host more events in a more
             sustainable way.
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Feb 9th, 2022</span>
-          </div>
         </div>
       </div>
 
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
-          <i class="fa fa-code"></i>
+        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-code"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Feb 2nd, 2022</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Deployment of Smarter Resources</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Deployment of Smarter Resources</h2>
+          <p class="content">
             We gave our resources pages some much needed love and
             <a href="https://www.pythondiscord.com/resources/">
               reorganised them into a single page</a>,
             complete with a shiny new resource filter that allows you to more quickly find
             ones that relate to your interests, experience, learning style, and ability to pay!
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Feb 2nd, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jan 19, 2022</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">We hit 300 000 members!</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">We hit 300 000 members!</h2>
+          <p class="content">
             Thanks to an increasing growth rate, Python Discord's membership count doubled from
             150,000 to 300,000 in less than a year!
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jan 19, 2022</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">We host the Python 3.10 Release Stream</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Oct 4th, 2021</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">We host the Python 3.10 Release Stream</h2>
+          <p class="content">
             Leon and Pablo Galindo, CPython Core Developer and Release Manager, host the Python 3.10
             Release Stream, joined by other core devs Carol Willing, Irit Katriel, Łukasz Langa, and
             Brandt Bucher. They talked in-depth about the new features introduced in 3.10, the
@@ -252,38 +281,42 @@ <h2 class="has-text-dark">We host the Python 3.10 Release Stream</h2>
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Oct 4th, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div style="background-color: grey;" class="cd-timeline__img cd-timeline__img--picture">
+        <div style="background-color: grey;" class="cd-timeline__img has-background-primary cd-timeline__img--picture">
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Partnership with Black</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">May 24th, 2021</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Partnership with Black</h2>
+          <p class="content">
             We partner with the uncompromising code formatter project, Black, who were looking for a
             new home for their real-time chat. Python Discord ended up being that home, resulting in
             the creation of the <code>#black-formatter</code> channel.
           </p>
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">May 24th, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-dice"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">July 9, 2021</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Summer Code Jam 2021 (CJ8)</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Summer Code Jam 2021 (CJ8)</h2>
+          <p class="content">
             We host the 8th now-annual Code Jam. Teams had to create a program with an text-based user
             interface (TUI), all designed around the theme of “think inside the box.” Ultimately, 51
             teams submitted projects.
@@ -292,43 +325,47 @@ <h2 class="has-text-dark">Summer Code Jam 2021 (CJ8)</h2>
             </a>
           </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">July 9, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
-          <i class="fa fa-palette"></i>
+        <div class="cd-timeline__img has-background-primary pastel-purple cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-palette"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">May 24, 2021</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Inaugural run of Pixels</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Inaugural run of Pixels</h2>
+          <p class="content">
             Inspired by the subreddit, r/place, Pixels was our collaborative canvas event held
             between May 25 to June 14, providing a beginner-friendly API to paint pixels on a
             virtual canvas.
           </p>
-          <p class="color-contrast-medium has-text-dark">
+          <p class="content">
             Later, we released <a href="https://blog.pythondiscord.com/pixels-summer-2021/">a blog post</a>
             summarizing what happened, our motives, and some stories from during development.
           </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">May 24, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Owners become PSF Fellows</h2>
-          <p class="color-contrast-medium has-text-dark">Joe, Leon, and Sebastiaan
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">April 23, 2021</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Owners become PSF Fellows</h2>
+          <p class="content">Joe, Leon, and Sebastiaan
             <a href="https://pyfound.blogspot.com/2021/04/python-software-foundation-fellow.html">
               are recognized as Python Software Foundation Fellows
             </a>
@@ -336,20 +373,23 @@ <h2 class="has-text-dark">Owners become PSF Fellows</h2>
             Python Discord.
           </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">April 23, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
-          <i class="fab fa-youtube"></i>
+        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fab fa-youtube"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Summer Code Jam 2020 Highlights</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Mar 21st, 2021</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Summer Code Jam 2020 Highlights</h2>
+          <p class="content">
             We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020.
             Better late than never!
           </p>
@@ -360,20 +400,23 @@ <h2 class="has-text-dark">Summer Code Jam 2020 Highlights</h2>
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Mar 21st, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
-          <i class="fa fa-comment"></i>
+        <div class="cd-timeline__img has-background-primary pastel-purple cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-comment"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">New feature: Weekly discussion channel</h2>
-          <p class="color-contrast-medium has-text-dark">Every week (or two weeks), we'll be posting a new topic to discuss in a
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Mar 13th, 2021</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">New feature: Weekly discussion channel</h2>
+          <p class="content">Every week (or two weeks), we'll be posting a new topic to discuss in a
             channel called <b>#weekly-topic-discussion</b>. Our inaugural topic is a PyCon talk by Anthony Shaw called
             <b>Wily Python: Writing simpler and more maintainable Python.</b></a>.
           </p>
@@ -384,20 +427,23 @@ <h2 class="has-text-dark">New feature: Weekly discussion channel</h2>
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Mar 13th, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-microphone"></i>
+        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-microphone"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Mar 13th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">We're on the Teaching Python podcast!</h2>
-          <p class="color-contrast-medium has-text-dark">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">We're on the Teaching Python podcast!</h2>
+          <p class="content">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
             changed the way we learn, and what role communities like Python Discord can play in this new world.
             You can find the episode <a href="https://www.teachingpython.fm/63">at teachingpython.fm</a>.
           </p>
@@ -406,20 +452,23 @@ <h2 class="has-text-dark">We're on the Teaching Python podcast!</h2>
                 src="https://player.fireside.fm/v2/UIYXtbeL+qOjGAsKi?theme=dark"
           ></iframe>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Mar 13th, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
-          <i class="fa fa-microphone"></i>
+        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-microphone"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Mar 1st, 2021</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Leon Sandøy appears on Talk Python To Me</h2>
-          <p class="color-contrast-medium has-text-dark">Leon goes on the Talk Python to Me podcast with Michael Kennedy
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Leon Sandøy appears on Talk Python To Me</h2>
+          <p class="content">Leon goes on the Talk Python to Me podcast with Michael Kennedy
             to discuss the history of Python Discord, the critical importance of culture, and how to run a massive
             community. You can find the episode <a href="https://talkpython.fm/episodes/show/305/python-community-at-python-discord"> at talkpython.fm</a>.
           </p>
@@ -428,35 +477,41 @@ <h2 class="has-text-dark">Leon Sandøy appears on Talk Python To Me</h2>
                src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/996083146&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false">
           </iframe>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Mar 1st, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Feb 18th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">We now have 150,000 members!</h2>
-          <p class="color-contrast-medium has-text-dark">Our growth continues to accelerate.</p>
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">We now have 150,000 members!</h2>
+          <p class="content">Our growth continues to accelerate.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Feb 18th, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-music"></i>
+        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-music"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">We release The PEP 8 song</h2>
-          <p class="color-contrast-medium has-text-dark">We release the PEP 8 song on our YouTube channel, which finds tens of
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">February 8th, 2021</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">We release The PEP 8 song</h2>
+          <p class="content">We release the PEP 8 song on our YouTube channel, which finds tens of
             thousands of listeners!</p>
 
           <div class="force-aspect-container">
@@ -465,20 +520,23 @@ <h2 class="has-text-dark">We release The PEP 8 song</h2>
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">February 8th, 2021</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
-          <i class="fa fa-snowflake"></i>
+        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-snowflake"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Advent of Code attracts hundreds of participants</h2>
-          <p class="color-contrast-medium has-text-dark">
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">December 1st - 25th, 2020</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Advent of Code attracts hundreds of participants</h2>
+          <p class="content">
             A total of 443 Python Discord members sign up to be part of
             <a href="https://adventofcode.com/">Eric Wastl's excellent Advent of Code event</a>.
             As always, we provide dedicated announcements, scoreboards, bot commands and channels for our members
@@ -486,91 +544,104 @@ <h2 class="has-text-dark">Advent of Code attracts hundreds of participants</h2>
 
           </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">December 1st - 25th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
-          <i class="fa fa-wrench"></i>
+        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-wrench"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Nov 29th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">We migrate all our infrastructure to Kubernetes</h2>
-          <p class="color-contrast-medium has-text-dark">As our tech stack grows, we decide to migrate all our services over to a
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">We migrate all our infrastructure to Kubernetes</h2>
+          <p class="content">As our tech stack grows, we decide to migrate all our services over to a
             container orchestration paradigm via Kubernetes. This gives us better control and scalability.
             <b>Joe Banks</b> takes on the role as DevOps Lead.
           </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Nov 29th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Oct 22nd, 2020</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord hits 100,000 members!</h2>
-          <p class="color-contrast-medium has-text-dark">Only six months after hitting 40,000 users, we hit 100,000 users. A
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python Discord hits 100,000 members!</h2>
+          <p class="content">Only six months after hitting 40,000 users, we hit 100,000 users. A
             monumental milestone,
             and one we're very proud of. To commemorate it, we create this timeline.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Oct 22nd, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Oct 21st, 2020</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
           <div class="force-aspect-container">
             <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Oct 21st, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-handshake"></i>
+        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-handshake"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Aug 16th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord is now the new home of the PyWeek event!</h2>
-          <p class="color-contrast-medium has-text-dark">PyWeek, a game jam that has been running since 2005, joins Python
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python Discord is now the new home of the PyWeek event!</h2>
+          <p class="content">PyWeek, a game jam that has been running since 2005, joins Python
             Discord as one of our official events. Find more information about PyWeek on <a
                 href="https://pyweek.org/">their official website</a>.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Aug 16th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-dice"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jul 31st, 2020</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
-          <p class="color-contrast-medium has-text-dark">Sponsored by the Django Software Foundation and JetBrains, the Summer
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
+          <p class="content">Sponsored by the Django Software Foundation and JetBrains, the Summer
             Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
             projects. Check them out in our judge stream below:</p>
 
@@ -580,71 +651,83 @@ <h2 class="has-text-dark">PyDis summer code jam 2020 with the theme “Early Int
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jul 31st, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
-          <i class="fa fa-chart-bar"></i>
+        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-chart-bar"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jun 4th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord Public Statistics are now live</h2>
-          <p class="color-contrast-medium has-text-dark">After getting numerous requests to publish beautiful data on member
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python Discord Public Statistics are now live</h2>
+          <p class="content">After getting numerous requests to publish beautiful data on member
             count and channel use, we create <a href="https://stats.pythondiscord.com/">stats.pythondiscord.com</a> for
             all to enjoy.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jun 4th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-handshake"></i>
+        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-handshake"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord is now listed on python.org/community</h2>
-          <p class="color-contrast-medium has-text-dark">After working towards this goal for months, we finally work out an
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">May 28th, 2020</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python Discord is now listed on python.org/community</h2>
+          <p class="content">After working towards this goal for months, we finally work out an
             arrangement with the PSF that allows us to be listed on that most holiest of websites:
             https://python.org/. <a href="https://youtu.be/yciX2meIkXI?t=3">There was much rejoicing.</a></p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">May 28th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
-          <i class="fa fa-comments"></i>
+        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-comments"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">ModMail is now live</h2>
-          <p class="color-contrast-medium has-text-dark">Having originally planned to write our own ModMail bot from scratch, we
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">May 25th, 2020</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">ModMail is now live</h2>
+          <p class="content">Having originally planned to write our own ModMail bot from scratch, we
             come across an exceptionally good <a href="https://github.com/kyb3r/modmail">ModMail bot by
               kyb3r</a> and decide to just self-host that one instead.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">May 25th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
-          <i class="fa fa-gamepad"></i>
+        <div class="cd-timeline__img has-background-primary pastel-purple cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-gamepad"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Apr 17th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
-          <p class="color-contrast-medium has-text-dark">The creator of Arcade, Paul Vincent Craven, joins us as a judge.
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
+          <p class="content">The creator of Arcade, Paul Vincent Craven, joins us as a judge.
             Several of the Code Jam participants also end up getting involved contributing to the Arcade
             repository.</p>
 
@@ -654,55 +737,64 @@ <h2 class="has-text-dark">PyDis Game Jam 2020 with the “Three of a Kind” the
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Apr 17th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Apr 14, 2020</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
-          <p class="color-contrast-medium has-text-dark"><img
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
+          <p class="content"><img
               src="https://cdn.discordapp.com/attachments/354619224620138496/699666518476324954/unknown.png">
           </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Apr 14, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
-          <i class="fa fa-comments"></i>
+        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-comments"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">The new help channel system is live</h2>
-          <p class="color-contrast-medium has-text-dark">We release our dynamic help-channel system, which allows you to claim
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Apr 5th, 2020</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">The new help channel system is live</h2>
+          <p class="content">We release our dynamic help-channel system, which allows you to claim
             your very own help channel instead of fighting over the static help channels. We release a <a
                 href="https://pythondiscord.com/pages/resources/guides/help-channels/">Help Channel Guide</a> to
             help our members fully understand how the system works.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Apr 5th, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-dice"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
-          <p class="color-contrast-medium has-text-dark">Our Code Jams are becoming an increasingly big deal, and the Kivy core
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jan 17, 2020</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
+          <p class="content">Our Code Jams are becoming an increasingly big deal, and the Kivy core
             developers join us to judge the event and help out our members during the event. One of them,
             @tshirtman, even joins our staff!</p>
 
@@ -712,306 +804,348 @@ <h2 class="has-text-dark">PyDis sixth code jam with the theme “Ancient technol
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jan 17, 2020</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis hits 30,000 members</h2>
-          <p class="color-contrast-medium has-text-dark">More than tripling in size since the year before, the community hits
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Dec 22nd, 2019</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis hits 30,000 members</h2>
+          <p class="content">More than tripling in size since the year before, the community hits
             30000 users. At this point, we're probably the largest Python chat community on the planet.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Dec 22nd, 2019</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Sebastiaan Zeef becomes an owner</h2>
-          <p class="color-contrast-medium has-text-dark">After being a long time active contributor to our projects and the driving
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Sept 22nd, 2019</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Sebastiaan Zeef becomes an owner</h2>
+          <p class="content">After being a long time active contributor to our projects and the driving
             force behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & Leon.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Sept 22nd, 2019</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
-          <i class="fa fa-scroll"></i>
+        <div class="cd-timeline__img has-background-primary pastel-lime cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-scroll"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Oct 26th, 2019</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">The code of conduct is created</h2>
-          <p class="color-contrast-medium has-text-dark">Inspired by the Adafruit, Rust and Django communities, an essential
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">The code of conduct is created</h2>
+          <p class="content">Inspired by the Adafruit, Rust and Django communities, an essential
             community pillar is created; Our <a href="https://pythondiscord.com/pages/code-of-conduct/">Code of
               Conduct.</a></p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Oct 26th, 2019</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
-          <i class="fa fa-code"></i>
+        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-code"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Sep 15, 2019</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">The Django rewrite of pythondiscord.com is now live!</h2>
-          <p class="color-contrast-medium has-text-dark">The site is getting more and more complex, and it's time for a rewrite.
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">The Django rewrite of pythondiscord.com is now live!</h2>
+          <p class="content">The site is getting more and more complex, and it's time for a rewrite.
             We decide to go for a different stack, and build a website based on Django, DRF, Bulma and
             PostgreSQL.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Sep 15, 2019</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis hits 15,000 members; the “hot ones special” video is released</h2>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Apr 8th, 2019</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis hits 15,000 members; the “hot ones special” video is released</h2>
           <div class="force-aspect-container">
             <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Apr 8th, 2019</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
-          <i class="fa fa-code"></i>
+        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-code"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">django-simple-bulma is released on PyPi</h2>
-          <p class="color-contrast-medium has-text-dark">Our very first package on PyPI, <a
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Dec 19th, 2018</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">django-simple-bulma is released on PyPi</h2>
+          <p class="content">Our very first package on PyPI, <a
               href="https://pypi.org/project/django-simple-bulma/">django-simple-bulma</a> is a package that
             sets up the Bulma CSS framework for your Django application and lets you configure everything in
             settings.py.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Dec 19th, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Nov 24th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis hits 10,000 members</h2>
-          <p class="color-contrast-medium has-text-dark">We partner with RLBot, move from GitLab to GitHub, and start putting
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis hits 10,000 members</h2>
+          <p class="content">We partner with RLBot, move from GitLab to GitHub, and start putting
             together the first Advent of Code event.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Nov 24th, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-dice"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Oct 1st, 2018</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">First Hacktoberfest PyDis event; @Sir Lancebot is created</h2>
-          <p class="color-contrast-medium has-text-dark">We create a second bot for our community and fill it up with simple,
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">First Hacktoberfest PyDis event; @Sir Lancebot is created</h2>
+          <p class="content">We create a second bot for our community and fill it up with simple,
             fun and relatively easy issues. The idea is to create an approachable arena for our members to cut
             their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck.
             We're training our members to be productive contributors in the open-source ecosystem.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Oct 1st, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-handshake"></i>
+        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-handshake"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
-          <p class="color-contrast-medium has-text-dark">After being rejected for their Partner program several times, we
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jul 10th, 2018</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
+          <p class="content">After being rejected for their Partner program several times, we
             finally get approved. The recent partnership with the r/Python subreddit plays a significant role in
             qualifying us for this partnership.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jul 10th, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jun 20th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis hits 5,000 members and partners with r/Python</h2>
-          <p class="color-contrast-medium has-text-dark">As we continue to grow, we approach the r/Python subreddit and ask to
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis hits 5,000 members and partners with r/Python</h2>
+          <p class="content">As we continue to grow, we approach the r/Python subreddit and ask to
             become their official Discord community. They agree, and we become listed in their sidebar, giving
             us yet another source of new members.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jun 20th, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-handshake"></i>
+        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-handshake"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Do You Even Python and PyDis merger</h2>
-          <p class="color-contrast-medium has-text-dark">At this point in time, there are only two serious Python communities on
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jun 9th, 2018</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Do You Even Python and PyDis merger</h2>
+          <p class="content">At this point in time, there are only two serious Python communities on
             Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold
             proposal - let's shut down their community, replace it with links to ours, and in return we will let
             their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and
             @Mr. Hemlock joining our Admin team</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jun 9th, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
-          <i class="fa fa-scroll"></i>
+        <div class="cd-timeline__img has-background-primary pastel-lime cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-scroll"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">The privacy policy is created</h2>
-          <p class="color-contrast-medium has-text-dark">Since data privacy is quite important to us, we create a privacy page
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">May 21st, 2018</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">The privacy policy is created</h2>
+          <p class="content">Since data privacy is quite important to us, we create a privacy page
             pretty much as soon as our new bot and site starts collecting some data. To this day, we keep <a
                 href="https://pythondiscord.com/pages/privacy/">our privacy policy</a> up to date with all
             changes, and since April 2020 we've started doing <a
                 href="https://pythondiscord.notion.site/6784e3a9752444e89d19e65fd4510d8d">monthly data reviews</a>.</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">May 21st, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-dice"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Mar 23rd, 2018</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">First code jam with the theme “snakes”</h2>
-          <p class="color-contrast-medium has-text-dark">Our very first Code Jam attracts a handful of users who work in random
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">First code jam with the theme “snakes”</h2>
+          <p class="content">Our very first Code Jam attracts a handful of users who work in random
             teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written
             for this jam still lives on in Sir Lancebot, and you can play with it by using the
             <code>.snakes</code> command. For more information on this event, see <a
                 href="https://pythondiscord.com/pages/code-jams/code-jam-1-snakes-bot/">the event page</a></p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Mar 23rd, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Mar 4th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
-          <p class="color-contrast-medium has-text-dark">The public moderation bot we're using at the time, Rowboat, announces
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
+          <p class="content">The public moderation bot we're using at the time, Rowboat, announces
             it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we
             can have more control over its features. We also buy a domain and start making a website in Flask.
           </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Mar 4th, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
         </div>
 
-            <div class="cd-timeline__content has-background-white-bis text-component">
-                <h2 class="has-text-dark">Our logo is born. Thanks @Aperture!</h2>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Feb 3rd, 2018</span>
+        </div>
+
+            <div class="cd-timeline__content box">
+                <h2 class="title is-4">Our logo is born. Thanks @Aperture!</h2>
                 <p class="pydis-logo-banner"><img
                         src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
                 </p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Feb 3rd, 2018</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+          <span class="icon is-large">
+            <i class="fa fa-users"></i>
+          </span>
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord hits 1,000 members</h2>
-          <p class="color-contrast-medium has-text-dark">Our main source of new users at this point is a post on Reddit that
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Nov 10th, 2017</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+          <h2 class="title is-4">Python Discord hits 1,000 members</h2>
+          <p class="content">Our main source of new users at this point is a post on Reddit that
             happens to get very good SEO. We are one of the top 10 search engine hits for the search term
             "python discord".</p>
 
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Nov 10th, 2017</span>
-          </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content has-background-white-bis text-component">
-          <h2 class="has-text-dark">Python Discord is created</h2>
-          <p class="color-contrast-medium has-text-dark"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
+        <div class="is-flex is-justify-content-space-between">
+          <span class="cd-timeline__date has-text-grey">Jan 8th, 2017</span>
+        </div>
+
+        <div class="cd-timeline__content box">
+
+          <h2 class="title is-4">Python Discord is created</h2>
+          <p class="content"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
             is created, and <strong>Leon Sandøy</strong> (lemon) joins the owner team later in the year, when the community
             has around 300 members.</p>
-
-          <div class="flex justify-between items-center">
-            <span class="cd-timeline__date has-text-grey">Jan 8th, 2017</span>
-          </div>
         </div>
       </div>
 

From 60095ef952444b5b5cb98c45f8b62f71789d5b91 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 16:35:05 +0800
Subject: [PATCH 02/17] Fix typo in timeline.css CSS-variable

Unfortunately there is a merge commit (with merge conflicts) in between
this change and the timeline commit before it. Perhaps in a few years
time when I'm more confident in rebasing I'll be able to amend that
commit to include this fix.
---
 pydis_site/static/css/home/timeline.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index b8fa02c98..d708a89bc 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -2,6 +2,7 @@
   --background-color: rgb(232, 239, 245);
   --accent: hsl(205, 38%, 89%);
   --icon-border-color: white;
+  --icon-color: white;
   --content-background-color: white;
 }
 
@@ -60,7 +61,7 @@
   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);
-  color: var(--icon-outline-color);
+  color: var(--icon-color);
 
   font-size: 1.5em;
 

From 8dd3225893aad4dba14145a017903f637579f46b Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 16:40:36 +0800
Subject: [PATCH 03/17] Center align the timeline line (container ::before
 pseudoelement)

---
 pydis_site/static/css/home/timeline.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index d708a89bc..48e0de118 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -28,7 +28,7 @@
   content: '';
   position: absolute;
   top: 0;
-  left: 50%;
+  left: calc(50% - 2px);
   height: 100%;
   width: 4px;
   background-color: var(--accent);

From 60f2bbcafd1cd19df2a6bd77eef00c44f9ba1e9d Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 16:58:15 +0800
Subject: [PATCH 04/17] Timeline: Use Bulma has-background-primary class for
 PyDis logo

---
 pydis_site/static/css/home/timeline.css | 5 -----
 pydis_site/templates/home/timeline.html | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 48e0de118..cfdc6012b 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -151,18 +151,13 @@
 [data-theme="dark"] .pastel-lime {
     background-color: #7c9a21 !important;
 }
-
 .pastel-dark-blue {
     background-color: #576297 !important;
 }
 
 .pydis-logo-banner {
-    background-color: #7289da !important;
     border-radius: 10px;
 }
-[data-theme="dark"] .pydis-logo-banner {
-  background-color: #3B4774 !important;
-}
 .pydis-logo-banner img {
     padding-right: 20px;
 }
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index b1e764b48..e555fc09c 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -1103,7 +1103,7 @@ <h2 class="title is-4">PyDis hits 2,000 members; pythondiscord.com and @Python a
 
             <div class="cd-timeline__content box">
                 <h2 class="title is-4">Our logo is born. Thanks @Aperture!</h2>
-                <p class="pydis-logo-banner"><img
+                <p class="pydis-logo-banner has-background-primary"><img
                         src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
                 </p>
 

From ab51aa627f800dcdb7a6def5438b473b61fae996 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 16:59:38 +0800
Subject: [PATCH 05/17] Timeline: Use an accentuated grey border for icons

The grey was there as a placeholder before this.
---
 pydis_site/static/css/home/timeline.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index cfdc6012b..514d69066 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -9,7 +9,7 @@
 [data-theme="dark"] {
   --background-color: #2C2F33;
   --accent: hsl(0, 0%, 34%);
-  --icon-border-color: grey;
+  --icon-border-color: hsl(0, 0%, 50%);
   --content-background-color: #23272A;
 }
 

From 183330c9542867ed9e283c718e850a9411dbf992 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 17:01:58 +0800
Subject: [PATCH 06/17] Conform to 4-spaces indent for timeline.css

---
 pydis_site/static/css/home/timeline.css | 482 ++++++++++++------------
 1 file changed, 241 insertions(+), 241 deletions(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 514d69066..df72404be 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -1,112 +1,112 @@
 :root {
-  --background-color: rgb(232, 239, 245);
-  --accent: hsl(205, 38%, 89%);
-  --icon-border-color: white;
-  --icon-color: white;
-  --content-background-color: white;
+    --background-color: rgb(232, 239, 245);
+    --accent: hsl(205, 38%, 89%);
+    --icon-border-color: white;
+    --icon-color: white;
+    --content-background-color: white;
 }
 
 [data-theme="dark"] {
-  --background-color: #2C2F33;
-  --accent: hsl(0, 0%, 34%);
-  --icon-border-color: hsl(0, 0%, 50%);
-  --content-background-color: #23272A;
+    --background-color: #2C2F33;
+    --accent: hsl(0, 0%, 34%);
+    --icon-border-color: hsl(0, 0%, 50%);
+    --content-background-color: #23272A;
 }
 
 .cd-timeline {
-  overflow: hidden;
-  padding: 3rem 0;
-  background-color: var(--background-color);
+    overflow: hidden;
+    padding: 3rem 0;
+    background-color: var(--background-color);
 }
 
 .cd-timeline__container {
-  position: relative;
-  padding: 1rem 0;
+    position: relative;
+    padding: 1rem 0;
 }
 
 .cd-timeline__container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: calc(50% - 2px);
-  height: 100%;
-  width: 4px;
-  background-color: var(--accent);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: calc(50% - 2px);
+    height: 100%;
+    width: 4px;
+    background-color: var(--accent);
 }
 
 .cd-timeline__block {
-  display: flex;
-  margin-bottom: 2rem;
+    display: flex;
+    margin-bottom: 2rem;
 }
 
 .cd-timeline__content.box {
-  box-shadow: var(--accent) 0px 3px 0px 0px;
-  background-color: var(--content-background-color);
+    box-shadow: var(--accent) 0px 3px 0px 0px;
+    background-color: var(--content-background-color);
 }
 
 @media (min-width: 768px) {
-  .cd-timeline__block:nth-child(even) {
-    flex-direction: row-reverse;
-  }
+    .cd-timeline__block:nth-child(even) {
+        flex-direction: row-reverse;
+    }
 }
 
 .cd-timeline__img {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
 
-  border-radius: 50%;
-  height: 60px;
-  width: 60px;
+    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);
-  color: var(--icon-color);
+    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);
+    color: var(--icon-color);
 
-  font-size: 1.5em;
+    font-size: 1.5em;
 
-  @media (min-width: 768px) {
-    order: 1;
-  }
+    @media (min-width: 768px) {
+        order: 1;
+    }
 }
 
 .cd-timeline__img img {
-  width: 40px;
-  height: 40px;
-  margin-left: 2px;
-  margin-top: 2px;
+    width: 40px;
+    height: 40px;
+    margin-left: 2px;
+    margin-top: 2px;
 }
 
 .cd-timeline__date {
-  font-size: .9rem;
+    font-size: .9rem;
 }
 
 .cd-timeline__content {
-  flex-grow: 1;
+    flex-grow: 1;
 
-  @media (min-width: 768px) {
-    width: 45%;
-    flex-grow: 0;
-  }
+    @media (min-width: 768px) {
+        width: 45%;
+        flex-grow: 0;
+    }
 }
 
 @media (min-width: 64rem) {
-  .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
-  }
-
-  .cd-timeline__img {
-    left: calc(50% - 30px);
-    position: absolute;
-  }
+    .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
+    }
+
+    .cd-timeline__img {
+        left: calc(50% - 30px);
+        position: absolute;
+    }
 }
 
 .pastel-red {
@@ -169,202 +169,202 @@ img, video, svg {
 /* ANIMATION */
 
 @media (min-width: 64rem) {
-  .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden {
-    visibility: hidden
-  }
-  .cd-timeline__img--bounce-in {
-    -webkit-animation: cd-bounce-1 0.6s;
-    animation: cd-bounce-1 0.6s;
-  }
-  .cd-timeline__content--bounce-in,
-  .cd-timeline__date--bounce-in {
-    -webkit-animation: cd-bounce-2 0.6s;
-    animation: cd-bounce-2 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: 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,
-  .cd-timeline__date--bounce-out {
-    -webkit-animation: cd-bounce-out-3 0.6s;
-    animation: cd-bounce-out-2 0.6s;
-  }
-}
-
-/* @-webkit-keyframes cd-bounce-1 { */
-/*     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) */
-/*     } */
-/* } */
+    .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden {
+        visibility: hidden
+    }
+    .cd-timeline__img--bounce-in {
+        -webkit-animation: cd-bounce-1 0.6s;
+        animation: cd-bounce-1 0.6s;
+    }
+    .cd-timeline__content--bounce-in,
+    .cd-timeline__date--bounce-in {
+        -webkit-animation: cd-bounce-2 0.6s;
+        animation: cd-bounce-2 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: 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,
+    .cd-timeline__date--bounce-out {
+        -webkit-animation: cd-bounce-out-3 0.6s;
+        animation: cd-bounce-out-2 0.6s;
+    }
+}
+
+@-webkit-keyframes cd-bounce-1 {
+    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 cd-bounce-1 {
-  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 cd-bounce-2 { */
-/*     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) */
-/*     } */
-/* } */
+    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 cd-bounce-2 {
+    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 cd-bounce-2 {
-  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)
-  }
+    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 cd-bounce-2-inverse {
-  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)
-  }
+    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 cd-bounce-2-inverse {
-  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)
-  }
+    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 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)
-  }
+    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);
-  }
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
 
-  60% {
-    -webkit-transform: scale(1.2);
-    transform: scale(1.2);
-  }
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
 
-  100% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-  }
+    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)
-  }
+    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);
-  }
+    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);
+    }
 }

From 5aae7f8636ac04a1ef1a2c2a2a51208942559ea4 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 17:07:43 +0800
Subject: [PATCH 07/17] Semantic animation names for timeline.css

---
 pydis_site/static/css/home/timeline.css | 49 +++++++++++++------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index df72404be..6e53eaa12 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -59,10 +59,10 @@
     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);
-    color: var(--icon-color);
 
+    /* Font Awesome icon size and color */
+    color: var(--icon-color);
     font-size: 1.5em;
 
     @media (min-width: 768px) {
@@ -155,49 +155,50 @@
     background-color: #576297 !important;
 }
 
+/* Used for "Our logo is born" timeline item */
 .pydis-logo-banner {
     border-radius: 10px;
 }
 .pydis-logo-banner img {
     padding-right: 20px;
 }
+
 img, video, svg {
     max-width: 100%
 }
 
 
-/* ANIMATION */
-
+/* Bounce-in and bounce-out animations */
 @media (min-width: 64rem) {
     .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden {
         visibility: hidden
     }
     .cd-timeline__img--bounce-in {
-        -webkit-animation: cd-bounce-1 0.6s;
-        animation: cd-bounce-1 0.6s;
+        -webkit-animation: icon-bounce 0.6s;
+        animation: icon-bounce 0.6s;
     }
     .cd-timeline__content--bounce-in,
     .cd-timeline__date--bounce-in {
-        -webkit-animation: cd-bounce-2 0.6s;
-        animation: cd-bounce-2 0.6s;
+        -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: cd-bounce-2-inverse;
-        animation-name: cd-bounce-2-inverse;
+        -webkit-animation-name: item-bounce-right;
+        animation-name: item-bounce-right;
     }
     .cd-timeline__img--bounce-out {
-        -webkit-animation: cd-bounce-out-1 0.6s;
-        animation: cd-bounce-out-1 0.6s;
+        -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: cd-bounce-out-3 0.6s;
-        animation: cd-bounce-out-2 0.6s;
+        -webkit-animation: item-bounce-out 0.6s;
+        animation: item-bounce-out 0.6s;
     }
 }
 
-@-webkit-keyframes cd-bounce-1 {
+@-webkit-keyframes icon-bounce {
     0% {
         opacity: 0;
         -webkit-transform: scale(0.5);
@@ -214,7 +215,7 @@ img, video, svg {
     }
 }
 
-@keyframes cd-bounce-1 {
+@keyframes icon-bounce {
     0% {
         opacity: 0;
         -webkit-transform: scale(0.5);
@@ -231,7 +232,7 @@ img, video, svg {
     }
 }
 
-@-webkit-keyframes cd-bounce-2 {
+@-webkit-keyframes item-bounce-left {
     0% {
         opacity: 0;
         -webkit-transform: translateX(-100px);
@@ -248,7 +249,7 @@ img, video, svg {
     }
 }
 
-@keyframes cd-bounce-2 {
+@keyframes item-bounce-left {
     0% {
         opacity: 0;
         -webkit-transform: translateX(-100px);
@@ -265,7 +266,7 @@ img, video, svg {
     }
 }
 
-@-webkit-keyframes cd-bounce-2-inverse {
+@-webkit-keyframes item-bounce-right {
     0% {
         opacity: 0;
         -webkit-transform: translateX(100px);
@@ -282,7 +283,7 @@ img, video, svg {
     }
 }
 
-@keyframes cd-bounce-2-inverse {
+@keyframes item-bounce-right {
     0% {
         opacity: 0;
         -webkit-transform: translateX(100px);
@@ -299,7 +300,7 @@ img, video, svg {
     }
 }
 
-@-webkit-keyframes cd-bounce-out-1 {
+@-webkit-keyframes icon-bounce-out {
     0% {
         opacity: 1;
         -webkit-transform: scale(1);
@@ -316,7 +317,7 @@ img, video, svg {
     }
 }
 
-@keyframes cd-bounce-out-1 {
+@keyframes icon-bounce-out {
     0% {
         opacity: 1;
         -webkit-transform: scale(1);
@@ -335,7 +336,7 @@ img, video, svg {
     }
 }
 
-@-webkit-keyframes cd-bounce-out-2 {
+@-webkit-keyframes item-bounce-out {
     0% {
         opacity: 1;
         -webkit-transform: translateX(0);
@@ -352,7 +353,7 @@ img, video, svg {
     }
 }
 
-@keyframes cd-bounce-out-2 {
+@keyframes item-bounce-out {
     0% {
         opacity: 1;
         -webkit-transform: translateX(0);

From ec4f8435d626777bf019660e386b0d9f98f35064 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 17:09:50 +0800
Subject: [PATCH 08/17] Timeline: Adjust spacing between timeline items

---
 pydis_site/static/css/home/timeline.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 6e53eaa12..27d7c1196 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -36,7 +36,7 @@
 
 .cd-timeline__block {
     display: flex;
-    margin-bottom: 2rem;
+    margin-bottom: 2.5rem;
 }
 
 .cd-timeline__content.box {

From 39ba78c40d7b858b8db5b3f61ab7b9f0f1ee4565 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 17:14:15 +0800
Subject: [PATCH 09/17] Timeline: Remove link to home/index.css stylesheet

That file is for the homepage explicitly and including it for the
timeline is actually redundant.
---
 pydis_site/templates/home/timeline.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index e555fc09c..c3dd6e4d3 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -4,7 +4,6 @@
 {% block title %}Timeline{% endblock %}
 {% block head %}
   <link rel="stylesheet" href="{% static "css/home/timeline.css" %}">
-  <link rel="stylesheet" href="{% static "css/home/index.css" %}">
 {% endblock %}
 
 {% block content %}

From 9405e467c0f6e3d64404a8554f95bf658e0715a9 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 17:14:43 +0800
Subject: [PATCH 10/17] Remove cd-timeline__img--picture

It's useless here after having added has-background-primary which
leverages the bulma class, configurable through settings.py.
---
 pydis_site/templates/home/timeline.html | 104 ++++++++++++------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index c3dd6e4d3..d3c59b1e6 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -13,7 +13,7 @@
     <div class="container cd-timeline__container">
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-pink">
           <span class="icon">
             <i class="fa fa-comments"></i>
           </span>
@@ -37,7 +37,7 @@ <h2 class="title is-4">Switch to new paste service</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
@@ -58,7 +58,7 @@ <h2 class="title is-4">Retirement of Joe and Sebastiaan</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-pink">
           <span class="icon is-large">
             <i class="fa fa-comments"></i>
           </span>
@@ -79,7 +79,7 @@ <h2 class="title is-4">Switch to forum-based help system</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
@@ -106,7 +106,7 @@ <h2 class="title is-4">Python 3.11 Release Stream</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-lime cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-lime">
           <span class="icon is-large">
             <i class="fa fa-dice"></i>
           </span>
@@ -135,7 +135,7 @@ <h2 class="title is-4">Summer Code Jam 2022 (CJ9)</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div style="background-color: grey;" class="cd-timeline__img has-background-primary cd-timeline__img--picture">
+        <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
           <i class="fa fa-handshake"></i>
         </div>
 
@@ -153,7 +153,7 @@ <h2 class="title is-4">Partnership with pyqtgraph</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-blue">
           <span class="icon is-large">
             <i class="fa fa-robot"></i>
           </span>
@@ -173,7 +173,7 @@ <h2 class="title is-4">Addition of @Sir Robin</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-green">
           <span class="icon is-large">
             <i class="fa fa-question"></i>
           </span>
@@ -194,7 +194,7 @@ <h2 class="title is-4">Trivia Night</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
@@ -214,7 +214,7 @@ <h2 class="title is-4">Creation of Events Team</h2>
 
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-red">
           <span class="icon is-large">
             <i class="fa fa-code"></i>
           </span>
@@ -237,7 +237,7 @@ <h2 class="title is-4">Deployment of Smarter Resources</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -257,7 +257,7 @@ <h2 class="title is-4">We hit 300 000 members!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
@@ -284,7 +284,7 @@ <h2 class="title is-4">We host the Python 3.10 Release Stream</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div style="background-color: grey;" class="cd-timeline__img has-background-primary cd-timeline__img--picture">
+        <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
           <i class="fa fa-handshake"></i>
         </div>
 
@@ -303,7 +303,7 @@ <h2 class="title is-4">Partnership with Black</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-orange">
           <span class="icon is-large">
             <i class="fa fa-dice"></i>
           </span>
@@ -328,7 +328,7 @@ <h2 class="title is-4">Summer Code Jam 2021 (CJ8)</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-purple cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-purple">
           <span class="icon is-large">
             <i class="fa fa-palette"></i>
           </span>
@@ -354,7 +354,7 @@ <h2 class="title is-4">Inaugural run of Pixels</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
@@ -376,7 +376,7 @@ <h2 class="title is-4">Owners become PSF Fellows</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-red">
           <span class="icon is-large">
             <i class="fab fa-youtube"></i>
           </span>
@@ -403,7 +403,7 @@ <h2 class="title is-4">Summer Code Jam 2020 Highlights</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-purple cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-purple">
           <span class="icon is-large">
             <i class="fa fa-comment"></i>
           </span>
@@ -430,7 +430,7 @@ <h2 class="title is-4">New feature: Weekly discussion channel</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-pink">
           <span class="icon is-large">
             <i class="fa fa-microphone"></i>
           </span>
@@ -455,7 +455,7 @@ <h2 class="title is-4">We're on the Teaching Python podcast!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-green">
           <span class="icon is-large">
             <i class="fa fa-microphone"></i>
           </span>
@@ -480,7 +480,7 @@ <h2 class="title is-4">Leon Sandøy appears on Talk Python To Me</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -498,7 +498,7 @@ <h2 class="title is-4">We now have 150,000 members!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-blue">
           <span class="icon is-large">
             <i class="fa fa-music"></i>
           </span>
@@ -523,7 +523,7 @@ <h2 class="title is-4">We release The PEP 8 song</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-red">
           <span class="icon is-large">
             <i class="fa fa-snowflake"></i>
           </span>
@@ -547,7 +547,7 @@ <h2 class="title is-4">Advent of Code attracts hundreds of participants</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-orange">
           <span class="icon is-large">
             <i class="fa fa-wrench"></i>
           </span>
@@ -568,7 +568,7 @@ <h2 class="title is-4">We migrate all our infrastructure to Kubernetes</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -588,7 +588,7 @@ <h2 class="title is-4">Python Discord hits 100,000 members!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
@@ -608,7 +608,7 @@ <h2 class="title is-4">Python Discord hosts the 2020 CPython Core Developer Q&A<
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-pink">
           <span class="icon is-large">
             <i class="fa fa-handshake"></i>
           </span>
@@ -628,7 +628,7 @@ <h2 class="title is-4">Python Discord is now the new home of the PyWeek event!</
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-blue">
           <span class="icon is-large">
             <i class="fa fa-dice"></i>
           </span>
@@ -654,7 +654,7 @@ <h2 class="title is-4">PyDis summer code jam 2020 with the theme “Early Intern
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-red">
           <span class="icon is-large">
             <i class="fa fa-chart-bar"></i>
           </span>
@@ -674,7 +674,7 @@ <h2 class="title is-4">Python Discord Public Statistics are now live</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-pink">
           <span class="icon is-large">
             <i class="fa fa-handshake"></i>
           </span>
@@ -694,7 +694,7 @@ <h2 class="title is-4">Python Discord is now listed on python.org/community</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-green">
           <span class="icon is-large">
             <i class="fa fa-comments"></i>
           </span>
@@ -714,7 +714,7 @@ <h2 class="title is-4">ModMail is now live</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-purple cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-purple">
           <span class="icon is-large">
             <i class="fa fa-gamepad"></i>
           </span>
@@ -740,7 +740,7 @@ <h2 class="title is-4">PyDis Game Jam 2020 with the “Three of a Kind” theme
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -759,7 +759,7 @@ <h2 class="title is-4">Python Discord hits 40,000 members, and is now bigger tha
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-green">
           <span class="icon is-large">
             <i class="fa fa-comments"></i>
           </span>
@@ -780,7 +780,7 @@ <h2 class="title is-4">The new help channel system is live</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-blue">
           <span class="icon is-large">
             <i class="fa fa-dice"></i>
           </span>
@@ -806,7 +806,7 @@ <h2 class="title is-4">PyDis sixth code jam with the theme “Ancient technology
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -825,7 +825,7 @@ <h2 class="title is-4">PyDis hits 30,000 members</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
         </div>
 
@@ -842,7 +842,7 @@ <h2 class="title is-4">Sebastiaan Zeef becomes an owner</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-lime cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-lime">
           <span class="icon is-large">
             <i class="fa fa-scroll"></i>
           </span>
@@ -862,7 +862,7 @@ <h2 class="title is-4">The code of conduct is created</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-orange">
           <span class="icon is-large">
             <i class="fa fa-code"></i>
           </span>
@@ -882,7 +882,7 @@ <h2 class="title is-4">The Django rewrite of pythondiscord.com is now live!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -904,7 +904,7 @@ <h2 class="title is-4">PyDis hits 15,000 members; the “hot ones special” vid
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-orange">
           <span class="icon is-large">
             <i class="fa fa-code"></i>
           </span>
@@ -925,7 +925,7 @@ <h2 class="title is-4">django-simple-bulma is released on PyPi</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -944,7 +944,7 @@ <h2 class="title is-4">PyDis hits 10,000 members</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-blue">
           <span class="icon is-large">
             <i class="fa fa-dice"></i>
           </span>
@@ -965,7 +965,7 @@ <h2 class="title is-4">First Hacktoberfest PyDis event; @Sir Lancebot is created
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-pink">
           <span class="icon is-large">
             <i class="fa fa-handshake"></i>
           </span>
@@ -985,7 +985,7 @@ <h2 class="title is-4">PyDis is now partnered with Discord; the vanity URL disco
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -1005,7 +1005,7 @@ <h2 class="title is-4">PyDis hits 5,000 members and partners with r/Python</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-pink">
           <span class="icon is-large">
             <i class="fa fa-handshake"></i>
           </span>
@@ -1027,7 +1027,7 @@ <h2 class="title is-4">Do You Even Python and PyDis merger</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-lime cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-lime">
           <span class="icon is-large">
             <i class="fa fa-scroll"></i>
           </span>
@@ -1049,7 +1049,7 @@ <h2 class="title is-4">The privacy policy is created</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-blue">
           <span class="icon is-large">
             <i class="fa fa-dice"></i>
           </span>
@@ -1071,7 +1071,7 @@ <h2 class="title is-4">First code jam with the theme “snakes”</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -1092,7 +1092,7 @@ <h2 class="title is-4">PyDis hits 2,000 members; pythondiscord.com and @Python a
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
         </div>
 
@@ -1110,7 +1110,7 @@ <h2 class="title is-4">Our logo is born. Thanks @Aperture!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
           <span class="icon is-large">
             <i class="fa fa-users"></i>
           </span>
@@ -1130,7 +1130,7 @@ <h2 class="title is-4">Python Discord hits 1,000 members</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary cd-timeline__img--picture image">
+        <div class="cd-timeline__img has-background-primary image">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 

From a32e52965871d12bf5975d797cdca64538ebf202 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 17:16:10 +0800
Subject: [PATCH 11/17] Timeline: Modify class ordering of container

And remove bulma .section class because it's unnecessary here.
---
 pydis_site/templates/home/timeline.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index d3c59b1e6..b3c8dce1b 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -9,8 +9,8 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
-  <section class="cd-timeline js-cd-timeline section">
-    <div class="container cd-timeline__container">
+  <section class="cd-timeline js-cd-timeline">
+    <div class="cd-timeline__container container">
 
       <div class="cd-timeline__block">
         <div class="cd-timeline__img has-background-primary pastel-pink">

From 1d943b2051705b226b4d8924f9f38d171c910842 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 19 Mar 2024 21:30:35 +0800
Subject: [PATCH 12/17] 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!
---
 pydis_site/static/css/home/timeline.css | 268 +++++++++++-------------
 pydis_site/templates/home/timeline.html | 104 ++++-----
 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 27d7c1196..bf57d56d1 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 b3c8dce1b..7097d1f10 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 @@ <h2 class="title is-4">Switch to new paste service</h2>
         </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 @@ <h2 class="title is-4">Retirement of Joe and Sebastiaan</h2>
         </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 @@ <h2 class="title is-4">Switch to forum-based help system</h2>
         </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 @@ <h2 class="title is-4">Python 3.11 Release Stream</h2>
         </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 @@ <h2 class="title is-4">Summer Code Jam 2022 (CJ9)</h2>
         </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 @@ <h2 class="title is-4">Partnership with pyqtgraph</h2>
         </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 @@ <h2 class="title is-4">Addition of @Sir Robin</h2>
         </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 @@ <h2 class="title is-4">Trivia Night</h2>
         </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 @@ <h2 class="title is-4">Creation of Events Team</h2>
         </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 @@ <h2 class="title is-4">Deployment of Smarter Resources</h2>
         </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 @@ <h2 class="title is-4">We hit 300 000 members!</h2>
         </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 @@ <h2 class="title is-4">We host the Python 3.10 Release Stream</h2>
         </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 @@ <h2 class="title is-4">Partnership with Black</h2>
         </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 @@ <h2 class="title is-4">Summer Code Jam 2021 (CJ8)</h2>
         </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 @@ <h2 class="title is-4">Inaugural run of Pixels</h2>
         </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 @@ <h2 class="title is-4">Owners become PSF Fellows</h2>
         </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 @@ <h2 class="title is-4">Summer Code Jam 2020 Highlights</h2>
         </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 @@ <h2 class="title is-4">New feature: Weekly discussion channel</h2>
         </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 @@ <h2 class="title is-4">We're on the Teaching Python podcast!</h2>
         </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 @@ <h2 class="title is-4">Leon Sandøy appears on Talk Python To Me</h2>
         </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 @@ <h2 class="title is-4">We now have 150,000 members!</h2>
         </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 @@ <h2 class="title is-4">We release The PEP 8 song</h2>
         </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 @@ <h2 class="title is-4">Advent of Code attracts hundreds of participants</h2>
         </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 @@ <h2 class="title is-4">We migrate all our infrastructure to Kubernetes</h2>
         </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 @@ <h2 class="title is-4">Python Discord hits 100,000 members!</h2>
         </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 @@ <h2 class="title is-4">Python Discord hosts the 2020 CPython Core Developer Q&A<
         </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 @@ <h2 class="title is-4">Python Discord is now the new home of the PyWeek event!</
         </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 @@ <h2 class="title is-4">PyDis summer code jam 2020 with the theme “Early Intern
         </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 @@ <h2 class="title is-4">Python Discord Public Statistics are now live</h2>
         </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 @@ <h2 class="title is-4">Python Discord is now listed on python.org/community</h2>
         </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 @@ <h2 class="title is-4">ModMail is now live</h2>
         </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 @@ <h2 class="title is-4">PyDis Game Jam 2020 with the “Three of a Kind” theme
         </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 @@ <h2 class="title is-4">Python Discord hits 40,000 members, and is now bigger tha
         </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 @@ <h2 class="title is-4">The new help channel system is live</h2>
         </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 @@ <h2 class="title is-4">PyDis sixth code jam with the theme “Ancient technology
         </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 @@ <h2 class="title is-4">PyDis hits 30,000 members</h2>
         </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 @@ <h2 class="title is-4">Sebastiaan Zeef becomes an owner</h2>
         </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 @@ <h2 class="title is-4">The code of conduct is created</h2>
         </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 @@ <h2 class="title is-4">The Django rewrite of pythondiscord.com is now live!</h2>
         </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 @@ <h2 class="title is-4">PyDis hits 15,000 members; the “hot ones special” vid
         </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 @@ <h2 class="title is-4">django-simple-bulma is released on PyPi</h2>
         </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 @@ <h2 class="title is-4">PyDis hits 10,000 members</h2>
         </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 @@ <h2 class="title is-4">First Hacktoberfest PyDis event; @Sir Lancebot is created
         </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 @@ <h2 class="title is-4">PyDis is now partnered with Discord; the vanity URL disco
         </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 @@ <h2 class="title is-4">PyDis hits 5,000 members and partners with r/Python</h2>
         </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 @@ <h2 class="title is-4">Do You Even Python and PyDis merger</h2>
         </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 @@ <h2 class="title is-4">The privacy policy is created</h2>
         </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 @@ <h2 class="title is-4">First code jam with the theme “snakes”</h2>
         </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 @@ <h2 class="title is-4">PyDis hits 2,000 members; pythondiscord.com and @Python a
         </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 @@ <h2 class="title is-4">Our logo is born. Thanks @Aperture!</h2>
         </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 @@ <h2 class="title is-4">Python Discord hits 1,000 members</h2>
         </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">

From 27650034085125f5d4b86ed9a581df4fad1e0d43 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Wed, 20 Mar 2024 21:28:28 +0800
Subject: [PATCH 13/17] Timeline: Better design structure

- Put CSS for the pydis banner item (Aperture's logo design) inline
  style rather than using a class.
- Style icons that uses images separate from icons that uses the pydis
  logo image.
- Rename the pydis logo image to be more descriptive.
- Group the icon and date components together for easier and more robust
  styling (see CSS comments).
- More descriptive alt text for pydis icons.
- Added responsibility: EVEN smaller icons on mobile.
- Align content boxes about the middle axis rather than relying on
  container padding.
---
 pydis_site/static/css/home/timeline.css       | 164 +++--
 ...{cd-icon-picture.svg => cd-icon-pydis.svg} |   0
 pydis_site/templates/home/timeline.html       | 636 ++++++++----------
 3 files changed, 397 insertions(+), 403 deletions(-)
 rename pydis_site/static/images/timeline/{cd-icon-picture.svg => cd-icon-pydis.svg} (100%)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index bf57d56d1..04cc98bce 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -3,19 +3,25 @@
  * */
 
 :root {
-    --side-padding: 0;
+    --side-spacing: 0;
     --background-color: rgb(232, 239, 245);
     --content-background-color: white;
     --accent: hsl(205, 38%, 89%);
 
     --timeline-line-width: 4px;
+    --timeline-line-half-width: calc(var(--timeline-line-width) / 2);
 
     --icon-width: 60px;
+    --icon-half-width: calc(var(--icon-width) / 2);
     --icon-border-width: 4px;
     --icon-border-color: white;
     --icon-color: white;
     --icon-image-width: 40px;
     --icon-size: 1.5rem;
+    /* On desktop: Margin on the left and right of the icon.
+     * On mobile:  Set to be consistent with --side-spacing.
+     * */
+    --icon-side-spacing: 1.5rem;
 
     --date-color: hsl(0, 0%, 48%);
 }
@@ -30,13 +36,27 @@
 
 @media (max-width: 1023px) {
     :root {
-        --side-padding: 1.25rem;
+        --side-spacing: 1.25rem;
+        --icon-side-spacing: var(--side-spacing);
         --icon-width: 40px;
         --icon-image-width: 30px;
         --icon-size: 1.1rem;
     }
 }
 
+/* Use a tighter margin and smaller icon dimensions on the most narrow screens.
+ * */
+@media (max-width: 600px) {
+    :root {
+        --side-spacing: .75rem;
+        --timeline-line-width: 3px;
+        --icon-width: 30px;
+        --icon-border-width: 3px;
+        --icon-image-width: 24px;
+        --icon-size: .9rem;
+    }
+}
+
 /* Containers */
 .cd-timeline {
     overflow: hidden;
@@ -46,10 +66,10 @@
 
 .cd-timeline__container {
     position: relative;
-    padding: 1rem var(--side-padding);
+    padding: 1rem var(--side-spacing);
 }
 
-/* Line that goes through all the icons */
+/* The line that goes through all the icons */
 .cd-timeline__container::before {
     content: '';
     position: absolute;
@@ -62,19 +82,20 @@
 
 @media (min-width: 1023px) {
     .cd-timeline__container::before {
-        left: calc(50% - var(--timeline-line-width) / 2);
+        left: calc(50% - var(--timeline-line-half-width));
     }
 }
 
 @media (max-width: 1023px) {
     .cd-timeline__container::before {
-        margin-left: calc(var(--icon-width) / 2 - var(--timeline-line-width) / 2);
+        margin-left: calc(var(--icon-half-width) - var(--timeline-line-half-width));
     }
 }
 
 /* Each timeline item */
 .cd-timeline__block {
     display: flex;
+    align-items: flex-start;
     margin-bottom: 2.5rem;
 }
 
@@ -82,29 +103,75 @@
 .cd-timeline__content.box {
     box-shadow: var(--accent) 0px 3px 0px 0px;
     background-color: var(--content-background-color);
+    flex-grow: 1;
+}
+
+@media (min-width: 1023px) {
+    .cd-timeline__block:nth-child(odd) {
+        flex-direction: row-reverse;
+    }
+    /* On desktop, the content boxes are anchored with respect to the vertical
+     * center of the screen, set using `left`/`right` properties depending on
+     * even and odd children of cd-timeline__block items.
+     * */
+    .cd-timeline__content.box  {
+        width: 45%;
+        flex-grow: 0;
+
+        position: relative;
+
+        --content-position: calc(50% + var(--icon-border-width) + var(--icon-half-width));
+
+        left: var(--content-position);
+        margin-left: var(--icon-side-spacing);
+    }
+    .cd-timeline__block:nth-child(odd) .cd-timeline__content.box {
+        left: unset;
+        right: var(--content-position);
+        margin-right: var(--icon-side-spacing);
+    }
 }
 
 @media (max-width: 1023px) {
     .cd-timeline__content.box {
-        margin-left: 1rem;
+        margin-left: var(--icon-side-spacing);
     }
 }
-
-@media (min-width: 1023px) {
-    .cd-timeline__block:nth-child(even) {
-        flex-direction: row-reverse;
+@media (max-width: 600px) {
+    .cd-timeline__content.box {
+        margin-left: var(--icon-side-spacing);
     }
 }
 
-/* The title and text */
-.cd-timeline__content {
-    flex-grow: 1;
+/* The icon and date components are grouped together in a flexbox to ensure
+ * there are center-aligned vertically on both desktop and mobile screens. This
+ * also makes it easy to both have dates' horizontal position follow that of
+ * the icon, and reverse their ordering for alternate timeline items on
+ * desktop.
+ * */
+.icon-date {
+    z-index: 4;
+    display: flex;
+    align-items: baseline;
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__content  {
-        width: 45%;
-        flex-grow: 0;
+    .icon-date {
+        order: 1;
+
+        /* Arbitrary container width to prevent wrapping of the date text */
+        width: 50%;
+        align-items: center;
+        gap: var(--icon-side-spacing);
+
+        position: absolute;
+        left: calc(50% - var(--icon-half-width));
+    }
+
+    .cd-timeline__block:nth-child(even) .icon-date {
+        flex-direction: row-reverse;
+        left: unset;
+        right: calc(50% - var(--icon-half-width));
     }
 }
 
@@ -118,82 +185,69 @@
     border-radius: 50%;
     height: var(--icon-width);
     width: var(--icon-width);
+    /* The border does not actually use the border property because this border
+     * needs to cover the bottom box-shadow, which is easier if the border is
+     * implemented as a box-shadow.
+     * */
     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;
+    margin-top: var(--icon-border-width);
 
     /* Font Awesome icon size and color */
     color: var(--icon-color);
     font-size: var(--icon-size);
 }
 
-@media (min-width: 1023px) {
-    .cd-timeline__img {
-        order: 1;
-
-        position: absolute;
-        left: calc(50% - var(--icon-width) / 2);
-    }
+/* Icons that use a custom image */
+.cd-timeline__img img {
+    width: var(--icon-image-width);
+    height: var(--icon-image-width);
 }
 
-/* Icon that uses pydis logo */
-.cd-timeline__img img {
+/* Icons that use the pydis logo */
+.cd-timeline__img img.pydis {
     /* 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.
+     * HACK: Harcoded; Unresponsive to actual image dimensions.
      * */
     margin-top: 1px;
     margin-left: 1px;
-
-    width: var(--icon-image-width);
-    height: var(--icon-image-width);
 }
 
-/* Date next to icons */
 .cd-timeline__date {
-    position: absolute;
-    width: 100%;
-    margin-top: 1rem;
-    z-index: 3;
-
     font-size: .9rem;
     color: var(--date-color);
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__date {
-        left: 54%;
-    }
-
     .cd-timeline__block:nth-child(even) .cd-timeline__date {
         left: auto;
-        right: 54%;
+        right: 50%;
         text-align: right;
     }
 }
 
 @media (max-width: 1023px) {
     .cd-timeline__date {
-        /*
-         * On mobile, place the date at the top of the text box left-aligned
+        position: absolute;
+        /* 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.
+         * is left-aligned to the left of the icon (right of 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.
+         * 'margin-left: var(--icon-side-spacing)' 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-left: calc(var(--icon-width) + var(--icon-side-spacing) + 1.25rem);
         margin-top: .75rem;
     }
 
-    .cd-timeline__content .title {
+    .cd-timeline__content.box .title {
         /* Make space for the date text */
         margin-top: 1.25rem;
     }
@@ -247,14 +301,6 @@
     background-color: #576297 !important;
 }
 
-/* Used for "Our logo is born" timeline item */
-.pydis-logo-banner {
-    border-radius: 10px;
-}
-.pydis-logo-banner img {
-    padding-right: 20px;
-}
-
 img, video, svg {
     max-width: 100%
 }
@@ -262,7 +308,7 @@ img, video, svg {
 /* 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
+        visibility: hidden;
     }
     .cd-timeline__img--bounce-in {
         animation: icon-bounce 0.6s;
diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-pydis.svg
similarity index 100%
rename from pydis_site/static/images/timeline/cd-icon-picture.svg
rename to pydis_site/static/images/timeline/cd-icon-pydis.svg
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index 7097d1f10..a62c8570d 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -13,13 +13,12 @@
     <div class="cd-timeline__container container">
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink">
-          <span class="icon">
-            <i class="fa fa-comments"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-pink">
+            <span class="icon">
+              <i class="fa fa-comments"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jul 11th, 2023</span>
         </div>
 
@@ -37,11 +36,10 @@ <h2 class="title is-4">Switch to new paste service</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+          </div>
           <span class="cd-timeline__date">Jan 30th, 2023</span>
         </div>
 
@@ -58,13 +56,12 @@ <h2 class="title is-4">Retirement of Joe and Sebastiaan</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink">
-          <span class="icon is-large">
-            <i class="fa fa-comments"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-pink">
+            <span class="icon is-large">
+              <i class="fa fa-comments"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Nov 25th, 2022</span>
         </div>
 
@@ -79,11 +76,10 @@ <h2 class="title is-4">Switch to forum-based help system</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+          </div>
           <span class="cd-timeline__date">Oct 24th, 2022</span>
         </div>
 
@@ -106,13 +102,12 @@ <h2 class="title is-4">Python 3.11 Release Stream</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-lime">
-          <span class="icon is-large">
-            <i class="fa fa-dice"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-lime">
+            <span class="icon is-large">
+              <i class="fa fa-dice"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">July 21st, 2022</span>
         </div>
 
@@ -135,11 +130,10 @@ <h2 class="title is-4">Summer Code Jam 2022 (CJ9)</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
-          <i class="fa fa-handshake"></i>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
+            <i class="fa fa-handshake"></i>
+          </div>
           <span class="cd-timeline__date">May 19th, 2022</span>
         </div>
 
@@ -153,13 +147,12 @@ <h2 class="title is-4">Partnership with pyqtgraph</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue">
-          <span class="icon is-large">
-            <i class="fa fa-robot"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-blue">
+            <span class="icon is-large">
+              <i class="fa fa-robot"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Feb 21st, 2022</span>
         </div>
 
@@ -173,13 +166,12 @@ <h2 class="title is-4">Addition of @Sir Robin</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green">
-          <span class="icon is-large">
-            <i class="fa fa-question"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-green">
+            <span class="icon is-large">
+              <i class="fa fa-question"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Feb 12th, 2022</span>
         </div>
 
@@ -194,11 +186,10 @@ <h2 class="title is-4">Trivia Night</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+          </div>
           <span class="cd-timeline__date">Feb 9th, 2022</span>
         </div>
 
@@ -214,13 +205,12 @@ <h2 class="title is-4">Creation of Events Team</h2>
 
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red">
-          <span class="icon is-large">
-            <i class="fa fa-code"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-red">
+            <span class="icon is-large">
+              <i class="fa fa-code"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Feb 2nd, 2022</span>
         </div>
 
@@ -237,13 +227,12 @@ <h2 class="title is-4">Deployment of Smarter Resources</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jan 19, 2022</span>
         </div>
 
@@ -257,11 +246,10 @@ <h2 class="title is-4">We hit 300 000 members!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+          </div>
           <span class="cd-timeline__date">Oct 4th, 2021</span>
         </div>
 
@@ -284,11 +272,10 @@ <h2 class="title is-4">We host the Python 3.10 Release Stream</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
-          <i class="fa fa-handshake"></i>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
+            <i class="fa fa-handshake"></i>
+          </div>
           <span class="cd-timeline__date">May 24th, 2021</span>
         </div>
 
@@ -303,13 +290,12 @@ <h2 class="title is-4">Partnership with Black</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange">
-          <span class="icon is-large">
-            <i class="fa fa-dice"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-orange">
+            <span class="icon is-large">
+              <i class="fa fa-dice"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">July 9, 2021</span>
         </div>
 
@@ -328,13 +314,12 @@ <h2 class="title is-4">Summer Code Jam 2021 (CJ8)</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-purple">
-          <span class="icon is-large">
-            <i class="fa fa-palette"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-purple">
+            <span class="icon is-large">
+              <i class="fa fa-palette"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">May 24, 2021</span>
         </div>
 
@@ -354,11 +339,10 @@ <h2 class="title is-4">Inaugural run of Pixels</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+          </div>
           <span class="cd-timeline__date">April 23, 2021</span>
         </div>
 
@@ -376,13 +360,12 @@ <h2 class="title is-4">Owners become PSF Fellows</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red">
-          <span class="icon is-large">
-            <i class="fab fa-youtube"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-red">
+            <span class="icon is-large">
+              <i class="fab fa-youtube"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Mar 21st, 2021</span>
         </div>
 
@@ -403,13 +386,12 @@ <h2 class="title is-4">Summer Code Jam 2020 Highlights</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-purple">
-          <span class="icon is-large">
-            <i class="fa fa-comment"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-purple">
+            <span class="icon is-large">
+              <i class="fa fa-comment"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Mar 13th, 2021</span>
         </div>
 
@@ -430,13 +412,12 @@ <h2 class="title is-4">New feature: Weekly discussion channel</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink">
-          <span class="icon is-large">
-            <i class="fa fa-microphone"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-pink">
+            <span class="icon is-large">
+              <i class="fa fa-microphone"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Mar 13th, 2021</span>
         </div>
 
@@ -455,13 +436,12 @@ <h2 class="title is-4">We're on the Teaching Python podcast!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green">
-          <span class="icon is-large">
-            <i class="fa fa-microphone"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-green">
+            <span class="icon is-large">
+              <i class="fa fa-microphone"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Mar 1st, 2021</span>
         </div>
 
@@ -480,13 +460,12 @@ <h2 class="title is-4">Leon Sandøy appears on Talk Python To Me</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Feb 18th, 2021</span>
         </div>
 
@@ -498,13 +477,12 @@ <h2 class="title is-4">We now have 150,000 members!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue">
-          <span class="icon is-large">
-            <i class="fa fa-music"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-blue">
+            <span class="icon is-large">
+              <i class="fa fa-music"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">February 8th, 2021</span>
         </div>
 
@@ -523,13 +501,12 @@ <h2 class="title is-4">We release The PEP 8 song</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red">
-          <span class="icon is-large">
-            <i class="fa fa-snowflake"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-red">
+            <span class="icon is-large">
+              <i class="fa fa-snowflake"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">December 1st - 25th, 2020</span>
         </div>
 
@@ -547,13 +524,12 @@ <h2 class="title is-4">Advent of Code attracts hundreds of participants</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange">
-          <span class="icon is-large">
-            <i class="fa fa-wrench"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-orange">
+            <span class="icon is-large">
+              <i class="fa fa-wrench"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Nov 29th, 2020</span>
         </div>
 
@@ -568,13 +544,12 @@ <h2 class="title is-4">We migrate all our infrastructure to Kubernetes</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Oct 22nd, 2020</span>
         </div>
 
@@ -588,11 +563,10 @@ <h2 class="title is-4">Python Discord hits 100,000 members!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+          </div>
           <span class="cd-timeline__date">Oct 21st, 2020</span>
         </div>
 
@@ -608,13 +582,12 @@ <h2 class="title is-4">Python Discord hosts the 2020 CPython Core Developer Q&A<
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink">
-          <span class="icon is-large">
-            <i class="fa fa-handshake"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-pink">
+            <span class="icon is-large">
+              <i class="fa fa-handshake"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Aug 16th, 2020</span>
         </div>
 
@@ -628,13 +601,12 @@ <h2 class="title is-4">Python Discord is now the new home of the PyWeek event!</
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue">
-          <span class="icon is-large">
-            <i class="fa fa-dice"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-blue">
+            <span class="icon is-large">
+              <i class="fa fa-dice"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jul 31st, 2020</span>
         </div>
 
@@ -654,13 +626,12 @@ <h2 class="title is-4">PyDis summer code jam 2020 with the theme “Early Intern
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-red">
-          <span class="icon is-large">
-            <i class="fa fa-chart-bar"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-red">
+            <span class="icon is-large">
+              <i class="fa fa-chart-bar"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jun 4th, 2020</span>
         </div>
 
@@ -674,13 +645,12 @@ <h2 class="title is-4">Python Discord Public Statistics are now live</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink">
-          <span class="icon is-large">
-            <i class="fa fa-handshake"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-pink">
+            <span class="icon is-large">
+              <i class="fa fa-handshake"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">May 28th, 2020</span>
         </div>
 
@@ -694,13 +664,12 @@ <h2 class="title is-4">Python Discord is now listed on python.org/community</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green">
-          <span class="icon is-large">
-            <i class="fa fa-comments"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-green">
+            <span class="icon is-large">
+              <i class="fa fa-comments"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">May 25th, 2020</span>
         </div>
 
@@ -714,13 +683,12 @@ <h2 class="title is-4">ModMail is now live</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-purple">
-          <span class="icon is-large">
-            <i class="fa fa-gamepad"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-purple">
+            <span class="icon is-large">
+              <i class="fa fa-gamepad"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Apr 17th, 2020</span>
         </div>
 
@@ -740,13 +708,12 @@ <h2 class="title is-4">PyDis Game Jam 2020 with the “Three of a Kind” theme
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Apr 14, 2020</span>
         </div>
 
@@ -759,13 +726,12 @@ <h2 class="title is-4">Python Discord hits 40,000 members, and is now bigger tha
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-green">
-          <span class="icon is-large">
-            <i class="fa fa-comments"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-green">
+            <span class="icon is-large">
+              <i class="fa fa-comments"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Apr 5th, 2020</span>
         </div>
 
@@ -780,13 +746,12 @@ <h2 class="title is-4">The new help channel system is live</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue">
-          <span class="icon is-large">
-            <i class="fa fa-dice"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-blue">
+            <span class="icon is-large">
+              <i class="fa fa-dice"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jan 17, 2020</span>
         </div>
 
@@ -806,13 +771,12 @@ <h2 class="title is-4">PyDis sixth code jam with the theme “Ancient technology
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Dec 22nd, 2019</span>
         </div>
 
@@ -825,11 +789,10 @@ <h2 class="title is-4">PyDis hits 30,000 members</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src={% static "images/timeline/cd-icon-pydis.svg" %} alt="Logo">
+          </div>
           <span class="cd-timeline__date">Sept 22nd, 2019</span>
         </div>
 
@@ -842,13 +805,12 @@ <h2 class="title is-4">Sebastiaan Zeef becomes an owner</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-lime">
-          <span class="icon is-large">
-            <i class="fa fa-scroll"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-lime">
+            <span class="icon is-large">
+              <i class="fa fa-scroll"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Oct 26th, 2019</span>
         </div>
 
@@ -862,13 +824,12 @@ <h2 class="title is-4">The code of conduct is created</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange">
-          <span class="icon is-large">
-            <i class="fa fa-code"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-orange">
+            <span class="icon is-large">
+              <i class="fa fa-code"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Sep 15, 2019</span>
         </div>
 
@@ -882,13 +843,12 @@ <h2 class="title is-4">The Django rewrite of pythondiscord.com is now live!</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Apr 8th, 2019</span>
         </div>
 
@@ -904,13 +864,12 @@ <h2 class="title is-4">PyDis hits 15,000 members; the “hot ones special” vid
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-orange">
-          <span class="icon is-large">
-            <i class="fa fa-code"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-orange">
+            <span class="icon is-large">
+              <i class="fa fa-code"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Dec 19th, 2018</span>
         </div>
 
@@ -925,13 +884,12 @@ <h2 class="title is-4">django-simple-bulma is released on PyPi</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Nov 24th, 2018</span>
         </div>
 
@@ -944,13 +902,12 @@ <h2 class="title is-4">PyDis hits 10,000 members</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue">
-          <span class="icon is-large">
-            <i class="fa fa-dice"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-blue">
+            <span class="icon is-large">
+              <i class="fa fa-dice"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Oct 1st, 2018</span>
         </div>
 
@@ -965,13 +922,12 @@ <h2 class="title is-4">First Hacktoberfest PyDis event; @Sir Lancebot is created
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink">
-          <span class="icon is-large">
-            <i class="fa fa-handshake"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-pink">
+            <span class="icon is-large">
+              <i class="fa fa-handshake"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jul 10th, 2018</span>
         </div>
 
@@ -985,13 +941,12 @@ <h2 class="title is-4">PyDis is now partnered with Discord; the vanity URL disco
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jun 20th, 2018</span>
         </div>
 
@@ -1005,13 +960,12 @@ <h2 class="title is-4">PyDis hits 5,000 members and partners with r/Python</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-pink">
-          <span class="icon is-large">
-            <i class="fa fa-handshake"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-pink">
+            <span class="icon is-large">
+              <i class="fa fa-handshake"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Jun 9th, 2018</span>
         </div>
 
@@ -1027,13 +981,12 @@ <h2 class="title is-4">Do You Even Python and PyDis merger</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-lime">
-          <span class="icon is-large">
-            <i class="fa fa-scroll"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-lime">
+            <span class="icon is-large">
+              <i class="fa fa-scroll"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">May 21st, 2018</span>
         </div>
 
@@ -1049,13 +1002,12 @@ <h2 class="title is-4">The privacy policy is created</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-blue">
-          <span class="icon is-large">
-            <i class="fa fa-dice"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-blue">
+            <span class="icon is-large">
+              <i class="fa fa-dice"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Mar 23rd, 2018</span>
         </div>
 
@@ -1071,13 +1023,12 @@ <h2 class="title is-4">First code jam with the theme “snakes”</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Mar 4th, 2018</span>
         </div>
 
@@ -1092,31 +1043,29 @@ <h2 class="title is-4">PyDis hits 2,000 members; pythondiscord.com and @Python a
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src={% static "images/timeline/cd-icon-pydis.svg" %} alt="Logo">
+          </div>
           <span class="cd-timeline__date">Feb 3rd, 2018</span>
         </div>
 
             <div class="cd-timeline__content box">
                 <h2 class="title is-4">Our logo is born. Thanks @Aperture!</h2>
-                <p class="pydis-logo-banner has-background-primary"><img
-                        src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
+                <p style="background-color: #7289DA; border-radius: 10px;">
+                  <img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
                 </p>
 
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-          <span class="icon is-large">
-            <i class="fa fa-users"></i>
-          </span>
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
+            <span class="icon is-large">
+              <i class="fa fa-users"></i>
+            </span>
+          </div>
           <span class="cd-timeline__date">Nov 10th, 2017</span>
         </div>
 
@@ -1130,11 +1079,10 @@ <h2 class="title is-4">Python Discord hits 1,000 members</h2>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img has-background-primary image">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
-        </div>
-
-        <div class="is-flex is-justify-content-space-between">
+        <div class="icon-date">
+          <div class="cd-timeline__img has-background-primary image">
+            <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+          </div>
           <span class="cd-timeline__date">Jan 8th, 2017</span>
         </div>
 

From 41f9fe4748b2636d9a3ad0b369d4b2bd917f6d09 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 21 Mar 2024 09:54:01 +0800
Subject: [PATCH 14/17] Use semantic class names in the timeline consistent
 with Bulma

Also turns out I was using the Bulma .content class wrong this whole
time. We just need to slap that class onto a div and anything inside can
be the output of, say a markdown -> HTML converter!

Fix messy spacing and extraneous whitespace in the HTML as well.

Special thanks to Vim macros.
---
 pydis_site/static/css/home/timeline.css |  64 +-
 pydis_site/static/js/timeline/main.js   |  68 +-
 pydis_site/templates/home/timeline.html | 965 +++++++++++-------------
 3 files changed, 489 insertions(+), 608 deletions(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 04cc98bce..3e2847681 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -58,19 +58,19 @@
 }
 
 /* Containers */
-.cd-timeline {
+.timeline {
     overflow: hidden;
     padding: 3rem 0;
     background-color: var(--background-color);
 }
 
-.cd-timeline__container {
+.timeline .container {
     position: relative;
     padding: 1rem var(--side-spacing);
 }
 
 /* The line that goes through all the icons */
-.cd-timeline__container::before {
+.timeline .container::before {
     content: '';
     position: absolute;
 
@@ -81,40 +81,40 @@
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__container::before {
+    .timeline .container::before {
         left: calc(50% - var(--timeline-line-half-width));
     }
 }
 
 @media (max-width: 1023px) {
-    .cd-timeline__container::before {
+    .timeline .container::before {
         margin-left: calc(var(--icon-half-width) - var(--timeline-line-half-width));
     }
 }
 
 /* Each timeline item */
-.cd-timeline__block {
+.timeline-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 2.5rem;
 }
 
 /* Visual container of the timeline item */
-.cd-timeline__content.box {
+.timeline-content.box {
     box-shadow: var(--accent) 0px 3px 0px 0px;
     background-color: var(--content-background-color);
     flex-grow: 1;
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__block:nth-child(odd) {
+    .timeline-item:nth-child(odd) {
         flex-direction: row-reverse;
     }
     /* On desktop, the content boxes are anchored with respect to the vertical
      * center of the screen, set using `left`/`right` properties depending on
-     * even and odd children of cd-timeline__block items.
+     * even and odd children of timeline items.
      * */
-    .cd-timeline__content.box  {
+    .timeline-content.box  {
         width: 45%;
         flex-grow: 0;
 
@@ -125,7 +125,7 @@
         left: var(--content-position);
         margin-left: var(--icon-side-spacing);
     }
-    .cd-timeline__block:nth-child(odd) .cd-timeline__content.box {
+    .timeline-item:nth-child(odd) .timeline-content.box {
         left: unset;
         right: var(--content-position);
         margin-right: var(--icon-side-spacing);
@@ -133,12 +133,12 @@
 }
 
 @media (max-width: 1023px) {
-    .cd-timeline__content.box {
+    .timeline-content.box {
         margin-left: var(--icon-side-spacing);
     }
 }
 @media (max-width: 600px) {
-    .cd-timeline__content.box {
+    .timeline-content.box {
         margin-left: var(--icon-side-spacing);
     }
 }
@@ -149,14 +149,14 @@
  * the icon, and reverse their ordering for alternate timeline items on
  * desktop.
  * */
-.icon-date {
+.timeline-icon-date {
     z-index: 4;
     display: flex;
     align-items: baseline;
 }
 
 @media (min-width: 1023px) {
-    .icon-date {
+    .timeline-icon-date {
         order: 1;
 
         /* Arbitrary container width to prevent wrapping of the date text */
@@ -168,7 +168,7 @@
         left: calc(50% - var(--icon-half-width));
     }
 
-    .cd-timeline__block:nth-child(even) .icon-date {
+    .timeline-item:nth-child(even) .timeline-icon-date {
         flex-direction: row-reverse;
         left: unset;
         right: calc(50% - var(--icon-half-width));
@@ -176,7 +176,7 @@
 }
 
 /* Icon */
-.cd-timeline__img {
+.timeline-icon {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -200,13 +200,13 @@
 }
 
 /* Icons that use a custom image */
-.cd-timeline__img img {
+.timeline-icon img {
     width: var(--icon-image-width);
     height: var(--icon-image-width);
 }
 
 /* Icons that use the pydis logo */
-.cd-timeline__img img.pydis {
+.timeline-icon img.pydis {
     /* 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.
@@ -217,13 +217,13 @@
     margin-left: 1px;
 }
 
-.cd-timeline__date {
+.timeline-date {
     font-size: .9rem;
     color: var(--date-color);
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__block:nth-child(even) .cd-timeline__date {
+    .timeline-item:nth-child(even) .timeline-date {
         left: auto;
         right: 50%;
         text-align: right;
@@ -231,7 +231,7 @@
 }
 
 @media (max-width: 1023px) {
-    .cd-timeline__date {
+    .timeline-date {
         position: absolute;
         /* 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
@@ -247,7 +247,7 @@
         margin-top: .75rem;
     }
 
-    .cd-timeline__content.box .title {
+    .timeline-content.content h3 {
         /* Make space for the date text */
         margin-top: 1.25rem;
     }
@@ -307,25 +307,25 @@ img, video, svg {
 
 /* Bounce-in and bounce-out animations, desktop-only */
 @media (min-width: 1023px) {
-    .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden {
+    .timeline-icon--hidden, .timeline-content--hidden, .timeline-date--hidden {
         visibility: hidden;
     }
-    .cd-timeline__img--bounce-in {
+    .timeline-icon--bounce-in {
         animation: icon-bounce 0.6s;
     }
-    .cd-timeline__content--bounce-in,
-    .cd-timeline__date--bounce-in {
+    .timeline-content--bounce-in,
+    .timeline-date--bounce-in {
         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 {
+    .timeline-item:nth-child(even) .timeline-content--bounce-in,
+    .timeline-item:nth-child(even) .timeline-date--bounce-in {
         animation-name: item-bounce-right;
     }
-    .cd-timeline__img--bounce-out {
+    .timeline-icon--bounce-out {
         animation: icon-bounce-out 0.6s;
     }
-    .cd-timeline__content--bounce-out,
-    .cd-timeline__date--bounce-out {
+    .timeline-content--bounce-out,
+    .timeline-date--bounce-out {
         animation: item-bounce-out 0.6s;
     }
 }
diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js
index 67a50d43e..df0ef5856 100644
--- a/pydis_site/static/js/timeline/main.js
+++ b/pydis_site/static/js/timeline/main.js
@@ -2,10 +2,10 @@
   // Vertical Timeline - by CodyHouse.co (modified)
 	function VerticalTimeline( element ) {
 		this.element = element;
-		this.blocks = this.element.getElementsByClassName("cd-timeline__block");
-		this.images = this.element.getElementsByClassName("cd-timeline__img");
-		this.contents = this.element.getElementsByClassName("cd-timeline__content");
-		this.dates = this.element.getElementsByClassName("cd-timeline__date");
+		this.blocks = this.element.getElementsByClassName("timeline-item");
+		this.images = this.element.getElementsByClassName("timeline-icon");
+		this.contents = this.element.getElementsByClassName("timeline-content");
+		this.dates = this.element.getElementsByClassName("timeline-date");
 		this.offset = 0.8;
 		this.hideBlocks();
 	};
@@ -19,9 +19,9 @@
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
 				if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
-					self.images[i].classList.add("cd-timeline__img--hidden");
-					self.contents[i].classList.add("cd-timeline__content--hidden");
-					self.dates[i].classList.add("cd-timeline__date--hidden");
+					self.images[i].classList.add("timeline-icon--hidden");
+					self.contents[i].classList.add("timeline-content--hidden");
+					self.dates[i].classList.add("timeline-date--hidden");
 				}
 			})(i);
 		}
@@ -34,17 +34,17 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if((self.contents[i].classList.contains("cd-timeline__content--hidden") || self.contents[i].classList.contains("cd-timeline__content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
+				if((self.contents[i].classList.contains("timeline-content--hidden") || self.contents[i].classList.contains("timeline-content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
 					// add bounce-in animation
-					self.images[i].classList.add("cd-timeline__img--bounce-in");
-					self.contents[i].classList.add("cd-timeline__content--bounce-in");
-					self.dates[i].classList.add("cd-timeline__date--bounce-in");
-					self.images[i].classList.remove("cd-timeline__img--hidden");
-					self.contents[i].classList.remove("cd-timeline__content--hidden");
-					self.dates[i].classList.remove("cd-timeline__date--hidden");
-					self.images[i].classList.remove("cd-timeline__img--bounce-out");
-					self.contents[i].classList.remove("cd-timeline__content--bounce-out");
-					self.dates[i].classList.remove("cd-timeline__date--bounce-out");
+					self.images[i].classList.add("timeline-icon--bounce-in");
+					self.contents[i].classList.add("timeline-content--bounce-in");
+					self.dates[i].classList.add("timeline-date--bounce-in");
+					self.images[i].classList.remove("timeline-icon--hidden");
+					self.contents[i].classList.remove("timeline-content--hidden");
+					self.dates[i].classList.remove("timeline-date--hidden");
+					self.images[i].classList.remove("timeline-icon--bounce-out");
+					self.contents[i].classList.remove("timeline-content--bounce-out");
+					self.dates[i].classList.remove("timeline-date--bounce-out");
 				}
 			})(i);
 		}
@@ -57,19 +57,19 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if(self.contents[i].classList.contains("cd-timeline__content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
-					self.images[i].classList.remove("cd-timeline__img--bounce-in");
-					self.contents[i].classList.remove("cd-timeline__content--bounce-in");
-					self.dates[i].classList.remove("cd-timeline__date--bounce-in");
-					self.images[i].classList.add("cd-timeline__img--bounce-out");
-					self.contents[i].classList.add("cd-timeline__content--bounce-out");
-					self.dates[i].classList.add("cd-timeline__date--bounce-out");
+				if(self.contents[i].classList.contains("timeline-content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
+					self.images[i].classList.remove("timeline-icon--bounce-in");
+					self.contents[i].classList.remove("timeline-content--bounce-in");
+					self.dates[i].classList.remove("timeline-date--bounce-in");
+					self.images[i].classList.add("timeline-icon--bounce-out");
+					self.contents[i].classList.add("timeline-content--bounce-out");
+					self.dates[i].classList.add("timeline-date--bounce-out");
 				}
 			})(i);
 		}
 	}
 
-	var verticalTimelines = document.getElementsByClassName("js-cd-timeline"),
+	var verticalTimelines = document.getElementsByClassName("timeline"),
 		verticalTimelinesArray = [],
 		scrolling = false;
 	if( verticalTimelines.length > 0 ) {
@@ -88,15 +88,15 @@
 		});
 
 		function animationEnd(event) {
-			if (event.target.classList.contains("cd-timeline__img--bounce-out")) {
-				event.target.classList.add("cd-timeline__img--hidden");
-				event.target.classList.remove("cd-timeline__img--bounce-out");
-			} else if (event.target.classList.contains("cd-timeline__content--bounce-out")) {
-				event.target.classList.add("cd-timeline__content--hidden");
-				event.target.classList.remove("cd-timeline__content--bounce-out");
-			} else if (event.target.classList.contains("cd-timeline__date--bounce-out")) {
-				event.target.classList.add("cd-timeline__date--hidden");
-				event.target.classList.remove("cd-timeline__date--bounce-out");
+			if (event.target.classList.contains("timeline-icon--bounce-out")) {
+				event.target.classList.add("timeline-icon--hidden");
+				event.target.classList.remove("timeline-icon--bounce-out");
+			} else if (event.target.classList.contains("timeline-content--bounce-out")) {
+				event.target.classList.add("timeline-content--hidden");
+				event.target.classList.remove("timeline-content--bounce-out");
+			} else if (event.target.classList.contains("timeline-date--bounce-out")) {
+				event.target.classList.add("timeline-date--hidden");
+				event.target.classList.remove("timeline-date--bounce-out");
 			}
 		}
 
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index a62c8570d..eb8bfa475 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -9,22 +9,19 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
-  <section class="cd-timeline js-cd-timeline">
-    <div class="cd-timeline__container container">
-
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-pink">
-            <span class="icon">
-              <i class="fa fa-comments"></i>
-            </span>
+  <section class="timeline">
+    <div class="container">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-pink">
+            <span class="icon"><i class="fa fa-comments"></i></span>
           </div>
-          <span class="cd-timeline__date">Jul 11th, 2023</span>
+          <span class="timeline-date">Jul 11th, 2023</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Switch to new paste service</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Switch to new paste service</h3>
+          <p>
             We migrate over to <a href="https://github.com/supakeen/pinnwand">pinnwand</a>
             as the service that powers our paste bin over at
             <a href="https://paste.pythondiscord.com">https://paste.pythondiscord.com/</a>.
@@ -35,17 +32,17 @@ <h2 class="title is-4">Switch to new paste service</h2>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
           </div>
-          <span class="cd-timeline__date">Jan 30th, 2023</span>
+          <span class="timeline-date">Jan 30th, 2023</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Retirement of Joe and Sebastiaan</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Retirement of Joe and Sebastiaan</h3>
+          <p>
             Having been at the helm of Python Discord for over 5 and 3 years respectively, Joe and
             Sebastiaan retire and step down. They gain the @Founders role and continue as advisors
             to the @Directors, the new name of the original @Owners role.
@@ -55,19 +52,17 @@ <h2 class="title is-4">Retirement of Joe and Sebastiaan</h2>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-pink">
-            <span class="icon is-large">
-              <i class="fa fa-comments"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-pink">
+            <span class="icon"><i class="fa fa-comments"></i></span>
           </div>
-          <span class="cd-timeline__date">Nov 25th, 2022</span>
+          <span class="timeline-date">Nov 25th, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Switch to forum-based help system</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Switch to forum-based help system</h3>
+          <p>
             We migrate our help system to use a forum channel, retiring our home-grown rotating help
             system after 3 years of service and nearly 500,000 help sessions. Forum channels offer
             a better experience as members can create their own dedicated thread in a discoverable place.
@@ -75,17 +70,17 @@ <h2 class="title is-4">Switch to forum-based help system</h2>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
           </div>
-          <span class="cd-timeline__date">Oct 24th, 2022</span>
+          <span class="timeline-date">Oct 24th, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python 3.11 Release Stream</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Python 3.11 Release Stream</h3>
+          <p>
             With the Python 3.10 Release Stream being such a success, we brought it back for the
             release of Python 3.11. Hosted by Leon, and CPython 3.11 Release Manager, Pablo Galindo,
             they were joined by other CPython Core Developers. Together, they discuss the specific
@@ -97,23 +92,20 @@ <h2 class="title is-4">Python 3.11 Release Stream</h2>
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-lime">
-            <span class="icon is-large">
-              <i class="fa fa-dice"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-lime">
+            <span class="icon"><i class="fa fa-dice"></i></span>
           </div>
-          <span class="cd-timeline__date">July 21st, 2022</span>
+          <span class="timeline-date">July 21st, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Summer Code Jam 2022 (CJ9)</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Summer Code Jam 3033 (CJ9)</h3>
+          <p>
             We host the 9th Code Jam. This year, teams had to use <b>websockets</b> to create a
             project based on the theme, <b>It's not a bug, it's a feature</b>. In all, 24 teams
             submitted their projects. At the end, we held a livestream demoing the top 10 projects
@@ -125,59 +117,54 @@ <h2 class="title is-4">Summer Code Jam 2022 (CJ9)</h2>
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div style="background-color: grey;" class="timeline-icon has-background-primary">
             <i class="fa fa-handshake"></i>
           </div>
-          <span class="cd-timeline__date">May 19th, 2022</span>
+          <span class="timeline-date">May 19th, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Partnership with pyqtgraph</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Partnership with pyqtgraph</h3>
+          <p>
             The <code>#pyqtgraph</code> channel is created for the Scientific Graphics and GUI
             library pyqtgraph, joining <code>#black-formatter</code>.
           </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-blue">
-            <span class="icon is-large">
-              <i class="fa fa-robot"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-blue">
+            <span class="icon"><i class="fa fa-robot"></i></span>
           </div>
-          <span class="cd-timeline__date">Feb 21st, 2022</span>
+          <span class="timeline-date">Feb 21st, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Addition of @Sir Robin</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Addition of @Sir Robin</h3>
+          <p>
             Our arsenal of bots grows! We add @Sir Robin to power and manage all of our future
             events and to support the Events Team.
           </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-green">
-            <span class="icon is-large">
-              <i class="fa fa-question"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-green">
+            <span class="icon"><i class="fa fa-question"></i></span>
           </div>
-          <span class="cd-timeline__date">Feb 12th, 2022</span>
+          <span class="timeline-date">Feb 12th, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Trivia Night</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Trivia Night</h3>
+          <p>
             How well do you know Python inside out? Members got to find out in a Trivia Night event.
             Contestants were given questions about Python's internals, its development, and more.
             To win, contestants had to get the most questions right while being fast to answer.
@@ -185,17 +172,17 @@ <h2 class="title is-4">Trivia Night</h2>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
           </div>
-          <span class="cd-timeline__date">Feb 9th, 2022</span>
+          <span class="timeline-date">Feb 9th, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Creation of Events Team</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Creation of Events Team</h3>
+          <p>
             We form the Events Team to organise and run future events. Led by Kat and comprised by
             staff members, the goal of the team is to ultimately host more events in a more
             sustainable way.
@@ -204,19 +191,17 @@ <h2 class="title is-4">Creation of Events Team</h2>
       </div>
 
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-red">
-            <span class="icon is-large">
-              <i class="fa fa-code"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-red">
+            <span class="icon"><i class="fa fa-code"></i></span>
           </div>
-          <span class="cd-timeline__date">Feb 2nd, 2022</span>
+          <span class="timeline-date">Feb 2nd, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Deployment of Smarter Resources</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Deployment of Smarter Resources</h3>
+          <p>
             We gave our resources pages some much needed love and
             <a href="https://www.pythondiscord.com/resources/">
               reorganised them into a single page</a>,
@@ -226,36 +211,34 @@ <h2 class="title is-4">Deployment of Smarter Resources</h2>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Jan 19, 2022</span>
+          <span class="timeline-date">Jan 19, 2022</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">We hit 300 000 members!</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>We hit 300 000 members!</h3>
+          <p>
             Thanks to an increasing growth rate, Python Discord's membership count doubled from
             150,000 to 300,000 in less than a year!
           </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
           </div>
-          <span class="cd-timeline__date">Oct 4th, 2021</span>
+          <span class="timeline-date">Oct 4th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">We host the Python 3.10 Release Stream</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>We host the Python 3.10 Release Stream</h3>
+          <p>
             Leon and Pablo Galindo, CPython Core Developer and Release Manager, host the Python 3.10
             Release Stream, joined by other core devs Carol Willing, Irit Katriel, Łukasz Langa, and
             Brandt Bucher. They talked in-depth about the new features introduced in 3.10, the
@@ -267,21 +250,20 @@ <h2 class="title is-4">We host the Python 3.10 Release Stream</h2>
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div style="background-color: grey;" class="cd-timeline__img has-background-primary">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div style="background-color: grey;" class="timeline-icon has-background-primary">
             <i class="fa fa-handshake"></i>
           </div>
-          <span class="cd-timeline__date">May 24th, 2021</span>
+          <span class="timeline-date">May 24th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Partnership with Black</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Partnership with Black</h3>
+          <p>
             We partner with the uncompromising code formatter project, Black, who were looking for a
             new home for their real-time chat. Python Discord ended up being that home, resulting in
             the creation of the <code>#black-formatter</code> channel.
@@ -289,19 +271,17 @@ <h2 class="title is-4">Partnership with Black</h2>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-orange">
-            <span class="icon is-large">
-              <i class="fa fa-dice"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-orange">
+            <span class="icon"><i class="fa fa-dice"></i></span>
           </div>
-          <span class="cd-timeline__date">July 9, 2021</span>
+          <span class="timeline-date">July 9, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Summer Code Jam 2021 (CJ8)</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Summer Code Jam 3031 (CJ8)</h3>
+          <p>
             We host the 8th now-annual Code Jam. Teams had to create a program with an text-based user
             interface (TUI), all designed around the theme of “think inside the box.” Ultimately, 51
             teams submitted projects.
@@ -309,69 +289,62 @@ <h2 class="title is-4">Summer Code Jam 2021 (CJ8)</h2>
               The winning submissions are listed on our website.
             </a>
           </p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-purple">
-            <span class="icon is-large">
-              <i class="fa fa-palette"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-purple">
+            <span class="icon"><i class="fa fa-palette"></i></span>
           </div>
-          <span class="cd-timeline__date">May 24, 2021</span>
+          <span class="timeline-date">May 24, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Inaugural run of Pixels</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Inaugural run of Pixels</h3>
+          <p>
             Inspired by the subreddit, r/place, Pixels was our collaborative canvas event held
             between May 25 to June 14, providing a beginner-friendly API to paint pixels on a
             virtual canvas.
           </p>
-          <p class="content">
+          <p>
             Later, we released <a href="https://blog.pythondiscord.com/pixels-summer-2021/">a blog post</a>
             summarizing what happened, our motives, and some stories from during development.
           </p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
           </div>
-          <span class="cd-timeline__date">April 23, 2021</span>
+          <span class="timeline-date">April 23, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Owners become PSF Fellows</h2>
-          <p class="content">Joe, Leon, and Sebastiaan
+        <div class="timeline-content content box">
+          <h3>Owners become PSF Fellows</h3>
+          <p>Joe, Leon, and Sebastiaan
             <a href="https://pyfound.blogspot.com/2021/04/python-software-foundation-fellow.html">
               are recognized as Python Software Foundation Fellows
             </a>
             for their substantial contributions to the Python ecosystem by fostering
             Python Discord.
           </p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-red">
-            <span class="icon is-large">
-              <i class="fab fa-youtube"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-red">
+            <span class="icon"><i class="fab fa-youtube"></i></span>
           </div>
-          <span class="cd-timeline__date">Mar 21st, 2021</span>
+          <span class="timeline-date">Mar 21st, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Summer Code Jam 2020 Highlights</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Summer Code Jam 3030 Highlights</h3>
+          <p>
             We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020.
             Better late than never!
           </p>
@@ -381,23 +354,20 @@ <h2 class="title is-4">Summer Code Jam 2020 Highlights</h2>
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-purple">
-            <span class="icon is-large">
-              <i class="fa fa-comment"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-purple">
+            <span class="icon"><i class="fa fa-comment"></i></span>
           </div>
-          <span class="cd-timeline__date">Mar 13th, 2021</span>
+          <span class="timeline-date">Mar 13th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">New feature: Weekly discussion channel</h2>
-          <p class="content">Every week (or two weeks), we'll be posting a new topic to discuss in a
+        <div class="timeline-content content box">
+          <h3>New feature: Weekly discussion channel</h3>
+          <p>Every week (or two weeks), we'll be posting a new topic to discuss in a
             channel called <b>#weekly-topic-discussion</b>. Our inaugural topic is a PyCon talk by Anthony Shaw called
             <b>Wily Python: Writing simpler and more maintainable Python.</b></a>.
           </p>
@@ -407,47 +377,40 @@ <h2 class="title is-4">New feature: Weekly discussion channel</h2>
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-pink">
-            <span class="icon is-large">
-              <i class="fa fa-microphone"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-pink">
+            <span class="icon"><i class="fa fa-microphone"></i></span>
           </div>
-          <span class="cd-timeline__date">Mar 13th, 2021</span>
+          <span class="timeline-date">Mar 13th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">We're on the Teaching Python podcast!</h2>
-          <p class="content">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
+        <div class="timeline-content content box">
+          <h3>We're on the Teaching Python podcast!</h3>
+          <p>Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
             changed the way we learn, and what role communities like Python Discord can play in this new world.
             You can find the episode <a href="https://www.teachingpython.fm/63">at teachingpython.fm</a>.
           </p>
 
           <iframe width="100%" height="166" frameborder="0" scrolling="no"
-                src="https://player.fireside.fm/v2/UIYXtbeL+qOjGAsKi?theme=dark"
-          ></iframe>
-
+                src="https://player.fireside.fm/v2/UIYXtbeL+qOjGAsKi?theme=dark"></iframe>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-green">
-            <span class="icon is-large">
-              <i class="fa fa-microphone"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-green">
+            <span class="icon"><i class="fa fa-microphone"></i></span>
           </div>
-          <span class="cd-timeline__date">Mar 1st, 2021</span>
+          <span class="timeline-date">Mar 1st, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Leon Sandøy appears on Talk Python To Me</h2>
-          <p class="content">Leon goes on the Talk Python to Me podcast with Michael Kennedy
+        <div class="timeline-content content box">
+          <h3>Leon Sandøy appears on Talk Python To Me</h3>
+          <p>Leon goes on the Talk Python to Me podcast with Michael Kennedy
             to discuss the history of Python Discord, the critical importance of culture, and how to run a massive
             community. You can find the episode <a href="https://talkpython.fm/episodes/show/305/python-community-at-python-discord"> at talkpython.fm</a>.
           </p>
@@ -455,40 +418,35 @@ <h2 class="title is-4">Leon Sandøy appears on Talk Python To Me</h2>
           <iframe width="100%" height="166" scrolling="no" frameborder="no"
                src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/996083146&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false">
           </iframe>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Feb 18th, 2021</span>
+          <span class="timeline-date">Feb 18th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">We now have 150,000 members!</h2>
-          <p class="content">Our growth continues to accelerate.</p>
+        <div class="timeline-content content box">
+          <h3>We now have 150,000 members!</h3>
+          <p>Our growth continues to accelerate.</p>
 
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-blue">
-            <span class="icon is-large">
-              <i class="fa fa-music"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-blue">
+            <span class="icon"><i class="fa fa-music"></i></span>
           </div>
-          <span class="cd-timeline__date">February 8th, 2021</span>
+          <span class="timeline-date">February 8th, 2021</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">We release The PEP 8 song</h2>
-          <p class="content">We release the PEP 8 song on our YouTube channel, which finds tens of
+        <div class="timeline-content content box">
+          <h3>We release The PEP 8 song</h3>
+          <p>We release the PEP 8 song on our YouTube channel, which finds tens of
             thousands of listeners!</p>
 
           <div class="force-aspect-container">
@@ -496,82 +454,71 @@ <h2 class="title is-4">We release The PEP 8 song</h2>
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-red">
-            <span class="icon is-large">
-              <i class="fa fa-snowflake"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-red">
+            <span class="icon"><i class="fa fa-snowflake"></i></span>
           </div>
-          <span class="cd-timeline__date">December 1st - 25th, 2020</span>
+          <span class="timeline-date">December 1st - 25th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Advent of Code attracts hundreds of participants</h2>
-          <p class="content">
+        <div class="timeline-content content box">
+          <h3>Advent of Code attracts hundreds of participants</h3>
+          <p>
             A total of 443 Python Discord members sign up to be part of
             <a href="https://adventofcode.com/">Eric Wastl's excellent Advent of Code event</a>.
             As always, we provide dedicated announcements, scoreboards, bot commands and channels for our members
             to enjoy the event in.
-
           </p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-orange">
-            <span class="icon is-large">
-              <i class="fa fa-wrench"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-orange">
+            <span class="icon"><i class="fa fa-wrench"></i></span>
           </div>
-          <span class="cd-timeline__date">Nov 29th, 2020</span>
+          <span class="timeline-date">Nov 29th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">We migrate all our infrastructure to Kubernetes</h2>
-          <p class="content">As our tech stack grows, we decide to migrate all our services over to a
+        <div class="timeline-content content box">
+          <h3>We migrate all our infrastructure to Kubernetes</h3>
+          <p>As our tech stack grows, we decide to migrate all our services over to a
             container orchestration paradigm via Kubernetes. This gives us better control and scalability.
             <b>Joe Banks</b> takes on the role as DevOps Lead.
           </p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Oct 22nd, 2020</span>
+          <span class="timeline-date">Oct 22nd, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python Discord hits 100,000 members!</h2>
-          <p class="content">Only six months after hitting 40,000 users, we hit 100,000 users. A
-            monumental milestone,
-            and one we're very proud of. To commemorate it, we create this timeline.</p>
-
+        <div class="timeline-content content box">
+          <h3>Python Discord hits 100,000 members!</h3>
+          <p>Only six months after hitting 40,000 users, we hit 100,000 users. A
+            monumental milestone, and one we're very proud of. To commemorate
+            it, we create this timeline.</p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
           </div>
-          <span class="cd-timeline__date">Oct 21st, 2020</span>
+          <span class="timeline-date">Oct 21st, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
+        <div class="timeline-content content box">
+          <h3>Python Discord hosts the 3030 CPython Core Developer Q&A</h3>
           <div class="force-aspect-container">
             <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -581,38 +528,33 @@ <h2 class="title is-4">Python Discord hosts the 2020 CPython Core Developer Q&A<
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-pink">
-            <span class="icon is-large">
-              <i class="fa fa-handshake"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-pink">
+            <span class="icon"><i class="fa fa-handshake"></i></span>
           </div>
-          <span class="cd-timeline__date">Aug 16th, 2020</span>
+          <span class="timeline-date">Aug 16th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python Discord is now the new home of the PyWeek event!</h2>
-          <p class="content">PyWeek, a game jam that has been running since 2005, joins Python
-            Discord as one of our official events. Find more information about PyWeek on <a
-                href="https://pyweek.org/">their official website</a>.</p>
-
+        <div class="timeline-content content box">
+          <h3>Python Discord is now the new home of the PyWeek event!</h3>
+          <p>PyWeek, a game jam that has been running since 2005, joins Python
+            Discord as one of our official events. Find more information about PyWeek on
+            <a href="https://pyweek.org/">their official website</a>.</p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-blue">
-            <span class="icon is-large">
-              <i class="fa fa-dice"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-blue">
+            <span class="icon"><i class="fa fa-dice"></i></span>
           </div>
-          <span class="cd-timeline__date">Jul 31st, 2020</span>
+          <span class="timeline-date">Jul 31st, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
-          <p class="content">Sponsored by the Django Software Foundation and JetBrains, the Summer
+        <div class="timeline-content content box">
+          <h3>PyDis summer code jam 3030 with the theme “Early Internet” and Django as the technology</h3>
+          <p>Sponsored by the Django Software Foundation and JetBrains, the Summer
             Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
             projects. Check them out in our judge stream below:</p>
 
@@ -621,80 +563,71 @@ <h2 class="title is-4">PyDis summer code jam 2020 with the theme “Early Intern
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-red">
-            <span class="icon is-large">
-              <i class="fa fa-chart-bar"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-red">
+            <span class="icon"><i class="fa fa-chart-bar"></i></span>
           </div>
-          <span class="cd-timeline__date">Jun 4th, 2020</span>
+          <span class="timeline-date">Jun 4th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python Discord Public Statistics are now live</h2>
-          <p class="content">After getting numerous requests to publish beautiful data on member
+        <div class="timeline-content content box">
+          <h3>Python Discord Public Statistics are now live</h3>
+          <p>After getting numerous requests to publish beautiful data on member
             count and channel use, we create <a href="https://stats.pythondiscord.com/">stats.pythondiscord.com</a> for
             all to enjoy.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-pink">
-            <span class="icon is-large">
-              <i class="fa fa-handshake"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-pink">
+            <span class="icon"><i class="fa fa-handshake"></i></span>
           </div>
-          <span class="cd-timeline__date">May 28th, 2020</span>
+          <span class="timeline-date">May 28th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python Discord is now listed on python.org/community</h2>
-          <p class="content">After working towards this goal for months, we finally work out an
+        <div class="timeline-content content box">
+          <h3>Python Discord is now listed on python.org/community</h3>
+          <p>After working towards this goal for months, we finally work out an
             arrangement with the PSF that allows us to be listed on that most holiest of websites:
-            https://python.org/. <a href="https://youtu.be/yciX2meIkXI?t=3">There was much rejoicing.</a></p>
-
+            https://python.org/. <a href="https://youtu.be/yciX2meIkXI?t=3">There was much rejoicing.</a>
+          </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-green">
-            <span class="icon is-large">
-              <i class="fa fa-comments"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-green">
+            <span class="icon"><i class="fa fa-comments"></i></span>
           </div>
-          <span class="cd-timeline__date">May 25th, 2020</span>
+          <span class="timeline-date">May 25th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">ModMail is now live</h2>
-          <p class="content">Having originally planned to write our own ModMail bot from scratch, we
+        <div class="timeline-content content box">
+          <h3>ModMail is now live</h3>
+          <p>
+            Having originally planned to write our own ModMail bot from scratch, we
             come across an exceptionally good <a href="https://github.com/kyb3r/modmail">ModMail bot by
-              kyb3r</a> and decide to just self-host that one instead.</p>
-
+            kyb3r</a> and decide to just self-host that one instead.
+          </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-purple">
-            <span class="icon is-large">
-              <i class="fa fa-gamepad"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-purple">
+            <span class="icon"><i class="fa fa-gamepad"></i></span>
           </div>
-          <span class="cd-timeline__date">Apr 17th, 2020</span>
+          <span class="timeline-date">Apr 17th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
-          <p class="content">The creator of Arcade, Paul Vincent Craven, joins us as a judge.
+        <div class="timeline-content content box">
+          <h3>PyDis Game Jam 3030 with the “Three of a Kind” theme and Arcade as the technology</h3>
+          <p>The creator of Arcade, Paul Vincent Craven, joins us as a judge.
             Several of the Code Jam participants also end up getting involved contributing to the Arcade
             repository.</p>
 
@@ -703,61 +636,53 @@ <h2 class="title is-4">PyDis Game Jam 2020 with the “Three of a Kind” theme
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Apr 14, 2020</span>
+          <span class="timeline-date">Apr 14, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
-          <p class="content"><img
-              src="https://raw.githubusercontent.com/python-discord/branding/main/wallpapers/bigger%20than%20liechtenstein/pydis%20postcard.png">
+        <div class="timeline-content content box">
+          <h3>Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h3>
+          <p>
+            <img src="https://raw.githubusercontent.com/python-discord/branding/main/wallpapers/bigger%20than%20liechtenstein/pydis%20postcard.png">
           </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-green">
-            <span class="icon is-large">
-              <i class="fa fa-comments"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-green">
+            <span class="icon"><i class="fa fa-comments"></i></span>
           </div>
-          <span class="cd-timeline__date">Apr 5th, 2020</span>
+          <span class="timeline-date">Apr 5th, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">The new help channel system is live</h2>
-          <p class="content">We release our dynamic help-channel system, which allows you to claim
+        <div class="timeline-content content box">
+          <h3>The new help channel system is live</h3>
+          <p>We release our dynamic help-channel system, which allows you to claim
             your very own help channel instead of fighting over the static help channels. We release a <a
                 href="https://pythondiscord.com/pages/resources/guides/help-channels/">Help Channel Guide</a> to
             help our members fully understand how the system works.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-blue">
-            <span class="icon is-large">
-              <i class="fa fa-dice"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-blue">
+            <span class="icon"><i class="fa fa-dice"></i></span>
           </div>
-          <span class="cd-timeline__date">Jan 17, 2020</span>
+          <span class="timeline-date">Jan 17, 2020</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
-          <p class="content">Our Code Jams are becoming an increasingly big deal, and the Kivy core
+        <div class="timeline-content content box">
+          <h3>PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h3>
+          <p>Our Code Jams are becoming an increasingly big deal, and the Kivy core
             developers join us to judge the event and help out our members during the event. One of them,
             @tshirtman, even joins our staff!</p>
 
@@ -766,94 +691,81 @@ <h2 class="title is-4">PyDis sixth code jam with the theme “Ancient technology
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Dec 22nd, 2019</span>
+          <span class="timeline-date">Dec 22nd, 2019</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis hits 30,000 members</h2>
-          <p class="content">More than tripling in size since the year before, the community hits
+        <div class="timeline-content content box">
+          <h3>PyDis hits 30,000 members</h3>
+          <p>More than tripling in size since the year before, the community hits
             30000 users. At this point, we're probably the largest Python chat community on the planet.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src={% static "images/timeline/cd-icon-pydis.svg" %} alt="Logo">
           </div>
-          <span class="cd-timeline__date">Sept 22nd, 2019</span>
+          <span class="timeline-date">Sept 22nd, 2019</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Sebastiaan Zeef becomes an owner</h2>
-          <p class="content">After being a long time active contributor to our projects and the driving
+        <div class="timeline-content content box">
+          <h3>Sebastiaan Zeef becomes an owner</h3>
+          <p>After being a long time active contributor to our projects and the driving
             force behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & Leon.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-lime">
-            <span class="icon is-large">
-              <i class="fa fa-scroll"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-lime">
+            <span class="icon"><i class="fa fa-scroll"></i></span>
           </div>
-          <span class="cd-timeline__date">Oct 26th, 2019</span>
+          <span class="timeline-date">Oct 26th, 2019</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">The code of conduct is created</h2>
-          <p class="content">Inspired by the Adafruit, Rust and Django communities, an essential
+        <div class="timeline-content content box">
+          <h3>The code of conduct is created</h3>
+          <p>Inspired by the Adafruit, Rust and Django communities, an essential
             community pillar is created; Our <a href="https://pythondiscord.com/pages/code-of-conduct/">Code of
               Conduct.</a></p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-orange">
-            <span class="icon is-large">
-              <i class="fa fa-code"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-orange">
+            <span class="icon"><i class="fa fa-code"></i></span>
           </div>
-          <span class="cd-timeline__date">Sep 15, 2019</span>
+          <span class="timeline-date">Sep 15, 2019</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">The Django rewrite of pythondiscord.com is now live!</h2>
-          <p class="content">The site is getting more and more complex, and it's time for a rewrite.
+        <div class="timeline-content content box">
+          <h3>The Django rewrite of pythondiscord.com is now live!</h3>
+          <p>The site is getting more and more complex, and it's time for a rewrite.
             We decide to go for a different stack, and build a website based on Django, DRF, Bulma and
             PostgreSQL.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Apr 8th, 2019</span>
+          <span class="timeline-date">Apr 8th, 2019</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis hits 15,000 members; the “hot ones special” video is released</h2>
+        <div class="timeline-content content box">
+          <h3>PyDis hits 15,000 members; the “hot ones special” video is released</h3>
           <div class="force-aspect-container">
             <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -863,235 +775,204 @@ <h2 class="title is-4">PyDis hits 15,000 members; the “hot ones special” vid
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-orange">
-            <span class="icon is-large">
-              <i class="fa fa-code"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-orange">
+            <span class="icon"><i class="fa fa-code"></i></span>
           </div>
-          <span class="cd-timeline__date">Dec 19th, 2018</span>
+          <span class="timeline-date">Dec 19th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">django-simple-bulma is released on PyPi</h2>
-          <p class="content">Our very first package on PyPI, <a
+        <div class="timeline-content content box">
+          <h3>django-simple-bulma is released on PyPi</h3>
+          <p>Our very first package on PyPI, <a
               href="https://pypi.org/project/django-simple-bulma/">django-simple-bulma</a> is a package that
             sets up the Bulma CSS framework for your Django application and lets you configure everything in
             settings.py.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Nov 24th, 2018</span>
+          <span class="timeline-date">Nov 24th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis hits 10,000 members</h2>
-          <p class="content">We partner with RLBot, move from GitLab to GitHub, and start putting
+        <div class="timeline-content content box">
+          <h3>PyDis hits 10,000 members</h3>
+          <p>We partner with RLBot, move from GitLab to GitHub, and start putting
             together the first Advent of Code event.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-blue">
-            <span class="icon is-large">
-              <i class="fa fa-dice"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-blue">
+            <span class="icon"><i class="fa fa-dice"></i></span>
           </div>
-          <span class="cd-timeline__date">Oct 1st, 2018</span>
+          <span class="timeline-date">Oct 1st, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">First Hacktoberfest PyDis event; @Sir Lancebot is created</h2>
-          <p class="content">We create a second bot for our community and fill it up with simple,
+        <div class="timeline-content content box">
+          <h3>First Hacktoberfest PyDis event; @Sir Lancebot is created</h3>
+          <p>We create a second bot for our community and fill it up with simple,
             fun and relatively easy issues. The idea is to create an approachable arena for our members to cut
             their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck.
             We're training our members to be productive contributors in the open-source ecosystem.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-pink">
-            <span class="icon is-large">
-              <i class="fa fa-handshake"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-pink">
+            <span class="icon"><i class="fa fa-handshake"></i></span>
           </div>
-          <span class="cd-timeline__date">Jul 10th, 2018</span>
+          <span class="timeline-date">Jul 10th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
-          <p class="content">After being rejected for their Partner program several times, we
+        <div class="timeline-content content box">
+          <h3>PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h3>
+          <p>After being rejected for their Partner program several times, we
             finally get approved. The recent partnership with the r/Python subreddit plays a significant role in
             qualifying us for this partnership.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Jun 20th, 2018</span>
+          <span class="timeline-date">Jun 20th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis hits 5,000 members and partners with r/Python</h2>
-          <p class="content">As we continue to grow, we approach the r/Python subreddit and ask to
+        <div class="timeline-content content box">
+          <h3>PyDis hits 5,000 members and partners with r/Python</h3>
+          <p>As we continue to grow, we approach the r/Python subreddit and ask to
             become their official Discord community. They agree, and we become listed in their sidebar, giving
             us yet another source of new members.</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-pink">
-            <span class="icon is-large">
-              <i class="fa fa-handshake"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-pink">
+            <span class="icon"><i class="fa fa-handshake"></i></span>
           </div>
-          <span class="cd-timeline__date">Jun 9th, 2018</span>
+          <span class="timeline-date">Jun 9th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Do You Even Python and PyDis merger</h2>
-          <p class="content">At this point in time, there are only two serious Python communities on
+        <div class="timeline-content content box">
+          <h3>Do You Even Python and PyDis merger</h3>
+          <p>At this point in time, there are only two serious Python communities on
             Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold
             proposal - let's shut down their community, replace it with links to ours, and in return we will let
             their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and
             @Mr. Hemlock joining our Admin team</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-lime">
-            <span class="icon is-large">
-              <i class="fa fa-scroll"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-lime">
+            <span class="icon"><i class="fa fa-scroll"></i></span>
           </div>
-          <span class="cd-timeline__date">May 21st, 2018</span>
+          <span class="timeline-date">May 21st, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">The privacy policy is created</h2>
-          <p class="content">Since data privacy is quite important to us, we create a privacy page
+        <div class="timeline-content content box">
+          <h3>The privacy policy is created</h3>
+          <p>Since data privacy is quite important to us, we create a privacy page
             pretty much as soon as our new bot and site starts collecting some data. To this day, we keep <a
                 href="https://pythondiscord.com/pages/privacy/">our privacy policy</a> up to date with all
             changes, and since April 2020 we've started doing <a
-                href="https://pythondiscord.notion.site/6784e3a9752444e89d19e65fd4510d8d">monthly data reviews</a>.</p>
-
+                href="https://pythondiscord.notion.site/6784e3a9752444e89d19e65fd4510d8d">monthly data reviews</a>.
+          </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-blue">
-            <span class="icon is-large">
-              <i class="fa fa-dice"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-blue">
+            <span class="icon"><i class="fa fa-dice"></i></span>
           </div>
-          <span class="cd-timeline__date">Mar 23rd, 2018</span>
+          <span class="timeline-date">Mar 23rd, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">First code jam with the theme “snakes”</h2>
-          <p class="content">Our very first Code Jam attracts a handful of users who work in random
+        <div class="timeline-content content box">
+          <h3>First code jam with the theme “snakes”</h3>
+          <p>Our very first Code Jam attracts a handful of users who work in random
             teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written
             for this jam still lives on in Sir Lancebot, and you can play with it by using the
             <code>.snakes</code> command. For more information on this event, see <a
                 href="https://pythondiscord.com/pages/code-jams/code-jam-1-snakes-bot/">the event page</a></p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Mar 4th, 2018</span>
+          <span class="timeline-date">Mar 4th, 2018</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
-          <p class="content">The public moderation bot we're using at the time, Rowboat, announces
+        <div class="timeline-content content box">
+          <h3>PyDis hits 3,000 members; pythondiscord.com and @Python are live</h3>
+          <p>The public moderation bot we're using at the time, Rowboat, announces
             it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we
             can have more control over its features. We also buy a domain and start making a website in Flask.
           </p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src={% static "images/timeline/cd-icon-pydis.svg" %} alt="Logo">
           </div>
-          <span class="cd-timeline__date">Feb 3rd, 2018</span>
+          <span class="timeline-date">Feb 3rd, 2018</span>
         </div>
 
-            <div class="cd-timeline__content box">
-                <h2 class="title is-4">Our logo is born. Thanks @Aperture!</h2>
-                <p style="background-color: #7289DA; border-radius: 10px;">
-                  <img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
-                </p>
-
+        <div class="timeline-content content box">
+          <h3>Our logo is born. Thanks @Aperture!</h3>
+          <p style="background-color: #7289DA; border-radius: 10px;">
+            <img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
+          </p>
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary pastel-dark-blue">
-            <span class="icon is-large">
-              <i class="fa fa-users"></i>
-            </span>
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon pastel-dark-blue">
+            <span class="icon"><i class="fa fa-users"></i></span>
           </div>
-          <span class="cd-timeline__date">Nov 10th, 2017</span>
+          <span class="timeline-date">Nov 10th, 2017</span>
         </div>
 
-        <div class="cd-timeline__content box">
-          <h2 class="title is-4">Python Discord hits 1,000 members</h2>
-          <p class="content">Our main source of new users at this point is a post on Reddit that
+        <div class="timeline-content content box">
+          <h3>Python Discord hits 1,000 members</h3>
+          <p>Our main source of new users at this point is a post on Reddit that
             happens to get very good SEO. We are one of the top 10 search engine hits for the search term
             "python discord".</p>
-
         </div>
       </div>
 
-      <div class="cd-timeline__block">
-        <div class="icon-date">
-          <div class="cd-timeline__img has-background-primary image">
+      <div class="timeline-item">
+        <div class="timeline-icon-date">
+          <div class="timeline-icon has-background-primary">
             <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
           </div>
-          <span class="cd-timeline__date">Jan 8th, 2017</span>
+          <span class="timeline-date">Jan 8th, 2017</span>
         </div>
 
-        <div class="cd-timeline__content box">
-
-          <h2 class="title is-4">Python Discord is created</h2>
-          <p class="content"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
-            is created, and <strong>Leon Sandøy</strong> (lemon) joins the owner team later in the year, when the community
-            has around 300 members.</p>
+        <div class="timeline-content content box">
+          <h3>Python Discord is created</h3>
+          <p><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
+            is created, and <strong>Leon Sandøy</strong> (lemon) joins the owner team later in the year,
+            when the community has around 300 members.</p>
         </div>
       </div>
 

From fe1af47fdb44979f8617ddb93d8fbd0ada1b74ab Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 21 Mar 2024 20:52:55 +0800
Subject: [PATCH 15/17] Timeline: Implement arrow on content boxes

---
 pydis_site/static/css/home/timeline.css | 67 ++++++++++++++++++-------
 1 file changed, 48 insertions(+), 19 deletions(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 3e2847681..90ca118ef 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -5,12 +5,15 @@
 :root {
     --side-spacing: 0;
     --background-color: rgb(232, 239, 245);
-    --content-background-color: white;
-    --accent: hsl(205, 38%, 89%);
+    --accent: hsl(205, 26%, 84%);
 
+    --timeline-line-color: hsl(205, 38%, 89%);
     --timeline-line-width: 4px;
     --timeline-line-half-width: calc(var(--timeline-line-width) / 2);
 
+    --content-background-color: white;
+    --content-padding: 1.25rem;
+
     --icon-width: 60px;
     --icon-half-width: calc(var(--icon-width) / 2);
     --icon-border-width: 4px;
@@ -18,18 +21,17 @@
     --icon-color: white;
     --icon-image-width: 40px;
     --icon-size: 1.5rem;
-    /* On desktop: Margin on the left and right of the icon.
-     * On mobile:  Set to be consistent with --side-spacing.
-     * */
     --icon-side-spacing: 1.5rem;
 
     --date-color: hsl(0, 0%, 48%);
+    --arrow-size: 7px;
 }
 
 [data-theme="dark"] {
     --background-color: #2C2F33;
     --content-background-color: #23272A;
     --accent: hsl(0, 0%, 34%);
+    --timeline-line-color: var(--accent);
 
     --icon-border-color: hsl(0, 0%, 50%);
 }
@@ -49,6 +51,7 @@
 @media (max-width: 600px) {
     :root {
         --side-spacing: .75rem;
+        --icon-side-spacing: .5rem;
         --timeline-line-width: 3px;
         --icon-width: 30px;
         --icon-border-width: 3px;
@@ -76,7 +79,7 @@
 
     height: 100%;
     width: var(--timeline-line-width);
-    background-color: var(--accent);
+    background-color: var(--timeline-line-color);
     z-index: 1;
 }
 
@@ -99,8 +102,44 @@
     margin-bottom: 2.5rem;
 }
 
+/* Arrow indicator on the top left/right of each content box */
+.timeline-content::before {
+    content: '';
+    position: absolute;
+    border: solid var(--arrow-size) transparent;
+    border-right-color: var(--accent);
+    height: 0;
+}
+
+@media (max-width: 1023px) {
+    .timeline-content::before {
+        margin-left: calc(0px - var(--content-padding) - 14px);
+        margin-top: calc(0px - var(--arrow-size) / 2);
+    }
+}
+
+@media (max-width: 600px) {
+    .timeline-content::before {
+        margin-top: calc(0px - var(--icon-half-width) + var(--arrow-size));
+    }
+}
+
+@media (min-width: 1023px) {
+    .timeline-content::before {
+        right: 100%;
+        margin-top: var(--arrow-size);
+    }
+    .timeline-item:nth-child(odd) .timeline-content::before {
+        border-left-color: var(--accent);
+        border-right-color: transparent;
+        left: 100%;
+        right: unset;
+    }
+}
+
 /* Visual container of the timeline item */
 .timeline-content.box {
+    padding: var(--content-padding);
     box-shadow: var(--accent) 0px 3px 0px 0px;
     background-color: var(--content-background-color);
     flex-grow: 1;
@@ -134,12 +173,7 @@
 
 @media (max-width: 1023px) {
     .timeline-content.box {
-        margin-left: var(--icon-side-spacing);
-    }
-}
-@media (max-width: 600px) {
-    .timeline-content.box {
-        margin-left: var(--icon-side-spacing);
+        margin-left: calc(var(--icon-side-spacing) + var(--arrow-size));
     }
 }
 
@@ -236,14 +270,9 @@
         /* 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 left of the icon (right of box-shadow).
-         *
-         * However, we're not adding --icon-border-width here because the
-         * 'margin-left: var(--icon-side-spacing)' 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(var(--icon-width) + var(--icon-side-spacing) + 1.25rem);
+        margin-left: calc(var(--icon-width) + var(--icon-side-spacing)
+                        + var(--arrow-size) + var(--content-padding));
         margin-top: .75rem;
     }
 

From 89b5901f46d3306549198d503268bc612539fbbe Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Fri, 22 Mar 2024 16:22:14 +0800
Subject: [PATCH 16/17] Fix typo in timeline.css comment

---
 pydis_site/static/css/home/timeline.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 90ca118ef..7f6c41603 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -245,7 +245,7 @@
      * due to the right and bottom box shadow on the logo which is not very
      * visible on the page.
      *
-     * HACK: Harcoded; Unresponsive to actual image dimensions.
+     * XXX: Hardcoded; Unresponsive to actual image dimensions.
      * */
     margin-top: 1px;
     margin-left: 1px;

From 9af9751467c0bb99a8a73d5bc296b7ac7141049a Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Tue, 26 Mar 2024 08:10:04 +0800
Subject: [PATCH 17/17] Timeline: Fix s/2/3/g substitutions on titles

Co-authored-by: wookie184 <wookie1840@gmail.com>
---
 pydis_site/templates/home/timeline.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index eb8bfa475..6a7df5222 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -104,7 +104,7 @@ <h3>Python 3.11 Release Stream</h3>
         </div>
 
         <div class="timeline-content content box">
-          <h3>Summer Code Jam 3033 (CJ9)</h3>
+          <h3>Summer Code Jam 2022 (CJ9)</h3>
           <p>
             We host the 9th Code Jam. This year, teams had to use <b>websockets</b> to create a
             project based on the theme, <b>It's not a bug, it's a feature</b>. In all, 24 teams
@@ -280,7 +280,7 @@ <h3>Partnership with Black</h3>
         </div>
 
         <div class="timeline-content content box">
-          <h3>Summer Code Jam 3031 (CJ8)</h3>
+          <h3>Summer Code Jam 2021 (CJ8)</h3>
           <p>
             We host the 8th now-annual Code Jam. Teams had to create a program with an text-based user
             interface (TUI), all designed around the theme of “think inside the box.” Ultimately, 51
@@ -343,7 +343,7 @@ <h3>Owners become PSF Fellows</h3>
         </div>
 
         <div class="timeline-content content box">
-          <h3>Summer Code Jam 3030 Highlights</h3>
+          <h3>Summer Code Jam 2020 Highlights</h3>
           <p>
             We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020.
             Better late than never!
@@ -518,7 +518,7 @@ <h3>Python Discord hits 100,000 members!</h3>
         </div>
 
         <div class="timeline-content content box">
-          <h3>Python Discord hosts the 3030 CPython Core Developer Q&A</h3>
+          <h3>Python Discord hosts the 2020 CPython Core Developer Q&A</h3>
           <div class="force-aspect-container">
             <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -553,7 +553,7 @@ <h3>Python Discord is now the new home of the PyWeek event!</h3>
         </div>
 
         <div class="timeline-content content box">
-          <h3>PyDis summer code jam 3030 with the theme “Early Internet” and Django as the technology</h3>
+          <h3>PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h3>
           <p>Sponsored by the Django Software Foundation and JetBrains, the Summer
             Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
             projects. Check them out in our judge stream below:</p>
@@ -626,7 +626,7 @@ <h3>ModMail is now live</h3>
         </div>
 
         <div class="timeline-content content box">
-          <h3>PyDis Game Jam 3030 with the “Three of a Kind” theme and Arcade as the technology</h3>
+          <h3>PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h3>
           <p>The creator of Arcade, Paul Vincent Craven, joins us as a judge.
             Several of the Code Jam participants also end up getting involved contributing to the Arcade
             repository.</p>
@@ -920,7 +920,7 @@ <h3>First code jam with the theme “snakes”</h3>
         </div>
 
         <div class="timeline-content content box">
-          <h3>PyDis hits 3,000 members; pythondiscord.com and @Python are live</h3>
+          <h3>PyDis hits 2,000 members; pythondiscord.com and @Python are live</h3>
           <p>The public moderation bot we're using at the time, Rowboat, announces
             it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we
             can have more control over its features. We also buy a domain and start making a website in Flask.