From db4e92b61e3b6f2a2b89364e3b89e051072cb8bd Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Fri, 21 Oct 2022 14:40:33 +0300 Subject: [PATCH] fixmerge --- src/components/Author/Card.module.scss | 100 ++++++++----------------- 1 file changed, 33 insertions(+), 67 deletions(-) diff --git a/src/components/Author/Card.module.scss b/src/components/Author/Card.module.scss index 4e8395da..b0b4bb2c 100644 --- a/src/components/Author/Card.module.scss +++ b/src/components/Author/Card.module.scss @@ -12,30 +12,33 @@ } } -.author__details { +.authorDetails { display: flex; flex: 1; padding-right: 1.2rem; width: max-content; } -.author__details-wrapper { +.authorDetailsWrapper { flex: 1; } -.author__name { +.authorName { border: none !important; font-size: 1.7rem; font-weight: 500; margin-bottom: 0.8rem; } -.author__about { +.authorAbout { font-size: 1.5rem; color: rgb(0 0 0 / 60%); } -.author__subscribe { +.authorSubscribe { + align-items: center; + display: flex; + @include media-breakpoint-down(lg) { padding: 0 0 0 42px; } @@ -47,6 +50,7 @@ height: 32px; margin-right: 0.4rem; position: relative; + transition: background-color 0.2s; vertical-align: middle; width: 32px; @@ -62,8 +66,17 @@ position: absolute; top: 50%; transform: translate(-50%, -50%); + transition: filter 0.2s; width: 18px; } + + &:hover { + background: #000; + + &::before { + filter: invert(0); + } + } } a[href*='facebook.com/'] { @@ -95,9 +108,19 @@ background-image: url(/icons/tumblr-white.svg); } } + + a[href*='instagram.com/'] { + &::before { + background-image: url(/icons/instagram-white.svg); + } + } + + button { + margin-right: 0.5em; + } } -.button--subscribe { +.buttonSubscribe { align-items: center; aspect-ratio: 1/1; background: #f6f6f6; @@ -110,14 +133,16 @@ } } -.button__label { +.buttonLabel { display: none; } -.button--write { +.buttonWrite { background: #f7f7f7; color: #000; display: inline-flex; + transition: background-color 0.3s, color 0.3s; + @include font-size(1.5rem); &:hover { @@ -196,62 +221,3 @@ vertical-align: middle; } } - -.authorPage { - .authorName { - @include font-size(3.4rem); - - font-weight: 500; - margin-bottom: 0.2em; - } - - .authorAbout { - color: #696969; - @include font-size(1.7rem); - } - - .authorSubscribe { - display: flex; - margin-top: 2rem; - } - - .authorDetails { - display: block; - } - - .buttonLabel { - display: block; - } - - .buttonSubscribe { - aspect-ratio: auto; - background-color: #000; - border-radius: 2px; - float: none; - padding-bottom: 0.6rem; - padding-top: 0.6rem; - - .icon { - margin-right: 0.5em; - - img { - filter: invert(1); - } - } - - &:hover { - .icon img { - filter: invert(0.7); - } - } - } - - .buttonSubscribe img { - vertical-align: text-top; - } - - .button { - margin-right: 1.6rem; - vertical-align: middle; - } -}