Use colour helpers

2 files changed, 108 insertions, 108 deletions

diff --git a/pydis_site/templates/base/footer.html b/pydis_site/templates/base/footer.html
index 8663f3a1..9beb284f 100644
--- a/pydis_site/templates/base/footer.html
+++ b/pydis_site/templates/base/footer.html
@@ -1,5 +1,5 @@
-<footer class="footer has-background-dark" style="color: #FFFFFF">
-  <div class="content has-text-centered">
+<footer class="footer has-background-grey-darker">
+  <div class="content has-text-centered has-text-grey-lighter">
     <p>
       Powered by <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085"><span id="linode-logo">Linode</span></a> and <a href="https://www.netcup.eu/"><span id="netcup-logo">netcup</span></a><br>Built with <a href="https://www.djangoproject.com/"><span id="django-logo">django</span></a> and <a href="https://bulma.io"><span id="bulma-logo">Bulma</span></a> <br/> &copy; {% now "Y" %} <span id="pydis-text">Python Discord</span>
     </p>
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index b404d6c0..846f4ab2 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -10,16 +10,16 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
-  <section class="cd-timeline js-cd-timeline">
+  <section class="cd-timeline js-cd-timeline has-background-white">
     <div class="container max-width-lg cd-timeline__container">
       <div class="cd-timeline__block">
         <div class="cd-timeline__img cd-timeline__img--picture">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord is created</h2>
-          <p class="color-contrast-medium"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord is created</h2>
+          <p class="color-contrast-medium has-text-dark has-text-dark"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
             is created, and <strong>Leon Sandøy</strong> (lemon) joins the owner team later in the year, when the community
             has around 300 members.</p>
 
@@ -34,9 +34,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord hits 1,000 members</h2>
-          <p class="color-contrast-medium">Our main source of new users at this point is a post on Reddit that
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord hits 1,000 members</h2>
+          <p class="color-contrast-medium has-text-dark">Our main source of new users at this point is a post on Reddit that
             happens to get very good SEO. We are one of the top 10 search engine hits for the search term
             "python discord".</p>
 
@@ -51,8 +51,8 @@
           <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
         </div>
 
-            <div class="cd-timeline__content text-component">
-                <h2>Our logo is born. Thanks @Aperture!</h2>
+            <div class="cd-timeline__content text-component has-background-white-bis">
+                <h2 class="has-text-dark">Our logo is born. Thanks @Aperture!</h2>
                 <p class="pydis-logo-banner"><img
                         src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
                 </p>
@@ -68,9 +68,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
-          <p class="color-contrast-medium">The public moderation bot we're using at the time, Rowboat, announces
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
+          <p class="color-contrast-medium has-text-dark">The public moderation bot we're using at the time, Rowboat, announces
             it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we
             can have more control over its features. We also buy a domain and start making a website in Flask.
           </p>
@@ -86,9 +86,9 @@
           <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>First code jam with the theme “snakes”</h2>
-          <p class="color-contrast-medium">Our very first Code Jam attracts a handful of users who work in random
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">First code jam with the theme “snakes”</h2>
+          <p class="color-contrast-medium has-text-dark">Our very first Code Jam attracts a handful of users who work in random
             teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written
             for this jam still lives on in Sir Lancebot, and you can play with it by using the
             <code>.snakes</code> command. For more information on this event, see <a
@@ -105,9 +105,9 @@
           <i class="fa fa-scroll"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>The privacy policy is created</h2>
-          <p class="color-contrast-medium">Since data privacy is quite important to us, we create a privacy page
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">The privacy policy is created</h2>
+          <p class="color-contrast-medium has-text-dark">Since data privacy is quite important to us, we create a privacy page
             pretty much as soon as our new bot and site starts collecting some data. To this day, we keep <a
                 href="https://pythondiscord.com/pages/privacy/">our privacy policy</a> up to date with all
             changes, and since April 2020 we've started doing <a
@@ -124,9 +124,9 @@
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Do You Even Python and PyDis merger</h2>
-          <p class="color-contrast-medium">At this point in time, there are only two serious Python communities on
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Do You Even Python and PyDis merger</h2>
+          <p class="color-contrast-medium has-text-dark">At this point in time, there are only two serious Python communities on
             Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold
             proposal - let's shut down their community, replace it with links to ours, and in return we will let
             their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and
