Replace /clubs with /events

_collections/_events/ball.md

@@ -0,0 +1,19 @@
+---
+title: CSS BALL
+image: /assets/images/ball-group-photo.jpg
+order: 8
+decoration: ball
+long: true
+side: verso
+---
+
+Finally... our grandest event of them all, the CSS Ball!
+
+This is our biggest event and it's an oppourtunity to come together to celebrate 
+the year. Many societies hold one for their members and we're no different.
+
+You can expect a three-course meal, a bar, a dance floor, and some fantastic vibes.
+Plus, thanks to extra funding from the School, we can keep prices low so everybody
+can get involved.
+
+Dress to impress for an unforgettable night!

_collections/_events/board-games-nights.md

@@ -0,0 +1,15 @@
+---
+title: Board Games Nights & LAN Parties
+image: /assets/images/board-games-night.jpg
+order: 5
+---
+
+At least once a term we run a Board Games Night and/or a LAN Party in the School
+of Computer Science! We always have drinks and pizza, with the School providing 
+alcoholic drinks, and usually take up the Atrium and the Sloman Lounge.
+
+While we have our own board games and some consoles, we encourage everybody to 
+bring their own as well!
+
+These events are drop-in and you're free to arrive and leave at any time, though
+you'll probably want to be around for pizza!

_collections/_events/missing-semester.md

@@ -0,0 +1,15 @@
+---
+title: Missing Semester
+image: /assets/images/missing-semester.jpg
+order: 3
+decoration: missing-semester
+---
+
+We've teamed up with [AFNOM](https://afnom.net) to host weekly sessions
+to teach you all the things university doesn't, which you'll need as a computer
+scientist.
+
+We cover topics ranging from the basics of using your shell, to advanced git and
+containers and virtualisation.
+
+You can find course materials at <https://missingsemester.afnom.net>.

_collections/_events/regular-socials.md

@@ -0,0 +1,13 @@
+---
+title: Regular Socials
+image: /assets/images/pub-night.jpg
+order: 2
+---
+
+We host regular socials, usually in the evening, for people to chill out and
+get to know each other.
+
+We usually have a mix of pub nights, visits to NQ64 (an arcade bar), film nights,
+bar crawls, karaoke, and more!
+
+We also have a Minecraft server, which we also occasionally run events on.

_collections/_events/special-events.md

@@ -0,0 +1,14 @@
+---
+title: Christmas Meal & Summer BBQ
+image: /assets/images/bbq.jpg
+order: 7
+---
+
+At the end of each semester we have our Christmas Meal, and the Summer BBQ!
+These are typically our final event of each semester so it's always nice to come
+together for one last time as a CS community.
+
+The Christmas Meal usually takes place in a local pub with orders taken beforehand.
+The BBQ is more relaxed, we encourage everybody to bring their own food / booze,
+and we also run a charity raffle to give away some of the random stuff we've 
+acquired throughout the years!

_collections/_events/tex-talks.md

@@ -0,0 +1,14 @@
+---
+title: TeX Talks
+image: /assets/images/tex-talks.jpg
+order: 6
+---
+
+TeX Talks are a series of lightning talks on a variety of topics related to
+computer science!
+
+In the past we've had talks on hacking your printer, breaking popular anti-cheat 
+systems, various cloud technologies, applied robotics, and more.
+
+If you're curious, you can check out the schedule for a previous edition 
+[here](/tex-talks).

_collections/_events/trips.md

@@ -0,0 +1,17 @@
+---
+title: Trips to Bletchley Park and the National Museum of Computing
+image: /assets/images/bletchley-park.jpg
+order: 4
+long: true
+side: recto
+---
+
+We run a trip to either Bletchley Park, or the National Museum of Computing, 
+alternating every year.
+
+This trip is usually on a weekend and lasts the whole day, with coach transport 
+from campus.
+
+We also heavily subsidise the trip using a combination of society funds and grants 
+from the School of Computer Science and the Guild, so it's always worth coming 
+along!

_collections/_events/workshops.md

@@ -0,0 +1,13 @@
+---
+title: Workshops
+image: /assets/images/justin-workshop.jpg
+order: 1
+---
+
+We run regular programming workshops for people to learn a new language or
+framework, and we also encourage and help members with running their own
+workshops!
+
+Most of our workshops are aimed at all skill levels, though some may require
+some pre-requisite knowledge. However, they're open to everybody, even
+if you're not a computer scientist!

_config.yml

