aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site
diff options
context:
space:
mode:
authorGravatar Joe Banks <[email protected]>2020-10-12 01:44:45 +0100
committerGravatar Joe Banks <[email protected]>2020-10-12 01:44:45 +0100
commitd309d8e2218fa0ca60c68f0a5e757b36cc44f889 (patch)
treeedb5ad3502f9e25f0eac1dfde5ad5a0abc3f9848 /pydis_site
parentUse logo with text for new logo timeline itemm (diff)
Use different colours for each category
Diffstat (limited to 'pydis_site')
-rw-r--r--pydis_site/static/css/home/timeline.css32
-rw-r--r--pydis_site/templates/home/timeline.html54
2 files changed, 59 insertions, 27 deletions
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>