libremdb/src/styles/modules/components/title/basic.module.scss
zyachel 18ca98fd4a refactor: make components more modular
would help in implementing name route

also did some stylistic changes
2023-04-15 20:58:09 +05:30

81 lines
1.2 KiB
SCSS

@use '../../../abstracts' as helper;
.title {
line-height: 1;
}
.meta {
list-style: none;
display: flex;
flex-wrap: wrap;
& * + *::before {
content: '\00b7';
padding-inline: var(--spacer-0);
font-weight: 900;
line-height: 0;
font-size: var(--fs-5);
}
@include helper.bp('bp-900') {
justify-content: center;
}
}
.ratings {
display: flex;
flex-wrap: wrap;
gap: var(--spacer-0) var(--spacer-3);
@include helper.bp('bp-900') {
justify-content: center;
}
}
.rating {
font-size: var(--fs-5);
display: grid;
grid-template-columns: repeat(2, max-content);
place-items: center;
gap: 0 var(--spacer-0);
&__num {
grid-column: 1 / 2;
font-size: 1.8em;
font-weight: var(--fw-medium);
// line-height: 1;
}
&__icon {
--dim: 1.8em;
grid-column: -2 / -1;
line-height: 1;
height: var(--dim);
width: var(--dim);
display: grid;
place-content: center;
fill: var(--clr-fill);
}
&__text {
grid-column: 1 / -1;
font-size: 0.9em;
line-height: 1;
color: var(--clr-text-muted);
}
}
.link {
@include helper.prettify-link(var(--clr-link));
}
.genres,
.overview,
.crewType {
&__heading {
font-weight: var(--fw-bold);
}
}