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.

1 files changed, 118 insertions, 0 deletions

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>