Events: Re-organize templates and significantly improve layouts

Aka, many minor changes I shouldn't've grouped together in a single
commit.

- Add main page events description
- Use date icons every where
- Fill up one-off events list
- Use a media-like layout for one-off events instead
- Use 2-column masonry for one-off events list
- Update schedules for this year
- Add a colored top border line to cards in the main gallery that do not
  have thumbnail banners
- Add april fools to fill the gap in the second row so the grid looks
  better
- Re-purpose 'all events' sidebar as 'ToC' with appropriate anchor links
- Use circle-info icon everywhere for learn more buttons
- Added python release streams to the one-off events

That light blue cloud icon for devops hour looks dope IMO :P

- And of course, thanks to the layout change for one-off events list I
  do not have to hurriedly create ad-hoc thumbnails for them 😔. phew
- Which means our fancy hats workshop can use the beautiful magician hat
  emoji as the icon!

- Renamed 'scheduled' and 'recent' events to be year-independent. This
  makes it consistent because we might end up updating the list
  mid-year. This means all dates will have the year specified.

The pain of updating the gallery sections' height for both main and
one-off events section continues to be a limitation.

11 files changed, 365 insertions, 227 deletions

diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css
index 6b2642bb..55725f75 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -19,27 +19,40 @@ pre {
     margin-bottom: 0 !important
 }
 
-.event-gallery .date-icon {
+.event-gallery .date-icon, #main-section .date-icon {
     margin-left: -.25rem;
 }
 
-.event-gallery .card {
+.event-gallery .card, .event-gallery .box {
     border-radius: 6px;
     margin-bottom: 1.5rem;
 }
 
+/* We are using bulma cards as boxes here to take advantage of the card's
+ * header image component */
 .event-gallery .card img {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 }
 
+/* Custom component: A colored line at the top of a card that can be styled
+ * with bulma's has-background-* classes.*/
+.card .colored-line {
+    /* A default color as grey */
+    background-color: #C1C1C1;
+    height: .3rem;
+    display: block;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
 @media (min-width: 700px) {
-    .scheduled-events .media-left {
+    #scheduled-events .media-left {
         margin-left: 2rem;
         margin-right: 2rem;
     }
 
-    .previous-events .media-left {
+    #previous-events .media-left {
         margin-left: 1rem;
         margin-right: 1rem;
     }
@@ -60,28 +73,42 @@ pre {
         align-content: space-between;
     }
 
+    #other-events-section {
+        height: 62rem;
+    }
+
+    #other-events-section .box {
+        width: calc(50% - 1rem);
+    }
+
+    #other-events-section .box:nth-child(2n+1) { order: 1; }
+    #other-events-section .box:nth-child(2n)   { order: 2; }
+
+    #other-events-section::before {
+        content: "";
+        flex-basis: 100%;
+        width: 0;
+        order: 2;
+    }
+
     @media (min-width: 900px) {
         /* 3 columns */
-        #main-events {
+        #main-events-section {
             /* Required. Must be only slightly taller than the tallest column */
-            height: 65rem;
-        }
-
-        #other-events {
-            height: 75rem;
+            height: 67rem;
         }
 
-        .event-gallery .card {
+        #main-events-section .card {
             width: calc(33% - 1rem);
         }
 
         /* Reorder vertically */
-        .event-gallery .card:nth-child(3n+1) { order: 1; }
-        .event-gallery .card:nth-child(3n+2) { order: 2; }
-        .event-gallery .card:nth-child(3n)   { order: 3; }
+        #main-events-section .card:nth-child(3n+1) { order: 1; }
+        #main-events-section .card:nth-child(3n+2) { order: 2; }
+        #main-events-section .card:nth-child(3n)   { order: 3; }
 
         /* 2 line breaks to force new columns, for each gap between the three columns. */
