Fuck so much to comment on

Renamed the folders and containers to something more reasonable
Using .env file for secretes so I can better hide them from git
Mostly it, I think

GameExpo/website/static/js/games.js

@@ -0,0 +1,6 @@
+function keepRatio() {
+    let games = document.querySelectorAll(".game-box");
+    games.forEach((game) => {
+        game.style.height = (game.offsetWidth * 1.5) + "px";
+    });
+}

GameExpo/website/static/js/main.js

@@ -0,0 +1,15 @@
+window.onscroll = () => {
+    scrollFunction();
+    checkSection();
+};
+window.onload = () => {
+    keepRatio()
+    resizeNav();
+    scrollFunction();
+    checkSection();
+};
+window.onresize = () => {
+    keepRatio()
+    resizeNav();
+    checkSection();
+};

GameExpo/website/static/js/nav.js

@@ -0,0 +1,82 @@
+const defaultTitle = "DV8 Game Expo <span>2023</span>";
+let navSpacing = (5 * 16); // The amount of pixels to offset the section by
+let prevElement = null;
+
+function resizeNav() {
+    if (window.innerWidth > 600) {
+        navSpacing = (5 * 16);
+    } else {
+        navSpacing = (8 * 16);
+    }
+}
+
+function scrollFunction() {
+    let nav = document.querySelector("nav");
+    // let scrollHeight = window.innerHeight - nav.offsetHeight;
+    let scrollHeight = 0;
+
+    if (document.body.scrollTop > scrollHeight ||
+        document.documentElement.scrollTop > scrollHeight) {
+        nav.classList.add("scrolled");
+    } else {
+        nav.classList.remove("scrolled");
+    }
+}
+
+function checkSection() {
+    // Get the nav and sections
+    let navTitle = document.querySelector(".title > p");
+    let sections = document.querySelectorAll("section");
+
+    // If we're at the top of the page, set the title to the default
+    if ((window.pageYOffset + navSpacing) < sections[0].offsetTop || window.pageYOffset === 0) {
+        // If we're already on the default title, don't do anything as it'll break the animation
+        if (prevElement === null) return;
+
+        navTitle.innerHTML = defaultTitle;
+        navTitle.style.animation = "title-change 0.2s ease-in-out";
+        prevElement = null;
+
+        // Remove the animation after it's done, so we can animate again
+        setTimeout(() => { navTitle.style.animation = ""; }, 200);
+
+        return;
+    }
+
+    // While at this point we may not need to check for the sections
+    // There aren't many sections, so it's not a big deal
+    sections.forEach((section) => {
+        // Get the position of the section
+        let top = section.offsetTop;
+        let bottom = section.offsetTop + section.offsetHeight;
+
+        // If the section is on the screen is:
+        // 1. The top of the section is above the top of the screen
+        // 2. The bottom of the section is below the bottom of the screen
+        if ((window.pageYOffset + navSpacing) >= top && window.pageYOffset < (bottom - navSpacing)) {
+            // If we're already on the section, don't do anything as it'll break the animation
+            if (prevElement === section) return;
+
+            navTitle.innerHTML = section.id.split("_").join(" ");
+            navTitle.style.animation = "title-change 0.2s ease-in-out";
+            prevElement = section;
+
+            // Remove the animation after it's done, so we can animate again
+            setTimeout(() => { navTitle.style.animation = ""; }, 200);
+        }
+    });
+}
+
+
+document.querySelectorAll("nav > ul > li > a").forEach((element) => {
+    element.onclick = () => {
+        let anchor = location.hash.split("#")[1].toString();
+        let element = document.getElementById(anchor);
+
+        if (element === null) {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        } else {
+            window.scrollTo({top: (element.offsetTop + navSpacing), behavior: "smooth"});
+        }
+    }
+});

GameExpo/website/static/sass/animations.sass

@@ -0,0 +1,38 @@
+@keyframes glow
+    0%
+        opacity: 0
+    50%
+        opacity: 1
+    100%
+        opacity: 0
+
+@keyframes gradient
+    0%
+        background-position: 0% 0%
+    25%
+        background-position: 100% 50%
+    50%
+        background-position: 0% 100%
+    75%
+        background-position: 50% 25%
+    100%
+        background-position: 0% 50%
+
+@keyframes title-change
+    0%
+        transform: translateX(-3rem)
+        opacity: 0
+        filter: blur(0.2rem)
+    100%
+        transform: translateX(0)
+        opacity: 1
+        filter: blur(0)
+
+@media (max-width: 600px)
+    @keyframes title-change
+        0%
+            transform: translateY(-0.5rem)
+            opacity: 0
+        100%
+            transform: translateY(0)
+            opacity: 1

GameExpo/website/static/sass/header.sass