@@ -143,9 +143,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis hits 5,000 members and partners with r/Python</h2>
-          <p class="color-contrast-medium">As we continue to grow, we approach the r/Python subreddit and ask to
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis hits 5,000 members and partners with r/Python</h2>
+          <p class="color-contrast-medium has-text-dark">As we continue to grow, we approach the r/Python subreddit and ask to
             become their official Discord community. They agree, and we become listed in their sidebar, giving
             us yet another source of new members.</p>
 
@@ -160,9 +160,9 @@
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
-          <p class="color-contrast-medium">After being rejected for their Partner program several times, we
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
+          <p class="color-contrast-medium has-text-dark">After being rejected for their Partner program several times, we
             finally get approved. The recent partnership with the r/Python subreddit plays a significant role in
             qualifying us for this partnership.</p>
 
@@ -177,9 +177,9 @@
           <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>First Hacktoberfest PyDis event; @Sir Lancebot is created</h2>
-          <p class="color-contrast-medium">We create a second bot for our community and fill it up with simple,
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">First Hacktoberfest PyDis event; @Sir Lancebot is created</h2>
+          <p class="color-contrast-medium has-text-dark">We create a second bot for our community and fill it up with simple,
             fun and relatively easy issues. The idea is to create an approachable arena for our members to cut
             their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck.
             We're training our members to be productive contributors in the open-source ecosystem.</p>
@@ -195,9 +195,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis hits 10,000 members</h2>
-          <p class="color-contrast-medium">We partner with RLBot, move from GitLab to GitHub, and start putting
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis hits 10,000 members</h2>
+          <p class="color-contrast-medium has-text-dark">We partner with RLBot, move from GitLab to GitHub, and start putting
             together the first Advent of Code event.</p>
 
           <div class="flex justify-between items-center">
@@ -211,9 +211,9 @@
           <i class="fa fa-code"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>django-simple-bulma is released on PyPi</h2>
-          <p class="color-contrast-medium">Our very first package on PyPI, <a
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">django-simple-bulma is released on PyPi</h2>
+          <p class="color-contrast-medium has-text-dark">Our very first package on PyPI, <a
               href="https://pypi.org/project/django-simple-bulma/">django-simple-bulma</a> is a package that
             sets up the Bulma CSS framework for your Django application and lets you configure everything in
             settings.py.</p>
@@ -229,8 +229,8 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2>
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis hits 15,000 members; the “hot ones special” video is released</h2>
           <div class="force-aspect-container">
             <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -248,9 +248,9 @@
           <i class="fa fa-code"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>The Django rewrite of pythondiscord.com is now live!</h2>
-          <p class="color-contrast-medium">The site is getting more and more complex, and it's time for a rewrite.
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">The Django rewrite of pythondiscord.com is now live!</h2>
+          <p class="color-contrast-medium has-text-dark">The site is getting more and more complex, and it's time for a rewrite.
             We decide to go for a different stack, and build a website based on Django, DRF, Bulma and
             PostgreSQL.</p>
 
@@ -265,9 +265,9 @@
           <i class="fa fa-scroll"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>The code of conduct is created</h2>
-          <p class="color-contrast-medium">Inspired by the Adafruit, Rust and Django communities, an essential
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">The code of conduct is created</h2>
+          <p class="color-contrast-medium has-text-dark">Inspired by the Adafruit, Rust and Django communities, an essential
             community pillar is created; Our <a href="https://pythondiscord.com/pages/code-of-conduct/">Code of
               Conduct.</a></p>
 
@@ -282,9 +282,9 @@
           <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Sebastiaan Zeef becomes an owner</h2>
-          <p class="color-contrast-medium">After being a long time active contributor to our projects and the driving
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Sebastiaan Zeef becomes an owner</h2>
+          <p class="color-contrast-medium has-text-dark">After being a long time active contributor to our projects and the driving
             force behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & Leon.</p>
 
           <div class="flex justify-between items-center">
@@ -298,9 +298,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis hits 30,000 members</h2>
-          <p class="color-contrast-medium">More than tripling in size since the year before, the community hits
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis hits 30,000 members</h2>
+          <p class="color-contrast-medium has-text-dark">More than tripling in size since the year before, the community hits
             30000 users. At this point, we're probably the largest Python chat community on the planet.</p>
 
           <div class="flex justify-between items-center">
@@ -314,9 +314,9 @@
           <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
