Remake Home page

DV8-Expo/website/static/gen/packed.js

@@ -1,6 +1,8 @@
-const defaultTitle="DV8 Game Expo <span>2023</span>";let navSpacing=(3*16);let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{resizeNav();scrollFunction();checkSection();};window.onresize=()=>{resizeNav();checkSection();}
-function resizeNav(){if(window.innerWidth>600){navSpacing=(3*16);}else{navSpacing=(6*16);}}
+function keepRatio(){let games=document.querySelectorAll(".game-box");games.forEach((game)=>{game.style.height=(game.offsetWidth*1.5)+"px";});}
+window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{keepRatio()
+resizeNav();scrollFunction();checkSection();};window.onresize=()=>{keepRatio()
+resizeNav();checkSection();};const defaultTitle="DV8 Game Expo <span>2023</span>";let navSpacing=(5*16);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=0;if(document.body.scrollTop>scrollHeight||document.documentElement.scrollTop>scrollHeight){nav.classList.add("scrolled");}else{nav.classList.remove("scrolled");}}
-function checkSection(){let navTitle=document.querySelector(".title > p");let sections=document.querySelectorAll("section");if((window.pageYOffset+navSpacing)<sections[0].offsetTop){if(prevElement===null)return;navTitle.innerHTML=defaultTitle;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=null;setTimeout(()=>{navTitle.style.animation="";},200);}
+function checkSection(){let navTitle=document.querySelector(".title > p");let sections=document.querySelectorAll("section");if((window.pageYOffset+navSpacing)<sections[0].offsetTop||window.pageYOffset===0){if(prevElement===null)return;navTitle.innerHTML=defaultTitle;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=null;setTimeout(()=>{navTitle.style.animation="";},200);return;}
 sections.forEach((section)=>{let top=section.offsetTop;let bottom=section.offsetTop+section.offsetHeight;if((window.pageYOffset+navSpacing)>=top&&window.pageYOffset<(bottom-navSpacing)){if(prevElement===section)return;navTitle.innerHTML=section.id.split("_").join(" ");navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=section;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"});}}});

DV8-Expo/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";
+    });
+}

DV8-Expo/website/static/js/main.js

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

DV8-Expo/website/static/js/nav.js

@@ -1,26 +1,12 @@
 const defaultTitle = "DV8 Game Expo <span>2023</span>";
-let navSpacing = (3 * 16); // The amount of pixels to offset the section by
+let navSpacing = (5 * 16); // The amount of pixels to offset the section by
 let prevElement = null;
 
-window.onscroll = () => {
-    scrollFunction();
-    checkSection();
-};
-window.onload = () => {
-    resizeNav();
-    scrollFunction();
-    checkSection();
-};
-window.onresize = () => {
-    resizeNav();
-    checkSection();
-}
-
 function resizeNav() {
     if (window.innerWidth > 600) {
-        navSpacing = (3 * 16);
+        navSpacing = (5 * 16);
     } else {
-        navSpacing = (6 * 16);
+        navSpacing = (8 * 16);
     }
 }
 
@@ -43,7 +29,7 @@ function checkSection() {
     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) {
+    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;
 
@@ -53,6 +39,8 @@ function checkSection() {
 
         // 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

DV8-Expo/website/static/sass/animations.sass

@@ -1,21 +1,32 @@
 @keyframes glow
     0%
         opacity: 0
-        // text-shadow: 0 0 0 $primary
     50%
         opacity: 1
-        // text-shadow: 0 0.25rem 0.5rem $primary
     100%
         opacity: 0
-        // text-shadow: 0 0 0 $primary
+
+@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

DV8-Expo/website/static/sass/header.sass

@@ -1,7 +1,7 @@
 header
-    margin-bottom: 3rem
-    padding: 2rem
-    height: calc(100vh - 6rem)
+    padding: 0 1rem
+    height: 100vh
+    max-height: 30rem
     display: flex
     flex-direction: column
     justify-content: center
@@ -16,12 +16,35 @@ header
 
         > span
             font-family: $monospace-font
-            color: RGB($accent)
+            position: relative
+
+            &::before
+                content: attr(data-text)
+
+                font-weight: bolder
+                position: absolute
+                inset: 0
+
+                background-image: linear-gradient(45deg, #F36023, #FFE11C, #00AAB0, #D51E90, #C0D939)
+                background-size: 250%
+                background-clip: text
+                -webkit-background-clip: text
+                color: transparent
+
+                filter: blur(0.2rem)
+                animation: gradient 10s ease-in-out infinite
+                z-index: -1
+
     > p
         margin: 0
         font-size: 1.2rem
 
+    > img
+        margin-bottom: 1rem
+        max-width: 40rem
+        max-height: 30rem
+
     > i
         margin: 1rem 0 0
         font-size: 1.2rem
-        animation: glow 3s ease-in-out infinite
+        animation: glow 3s ease-in-out infinite

DV8-Expo/website/static/sass/nav.sass

@@ -1,5 +1,7 @@
 nav
-    padding: 0 0.5rem
+    padding-left: 1rem
+    padding-right: 0.5rem
+    width: 100%
     height: 3rem
 
     display: flex
@@ -15,7 +17,7 @@ nav
     font-size: 1.1rem
     white-space: nowrap
 
-    color: RGB($secondary)
+    color: RGB($primary)
 
     overflow: hidden
     z-index: 100
@@ -25,7 +27,7 @@ nav
         content: ""
         position: absolute
         inset: 0
-        background: var(--nav)
+        background: RGB(var(--nav))
         transform: translateY(-3rem)
         transition: transform 0.2s ease-in-out
         z-index: -1
@@ -53,41 +55,51 @@ nav
             &:hover
                 color: RGB($accent)
 
-    .title
+    > .title
         height: 3rem
         display: flex
         flex-direction: row
         align-items: center
         justify-content: center
-        opacity: 0
-        transition: opacity 0.1s ease-in-out
+        //opacity: 0
+        //transition: opacity 0.1s ease-in-out
 
         > p
             margin: auto
             font-size: inherit
-            color: RGB($secondary)
+            color: inherit
+            transition: color 0.1s ease-in-out
 
             > span
                 font-family: $monospace-font
                 color: RGB($accent)
 
     &.scrolled
-        .title
-            opacity: 1
+        //.title
+        //    opacity: 1
+        //    transition: opacity 0.1s ease-in-out 0.1s
+
+        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 > p
-            font-size: 1.3rem
+        > .title
+            opacity: 1
+
+            > p
+                font-size: 1.3rem
 
         &.scrolled
             top: 0

DV8-Expo/website/static/sass/sections.sass

@@ -1,45 +1,25 @@
 section
-    margin: 0 auto 1rem
-    padding: 1rem
-    max-width: 75rem
+    margin: 3rem auto 0
+    max-width: 85rem
     display: flex
     flex-direction: column
-    justify-content: center
-    text-align: center
+    gap: 1rem
+    scroll-margin-top: 4rem
 
     > h2
-        margin: 0 0 1rem
+        margin: 0
         font-size: 2rem
         font-weight: bold
 
     > p
-        margin: 0 0 1rem
+        margin: 0
         font-size: 1rem
 
-    &.center
-        height: 100%
-        justify-content: center
-        align-items: center
+@media (max-width: 600px)
+    section
+        scroll-margin-top: 7rem
 
-    &.fill
-        background-color: RGB($secondary)
-        color: RGB($primary)
-        border-radius: $radius
-
-div.games
-    margin: 1rem
-    display: grid
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr))
-    gap: 2rem
-
-@media (max-width: 24rem)
-    div.games
-        margin: 0
-        display: flex
-        flex-direction: column
-        gap: 1rem
-
-div.login
+.login
     padding: 0.5rem
 
     background-color: RGB($primary)
@@ -96,75 +76,120 @@ div.login
                 outline: none
                 background-color: RGB($secondary-button)
 
+.games
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    gap: 1rem
+
 .game-box
     margin: 0 auto
-    padding: 0.5rem
+    padding: 1rem
 
-    width: 100%
-    height: auto
+    width: 16rem
+    // Height is set by JS to keep an aspect ratio
+    // Though there is a CSS solution, its too new
+    // For me to be comfortable using it
+    height: 0
+
+    position: relative
 
     display: flex
     flex-direction: column
 
     font-family: $main-font
     font-size: 1rem
+    text-decoration: none
 
     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
-    transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out
 
-    > img
-        margin: 0 0 0.5rem
+    .background
+        position: absolute
+        inset: 0
         width: 100%
-        display: block
-        // border-radius: calc(#{$radius} - 0.5rem) calc(#{$radius} - 0.5rem) calc(calc(#{$radius} - 0.5rem) / 2) calc(calc(#{$radius} - 0.5rem) / 2)
-
-    > h2
-        margin: 0 0 0.5rem
-        font-size: 1.5rem
-        font-weight: bold
-
-    > p
         height: 100%
-        margin: 0 0 1rem
+        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%
 
-    > .options
         display: flex
-        flex-direction: row
+        flex-direction: column
         gap: 0.5rem
-        font-family: $monospace-font
 
-        > a
+        z-index: +3
+
+        .logo
+            margin: 0 auto 1rem
+            width: auto
+            height: auto
+            max-width: 100%
+            max-height: 50%
+            display: block
+            border-radius: calc(#{$radius} - 0.5rem)
+
+        > h2
             margin: 0
-            padding: 0.5rem 1rem
+            font-size: 2rem
+            font-weight: bold
+            color: RGB($accent)
 
-            height: 2.5rem
+        > p
+            margin: 0
+
+        > span
+            height: 100%
+
+        > ul
+            margin: 0
+            padding: 0
+            list-style: none
 
             display: flex
-            justify-content: center
-            align-items: center
+            flex-direction: row
+            flex-wrap: wrap
+            gap: 0.5rem
 
-            text-decoration: none
+            > li
+                margin: 0
+                padding: 0.25rem 0.5rem
 
-            background-color: RGB($primary-button)
-            color: RGB($primary)
-            border-radius: calc(calc(#{$radius} - 0.5rem) / 2)
+                font-size: 0.9rem
 
-            transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out
+                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)
 
-            > i
-                font-size: 1.2rem
+@media (max-width: 600px)
+    .game-box
+        margin-bottom: 2rem
+        padding: 0.75rem
+        width: 14rem
+        > div
+            .logo
+                margin-bottom: 0.5rem
+                max-height: 25%
 
-            &:first-child
-                border-bottom-left-radius: calc(#{$radius} - 0.5rem)
-
-            &:last-child
-                border-bottom-right-radius: calc(#{$radius} - 0.5rem)
-
-            &:hover, &:focus-visible
-                outline: none
-                transform: translateY(-0.1rem)
+            > h2
+                font-size: 1.5rem

DV8-Expo/website/static/sass/styles.sass

@@ -14,20 +14,25 @@ $monospace-font: var(--monospace-font)
 //    animation-duration: 0s !important
 //    transition: none !important
 
+//--dv8-orange: #F36023
+//--dv8-yellow: #FFE11C
+//--dv8-cyan: #00AAB0
+//--dv8-magenta: #D51E90
+//--dv8-lime: #C0D939
 
 \:root
-    --primary: 51, 47, 47
-    --secondary: 214, 204, 199
-    --primary-button: 191, 170, 130
-    --secondary-button: 222, 209, 193
+    --primary: 43, 43, 43
+    --secondary: 240, 240, 245
+    --primary-button: 242, 96, 34
+    --secondary-button: 191, 85, 40
     --accent: 194, 165, 136
 
-    --radius: 1rem
+    --radius: 0.3rem
 
     --main-font: 'Rubik', sans-serif
     --monospace-font: 'JetBrains Mono', monospace
 
-    --nav: #{ darken(#332f2f, 5%) }
+    --nav: 35, 35, 35
 
 @import "animations"
 @import "nav"
@@ -50,7 +55,7 @@ body
     grid-template-rows: 1fr auto
 
 .background
-    background-color: RGB($primary)
+    background-color: RGB($secondary)
     position: absolute
     inset: 0
     overflow: hidden
@@ -63,7 +68,7 @@ body
         height: 110%
         object-fit: cover
         filter: blur(0.25rem)
-        opacity: 0.2
+        opacity: 0.6
 
     &::after
         content: ''
@@ -73,10 +78,14 @@ body
         z-index: +1
 
 main
-    padding-top: 3rem
+    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
@@ -87,7 +96,7 @@ footer
     justify-content: center
     align-items: center
 
-    background-color: RGB($primary)
+    background-color: RGB(var(--nav))
     color: RGB($secondary)
 
     z-index: 2
@@ -112,4 +121,4 @@ footer
             cursor: pointer
 
             &:hover
-                text-decoration: underline
+                text-decoration: underline