From d309d8e2218fa0ca60c68f0a5e757b36cc44f889 Mon Sep 17 00:00:00 2001
From: Joe Banks <joseph@josephbanks.me>
Date: Mon, 12 Oct 2020 01:44:45 +0100
Subject: Use different colours for each category

---
 pydis_site/static/css/home/timeline.css | 32 +++++++++++++++++++
 pydis_site/templates/home/timeline.html | 54 ++++++++++++++++-----------------
 2 files changed, 59 insertions(+), 27 deletions(-)

(limited to 'pydis_site')

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 11080766..62b4834f 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -29,6 +29,38 @@ 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: #c7f835 !important;
+}
+
+.pastel-dark-blue {
+    background-color: #6982FF !important;
+}
+
 .video-container {
     position: relative;
     width: 100%;
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index 681f5be2..1459b432 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -30,7 +30,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
@@ -64,7 +64,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
@@ -82,7 +82,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
                 <i class="fa fa-dice"></i>
             </div>
 
@@ -101,7 +101,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
                 <i class="fa fa-scroll"></i>
             </div>
 
@@ -120,7 +120,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
                 <i class="fa fa-handshake"></i>
             </div>
 
@@ -139,7 +139,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
@@ -156,7 +156,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
                 <i class="fa fa-handshake"></i>
             </div>
 
@@ -173,7 +173,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
                 <i class="fa fa-dice"></i>
             </div>
 
@@ -191,7 +191,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
@@ -207,8 +207,8 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
-                <i class="fa fa-upload"></i>
+            <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
+                <i class="fa fa-code"></i>
             </div>
 
             <div class="cd-timeline__content text-component">
@@ -225,7 +225,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
@@ -244,7 +244,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
                 <i class="fa fa-code"></i>
             </div>
 
@@ -261,7 +261,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
                 <i class="fa fa-scroll"></i>
             </div>
 
@@ -278,7 +278,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
@@ -294,7 +294,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
                 <i class="fa fa-dice"></i>
             </div>
 
@@ -317,8 +317,8 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
-                <i class="fa fa-question"></i>
+            <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
+                <i class="fa fa-comments"></i>
             </div>
 
             <div class="cd-timeline__content text-component">
@@ -335,7 +335,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
@@ -352,7 +352,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
                 <i class="fa fa-gamepad"></i>
             </div>
 
@@ -375,8 +375,8 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
-                <i class="fa fa-life-ring"></i>
+            <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
+                <i class="fa fa-comments"></i>
             </div>
 
             <div class="cd-timeline__content text-component">
@@ -392,7 +392,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
                 <i class="fa fa-handshake"></i>
             </div>
 
@@ -409,7 +409,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
                 <i class="fa fa-chart-bar"></i>
             </div>
 
@@ -425,7 +425,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
                 <i class="fa fa-dice"></i>
             </div>
 
@@ -448,7 +448,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
                 <i class="fa fa-handshake"></i>
             </div>
 
@@ -465,7 +465,7 @@
         </div>
 
         <div class="cd-timeline__block">
-            <div class="cd-timeline__img cd-timeline__img--picture">
+            <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
                 <i class="fa fa-users"></i>
             </div>
 
-- 
cgit v1.2.3