-          <p class="color-contrast-medium">Our Code Jams are becoming an increasingly big deal, and the Kivy core
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
+          <p class="color-contrast-medium has-text-dark">Our Code Jams are becoming an increasingly big deal, and the Kivy core
             developers join us to judge the event and help out our members during the event. One of them,
             @tshirtman, even joins our staff!</p>
 
@@ -337,9 +337,9 @@
           <i class="fa fa-comments"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>The new help channel system is live</h2>
-          <p class="color-contrast-medium">We release our dynamic help-channel system, which allows you to claim
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">The new help channel system is live</h2>
+          <p class="color-contrast-medium has-text-dark">We release our dynamic help-channel system, which allows you to claim
             your very own help channel instead of fighting over the static help channels. We release a <a
                 href="https://pythondiscord.com/pages/resources/guides/help-channels/">Help Channel Guide</a> to
             help our members fully understand how the system works.</p>
@@ -355,9 +355,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
-          <p class="color-contrast-medium"><img
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
+          <p class="color-contrast-medium has-text-dark"><img
               src="https://cdn.discordapp.com/attachments/354619224620138496/699666518476324954/unknown.png">
           </p>
 
@@ -372,9 +372,9 @@
           <i class="fa fa-gamepad"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
-          <p class="color-contrast-medium">The creator of Arcade, Paul Vincent Craven, joins us as a judge.
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
+          <p class="color-contrast-medium has-text-dark">The creator of Arcade, Paul Vincent Craven, joins us as a judge.
             Several of the Code Jam participants also end up getting involved contributing to the Arcade
             repository.</p>
 
@@ -395,9 +395,9 @@
           <i class="fa fa-comments"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>ModMail is now live</h2>
-          <p class="color-contrast-medium">Having originally planned to write our own ModMail bot from scratch, we
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">ModMail is now live</h2>
+          <p class="color-contrast-medium has-text-dark">Having originally planned to write our own ModMail bot from scratch, we
             come across an exceptionally good <a href="https://github.com/kyb3r/modmail">ModMail bot by
               kyb3r</a> and decide to just self-host that one instead.</p>
 
@@ -412,9 +412,9 @@
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord is now listed on python.org/community</h2>
-          <p class="color-contrast-medium">After working towards this goal for months, we finally work out an
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord is now listed on python.org/community</h2>
+          <p class="color-contrast-medium has-text-dark">After working towards this goal for months, we finally work out an
             arrangement with the PSF that allows us to be listed on that most holiest of websites:
             https://python.org/. <a href="https://youtu.be/yciX2meIkXI?t=3">There was much rejoicing.</a></p>
 
@@ -429,9 +429,9 @@
           <i class="fa fa-chart-bar"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord Public Statistics are now live</h2>
-          <p class="color-contrast-medium">After getting numerous requests to publish beautiful data on member
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord Public Statistics are now live</h2>
+          <p class="color-contrast-medium has-text-dark">After getting numerous requests to publish beautiful data on member
             count and channel use, we create <a href="https://stats.pythondiscord.com/">stats.pythondiscord.com</a> for
             all to enjoy.</p>
 
@@ -446,9 +446,9 @@
           <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
-          <p class="color-contrast-medium">Sponsored by the Django Software Foundation and JetBrains, the Summer
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
+          <p class="color-contrast-medium has-text-dark">Sponsored by the Django Software Foundation and JetBrains, the Summer
             Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
             projects. Check them out in our judge stream below:</p>
 
@@ -469,9 +469,9 @@
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord is now the new home of the PyWeek event!</h2>
-          <p class="color-contrast-medium">PyWeek, a game jam that has been running since 2005, joins Python
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord is now the new home of the PyWeek event!</h2>
+          <p class="color-contrast-medium has-text-dark">PyWeek, a game jam that has been running since 2005, joins Python
             Discord as one of our official events. Find more information about PyWeek on <a
                 href="https://pyweek.org/">their official website</a>.</p>
 
@@ -486,8 +486,8 @@
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
           <div class="force-aspect-container">
             <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -505,9 +505,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Python Discord hits 100,000 members!</h2>
-          <p class="color-contrast-medium">Only six months after hitting 40,000 users, we hit 100,000 users. A
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Python Discord hits 100,000 members!</h2>
+          <p class="color-contrast-medium has-text-dark">Only six months after hitting 40,000 users, we hit 100,000 users. A
             monumental milestone,
             and one we're very proud of. To commemorate it, we create this timeline.</p>
 
