DV8/GameExpo23
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/GameExpo23.git synced 2025-06-27 01:56:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Resize nav on screen size

Browse source
This commit is contained in:
Michał Gdula 2023-05-19 13:32:12 +01:00
parent b12de32a67
commit 85986048da
10 changed files with 146 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

9
DV8-Expo/website/static/sass/animations.sass
View file

@ -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

4
DV8-Expo/website/static/sass/header.sass
View file

@ -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

75
DV8-Expo/website/static/sass/nav.sass
View file

@ -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)
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

32
DV8-Expo/website/static/sass/sections.sass
View file

@ -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

28
DV8-Expo/website/static/sass/styles.sass
View file

@ -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