From 43699806dd74ef6219f123f297dd94d34a34e766 Mon Sep 17 00:00:00 2001 From: Sadeni-09 Date: Sun, 1 Oct 2023 13:08:03 +0200 Subject: [PATCH 1/3] catalog hovers --- readme.md | 2 +- src/styles/blocks/catalog.scss | 8 ++++++++ src/styles/blocks/header.scss | 7 +++++++ src/styles/blocks/variables.scss | 1 + src/styles/main.scss | 1 + 5 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 src/styles/blocks/variables.scss diff --git a/readme.md b/readme.md index d2eb319ba..542ed1261 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Frontend practice with catalog page and hovers Replace `` with your Github username and copy the links to Pull Request description: -- [DEMO LINK](https://.github.io/layout_catalog_hovers/) +- [DEMO LINK](https://Sadeni-09.github.io/layout_catalog_hovers/) > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github) diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss index ffb6b2ccc..4d9e50330 100644 --- a/src/styles/blocks/catalog.scss +++ b/src/styles/blocks/catalog.scss @@ -1,3 +1,5 @@ +@import "blocks/variables"; + .catalog { display: flex; flex-wrap: wrap; @@ -18,6 +20,12 @@ border-radius: 5px; margin-bottom: 48px; + &:hover { + transform: scale(1.2); + color: #34568b; + transition: transform ease $transition-duration; + } + &:not(:nth-child(4n)) { margin-right: 48px; } diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 638a10fef..76af7e4f1 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -1,3 +1,5 @@ +@import "blocks/variables"; + .header { display: flex; align-items: center; @@ -38,5 +40,10 @@ text-transform: uppercase; font-size: 12px; font-weight: 500; + + &:hover { + color: #00acdc; + transition: ease $transition-duration; + } } } diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss new file mode 100644 index 000000000..a8babcb51 --- /dev/null +++ b/src/styles/blocks/variables.scss @@ -0,0 +1 @@ +$transition-duration: 300ms; diff --git a/src/styles/main.scss b/src/styles/main.scss index 465a8cb4a..be5d63207 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,4 @@ @import "blocks/page"; @import "blocks/header"; @import "blocks/catalog"; +@import "blocks/variables"; From b618634f821a36e516d5d66c0c708e0dde146de5 Mon Sep 17 00:00:00 2001 From: Sadeni-09 Date: Wed, 4 Oct 2023 11:34:38 +0200 Subject: [PATCH 2/3] catalog hovers 2 --- src/styles/blocks/catalog.scss | 1 - src/styles/blocks/header.scss | 1 - src/styles/main.scss | 4 ++++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss index 4d9e50330..44b5f58bd 100644 --- a/src/styles/blocks/catalog.scss +++ b/src/styles/blocks/catalog.scss @@ -23,7 +23,6 @@ &:hover { transform: scale(1.2); color: #34568b; - transition: transform ease $transition-duration; } &:not(:nth-child(4n)) { diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 76af7e4f1..826f9d9dc 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -43,7 +43,6 @@ &:hover { color: #00acdc; - transition: ease $transition-duration; } } } diff --git a/src/styles/main.scss b/src/styles/main.scss index be5d63207..783ef4269 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,3 +2,7 @@ @import "blocks/header"; @import "blocks/catalog"; @import "blocks/variables"; + +* { + transition: transform ease $transition-duration; +} From a62b3b156f6c98718273177f06748a1ff4d70a62 Mon Sep 17 00:00:00 2001 From: Sadeni-09 Date: Wed, 4 Oct 2023 13:53:20 +0200 Subject: [PATCH 3/3] catalog hovers 3 --- src/styles/blocks/catalog.scss | 2 ++ src/styles/blocks/header.scss | 2 ++ src/styles/main.scss | 4 ---- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss index 44b5f58bd..3f3afb969 100644 --- a/src/styles/blocks/catalog.scss +++ b/src/styles/blocks/catalog.scss @@ -20,6 +20,8 @@ border-radius: 5px; margin-bottom: 48px; + transition: transform ease $transition-duration; + &:hover { transform: scale(1.2); color: #34568b; diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 826f9d9dc..5590ffa95 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -11,6 +11,8 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + transition: transform ease $transition-duration; + &__logo { height: 40px; } diff --git a/src/styles/main.scss b/src/styles/main.scss index 783ef4269..be5d63207 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,7 +2,3 @@ @import "blocks/header"; @import "blocks/catalog"; @import "blocks/variables"; - -* { - transition: transform ease $transition-duration; -}