Merge pull request #1210 from python-discord/feat/events-redesign

Redesign of events page

37 files changed, 1110 insertions, 117 deletions

diff --git a/pydis_site/apps/events/README.md b/pydis_site/apps/events/README.md
index f0d20510..c55ba504 100644
--- a/pydis_site/apps/events/README.md
+++ b/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.
diff --git a/pydis_site/settings.py b/pydis_site/settings.py
index f7574153..aeb704d8 100644
--- a/pydis_site/settings.py
+++ b/pydis_site/settings.py
@@ -323,6 +323,7 @@ BULMA_SETTINGS = {
         "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 @@ BULMA_SETTINGS = {
         "black-ter": "#E6E6E6",
         "dark": "$black",
 
+        "grey": "#AFAFAF",
         "grey-darker": "#303032",
 
         "text": "#F4F4F4",
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;
+        }
+    }
+}
diff --git a/pydis_site/static/images/events/gallery/adventofcode.png b/pydis_site/static/images/events/gallery/adventofcode.png
new file mode 100644
index 00000000..77b6e015
--- /dev/null
+++ b/pydis_site/static/images/events/gallery/adventofcode.png
diff --git a/pydis_site/static/images/events/gallery/pixels.png b/pydis_site/static/images/events/gallery/pixels.png
new file mode 100644
index 00000000..55398a53
--- /dev/null
+++ b/pydis_site/static/images/events/gallery/pixels.png
diff --git a/pydis_site/static/images/events/gallery/pyweek.png b/pydis_site/static/images/events/gallery/pyweek.png
new file mode 100644
index 00000000..dd40570e
--- /dev/null
+++ b/pydis_site/static/images/events/gallery/pyweek.png
diff --git a/pydis_site/static/images/events/gallery/pyweek_dark.png b/pydis_site/static/images/events/gallery/pyweek_dark.png
new file mode 100644
index 00000000..80711f27
--- /dev/null
+++ b/pydis_site/static/images/events/gallery/pyweek_dark.png
diff --git a/pydis_site/static/images/events/icons/adventofcode.png b/pydis_site/static/images/events/icons/adventofcode.png
new file mode 100644
index 00000000..e9501737
--- /dev/null
+++ b/pydis_site/static/images/events/icons/adventofcode.png
diff --git a/pydis_site/static/images/events/icons/codejam.svg b/pydis_site/static/images/events/icons/codejam.svg
new file mode 100644
index 00000000..b6a8a1db
--- /dev/null
+++ b/pydis_site/static/images/events/icons/codejam.svg
@@ -0,0 +1,264 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   inkscape:export-ydpi="1024"
+   inkscape:export-xdpi="1024"
+   inkscape:export-filename="logo.png"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   id="svg1206"
+   version="1.1"
+   viewBox="0 0 12.7 12.7"
+   height="48"
+   width="48"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1208"
+     pagecolor="#ffffff"
+     bordercolor="#868686"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:document-units="mm"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="2.5906005"
+     inkscape:cx="75.658134"
+     inkscape:cy="34.547974"
+     inkscape:window-width="1920"
+     inkscape:window-height="1040"
+     inkscape:window-x="1280"
+     inkscape:window-y="40"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     borderlayer="false"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <defs
+     id="defs1203">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5744">
+      <stop
+         style="stop-color:#fcc747;stop-opacity:1;"
+         offset="0"
+         id="stop5740" />
+      <stop
+         style="stop-color:#fafaed;stop-opacity:1;"
+         offset="1"
+         id="stop5742" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5696">
+      <stop
+         style="stop-color:#e13b91;stop-opacity:1;"
+         offset="0"
+         id="stop5692" />
+      <stop
+         style="stop-color:#fe6dff;stop-opacity:1;"
+         offset="1"
+         id="stop5694" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient1646">
+      <stop
+         style="stop-color:#fcd88b;stop-opacity:1;"
+         offset="0"
+         id="stop1642" />
+      <stop
+         style="stop-color:#c44cd8;stop-opacity:1;"
+         offset="1"
+         id="stop1644" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5696"
+       id="linearGradient2243"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.06879599,0,0,0.06879599,-0.2490493,-2.0717465)"
+       x1="-1.5663104"
+       y1="1.2413522"
+       x2="122.3921"
+       y2="203.21013" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5744"
+       id="linearGradient2245"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.06879599,0,0,0.06879599,-0.2490493,-2.0717465)"
+       x1="140.36624"
+       y1="281.61649"
+       x2="61.302074"
+       y2="62.665607" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7250"
+       id="linearGradient9126"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.05319008,0,0,0.07754268,22.485567,-8.7102966)"
+       x1="107.46832"
+       y1="73.777969"
+       x2="88.601158"
+       y2="340.92719" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7250">
+      <stop
+         style="stop-color:#fcc38b;stop-opacity:1"
+         offset="0"
+         id="stop5608" />
+      <stop
+         style="stop-color:#d76dd8;stop-opacity:1"
+         offset="0.5"
+         id="stop5610" />
+      <stop
+         style="stop-color:#4999f4;stop-opacity:1"
+         offset="1"
+         id="stop5612" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient8359"
+       id="linearGradient9128"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.04911352,0,0,0.06088132,-34.478709,8.6904634)"
+       x1="1434.8317"
+       y1="54.945419"
+       x2="1440.8918"
+       y2="-205.26265" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient8359">
+      <stop
+         style="stop-color:#53e8df;stop-opacity:0.60336429"
+         offset="0"
+         id="stop5615" />
+      <stop
+         style="stop-color:#26209b;stop-opacity:0.48974407"
+         offset="1"
+         id="stop5617" />
+    </linearGradient>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath6062">
+      <path
+         id="path6064"
+         style="display:inline;fill:url(#linearGradient6066);fill-opacity:1;stroke:#303136;stroke-width:0;stroke-linecap:square;stroke-linejoin:bevel"
+         d="m 42.345844,5.0325671 a 6.3499992,6.3499992 0 0 1 -6.349997,6.3500059 6.3499992,6.3499992 0 0 1 -6.35,-6.3500059 6.3499992,6.3499992 0 0 1 6.35,-6.3499942 6.3499992,6.3499992 0 0 1 6.349997,6.3499942 z" />
+    </clipPath>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1646"
+       id="linearGradient6066"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.09459327,0,0,0.09459327,-20.470237,-6.3964402)"
+       x1="547.07745"
+       y1="34.764702"
+       x2="667.21497"
+       y2="269.6705" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath7381">
+      <path
+         id="path7383"
+         style="display:inline;fill:url(#linearGradient7385);fill-opacity:1;stroke:#303136;stroke-width:0;stroke-linecap:square;stroke-linejoin:bevel"
+         d="m 42.345845,5.0325671 a 6.3499992,6.3499992 0 0 1 -6.35,6.3500059 6.3499992,6.3499992 0 0 1 -6.349997,-6.3500059 6.3499992,6.3499992 0 0 1 6.349997,-6.3499939 6.3499992,6.3499992 0 0 1 6.35,6.3499939 z" />
+    </clipPath>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1646"
+       id="linearGradient7385"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.09459327,0,0,0.09459327,-20.470237,-6.3964407)"
+       x1="547.07745"
+       y1="34.764702"
+       x2="667.21497"
+       y2="269.6705" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath7387">
+      <path
+         id="path7389"
+         style="display:inline;fill:url(#linearGradient7391);fill-opacity:1;stroke:#303136;stroke-width:0;stroke-linecap:square;stroke-linejoin:bevel"
+         d="m 42.345845,5.0325671 a 6.3499992,6.3499992 0 0 1 -6.35,6.3500059 6.3499992,6.3499992 0 0 1 -6.349997,-6.3500059 6.3499992,6.3499992 0 0 1 6.349997,-6.3499939 6.3499992,6.3499992 0 0 1 6.35,6.3499939 z" />
+    </clipPath>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1646"
+       id="linearGradient7391"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.09459327,0,0,0.09459327,-20.470237,-6.3964407)"
+       x1="547.07745"
+       y1="34.764702"
+       x2="667.21497"
+       y2="269.6705" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g7395"
+       transform="translate(-30.925963,0.33530437)">
+      <rect
+         style="display:inline;fill:url(#linearGradient9126);fill-opacity:1;stroke-width:0.104527;stroke-linecap:square;stroke-linejoin:bevel"
+         id="rect1064-9-6-7"
+         width="24.949669"
+         height="14.034189"
+         x="23.521011"
+         y="-1.9845216"
+         inkscape:export-filename="/home/kosa/Documents/code/python/PythonDiscord/branding/events/summer_code_jam_2021/site_banner.png"
+         inkscape:export-xdpi="150"
+         inkscape:export-ydpi="150"
+         clip-path="url(#clipPath7387)"
+         transform="translate(1.2801165,0.98212331)" />
+      <rect
+         style="display:inline;fill:url(#linearGradient9128);fill-opacity:1;stroke:#ebddbc;stroke-width:0;stroke-dasharray:none;stroke-opacity:0.00473543"
+         id="rect16083-1-7"
+         width="24.949669"
+         height="7.0169988"
+         x="23.521011"
+         y="5.0326681"
+         clip-path="url(#clipPath7381)"
+         transform="translate(1.2801165,0.98212331)" />
+    </g>
+    <g
+       id="g1629"
+       transform="translate(-0.50852755,-0.7204563)">
+      <path
+         id="path5041-2-9-5-1-7-0"
+         d="M 8.6150329,2.9362086 8.3000165,3.0267936 C 7.9653672,2.9773715 7.6221913,2.9556897 7.289887,2.9581335 6.9202733,2.9608733 6.5643916,2.9909667 6.2522735,3.0457238 6.1509773,3.063564 6.059325,3.0836698 5.9755437,3.1059365 H 4.9928473 v 0.5147424 h 0.1232049 v 0.2107963 h 0.076201 C 5.1747486,3.9331658 5.1680297,4.0450205 5.1680297,4.1682557 V 4.2777711 H 4.7464385 l -0.060266,0.3011671 0.4818572,0.411056 v 0.00236 h 2.168434 V 5.26614 H 5.1680293 4.3548998 c -0.629713,0 -1.182765,0.3778283 -1.3552521,1.0951537 -0.1998652,0.8213639 -0.2080787,1.3361177 0,2.1958126 0.013617,0.056897 0.029036,0.1122114 0.046095,0.1659839 l -0.032406,0.2857672 0.3653902,0.316194 c 0.1925274,0.2056231 0.4482215,0.3272087 0.773559,0.3272087 H 4.8970214 V 8.6666163 c 0,-0.7118493 0.6187611,-1.3415615 1.3552521,-1.3415615 h 2.1683806 c 0.6023332,0 1.0841905,-0.4955998 1.0841905,-1.0979328 V 4.1682557 c 0,-0.3531772 -0.1802061,-0.6524693 -0.4521788,-0.8562299 z M 10.717746,5.0607944 10.326209,5.2634085 H 9.7759056 v 0.00272 0.2820233 0.676235 c 0,0.7447046 -0.6324511,1.3689416 -1.3552515,1.3689416 H 6.2550006 c -0.5941205,0 -1.0841913,0.5064969 -1.0841913,1.097879 V 10.7474 c 0,0.585907 0.5119739,0.930868 1.0841913,1.097879 0.6872079,0.199867 1.3442888,0.238196 2.1656535,0 0.5448384,-0.15606 1.0841905,-0.473641 1.0841905,-1.097879 V 9.9835235 9.9260346 9.923255 h -0.0033 L 9.1806818,9.6494698 h 0.3241611 1.0841901 c 0.629713,0 0.865214,-0.4380615 1.084244,-1.0951536 0.227244,-0.6762559 0.216292,-1.3278503 0,-2.1957588 C 11.574098,5.9618237 11.417215,5.6272549 11.154524,5.4359125 Z M 7.3391909,9.6494736 H 8.9134727 V 9.9232617 H 7.3391909 Z"
+         style="display:inline;fill:#6d52c6;fill-opacity:1;stroke:none;stroke-width:0.034398;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         inkscape:connector-curvature="0"
+         inkscape:label="shadow"
+         inkscape:export-xdpi="128"
+         inkscape:export-ydpi="128" />
+      <path
+         style="display:inline;fill:url(#linearGradient2243);fill-opacity:1;stroke:none;stroke-width:0.0756757;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 6.8053046,2.5446738 C 6.4356908,2.5474075 6.0797666,2.5775279 5.7676475,2.6322861 4.850457,2.7938211 4.6834469,3.1305807 4.6834469,3.7548179 v 0.8241022 h 2.1684023 v 0.273788 H 4.6834469 3.8702956 c -0.6297132,0 -1.1827649,0.3778283 -1.3552512,1.0951528 -0.1998651,0.8213647 -0.2080796,1.3360865 0,2.1957814 0.1533216,0.6406641 0.5229353,1.0951518 1.1526485,1.0951518 H 4.4123964 V 8.2531567 c 0,-0.7118494 0.6187611,-1.3415616 1.3552511,-1.3415616 h 2.165664 c 0.6023349,0 1.0842015,-0.4955572 1.0842015,-1.0978902 v -2.058887 c 0,-0.585907 -0.495557,-1.0239686 -1.0842015,-1.1225318 C 7.5636977,2.5693144 7.1776568,2.5419362 6.8053046,2.5446738 Z M 5.6334916,3.207241 c 0.2245058,0 0.4079439,0.1861757 0.4079439,0.4134199 0,0.2272444 -0.1834381,0.4106824 -0.4079439,0.4106824 -0.2245068,0 -0.4079449,-0.183438 -0.4079449,-0.4106824 0,-0.2299817 0.1834381,-0.4134199 0.4079449,-0.4134199 z"
+         class="st2"
+         id="path1948-2-9-9-7-8"
+         inkscape:connector-curvature="0"
+         inkscape:label="upper_snake"
+         inkscape:export-xdpi="128"
+         inkscape:export-ydpi="128" />
+      <path
+         style="display:inline;fill:url(#linearGradient2245);fill-opacity:1;stroke:none;stroke-width:0.0756757;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 9.291301,4.8527081 v 0.9582583 c 0,0.7447045 -0.6324506,1.3689416 -1.3552511,1.3689416 H 5.7703851 c -0.5941196,0 -1.0842008,0.5065073 -1.0842008,1.0978893 v 2.0561497 c 0,0.585907 0.5119843,0.93088 1.0842008,1.097891 0.6872089,0.199866 1.3443,0.238196 2.1656648,0 0.5448383,-0.15606 1.0842007,-0.473653 1.0842007,-1.097891 V 9.5098445 H 6.8545857 v -0.273788 h 2.1656649 1.0842014 c 0.629712,0 0.86517,-0.4380614 1.0842,-1.0951527 0.227245,-0.6762568 0.216293,-1.327873 0,-2.1957805 -0.156058,-0.6242372 -0.454488,-1.0951536 -1.0842,-1.0951536 H 9.291301 Z M 8.0729444,10.060159 c 0.2245057,0 0.4079438,0.183437 0.4079438,0.410682 0,0.227245 -0.1834381,0.41342 -0.4079438,0.41342 -0.2245067,0 -0.407945,-0.186175 -0.407945,-0.41342 0,-0.227245 0.1834383,-0.410682 0.407945,-0.410682 z"
+         class="st3"
+         id="path1950-28-2-4-1-8"
+         inkscape:connector-curvature="0"
+         inkscape:label="lower_snake"
+         inkscape:export-xdpi="128"
+         inkscape:export-ydpi="128" />
+    </g>
+  </g>
+</svg>
diff --git a/pydis_site/static/images/events/icons/pixels.png b/pydis_site/static/images/events/icons/pixels.png
new file mode 100644
index 00000000..8b5bd841
--- /dev/null
+++ b/pydis_site/static/images/events/icons/pixels.png
diff --git a/pydis_site/static/images/events/icons/pyweek.png b/pydis_site/static/images/events/icons/pyweek.png
new file mode 100644
index 00000000..f74bc43b
--- /dev/null
+++ b/pydis_site/static/images/events/icons/pyweek.png
diff --git a/pydis_site/static/images/events/pixels_logo_transparent.gif b/pydis_site/static/images/events/pixels_logo_transparent.gif
new file mode 100644
index 00000000..3f410773
--- /dev/null
+++ b/pydis_site/static/images/events/pixels_logo_transparent.gif
diff --git a/pydis_site/static/images/events/pixels_logo_transparent.png b/pydis_site/static/images/events/pixels_logo_transparent.png
new file mode 100644
index 00000000..5892edcc
--- /dev/null
+++ b/pydis_site/static/images/events/pixels_logo_transparent.png
diff --git a/pydis_site/static/images/events/cj10_2023_banner2.png b/pydis_site/static/images/events/summer_code_jam_2023/banner2.png
index 92cae4f6..92cae4f6 100644
--- a/pydis_site/static/images/events/cj10_2023_banner2.png
+++ b/pydis_site/static/images/events/summer_code_jam_2023/banner2.png
diff --git a/pydis_site/static/images/events/cj10_2023_banner3.png b/pydis_site/static/images/events/summer_code_jam_2023/banner3.png
index 9d808f07..9d808f07 100644
--- a/pydis_site/static/images/events/cj10_2023_banner3.png
+++ b/pydis_site/static/images/events/summer_code_jam_2023/banner3.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2023/logo.PNG b/pydis_site/static/images/events/summer_code_jam_2023/logo.PNG
new file mode 100644
index 00000000..10143ded
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2023/logo.PNG
diff --git a/pydis_site/templates/events/README.md b/pydis_site/templates/events/README.md
new file mode 100644
index 00000000..fad6c8c2
--- /dev/null
+++ b/pydis_site/templates/events/README.md
@@ -0,0 +1,61 @@
+# Events pages
+
+## Homepage (`index.html`)
+
+The main events page showcases current, upcoming and recent events, as well as
+a gallery of the regular events and ad-hoc events we run.
+
+- **Current event** (`current_event.html`)
+
+  This file should be updated when the previous 'current' event has finished
+  and there is an upcoming event to promote. It should include some branding
+  assets either as a banner, icon, or both for this event.
+
+- **Scheduled events** (`scheduled_events.html`)
+
+  A list of events with brief descriptions each paired with an icon that is
+  scheduled to happen strictly after the current date. The list is
+  chronological and the first item can be the same as that of "Current event".
+
+  This file should be updated when a new event is scheduled or the top event
+  from the list has finished.
+
+### Sidebars
+
+- **Previous events** (`sidebar/main_sidebar.html`)
+
+  Concise list of events for returning members to quickly access after events
+  have finished.
+
+  This file should be updated whenever another event has finished.
+
+
+### Main events (`main_events.html`)
+
+A gallery of events we run regularly — most likely at least once a year. The
+descriptions in each card are longer and more detailed.
+
+This file should be updated when we want to reorder the list or add/remove
+regular events.
+
+If the total visual height of the entire gallery is modified, please also
+update the [CSS file](../../static/css/events/base.css) to set the correct new
+height on mobile, tablets, and desktop. This ensures the responsive Masonry
+layout displays correctly.
+
+
+### Other events (`other_events.html`)
+
+A showcase of "ad-hoc" events have we have run in previous years. The list is
+not exhausive and is only meant to be a small exhibit for viewers to get a
+sense of the kind of events to expect outside of the those regular/annual
+events.
+
+This file should be updated when new one-off events that are better deserving
+of having a place in the showcase here have been hosted.
+
+Each item should link to a video/article about the event for viewers to
+re-watch after the event took place.
+
+Like `main_events.html`, the CSS file should also be updated with the height of
+the section changes.
diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html
new file mode 100644
index 00000000..e099ccb6
--- /dev/null
+++ b/pydis_site/templates/events/current_event.html
@@ -0,0 +1,25 @@
+{% load static %}
+
+{# Current/next event to promote #}
+<div class="box has-background-warning-light" style="padding: 2rem; padding-top: .75rem; margin-top: 2rem;">
+    <small class="has-text-grey">Recent event</small>
+    <div class="columns is-3 mt-1" style="--columnGap: 0.75rem;">
+        <div class="column">
+            <h2 class="title is-4"><a href="https://pyweek.org/37/">PyWeek 37</a></h2>
+            <p class="subtitle is-6" style="margin-top: -.75rem;">
+                <span class="icon-text">
+                    <span class="icon"><i class="fa-regular fa-calendar"></i></span><span>March 17-24</span>
+                </span>
+            </p>
+        </div>
+        <div class="column">
+            <img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="border-radius: 10px;" alt="PyWeek logo">
+        </div>
+    </div>
+    <p>A bi-annual game jam where participants write a game in Python in a week, either individually or as a team. The theme is voted by the competitors prior to the challenge, and the entries are also judged by the competitors after the challenge.</p>
+    <a class="button is-primary" href="https://pyweek.org/37/">
+        <span class="icon-text">
+            <span>Learn more</span><span class="icon"><i class="fa-solid fa-arrow-right"></i></span>
+        </span>
+    </a>
+</div>
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html
index 4b1ae2bd..90d68e97 100644
--- a/pydis_site/templates/events/index.html
+++ b/pydis_site/templates/events/index.html
@@ -1,4 +1,4 @@
-{% extends "events/base_sidebar.html" %}
+{% extends "events/base.html" %}
 
 {% block title %}Events{% endblock %}
 
@@ -6,95 +6,24 @@
     <li class="is-active"><a href="#">Events</a></li>
 {% endblock %}
 
-{% block event_content %}
-    <div class="box has-background-white">
-        <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2>
-        <p>Every year we hold a community-wide Summer Code Jam. For this event, members of our community are assigned to teams to collaborate and create something amazing using a technology we picked for them. One such technology that was picked for the Summer 2021 Code Jam was text user interfaces (TUIs), where teams could pick from a pre-approved list of frameworks.</p>
-        <p>To help fuel the creative process, we provide a specific theme, like <strong>Think Inside the Box</strong> or <strong>Early Internet</strong>. At the end of the Code Jam, the projects are judged by Python Discord server staff members and guest judges from the larger Python community. The judges will consider creativity, code quality, teamwork, and adherence to the theme.</p>
-        <p>If you want to read more about Code Jams, visit our <a href="{% url "events:page" path="code-jams" %}">Code Jam info page</a> or watch this video showcasing the best projects created during the <strong>Winter Code Jam 2020: Ancient Technology</strong>:</p>
-        <iframe style="max-width: 100%;" width="560" height="315" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
-    </div>
-
-    <div class="box has-background-white">
-        <h2 class="title is-4">PyWeek</h2>
-        <div class="columns is-3" style="--columnGap: 0.75rem;">
-            <div class="column">
-                <p>
-                    For the past 15 years, <a href="https://pyweek.org" target="_blank" rel="noopener">PyWeek</a> 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>
-                <p>
-                    During each PyWeek event, we open a special discussion channel in which our members can discuss their
-                    submissions, meet other participants, and talk to PyWeek staff. The PyWeek organizer,
-                    Daniel Pope (<a href="https://twitter.com/lordmauve" target="_blank" rel="noopener">@lordmauve</a>) will be present during the entire event to answer
-                    questions and post announcements and information in our community.
-                </p>
-                <p>
-                    Unlike our other events, the <strong>community</strong> will select the winner from all the submissions
-                    during PyWeek. We may release YouTube content showcasing the best submissions after the events are finished.
-                </p>
-            </div>
-            <div class="column is-3">
-                <img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="border-radius: 10px;" alt="">
-            </div>
+{% block event_base_content %}
+    <div class="columns is-variable is-8" id="main-section">
+        <div class="column is-two-thirds">
+            <p>At Python Discord, we run a few regular events such as programming contests and workshops, as well as more ad-hoc events such as Python release streams. All members are welcome to participate in the events live, and for most events we release videos on our <a href="https://www.youtube.com/@PythonDiscord">YouTube channel</a> after the event in case you've missed it.</p>
+            </p>To subscribe to the announcements, head over to the bottom of the <code>#roles</code> channel and get the <code>@Announcements</code> role to receive notifications on the latest updates!</p>
+            {% include "events/current_event.html" %}
+            {% include "events/scheduled_events.html" %}
         </div>
-    </div>
-
-    <div class="box has-background-white">
-        <h2 class="title is-4">Advent of Code</h2>
-        <div class="columns is-3" style="--columnGap: 0.75rem;">
-            <div class="column">
-                <p>
-                    Each year, many of our members take part of an online coding competition called
-                    <a href="https://adventofcode.com/" target="_blank" rel="noopener">Advent of Code</a> that takes place in December. Advent of Code is 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>
-                <p>
-                    During the event, we will open a special discussion channel in which our members can discuss the puzzles
-                    and compare their solutions. We will also open a private leaderboard and may even reward the best scoring
-                    members on that board with prizes!
-                </p>
-                <p>
-                    However, this event isn't purely competitive. You can also join in just to see how far you'll get, to
-                    challenge yourself, as a way of learning Python, or just for the fun of it. In 2019, almost 200 members
-                    signed up for our private leaderboard, but many more took on the challenge without focusing on the
-                    competitive aspect.
-                </p>
-            </div>
-            <div class="column is-3">
-                <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="">
-            </div>
+        <div class="column">
+            {% include "events/sidebar/main_sidebar.html" %}
         </div>
     </div>
 
-    <div class="box has-background-white">
-        <h2 class="title is-4">Game Jam</h2>
-        <div class="columns is-3" style="--columnGap: 0.75rem;">
-            <div class="column">
-                <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>
-                    The participants will have ten days to create a game using the technology we've selected, and drawing
-                    inspiration from a provided theme. After the event, a panel of judges will play all the games and select a
-                    winner. The top 5 will featured in a special video on our <a href="https://www.youtube.com/channel/UCQsrA4xo6jvdgsJZhKaBL6w" target="_blank" rel="noopener">YouTube channel</a>.
-                </p>
-                <p>
-                    The <a class="has-text-link" href="{% url "events:page" path="game-jams/2020" %}">first edition of the Game Jam</a> ran from
-                    <strong>April 17, 2020 to April 26, 2020</strong>.
-                </p>
-            </div>
-            <div class="column is-3">
-                <img src="https://user-images.githubusercontent.com/33516116/77593036-5fb09780-6eeb-11ea-9feb-336b2e5e23de.png" style="border-radius: 10px;" alt="">
-            </div>
-        </div>
-    </div>
-{% endblock %}
+    <br>
+
+    <hr id="main-events"/>
+    {% include "events/main_events.html" %}
 
-{% block sidebar %}
-    {% include "events/sidebar/events-list.html" %}
+    <hr id="other-events"/>
+    {% include "events/other_events.html" %}
 {% endblock %}
diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html
new file mode 100644
index 00000000..4e6a967d
--- /dev/null
+++ b/pydis_site/templates/events/main_events.html
@@ -0,0 +1,83 @@
+{% load static %}
+
+<div class="has-text-centered">
+    <h2 class="title is-4">Annual events</h2>
+</div>
+<br>
+
+{# These events are sorted in the desired (arbitrary) order, such as priority #}
+<div class="event-gallery" id="main-events-section">
+    <div class="card">
+        <span class="colored-line has-background-primary"></span>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</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>July to August</span>
+                </span>
+            </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>
+    <div class="card">
+        <div class="card-image">
+            <img loading=lazy class="light-image" src="/static/images/events/gallery/pyweek.png" alt="PyWeek logo">
+            <img loading=lazy class="dark-image" src="/static/images/events/gallery/pyweek_dark.png" alt="PyWeek logo">
+        </div>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek</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>March & September</span>
+                </span>
+            </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 that we are officially partnered with PyWeek to co-run these events.</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-image">
+            <img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
+        </div>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of code</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>December</span>
+                </span>
+            </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. 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. Puzzles are posted every day as they come, and you'll be able to discuss your solutions for each puzzle in dedicated threads.</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-image">
+            <img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
+        </div>
+        <div class="card-content">
+            <h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</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>July to August</span>
+                </span>
+            </p>
+            <p>Revival of Code is a Python Discord hosted event where we release old Advent of Code puzzles from a previous year. Puzzles are for a variety of skill sets and skill levels that can be solved in any programming language you like, including Python. They will be posted every other day, and you'll be able to discuss your solutions in dedicated threads.</p>
+        </div>
+    </div>
+    <div class="card">
+        <span class="colored-line has-background-success"></span>
+        <div class="card-content">
+            <h2 class="title is-4">😜 April Fools</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 1st</span>
+                </span>
+            </p>
+            <p>Once a year we come up with something different for April Fools.</p>
+            <p>In 2022 for instance, we came up with <a href="https://peps.pythondiscord.com/pep-9001/">PEP 9001</a>, "The Final Style Guide for Python", <a href="https://peps.pythondiscord.com/pep-2241/">PEP 2241</a>, "Back to the Past", and a revised Zen of Python which you can check out using the <code>&zen</code> command. The <code>&blurpify</code> command is also available after the event for members to experiment with the style guide.</p>
+        </div>
+    </div>
+</div>
diff --git a/pydis_site/templates/events/other_events.html b/pydis_site/templates/events/other_events.html
new file mode 100644
index 00000000..035ddaef
--- /dev/null
+++ b/pydis_site/templates/events/other_events.html
@@ -0,0 +1,159 @@
+{% load static %}
+
+<div class="has-text-centered">
+    <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-section">
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <h1 class="title is-1">🎩</h1>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=PTjLkvvjKnM">Fancy Hats: Circuit Python & Microcontrollers Workshop</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>
+                    </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>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=PTjLkvvjKnM">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
+    </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <p class="image">
+                    <img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
+                </p>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=PGZPSWZSkJI">Python 3.11 Release Stream</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. 25, 2022</span>
+                        </span>
+                    </p>
+                    <p>Pablo Galindo, the 3.11 Python Release Manager and CPython Core Developer, walked through the release process and a number of guests joined to talk about the exciting new features to be found in 3.11. At the end of the release we also hosted a Q&A session.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=PGZPSWZSkJI">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
+    </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <span class="icon is-large"><i class="fas fa-cloud fa-2xl" style="color: lightskyblue"></i></span>
+            </div>
+            <div class="media-content">
+                <div class="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>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=00CW1y-O8YQ">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
+    </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <p class="image">
+                    <img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
+                </p>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=AHT2l3hcIJg">Python 3.10 Release Stream</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. 5, 2021</span>
+                        </span>
+                    </p>
+                    <p>Python 3.10 was set to be released on 4 October 2021. We hosted a live Python 3.10 Release Stream with Pablo Galindo, CPython Core Developer and Python 3.10 Release Manager, and Leon Sandøy.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=AHT2l3hcIJg">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
+    </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <p class="image">
+                    <img loading=lazy src="/static/images/events/pixels_logo_transparent.gif" style="width: 3rem;">
+                </p>
+            </div>
+            <div class="media-content">
+                <div class="content">
+                    <h2 class="title is-4"><a href="{% url "events:page" path="pixels" %}">Pixels</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>May 2021</span>
+                        </span>
+                    </p>
+                    <p>Inspired by r/place, the reddit April Fools experiment where users could place pixels on a canvas one-by-one, Pixels was an application that allowed users to collaboratively decorate a canvas pixel-by-pixel. The twist? Interacting with our canvas can only be done via an API.</p>
+                </div>
+                <a class="button is-small is-link is-outlined" href="{% url "events:page" path="pixels" %}">
+                    <span class="icon"><i class="fas fa-circle-info"></i></span>
+                    <span>Learn more</span>
+                </a>
+            </div>
+        </article>
+    </div>
+
+    <div class="box">
+        <article class="media">
+            <div class="media-left">
+                <span class="icon is-large"><i class="fas fa-comments fa-2xl" style="color: #4B8BBE"></i></span>
+            </div>
+            <div class="media-content">
+                <div class="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>
+                <a class="button is-small is-link is-outlined" href="https://www.youtube.com/watch?v=gXMdfBTcOfQ">
+                    <span class="icon"><i class="fab fa-youtube"></i></span>
+                    <span>Watch on YouTube</span>
+                </a>
+            </div>
+        </article>
+    </div>
+</div>
diff --git a/pydis_site/templates/events/pages/adventofcode/_index.html b/pydis_site/templates/events/pages/adventofcode/_index.html
new file mode 100644
index 00000000..fd9ba06d
--- /dev/null
+++ b/pydis_site/templates/events/pages/adventofcode/_index.html
@@ -0,0 +1,32 @@
+{% extends "events/base_sidebar.html" %}
+
+{% block breadcrumb %}
+    <li><a href="{% url "events:index" %}">Events</a></li>
+    <li class="is-active"><a href="#">Advent of Code</a></li>
+{% endblock %}
+
+{% block title %}Advent of Code{% endblock %}
+
+{% block event_content %}
+<p>
+    Each year, many of our members take part of an online coding competition called
+    <a href="https://adventofcode.com/" target="_blank" rel="noopener">Advent of Code (AoC)</a> that takes place in December. Advent of Code is 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>
+<p>
+    During the event, we will open a special discussion channel in which our members can discuss the puzzles
+    and compare their solutions. We will also open a private leaderboard and may even reward the best scoring
+    members on that board with prizes!
+</p>
+<p>
+    However, this event isn't purely competitive. You can also join in just to see how far you'll get, to
+    challenge yourself, as a way of learning Python, or just for the fun of it. In 2019, almost 200 members
+    signed up for our private leaderboard, but many more took on the challenge without focusing on the
+    competitive aspect.
+</p>
+{% endblock %}
+
+{% block sidebar %}
+    {% include "events/sidebar/adventofcode/useful-links.html" %}
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/game-jams/_index.html b/pydis_site/templates/events/pages/game-jams/_index.html
index 85048cf1..f836b0be 100644
--- a/pydis_site/templates/events/pages/game-jams/_index.html
+++ b/pydis_site/templates/events/pages/game-jams/_index.html
@@ -8,5 +8,25 @@
 {% endblock %}
 
 {% block event_content %}
-    <p>Sorry, this page is not ready yet.</p>
+<div class="columns is-3" style="--columnGap: 0.75rem;">
+    <div class="column">
+        <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>
+            The participants will have ten days to create a game using the technology we've selected, and drawing
+            inspiration from a provided theme. After the event, a panel of judges will play all the games and select a
+            winner. The top 5 will be featured in a special video on our <a href="https://www.youtube.com/channel/UCQsrA4xo6jvdgsJZhKaBL6w" target="_blank" rel="noopener">YouTube channel</a>.
+        </p>
+        <p>
+            The <a class="has-text-link" href="{% url "events:page" path="game-jams/2020" %}">first edition of the Game Jam</a> ran from
+            <strong>April 17, 2020 to April 26, 2020</strong>.
+        </p>
+    </div>
+    <div class="column is-3">
+        <img src="https://user-images.githubusercontent.com/33516116/77593036-5fb09780-6eeb-11ea-9feb-336b2e5e23de.png" style="border-radius: 10px;" alt="Game Jam 2020">
+    </div>
+</div>
 {% endblock %}
diff --git a/pydis_site/templates/events/pages/pixels/_index.html b/pydis_site/templates/events/pages/pixels/_index.html
new file mode 100644
index 00000000..fbe41423
--- /dev/null
+++ b/pydis_site/templates/events/pages/pixels/_index.html
@@ -0,0 +1,27 @@
+{% extends "events/base_sidebar.html" %}
+
+{% block breadcrumb %}
+    <li><a href="{% url "events:index" %}">Events</a></li>
+    <li class="is-active"><a href="#">Pixels</a></li>
+{% endblock %}
+
+{% block title %}Pixels{% endblock %}
+
+{% block event_content %}
+<p>
+    The core idea of Pixels is to have a collaborative canvas, where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.
+</p>
+<p>
+    Our main goal for this event is to focus on it being a learning tool, for users who may not have previous experience with APIs.
+</p>
+<p>
+    With that said however, users of all experience levels are both welcome and encouraged to join in with the event!
+</p>
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/obC-l9JWx2M?si=rqzzg8F4Y9Acdq8Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+{% endblock %}
+
+{% block sidebar %}
+    {% include "events/sidebar/pixels.html" %}
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/pyweek/_index.html b/pydis_site/templates/events/pages/pyweek/_index.html
new file mode 100644
index 00000000..d7bfc02f
--- /dev/null
+++ b/pydis_site/templates/events/pages/pyweek/_index.html
@@ -0,0 +1,30 @@
+{% extends "events/base_sidebar.html" %}
+
+{% block breadcrumb %}
+    <li><a href="{% url "events:index" %}">Events</a></li>
+    <li class="is-active"><a href="#">PyWeek</a></li>
+{% endblock %}
+
+{% block title %}PyWeek{% endblock %}
+
+{% block event_content %}
+<p>
+    For the past 15 years, <a href="https://pyweek.org" target="_blank" rel="noopener">PyWeek</a> has been running a bi-annual game jam for the
+    Python language. As of 2020, we are excited to say that we are officially partnered with PyWeek to co-run these
+    events.
+</p>
+<p>
+    During each PyWeek event, we open a special discussion channel in which our members can discuss their
+    submissions, meet other participants, and talk to PyWeek staff. The PyWeek organizer,
+    Daniel Pope (<a href="https://twitter.com/lordmauve" target="_blank" rel="noopener">@lordmauve</a>) will be present during the entire event to answer
+    questions and post announcements and information in our community.
+</p>
+<p>
+    Unlike our other events, the <strong>community</strong> will select the winner from all the submissions
+    during PyWeek. We may release YouTube content showcasing the best submissions after the events are finished.
+</p>
+{% endblock %}
+
+{% block sidebar %}
+    {% include "events/sidebar/pyweek/useful-links.html" %}
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/revivalofcode/_index.html b/pydis_site/templates/events/pages/revivalofcode/_index.html
new file mode 100644
index 00000000..bc686faa
--- /dev/null
+++ b/pydis_site/templates/events/pages/revivalofcode/_index.html
@@ -0,0 +1,33 @@
+{% extends "events/base_sidebar.html" %}
+
+{% block breadcrumb %}
+    <li><a href="{% url "events:index" %}">Events</a></li>
+    <li class="is-active"><a href="#">Revival of Code</a></li>
+{% endblock %}
+
+{% block title %}Revival of Code{% endblock %}
+
+{% block event_content %}
+<p>
+    Each year, many of our members take part of an online coding competition called
+    <a href="https://adventofcode.com/" target="_blank" rel="noopener">Advent of Code (AoC)</a> that takes place in December. Advent of Code is 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>
+<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>
+
+<h3 class="title is-4">Keeping up with the puzzles</h3>
+<p>
+    To be notified when new problems are posted you can subscribe to the <code>@Revival of Code role</code> in <code>#roles</code>.
+</p>
+
+<p>
+    If you have any questions or want to discuss the event in general, come talk about it in⁠<code>#Revival of Code Discussion</code>.
+</p>
+{% endblock %}
+
+{% block sidebar %}
+    {% include "events/sidebar/revivalofcode.html" %}
+{% endblock %}
diff --git a/pydis_site/templates/events/scheduled_events.html b/pydis_site/templates/events/scheduled_events.html
new file mode 100644
index 00000000..fe287b4d
--- /dev/null
+++ b/pydis_site/templates/events/scheduled_events.html
@@ -0,0 +1,118 @@
+<div class="box" id="scheduled-events">
+    <h2 class="title is-5" style="margin-bottom: 2rem;">Scheduled events</h2>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="https://pyweek.org/37/"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="https://pyweek.org/37/">PyWeek 37</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>March 17-24, 2024</span>
+                    </span>
+                </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/37/">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="revivalofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
+            </p>
+        </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>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>May 2024</span>
+                    </span>
+                </p>
+                <p>Revisit past years' Advent of Code problems! Puzzles are relased every other day and there will be dedicated solution threads for you to discuss with other participants.</p>
+            </div>
+            <a class="button is-small is-link is-outlined" href="{% url "events:page" path="revivalofcode" %}">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="code-jams" %}"><img class="is-rounded" src="/static/images/events/icons/codejam.svg"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jam</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>July 2024</span>
+                    </span>
+                </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="code-jams" %}">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek 38</a></h5>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>September 2024</span>
+                    </span>
+                </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/">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-64x64">
+                <a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
+            </p>
+        </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>
+                <p class="subtitle is-6">
+                    <span class="icon-text">
+                        <span class="icon date-icon"><i class="fa-regular fa-calendar"></i></span>
+                        <span>December 1-25, 2024</span>
+                    </span>
+                </p>
+                <p>Daily programming puzzles with increasing difficulties where each puzzle has a little story and you can discuss solutions with other participants. You are allowed to use any programming language you like.</p>
+            </div>
+            <a class="button is-small is-link is-outlined" href="{% url "events:page" path="adventofcode" %}">
+                <span class="icon date-icon"><i class="fas fa-circle-info"></i></span>
+                <span>Learn more</span>
+            </a>
+        </div>
+    </article>
+</div>
diff --git a/pydis_site/templates/events/sidebar/adventofcode/useful-links.html b/pydis_site/templates/events/sidebar/adventofcode/useful-links.html
new file mode 100644
index 00000000..11dafcb8
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/adventofcode/useful-links.html
@@ -0,0 +1,10 @@
+<div class="box">
+    <div class="has-text-centered">
+        <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
+    </div>
+    <p class="menu-label">Quick links</p>
+    <ul class="menu-list">
+        <li><a class="has-text-link" href="https://adventofcode.com">Homepage</a></li>
+        <li><a class="has-text-link" href="https://reddit.com/r/adventofcode">Reddit</a></li>
+    </ul>
+</div>
diff --git a/pydis_site/templates/events/sidebar/code-jams/10.html b/pydis_site/templates/events/sidebar/code-jams/10.html
index 31b5bda5..956b5140 100644
--- a/pydis_site/templates/events/sidebar/code-jams/10.html
+++ b/pydis_site/templates/events/sidebar/code-jams/10.html
@@ -6,3 +6,6 @@
         <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/code-style-guide" %}">The Code Style Guide</a>
     </ul>
 </div>
