diff --git a/src/modules/Header/styles/header/__logo/header__logo.scss b/src/modules/Header/styles/header/__logo/header__logo.scss index 95989d2b..62b5ba8e 100644 --- a/src/modules/Header/styles/header/__logo/header__logo.scss +++ b/src/modules/Header/styles/header/__logo/header__logo.scss @@ -1,10 +1,10 @@ .header__logo { - width: 24px; - height: 24px; + width: 132px; + height: 40px; cursor: pointer; @media (min-width: 768px) { - width: 40px; - height: 40px; + width: 145px; + height: 55px; } } diff --git a/src/modules/Header/styles/header/header.scss b/src/modules/Header/styles/header/header.scss index bd3bcd10..abfd208b 100644 --- a/src/modules/Header/styles/header/header.scss +++ b/src/modules/Header/styles/header/header.scss @@ -1,7 +1,7 @@ .header { display: flex; width: 100%; - height: 48px; + min-height: 56px; padding: 12px 16px; justify-content: space-between; align-items: center; @@ -11,11 +11,11 @@ @media (min-width: 768px) { padding: 28px 44px; - height: 97px; + min-height: 97px; } @media (min-width: 1440px) { padding: 18px 132px; - height: 88px; + min-height: 88px; } } diff --git a/src/modules/Header/svg/Paw.css b/src/modules/Header/svg/Paw.css index 134c8d5c..ebae7c11 100644 --- a/src/modules/Header/svg/Paw.css +++ b/src/modules/Header/svg/Paw.css @@ -1,9 +1,10 @@ -.paw path { +.paw { transition-duration: .5s; fill: var(--color-accent-base); } -.paw:hover path { +.paw:hover path:nth-child(1), +.paw:hover path:nth-child(3) { fill: var(--color-accent-hover); } diff --git a/src/modules/Header/svg/Paw.jsx b/src/modules/Header/svg/Paw.jsx index aea869d4..698d0b24 100644 --- a/src/modules/Header/svg/Paw.jsx +++ b/src/modules/Header/svg/Paw.jsx @@ -3,20 +3,64 @@ import './Paw.css'; const Paw = ({ className }) => { return ( - - + + + + ); };