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, 146 insertions, 87 deletions

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>