discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

fixmerge

Browse Source
This commit is contained in:
tonyrewin 2022-10-21 14:40:33 +03:00
parent 8ff95266af
commit db4e92b61e
1 changed files with 33 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/Author/Card.module.scss
View File

@ -12,30 +12,33 @@
} }
} }
.author__details { .authorDetails {
display: flex; display: flex;
flex: 1; flex: 1;
padding-right: 1.2rem; padding-right: 1.2rem;
width: max-content; width: max-content;
} }
.author__details-wrapper { .authorDetailsWrapper {
flex: 1; flex: 1;
} }
.author__name { .authorName {
border: none !important; border: none !important;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }
.author__about { .authorAbout {
font-size: 1.5rem; font-size: 1.5rem;
color: rgb(0 0 0 / 60%); color: rgb(0 0 0 / 60%);
} }
.author__subscribe { .authorSubscribe {
align-items: center;
display: flex;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
padding: 0 0 0 42px; padding: 0 0 0 42px;
} }
@ -47,6 +50,7 @@
height: 32px; height: 32px;
margin-right: 0.4rem; margin-right: 0.4rem;
position: relative; position: relative;
transition: background-color 0.2s;
vertical-align: middle; vertical-align: middle;
width: 32px; width: 32px;
@ -62,8 +66,17 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: filter 0.2s;
width: 18px; width: 18px;
} }
&:hover {
background: #000;
&::before {
filter: invert(0);
}
}
} }
a[href*='facebook.com/'] { a[href*='facebook.com/'] {
@ -95,9 +108,19 @@
background-image: url(/icons/tumblr-white.svg); 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; align-items: center;
aspect-ratio: 1/1; aspect-ratio: 1/1;
background: #f6f6f6; background: #f6f6f6;
@ -110,14 +133,16 @@
} }
} }
.button__label { .buttonLabel {
display: none; display: none;
} }
.button--write { .buttonWrite {
background: #f7f7f7; background: #f7f7f7;
color: #000; color: #000;
display: inline-flex; display: inline-flex;
transition: background-color 0.3s, color 0.3s;
@include font-size(1.5rem); @include font-size(1.5rem);
&:hover { &:hover {
@ -196,62 +221,3 @@
vertical-align: middle; 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;
}
}