remove some breakpoints

This commit is contained in:
Tykayn 2023-06-21 11:21:39 +02:00 committed by tykayn
parent 6f0186dd0f
commit aa9ca7524f
3 changed files with 2792 additions and 540 deletions

499
css/not_included.css Normal file
View File

@ -0,0 +1,499 @@
@media screen and (min-width: 501px) and (max-width: 900px) {
#unlock,
#unlock_white img {
height: 10rem;
}
.button.is-responsive.is-small {
font-size: 0.5625rem;
}
.button.is-responsive,
.button.is-responsive.is-normal {
font-size: 0.65625rem;
}
.button.is-responsive.is-medium {
font-size: 0.75rem;
}
.button.is-responsive.is-large {
font-size: 1rem;
}
#content_all h2, #welcome h2 {
font-size: 4em;
}
#baozun_group, #coming_soon, .credits {
margin: 0 0;
position: relative;
top: 900vw;
}
}
@media screen and (min-width: 951px) and (max-width: 1023px) {
#main_title {
top: 15rem;
height: 25vh;
}
#cover .button {
top: 7vh;
}
#content_all h2,
#welcome h2 {
font-size: 6em;
line-height: 1em;
text-align: left;
}
#content_all .columns {
top: -145vh;
width: 55vw;
margin-left: 0;
}
.columns {
display: block !important;
}
.column {
width: 100% !important;
}
#open {
top: 80vh;
}
#content-4 {
margin-top: 25vh;
}
#content-5 {
margin-top: 15vh;
}
#popover {
margin-top: 100vh;
}
#popover .phone-container, #portfolio .phone-container {
width: 39vw;
}
/**
exemples sliders
*/
.slider-screen .text-title {
margin-top: 1em;
}
.slider-screen .text,
.slider-screen .phone-container {
position: relative;
width: 412px;
left: 25vw;
top: 5vh;
}
.bullets {
top: 28em;
}
.arrow-left,
.arrow-right {
top: 60vh;
}
.slider-screen {
min-height: 100vh;
}
#popover, #portfolio {
min-height: 200vh;
}
#popover .phone-container, #portfolio .phone-container {
width: 50vw;
}
#we_develop .ar {
margin-top: -3rem;
}
.section {
padding: 3rem 3rem;
}
.section.is-medium {
padding: 9rem 4.5rem;
}
.section.is-large {
padding: 18rem 6rem;
}
section#carry {
padding-left: 10vw;
padding-right: 10vw;
min-height: 115rem;
margin-top: 15vh;
}
section#carry .title {
font-size: 4rem;
}
section#carry .description {
margin-top: 3vh;
font-size: 10rem;
}
section#carry .computer-block {
background-size: contain;
position: relative;
height: 100vh;
width: 100%;
margin-top: 50vh;
}
section#carry .gradient-bg {
margin-top: 0;
}
section#carry .gradient-bg-yellow {
margin-top: 0;
}
section#carry .bubbles {
position: static;
}
section#carry .bubbles p {
margin-top: 2rem;
left: 0;
}
section#carry .bubbles p :nth-of-type(1) {
left: 10%;
}
section#carry .bubbles p :nth-of-type(2) {
left: 70%;
}
section#carry .bubbles p :nth-of-type(3) {
left: 4vw;
margin-left: -60%;
}
section#carry .bubbles p :nth-of-type(4) {
left: -10%;
top: -100vh;
}
#popover, #portfolio {
height: 120vw;
}
#popover .phone-container, #portfolio .phone-container {
width: 410px;
left: 15vw;
}
#kyc .bubbles {
margin-top: -100vw;
}
}
@media screen and (max-width: 1200px) {
#main_title {
margin-top: 5vh;
}
#content_all h2,
#welcome h2 {
font-size: 4rem !important;
}
#content_all .text {
padding-right: 0;
}
.container-text-md {
width: auto;
}
#content_all .columns {
width: 100%;
margin: 1rem;
}
.flip-container .container-text {
width: 100%;
left: 5vw;
}
.flip-container .phone-container {
position: static;
margin: 4rem auto;
}
.flip-container.flip-from-left .container-text {
left: 5vw;
}
.flip-container .phone-container {
margin-top: 7rem;
}
.flip-container .text-description {
max-width: 90vw;
}
#content-4 {
margin-top: 50vh;
}
#content-5 {
margin-top: 45vh;
}
.slider-screen .text,
.slider-screen .phone-container {
left: 5vw;
max-width: 90vw;
}
#baozun_group {
margin-top: 650vw;
}
}
@media screen and (min-width: 1201px) and (max-width: 1500px) {
#transactionnal_webdesign {
min-height: 100vh;
padding-top: 5vh;
}
#transactionnal_webdesign .title {
font-size: 4rem;
}
#transactionnal_webdesign .description {
font-size: 9rem;
}
#china .show-on-medium {
display: none;
}
#china .hide-on-medium {
display: block;
}
#china .line {
width: 62vw;
top: 10vh;
}
#china .block-item {
margin-bottom: 2rem;
text-align: center;
}
#china .top {
font-size: 4rem;
margin-bottom: 2rem;
}
#china .bottom {
font-size: 3rem;
}
#china .cols .columns {
text-align: center;
display: block;
}
#we_develop .circle.circle-right {
right: 10vw;
}
#we_develop .circle.circle-left {
right: 90vw;
}
#we_develop .quick {
left: 3rem;
top: 77rem;
}
#we_develop .long_term {
margin-right: 5rem;
}
#we_develop .data {
text-align: left;
padding-left: 6rem;
margin-top: 2rem;
}
#we_develop .ar {
text-align: right;
padding-right: 6rem;
margin-top: 3rem;
}
#full_creative {
padding-bottom: 20rem;
}
#full_creative .title {
padding: 2rem;
}
#full_creative .column {
padding: 2rem;
}
#full_creative .column p {
font-size: 1.5rem;
}
#full_creative .column, #full_creative .columns {
display: block;
}
#full_creative img {
margin-bottom: 15rem;
}
#our_team {
margin-top: 70vw;
padding-bottom: 20rem;
}
#our_team img {
max-width: 100%;
margin: 0 auto;
}
#our_team .columns, #our_team .colmumn {
display: block;
position: static;
}
#our_team .name {
font-size: 1.5rem;
}
#our_team .sub-category {
margin-bottom: 10rem;
}
#china_achievements {
margin-top: 895vw;
}
#china_achievements p {
font-size: 2rem;
}
#china_achievements .column, #china_achievements .columns {
position: static;
display: block;
}
#china_achievements .offset-left-columns {
margin-left: 0;
}
#china_achievements .text-description {
font-size: 2rem;
}
#china_achievements .big-number {
font-size: 10rem;
text-align: center;
}
#china_achievements .picture {
margin-left: 0;
width: 100%;
}
#china_achievements .title {
width: 100%;
}
#baozun_group, #coming_soon, .credits {
margin: 0 0;
position: relative;
top: 700vw;
}
}
@media all and (min-width: 1601px) {
section#carry {
min-height: 120rem;
}
section#carry .description {
margin-top: 3vh;
font-size: 8rem;
}
section#carry .gradient-bg {
top: -40rem;
}
section#carry .gradient-bg-yellow {
top: 10rem;
}
section#carry .computer-block {
width: 100%;
height: 1080px;
left: 0;
top: -154vw;
background-size: contain;
margin: 0 auto;
}
section#carry .bubbles {
position: relative;
left: -5vw;
}
section#carry .bubbles p :nth-of-type(1) {
top: -75vh;
}
section#carry .bubbles p :nth-of-type(2) {
left: 70%;
}
section#carry .bubbles p :nth-of-type(3) {
left: 20%;
top: -200vw;
}
section#carry .bubbles p :nth-of-type(4) {
left: 10%;
top: -319vw;
}
#carry .computer-block{
top: -82vw;
}
#china_achievements{
padding-top:0;
}
}

