852 lines
16 KiB
SCSS
852 lines
16 KiB
SCSS
// importing as scss vars
|
|
@use 'abstracts' as *;
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// PLACEHOLDERS
|
|
////////////////////////////////////////////////////////////////
|
|
%list-items:not(:last-of-type)::after {
|
|
margin-right: 0.6rem;
|
|
display: inline-block;
|
|
content: ',';
|
|
}
|
|
|
|
%bullet-items:not(:last-of-type)::after {
|
|
display: inline-block;
|
|
content: '\00b7';
|
|
margin: 0 5px;
|
|
font-weight: 900;
|
|
font-family: var(--ff-alt-alpha);
|
|
// font-size: var(--fs-200);
|
|
color: var(--clr-card-text-alt-alpha);
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// HEADINGS
|
|
////////////////////////////////////////////////////////////////
|
|
.heading {
|
|
font-family: var(--ff-alt-alpha);
|
|
color: var(--clr-base-heading);
|
|
|
|
&__primary {
|
|
font-size: var(--fs-400);
|
|
|
|
@include bp(bp-550) {
|
|
font-size: var(--fs-350);
|
|
}
|
|
@include bp(bp-450) {
|
|
font-size: calc(var(--fs-350) - 0.5rem);
|
|
}
|
|
}
|
|
|
|
&__secondary {
|
|
font-size: var(--fs-350);
|
|
font-weight: 600;
|
|
|
|
@include bp(bp-550) {
|
|
font-size: calc(var(--fs-350) - 0.5rem);
|
|
}
|
|
@include bp(bp-450) {
|
|
font-size: var(--fs-250);
|
|
}
|
|
}
|
|
|
|
&__tertiary {
|
|
font-size: var(--fs-250);
|
|
color: var(--clr-base-heading-alt-alpha);
|
|
}
|
|
|
|
&__quatenary {
|
|
color: var(--clr-base-heading-alt-alpha);
|
|
font-size: var(--fs-220);
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// BUTTONS
|
|
////////////////////////////////////////////////////////////////
|
|
.button {
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
font-family: var(--ff-alt-alpha);
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-button);
|
|
border: none;
|
|
outline: none;
|
|
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
&__primary {
|
|
font-size: var(--fs-200);
|
|
padding: 2rem 5rem;
|
|
|
|
@include bp(bp-725) {
|
|
font-size: var(--fs-180);
|
|
padding: 2rem 4rem;
|
|
}
|
|
|
|
@include bp(bp-450) {
|
|
font-size: var(--fs-160);
|
|
padding: 1.5rem 3rem;
|
|
}
|
|
}
|
|
|
|
&__secondary {
|
|
font-size: var(--fs-140);
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-button-hover);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-button-active);
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// CARD
|
|
////////////////////////////////////////////////////////////////
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
|
|
gap: var(--spacer-500);
|
|
// align-items: center;
|
|
|
|
@include bp(bp-725) {
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
max-width: 80rem;
|
|
margin: 0 auto;
|
|
|
|
display: grid;
|
|
grid-template-columns: 18rem minmax(25rem, 1fr);
|
|
gap: var(--spacer-100);
|
|
|
|
background: var(--clr-card-bg);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-card);
|
|
|
|
&__image-box {
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
background-position: top;
|
|
background-size: cover;
|
|
|
|
@include bp(bp-725) {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
content: '';
|
|
inset: 0; // nice property instead of top, left, etc.
|
|
background-image: var(--gradient-card-bg);
|
|
}
|
|
}
|
|
}
|
|
&__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
|
|
@include bp(bp-725) {
|
|
overflow: hidden;
|
|
width: auto;
|
|
height: auto;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
z-index: 3;
|
|
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
outline: 3px solid var(--clr-card-border);
|
|
outline-offset: -0.7rem;
|
|
}
|
|
}
|
|
|
|
&__about {
|
|
margin: 2rem;
|
|
display: grid;
|
|
grid-template-rows: min-content repeat(5, auto);
|
|
grid-auto-rows: auto;
|
|
gap: 0.5rem;
|
|
color: var(--clr-card-text);
|
|
}
|
|
|
|
&__title {
|
|
color: var(--clr-card-heading);
|
|
font-size: var(--fs-250);
|
|
align-self: center;
|
|
|
|
@include bp(bp-725) {
|
|
text-align: center;
|
|
}
|
|
|
|
@include bp(bp-450) {
|
|
font-size: var(--fs-220);
|
|
}
|
|
}
|
|
|
|
&__genres {
|
|
align-self: end;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
@include bp(bp-725) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&__genre {
|
|
text-decoration: none;
|
|
color: var(--clr-card-link);
|
|
text-transform: uppercase;
|
|
font-size: var(--fs-120);
|
|
font-weight: 900;
|
|
|
|
transition: all 0.2s;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--clr-card-link-hover);
|
|
}
|
|
}
|
|
|
|
&__rating-box {
|
|
align-self: start;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, max-content);
|
|
align-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
color: var(--clr-card-text-alt-alpha);
|
|
font-size: var(--fs-140);
|
|
|
|
@include bp(bp-725) {
|
|
justify-self: center;
|
|
grid-template-columns: repeat(2, max-content);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&__rating {
|
|
display: flex;
|
|
|
|
@include bp(bp-725) {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
&__rating-star {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
|
|
&--active {
|
|
fill: var(--clr-card-icon);
|
|
}
|
|
|
|
&--inactive {
|
|
fill: var(--clr-card-icon-alt-alpha);
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
&__rating-num {
|
|
&::before {
|
|
content: '(' attr(data-movie-rating) ')';
|
|
|
|
@include bp(bp-725) {
|
|
content: attr(data-movie-rating) ' rating';
|
|
}
|
|
}
|
|
}
|
|
|
|
&__votes {
|
|
// font-size: 1.4rem;
|
|
}
|
|
|
|
&__not-rated {
|
|
// font-size: 1.2rem;
|
|
color: var(--clr-card-text-alt-alpha);
|
|
// text-transform: uppercase;
|
|
|
|
@include bp(bp-725) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&__description {
|
|
align-self: center;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
// &__actors {
|
|
// }
|
|
|
|
&__actor {
|
|
}
|
|
|
|
&__actor-text,
|
|
&__director-text {
|
|
color: var(--clr-card-heading-alt-alpha);
|
|
font-family: var(--ff-alt-alpha);
|
|
}
|
|
|
|
// &__directors {
|
|
// }
|
|
|
|
&__director {
|
|
}
|
|
|
|
// &__director-text {
|
|
// }
|
|
|
|
&__link {
|
|
align-self: end;
|
|
justify-self: end;
|
|
// margin-bottom: 1rem;
|
|
|
|
font-size: var(--fs-120);
|
|
font-family: var(--ff-alt-alpha);
|
|
text-decoration: none;
|
|
color: var(--clr-card-link);
|
|
|
|
backface-visibility: hidden;
|
|
@include underliner(var(--clr-card-link-hover), transparent, false);
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
color: var(--clr-card-link-hover);
|
|
}
|
|
|
|
@include bp(bp-725) {
|
|
justify-self: center;
|
|
}
|
|
}
|
|
|
|
&__link-arrow {
|
|
padding-left: 3px;
|
|
display: inline-block;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
&__link:hover &__link-arrow {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
@include bp(bp-725) {
|
|
min-width: 28rem;
|
|
width: 70vw;
|
|
|
|
grid-template-columns: auto;
|
|
grid-template-rows: 20rem auto;
|
|
}
|
|
|
|
@include bp(bp-450) {
|
|
min-width: 90%;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// FEATURES
|
|
////////////////////////////////////////////////////////////////
|
|
.features {
|
|
display: grid;
|
|
grid-template-rows: max-content auto;
|
|
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
|
|
gap: var(--spacer-500);
|
|
|
|
@include bp(bp-550) {
|
|
gap: var(--spacer-300);
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
|
|
.feature {
|
|
// align-self: center;
|
|
padding: 2rem;
|
|
display: grid;
|
|
gap: var(--spacer-200) var(--spacer-100);
|
|
align-items: center;
|
|
grid-template-columns: max-content auto;
|
|
grid-auto-rows: min-content;
|
|
|
|
background: var(--clr-card-bg);
|
|
box-shadow: var(--shadow-card);
|
|
border-radius: 5px;
|
|
|
|
&__icon {
|
|
height: 3.5rem;
|
|
width: 3.5rem;
|
|
fill: var(--clr-card-icon-alt-beta);
|
|
|
|
@include bp(bp-550) {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
// align-self: center;
|
|
font-size: var(--fs-220);
|
|
color: var(--clr-card-heading);
|
|
|
|
@include bp(bp-550) {
|
|
font-size: var(--fs-200);
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
grid-column: -2 / -1;
|
|
align-self: start;
|
|
}
|
|
@include bp(bp-550) {
|
|
gap: var(--spacer-100);
|
|
// gap: var(--spacer-300);
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// FAQs
|
|
////////////////////////////////////////////////////////////////
|
|
.faqs {
|
|
display: grid;
|
|
gap: var(--spacer-300);
|
|
}
|
|
|
|
.faq {
|
|
border-left: 2px solid var(--clr-card-icon-alt-beta);
|
|
|
|
&__question {
|
|
display: block;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
|
|
background-color: var(--clr-card-bg);
|
|
// font-size: 1.8rem;
|
|
font-family: var(--ff-alt-alpha);
|
|
color: var(--clr-card-heading-alt-alpha);
|
|
|
|
// for the plus sign as the default marker can't be customised much
|
|
&::before {
|
|
display: inline-block;
|
|
content: '\00d7'; // x sign
|
|
margin-right: 5px;
|
|
font-weight: 700;
|
|
color: var(--clr-card-icon-alt-beta);
|
|
|
|
transform: rotatez(-135deg);
|
|
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
}
|
|
|
|
&__answer {
|
|
padding: 1rem;
|
|
background-color: var(--clr-card-bg-alt-alpha);
|
|
}
|
|
|
|
&[open] &__question::before {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
&[open] &__answer {
|
|
animation: slide-down 0.5s ease-in-out;
|
|
}
|
|
|
|
&__link {
|
|
text-decoration: none;
|
|
// margin: 3px 0.4rem 0 0.4rem;
|
|
color: var(--clr-card-link-alt-alpha);
|
|
|
|
@include underliner(
|
|
var(--clr-card-link-hover-alt-alpha),
|
|
var(--clr-card-link-alt-alpha),
|
|
false
|
|
);
|
|
|
|
transition: all 0.2s;
|
|
&:hover {
|
|
color: var(--clr-card-link-hover-alt-alpha);
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// BASIC
|
|
////////////////////////////////////////////////////////////////
|
|
.basic {
|
|
display: grid;
|
|
margin-bottom: var(--spacer-200);
|
|
grid-template-columns: 30rem minmax(40rem, 1fr);
|
|
gap: var(--spacer-100);
|
|
|
|
background: var(--clr-card-bg);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-card);
|
|
|
|
&__image-box {
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
background-position: top;
|
|
background-size: cover;
|
|
|
|
@include bp(bp-725) {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
content: '';
|
|
inset: 0; // nice property instead of top, left, etc.
|
|
background-image: var(--gradient-card-bg);
|
|
}
|
|
}
|
|
}
|
|
&__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
|
|
@include bp(bp-725) {
|
|
overflow: hidden;
|
|
width: auto;
|
|
height: auto;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
z-index: 3;
|
|
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
outline: 3px solid var(--clr-card-border);
|
|
outline-offset: -0.7rem;
|
|
}
|
|
}
|
|
|
|
&__image-na {
|
|
fill: var(--clr-card-icon-alt-alpha);
|
|
height: 40%;
|
|
width: 40%;
|
|
margin: auto;
|
|
}
|
|
|
|
&__about {
|
|
margin: 1.5rem;
|
|
display: grid;
|
|
grid-template-rows: min-content;
|
|
grid-auto-rows: auto;
|
|
|
|
gap: 1rem;
|
|
color: var(--clr-card-text);
|
|
|
|
@include bp(bp-900) {
|
|
// grid-template-rows: min-content min-content 1fr;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
@include bp(bp-725) {
|
|
gap: 1.2rem;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
font-family: var(--ff-alt-alpha);
|
|
color: var(--clr-card-heading);
|
|
font-size: var(--fs-400);
|
|
font-weight: 600;
|
|
align-self: center;
|
|
line-height: 1;
|
|
|
|
@include bp(bp-900) {
|
|
font-size: var(--fs-350);
|
|
}
|
|
|
|
@include bp(bp-550) {
|
|
font-size: var(--fs-300);
|
|
}
|
|
@include bp(bp-450) {
|
|
font-size: var(--fs-300);
|
|
}
|
|
}
|
|
|
|
&__genres {
|
|
align-self: end;
|
|
|
|
@include bp(bp-725) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&__genre-heading,
|
|
&__director-heading,
|
|
&__writer-heading {
|
|
font-weight: 600;
|
|
// font-size: var(--fs-180);
|
|
font-family: var(--ff-alt-alpha);
|
|
color: var(--clr-card-heading-alt-alpha);
|
|
}
|
|
&__genre {
|
|
@extend %list-items;
|
|
}
|
|
|
|
&__metadata-data {
|
|
// font-size: var(--fs-180);
|
|
// line-height: 1;
|
|
|
|
@extend %bullet-items;
|
|
}
|
|
|
|
&__stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, max-content);
|
|
align-content: center;
|
|
align-items: center;
|
|
gap: var(--spacer-200);
|
|
|
|
// margin: 0.5rem 0;
|
|
color: var(--clr-card-text);
|
|
|
|
@include bp(bp-725) {
|
|
justify-self: center;
|
|
}
|
|
@include bp(bp-350) {
|
|
gap: var(--spacer-100);
|
|
}
|
|
}
|
|
|
|
&__rating,
|
|
&__votes,
|
|
&__popularity {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, max-content);
|
|
font-size: 3rem;
|
|
place-content: center;
|
|
place-items: center;
|
|
gap: 0.5rem 1rem;
|
|
|
|
@include bp(bp-900) {
|
|
gap: 0 1rem;
|
|
font-size: var(--fs-280);
|
|
}
|
|
@include bp(bp-550) {
|
|
font-size: var(--fs-250);
|
|
}
|
|
}
|
|
&__rating-num,
|
|
&__votes-num,
|
|
&__popularity-num {
|
|
font-family: var(--ff-alt-alpha);
|
|
color: var(--clr-card-heading-alt-alpha);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
&__icon {
|
|
height: 0.8em;
|
|
width: 0.8em;
|
|
}
|
|
|
|
&__rating-text,
|
|
&__votes-text,
|
|
&__popularity-text {
|
|
grid-column: 1 / -1;
|
|
// justify-self: start;
|
|
font-size: 0.5em;
|
|
color: var(--clr-card-text-alt-alpha);
|
|
// line-height: 0.5;
|
|
}
|
|
&__icon {
|
|
display: grid;
|
|
justify-self: end;
|
|
align-self: center;
|
|
fill: var(--clr-card-icon);
|
|
}
|
|
|
|
&__no-rating-text {
|
|
margin-top: 1rem;
|
|
font-size: var(--fs-140);
|
|
color: var(--clr-card-text);
|
|
}
|
|
|
|
&__description-heading {
|
|
font-size: var(--fs-200);
|
|
font-family: var(--ff-alt-alpha);
|
|
font-weight: 600;
|
|
color: var(--clr-card-heading-alt-alpha);
|
|
|
|
@include bp(bp-550) {
|
|
font-size: var(--fs-180);
|
|
}
|
|
}
|
|
|
|
&__description {
|
|
// background: red;
|
|
padding: 1rem 0;
|
|
align-self: center;
|
|
|
|
@include bp(bp-900) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&__director {
|
|
@extend %list-items;
|
|
}
|
|
|
|
&__writer {
|
|
@extend %list-items;
|
|
}
|
|
|
|
@include bp(bp-900) {
|
|
grid-template-columns: 20rem minmax(35rem, 1fr);
|
|
gap: 0;
|
|
}
|
|
|
|
@include bp(bp-725) {
|
|
min-width: 28rem;
|
|
// width: 90vw;
|
|
|
|
grid-template-columns: auto;
|
|
grid-template-rows: 25rem auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// ACTORS
|
|
////////////////////////////////////////////////////////////////
|
|
.actors {
|
|
display: flex;
|
|
overflow: auto;
|
|
gap: var(--spacer-200);
|
|
// scroll-snap-type: y mandatory;
|
|
padding: var(--spacer-200) var(--spacer-100);
|
|
}
|
|
|
|
.actor {
|
|
list-style: none;
|
|
flex: 1 0 15rem;
|
|
|
|
display: grid;
|
|
max-height: 30rem;
|
|
max-width: 30rem;
|
|
// scroll-snap-align: start;
|
|
|
|
&__details {
|
|
display: grid;
|
|
grid-template-rows: minmax(10rem, 65%) repeat(2, min-content);
|
|
gap: var(--spacer-050);
|
|
overflow: hidden;
|
|
|
|
text-align: center;
|
|
background-color: var(--clr-card-bg);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
&__image {
|
|
display: grid;
|
|
place-content: center;
|
|
place-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
}
|
|
|
|
&__image-na {
|
|
fill: var(--clr-card-icon-alt-alpha);
|
|
height: 60%;
|
|
width: 60%;
|
|
margin: auto;
|
|
}
|
|
|
|
&__name {
|
|
// font-size: var(--fs-180);
|
|
font-family: var(--ff-alt-alpha);
|
|
font-weight: 600;
|
|
color: var(--clr-card-heading-alt-alpha);
|
|
}
|
|
|
|
&__character-name {
|
|
font-size: var(--fs-140);
|
|
color: var(--clr-card-text-alt-alpha);
|
|
}
|
|
}
|
|
////////////////////////////////////////////////////////////////
|
|
// storyline
|
|
////////////////////////////////////////////////////////////////
|
|
.storyline,
|
|
.boxoffice,
|
|
.technical,
|
|
.details {
|
|
display: grid;
|
|
gap: var(--spacer-050);
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// review
|
|
////////////////////////////////////////////////////////////////
|
|
.review {
|
|
&__scores {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacer-050) var(--spacer-300);
|
|
padding-block: var(--spacer-100);
|
|
}
|
|
|
|
&__score {
|
|
}
|
|
|
|
&__box {
|
|
display: grid;
|
|
grid-template-columns: auto min-content;
|
|
gap: var(--spacer-100);
|
|
|
|
@include bp(bp-725) {
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
|
|
&__summary {
|
|
}
|
|
|
|
&__rating {
|
|
display: flex;
|
|
gap: var(--spacer-050);
|
|
|
|
> * {
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
&__comment {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|