diff --git a/DV8-Expo/website/static/gen/packed.css b/DV8-Expo/website/static/gen/packed.css index 0a8092c..1e78b66 100644 --- a/DV8-Expo/website/static/gen/packed.css +++ b/DV8-Expo/website/static/gen/packed.css @@ -1 +1 @@ -:root{--primary:51,47,47;--secondary:214,204,199;--primary-button:191,170,130;--secondary-button:222,209,193;--accent:194,165,136;--radius:1rem;--main-font:'Rubik',sans-serif;--monospace-font:'JetBrains Mono',monospace;--nav:#262323}@keyframes glow{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes title-change{0%{transform:translateX(-3rem);opacity:0}100%{transform:translateX(0);opacity:1}}@media(max-width:600px){@keyframes title-change{0%{transform:translateY(-0.5rem);opacity:0}100%{transform:translateY(0);opacity:1}}}nav{padding: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:var(--main-font);font-size:1.1rem;white-space:nowrap;color:RGB(var(--secondary));overflow:hidden;z-index:100;transition:color .1s ease-in-out}nav::before{content:"";position:absolute;inset:0;background:var(--nav);transform:translateY(-3rem);transition:transform .2s ease-in-out;z-index:-1}nav>span{width:100%}nav>ul{margin:0;padding:0;height:3rem;list-style:none;display:flex;flex-direction:row;align-items:center}nav>ul>li>a{margin:0 .75rem;padding:.1rem .5rem;text-decoration:none;color:inherit;transition:color .1s ease-in-out}nav>ul>li>a:hover{color:RGB(var(--accent))}nav>.title{height:3rem;display:flex;flex-direction:row;align-items:center;justify-content:center;opacity:0;transition:opacity .1s ease-in-out}nav>.title>p{margin:auto;font-size:inherit;color:RGB(var(--secondary))}nav>.title>p>span{font-family:var(--monospace-font);color:RGB(var(--accent))}nav.scrolled>.title{opacity:1}nav.scrolled::before{transform:translateY(0)}@media(max-width:600px){nav{height:6rem;top:-3rem;display:flex;flex-direction:column;justify-content:center;transition:top .2s ease-in-out}nav>.title>p{font-size:1.3rem}nav.scrolled{top:0}}header{margin-bottom:3rem;padding:2rem;height:calc(100vh - 6rem);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-family:var(--main-font);color:RGB(var(--primary))}header>h1{margin:0;font-size:3rem}header>h1>span{font-family:var(--monospace-font);color:RGB(var(--accent))}header>p{margin:0;font-size:1.2rem}header>i{margin:1rem 0 0;font-size:1.2rem;animation:glow 3s ease-in-out infinite}section{margin:0 auto 1rem;padding:1rem;max-width:75rem;display:flex;flex-direction:column;justify-content:center;text-align:center}section>h2{margin:0 0 1rem;font-size:2rem;font-weight:bold}section>p{margin:0 0 1rem;font-size:1rem}section.center{height:100%;justify-content:center;align-items:center}section.fill{background-color:RGB(var(--secondary));color:RGB(var(--primary));border-radius:var(--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{padding:.5rem;background-color:RGB(var(--primary));color:RGB(var(--secondary));border-radius:var(--radius)}div.login>p{margin:0 0 .5rem;padding:.5rem;background-color:RGB(var(--accent));color:RGB(var(--primary));border-radius:calc(calc(var(--radius) - .5rem) / 2)}div.login>p:first-child{border-top-left-radius:calc(var(--radius) - .5rem);border-top-right-radius:calc(var(--radius) - .5rem)}div.login>form{display:flex;flex-direction:row}div.login>form>input{padding:.5rem 1rem;width:100%;font-size:1rem;font-family:var(--monospace-font);background-color:RGB(var(--secondary));color:RGB(var(--primary));border-radius:calc(calc(var(--radius) - .5rem) / 2) 0 0 calc(var(--radius) - .5rem);border:none;transition:transform .1s ease-in-out,border-radius .1s ease-in-out}div.login>form>input:hover,div.login>form>input:focus-visible{outline:none}div.login>form>button{padding:.5rem 1rem;font-size:1rem;background-color:RGB(var(--primary-button));color:RGB(var(--primary));border-radius:0 calc(calc(var(--radius) - .5rem) / 2) calc(var(--radius) - .5rem) 0;border:none;transition:transform .1s ease-in-out,border-radius .1s ease-in-out}div.login>form>button:hover,div.login>form>button:focus-visible{outline:none;background-color:RGB(var(--secondary-button))}.game-box{margin:0 auto;padding:.5rem;width:100%;height:auto;display:flex;flex-direction:column;font-family:var(--main-font);background-color:RGB(var(--primary));color:RGB(var(--secondary));border-radius:var(--radius);box-shadow:0 .2rem 1rem 0 RGB(var(--primary));overflow:hidden;transition:box-shadow .1s ease-in-out,transform .1s ease-in-out}.game-box>img{margin:0 0 .5rem;width:auto;height:10rem;object-fit:cover;display:block;border-radius:calc(var(--radius) - .5rem) calc(var(--radius) - .5rem) calc(calc(var(--radius) - .5rem) / 2) calc(calc(var(--radius) - .5rem) / 2)}.game-box>h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:bold}.game-box>p{height:100%;margin:0 0 1rem;font-size:1rem}.game-box>.options{display:flex;flex-direction:row;gap:.5rem;font-family:var(--monospace-font)}.game-box>.options>a{margin:0;padding:.5rem 1rem;height:2.5rem;display:flex;justify-content:center;align-items:center;font-size:1rem;text-decoration:none;background-color:RGB(var(--primary-button));color:RGB(var(--primary));border-radius:calc(calc(var(--radius) - .5rem) / 2);transition:transform .1s ease-in-out,border-radius .1s ease-in-out}.game-box>.options>a>i{font-size:1.2rem}.game-box>.options>a:first-child{border-bottom-left-radius:calc(var(--radius) - .5rem)}.game-box>.options>a:last-child{border-bottom-right-radius:calc(var(--radius) - .5rem)}.game-box>.options>a:hover,.game-box>.options>a:focus-visible{outline:none;transform:translateY(-0.1rem)}*{box-sizing:border-box}html{font-family:var(--main-font);background-color:RGB(var(--secondary));color:RGB(var(--primary))}body{margin:0;padding:0;min-height:100vh;display:grid;grid-template-rows:1fr auto}.background{background-color:RGB(var(--primary));position:absolute;inset:0;overflow:hidden;z-index:1}.background>img{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:blur(0.25rem);opacity:.2}.background::after{content:'';position:absolute;inset:0;background-image:linear-gradient(to top,RGB(var(--secondary)) 3%,transparent);z-index:+1}main{padding-top:3rem;position:relative;z-index:2}footer{margin:auto 0 0;padding:.5rem;position:relative;display:flex;justify-content:center;align-items:center;background-color:RGB(var(--primary));color:RGB(var(--secondary));z-index:2}footer>p{margin:0;font-size:.8rem;font-family:var(--monospace-font);text-align:center;color:RGB(var(--secondary))}footer>p>a{margin:0;font-size:inherit;font-family:inherit;color:RGB(var(--accent));text-decoration:none;cursor:pointer}footer>p>a:hover{text-decoration:underline} \ No newline at end of file +:root{--primary:51,47,47;--secondary:214,204,199;--primary-button:191,170,130;--secondary-button:222,209,193;--accent:194,165,136;--radius:1rem;--main-font:'Rubik',sans-serif;--monospace-font:'JetBrains Mono',monospace;--nav:#262323}@keyframes glow{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes title-change{0%{transform:translateX(-3rem);opacity:0}100%{transform:translateX(0);opacity:1}}@media(max-width:600px){@keyframes title-change{0%{transform:translateY(-0.5rem);opacity:0}100%{transform:translateY(0);opacity:1}}}nav{padding: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:var(--main-font);font-size:1.1rem;white-space:nowrap;color:RGB(var(--secondary));overflow:hidden;z-index:100;transition:color .1s ease-in-out}nav::before{content:"";position:absolute;inset:0;background:var(--nav);transform:translateY(-3rem);transition:transform .2s ease-in-out;z-index:-1}nav>span{width:100%}nav>ul{margin:0;padding:0;height:3rem;list-style:none;display:flex;flex-direction:row;align-items:center}nav>ul>li>a{margin:0 .75rem;padding:.1rem .5rem;text-decoration:none;color:inherit;transition:color .1s ease-in-out}nav>ul>li>a:hover{color:RGB(var(--accent))}nav>.title{height:3rem;display:flex;flex-direction:row;align-items:center;justify-content:center;opacity:0;transition:opacity .1s ease-in-out}nav>.title>p{margin:auto;font-size:inherit;color:RGB(var(--secondary))}nav>.title>p>span{font-family:var(--monospace-font);color:RGB(var(--accent))}nav.scrolled>.title{opacity:1}nav.scrolled::before{transform:translateY(0)}@media(max-width:600px){nav{height:6rem;top:-3rem;display:flex;flex-direction:column;justify-content:center;transition:top .2s ease-in-out}nav>.title>p{font-size:1.3rem}nav.scrolled{top:0}}header{margin-bottom:3rem;padding:2rem;height:calc(100vh - 6rem);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-family:var(--main-font);color:RGB(var(--primary))}header>h1{margin:0;font-size:3rem}header>h1>span{font-family:var(--monospace-font);color:RGB(var(--accent))}header>p{margin:0;font-size:1.2rem}header>i{margin:1rem 0 0;font-size:1.2rem;animation:glow 3s ease-in-out infinite}section{margin:0 auto 1rem;padding:1rem;max-width:75rem;display:flex;flex-direction:column;justify-content:center;text-align:center}section>h2{margin:0 0 1rem;font-size:2rem;font-weight:bold}section>p{margin:0 0 1rem;font-size:1rem}section.center{height:100%;justify-content:center;align-items:center}section.fill{background-color:RGB(var(--secondary));color:RGB(var(--primary));border-radius:var(--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{padding:.5rem;background-color:RGB(var(--primary));color:RGB(var(--secondary));border-radius:var(--radius)}div.login>p{margin:0 0 .5rem;padding:.5rem;background-color:RGB(var(--accent));color:RGB(var(--primary));border-radius:calc(calc(var(--radius) - .5rem) / 2)}div.login>p:first-child{border-top-left-radius:calc(var(--radius) - .5rem);border-top-right-radius:calc(var(--radius) - .5rem)}div.login>form{display:flex;flex-direction:row}div.login>form>input{padding:.5rem 1rem;width:100%;font-size:1rem;font-family:var(--monospace-font);background-color:RGB(var(--secondary));color:RGB(var(--primary));border-radius:calc(calc(var(--radius) - .5rem) / 2) 0 0 calc(var(--radius) - .5rem);border:none;transition:transform .1s ease-in-out,border-radius .1s ease-in-out}div.login>form>input:hover,div.login>form>input:focus-visible{outline:none}div.login>form>button{padding:.5rem 1rem;font-size:1rem;background-color:RGB(var(--primary-button));color:RGB(var(--primary));border-radius:0 calc(calc(var(--radius) - .5rem) / 2) calc(var(--radius) - .5rem) 0;border:none;transition:transform .1s ease-in-out,border-radius .1s ease-in-out}div.login>form>button:hover,div.login>form>button:focus-visible{outline:none;background-color:RGB(var(--secondary-button))}.game-box{margin:0 auto;padding:.5rem;width:100%;height:auto;display:flex;flex-direction:column;font-family:var(--main-font);background-color:RGB(var(--primary));color:RGB(var(--secondary));border-radius:var(--radius);box-shadow:0 .2rem 1rem 0 RGB(var(--primary));overflow:hidden;transition:box-shadow .1s ease-in-out,transform .1s ease-in-out}.game-box>img{margin:0 0 .5rem;width:auto;height:10rem;object-fit:cover;display:block;border-radius:calc(var(--radius) - .5rem) calc(var(--radius) - .5rem) calc(calc(var(--radius) - .5rem) / 2) calc(calc(var(--radius) - .5rem) / 2)}.game-box>h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:bold}.game-box>p{height:100%;margin:0 0 1rem;font-size:1rem}.game-box>.options{display:flex;flex-direction:row;gap:.5rem;font-family:var(--monospace-font)}.game-box>.options>a{margin:0;padding:.5rem 1rem;height:2.5rem;display:flex;justify-content:center;align-items:center;font-size:1rem;text-decoration:none;background-color:RGB(var(--primary-button));color:RGB(var(--primary));border-radius:calc(calc(var(--radius) - .5rem) / 2);transition:transform .1s ease-in-out,border-radius .1s ease-in-out}.game-box>.options>a>i{font-size:1.2rem}.game-box>.options>a:first-child{border-bottom-left-radius:calc(var(--radius) - .5rem)}.game-box>.options>a:last-child{border-bottom-right-radius:calc(var(--radius) - .5rem)}.game-box>.options>a:hover,.game-box>.options>a:focus-visible{outline:none;transform:translateY(-0.1rem)}*{box-sizing:border-box}html{font-family:var(--main-font);background-color:RGB(var(--secondary));color:RGB(var(--primary))}body{margin:0;padding:0;min-height:100vh;display:grid;grid-template-rows:1fr auto}.background{background-color:RGB(var(--primary));position:absolute;inset:0;overflow:hidden;z-index:1}.background>img{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:blur(0.25rem);opacity:.2}.background::after{content:'';position:absolute;inset:0;background-image:linear-gradient(to top,RGB(var(--secondary)) 3%,RGBA(var(--primary),0.1));z-index:+1}main{padding-top:3rem;position:relative;z-index:2}footer{margin:auto 0 0;padding:.5rem;position:relative;display:flex;justify-content:center;align-items:center;background-color:RGB(var(--primary));color:RGB(var(--secondary));z-index:2}footer>p{margin:0;font-size:.8rem;font-family:var(--monospace-font);text-align:center;color:RGB(var(--secondary))}footer>p>a{margin:0;font-size:inherit;font-family:inherit;color:RGB(var(--accent));text-decoration:none;cursor:pointer}footer>p>a:hover{text-decoration:underline} \ No newline at end of file diff --git a/DV8-Expo/website/static/gen/packed.js b/DV8-Expo/website/static/gen/packed.js index afbe9ae..6c94018 100644 --- a/DV8-Expo/website/static/gen/packed.js +++ b/DV8-Expo/website/static/gen/packed.js @@ -1,5 +1,5 @@ -const defaultTitle="DV8 Game Expo 2023";let navSpacing=(3*16);let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{scrollFunction()};window.onresize=()=>{if(window.innerWidth>600){navSpacing=(3*16);}else{navSpacing=(6*16);} -checkSection();} +const defaultTitle="DV8 Game Expo 2023";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 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){navTitle.style.animation="";},200);} 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);}});} diff --git a/DV8-Expo/website/static/js/nav.js b/DV8-Expo/website/static/js/nav.js index b1bf3d3..0cc7f1e 100644 --- a/DV8-Expo/website/static/js/nav.js +++ b/DV8-Expo/website/static/js/nav.js @@ -7,16 +7,21 @@ window.onscroll = () => { checkSection(); }; window.onload = () => { - scrollFunction() + resizeNav(); + scrollFunction(); + checkSection(); }; window.onresize = () => { + resizeNav(); + checkSection(); +} + +function resizeNav() { if (window.innerWidth > 600) { navSpacing = (3 * 16); } else { navSpacing = (6 * 16); } - - checkSection(); } function scrollFunction() { diff --git a/DV8-Expo/website/static/sass/styles.sass b/DV8-Expo/website/static/sass/styles.sass index bb0a7d3..2ef5c36 100644 --- a/DV8-Expo/website/static/sass/styles.sass +++ b/DV8-Expo/website/static/sass/styles.sass @@ -69,7 +69,7 @@ body content: '' position: absolute inset: 0 - background-image: linear-gradient(to top, RGB($secondary) 3%, transparent) + background-image: linear-gradient(to top, RGB($secondary) 3%, RGBA($primary, 0.1)) z-index: +1 main diff --git a/docker-compose.yml b/docker-compose.yml index 0d3b971..68af9fe 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -5,7 +5,7 @@ services: image: caddy:alpine restart: unless-stopped ports: - # - "80:80" + - "80:80" - "443:443" volumes: - ./Caddy/Caddyfile:/etc/caddy/Caddyfile