diff --git a/src/index.html b/src/index.html index 18b1715c2..e64ae6e98 100644 --- a/src/index.html +++ b/src/index.html @@ -28,7 +28,7 @@
- +

UA

@@ -50,7 +50,7 @@

світову культуру 19-20 ст.

- + Купити квитки @@ -76,7 +76,7 @@

- +

UA

@@ -91,7 +91,7 @@

12:00 - 19:00

-
  • +

  • Адреса:

    • @@ -545,7 +565,7 @@

    - - + + diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss index 9ee5dcbc3..edd84bb83 100644 --- a/src/styles/blocks/article.scss +++ b/src/styles/blocks/article.scss @@ -1,6 +1,7 @@ .article { &__img { width: 100%; + @include hover(transform, translate(-5%, -5%)); } &__date { diff --git a/src/styles/blocks/buttons.scss b/src/styles/blocks/buttons.scss index 5ddc79980..6536d3eb7 100644 --- a/src/styles/blocks/buttons.scss +++ b/src/styles/blocks/buttons.scss @@ -12,12 +12,27 @@ &--format-first { color: $button-text-color-format-first; background-color: $button-background-color-format-first; + + @include hover(background-color, + $button-hover-background-color-format-first); + + &:active { + background-color: $button-active-background-color-format-first; + } } &--format-second { color: $button-text-color-format-second; background-color: $button-background-color-format-second; border: 1px solid $button-border-color-format-second; + + @include hover(color, $button-hover-background-color-format-second); + @include hover(border-color, $button-hover-background-color-format-second); + + &:active { + color: $button-active-background-color-format-second; + border-color: $button-active-background-color-format-second; + } } &__arrow { diff --git a/src/styles/blocks/contact-us-footer.scss b/src/styles/blocks/contact-us-footer.scss index 3c0d02ef0..8cf48ac11 100644 --- a/src/styles/blocks/contact-us-footer.scss +++ b/src/styles/blocks/contact-us-footer.scss @@ -8,7 +8,14 @@ } &__item { + position: relative; + z-index: 1; + line-height: 150%; + + width: max-content; + + @include hoverUnderline(-1px); } &__link { @@ -25,4 +32,8 @@ margin-bottom: 0; } } + + &__social-item { + line-height: 150%; + } } diff --git a/src/styles/blocks/contact-us-menu.scss b/src/styles/blocks/contact-us-menu.scss index 6f8a2ebef..c6a9c0245 100644 --- a/src/styles/blocks/contact-us-menu.scss +++ b/src/styles/blocks/contact-us-menu.scss @@ -22,6 +22,15 @@ grid-column: span 3; } } + + &--underline { + position: relative; + z-index: 1; + + width: max-content; + + @include hoverUnderline(-1px); + } } &__label { diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss index 499dcade6..1d9fa074f 100644 --- a/src/styles/blocks/icons.scss +++ b/src/styles/blocks/icons.scss @@ -2,6 +2,8 @@ width: 123px; height: 40px; + @include hover(transform, scale(1.2)); + background-image: url(../images/icons/icon-logo.png); background-position: center; background-repeat: no-repeat; @@ -11,6 +13,8 @@ width: 25px; height: 20px; + @include hover(transform, scale(1.2)); + background-image: url(../images/icons/icon-menu.png); } @@ -18,6 +22,8 @@ width: 22px; height: 22px; + @include hover(transform, scale(1.2)); + background-image: url(../images/icons/icon-close-menu.svg); } @@ -30,6 +36,8 @@ font-weight: 500; line-height: 150%; + @include hover(transform, scale(1.2)); + &__arrow { width: 10px; height: 7px; @@ -47,6 +55,8 @@ background-position: center; background-repeat: no-repeat; + @include hover(transform, scale(1.2)); + &__facebook { background-image: url(../images/icons/icon-facebook.png); } @@ -68,5 +78,7 @@ width: 30px; height: 30px; + @include hover(transform, scale(1.2)); + background-image: url(../images/icons/icon-scroll-up.png); } diff --git a/src/styles/blocks/nav-footer.scss b/src/styles/blocks/nav-footer.scss index 6551737a5..8cd403931 100644 --- a/src/styles/blocks/nav-footer.scss +++ b/src/styles/blocks/nav-footer.scss @@ -8,6 +8,13 @@ } &__item { + position: relative; + z-index: 1; + line-height: 150%; + + width: max-content; + + @include hoverUnderline(-1px); } } diff --git a/src/styles/blocks/nav-menu.scss b/src/styles/blocks/nav-menu.scss index a564f70ff..935591cab 100644 --- a/src/styles/blocks/nav-menu.scss +++ b/src/styles/blocks/nav-menu.scss @@ -17,6 +17,9 @@ } &__item { + position: relative; + z-index: 1; + font-family: "Playfair Display", serif; font-size: 20px; font-weight: 700; @@ -24,6 +27,10 @@ grid-column: 1 / -1; + width: max-content; + + @include hoverUnderline(-6px); + @include onTable() { font-size: 48px; line-height: 120%; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index db220948e..790c08651 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -5,6 +5,31 @@ } } +@mixin hoverUnderline($bottom) { + &::after { + position: absolute; + z-index: 12; + bottom: $bottom; + left: 0; + right: 0; + + content: ""; + + height: 2px; + + border-radius: 4px; + background-color: #f1f5f4; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } +} + @mixin contentPaddingInline() { padding-inline: 20px; diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index 93ff2ffaa..c9811aedf 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -23,9 +23,14 @@ $footer-text-color: #f1f5f4; //button $button-text-color-format-first: #f1f5f4; $button-background-color-format-first: $page-main-color; +$button-hover-background-color-format-first: #af3419; +$button-active-background-color-format-first: #ea340d; + $button-text-color-format-second: $page-main-color; $button-background-color-format-second: #f1f5f4; $button-border-color-format-second: $page-main-color; +$button-hover-background-color-format-second: #af3419; +$button-active-background-color-format-second: #ea340d; // Adapt the page $desktop-min-width: 1280px;