mirror of
https://github.com/Fluffy-Bean/GameExpo23.git
synced 2025-05-14 14:22:16 +00:00
Resize nav on screen size
This commit is contained in:
parent
b12de32a67
commit
85986048da
10 changed files with 146 additions and 76 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,6 @@
|
|||
const defaultTitle="DV8 Game Expo <span>2023</span>";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)<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);}
|
||||
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);}});}
|
||||
const defaultTitle="DV8 Game Expo <span>2023</span>";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)<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);}
|
||||
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"});}}});
|
||||
|
|
@ -1,12 +1,23 @@
|
|||
const defaultTitle = "DV8 Game Expo <span>2023</span>";
|
||||
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"});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,14 +27,24 @@ 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
|
||||
> 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
|
||||
|
|
@ -42,24 +52,45 @@ nav
|
|||
transition: color 0.1s ease-in-out
|
||||
|
||||
&:hover
|
||||
color: $accent
|
||||
color: RGB($accent)
|
||||
|
||||
> h1
|
||||
font-size: inherit
|
||||
text-decoration: none
|
||||
color: $secondary
|
||||
> .title
|
||||
height: 3rem
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
justify-content: center
|
||||
opacity: 0
|
||||
transition: opacity 0.1s ease-in-out
|
||||
|
||||
> p
|
||||
margin: auto
|
||||
font-size: inherit
|
||||
color: RGB($secondary)
|
||||
|
||||
> span
|
||||
font-family: $monospace-font
|
||||
color: $accent
|
||||
color: RGB($accent)
|
||||
|
||||
&.scrolled
|
||||
color: $secondary
|
||||
|
||||
> h1
|
||||
> .title
|
||||
opacity: 1
|
||||
|
||||
&::before
|
||||
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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -23,12 +23,14 @@
|
|||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<h1>DV8 Game Expo <span>2023</span></h1>
|
||||
<div class="title"><p>DV8 Game Expo <span>2023</span></p></div>
|
||||
<span><!-- This is a separator --></span>
|
||||
<a href="{{ url_for('website.index') }}#">Home</a>
|
||||
<a href="{{ url_for('website.index') }}#About">About</a>
|
||||
<a href="{{ url_for('website.index') }}#Games">Games</a>
|
||||
{% if current_user.is_authenticated %}<a href="{{ url_for('website.logout') }}">Logout</a>{% endif %}
|
||||
<ul>
|
||||
<li><a href="{{ url_for('website.index') }}#">Home</a></li>
|
||||
<li><a href="{{ url_for('website.index') }}#What_is_this?">About</a></li>
|
||||
<li><a href="{{ url_for('website.index') }}#Student_Games">Games</a></li>
|
||||
{% if current_user.is_authenticated %}<li><a href="{{ url_for('website.logout') }}">Logout</a></li>{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<span class="background">
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
<i class="ph-bold ph-caret-double-down"></i>
|
||||
</header>
|
||||
|
||||
<section id="About">
|
||||
<h2>About</h2>
|
||||
<p>Tap to add text</p>
|
||||
<section id="What_is_this?">
|
||||
<h2>What is this?</h2>
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section id="Games">
|
||||
<h2>Games</h2>
|
||||
<section id="Student_Games">
|
||||
<h2>Student Games</h2>
|
||||
<p>Here are some games AAAA</p>
|
||||
|
||||
<div class="games">
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
|
||||
<div class="options">
|
||||
<a href="{{ url_for('website.g', game_id=game.id) }}" style="width: 100%">View</a>
|
||||
{% if game.downloadLink %}<a href="{{ game.downloadLink }}" style="background-color: var(--secondary-button); width: 2.5rem"><i class="ph ph-download"></i></a>{% endif %}
|
||||
<a href="#" style="background-color: var(--secondary-button); width: 2.5rem"><i class="ph ph-warning"></i></a>
|
||||
{% if game.downloadLink %}<a href="{{ game.downloadLink }}" style="background-color: rgb(var(--secondary-button)); width: 2.5rem"><i class="ph ph-download"></i></a>{% endif %}
|
||||
<a href="#" style="background-color: rgb(var(--secondary-button)); width: 2.5rem"><i class="ph ph-warning"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue