From 619d9d7ff8a2148b0691f7b7897b64e1aabb82bb Mon Sep 17 00:00:00 2001 From: Maxim Stogniy Date: Thu, 7 May 2020 02:54:20 +1200 Subject: [PATCH] Works section restyling, adaptive complete --- src/components/works.pug | 2 +- src/styles/blocks/custom-link.pcss | 4 + src/styles/blocks/slider-btns.pcss | 7 ++ src/styles/blocks/tag.pcss | 5 ++ src/styles/blocks/works-slider.pcss | 129 ++++++++++++++++++++++++++-- src/styles/blocks/works.pcss | 27 ++++++ 6 files changed, 167 insertions(+), 7 deletions(-) diff --git a/src/components/works.pug b/src/components/works.pug index 132f779..8aae122 100644 --- a/src/components/works.pug +++ b/src/components/works.pug @@ -1,5 +1,5 @@ section.works(id="works") - .container + .container.works__container h2.section__title.works__title Мои работы .works__content .works-slider diff --git a/src/styles/blocks/custom-link.pcss b/src/styles/blocks/custom-link.pcss index 1c86fa1..7ceedb4 100644 --- a/src/styles/blocks/custom-link.pcss +++ b/src/styles/blocks/custom-link.pcss @@ -3,6 +3,10 @@ display: flex; align-items: center; + @include tablets { + font-size: 14px; + } + &:hover { text-decoration: underline; } diff --git a/src/styles/blocks/slider-btns.pcss b/src/styles/blocks/slider-btns.pcss index 0f1cd43..e64f297 100644 --- a/src/styles/blocks/slider-btns.pcss +++ b/src/styles/blocks/slider-btns.pcss @@ -7,6 +7,13 @@ background: transparent; border: 1px solid #353e4e; + &:hover { + border-color: #5500f2; + .slider-btn__icon { + fill: #5500f2; + } + } + &--prev { .slider-btn__icon { transform: rotate(-180deg); diff --git a/src/styles/blocks/tag.pcss b/src/styles/blocks/tag.pcss index 2068d28..6f49d0a 100644 --- a/src/styles/blocks/tag.pcss +++ b/src/styles/blocks/tag.pcss @@ -4,4 +4,9 @@ border-radius: 23px; font-size: 15px; font-weight: 600; + + @include phones { + font-size: 13px; + padding: 12px 18px; + } } \ No newline at end of file diff --git a/src/styles/blocks/works-slider.pcss b/src/styles/blocks/works-slider.pcss index 2f5b1f9..4704753 100644 --- a/src/styles/blocks/works-slider.pcss +++ b/src/styles/blocks/works-slider.pcss @@ -1,16 +1,32 @@ .works-slider { display: flex; justify-content: space-between; - padding-bottom: 50px; + + @include tablets { + flex-direction: column; + } } .works-slider__images { width: 66%; - height: 550px; position: relative; + max-width: 978px; + + @include desktop { + max-width: 625px; + } + + @include tablets { + width: 100%; + margin-bottom: 100px; + } + + @include bPhones { + margin-bottom: 60px; + } &:before { - content: '4'; + content: '2'; position: absolute; color: #e6e6e6; top: 40%; @@ -19,29 +35,70 @@ left: 93%; font-size: 400px; font-weight: 800; + + @include desktop { + font-size: 300px; + top: -12%; + transform: none; + } + + @include bPhones { + display: none; + } } } .works-slider__images-wrap { width: 100%; - height: 100%; + position: relative; } .works-slider__image { - height: 100%; + height: auto; width: 100%; object-fit: cover; + max-width: 978px; + + @include desktop { + max-width: 625px; + } } .works-slider__data { width: 23%; - position: relative; + z-index: 10; + + @include desktop { + width: 32%; + } + + @include tablets { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + font-size: 14px; + } + + @include phones { + align-items: flex-start; + width: 85%; + margin: 0 auto; + } } .works-slider__tags { display: flex; flex-wrap: wrap; margin-bottom: 40px; + + @include tablets { + margin-bottom: 30px; + } + + @include phones { + align-self: center; + } } .works-slider__tags-item { @@ -51,12 +108,29 @@ &:last-child{ margin-right: 0; } + + @include tablets { + margin-bottom: 0; + } + + @include phones { + margin-right: 10px; + } } .works-slider__title { font-size: 30px; font-weight: 700; margin-bottom: 35px; + + @include tablets { + margin-bottom: 30px; + } + + @include phones { + font-size: 24px; + margin-bottom: 20px; + } } .works-slider__desc { @@ -64,6 +138,21 @@ font-weight: 600; margin-bottom: 35px; line-height: 30px; + + @include tablets { + text-align: center; + margin-bottom: 30px; + padding: 0 120px; + } + + @include bPhones { + padding: 0 90px; + } + + @include phones { + text-align: left; + padding: 0; + } } .works-slider__previews { @@ -71,12 +160,25 @@ position: absolute; right: 0; bottom: 0; + + @include desktop { + height: 294px; + overflow: hidden; + } + + @include bPhones { + display: none; + } } .works-slider__preview-item { height: 100px; position: relative; + @include desktop { + height: 98px; + } + &:after { content: ""; position: absolute; @@ -91,6 +193,11 @@ &.active { &:after { outline: 3px solid #dc9322; + + @include desktop { + outline: none; + border: 3px solid #dc9322; + } } } @@ -99,6 +206,11 @@ &::after { outline: 3px solid #dc9322; background-color: rgba(85, 0, 242, 0.3); + + @include desktop { + outline: none; + border: 3px solid #dc9322; + } } } } @@ -121,6 +233,11 @@ position: absolute; top: 100%; right: 0; + + @include bPhones { + top: initial; + bottom: 0; + } } .works-slider__link { diff --git a/src/styles/blocks/works.pcss b/src/styles/blocks/works.pcss index 5f25dd3..7fe58ca 100644 --- a/src/styles/blocks/works.pcss +++ b/src/styles/blocks/works.pcss @@ -1,3 +1,30 @@ +.works { + padding-bottom: 50px; + + @include tablets { + padding-bottom: 0; + } +} + .works__title { margin-bottom: 90px; + + @include desktop { + margin-bottom: 60px; + } + + @include tablets { + margin-bottom: 50px; + } + + @include phones { + text-align: center; + margin-bottom: 30px; + } +} + +.works__container { + @include bPhones { + width: 100%; + } } \ No newline at end of file