Events: Initial redesign

- Added standalone pages for each event
- Added initial design of new layout
- Refactored some sidebars and templates to update current/upcoming
  event
- Put two CJ10 assets into their own dedicated folder

Includes dummy text for event descriptions and content that is not
up-to-date: Current and Upcoming event components.

1 files changed, 83 insertions, 74 deletions

diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html
index 071feb35..547368da 100644
--- a/pydis_site/templates/events/index.html
+++ b/pydis_site/templates/events/index.html
@@ -1,4 +1,4 @@
-{% extends "events/base_sidebar.html" %}
+{% extends "events/base.html" %}
 
 {% block title %}Events{% endblock %}
 
@@ -6,95 +6,104 @@
     <li class="is-active"><a href="#">Events</a></li>
 {% endblock %}
 
-{% block event_content %}
-    <div class="box">
-        <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2>
-        <p>Every year we hold a community-wide Summer Code Jam. For this event, members of our community are assigned to teams to collaborate and create something amazing using a technology we picked for them. One such technology that was picked for the Summer 2021 Code Jam was text user interfaces (TUIs), where teams could pick from a pre-approved list of frameworks.</p>
-        <p>To help fuel the creative process, we provide a specific theme, like <strong>Think Inside the Box</strong> or <strong>Early Internet</strong>. At the end of the Code Jam, the projects are judged by Python Discord server staff members and guest judges from the larger Python community. The judges will consider creativity, code quality, teamwork, and adherence to the theme.</p>
-        <p>If you want to read more about Code Jams, visit our <a href="{% url "events:page" path="code-jams" %}">Code Jam info page</a> or watch this video showcasing the best projects created during the <strong>Winter Code Jam 2020: Ancient Technology</strong>:</p>
-        <iframe style="max-width: 100%;" width="560" height="315" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
-    </div>
+{% 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" %}
+
+        {% include "events/upcoming_event.html" %}
 
-    <div class="box">
-        <h2 class="title is-4">PyWeek</h2>
+        <h2 class="title is-4">Scheduled events</h2>
         <div class="columns is-3" style="--columnGap: 0.75rem;">
             <div class="column">
-                <p>
-                    For the past 15 years, <a href="https://pyweek.org" target="_blank" rel="noopener">PyWeek</a> has been running a bi-annual game jam for the
-                    Python language. As of 2020, we are excited to say we are officially partnered with PyWeek to co-run these
-                    events.
-                </p>
-                <p>
-                    During each PyWeek event, we open a special discussion channel in which our members can discuss their
-                    submissions, meet other participants, and talk to PyWeek staff. The PyWeek organizer,
-                    Daniel Pope (<a href="https://twitter.com/lordmauve" target="_blank" rel="noopener">@lordmauve</a>) will be present during the entire event to answer
-                    questions and post announcements and information in our community.
-                </p>
-                <p>
-                    Unlike our other events, the <strong>community</strong> will select the winner from all the submissions
-                    during PyWeek. We may release YouTube content showcasing the best submissions after the events are finished.
-                </p>
+                <div class="box">
+                    <h2 class="title is-6">January-June</h2>
+                    <ul>
+                        <li>March: <a href="{% url "events:page" path="pyweek" %}">Pyweek</a></li>
+                    </ul>
+                </div>
             </div>
-            <div class="column is-3">
-                <img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="border-radius: 10px;" alt="">
+            <div class="column">
+                <div class="box">
+                    <h2 class="title is-6">July-December</h2>
+                    <ul>
+                        <li><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></li>
+                        <li><a href="{% url "events:page" path="code-jams" %}">Code Jam</a></li>
+                        <li>September: <a href="{% url "events:page" path="pyweek" %}">Pyweek</a></li>
+                        <li>December 1-25: <a href="{% url "events:page" path="adventofcode" %}">Advent of Code</a></li>
+                    </ul>
+                </div>
             </div>
         </div>
     </div>
+    <div class="column">
+        {% include "events/sidebar/events_list.html" %}
+    </div>
+</div>
 
-    <div class="box">
-        <h2 class="title is-4">Advent of Code</h2>
-        <div class="columns is-3" style="--columnGap: 0.75rem;">
-            <div class="column">
-                <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
-                    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>
-                <p>
-                    During the event, we will open a special discussion channel in which our members can discuss the puzzles
-                    and compare their solutions. We will also open a private leaderboard and may even reward the best scoring
-                    members on that board with prizes!
-                </p>
-                <p>
-                    However, this event isn't purely competitive. You can also join in just to see how far you'll get, to
-                    challenge yourself, as a way of learning Python, or just for the fun of it. In 2019, almost 200 members
-                    signed up for our private leaderboard, but many more took on the challenge without focusing on the
-                    competitive aspect.
-                </p>
+
+<h2 class="title is-4">All events</h2>
+<div class="columns is-multiline event-gallery">
+
+    <div class="column is-one-third-desktop is-half-tablet">
+        <div class="box">
+            <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2>
+            <p>Once a year we host a code jam for members of our server to participate in. The code jam is an event where we place you in a team with 5 other random server members. You then have 11 days to code some sort of application or program in Python. Your program must use the specified technology/framework and incorporate the theme chosen by the server.</p>
+        </div>
+    </div>
+
+    <div class="column is-one-third-desktop is-half-tablet">
+        <div class="box">
+            <h2 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">Pyweek</a></h2>
+            <p>For the past 15 years, PyWeek has been running a bi-annual game jam for the Python language. As of 2020, we are excited to say we are officially partnered with PyWeek to co-run these events.</p>
+            <div class="has-text-centered">
+                <img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="max-width: 100%;" alt="Pyweek logo">
             </div>
-            <div class="column is-3">
-                <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="">
+        </div>
+    </div>
+
+    <div class="column is-one-third-desktop is-half-tablet">
+        <div class="box">
+            <h2 class="title is-4"><a href="{% url "events:page" path="pixels" %}">Pixels</a></h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.</p>
+            <div class="has-text-centered">
+                <img src="/static/images/events/pixels_logo_transparent.gif" alt="Logo for pixels">
             </div>
         </div>
     </div>
 
-    <div class="box">
-        <h2 class="title is-4">Game Jam</h2>
-        <div class="columns is-3" style="--columnGap: 0.75rem;">
-            <div class="column">
-                <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>
-                <p>
-                    The participants will have ten days to create a game using the technology we've selected, and drawing
-                    inspiration from a provided theme. After the event, a panel of judges will play all the games and select a
-                    winner. The top 5 will featured in a special video on our <a href="https://www.youtube.com/channel/UCQsrA4xo6jvdgsJZhKaBL6w" target="_blank" rel="noopener">YouTube channel</a>.
-                </p>
-                <p>
-                    The <a class="has-text-link" href="{% url "events:page" path="game-jams/2020" %}">first edition of the Game Jam</a> ran from
-                    <strong>April 17, 2020 to April 26, 2020</strong>.
-                </p>
+    <div class="column is-one-third-desktop is-half-tablet">
+        <div class="box">
+            <h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of code</a></h2>
+            <p>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>
+            <div class="has-text-centered">
+                <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" alt="Server icon for AoC">
             </div>
-            <div class="column is-3">
-                <img src="https://user-images.githubusercontent.com/33516116/77593036-5fb09780-6eeb-11ea-9feb-336b2e5e23de.png" style="border-radius: 10px;" alt="">
+        </div>
+    </div>
+
+    <div class="column is-one-third-desktop is-half-tablet">
+        <div class="box">
+            <h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.</p>
+            <div class="has-text-centered">
+                <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" alt="Server icon for AoC">
             </div>
         </div>
     </div>
-{% endblock %}
 
-{% block sidebar %}
-    {% include "events/sidebar/events-list.html" %}
+    <div class="column is-one-third-desktop is-half-tablet">
+        <div class="box">
+            <h2 class="title is-4"><a href="{% url "events:page" path="game-jams" %}">Game Jams</a></h2>
+            <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 class="has-text-centered">
+                <img src="https://user-images.githubusercontent.com/33516116/77593036-5fb09780-6eeb-11ea-9feb-336b2e5e23de.png" alt="Game Jam 2020">
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}