From 27650034085125f5d4b86ed9a581df4fad1e0d43 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Wed, 20 Mar 2024 21:28:28 +0800
Subject: 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/templates/home/timeline.html | 636 +++++++++++++++-----------------
 1 file changed, 292 insertions(+), 344 deletions(-)

(limited to 'pydis_site/templates')

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>
 
-- 
cgit v1.2.3