Redesign of events page

pydis_site/apps/events/README.md

@@ -16,4 +16,6 @@ This app has a relatively minimal structure:
   matching Django template.
 
 The actual content lives in the [templates directory two layers
-up](../../templates/events).
+up](../../templates/events). Read the
+[README.md](../../templates/events/README.md) in that directory for more
+details.

pydis_site/settings.py

@@ -323,6 +323,7 @@
         "primary": "#5365A4",         # A darker PyDis blurple
         "warning": "#4B4636",
         "warning-invert": "#FFFFFF",
+        "warning-light": "#3B3B36",
         "primary-dark": "#EFF1FB",    # Bulma's primary-light
         "primary-light": "#2B3660",
         "success-dark": "#EFFAF5",    # Bulma's success-light
@@ -347,6 +348,7 @@
         "black-ter": "#E6E6E6",
         "dark": "$black",
 
+        "grey": "#AFAFAF",
         "grey-darker": "#303032",
 
         "text": "#F4F4F4",

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;
+        }
+    }
+}