-        .event-gallery::before, .event-gallery::after {
+        #main-events-section::before, #main-events-section::after {
             content: "";
             flex-basis: 100%;
             width: 0;
@@ -91,23 +118,23 @@ pre {
 
     @media (max-width: 900px) {
         /* 2 columns */
-        #main-events {
-            height: 100rem;
+        #main-events-section {
+            height: 80rem;
         }
 
-        #other-events {
-            height: 110rem;
+        #other-events-section {
+            height: 80rem;
         }
 
-        .event-gallery .card {
+        #main-events-section .card {
             width: calc(50% - 1rem);
         }
 
-        .event-gallery .card:nth-child(2n+1) { order: 1; }
-        .event-gallery .card:nth-child(2n)   { order: 2; }
+        #main-events-section.card:nth-child(2n+1) { order: 1; }
+        #main-events-section.card:nth-child(2n)   { order: 2; }
 
         /* 1 line break to force a new column, for the gap between the two columns. */
-        .event-gallery::before {
+        #main-events-section::before {
             content: "";
             flex-basis: 100%;
             width: 0;
diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html
index b264a6ab..df47f6f7 100644
--- a/pydis_site/templates/events/current_event.html
+++ b/pydis_site/templates/events/current_event.html
@@ -1,10 +1,7 @@
 {% load static %}
 
-{# Current or ongoing event #}
-{# (n/a) #}
-
-{# Next event to promote #}
-<div class="box has-background-warning-light" style="padding: 2rem; padding-top: .75rem;">
+{# Current/next event to promote #}
+<div class="box has-background-warning-light" style="padding: 2rem; padding-top: .75rem; margin-top: 2rem;">
     <small class="has-text-grey">Upcoming event</small>
     <div class="columns is-3 mt-1" style="--columnGap: 0.75rem;">
         <div class="column">
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html
index b0522e39..2dcdb747 100644
--- a/pydis_site/templates/events/index.html
+++ b/pydis_site/templates/events/index.html
@@ -7,98 +7,23 @@
 {% endblock %}
 
 {% block event_base_content %}
-<div class="columns is-variable is-8">
-    <div class="column is-two-thirds">
-        <p>Briefly describe events. Explain how to subscribe to updates from the <code>#roles</code> channel.</p>
-        {% include "events/current_event.html" %}
-
-            <div class="box scheduled-events">
-                <h2 class="title is-5" style="margin-bottom: 2rem;">Scheduled events for 2024</h2>
-                <article class="media">
-                    <div class="media-left">
-                        <p class="image is-64x64">
-                            <a href="https://pyweek.org/37/"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
-                        </p>
-                    </div>
-                    <div class="media-content">
-                        <div class="content">
-                            <h5 class="title is-4"><a href="https://pyweek.org/37/">PyWeek 37</a></h5>
-                            <p class="subtitle is-6">March 17-24</p>
-                            <p>The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.</p>
-                        </div>
-                        <a class="button is-small is-link is-outlined" href="https://pyweek.org/37/">Learn more</a>
-                    </div>
-                </article>
-                <article class="media">
-                    <div class="media-left">
-                        <p class="image is-64x64">
-                            <a href="{% url "events:page" path="revivalofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
-                        </p>
-                    </div>
-                    <div class="media-content">
-                        <div class="content">
-                            <h5 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h5>
-                            <p class="subtitle is-6">TBD</p>
-                            <p>Revisit past years' Advent of Code problems! Puzzles are relased every other day and there will be dedicated solution threads for you to discuss with other participants.</p>
-                        </div>
-                        <a class="button is-small is-link is-outlined" href="{% url "events:page" path="revivalofcode" %}">Learn more</a>
-                    </div>
-                </article>
-                <article class="media">
-                    <div class="media-left">
-                        <p class="image is-64x64">
-                            <a href="{% url "events:page" path="code-jams" %}"><img class="is-rounded" src="/static/images/events/icons/codejam.svg"></a>
-                        </p>
-                    </div>
-                    <div class="media-content">
-                        <div class="content">
-                            <h5 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jam</a></h5>
-                            <p class="subtitle is-6">TBD</p>
-                            <p>Our annual code-jam where we place you in a team of five and you have 11 days to code some sort of application or program in Python based on a selected technology or framework.</p>
-                        </div>
-                        <a class="button is-small is-link is-outlined" href="{% url "events:page" path="code-jams" %}">Learn more</a>
-                    </div>
-                </article>
-                <article class="media">
-                    <div class="media-left">
-                        <p class="image is-64x64">
-                            <a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
-                        </p>
-                    </div>
-                    <div class="media-content">
-                        <div class="content">
-                            <h5 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek 38</a></h5>
-                            <p class="subtitle is-6">September</p>
-                            <p>The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.</p>
-                        </div>
-                        <a class="button is-small is-link is-outlined" href="https://pyweek.org/">Learn more</a>
-                    </div>
-                </article>
-                <article class="media">
-                    <div class="media-left">
-                        <p class="image is-64x64">
-                            <a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
-                        </p>
-                    </div>
-                    <div class="media-content">
-                        <div class="content">
-                            <h5 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of Code</a></h5>
-                            <p class="subtitle is-6">December 1-25</p>
-                            <p>Daily programming puzzles with increasing difficulties where each puzzle has a little story and you can discuss solutions with other participants. You are allowed to use any programming language you like.</p>
-                        </div>
-                        <a class="button is-small is-link is-outlined" href="{% url "events:page" path="adventofcode" %}">Learn more</a>
-                    </div>
-                </article>
-            </div>
+    <div class="columns is-variable is-8" id="main-section">
+        <div class="column is-two-thirds">
+            <p>At Python Discord we run a few regular events, such as programming contests and workshops. We also run more ad-hoc events such as Python release streams. All members are welcome to participate in the events live, and for most events we release videos on our <a href="https://www.youtube.com/@PythonDiscord">YouTube channel</a> after the event in case you've missed it.</p>
+            </p>To subscribe to the announcements, head over to the bottom of the <code>#roles</code> channel and get the <code>@Announcements</code> role to receive notifications on the latest updates!</p>
+            {% include "events/current_event.html" %}
+            {% include "events/scheduled_events.html" %}
+        </div>
+        <div class="column">
+            {% include "events/sidebar/main_sidebar.html" %}
         </div>
-    <div class="column">
-        {% include "events/sidebar/events_list.html" %}
     </div>
-</div>
 
-<br>
-<hr/>
-{% include "events/main_events.html" %}
-<hr/>
-{% include "events/other_events.html" %}
+    <br>
+
+    <hr id="main-events"/>
+    {% include "events/main_events.html" %}
+
+    <hr id="other-events"/>
+    {% include "events/other_events.html" %}
 {% endblock %}
diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html
index d2666eb7..a4675333 100644
--- a/pydis_site/templates/events/main_events.html
+++ b/pydis_site/templates/events/main_events.html
@@ -5,9 +5,10 @@
 </div>
 <br>
 
-{# These events are sorted based on priority #}
-<div class="event-gallery" id="main-events">
+{# These events are sorted in the desired (arbitrary) order, such as priority #}
+<div class="event-gallery" id="main-events-section">
     <div class="card">
+        <span class="colored-line has-background-primary"></span>
         <div class="card-content">
             <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2>
             <p class="subtitle is-7 has-text-grey">
@@ -79,4 +80,18 @@
             <p>Revival of Code is a Python Discord hosted event where we release old Advent of Code puzzles from a previous year. The puzzles start off easy and gradually get more difficult, all while revealing a fun little story that is appropriate for some seasons more than others. Questions will be posted every other day, and you'll be able to discuss your solutions in dedicated threads.</p>
         </div>
     </div>
+    <div class="card">
+        <span class="colored-line has-background-success"></span>
+        <div class="card-content">
+            <h2 class="title is-4">😜 April Fools</h2>
+            <p class="subtitle is-7 has-text-grey">
+                <span class="icon-text">
+                    <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                    <span>April 1</span>
+                </span>
+            </p>
+            <p>HMMMMMMM what's this event about??</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+    </div>
 </div>
diff --git a/pydis_site/templates/events/other_events.html b/pydis_site/templates/events/other_events.html
index 178cd876..9fc7c6ab 100644
--- a/pydis_site/templates/events/other_events.html
+++ b/pydis_site/templates/events/other_events.html
@@ -6,97 +6,156 @@
 <br>
 
 {# These events should be sorted in reverse-chronological order. Add new events to the top. #}
-<div class="event-gallery" id="other-events">
-    <div class="card">
-        <div class="card-image">
-            <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Fancy Hats">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=PTjLkvvjKnM">Fancy Hats: Circuit Python & Microcontrollers</a></h2>
-            <p class="subtitle is-7 has-text-grey">
-                <span class="icon-text">
-                    <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
-                    <span>Mar. 12, 2023</span>
-                </span>
-            </p>
-            <p>In this workshop we went through the process of building a little hat with LEDs of scrolling text, and talked about other ways you can use Circuit Python to bring Python into the physical world around you.</p>
-        </div>
+<div class="event-gallery" id="other-events-section">
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <h1 class="title is-1">🎩</h1>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=PTjLkvvjKnM">Fancy Hats: Circuit Python & Microcontrollers Workshop</a></h2>
+                    <p class="subtitle is-7 has-text-grey">
+                        <span class="icon-text">
+                            <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
+                            <span>Mar. 12, 2023</span>
+                        </span>
+                    </p>
+                    <p>In this workshop we went through the process of building a little hat with LEDs of scrolling text, and talked about other ways you can use Circuit Python to bring Python into the physical world around you.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=PTjLkvvjKnM">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
     </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/devops_hour.png" alt="DevOps Hour">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=00CW1y-O8YQ">DevOps Hour with Joe Banks</a></h2>
-            <p class="subtitle is-7 has-text-grey">
-                <span class="icon-text">
-                    <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
-                    <span>Jul. 26, 2022</span>
-                </span>
-            </p>
-            <p>One of Python Discord’s owners, Joe Banks, sat down and gave an hour long talk about DevOps in Python Discord and how <em>you</em> can get started with DevOps.</p>
-        </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <p class="image">
+                    <img class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
+                </p>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=PGZPSWZSkJI">Python 3.11 Release Stream</a></h2>
+                    <p class="subtitle is-7 has-text-grey">
+                        <span class="icon-text">
+                            <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
+                            <span>Oct. 25, 2022</span>
+                        </span>
+                    </p>
+                    <p>Pablo Galindo, the 3.11 Python Release Manager and CPython Core Developer, walked through the release process and g number of guests joined to talk about the exciting new features to be found in 3.11. At the end of the release we'll also hosted a Q&A session.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=PGZPSWZSkJI">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
     </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/pydis_owners_qna.png" alt="Owners Q&A">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="link">[add link] PyDis Owners Q&A</a></h2>
-            <p class="subtitle is-7 has-text-grey">
-                <span class="icon-text">
-                    <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
-                    <span>Jun. 18, 2022</span>
-                </span>
-            </p>
-            <p>Members submitted questions to ask our owners, and a live Q&A session was hosted with the Python Discord Owners to hear Joe, Lemon and Sebastiaan talk about the history of the server, answer the questions and talk about future plans for the community.</p>
-        </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <span class="icon is-large"><i class="fas fa-cloud fa-2xl" style="color: lightskyblue"></i></span>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=00CW1y-O8YQ">DevOps Hour with Joe Banks</a></h2>
+                    <p class="subtitle is-7 has-text-grey">
+                        <span class="icon-text">
+                            <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
+                            <span>Jul. 26, 2022</span>
+                        </span>
+                    </p>
+                    <p>One of Python Discord’s owners, Joe Banks, sat down and gave an hour long talk about DevOps in Python Discord and how <em>you</em> can get started with DevOps.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=00CW1y-O8YQ">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
     </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/trivia.png" alt="Game Jam 2020">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="blah">[add link] Trivia Night</a></h2>
-            <p class="subtitle is-7 has-text-grey">
-                <span class="icon-text">
-                    <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
-                    <span>Feb. 12, 2022</span>
-                </span>
-            </p>
-            <p>How well do you know Python inside out? Members got to find out in a Trivia Night event. Contestants were given questions about Python's internals, its development, and more. To win, contestants had to get the most questions right while being fast to answer. </p>
-        </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <p class="image">
+                    <img class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
+                </p>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=AHT2l3hcIJg">Python 3.10 Release Stream</a></h2>
+                    <p class="subtitle is-7 has-text-grey">
+                        <span class="icon-text">
+                            <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
+                            <span>Oct. 5, 2021</span>
+                        </span>
+                    </p>
+                    <p>Python 3.10 was set to be released on 4 October 2021. We hosted a live Python 3.10 Release Stream with Pablo Galindo, CPython Core Developer and Python 3.10 Release Manager, and Leon Sandøy.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=AHT2l3hcIJg">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
     </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/coredev_qna.png" alt="Python Core-devs Q&A">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=gXMdfBTcOfQ">Python Core Developers Q&A</a></h2>
-            <p class="subtitle is-7 has-text-grey">
-                <span class="icon-text">
-                    <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
-                    <span>Oct. 21, 2020</span>
-                </span>
-            </p>
-            <p>The first Python Core Developers Q&A! During the Q&A, several core developers answered questions sent in by you, the broader Python community. This Q&A was part of the yearly Python Core Dev Sprint, organized virtually in 2020 on Python Discord.</p>
-        </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <p class="image">
+                    <img class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
+                </p>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=gXMdfBTcOfQ">Python Core Developers Q&A</a></h2>
+                    <p class="subtitle is-7 has-text-grey">
+                        <span class="icon-text">
+                            <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
+                            <span>Oct. 21, 2020</span>
+                        </span>
+                    </p>
+                    <p>The first Python Core Developers Q&A! During the Q&A, several core developers answered questions sent in by you, the broader Python community. This Q&A was part of the yearly Python Core Dev Sprint, organized virtually in 2020 on Python Discord.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=gXMdfBTcOfQ">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
     </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/gamejam.png" alt="Game Jam 2020">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="{% url "events:page" path="game-jams" %}">Game Jam</a></h2>
-            <p class="subtitle is-7 has-text-grey">
-                <span class="icon-text">
-                    <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
-                    <span>April 2020</span>
-                </span>
-            </p>
-            <p>The Game Jam is similar to our Code Jams, but smaller in scope. Instead of having to complete a qualifier
-            and being teamed up with random strangers, members of our community can just sign-up individually or pair up
-            with whoever they like.</p>
-        </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <p class="image">
+                    <img class="is-rounded" src="https://user-images.githubusercontent.com/33516116/77593036-5fb09780-6eeb-11ea-9feb-336b2e5e23de.png" style="width: 3rem;">
+                </p>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="{% url "events:page" path="game-jams" %}">Game Jam</a></h2>
+                    <p class="subtitle is-7 has-text-grey">
+                        <span class="icon-text">
+                            <span class="date-icon icon"><i class="fa-regular fa-calendar"></i></span>
+                            <span>April 2020</span>
+                        </span>
+                    </p>
+                    <p>The Game Jam was similar to our Code Jams, but smaller in scope. Instead of having to complete a qualifier and being teamed up with random strangers, members of our community can just sign-up individually or pair up with whoever they like.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="{% url "events:page" path="game-jams" %}">
+                    <span class="icon"><i class="fas fa-circle-info"></i></span>
+                    <span>Learn more</span>
+                </a>
+            </div>
+        </article>
     </div>
 </div>
diff --git a/pydis_site/templates/events/pages/adventofcode/_index.html b/pydis_site/templates/events/pages/adventofcode/_index.html
index b45ef33b..fd9ba06d 100644
--- a/pydis_site/templates/events/pages/adventofcode/_index.html
+++ b/pydis_site/templates/events/pages/adventofcode/_index.html
@@ -10,7 +10,7 @@
 {% block event_content %}
 <p>
     Each year, many of our members take part of an online coding competition called
-    <a href="https://adventofcode.com/" target="_blank" rel="noopener">Advent of Code</a> that takes place in December. Advent of Code is an
+    <a href="https://adventofcode.com/" target="_blank" rel="noopener">Advent of Code (AoC)</a> that takes place in December. Advent of Code is an
     Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved
     in any programming language you like, including Python.
 </p>
diff --git a/pydis_site/templates/events/pages/revivalofcode/_index.html b/pydis_site/templates/events/pages/revivalofcode/_index.html
index 668c2d67..bc686faa 100644
--- a/pydis_site/templates/events/pages/revivalofcode/_index.html
+++ b/pydis_site/templates/events/pages/revivalofcode/_index.html
@@ -10,7 +10,7 @@
 {% block event_content %}
 <p>
     Each year, many of our members take part of an online coding competition called
-    <a href="https://adventofcode.com/" target="_blank" rel="noopener">Advent of Code</a> that takes place in December. Advent of Code is an
+    <a href="https://adventofcode.com/" target="_blank" rel="noopener">Advent of Code (AoC)</a> that takes place in December. Advent of Code is an
     Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved
     in any programming language you like, including Python.
 </p>
diff --git a/pydis_site/templates/events/scheduled_events.html b/pydis_site/templates/events/scheduled_events.html
new file mode 100644
index 00000000..fe287b4d
--- /dev/null
+++ b/pydis_site/templates/events/scheduled_events.html
@@ -0,0 +1,118 @@
+<div class="box" id="scheduled-events">
+    <h2 class="title is-5" style="margin-bottom: 2rem;">Scheduled events</h2>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="https://pyweek.org/37/"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="https://pyweek.org/37/">PyWeek 37</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>March 17-24, 2024</span>
+                    </span>
+                </p>
+                <p>The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.</p>
+            </div>
+            <a class="button is-small is-link is-outlined" href="https://pyweek.org/37/">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="revivalofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>May 2024</span>
+                    </span>
+                </p>
+                <p>Revisit past years' Advent of Code problems! Puzzles are relased every other day and there will be dedicated solution threads for you to discuss with other participants.</p>
+            </div>
+            <a class="button is-small is-link is-outlined" href="{% url "events:page" path="revivalofcode" %}">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="code-jams" %}"><img class="is-rounded" src="/static/images/events/icons/codejam.svg"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jam</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>July 2024</span>
+                    </span>
+                </p>
+                <p>Our annual code-jam where we place you in a team of five and you have 11 days to code some sort of application or program in Python based on a selected technology or framework.</p>
+            </div>
+            <a class="button is-small is-link is-outlined" href="{% url "events:page" path="code-jams" %}">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek 38</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>September 2024</span>
+                    </span>
+                </p>
+                <p>The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.</p>
+            </div>
+            <a class="button is-small is-link is-outlined" href="https://pyweek.org/">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of Code</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>December 1-25, 2024</span>
+                    </span>
+                </p>
+                <p>Daily programming puzzles with increasing difficulties where each puzzle has a little story and you can discuss solutions with other participants. You are allowed to use any programming language you like.</p>
+            </div>
+            <a class="button is-small is-link is-outlined" href="{% url "events:page" path="adventofcode" %}">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+</div>
diff --git a/pydis_site/templates/events/sidebar/adventofcode/useful-links.html b/pydis_site/templates/events/sidebar/adventofcode/useful-links.html
index 8b0b3c6f..11dafcb8 100644
--- a/pydis_site/templates/events/sidebar/adventofcode/useful-links.html
+++ b/pydis_site/templates/events/sidebar/adventofcode/useful-links.html
@@ -2,7 +2,7 @@
     <div class="has-text-centered">
         <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
     </div>
-    <p class="menu-label">Advent of Code Links</p>
+    <p class="menu-label">Quick links</p>
     <ul class="menu-list">
         <li><a class="has-text-link" href="https://adventofcode.com">Homepage</a></li>
         <li><a class="has-text-link" href="https://reddit.com/r/adventofcode">Reddit</a></li>
diff --git a/pydis_site/templates/events/sidebar/events_list.html b/pydis_site/templates/events/sidebar/main_sidebar.html
index 3a3bb1dd..4f7272bc 100644
--- a/pydis_site/templates/events/sidebar/events_list.html
+++ b/pydis_site/templates/events/sidebar/main_sidebar.html
@@ -1,5 +1,5 @@
-<div class="box previous-events">
-    <h2 class="title is-5">Previous events from 2023</h2>
+<div class="box" id="previous-events">
+    <h2 class="title is-5">Previous events</h2>
     <article class="media">
         <div class="media-left">
             <p class="image is-32x32">
@@ -9,7 +9,7 @@
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="https://pyweek/35/">PyWeek 35</a></h5>
-                <p class="subtitle is-6">March</p>
+                <p class="subtitle is-6">March 2023</p>
             </div>
         </div>
     </article>
@@ -22,7 +22,7 @@
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="{% url "events:page" path="code-jams/10" %}">Summer Code Jam 2023</a></h5>
-                <p class="subtitle is-6">August</p>
+                <p class="subtitle is-6">August 2023</p>
             </div>
         </div>
     </article>
@@ -35,7 +35,7 @@
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="https://pyweek/36/">PyWeek 36</a></h5>
-                <p class="subtitle is-6">September</p>
+                <p class="subtitle is-6">September 2023</p>
             </div>
         </div>
     </article>
@@ -48,7 +48,7 @@
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="https://adventofcode.com/2023">Advent of Code 2023</a></h5>
-                <p class="subtitle is-6">December</p>
+                <p class="subtitle is-6">December 2023</p>
             </div>
         </div>
     </article>
@@ -56,14 +56,11 @@
 
 <div class="is-hidden-mobile">
     <div class="box">
-        <h4 class="title is-5">All events</h4>
+        <h4 class="title is-5">Table of contents</h4>
         <ul class="menu-list" style="margin-top: 0;">
-            <li><a class="has-text-link" href="{% url "events:page" path="code-jams" %}">Code Jams</a></li>
-            <li><a class="has-text-link" href="{% url "events:page" path="pyweek" %}">PyWeek</a></li>
-            <li><a class="has-text-link" href="{% url "events:page" path="pixels" %}">Pixels</a></li>
-            <li><a class="has-text-link" href="{% url "events:page" path="adventofcode" %}">Advent of Code</a></li>
-            <li><a class="has-text-link" href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></li>
-            <li><a class="has-text-link" href="{% url "events:page" path="game-jams" %}">Game Jams</a></li>
+            <li><a class="has-text-link" href="#scheduled-events">Scheduled events</a></li>
+            <li><a class="has-text-link" href="#main-events">Annual events</a></li>
+            <li><a class="has-text-link" href="#other-events">Other events</a></li>
         </ul>
     </div>
 </div>
diff --git a/pydis_site/templates/events/sidebar/revivalofcode.html b/pydis_site/templates/events/sidebar/revivalofcode.html
index 8b0b3c6f..6bcf9dbc 100644
--- a/pydis_site/templates/events/sidebar/revivalofcode.html
+++ b/pydis_site/templates/events/sidebar/revivalofcode.html
@@ -2,9 +2,9 @@
     <div class="has-text-centered">
         <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
     </div>
-    <p class="menu-label">Advent of Code Links</p>
+    <p class="menu-label">Quick links</p>
     <ul class="menu-list">
-        <li><a class="has-text-link" href="https://adventofcode.com">Homepage</a></li>
-        <li><a class="has-text-link" href="https://reddit.com/r/adventofcode">Reddit</a></li>
+        <li><a class="has-text-link" href="https://adventofcode.com">AoC Homepage</a></li>
+        <li><a class="has-text-link" href="https://reddit.com/r/adventofcode">AoC Reddit</a></li>
     </ul>
 </div>