From 85986048da5b06465beb6f34c31faf28d4ccb930 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Fri, 19 May 2023 13:32:12 +0100 Subject: [PATCH] Resize nav on screen size --- DV8-Expo/website/static/gen/packed.css | 2 +- DV8-Expo/website/static/gen/packed.js | 9 ++- DV8-Expo/website/static/js/nav.js | 37 ++++++++-- DV8-Expo/website/static/sass/animations.sass | 9 +++ DV8-Expo/website/static/sass/header.sass | 4 +- DV8-Expo/website/static/sass/nav.sass | 75 ++++++++++++++------ DV8-Expo/website/static/sass/sections.sass | 32 ++++----- DV8-Expo/website/static/sass/styles.sass | 28 ++++---- DV8-Expo/website/templates/base.html | 12 ++-- DV8-Expo/website/templates/index.html | 14 ++-- 10 files changed, 146 insertions(+), 76 deletions(-) diff --git a/DV8-Expo/website/static/gen/packed.css b/DV8-Expo/website/static/gen/packed.css index bd49ace..0a8092c 100644 --- a/DV8-Expo/website/static/gen/packed.css +++ b/DV8-Expo/website/static/gen/packed.css @@ -1 +1 @@ -:root{--primary:#332f2f;--secondary:#d7cec9;--primary-button:#C0AB83;--secondary-button:#DDD1C1;--accent:#c2a588;--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}}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;background:transparent;color:var(--primary);z-index:100;transition:color .1s ease-in-out}nav::before{content:"";position:absolute;inset:0;background:var(--nav);transform:translateY(-100%);transition:transform .2s ease-in-out;z-index:-1}nav>span{width:100%}nav>a{margin:0 .75rem;padding:.1rem .5rem;text-decoration:none;color:inherit;transition:color .1s ease-in-out}nav>a:hover{color:var(--accent)}nav>h1{font-size:inherit;text-decoration:none;color:var(--secondary);opacity:0;transition:opacity .1s ease-in-out}nav>h1>span{font-family:var(--monospace-font);color:var(--accent)}nav.scrolled{color:var(--secondary)}nav.scrolled>h1{opacity:1}nav.scrolled::before{transform:translateY(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:var(--primary)}header>h1{margin:0;font-size:3rem}header>h1>span{font-family:var(--monospace-font);color: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:var(--secondary);color: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:var(--primary);color:var(--secondary);border-radius:var(--radius)}div.login>p{margin:0 0 .5rem;padding:.5rem;background-color:var(--accent);color: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:var(--secondary);color: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:var(--primary-button);color: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: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:var(--primary);color:var(--secondary);border-radius:var(--radius);box-shadow:0 .2rem 1rem 0 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:var(--primary-button);color: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:var(--secondary);color:var(--primary)}body{margin:0;padding:0;min-height:100vh;display:grid;grid-template-rows:1fr auto}.background{background-color: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:.3}.background::after{content:'';position:absolute;inset:0;background-image:linear-gradient(to top,var(--secondary),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:var(--primary);color:var(--secondary);z-index:2}footer>p{margin:0;font-size:.8rem;font-family:var(--monospace-font);text-align:center;color:var(--secondary)}footer>p>a{margin:0;font-size:inherit;font-family:inherit;color: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%,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 diff --git a/DV8-Expo/website/static/gen/packed.js b/DV8-Expo/website/static/gen/packed.js index 1f3c55f..afbe9ae 100644 --- a/DV8-Expo/website/static/gen/packed.js +++ b/DV8-Expo/website/static/gen/packed.js @@ -1,3 +1,6 @@ -const defaultTitle="DV8 Game Expo 2023";const spacing=48;let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{scrollFunction()};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("nav > h1");let sections=document.querySelectorAll("section");if((window.pageYOffset+spacing){navTitle.style.animation="";},200);} -sections.forEach((section)=>{let top=section.offsetTop;let bottom=section.offsetTop+section.offsetHeight;if((window.pageYOffset+spacing)>=top&&window.pageYOffset<(bottom-spacing)){if(prevElement===section)return;navTitle.innerHTML=section.id;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=section;setTimeout(()=>{navTitle.style.animation="";},200);}});} \ No newline at end of file +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();} +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);}});} +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"});}}}); \ No newline at end of file diff --git a/DV8-Expo/website/static/js/nav.js b/DV8-Expo/website/static/js/nav.js index e97f374..b1bf3d3 100644 --- a/DV8-Expo/website/static/js/nav.js +++ b/DV8-Expo/website/static/js/nav.js @@ -1,12 +1,23 @@ const defaultTitle = "DV8 Game Expo 2023"; -const spacing = 48; // The amount of pixels to offset the section by +let navSpacing = (3 * 16); // The amount of pixels to offset the section by let prevElement = null; window.onscroll = () => { scrollFunction(); checkSection(); }; -window.onload = () => { scrollFunction() }; +window.onload = () => { + scrollFunction() +}; +window.onresize = () => { + if (window.innerWidth > 600) { + navSpacing = (3 * 16); + } else { + navSpacing = (6 * 16); + } + + checkSection(); +} function scrollFunction() { let nav = document.querySelector("nav"); @@ -23,11 +34,11 @@ function scrollFunction() { function checkSection() { // Get the nav and sections - let navTitle = document.querySelector("nav > h1"); + 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 + spacing) < sections[0].offsetTop) { + if ((window.pageYOffset + navSpacing) < sections[0].offsetTop) { // If we're already on the default title, don't do anything as it'll break the animation if (prevElement === null) return; @@ -49,11 +60,11 @@ function checkSection() { // 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 + spacing) >= top && window.pageYOffset < (bottom - spacing)) { + 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; + navTitle.innerHTML = section.id.split("_").join(" "); navTitle.style.animation = "title-change 0.2s ease-in-out"; prevElement = section; @@ -62,3 +73,17 @@ function checkSection() { } }); } + + +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"}); + } + } +}); diff --git a/DV8-Expo/website/static/sass/animations.sass b/DV8-Expo/website/static/sass/animations.sass index 937b2d8..8f071c9 100644 --- a/DV8-Expo/website/static/sass/animations.sass +++ b/DV8-Expo/website/static/sass/animations.sass @@ -16,3 +16,12 @@ 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 \ No newline at end of file diff --git a/DV8-Expo/website/static/sass/header.sass b/DV8-Expo/website/static/sass/header.sass index c010c51..a7783cf 100644 --- a/DV8-Expo/website/static/sass/header.sass +++ b/DV8-Expo/website/static/sass/header.sass @@ -8,7 +8,7 @@ header align-items: center text-align: center font-family: $main-font - color: $primary + color: RGB($primary) > h1 margin: 0 @@ -16,7 +16,7 @@ header > span font-family: $monospace-font - color: $accent + color: RGB($accent) > p margin: 0 font-size: 1.2rem diff --git a/DV8-Expo/website/static/sass/nav.sass b/DV8-Expo/website/static/sass/nav.sass index c298872..b99ef5a 100644 --- a/DV8-Expo/website/static/sass/nav.sass +++ b/DV8-Expo/website/static/sass/nav.sass @@ -16,9 +16,9 @@ nav font-size: 1.1rem white-space: nowrap - background: transparent - color: $primary + color: RGB($secondary) + overflow: hidden z-index: 100 transition: color 0.1s ease-in-out @@ -27,39 +27,70 @@ nav position: absolute inset: 0 background: var(--nav) - transform: translateY(-100%) + transform: translateY(-3rem) transition: transform 0.2s ease-in-out z-index: -1 > span width: 100% - > a - margin: 0 0.75rem - padding: 0.1rem 0.5rem - text-decoration: none - color: inherit - transition: color 0.1s ease-in-out + > ul + margin: 0 + padding: 0 + height: 3rem + list-style: none - &:hover - color: $accent + display: flex + flex-direction: row + align-items: center - > h1 - font-size: inherit - text-decoration: none - color: $secondary + > 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 opacity: 0 transition: opacity 0.1s ease-in-out - > span - font-family: $monospace-font - color: $accent + > p + margin: auto + font-size: inherit + color: RGB($secondary) + + > span + font-family: $monospace-font + color: RGB($accent) &.scrolled - color: $secondary - - > h1 + > .title opacity: 1 &::before - transform: translateY(0) \ No newline at end of file + transform: translateY(0) + +@media (max-width: 600px) + nav + 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 + + &.scrolled + top: 0 \ No newline at end of file diff --git a/DV8-Expo/website/static/sass/sections.sass b/DV8-Expo/website/static/sass/sections.sass index 3ebea45..517d554 100644 --- a/DV8-Expo/website/static/sass/sections.sass +++ b/DV8-Expo/website/static/sass/sections.sass @@ -22,8 +22,8 @@ section align-items: center &.fill - background-color: $secondary - color: $primary + background-color: RGB($secondary) + color: RGB($primary) border-radius: $radius div.games @@ -42,16 +42,16 @@ div.games div.login padding: 0.5rem - background-color: $primary - color: $secondary + background-color: RGB($primary) + color: RGB($secondary) border-radius: $radius > p margin: 0 0 0.5rem padding: 0.5rem - background-color: $accent - color: $primary + background-color: RGB($accent) + color: RGB($primary) border-radius: calc(calc(#{$radius} - 0.5rem) / 2) &:first-child @@ -70,8 +70,8 @@ div.login font-size: 1rem font-family: $monospace-font - background-color: $secondary - color: $primary + background-color: RGB($secondary) + color: RGB($primary) border-radius: calc(calc(#{$radius} - 0.5rem) / 2) 0 0 calc(#{$radius} - 0.5rem) border: none @@ -85,8 +85,8 @@ div.login font-size: 1rem - background-color: $primary-button - color: $primary + background-color: RGB($primary-button) + color: RGB($primary) border-radius: 0 calc(calc(#{$radius} - 0.5rem) / 2) calc(#{$radius} - 0.5rem) 0 border: none @@ -94,7 +94,7 @@ div.login &:hover, &:focus-visible outline: none - background-color: $secondary-button + background-color: RGB($secondary-button) .game-box margin: 0 auto @@ -108,10 +108,10 @@ div.login font-family: $main-font - background-color: $primary - color: $secondary + background-color: RGB($primary) + color: RGB($secondary) border-radius: $radius - box-shadow: 0 0.2rem 1rem 0 $primary + box-shadow: 0 0.2rem 1rem 0 RGB($primary) overflow: hidden transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out @@ -153,8 +153,8 @@ div.login font-size: 1rem text-decoration: none - background-color: $primary-button - color: $primary + background-color: RGB($primary-button) + color: RGB($primary) border-radius: calc(calc(#{$radius} - 0.5rem) / 2) transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out diff --git a/DV8-Expo/website/static/sass/styles.sass b/DV8-Expo/website/static/sass/styles.sass index 4ad2463..bb0a7d3 100644 --- a/DV8-Expo/website/static/sass/styles.sass +++ b/DV8-Expo/website/static/sass/styles.sass @@ -16,11 +16,11 @@ $monospace-font: var(--monospace-font) \:root - --primary: #332f2f - --secondary: #d7cec9 - --primary-button: #C0AB83 - --secondary-button: #DDD1C1 - --accent: #c2a588 + --primary: 51, 47, 47 + --secondary: 214, 204, 199 + --primary-button: 191, 170, 130 + --secondary-button: 222, 209, 193 + --accent: 194, 165, 136 --radius: 1rem @@ -39,8 +39,8 @@ $monospace-font: var(--monospace-font) html font-family: $main-font - background-color: $secondary - color: $primary + background-color: RGB($secondary) + color: RGB($primary) body margin: 0 @@ -50,7 +50,7 @@ body grid-template-rows: 1fr auto .background - background-color: $primary + background-color: RGB($primary) position: absolute inset: 0 overflow: hidden @@ -63,13 +63,13 @@ body height: 110% object-fit: cover filter: blur(0.25rem) - opacity: 0.3 + opacity: 0.2 &::after content: '' position: absolute inset: 0 - background-image: linear-gradient(to top, $secondary, transparent) + background-image: linear-gradient(to top, RGB($secondary) 3%, transparent) z-index: +1 main @@ -87,8 +87,8 @@ footer justify-content: center align-items: center - background-color: $primary - color: $secondary + background-color: RGB($primary) + color: RGB($secondary) z-index: 2 @@ -99,7 +99,7 @@ footer font-family: $monospace-font text-align: center - color: $secondary + color: RGB($secondary) > a margin: 0 @@ -107,7 +107,7 @@ footer font-size: inherit font-family: inherit - color: $accent + color: RGB($accent) text-decoration: none cursor: pointer diff --git a/DV8-Expo/website/templates/base.html b/DV8-Expo/website/templates/base.html index 705eeda..f30970d 100644 --- a/DV8-Expo/website/templates/base.html +++ b/DV8-Expo/website/templates/base.html @@ -23,12 +23,14 @@ diff --git a/DV8-Expo/website/templates/index.html b/DV8-Expo/website/templates/index.html index bc62119..dd7aae4 100644 --- a/DV8-Expo/website/templates/index.html +++ b/DV8-Expo/website/templates/index.html @@ -7,13 +7,13 @@ -
-

About

-

Tap to add text

+
+

What is this?

+

The DV8 Game Expo, is a showcase of the works and efforts of students from the past year. This includes Level 3 year 1 and year 2.

-
-

Games

+
+

Student Games

Here are some games AAAA

@@ -30,8 +30,8 @@
View - {% if game.downloadLink %}{% endif %} - + {% if game.downloadLink %}{% endif %} +
{% endfor %}