From 98db1bae3b9019241ce093abc975f4612e70cfda Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 25 Nov 2022 07:31:21 -0300 Subject: [PATCH] style: tornando slick responsivo --- src/scripts/components/form.js | 3 +- src/styles/partials/container.scss | 73 +-- src/styles/partials/form.scss | 2 +- src/styles/partials/slider.scss | 709 ++++------------------------- src/styles/utils/variables.scss | 48 +- src/templates/index.html | 8 +- 6 files changed, 111 insertions(+), 732 deletions(-) diff --git a/src/scripts/components/form.js b/src/scripts/components/form.js index 6b316cf..1cdb55f 100644 --- a/src/scripts/components/form.js +++ b/src/scripts/components/form.js @@ -96,7 +96,7 @@ export class Form { this.list.forEach(function (item) { itemsSlider += ` -
  • +
  • ${item.title}

    ${item.title}

    @@ -115,7 +115,6 @@ export class Form { infinite: true, slidesToShow: 4, slidesToScroll: 4, - variableWidth: true, arrows: true, dots: true, }); diff --git a/src/styles/partials/container.scss b/src/styles/partials/container.scss index ed44ecc..29c0169 100644 --- a/src/styles/partials/container.scss +++ b/src/styles/partials/container.scss @@ -1,79 +1,30 @@ +main{ + margin: 0 130px; +} + .container { - width: 81.946%; + width: 100%; display: flex; justify-content: center; flex-direction: column; - margin: 40px auto; + margin: 40px 0; } @media (min-width: $breakpoint-desk) { - .container { - width: 89.533%; + main{ + margin: 0 130px; } } @media (max-width: $breakpoint-tablet) { - .container { - width: 96.924%; + main{ + margin: 0 16px; } } @media (max-width: $breakpoint-mobile) { - .container { - width: 91.441%; + main{ + margin: 0 16px; } } -@media(max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2473){ - .container { - width: 90.533%; - } -} - -@media(max-width: $breakpoint-desk-2473) and (min-width: $breakpoint-desk-2425){ - .container { - width: 92.300%; - } -} - -@media(max-width: $breakpoint-desk-2425) and (min-width: $breakpoint-desk-2393){ - .container { - width: 90%; - } -} - -@media(max-width: $breakpoint-desk-2393) and (min-width: $breakpoint-desk-2351){ - .container { - width: 91.5%; - } -} - -@media(max-width: $breakpoint-desk-2351) and (min-width: $breakpoint-desk-2055){ - .container { - width: 90%; - } -} - -@media(max-width: $breakpoint-desk-2335) and (min-width: $breakpoint-desk-2277){ - .container { - width: 92%; - } -} - -@media(max-width: $breakpoint-desk-2277) and (min-width: $breakpoint-desk-2055){ - .container { - width: 91%; - } -} - -@media(max-width: $breakpoint-desk-2055) and (min-width: $breakpoint-desk-1947){ - .container { - width: 91.5%; - } -} - -@media(max-width: $breakpoint-desk-1947) and (min-width: $breakpoint-desk-1445){ - .container { - width: 89.533%; - } -} diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index 0ff1a46..96e6591 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -323,4 +323,4 @@ input, } } } -} \ No newline at end of file +} diff --git a/src/styles/partials/slider.scss b/src/styles/partials/slider.scss index 5075724..2885fe8 100644 --- a/src/styles/partials/slider.scss +++ b/src/styles/partials/slider.scss @@ -5,34 +5,33 @@ h2 { } .slider-container { + width: 100%; margin-top: 60px; margin-bottom: 125px; - .slider { + & ul { width: 100%; - margin: 0 auto; - & ul { - margin-top: 38px; - display: flex; - flex-direction: row; - justify-content: center; - & .slider-content { - box-shadow: 0px 4px 16px $slider-content-shadow-color; - border-radius: 8px; - width: 279.01px; - height: auto; - min-height: 424px; - list-style: none; - &:not(:first-child) { - margin-left: 21px; - } + margin-top: 38px; + display: table; + table-layout: fixed; + border-collapse: collapse; + & .slider-content { + background: $background-color; + box-shadow: 0px 4px 16px $slider-content-shadow-color; + border-radius: 8px; + height: 424px; + list-style: none; + display: inline-block; + min-width: 279px; + & figure { + width: 100%; & img { width: 100%; object-fit: cover; - height: 212.01px; + object-position: top; + height: 212px; border-radius: 8px; } & h3 { - width: auto; font-weight: 700; font-size: 24px; line-height: 28px; @@ -66,6 +65,18 @@ h2 { } } +.slick-slide { + margin: 0 10.5px; +} + +.slick-list { + margin: 0 -10.5px; +} + +.slick-track{ + display: flex !important; + justify-content: center; +} .slick-prev { background: url("svgs/right arrow.svg") no-repeat center center !important; @@ -87,7 +98,8 @@ h2 { height: 29.47px; } -.slick-prev:before, .slick-next:before { +.slick-prev:before, +.slick-next:before { font-size: 0; opacity: unset; } @@ -136,13 +148,16 @@ h2 { } .slider-container { + width: 100%; margin-top: 60px; - .slider { - & ul { - margin-top: 41px; - & .slider-content { - width: 544px; - min-height: 768px; + margin-bottom: 125px; + & ul { + width: 100%; + margin-top: 41px; + & .slider-content { + width: 544px; + height: 768px; + & figure { & img { width: 544px; height: 400px; @@ -168,17 +183,16 @@ h2 { left: -70px; width: 26px; height: 58px; - background-size: 26px 58px !important; + background-size: 26px 58px; } .slick-next { right: -70px; width: 26px; height: 58px; - background-size: 26px 58px !important; + background-size: 26px 58px; } - .slick-dots li button:before { font-size: 20.01px; width: 20.01px; @@ -196,28 +210,28 @@ h2 { margin-top: 40.22px; margin-bottom: 0; position: relative; - .slider { - width: 100%; - margin: 0 auto; - & ul { - margin-top: 38px; + + & ul { + margin-top: 38px; + display: flex; + flex-direction: column; + justify-content: center; + & .slider-content { + width: 100%; + height: 710px; + padding: 0; + min-height: 710px; display: flex; flex-direction: column; - justify-content: center; - & .slider-content { - width: 100%; - padding: 0; - height: auto; - min-height: 710px; - display: flex; - flex-direction: column; - justify-content: space-between; - &:not(:first-child) { - margin-left: 0; - margin-top: 24px; - } + justify-content: space-between; + &:not(:first-child) { + margin-left: 0; + margin-top: 24px; + } + & figure { & img { width: 100%; + height: 570px; object-position: top; height: 570px; border-radius: 8px; @@ -244,19 +258,21 @@ h2 { .slick-list { width: 100%; } - } @media (max-width: $breakpoint-mobile) { .slider-container { margin-top: 40.7px; margin-bottom: 77px; - .slider { - & ul { - margin-top: 32px; - & .slider-content { - min-height: 400px; + & ul { + margin-top: 32px; + & .slider-content { + width: 100%; + height: 400px; + min-height: 400px; + & figure { & img { + width: 100%; height: 212px; object-fit: cover; } @@ -275,580 +291,33 @@ h2 { } } -@media(max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2425){ +@media (max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2425) { .slider-container { h2 { font-size: 64px; } - .slider { - & ul { - & .slider-content { + + & ul { + & .slider-content { + width: 544px; + min-height: 768px; + & img { width: 544px; - min-height: 768px; - & img { - width: 544px; - height: 400px; - } - & h3 { - font-weight: 700; - font-size: 48px; - line-height: 56px; - height: 120px; - } - & figcaption { - font-weight: 400; - font-size: 32px; - line-height: 48px; - max-height: 192px; - } + height: 400px; + } + & h3 { + font-weight: 700; + font-size: 48px; + line-height: 56px; + height: 120px; + } + & figcaption { + font-weight: 400; + font-size: 32px; + line-height: 48px; + max-height: 192px; } } } } } - -@media(max-width: $breakpoint-desk-2425) and (min-width: $breakpoint-desk-2351){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 523px; - min-height: 738.35px; - & img { - width: 523px; - height: 384.56px; - } - & h3 { - font-weight: 700; - font-size: 48px; - line-height: 56px; - height: 120px; - } - & figcaption { - font-weight: 400; - font-size: 32px; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-2351) and (min-width: $breakpoint-desk-2335){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 510px; - min-height: 720px; - & img { - width: 510px; - height: 375px; - } - & h3 { - font-weight: 700; - font-size: 2.5em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 2em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-2335) and (min-width: $breakpoint-desk-2277){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 510px; - min-height: 720px; - & img { - width: 510px; - height: 375px; - } - & h3 { - font-weight: 700; - font-size: 2.5em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 2em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-2277) and (min-width: $breakpoint-desk-2203){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 490px; - min-height: 691.76px; - & img { - width: 490px; - height: 360.29px; - } - & h3 { - font-weight: 700; - font-size: 2.5em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.5em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-2203) and (min-width: $breakpoint-desk-2055){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 470px; - min-height: 663.53px; - & img { - width: 470px; - height: 345.59px; - } - & h3 { - font-weight: 700; - font-size: 2.5em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.5em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - - -@media(max-width: $breakpoint-desk-2129) and (min-width: $breakpoint-desk-2055){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 455px; - min-height: 642.35px; - & img { - width: 455px; - height: 334.56px; - } - & h3 { - font-weight: 700; - font-size: 2em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.5em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-2055) and (min-width: $breakpoint-desk-1981){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 440px; - min-height: 621.18px; - & img { - width: 440px; - height: 323.53px; - } - & h3 { - font-weight: 700; - font-size: 2em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.5em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1981) and (min-width: $breakpoint-desk-1907){ - .slider-container { - h2 { - font-size: 64px; - } - .slider { - & ul { - & .slider-content { - width: 420px; - min-height: 592.94px; - & img { - width: 420px; - height: 308.82px; - } - & h3 { - font-weight: 700; - font-size: 2em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.5em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1907) and (min-width: $breakpoint-desk-1833){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 410px; - min-height: 578.82px; - & img { - width: 410px; - height: 301.47px; - } - & h3 { - font-weight: 700; - font-size: 2em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.5em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1833) and (min-width: $breakpoint-desk-1759){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 385px; - min-height: 543.53px; - & img { - width: 385px; - height: 283.09px; - } - & h3 { - font-weight: 700; - font-size: 2em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.3em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1759) and (min-width: $breakpoint-desk-1730){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 380px; - min-height: 543.53px; - & img { - width: 380px; - height: 283.09px; - } - & h3 { - font-weight: 700; - font-size: 1.8em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.3em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1730) and (min-width: $breakpoint-desk-1685){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 366px; - min-height: 516.71px; - & img { - width: 366px; - height: 269.12px; - } - & h3 { - font-weight: 700; - font-size: 1.8em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.3em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1685) and (min-width: $breakpoint-desk-1611){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 346px; - min-height: 488.47px; - & img { - width: 346px; - height: 254.41px; - } - & h3 { - font-weight: 700; - font-size: 1.8em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.3em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1611) and (min-width: $breakpoint-desk-1537){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 325px; - min-height: 458.82px; - & img { - width: 325px; - height: 238.97px; - } - & h3 { - font-weight: 700; - font-size: 1.8em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.3em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1537) and (min-width: $breakpoint-desk-1445){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 310px; - min-height: 437.65px; - & img { - width: 310px; - height: 227.94px; - } - & h3 { - font-weight: 700; - font-size: 1.8em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1.3em; - line-height: 48px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1430) and (min-width: $breakpoint-desk-1165){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 266px; - min-height: 375.53px; - & img { - width: 266px; - height: 195.59px; - } - & h3 { - font-weight: 700; - font-size: 1.5em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1em; - line-height: 24px; - max-height: 192px; - } - } - } - } - } -} - -@media(max-width: $breakpoint-desk-1165) and (min-width: $breakpoint-desk-1025){ - .slider-container { - h2 { - font-size: 32px; - } - .slider { - & ul { - & .slider-content { - width: 220px; - min-height: 309.18px; - & img { - width: 220px; - height: 161.03px; - } - & h3 { - font-weight: 700; - font-size: 1.5em; - line-height: 56px; - height: 60px; - } - & figcaption { - font-weight: 400; - font-size: 1em; - line-height: 24px; - max-height: 192px; - } - } - } - } - } -} - diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index 76c1de0..6565e5a 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -16,52 +16,14 @@ $slider-content-shadow-color: #00000014; // Breakpoints -$breakpoint-desk: 2501px; +$breakpoint-desk: 2500px; -$breakpoint-desk-2473: 2473px; +$breakpoint-tablet: 1025px; -$breakpoint-desk-2425: 2425px; +$breakpoint-mobile: 491px; -$breakpoint-desk-2393: 2393px; - -$breakpoint-desk-2351: 2351px; - -$breakpoint-desk-2335: 2335px; - -$breakpoint-desk-2277: 2277px; - -$breakpoint-desk-2203: 2203px; - -$breakpoint-desk-2129: 2129px; - -$breakpoint-desk-2055: 2055px; - -$breakpoint-desk-1981: 1981px; - -$breakpoint-desk-1947: 1947px; +$breakpoint-desk-1455: 1455px; $breakpoint-desk-1907: 1907px; -$breakpoint-desk-1833: 1833px; - -$breakpoint-desk-1759: 1759px; - -$breakpoint-desk-1730: 1730px; - -$breakpoint-desk-1685: 1685px; - -$breakpoint-desk-1611: 1611px; - -$breakpoint-desk-1537: 1537px; - -$breakpoint-desk-1445: 1445px; - -$breakpoint-desk-1430: 1430px; - -$breakpoint-desk-1165: 1165px; - -$breakpoint-desk-1025: 1025px; - -$breakpoint-tablet: 1024px; - -$breakpoint-mobile: 490px; +$breakpoint-desk-2425: 2425px; diff --git a/src/templates/index.html b/src/templates/index.html index 4eced43..4bf5b95 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -29,7 +29,7 @@
    - +
    @@ -38,10 +38,8 @@

    Pontos Turísticos

    -
    -
      -
    -
    +
      +