Events: Adjust spacing

4 files changed, 51 insertions, 35 deletions

diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css
index 80be4338..25b4f4e2 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -21,6 +21,24 @@ pre {
 
 .event-gallery .card {
     border-radius: 6px;
+    margin-bottom: 1.5rem;
+}
+
+.event-gallery .card img {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+@media (min-width: 700px) {
+    .scheduled-events .media-left {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+
+    .previous-events .media-left {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
 }
 
 /* CSS-only Masonry layout:
@@ -42,12 +60,11 @@ pre {
         /* 3 columns */
         .event-gallery {
             /* Required. Must be only slightly taller than the tallest column */
-            height: 60rem;
+            height: 70rem;
         }
 
         .event-gallery .card {
             width: calc(33% - 1rem);
-            margin-bottom: 1rem;
         }
 
         /* Reorder vertically */
@@ -67,12 +84,11 @@ pre {
     @media (max-width: 900px) {
         /* 2 columns */
         .event-gallery {
-            height: 80rem;
+            height: 90rem;
         }
 
         .event-gallery .card {
             width: calc(50% - 1rem);
-            margin-bottom: 1rem;
         }
 
         .event-gallery .card:nth-child(2n+1) { order: 1; }
diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html
index dd59b040..735f1eb4 100644
--- a/pydis_site/templates/events/current_event.html
+++ b/pydis_site/templates/events/current_event.html
@@ -8,7 +8,7 @@
     <div class="columns is-3" 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/">PyWeek 37</a></h2>
+            <h2 class="title is-4"><a href="https://pyweek.org/37/">PyWeek 37</a></h2>
             <p><strong>March 17-24</strong></p>
         </div>
         <div class="column">
@@ -16,5 +16,5 @@
         </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/">Learn more</a>
+    <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>
 </div>
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html
index df83d895..aeb7a218 100644
--- a/pydis_site/templates/events/index.html
+++ b/pydis_site/templates/events/index.html
@@ -12,29 +12,29 @@
         <p>Briefly describe events. Explain how to subscribe to updates from the <code>#roles</code> channel.</p>
         {% include "events/current_event.html" %}
 
-            <div class="box">
+            <div class="box scheduled-events">
                 <h2 class="title is-5" style="margin-bottom: 2rem;">Scheduled events for 2024</h2>
                 <article class="media">
-                    <figure class="media-left">
+                    <div class="media-left">
                         <p class="image is-64x64">
-                            <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
+                            <a href="https://pyweek.org/37/"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
                         </p>
-                    </figure>
+                    </div>
                     <div class="media-content">
                         <div class="content">
-                            <h5 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek 37</a></h5>
+                            <h5 class="title is-4"><a href="https://pyweek.org/37/">PyWeek 37</a></h5>
                             <p class="subtitle is-6">March 17-24</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/">Learn more</a>
+                        <a class="button is-small is-link is-outlined" href="https://pyweek.org/37/">Learn more</a>
                     </div>
                 </article>
                 <article class="media">
-                    <figure class="media-left">
+                    <div class="media-left">
                         <p class="image is-64x64">
-                            <img class="is-rounded" src="/static/images/events/icons/adventofcode.png">
+                            <a href="{% url "events:page" path="revivalofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
                         </p>
-                    </figure>
+                    </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>
@@ -45,26 +45,26 @@
                     </div>
                 </article>
                 <article class="media">
-                    <figure class="media-left">
+                    <div class="media-left">
                         <p class="image is-64x64">
-                            <img class="is-rounded" src="/static/images/events/icons/codejam.svg">
+                            <a href="{% url "events:page" path="code-jams" %}"><img class="is-rounded" src="/static/images/events/icons/codejam.svg"></a>
                         </p>
-                    </figure>
+                    </div>
                     <div class="media-content">
                         <div class="content">
-                            <h5 class="title is-4"><a href="{% url "events:page" path="codejams" %}">Code Jam</a></h5>
+                            <h5 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jam</a></h5>
                             <p class="subtitle is-6">TBD</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="codejams" %}">Learn more</a>
+                        <a class="button is-small is-link is-outlined" href="{% url "events:page" path="code-jams" %}">Learn more</a>
                     </div>
                 </article>
                 <article class="media">
-                    <figure class="media-left">
+                    <div class="media-left">
                         <p class="image is-64x64">
-                            <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
+                            <a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
                         </p>
-                    </figure>
+                    </div>
                     <div class="media-content">
                         <div class="content">
                             <h5 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek 38</a></h5>
@@ -75,11 +75,11 @@
                     </div>
                 </article>
                 <article class="media">
-                    <figure class="media-left">
+                    <div class="media-left">
                         <p class="image is-64x64">
-                            <img class="is-rounded" src="/static/images/events/icons/adventofcode.png">
+                            <a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
                         </p>
-                    </figure>
+                    </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>
diff --git a/pydis_site/templates/events/sidebar/events_list.html b/pydis_site/templates/events/sidebar/events_list.html
index df443e8d..3a3bb1dd 100644
--- a/pydis_site/templates/events/sidebar/events_list.html
+++ b/pydis_site/templates/events/sidebar/events_list.html
@@ -1,11 +1,11 @@
-<div class="box">
+<div class="box previous-events">
     <h2 class="title is-5">Previous events from 2023</h2>
     <article class="media">
-        <figure class="media-left">
+        <div class="media-left">
             <p class="image is-32x32">
                 <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
             </p>
-        </figure>
+        </div>
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="https://pyweek/35/">PyWeek 35</a></h5>
@@ -14,11 +14,11 @@
         </div>
     </article>
     <article class="media">
-        <figure class="media-left">
+        <div class="media-left">
             <p class="image is-32x32">
                 <img class="is-rounded" src="/static/images/events/icons/codejam.svg">
             </p>
-        </figure>
+        </div>
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="{% url "events:page" path="code-jams/10" %}">Summer Code Jam 2023</a></h5>
@@ -27,11 +27,11 @@
         </div>
     </article>
     <article class="media">
-        <figure class="media-left">
+        <div class="media-left">
             <p class="image is-32x32">
                 <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
             </p>
-        </figure>
+        </div>
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="https://pyweek/36/">PyWeek 36</a></h5>
@@ -40,11 +40,11 @@
         </div>
     </article>
     <article class="media">
-        <figure class="media-left">
+        <div class="media-left">
             <p class="image is-32x32">
                 <img class="is-rounded" src="/static/images/events/icons/adventofcode.png">
             </p>
-        </figure>
+        </div>
         <div class="media-content">
             <div class="content">
                 <h5 class="title is-5"><a href="https://adventofcode.com/2023">Advent of Code 2023</a></h5>