2 files changed, 139 insertions, 14 deletions
diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index c45d551e..593c158b 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -88,36 +88,37 @@ main.site-content {
 }
 
 #linode-logo {
-    padding-left: 15px;
-    background: url(https://www.linode.com/wp-content/uploads/2021/01/Linode-Logo-Black.svg) no-repeat center;
-    filter: invert(1) grayscale(1);
-    background-size: 60px;
+    padding-left: 5px;
+    background: url(/static/images/sponsors_dark/linode_text.png) no-repeat center;
+    background-size: 49px;
+    background-position: 2px center;
     color: #00000000;
 }
 
 #netcup-logo {
     padding-left: 15px;
+    padding-bottom: 3px;
     background: url(/static/images/sponsors/netcup-white.svg) no-repeat center;
     background-size: 60px;
-    background-position: 0px 3px;
+    background-position: 2px 4px;
     color: #00000000;
 }
 
 #django-logo {
-    padding-bottom: 2px;
-    background: url(https://static.djangoproject.com/img/logos/django-logo-negative.svg) no-repeat center;
-    filter: grayscale(1) invert(0.09);
-    background-size: 52px 25.5px;
-    background-position: -2px -1px;
+    padding-bottom: 4px;
+    padding-left: 5px;
+    background: url(/static/images/events/logos_dark/django.png) no-repeat center;
+    background-size: 56px;
+    background-position: -1px 1px;
     color: #00000000;
 }
 
 #bulma-logo {
-    padding-left: 18px;
+    padding-left: 8px;
     height: 20px;
-    background: url(https://bulma.io/assets/brand/Bulma%20Logo%20White.png) no-repeat center;
-    background-size: 60px;
-    background-position: 0px 3px;
+    background: url(https://bulma.io/assets/brand/Bulma%20Wordmark%20White.png) no-repeat center;
+    background-size: 47px;
+    background-position: center center;
     color: #00000000;
 }
 
diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css
index cd7ab5ae..7982c9df 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -32,3 +32,127 @@ pre {
 .box .sponsor {
     margin-bottom: 1rem;
 }
+
+.event-gallery .date-icon, #main-section .date-icon {
+    margin-left: -.25rem;
+}
+
+.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 {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+
+    #previous-events .media-left {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+}
+
+/* CSS-only Masonry layout:
+ * https://tobiasahlin.com/blog/masonry-with-css/
+ *
+ * Adapted for responsiveness:
+ * - Mobile   (<=700px)   No columns at all
+ * - Tablets  (700~900px) Two columns Masonry
+ * - Desktop+ (>=900px)   Three columns Masonry
+ */
+@media (min-width: 700px) {
+    .event-gallery {
+        display: flex;
+        flex-flow: column wrap;
+        align-content: space-between;
+    }
+
+    #other-events-section {
+        height: 63rem;
+    }
+
+    #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-section {
+            /* Required. Must be only slightly taller than the tallest column */
+            height: 68rem;
+        }
+
+        #main-events-section .card {
+            width: calc(33% - 1rem);
+        }
+
+        /* Reorder vertically */
+        #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. */
+        #main-events-section::before, #main-events-section::after {
+            content: "";
+            flex-basis: 100%;
+            width: 0;
+            order: 2;
+        }
+    }
+
+    @media (max-width: 900px) {
+        /* 2 columns */
+        #main-events-section {
+            height: 96rem;
+        }
+
+        #other-events-section {
+            height: 83rem;
+        }
+
+        #main-events-section .card {
+            width: calc(50% - 1rem);
+        }
+
+        #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. */
+        #main-events-section::before {
+            content: "";
+            flex-basis: 100%;
+            width: 0;
+            order: 1;
+        }
+    }
+}