@@ -0,0 +1,36 @@
+header
+    padding: 0 1rem
+    height: 100vh
+    max-height: 30rem
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    text-align: center
+    font-family: $main-font
+    color: RGB($primary)
+
+    > h1
+        margin: 0
+        font-size: 3rem
+
+        > span
+            font-family: $monospace-font
+            font-weight: normal
+            color: RGB($accent)
+
+    > p
+        margin: 0
+        font-size: 1.2rem
+
+    > img
+        margin-bottom: 1rem
+        width: 40rem
+        height: auto
+        max-width: 100%
+        max-height: 30rem
+
+    > i
+        margin: 1rem 0 0
+        font-size: 1.2rem
+        animation: glow 3s ease-in-out infinite

GameExpo/website/static/sass/nav.sass

@@ -0,0 +1,92 @@
+nav
+    padding-left: 1rem
+    padding-right: 0.5rem
+    width: 100%
+    height: 3rem
+
+    display: flex
+    flex-direction: row
+    align-items: center
+
+    position: fixed
+    top: 0
+    left: 0
+
+    font-weight: bold
+    font-family: $main-font
+    font-size: 1.1rem
+    white-space: nowrap
+
+    color: RGB($primary)
+    // border-bottom: 1px solid RGB($primary)
+
+    overflow: hidden
+    z-index: 100
+    transition: color 0.1s ease-in-out
+
+    &::before
+        content: ""
+        position: absolute
+        inset: 0
+        background: RGB(var(--nav))
+        transform: translateY(-3rem)
+        transition: transform 0.2s ease-in-out
+        z-index: -1
+    > span
+        width: 100%
+    > ul
+        margin: 0
+        padding: 0
+        height: 3rem
+        list-style: none
+
+        display: flex
+        flex-direction: row
+        align-items: center
+        > li > a
+            margin: 0 0.75rem
+            padding: 0.1rem 0.5rem
+            text-decoration: none
+            color: inherit
+            transition: color 0.1s ease-in-out
+
+            &:hover
+                color: RGB($accent)
+
+    > .title
+        height: 3rem
+        display: flex
+        flex-direction: row
+        align-items: center
+        justify-content: center
+        > p
+            margin: auto
+            font-size: inherit
+            color: inherit
+            transition: color 0.1s ease-in-out
+            > span
+                font-family: $monospace-font
+                color: RGB($accent)
+
+    &.scrolled
+        color: RGB($secondary)
+        &::before
+            transform: translateY(0)
+
+@media (max-width: 600px)
+    nav
+        padding-right: 1rem
+        height: 6rem
+        top: -3rem
+        display: flex
+        flex-direction: column
+        justify-content: center
+        transition: top 0.2s ease-in-out
+
+        > .title
+            opacity: 1
+            > p
+                font-size: 1.3rem
+
+        &.scrolled
+            top: 0

GameExpo/website/static/sass/sections.sass