@@ -25,12 +25,12 @@ menu:
         link: /ball/2021
       - name: 2020
         link: /ball/2020
+  - name: Events
+    link: /events
   - name: Newsletter
     link: /newsletter
   - name: Committee
     link: /committee
-  - name: Clubs
-    link: /clubs
   - name: Calendar
     link: /calendar
   - name: Sponsor
@@ -53,6 +53,8 @@ collections:
     output: true
     permalink: /newsletter/:title
   clubs:
+  events:
+    sort_by: order
 
 feed:
   collections:

css/events.scss

@@ -0,0 +1,246 @@
+---
+---
+
+@import url("https://fonts.googleapis.com/css2?family=Gentium+Book+Basic:wght@700&family=Ovo&display=swap");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
+
+.page-header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 1rem;
+
+  .page-information {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .tex {
+    max-width: 280px;
+    min-width: 280px;
+  }
+}
+
+.page-description {
+  background-color: #fff;
+  max-width: 100%;
+  border-radius: 10px;
+  padding: 15px;
+
+  * {
+    color: black;
+  }
+}
+
+.page-footer {
+  margin-top: 1rem;
+}
+
+.calendar-callout {
+  max-width: 100%;
+  border-radius: 10px;
+  background-color: #9d68dc;
+  padding: 5px 15px;
+
+  a {
+    color: #fff;
+  }
+}
+
+.events-listing {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  margin-top: 1rem;
+  gap: 1rem;
+}
+
+.event {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 100%;
+  position: relative;
+  transition: opacity 0.1s;
+
+  overflow: hidden;
+
+  * {
+    color: black;
+  }
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  .details {
+    padding-top: 5px;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    a {
+      color: #9d68dc;
+    }
+  }
+
+  .event-image {
+    height: 15rem;
+    max-width: none;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  &.missing-semester {
+    background-color: #303030;
+
+    * {
+      color: #fff;
+    }
+
+    .swooshy-thing::before {
+      content: " ";
+      height: 1rem;
+      width: 100%;
+      display: block;
+      position: relative;
+      margin-top: -1rem;
+      background: repeating-linear-gradient(
+        -45deg,
+        #2f3c63,
+        #2f3c63 100px,
+        #0ce3ac 100px,
+        #0ce3ac 200px
+      );
+    }
+  }
+
+  &.tex-talks {
+    background-color: #dac6fa;
+
+    .details {
+      a {
+        color: #7d3acf;
+      }
+    }
+  }
+
+  &.ball {
+    border: 2px solid #e4d05f;
+
+    * {
+      color: #fff;
+      font-family: "Ovo", serif;
+    }
+
+    background-image: url("/assets/events/ball/2022-background.png");
+
+    .decorative-tex {
+      position: absolute;
+      width: 150px;
+      height: 150px;
+      z-index: 60;
+      margin-bottom: -60px;
+      right: 55%;
+      bottom: 0;
+    }
+
+    .details {
+      h2 {
+        font-family: "Gentium Book Basic", serif;
+        color: #cbb347;
+        font-size: 2.5em;
+      }
+
+      background-color: rgba(0, 0, 0, 0.2666666667);
+    }
+  }
+
+  &.event-long {
+    grid-column: span 3;
+
+    .event-image {
+      width: 50%;
+      float: right;
+      height: 18rem;
+
+      &.anchor-bottom {
+        object-position: bottom;
+      }
+    }
+
+    .details {
+      max-width: calc(50% - 30px);
+      height: 100%;
+      position: absolute;
+      top: 0;
+    }
+
+    &.verso {
+      .event-image {
+        float: right;
+      }
+
+      .details {
+        left: 0;
+        text-align: left;
+      }
+    }
+
+    &.recto {
+      .event-image {
+        float: left;
+      }
+
+      .details {
+        right: 0;
+        text-align: right;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .events-listing {
+    grid-template-columns: 1fr;
+  }
+
+  .event.event-long {
+    grid-column: 1;
+
+    &.verso,
+    &.recto {
+      .event-image {
+        width: inherit;
+        float: inherit;
+        height: inherit;
+        float: inherit;
+
+        height: 15rem;
+        max-width: none;
+        width: 100%;
+        object-fit: cover;
+      }
+
+      .details {
+        left: unset;
+        right: unset;
+        text-align: unset;
+        top: unset;
+        position: inherit;
+        max-width: unset;
+        height: unset;
+      }
+    }
+  }
+
+  .tex,
+  .decorative-tex {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1550px) {
+  .decorative-tex {
+    display: none;
+  }
+}