Events: Adjust date style & add more events

2 files changed, 98 insertions, 65 deletions

diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html
index b7b903a8..d2666eb7 100644
--- a/pydis_site/templates/events/main_events.html
+++ b/pydis_site/templates/events/main_events.html
@@ -4,18 +4,18 @@
     <h2 class="title is-4">Annual events</h2>
 </div>
 <br>
+
+{# These events are sorted based on priority #}
 <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>
+            <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>July to August</span>
                 </span>
-            </div>
+            </p>
             <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>
@@ -25,14 +25,12 @@
         </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>
+            <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>March & September</span>
                 </span>
-            </div>
+            </p>
             <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>
@@ -42,14 +40,12 @@
         </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>
+            <p class="subtitle is-7 has-text-grey">
+                <span class="icon-text ml-0">
+                    <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                    <span>Not fixed</span>
                 </span>
-            </div>
+            </p>
             <p>A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.</p>
         </div>
     </div>
@@ -59,14 +55,12 @@
         </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>
+            <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>December</span>
                 </span>
-            </div>
+            </p>
             <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>
@@ -76,14 +70,12 @@
         </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>
+            <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>July to August</span>
                 </span>
-            </div>
+            </p>
             <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>
diff --git a/pydis_site/templates/events/other_events.html b/pydis_site/templates/events/other_events.html
index ae35bee9..178cd876 100644
--- a/pydis_site/templates/events/other_events.html
+++ b/pydis_site/templates/events/other_events.html
@@ -4,24 +4,52 @@
     <h2 class="title is-4">Workshops & other events</h2>
 </div>
 <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="/static/images/events/gallery/gamejam.png" alt="Game Jam 2020">
+            <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Fancy Hats">
         </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>
+            <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>
-            </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>
+            </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>
+    <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>
+    <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>
     <div class="card">
@@ -29,33 +57,46 @@
             <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>
+            <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>
-            </div>
+            </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>
     <div class="card">
         <div class="card-image">
-            <img src="/static/images/events/gallery/devops_hour.png" alt="DevOps Hour">
+            <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>
+    <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="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>
+            <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>
-            </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>
+            </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>
 </div>