diff --git a/source/catalog.html b/source/catalog.html index 87a3dc6..4d82e3d 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -34,7 +34,7 @@ Управление меню - + diff --git a/source/styles/blocks/benefits.scss b/source/styles/blocks/benefits.scss index dced3a1..3acc129 100644 --- a/source/styles/blocks/benefits.scss +++ b/source/styles/blocks/benefits.scss @@ -66,9 +66,6 @@ @media (min-width: $desktop-width) { grid-template-columns: repeat(4, 1fr); gap: 37px 79px; - // display: flex; - // flex-flow: row wrap; - //gap: 37px 79px; } } diff --git a/source/styles/blocks/button.scss b/source/styles/blocks/button.scss index dc42f28..84ba89c 100644 --- a/source/styles/blocks/button.scss +++ b/source/styles/blocks/button.scss @@ -3,7 +3,7 @@ align-items: center; justify-content: center; font-family: $secondary-font; - font-size: 20px; + font-size: 16px; line-height: 20px; font-weight: 400; text-transform: uppercase; @@ -28,6 +28,11 @@ background-color: $bg-basic-green-2; color: rgba(255, 255, 255, 0.3); } + + @media (min-width: $tablet-width) { + font-size: 20px; + line-height: 26px; + } } .button--more { diff --git a/source/styles/blocks/card.scss b/source/styles/blocks/card.scss index fded6b6..dba885e 100644 --- a/source/styles/blocks/card.scss +++ b/source/styles/blocks/card.scss @@ -44,6 +44,15 @@ $card-top-offset: 81px; place-self: start center; align-content: center; + &:focus, + &:hover { + opacity: 0.8; + } + + &:active { + opacity: 0.3; + } + @media (min-width: $tablet-width) { height: 210px; } @@ -88,6 +97,15 @@ $card-top-offset: 81px; text-decoration: none; text-transform: uppercase; + &:focus, + &:hover { + opacity: 0.6; + } + + &:active { + opacity: 0.3; + } + @media (min-width: $tablet-width) { font-size: 20px; line-height: 24px; diff --git a/source/styles/blocks/designed-by.scss b/source/styles/blocks/designed-by.scss index 671b58c..371b55c 100644 --- a/source/styles/blocks/designed-by.scss +++ b/source/styles/blocks/designed-by.scss @@ -33,13 +33,24 @@ align-items: center; width: 168px; } +} - &:focus, - &:hover { - color: $text-color-basic-green; - } +.designed-by__link:focus .designed-by__text, +.designed-by__link:hover .designed-by__text { + color: $text-color-special-grey-6; +} - &:active { - opacity: 0.3; - } +.designed-by__link:active .designed-by__text { + color: $text-color-special-grey-6; + opacity: 0.3; +} + +.designed-by__link:focus .designed-by__image, +.designed-by__link:hover .designed-by__image { + color: $text-color-basic-green; +} + +.designed-by__link:active .designed-by__image { + color: $text-color-basic-green; + opacity: 0.3; } diff --git a/source/styles/blocks/hero.scss b/source/styles/blocks/hero.scss index 66da324..2625b0d 100644 --- a/source/styles/blocks/hero.scss +++ b/source/styles/blocks/hero.scss @@ -134,20 +134,20 @@ } .hero__link { - min-width: 280px; + width: 100%; min-height: 40px; @media (min-width: $tablet-width) { position: absolute; top: 266px; left: 120px; - min-width: 242px; + width: 242px; min-height: 54px; } @media (min-width: $desktop-width) { position: static; - min-width: 244px; + width: 244px; margin: 52px 0 0 80px; } } diff --git a/source/styles/blocks/navigation-list.scss b/source/styles/blocks/navigation-list.scss index 77d2c23..91c0454 100644 --- a/source/styles/blocks/navigation-list.scss +++ b/source/styles/blocks/navigation-list.scss @@ -1,7 +1,7 @@ .navigation-list { width: 100%; display: flex; - flex-direction: column; + flex-flow: column wrap; align-items: center; background-color: $bg-basic-white; @@ -24,7 +24,7 @@ word-break: break-all; width: 100%; text-align: center; - padding: 23px 0 19px; + padding: 23px 20px 19px; margin: 0; @media (min-width: $tablet-width) { @@ -35,6 +35,12 @@ } } +.navigation--nojs .navigation-list__item:last-of-type { + @media (min-width: $tablet-width) { + padding-bottom: 0; + } +} + .navigation-list__item--current { position: relative; @@ -49,7 +55,9 @@ background-color: $text-color-basic-green; } } +} +.header--main .navigation-list__item--current { @media (min-width: $desktop-width) { &::after { background-color: $text-color-basic-white; @@ -57,14 +65,6 @@ } } -.navigation--inner .navigation-list__item--current { - @media (min-width: $tablet-width) { - &::after { - background-color: $text-color-basic-green; - } - } -} - .navigation-list__link { font-family: $secondary-font; font-size: 20px; @@ -91,14 +91,14 @@ } @media (min-width: $desktop-width) { - color: $text-color-basic-white; + color: $text-color-special-black-1; font-size: 20px; line-height: 20px; } } -.navigation--inner .navigation-list__link { +.header--main .navigation-list__link { @media (min-width: $desktop-width) { - color: $text-color-special-black-1; + color: $text-color-basic-white; } } diff --git a/source/styles/blocks/navigation.scss b/source/styles/blocks/navigation.scss index 8abea83..955f055 100644 --- a/source/styles/blocks/navigation.scss +++ b/source/styles/blocks/navigation.scss @@ -1,6 +1,10 @@ .navigation { position: relative; width: 100%; + + @media (min-width: $desktop-width) { + max-width: 50%; + } } .navigation__wrapper { @@ -8,17 +12,25 @@ display: block; z-index: 1; width: 100%; - background-color: $bg-basic-white; + background-color: $text-color-special-black-1; border-top: 1px solid $bg-special-grey-3; margin: 10px 0 0; @media (min-width: $tablet-width) { + position: relative; background-color: transparent; border-top: unset; } @media (min-width: $desktop-width) { margin: 17px 0 0; + padding-left: 130px; + } +} + +.header--main .navigation__wrapper { + @media (min-width: $desktop-width) { + position: absolute; } } diff --git a/source/styles/blocks/subscription.scss b/source/styles/blocks/subscription.scss index 169bddf..225f920 100644 --- a/source/styles/blocks/subscription.scss +++ b/source/styles/blocks/subscription.scss @@ -166,6 +166,8 @@ } .subscription__button { + font-size: 20px; + line-height: 26px; width: 100%; min-height: 56px;