File diff suppressed because it is too large Load Diff

View File

@ -10,20 +10,21 @@ let enable_animations = false
enable_animations = true enable_animations = true
const rotateYCard = '200deg' const rotateYCard = '200deg'
const offsetCard = '-=100' const offsetCard = '10'
function animateCard (id, side) { function animateCard (id, side) {
console.log('animateCard', id, side, offsetCard)
const fromObject = { const fromObject = {
rotateY: rotateYCard, rotateY: rotateYCard,
side: offsetCard // side: offsetCard
} }
let toObject = { let toObject = {
rotateY: 0, rotateY: 0,
duration: 0.2, duration: 0.2,
ease: 'easeInOut', ease: 'easeInOut',
side: 0, // side: 1,
scrollTrigger: { scrollTrigger: {
trigger: '#content-' + id + ' .flip-handle', trigger: '#content-' + id + ' .flip-handle',
start: 'top 80%', start: 'top 80%',
@ -31,7 +32,8 @@ function animateCard (id, side) {
markers: development_debug, markers: development_debug,
} }
} }
// toObject[side] = offsetCard; fromObject[side] = 0;
toObject[side] = offsetCard;
gsap.fromTo('#content-' + id, fromObject, gsap.fromTo('#content-' + id, fromObject,
toObject) toObject)
@ -79,32 +81,24 @@ if (enable_animations) {
trigger: '#unlock_white', trigger: '#unlock_white',
delay: 1, delay: 1,
scrub:2, scrub:2,
start: '+=50% 80%' start: '50% 80%'
} }
}) })
gsap.to('#main_title', { gsap.fromTo('#main_title',
{
top: 400,
opacity: 1,
},
{
delay: 1, delay: 1,
// xPercent: ()=>nav.offsetHeight,
scrollTrigger: { scrollTrigger: {
trigger: '#main_title', trigger: '#main_title',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
}, },
keyframes: [ top: 200,
{
top: '-=50',
width: '100vw',
},
{
top: '-=50',
width: "-=5vw",
},
{
top: '-=100',
width: '-=40vw',
}]
}) })
gsap.fromTo('#hand', gsap.fromTo('#hand',
@ -179,20 +173,6 @@ if (enable_animations) {
} }
}) })
gsap.to('#phone-watches-4',
{
left: '50vw',
top: -10,
scale: 0.5,
duration: 3,
ease: 'sine',
scrollTrigger: {
trigger: '#welcome',
scrub: 2,
markers: development_debug,
}
})
gsap.fromTo('#content_first', gsap.fromTo('#content_first',
{ {
scale: 0.5, scale: 0.5,
@ -234,7 +214,7 @@ if (enable_animations) {
gsap.fromTo('#content_all_img', gsap.fromTo('#content_all_img',
{ {
scale: 1, scale: 1,
left: "-=100" left: -100
}, },
{ {
scale: 1.1, scale: 1.1,
@ -252,7 +232,7 @@ if (enable_animations) {
{ {
opacity: 0.5, opacity: 0.5,
scale: 1, scale: 1,
bottom: '-=100vh', bottom: '-100vh',
height: '10rem', height: '10rem',
}, },
{ {