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, 50 insertions, 23 deletions

diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css
index 6b2642bb..55725f75 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -19,27 +19,40 @@ pre {
     margin-bottom: 0 !important
 }
 
-.event-gallery .date-icon {
+.event-gallery .date-icon, #main-section .date-icon {
     margin-left: -.25rem;
 }
 
-.event-gallery .card {
+.event-gallery .card, .event-gallery .box {
     border-radius: 6px;
     margin-bottom: 1.5rem;
 }
 
+/* We are using bulma cards as boxes here to take advantage of the card's
+ * header image component */
 .event-gallery .card img {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 }
 
+/* Custom component: A colored line at the top of a card that can be styled
+ * with bulma's has-background-* classes.*/
+.card .colored-line {
+    /* A default color as grey */
+    background-color: #C1C1C1;
+    height: .3rem;
+    display: block;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
 @media (min-width: 700px) {
-    .scheduled-events .media-left {
+    #scheduled-events .media-left {
         margin-left: 2rem;
         margin-right: 2rem;
     }
 
-    .previous-events .media-left {
+    #previous-events .media-left {
         margin-left: 1rem;
         margin-right: 1rem;
     }
@@ -60,28 +73,42 @@ pre {
         align-content: space-between;
     }
 
+    #other-events-section {
+        height: 62rem;
+    }
+
+    #other-events-section .box {
+        width: calc(50% - 1rem);
+    }
+
+    #other-events-section .box:nth-child(2n+1) { order: 1; }
+    #other-events-section .box:nth-child(2n)   { order: 2; }
+
+    #other-events-section::before {
+        content: "";
+        flex-basis: 100%;
+        width: 0;
+        order: 2;
+    }
+
     @media (min-width: 900px) {
         /* 3 columns */
-        #main-events {
+        #main-events-section {
             /* Required. Must be only slightly taller than the tallest column */
-            height: 65rem;
-        }
-
-        #other-events {
-            height: 75rem;
+            height: 67rem;
         }
 
-        .event-gallery .card {
+        #main-events-section .card {
             width: calc(33% - 1rem);
         }
 
         /* Reorder vertically */
-        .event-gallery .card:nth-child(3n+1) { order: 1; }
-        .event-gallery .card:nth-child(3n+2) { order: 2; }
-        .event-gallery .card:nth-child(3n)   { order: 3; }
+        #main-events-section .card:nth-child(3n+1) { order: 1; }
+        #main-events-section .card:nth-child(3n+2) { order: 2; }
+        #main-events-section .card:nth-child(3n)   { order: 3; }
 
         /* 2 line breaks to force new columns, for each gap between the three columns. */
-        .event-gallery::before, .event-gallery::after {
+        #main-events-section::before, #main-events-section::after {
             content: "";
             flex-basis: 100%;
             width: 0;
@@ -91,23 +118,23 @@ pre {
 
     @media (max-width: 900px) {
         /* 2 columns */
-        #main-events {
-            height: 100rem;
+        #main-events-section {
+            height: 80rem;
         }
 
-        #other-events {
-            height: 110rem;
+        #other-events-section {
+            height: 80rem;
         }
 
-        .event-gallery .card {
+        #main-events-section .card {
             width: calc(50% - 1rem);
         }
 
-        .event-gallery .card:nth-child(2n+1) { order: 1; }
-        .event-gallery .card:nth-child(2n)   { order: 2; }
+        #main-events-section.card:nth-child(2n+1) { order: 1; }
+        #main-events-section.card:nth-child(2n)   { order: 2; }
 
         /* 1 line break to force a new column, for the gap between the two columns. */
-        .event-gallery::before {
+        #main-events-section::before {
             content: "";
             flex-basis: 100%;
             width: 0;