up resize on small screen

This commit is contained in:
Tykayn 2023-06-19 15:25:45 +02:00 committed by tykayn
parent a222e455c6
commit ac1c61fa03
3 changed files with 44 additions and 11 deletions

2
.gitignore vendored
View File

@ -2,5 +2,7 @@
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
# Useful .gitignore templates: https://github.com/github/gitignore
node_modules
.nvm
~/.nvm
dist
.cache

View File

@ -2796,7 +2796,27 @@ fieldset[disabled] .button {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
@media screen and (max-width: 416px) {
.nav-main p {
padding-left: 30vw;
}
}
@media screen and (max-height: 800px) {
#main_title {
top: 160px;
}
}
@media screen and (max-width: 768px) {
.nav-main p{
padding-left: 10vw;
}
#unlock,
#unlock_white img{
height: 10rem;
}
.button.is-responsive.is-small {
font-size: 0.5625rem;
}
@ -2813,6 +2833,10 @@ fieldset[disabled] .button {
.button.is-responsive.is-large {
font-size: 1rem;
}
#content_all h2, #welcome h2{
font-size: 4em;
}
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
.button.is-responsive.is-small {
@ -12360,7 +12384,7 @@ main nav {
}
#unlock_white{
opacity: 0;
margin-top: -471.9px;
margin-top: -4em;
}
#open-handle {
float: left;
@ -12728,6 +12752,7 @@ main nav {
text-align: left;
}
#content_all .columns {
top: -145vh;
width: 55vw;
@ -12810,6 +12835,12 @@ main nav {
.slider-screen {
min-height: 100vh;
}
#popover, #portfolio {
min-height: 200vh;
}
#popover .phone-container, #portfolio .phone-container{
width: 50vw;
}
}
@media screen and (max-width: 35em) {

View File

@ -10,7 +10,7 @@ let enable_animations = false
enable_animations = true
const rotateYCard = '200deg'
const offsetCard = '-100px'
const offsetCard = '-=100'
function animateCard (id, side) {
@ -94,15 +94,15 @@ if (enable_animations) {
},
keyframes: [
{
top: '500',
top: '-=50',
width: '100vw',
},
{
top: '200',
// width: "-=20vw",
top: '-=50',
width: "-=5vw",
},
{
top: '-100',
top: '-=100',
width: '-=40vw',
}]
})
@ -234,7 +234,7 @@ if (enable_animations) {
gsap.fromTo('#content_all_img',
{
scale: 1,
left: -100
left: "-=100"
},
{
scale: 1.1,
@ -252,15 +252,15 @@ if (enable_animations) {
{
opacity: 0.5,
scale: 1,
bottom: '-100vh',
height: '22rem',
bottom: '-=100vh',
height: '10rem',
},
{
opacity: 1,
bottom: '50vh',
scale: 1.5,
ease: 'spline',
height: '25rem',
height: '11rem',
scrollTrigger: {
trigger: '#open-handle',
scrub: 2,