From 0aa3f58478ffdc48e0511819bbf98a3272874ad1 Mon Sep 17 00:00:00 2001 From: Sofia Peshekhonova Date: Thu, 19 Jan 2023 14:14:11 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=B8=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blocks/bicycles/__title/bicycles__title.css | 3 +- blocks/bicycles/bicycles.css | 5 +- blocks/footer/__icon/footer__icon.css | 2 +- blocks/header/__burger/header__burger.css | 2 +- blocks/header/__menu/header__menu.css | 11 +++- .../header__switcher-color-theme.css | 9 +++ blocks/intro/__pictures/intro__pictures.css | 2 +- blocks/intro/__road/intro__road.css | 2 +- blocks/intro/__title/intro__title.css | 2 +- blocks/intro/intro.css | 2 +- .../__slider-arrow/roads__slider-arrow.css | 2 +- blocks/roads/__title/roads__title.css | 3 +- blocks/roads/roads.css | 3 - blocks/section-title/section-title.css | 2 +- .../switcher-color-theme.css | 6 +- blocks/workout/workout.css | 10 ++-- index.html | 56 +++++++++++-------- pages/index.css | 1 + scripts/pages/index.js | 43 ++++++-------- scripts/utils/constants.js | 4 +- 20 files changed, 94 insertions(+), 76 deletions(-) create mode 100644 blocks/header/__switcher-color-theme/header__switcher-color-theme.css diff --git a/blocks/bicycles/__title/bicycles__title.css b/blocks/bicycles/__title/bicycles__title.css index 0e6c09a..970b902 100644 --- a/blocks/bicycles/__title/bicycles__title.css +++ b/blocks/bicycles/__title/bicycles__title.css @@ -5,6 +5,7 @@ @media screen and (max-width: 770px) { .bicycles__title { - margin-top: 39px; + padding-top: 39px; + border-top: 1px solid #e3e3e3; } } diff --git a/blocks/bicycles/bicycles.css b/blocks/bicycles/bicycles.css index 0c3cc54..ca9b91a 100644 --- a/blocks/bicycles/bicycles.css +++ b/blocks/bicycles/bicycles.css @@ -14,12 +14,11 @@ @media screen and (max-width: 770px) { .bicycles { - margin-top: 80px; + margin-top: 0; margin-left: calc(18/320 * 100%); margin-bottom: 40px; margin-right: calc(18/320 * 100%); - padding-top: 0; - border-top: 1px solid #e3e3e3; + padding-top: 37px; grid-template-columns: 1fr; grid-template-areas: 'title' diff --git a/blocks/footer/__icon/footer__icon.css b/blocks/footer/__icon/footer__icon.css index 4a4f1fc..aac3b60 100644 --- a/blocks/footer/__icon/footer__icon.css +++ b/blocks/footer/__icon/footer__icon.css @@ -8,7 +8,7 @@ stroke: var(--basic-second-tint-color_theme_light); } -@media screen and (max-width: 770px) { +@media screen and (max-width: 561px) { .footer__icon { display: block; } diff --git a/blocks/header/__burger/header__burger.css b/blocks/header/__burger/header__burger.css index 6e0b221..94e22c0 100644 --- a/blocks/header/__burger/header__burger.css +++ b/blocks/header/__burger/header__burger.css @@ -14,7 +14,7 @@ margin-right: 10px; position: absolute; top: 10px; - right: 13px; + right: calc(18 / 320 * 100%); } } diff --git a/blocks/header/__menu/header__menu.css b/blocks/header/__menu/header__menu.css index 687aca3..7ebf8c2 100644 --- a/blocks/header/__menu/header__menu.css +++ b/blocks/header/__menu/header__menu.css @@ -3,13 +3,22 @@ text-decoration: none; display: flex; justify-content: end; - padding: 28px 120px 28px 0; + padding-top: 28px; + padding-bottom: 28px; + padding-right: calc(120 / 1440 * 100%); +} + +@media screen and (max-width: 770px) { + .header__menu { + padding-right: calc(18 / 320 * 100%); + } } @media screen and (max-width: 560px) { .header__menu { display: none; } + .header__menu_active { display: flex; align-items: center; diff --git a/blocks/header/__switcher-color-theme/header__switcher-color-theme.css b/blocks/header/__switcher-color-theme/header__switcher-color-theme.css new file mode 100644 index 0000000..0f40fe6 --- /dev/null +++ b/blocks/header/__switcher-color-theme/header__switcher-color-theme.css @@ -0,0 +1,9 @@ +.header__switcher-color-theme { + display: flex; +} + +@media screen and (min-width: 561px) { + .header__switcher-color-theme { + display: none; + } +} diff --git a/blocks/intro/__pictures/intro__pictures.css b/blocks/intro/__pictures/intro__pictures.css index 30da291..f4bad90 100644 --- a/blocks/intro/__pictures/intro__pictures.css +++ b/blocks/intro/__pictures/intro__pictures.css @@ -20,7 +20,7 @@ } } - @media screen and (max-width: 320px) { + @media screen and (max-width: 385px) { .intro__pictures { max-width: 334px; height: 348px; diff --git a/blocks/intro/__road/intro__road.css b/blocks/intro/__road/intro__road.css index c8d609c..6a70a6a 100644 --- a/blocks/intro/__road/intro__road.css +++ b/blocks/intro/__road/intro__road.css @@ -17,7 +17,7 @@ max-width: 391px; } } -@media screen and (max-width: 320px) { +@media screen and (max-width: 385px) { .intro__road { max-width: 254px; max-height: 348px; diff --git a/blocks/intro/__title/intro__title.css b/blocks/intro/__title/intro__title.css index 922f0b1..8822621 100644 --- a/blocks/intro/__title/intro__title.css +++ b/blocks/intro/__title/intro__title.css @@ -15,7 +15,7 @@ } } -@media screen and (max-width: 320px) { +@media screen and (max-width: 385px) { .intro__title { max-width: 284px; } diff --git a/blocks/intro/intro.css b/blocks/intro/intro.css index cf92c5a..83f4b7f 100644 --- a/blocks/intro/intro.css +++ b/blocks/intro/intro.css @@ -26,7 +26,7 @@ margin-left: calc(18/320 * 100%); margin-right: calc(18/320 * 100%); grid-template-columns: 1fr; - justify-items: center; + justify-items: end; } } diff --git a/blocks/roads/__slider-arrow/roads__slider-arrow.css b/blocks/roads/__slider-arrow/roads__slider-arrow.css index 85428b4..69201ec 100644 --- a/blocks/roads/__slider-arrow/roads__slider-arrow.css +++ b/blocks/roads/__slider-arrow/roads__slider-arrow.css @@ -35,7 +35,7 @@ width: calc(24px + (26 + 26 * .7) * (100vw - 320px) / 770); height: calc(24px + (26 + 26 * .7) * (100vw - 320px) / 770); background-size: 6px 11px; - top: calc(58px + (12 + 12 * .7) * (100vw - 320px) / 770); + top: calc(140px + (12 + 12 * .7) * (100vw - 320px) / 770); } .roads__slider-arrow:nth-child(1) { diff --git a/blocks/roads/__title/roads__title.css b/blocks/roads/__title/roads__title.css index e452c9d..5acae9f 100644 --- a/blocks/roads/__title/roads__title.css +++ b/blocks/roads/__title/roads__title.css @@ -5,6 +5,7 @@ @media screen and (max-width: 770px) { .roads__title { - margin-top: 39px; + border-top: 1px solid #e3e3e3; + padding-top: 47px; } } diff --git a/blocks/roads/roads.css b/blocks/roads/roads.css index b83b247..ad59e27 100644 --- a/blocks/roads/roads.css +++ b/blocks/roads/roads.css @@ -14,11 +14,8 @@ @media screen and (max-width: 770px) { .roads { - padding-top: 0; - margin-top: 80px; margin-left: calc(18/320 * 100%); margin-right: calc(18/320 * 100%); - border-top: 1px solid #e3e3e3; grid-template-areas: 'title' 'slider' diff --git a/blocks/section-title/section-title.css b/blocks/section-title/section-title.css index f593b84..c346ba8 100644 --- a/blocks/section-title/section-title.css +++ b/blocks/section-title/section-title.css @@ -12,7 +12,7 @@ .section-title { font-size: calc(32px + (23 + 23 * .7) * (100vw - 320px) / 770); line-height: calc(40 / 32 * 100%); - max-width: 284px; + max-width: 100%; margin-top: 39px; } } diff --git a/blocks/switcher-color-theme/switcher-color-theme.css b/blocks/switcher-color-theme/switcher-color-theme.css index 2eca40c..4eee129 100644 --- a/blocks/switcher-color-theme/switcher-color-theme.css +++ b/blocks/switcher-color-theme/switcher-color-theme.css @@ -4,10 +4,8 @@ gap: 22px; } -/* @media screen and (max-width: 770px) { +@media screen and (max-width: 561px) { .switcher-color-theme { display: none; } -} */ - - +} diff --git a/blocks/workout/workout.css b/blocks/workout/workout.css index b4eadcc..323df4c 100644 --- a/blocks/workout/workout.css +++ b/blocks/workout/workout.css @@ -31,16 +31,16 @@ 'paragraph' 'apps'; padding-bottom: 53px; - margin-left: calc(18/320 * 100%); - margin-right: calc(18/320 * 100%); + margin-right: calc(120/1440 * 100%); } } -/* @media screen and (max-width: 770px) { +@media screen and (max-width: 720px) { .workout { - border-top: 1px solid #e3e3e3; + margin-left: calc(18/320 * 100%); + margin-right: calc(18/320 * 100%); } -} */ +} @media screen and (max-width: 320px) { .workout { diff --git a/index.html b/index.html index c411015..b31160c 100644 --- a/index.html +++ b/index.html @@ -21,14 +21,28 @@ -
+ + + + + - - - +