Events: Add one-time events, fix elements

4 files changed, 169 insertions, 64 deletions

diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html
index 735f1eb4..b264a6ab 100644
--- a/pydis_site/templates/events/current_event.html
+++ b/pydis_site/templates/events/current_event.html
@@ -4,17 +4,25 @@
 {# (n/a) #}
 
 {# Next event to promote #}
-<div class="box has-background-warning-light" style="padding: 2rem; padding-top: 1.25rem;">
-    <div class="columns is-3" style="--columnGap: 0.75rem;">
+<div class="box has-background-warning-light" style="padding: 2rem; padding-top: .75rem;">
+    <small class="has-text-grey">Upcoming event</small>
+    <div class="columns is-3 mt-1" style="--columnGap: 0.75rem;">
         <div class="column">
-            <p class="subtitle is-6 has-text-grey" style="padding-bottom: 1rem;">Upcoming event</p>
             <h2 class="title is-4"><a href="https://pyweek.org/37/">PyWeek 37</a></h2>
-            <p><strong>March 17-24</strong></p>
+            <p class="subtitle is-6" style="margin-top: -.75rem;">
+                <span class="icon-text">
+                    <span class="icon"><i class="fa-regular fa-calendar"></i></span><span>March 17-24</span>
+                </span>
+            </p>
         </div>
         <div class="column">
             <img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="border-radius: 10px;" alt="PyWeek logo">
         </div>
     </div>
     <p>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>
-    <a class="button is-link" href="https://pyweek.org/37/">Learn more <span class="icon is-white"><i class="fa-regular fa-arrow-right"></i></span></a>
+    <a class="button is-link" href="https://pyweek.org/37/">
+        <span class="icon-text">
+            <span>Learn more</span><span class="icon has-text-white"><i class="fa-solid fa-arrow-right"></i></span>
+        </span>
+    </a>
 </div>
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html
index aeb7a218..b0522e39 100644
--- a/pydis_site/templates/events/index.html
+++ b/pydis_site/templates/events/index.html
@@ -96,63 +96,9 @@
     </div>
 </div>
 
-
-<h2 class="title is-4">All events</h2>
-<div class="event-gallery">
-    <div class="card">
-        <div class="card-content">
-            <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="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/pyweek.png" alt="PyWeek logo">
-        </div>
-        <div class="card-content">
-            <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>
-    </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/pixels.png" alt="Logo for pixels">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="{% url "events:page" path="pixels" %}">Pixels</a></h2>
-            <p>A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.</p>
-        </div>
-    </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
-        </div>
-        <div class="card-content">
-            <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>
-    </div>
-    <div class="card">
-        <div class="card-image">
-            <img src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
-        </div>
-        <div class="card-content">
-            <h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h2>
-            <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">
-        <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 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>
-    </div>
-</div>
+<br>
+<hr/>
+{% include "events/main_events.html" %}
+<hr/>
+{% include "events/other_events.html" %}
 {% endblock %}
diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html
new file mode 100644
index 00000000..b7b903a8
--- /dev/null
+++ b/pydis_site/templates/events/main_events.html
@@ -0,0 +1,90 @@
+{% load static %}
+
+<div class="has-text-centered">
+    <h2 class="title is-4">Annual events</h2>
+</div>
+<br>
+<div class="event-gallery" id="main-events">
+    <div class="card">
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>July to August</span>
+                    </span>
+                </span>
+            </div>
+            <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="card">
+        <div class="card-image">
+            <img src="/static/images/events/gallery/pyweek.png" alt="PyWeek logo">
+        </div>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>March & September</span>
+                    </span>
+                </span>
+            </div>
+            <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>
+    </div>
+    <div class="card">
+        <div class="card-image">
+            <img src="/static/images/events/gallery/pixels.png" alt="Logo for pixels">
+        </div>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="pixels" %}">Pixels</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>???</span>
+                    </span>
+                </span>
+            </div>
+            <p>A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-image">
+            <img src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
+        </div>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of code</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>December</span>
+                    </span>
+                </span>
+            </div>
+            <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>
+    </div>
+    <div class="card">
+        <div class="card-image">
+            <img src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
+        </div>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>July to August</span>
+                    </span>
+                </span>
+            </div>
+            <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>
diff --git a/pydis_site/templates/events/other_events.html b/pydis_site/templates/events/other_events.html
new file mode 100644
index 00000000..ae35bee9
--- /dev/null
+++ b/pydis_site/templates/events/other_events.html
@@ -0,0 +1,61 @@
+{% load static %}
+
+<div class="has-text-centered">
+    <h2 class="title is-4">Workshops & other events</h2>
+</div>
+<br>
+<div class="event-gallery" id="other-events">
+    <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 Jams</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>April 2020</span>
+                    </span>
+                </span>
+            </div>
+            <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>
+    <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="{% url "events:page" path="replace" %}">[add-link] Trivia Night</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>Feb. 12, 2022</span>
+                    </span>
+                </span>
+            </div>
+            <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>
+    <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="{% url "events:page" path="replace" %}">[add-link] DevOps Hour with Joe Banks</a></h2>
+            <div class="tags">
+                <span class="tag">
+                    <span class="icon-text">
+                        <span class="icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>Jul. 26, 2022</span>
+                    </span>
+                </span>
+            </div>
+            <p>On 26 July 2022 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>
+</div>