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

View file

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

View file

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