Henry-Hiles/movie-react-app
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes

Browse source
This commit is contained in:
Henry Hiles 2023-03-12 14:06:16 -04:00
parent 1be59353d6
commit 87ca027277
2 changed files with 113 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/styles/Actor.module.css
View file

@ -1,96 +1,96 @@
.Container { .Container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 15px; padding: 15px;
color: white; color: white;
} }
.Top { .Top {
display: flex; display: flex;
gap: 20px; gap: 20px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.Thumb { .Thumb {
height: 450px; height: 450px;
} }
.Name { .Name {
margin-top: 10px; margin-top: 10px;
font-size: 3em; font-size: 3em;
} }
.Biography { .Biography {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 1.3em; font-size: 1.3em;
white-space: pre-line; white-space: pre-line;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
} }
.Images { .Images {
display: flex; display: flex;
overflow: scroll; overflow: auto;
align-items: start; align-items: start;
gap: 15px; gap: 15px;
height: 200px; height: 200px;
} }
.Image { .Image {
height: 100%; height: 100%;
} }
.Right { .Right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
.MovieTitle { .MovieTitle {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.Collapsed { .Collapsed {
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
} }
.Collapse { .Collapse {
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
.Credits { .Credits {
display: flex; display: flex;
width: 100%; width: 100%;
gap: 20px; gap: 20px;
overflow: scroll; overflow: auto;
} }
.ReadMore { .ReadMore {
text-decoration: underline; text-decoration: underline;
} }
.Movie { .Movie {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-decoration: none; text-decoration: none;
color: white; color: white;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
} }
.Movie:hover { .Movie:hover {
text-decoration: underline; text-decoration: underline;
} }
.Movie img { .Movie img {
height: 300px; height: 300px;
} }
.Section h1 { .Section h1 {
margin-top: 0; margin-top: 0;
} }

134
src/styles/Movie.module.css
View file

@ -1,132 +1,132 @@
.Container { .Container {
color: white; color: white;
} }
.Top { .Top {
height: 100vh; height: 100vh;
display: flex; display: flex;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
.Thumb { .Thumb {
position: absolute; position: absolute;
left: 25px; left: 25px;
bottom: 50px; bottom: 50px;
box-shadow: 5px 5px 50px #00000030; box-shadow: 5px 5px 50px #00000030;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.Thumb { .Thumb {
display: none; display: none;
} }
} }
.Summary { .Summary {
background: linear-gradient(#00000050, black); background: linear-gradient(#00000050, black);
font-size: 20px; font-size: 20px;
overflow: scroll; overflow: auto;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
} }
.Overview { .Overview {
font-size: 1.3em; font-size: 1.3em;
} }
.More { .More {
color: white; color: white;
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
gap: 5px; gap: 5px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.More p { .More p {
margin: 0; margin: 0;
} }
.More:not(:hover) { .More:not(:hover) {
text-decoration: none; text-decoration: none;
} }
.Title { .Title {
font-size: 2.75em; font-size: 2.75em;
width: 40%; width: 40%;
margin: 0; margin: 0;
} }
.Tagline { .Tagline {
font-size: 1.65em; font-size: 1.65em;
width: 40%; width: 40%;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
} }
.Bottom { .Bottom {
background-color: black; background-color: black;
height: 100vh; min-height: 100vh;
display: flex; display: flex;
padding: 20px 40px; padding: 20px 40px;
flex-direction: column; flex-direction: column;
} }
.Section div { .Section div {
margin-left: 10px; margin-left: 10px;
} }
.Actors { .Actors {
display: flex; display: flex;
overflow: scroll; overflow: auto;
align-items: start; align-items: start;
gap: 15px; gap: 15px;
} }
.Actor { .Actor {
text-align: center; text-align: center;
color: white; color: white;
} }
.Actor img { .Actor img {
height: 300px; height: 300px;
} }
.Actor:not(:hover) { .Actor:not(:hover) {
text-decoration: none; text-decoration: none;
} }
.Tags { .Tags {
display: flex; display: flex;
gap: 10px; gap: 10px;
width: 100%; width: 100%;
overflow: scroll; overflow: auto;
} }
.Tags > * { .Tags > * {
background-color: var(--primary); background-color: var(--primary);
padding: 5px 7px; padding: 5px 7px;
border-radius: 10px; border-radius: 10px;
white-space: nowrap; white-space: nowrap;
} }
.Average { .Average {
display: flex; display: flex;
gap: 5px; gap: 5px;
} }
.Rate { .Rate {
color: white; color: white;
} }
.RatingsLink { .RatingsLink {
color: white; color: white;
} }