+<div class="box">
+    <img src="/static/images/events/summer_code_jam_2023/logo.PNG" alt="logo">
+</div>
diff --git a/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html b/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html
index d74470cc..8734064b 100644
--- a/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html
+++ b/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html
@@ -3,6 +3,6 @@
 <div class="box">
     <h4 class="menu-label">Upcoming Code Jam</h4>
     <a href="{% url "events:page" path="code-jams/10" %}">
-        <img src="{% static "images/events/cj10_2023_banner2.png" %}" alt="Code Jam 2023">
+        <img src="{% static "images/events/summer_code_jam_2023/banner2.png" %}" alt="Code Jam 2023">
     </a>
 </div>
diff --git a/pydis_site/templates/events/sidebar/events-list.html b/pydis_site/templates/events/sidebar/events-list.html
deleted file mode 100644
index 14034702..00000000
--- a/pydis_site/templates/events/sidebar/events-list.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="box">
-    <p class="menu-label">Event Calendar 2023</p>
-    <ul class="menu-list">
-        <li><a class="has-text-black" style="cursor: default;">March: PyWeek 35</a></li>
-        <li><a class="has-text-black" style="cursor: default;">August/September: Code Jam 2023</a></li>
-        <li><a class="has-text-black" style="cursor: default;">September: PyWeek 36</a></li>
-        <li><a class="has-text-black" style="cursor: default;">TBD: Pixels</a></li>
-        <li><a class="has-text-black" style="cursor: default;">December: Advent of Code</a></li>
-    </ul>
-</div>
-
-<div class="box">
-    <p class="menu-label">Related Links</p>
-    <ul class="menu-list">
-        <li><a class="has-text-link" href="{% url "events:page" path="code-jams" %}">Code Jams</a></li>
-    </ul>
-</div>
diff --git a/pydis_site/templates/events/sidebar/main_sidebar.html b/pydis_site/templates/events/sidebar/main_sidebar.html
new file mode 100644
index 00000000..fb9da290
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/main_sidebar.html
@@ -0,0 +1,66 @@
+<div class="box" id="previous-events">
+    <h2 class="title is-5">Previous events</h2>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-32x32">
+                <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-5"><a href="https://pyweek/35/">PyWeek 35</a></h5>
+                <p class="subtitle is-6">March 2023</p>
+            </div>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-32x32">
+                <img class="is-rounded" src="/static/images/events/summer_code_jam_2023/logo.PNG">
+            </p>
+        </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>
+                <p class="subtitle is-6">August 2023</p>
+            </div>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-32x32">
+                <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
+            </p>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <h5 class="title is-5"><a href="https://pyweek/36/">PyWeek 36</a></h5>
+                <p class="subtitle is-6">September 2023</p>
+            </div>
+        </div>
+    </article>
+    <article class="media">
+        <div class="media-left">
+            <p class="image is-32x32">
+                <img class="is-rounded" src="/static/images/events/icons/adventofcode.png">
+            </p>
+        </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>
+                <p class="subtitle is-6">December 2023</p>
+            </div>
+        </div>
+    </article>
+</div>
+
+<div class="is-hidden-mobile">
+    <div class="box">
+        <h4 class="title is-5">Table of contents</h4>
+        <ul class="menu-list" style="margin-top: 0;">
+            <li><a class="has-text-link" href="#scheduled-events">Scheduled events</a></li>
+            <li><a class="has-text-link" href="#main-events">Annual events</a></li>
+            <li><a class="has-text-link" href="#other-events">Other events</a></li>
+        </ul>
+    </div>
+</div>
diff --git a/pydis_site/templates/events/sidebar/ongoing-event.html b/pydis_site/templates/events/sidebar/ongoing-event.html
deleted file mode 100644
index 782ef23c..00000000
--- a/pydis_site/templates/events/sidebar/ongoing-event.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% load static %}
-
-<div class="box">
-    <p class="menu-label">Upcoming Event</p>
-    <a href="{% url "events:page" path="code-jams/10" %}">
-        <img src="{% static "images/events/cj10_2023_banner2.png" %}" alt="Code Jam 2023">
-    </a>
-</div>
diff --git a/pydis_site/templates/events/sidebar/pixels.html b/pydis_site/templates/events/sidebar/pixels.html
new file mode 100644
index 00000000..7b6ffd82
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/pixels.html
@@ -0,0 +1,9 @@
+<div class="box">
+    <div class="has-text-centered">
+        <img src="/static/images/events/pixels_logo_transparent.gif" style="border-radius: 10px;" alt="Server icon for Pixels">
+    </div>
+    <p class="menu-label">Pixels Links</p>
+    <ul class="menu-list">
+        <li><a class="has-text-link" href="https://blog.pythondiscord.com/pixels-summer-2021/">Pixels 2021</a></li>
+    </ul>
+</div>
diff --git a/pydis_site/templates/events/sidebar/pyweek/useful-links.html b/pydis_site/templates/events/sidebar/pyweek/useful-links.html
new file mode 100644
index 00000000..dab72eba
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/pyweek/useful-links.html
@@ -0,0 +1,11 @@
+<div class="box">
+    <img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="border-radius: 10px;" alt="">
+    <p class="menu-label">PyWeek links</p>
+    <ul class="menu-list">
+        <li><a class="has-text-link" href="https://pyweek.org">Homepage</a></li>
+        <li><a class="has-text-link" href="https://pyweek.org/36/">September 2023: "Dark Matter"</a></li>
+        <li><a class="has-text-link" href="https://pyweek.org/35/">March 2023: "In the shadows"</a></li>
+        <li><a class="has-text-link" href="https://pyweek.org/34/">September 2022: "Red planet"</a></li>
+        <li><a class="has-text-link" href="https://pyweek.org/challenges/">All previous challenges</a></li>
+    </ul>
+</div>
diff --git a/pydis_site/templates/events/sidebar/revivalofcode.html b/pydis_site/templates/events/sidebar/revivalofcode.html
new file mode 100644
index 00000000..6bcf9dbc
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/revivalofcode.html
@@ -0,0 +1,10 @@
+<div class="box">
+    <div class="has-text-centered">
+        <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
+    </div>
+    <p class="menu-label">Quick links</p>
+    <ul class="menu-list">
+        <li><a class="has-text-link" href="https://adventofcode.com">AoC Homepage</a></li>
+        <li><a class="has-text-link" href="https://reddit.com/r/adventofcode">AoC Reddit</a></li>
+    </ul>
+</div>
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 78ed862c..91951637 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -12,7 +12,7 @@
   <!-- Mobile-only Code Jam Banner -->
   <section id="mobile-notice" class="is-primary is-hidden-tablet">
     <a href="/events/code-jams/9/">
-      <img src="{% static "images/events/cj10_2023_banner3.png" %}" alt="Code Jam 2023">
+      <img src="{% static "images/events/summer_code_jam_2023/banner3.png" %}" alt="Code Jam 2023">
     </a>
   </section>
 
@@ -48,7 +48,7 @@
           {# Code Jam Banner #}
           <div id="wave-hero-right" class="column is-half">
             <a href="/events/code-jams/10/">
-              <img src="{% static "images/events/cj10_2023_banner3.png" %}" alt="Code Jam 2023">
+              <img src="{% static "images/events/summer_code_jam_2023/banner3.png" %}" alt="Code Jam 2023">
             </a>
           </div>
         </div>