@@ -0,0 +1,198 @@
+section
+    margin: 3rem auto 0
+    max-width: 85rem
+    display: flex
+    flex-direction: column
+    gap: 1rem
+    scroll-margin-top: 4rem
+
+    > h2
+        margin: 0
+        font-size: 2rem
+        font-weight: bold
+
+    > p
+        margin: 0
+        font-size: 1rem
+
+@media (max-width: 600px)
+    section
+        scroll-margin-top: 7rem
+        text-align: center
+        justify-content: center
+
+.login
+    padding: 0.5rem
+
+    background-color: RGB($primary)
+    color: RGB($secondary)
+    border-radius: $radius
+
+    > p
+        margin: 0 0 0.5rem
+        padding: 0.5rem
+
+        background-color: RGB($accent)
+        color: RGB($primary)
+        border-radius: calc(calc(#{$radius} - 0.5rem) / 2)
+
+        &:first-child
+            border-top-left-radius: calc(#{$radius} - 0.5rem)
+            border-top-right-radius: calc(#{$radius} - 0.5rem)
+
+    > form
+        display: flex
+        flex-direction: row
+
+        > input
+            padding: 0.5rem 1rem
+
+            width: 100%
+
+            font-size: 1rem
+            font-family: $monospace-font
+
+            background-color: RGB($secondary)
+            color: RGB($primary)
+            border-radius: calc(calc(#{$radius} - 0.5rem) / 2) 0 0 calc(#{$radius} - 0.5rem)
+            border: none
+
+            transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out
+
+            &:hover, &:focus-visible
+                outline: none
+
+        > button
+            padding: 0.5rem 1rem
+
+            font-size: 1rem
+
+            background-color: RGB($primary-button)
+            color: RGB($primary)
+            border-radius: 0 calc(calc(#{$radius} - 0.5rem) / 2) calc(#{$radius} - 0.5rem) 0
+            border: none
+
+            transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out
+
+            &:hover, &:focus-visible
+                outline: none
+                background-color: RGB($secondary-button)
+
+.games
+    margin-top: 1rem
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    gap: 1rem
+
+.game-box
+    margin: 0 auto
+    padding: 1rem
+
+    width: 16rem
+    height: 0
+
+    position: relative
+
+    display: flex
+    flex-direction: column
+
+    font-family: $main-font
+    font-size: 1rem
+    text-decoration: none
+    text-align: center
+
+    background-color: RGB($primary)
+    color: RGB($secondary)
+    border-radius: $radius
+    box-shadow: 0 0.2rem 1rem 0 RGB($primary)
+
+    transition: box-shadow 0.1s ease-in-out, transform 0.25s ease-in-out
+    overflow: hidden
+
+    .background
+        position: absolute
+        inset: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+        opacity: 0.3
+        filter: blur(0.25rem)
+        z-index: +1
+
+    &::after
+        content: ''
+        position: absolute
+        inset: 0
+        background-image: linear-gradient(to top, transparent, RGB($primary))
+        z-index: +2
+
+    > div
+        position: relative
+
+        height: 100%
+
+        display: flex
+        flex-direction: column
+        gap: 0.5rem
+
+        font-weight: bold
+
+        z-index: +3
+
+        .logo
+            margin: 0 auto 1rem
+            width: auto
+            height: auto
+            max-width: 100%
+            max-height: 40%
+            display: block
+            border-radius: calc(#{$radius} / 2)
+
+        > h2
+            margin: 0
+            font-size: 2rem
+            color: RGB($accent)
+
+        > p
+            margin: 0
+
+        > span
+            height: 100%
+
+        > ul
+            margin: 0
+            padding: 0
+            list-style: none
+
+            display: flex
+            flex-direction: row
+            flex-wrap: wrap
+            gap: 0.5rem
+
+            > li
+                margin: 0
+                padding: 0.25rem 0.5rem
+
+                font-size: 0.9rem
+                font-weight: normal
+
+                background-color: RGBA($accent, 0.5)
+                color: RGB($secondary)
+                border-radius: $radius
+    &:hover
+        box-shadow: 0 0.25rem 1.25rem 0 RGB($primary)
+        transform: scale(1.03) translateY(-0.25rem)
+
+@media (max-width: 600px)
+    .game-box
+        margin-bottom: 2rem
+        padding: 0.75rem
+        width: 14rem
+        > div
+            .logo
+                margin-bottom: 0.5rem
+                max-height: 25%
+
+            > h2
+                font-size: 1.5rem

GameExpo/website/static/sass/styles.sass

@@ -0,0 +1,124 @@
+$primary: var(--primary)
+$secondary: var(--secondary)
+$primary-button: var(--primary-button)
+$secondary-button: var(--secondary-button)
+$accent: var(--accent)
+
+$radius: var(--radius)
+
+$main-font: var(--main-font)
+$monospace-font: var(--monospace-font)
+
+// Accessibility setting
+//*, *::before, *::after
+//    animation-duration: 0s !important
+//    transition: none !important
+
+//--dv8-orange: #F36023
+//--dv8-yellow: #FFE11C
+//--dv8-cyan: #00AAB0
+//--dv8-magenta: #D51E90
+//--dv8-lime: #C0D939
+
+\:root
+    --primary: 43, 43, 43
+    --secondary: 240, 240, 245
+    --primary-button: 242, 96, 34
+    --secondary-button: 191, 85, 40
+    --accent: 194, 165, 136
+
+    --radius: 0.3rem
+
+    --main-font: 'Rubik', sans-serif
+    --monospace-font: 'JetBrains Mono', monospace
+
+    --nav: 35, 35, 35
+
+@import "animations"
+@import "nav"
+@import "header"
+@import "sections"
+
+*
+    box-sizing: border-box
+
+html
+    font-family: $main-font
+    background-color: RGB($secondary)
+    color: RGB($primary)
+
+body
+    margin: 0
+    padding: 0
+    min-height: 100vh
+    display: grid
+    grid-template-rows: 1fr auto
+
+.background
+    background-color: RGB($secondary)
+    position: absolute
+    inset: 0
+    overflow: hidden
+    z-index: 1
+
+    > img
+        position: absolute
+        inset: -5%
+        width: 110%
+        height: 110%
+        object-fit: cover
+        filter: blur(0.25rem)
+        opacity: 0.6
+
+    &::after
+        content: ''
+        position: absolute
+        inset: 0
+        background-image: linear-gradient(to top, RGB($secondary) 3%, RGBA($primary, 0.1))
+        z-index: +1
+
+main
+    padding: 3rem 2rem 2rem
+    position: relative
+    z-index: 2
+
+@media (max-width: 600px)
+    main
+        padding: 3rem 1rem 1rem
+
+footer
+    margin: auto 0 0
+    padding: 0.5rem
+
+    position: relative
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    background-color: RGB(var(--nav))
+    color: RGB($secondary)
+
+    z-index: 2
+
+    > p
+        margin: 0
+
+        font-size: 0.8rem
+        font-family: $monospace-font
+        text-align: center
+
+        color: RGB($secondary)
+
+        > a
+            margin: 0
+
+            font-size: inherit
+            font-family: inherit
+
+            color: RGB($accent)
+            text-decoration: none
+            cursor: pointer
+
+            &:hover
+                text-decoration: underline