@@ -522,9 +522,9 @@
           <i class="fa fa-wrench"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>We migrate all our infrastructure to Kubernetes</h2>
-          <p class="color-contrast-medium">As our tech stack grows, we decide to migrate all our services over to a
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">We migrate all our infrastructure to Kubernetes</h2>
+          <p class="color-contrast-medium has-text-dark">As our tech stack grows, we decide to migrate all our services over to a
             container orchestration paradigm via Kubernetes. This gives us better control and scalability.
             <b>Joe Banks</b> takes on the role as DevOps Lead.
           </p>
@@ -540,9 +540,9 @@
           <i class="fa fa-snowflake-o"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Advent of Code attracts hundreds of participants</h2>
-          <p class="color-contrast-medium">
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Advent of Code attracts hundreds of participants</h2>
+          <p class="color-contrast-medium has-text-dark">
             A total of 443 Python Discord members sign up to be part of
             <a href="https://adventofcode.com/">Eric Wastl's excellent Advent of Code event</a>.
             As always, we provide dedicated announcements, scoreboards, bot commands and channels for our members
@@ -562,9 +562,9 @@
           <i class="fa fa-music"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>We release The PEP 8 song</h2>
-          <p class="color-contrast-medium">We release the PEP 8 song on our YouTube channel, which finds tens of
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">We release The PEP 8 song</h2>
+          <p class="color-contrast-medium has-text-dark">We release the PEP 8 song on our YouTube channel, which finds tens of
             thousands of listeners!</p>
 
           <div class="force-aspect-container">
@@ -584,9 +584,9 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>We now have 150,000 members!</h2>
-          <p class="color-contrast-medium">Our growth continues to accelerate.</p>
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">We now have 150,000 members!</h2>
+          <p class="color-contrast-medium has-text-dark">Our growth continues to accelerate.</p>
 
           <div class="flex justify-between items-center">
             <span class="cd-timeline__date">Feb 18th, 2021</span>
@@ -599,9 +599,9 @@
           <i class="fa fa-microphone"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Leon Sandøy appears on Talk Python To Me</h2>
-          <p class="color-contrast-medium">Leon goes on the Talk Python to Me podcast with Michael Kennedy
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Leon Sandøy appears on Talk Python To Me</h2>
+          <p class="color-contrast-medium has-text-dark">Leon goes on the Talk Python to Me podcast with Michael Kennedy
             to discuss the history of Python Discord, the critical importance of culture, and how to run a massive
             community. You can find the episode <a href="https://talkpython.fm/episodes/show/305/python-community-at-python-discord"> at talkpython.fm</a>.
           </p>
@@ -621,9 +621,9 @@
           <i class="fa fa-microphone"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>We're on the Teaching Python podcast!</h2>
-          <p class="color-contrast-medium">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">We're on the Teaching Python podcast!</h2>
+          <p class="color-contrast-medium has-text-dark">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
             changed the way we learn, and what role communities like Python Discord can play in this new world.
             You can find the episode <a href="https://teachingpython.fm/63"> at teachingpython.fm</a>.
           </p>
@@ -643,9 +643,9 @@
           <i class="fa fa-comment"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>New feature: Weekly discussion channel</h2>
-          <p class="color-contrast-medium">Every week (or two weeks), we'll be posting a new topic to discuss in a
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">New feature: Weekly discussion channel</h2>
+          <p class="color-contrast-medium has-text-dark">Every week (or two weeks), we'll be posting a new topic to discuss in a
             channel called <b>#weekly-topic-discussion</b>. Our inaugural topic is a PyCon talk by Anthony Shaw called
             <b>Wily Python: Writing simpler and more maintainable Python.</b></a>.
           </p>
@@ -667,9 +667,9 @@
           <i class="fa fa-youtube-play"></i>
         </div>
 
-        <div class="cd-timeline__content text-component">
-          <h2>Summer Code Jam 2020 Highlights</h2>
-          <p class="color-contrast-medium">
+        <div class="cd-timeline__content text-component has-background-white-bis">
+          <h2 class="has-text-dark">Summer Code Jam 2020 Highlights</h2>
+          <p class="color-contrast-medium has-text-dark">
             We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020.
             Better late than never!
           </p>