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

Fixed banners style

Browse Source
This commit is contained in:
kvakazyambra 2024-05-21 00:26:55 +03:00
parent 0631ecf8c9
commit 2e6e1abad7
1 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Feed/Placeholder/Placeholder.module.scss
View File

@ -1,13 +1,13 @@
.placeholder { .placeholder {
border-radius: 2.2rem; border-radius: 2.2rem;
display: flex; display: flex;
@include font-size(1.4rem); font-size: 1.4rem;
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
h3 { h3 {
@include font-size(2.4rem); font-size: 2.4rem;
} }
button, button,
@ -68,28 +68,34 @@
.placeholder--profile-mode { .placeholder--profile-mode {
min-height: 40rem; min-height: 40rem;
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
display: block; display: block;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
min-height: 28rem; max-height: 30rem;
min-height: auto;
} }
.placeholderCover { .placeholderCover {
padding: 1.6rem; padding: 1.6rem;
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
flex: 0 45rem; //flex: 0 50%;
min-width: 50%; //min-width: 50%;
order: 2; order: 2;
position: static; position: static;
width: 45rem;
} }
img { img {
height: auto; height: 100%;
object-fit: contain;
width: 100%; width: 100%;
//width: auto;
@include media-breakpoint-up(lg) {
object-position: right;
}
} }
} }
@ -97,9 +103,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@include font-size(2rem); font-size: 1.4rem;
line-height: 1.2; line-height: 1.2;
padding: 3rem; min-width: 60%;
padding: 0 2rem 2rem;
@include media-breakpoint-up(md) {
font-size: 1.6rem;
padding: 3rem;
}
@include media-breakpoint-up(lg) {
font-size: 2rem;
}
} }
h3 { h3 {
@ -108,13 +124,14 @@
.button { .button {
background: var(--background-color-invert); background: var(--background-color-invert);
color: var(--default-color-invert);
bottom: 2rem; bottom: 2rem;
color: var(--default-color-invert);
font-size: 1.6rem;
left: 2rem; left: 2rem;
right: 2rem; right: 2rem;
width: 100%; width: 100%;
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
left: auto; left: auto;
position: absolute; position: absolute;
width: auto; width: auto;