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.

3 files changed, 397 insertions, 403 deletions

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index bf57d56d..04cc98bc 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
index 015718a8..015718a8 100755
--- a/pydis_site/static/images/timeline/cd-icon-picture.svg
+++ b/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 7097d1f1..a62c8570 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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
 
 
       <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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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 @@
       </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>