diff --git a/src/assets/styles/abstracts/variables/indents.scss b/src/assets/styles/abstracts/variables/indents.scss index 4bb8d8a..b9ee39b 100644 --- a/src/assets/styles/abstracts/variables/indents.scss +++ b/src/assets/styles/abstracts/variables/indents.scss @@ -7,8 +7,11 @@ $indent-section-top-side-desktop-large: 80px; $indent-section-top-side-desktop-medium: 64px; $indent-section-top-side-desktop-small: 56px; $indent-section-top-side-tablet: 40px; +$indent-section-top-side-tablet-medium: 32px; $indent-main-top-screen-small: 115px; +$indent-search-top-tablet: 172px; +$indent-search-top-mobile: 142px; $indent-main-top-screen-small-with-breadcrumbs: 78px; // BLOCKS diff --git a/src/assets/styles/abstracts/variables/media-queries.scss b/src/assets/styles/abstracts/variables/media-queries.scss index ec29e6b..62a24de 100644 --- a/src/assets/styles/abstracts/variables/media-queries.scss +++ b/src/assets/styles/abstracts/variables/media-queries.scss @@ -6,3 +6,6 @@ $media-tablet-small: 768px; $media-tablet-small-extra: 600px; $media-mobile-large: 428px; $media-mobile-small: 375px; + +$media-tablet-small-extra: 600px; +$media-mobile-large: 428px; diff --git a/src/components/buttons/button-top-navigation/button-top-navigation.module.scss b/src/components/buttons/button-top-navigation/button-top-navigation.module.scss index 5d1e47f..2e06e61 100644 --- a/src/components/buttons/button-top-navigation/button-top-navigation.module.scss +++ b/src/components/buttons/button-top-navigation/button-top-navigation.module.scss @@ -1,3 +1,6 @@ +@import 'assets/styles/abstracts/variables/colors'; +@import 'assets/styles/abstracts/variables/media-queries'; + .button { width: 80px; height: 80px; @@ -18,4 +21,8 @@ stroke: inherit; } } + + @media screen and (max-width: $media-tablet-large) { + background-color: rgba($color: $color-brand-primary-100, $alpha: 0.7); + } } diff --git a/src/components/cards/card-search/card-search.module.scss b/src/components/cards/card-search/card-search.module.scss index e9a7303..627f697 100644 --- a/src/components/cards/card-search/card-search.module.scss +++ b/src/components/cards/card-search/card-search.module.scss @@ -3,6 +3,8 @@ @import 'assets/styles/abstracts/variables/animations'; @import 'assets/styles/abstracts/placeholders'; @import 'assets/styles/abstracts/variables/wrappers'; +@import 'assets/styles/abstracts/variables/media-queries'; +@import 'assets/styles/abstracts/functions'; .article { max-width: $wrapper-search-desktop; @@ -24,14 +26,29 @@ display: flex; column-gap: 24px; height: 148px; + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + flex-direction: column; + height: auto; + row-gap: 16px; + } } .image { max-width: 200px; - width: 100%; - height: 100%; + min-width: 200px; object-fit: cover; border-radius: 12px; + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + max-width: inherit; + height: calc-fluid-element( + 148px, + 273px, + $media-mobile-small, + $media-tablet-small-extra + ); + } } .heading { @@ -41,6 +58,24 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + + @media screen and (max-width: calc($media-desktop-small - 1px)) { + font-size: calc-fluid-element( + calc($font-size-text-medium * 10), + calc($font-size-heading-3 * 10), + $media-tablet-small, + $media-desktop-small + ); + } + + @media screen and (max-width: $media-tablet-large) { + line-height: $font-line-height-text-medium; + } + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + font-size: $font-size-text-medium-small; + line-height: $font-line-height-text-medium-small; + } } .text { @@ -51,4 +86,10 @@ -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + font-size: $font-size-text-medium-small; + line-height: $font-line-height-text-medium-small; + margin-top: 12px; + } } diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss index c627710..4dda37a 100644 --- a/src/components/header/header.module.scss +++ b/src/components/header/header.module.scss @@ -101,6 +101,14 @@ $indent-mobile: calc-fluid-element( padding-right: $indent-mobile; padding-left: $indent-mobile; } + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + padding-bottom: 20px; + + > form { + margin-top: 20px; + } + } } &__wrapper { diff --git a/src/components/header/search/styles.module.scss b/src/components/header/search/styles.module.scss index 927235d..58c71e1 100644 --- a/src/components/header/search/styles.module.scss +++ b/src/components/header/search/styles.module.scss @@ -25,6 +25,10 @@ height: 64px; } + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + height: 48px; + } + &__input { @extend %text-size-medium; width: 100%; diff --git a/src/pages/search-page/search-page.module.scss b/src/pages/search-page/search-page.module.scss index 6143ac8..4bff6e3 100644 --- a/src/pages/search-page/search-page.module.scss +++ b/src/pages/search-page/search-page.module.scss @@ -36,6 +36,26 @@ justify-self: flex-end; } } + + @media screen and (max-width: calc($media-desktop-small - 1px)) { + margin: 0 $indent-section-sides-desktop; + } + + @media screen and (max-width: $media-tablet-large) { + margin: $indent-search-top-tablet $indent-section-sides-tablet 0; + padding: $indent-section-top-side-tablet 0; + + > button { + position: fixed; + bottom: 36px; + } + } + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + margin: $indent-search-top-mobile $indent-section-sides-mobile 0; + padding-top: 30px; + padding-bottom: $indent-section-top-side-tablet-medium; + } } .wrapper { @@ -54,6 +74,25 @@ color: $color-brand-primary-1000; font-weight: 700; } + + @media screen and (max-width: calc($media-desktop-small - 1px)) { + font-size: calc-fluid-element( + calc($font-size-text-medium * 10), + calc($font-size-text-large * 10), + $media-tablet-small, + $media-desktop-small + ); + } + + @media screen and (max-width: $media-tablet-large) { + letter-spacing: $font-letter-spacing-main; + line-height: $font-line-height-text-medium; + } + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + font-size: $font-size-text-medium-small; + line-height: $font-line-height-text-medium-small; + } } .gallery { @@ -65,19 +104,48 @@ display: grid; row-gap: 40px; padding: 48px 0 40px 0; + + @media screen and (max-width: $media-tablet-large) { + padding-top: $indent-section-top-side-tablet-medium; + } + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + padding: 24px 0 30px; + row-gap: 24px; + } } .button { align-self: center; + + @media screen and (max-width: $media-tablet-large) { + width: 335px; + } + + @media screen and (max-width: calc($media-mobile-small)) { + width: 100%; + } } .description { @extend %text-size-medium; + color: $color-neutral-600; + padding: 156px 0 104px; @media screen and (max-width: calc($media-desktop-medium - 1px)) { padding: 64px 0 80px; } + + @media screen and (max-width: $media-tablet-large) { + padding: 32px 0 0; + } + + @media screen and (max-width: calc($media-tablet-small-extra - 1px)) { + padding: 24px 0 0; + font-size: $font-size-text-medium-small; + line-height: $font-line-height-text-medium-small; + } } .topButton {