From f055004918ef314d7741ed50919e1cd6b6456ee1 Mon Sep 17 00:00:00 2001 From: Boris Zashliapin Date: Tue, 25 Oct 2022 12:05:54 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B8?= =?UTF-8?q?=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20?= =?UTF-8?q?=D0=B2=20header,=20gallery=20&=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cooperation/__link/cooperation__link.css | 7 ++++ .../__link-authors/footer__link-authors.css | 19 +++++++++ .../footer/__link-logo/footer__link-logo.css | 10 +++++ blocks/footer/__link/footer__link.css | 8 +++- .../_accent/footer__text_accent_underline.css | 8 ---- .../__container/gallery-photo__container.css | 4 ++ .../__item/gallery-photo__item.css | 6 +++ .../__dagger-rect/header__dagger-rect.css | 3 ++ blocks/header/__dagger/header__dagger.css | 3 -- blocks/header/__link/header__link.css | 22 ++++++---- blocks/header/__pay-link/header__pay-link.css | 11 +++++ index.html | 42 +++++++++---------- pages/index.css | 13 +++--- 13 files changed, 107 insertions(+), 49 deletions(-) create mode 100644 blocks/footer/__link-authors/footer__link-authors.css create mode 100644 blocks/footer/__link-logo/footer__link-logo.css delete mode 100644 blocks/footer/__text/_accent/footer__text_accent_underline.css create mode 100644 blocks/gallery-photo/__container/gallery-photo__container.css create mode 100644 blocks/header/__dagger-rect/header__dagger-rect.css diff --git a/blocks/cooperation/__link/cooperation__link.css b/blocks/cooperation/__link/cooperation__link.css index fd46c62..bcbb43a 100644 --- a/blocks/cooperation/__link/cooperation__link.css +++ b/blocks/cooperation/__link/cooperation__link.css @@ -5,4 +5,11 @@ -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; + transition: all .4s ease; +} + +.cooperation__link:hover { + background: #242424; + color: #fff; + text-decoration-color: #242424; } diff --git a/blocks/footer/__link-authors/footer__link-authors.css b/blocks/footer/__link-authors/footer__link-authors.css new file mode 100644 index 0000000..2d08eae --- /dev/null +++ b/blocks/footer/__link-authors/footer__link-authors.css @@ -0,0 +1,19 @@ +.footer__link-authors { + color: inherit; + text-decoration: none; + transition: all .4s ease; +} + +.footer__link-authors:hover { + background: #242424; + color: #fff; + text-decoration: #242424; +} + +@media screen and (max-width: 767px) { + .footer__link-authors { + text-decoration: underline; + text-decoration-skip-ink: none; + } +} + diff --git a/blocks/footer/__link-logo/footer__link-logo.css b/blocks/footer/__link-logo/footer__link-logo.css new file mode 100644 index 0000000..09056a5 --- /dev/null +++ b/blocks/footer/__link-logo/footer__link-logo.css @@ -0,0 +1,10 @@ +.footer__link-logo { + display: inline-block; + text-decoration: none; + color: inherit; + transition: transform .5s ease; +} + +.footer__link-logo:hover { + transform: scale(1.04); +} diff --git a/blocks/footer/__link/footer__link.css b/blocks/footer/__link/footer__link.css index 4776ba7..1313422 100644 --- a/blocks/footer/__link/footer__link.css +++ b/blocks/footer/__link/footer__link.css @@ -1,4 +1,10 @@ .footer__link { - text-decoration: none; + text-decoration: underline rgba(36, 36, 36, 0); + text-decoration-skip-ink: none; color: inherit; + transition: text-decoration-color .4s ease; +} + +.footer__link:hover { + text-decoration-color: rgba(36, 36, 36, 1); } diff --git a/blocks/footer/__text/_accent/footer__text_accent_underline.css b/blocks/footer/__text/_accent/footer__text_accent_underline.css deleted file mode 100644 index b5ae450..0000000 --- a/blocks/footer/__text/_accent/footer__text_accent_underline.css +++ /dev/null @@ -1,8 +0,0 @@ -@media screen and (max-width: 767px) { - .footer__text_accent_underline { - text-decoration: underline; - text-decoration-skip-ink: none; - } -} - - diff --git a/blocks/gallery-photo/__container/gallery-photo__container.css b/blocks/gallery-photo/__container/gallery-photo__container.css new file mode 100644 index 0000000..cecf77e --- /dev/null +++ b/blocks/gallery-photo/__container/gallery-photo__container.css @@ -0,0 +1,4 @@ +.gallery-photo__container { + display: inline-block; + overflow: hidden; +} diff --git a/blocks/gallery-photo/__item/gallery-photo__item.css b/blocks/gallery-photo/__item/gallery-photo__item.css index a8aa20c..c3177d7 100644 --- a/blocks/gallery-photo/__item/gallery-photo__item.css +++ b/blocks/gallery-photo/__item/gallery-photo__item.css @@ -1,6 +1,12 @@ .gallery-photo__item { + display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; + transition: transform .45s ease; +} + +.gallery-photo__item:hover { + transform: scale(1.08); } diff --git a/blocks/header/__dagger-rect/header__dagger-rect.css b/blocks/header/__dagger-rect/header__dagger-rect.css new file mode 100644 index 0000000..0432cab --- /dev/null +++ b/blocks/header/__dagger-rect/header__dagger-rect.css @@ -0,0 +1,3 @@ +.header__dagger-rect { + fill: #242424; +} diff --git a/blocks/header/__dagger/header__dagger.css b/blocks/header/__dagger/header__dagger.css index 55ee5d4..ca10ad5 100644 --- a/blocks/header/__dagger/header__dagger.css +++ b/blocks/header/__dagger/header__dagger.css @@ -1,9 +1,6 @@ .header__dagger { width: 1.74vw; height: 1.74vw; - background-image: url(../../../images/icon-adding-button.svg); - background-position: center; - background-size: cover; } @media screen and (min-width: 1440px) { diff --git a/blocks/header/__link/header__link.css b/blocks/header/__link/header__link.css index 0ef8c2e..daca30d 100644 --- a/blocks/header/__link/header__link.css +++ b/blocks/header/__link/header__link.css @@ -11,36 +11,42 @@ position: relative; } -.header__link:hover::before { +.header__link::before { content: ''; width: 11px; height: 100%; - display: block; position: absolute; top: 0; right: 0; - border: 1px solid #242424; + border: 1px solid rgba(36, 36, 36, 0); border-left: none; border-radius: 50px; border-bottom-left-radius: 0; border-top-left-radius: 0; - background-color: transparent; + transition: border-color .45s ease; } -.header__link:hover::after { +.header__link::after { content: ''; width: 11px; height: 100%; - display: block; position: absolute; top: 0; left: 0; - border: 1px solid #242424; + border: 1px solid rgba(36, 36, 36, 0); border-right: none; border-radius: 50px; border-bottom-right-radius: 0; border-top-right-radius: 0; - background-color: transparent; + transition: border-color .45s ease; +} + +.header__link:hover::before { + border-color: rgba(36, 36, 36, 1); +} + +.header__link:hover::after { + border-color: rgba(36, 36, 36, 1); } @media screen and (min-width: 1440px) { diff --git a/blocks/header/__pay-link/header__pay-link.css b/blocks/header/__pay-link/header__pay-link.css index 679aec7..cebf550 100644 --- a/blocks/header/__pay-link/header__pay-link.css +++ b/blocks/header/__pay-link/header__pay-link.css @@ -11,6 +11,17 @@ margin: 0 0.7vw 0.9vw 0.56vw; display: flex; text-transform: uppercase; + transition: all .4s ease; +} + +.header__pay-link:hover { + background: #242424; + color: #fff; +} + +.header__pay-link:hover .header__dagger-rect { + fill: #fff; + transition: all .4s ease; } @media screen and (min-width: 1440px) { diff --git a/index.html b/index.html index ad1cfe2..cea4ca1 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
- + @@ -42,7 +42,7 @@
  • tlgrm
  • vk
    • -
    Поддержать     + Поддержать Проекты @@ -148,14 +148,14 @@

    Заголовок блока с тремя видео

    Заголовок блока с фотографиями

      -
    • 2 актера
      • -
    • монолог актрисы
      • -
    • фотография актера
      • -
    • хор
      • -
    • зрительный зал со зрителями
      • -
    • фотография актера
      • -
    • чб фотография хора
      • -
    • фотография актера
      • +
    • 2 актера
      • +
    • монолог актрисы
      • +
    • фотография актера
      • +
    • хор
      • +
    • зрительный зал со зрителями
      • +
    • фотография актера
      • +
    • чб фотография хора
      • +
    • фотография актера
    @@ -376,7 +376,7 @@

    Заголовок блока с пьес

    Солнечная линия

    СМОТРЕТЬ ЧИТКУ

    - +     @@ -395,7 +395,7 @@

    Солнечная линия

    МАМА

    СМОТРЕТЬ ЧИТКУ

    - +     @@ -412,7 +412,7 @@

    МАМА

    Конкретные разговоры пожилых супругов ни о чём

    СМОТРЕТЬ ЧИТКУ

    - +     @@ -429,7 +429,7 @@

    Конкретные разговоры пожилых с

    Опус ДНК

    СМОТРЕТЬ ЧИТКУ

    - +     @@ -446,7 +446,7 @@

    Опус ДНК

    МАМА

    СМОТРЕТЬ ЧИТКУ

    - +     @@ -523,22 +523,22 @@

    Онлайн-трансляции