movie-explorer/src/App.css

59 lines
729 B
CSS
Raw Normal View History

2024-05-06 11:33:00 +00:00
:root {
--poster-width: 10rem;
--posters-wide: 10;
}
#root {
height: 100%;
width: 100%;
}
main {
2024-05-05 21:59:33 +00:00
display: flex;
2024-05-06 11:33:00 +00:00
justify-content: center;
height: 100%;
background-size: cover;
}
h1 {
margin: 0;
}
.flow-container {
display: inline-flex;
2024-05-05 21:59:33 +00:00
flex-wrap: wrap;
2024-05-06 11:33:00 +00:00
align-items: center;
justify-content: center;
flex-basis: calc(var(--poster-width)*var(--posters-wide));
}
#sidebar {
flex: 0 0 10rem;
2024-04-29 11:19:01 +00:00
}
2024-05-05 21:59:33 +00:00
.poster {
font-size: 2rem;
2024-05-06 11:33:00 +00:00
background-size: cover;
width: var(--poster-width);
2024-05-05 21:59:33 +00:00
aspect-ratio: 3/4.5;
2024-05-06 11:33:00 +00:00
flex: 0 0 auto;
2024-04-29 11:19:01 +00:00
}
2024-05-05 21:59:33 +00:00
.overlay {
margin: 0;
height: 100%;
width: 100%;
2024-05-06 11:33:00 +00:00
background-color: rgba(255, 255, 255, 0.5);
2024-05-05 21:59:33 +00:00
opacity: 0;
2024-05-06 11:33:00 +00:00
cursor: pointer;
2024-04-29 11:19:01 +00:00
}
2024-05-05 21:59:33 +00:00
.overlay:hover {
opacity: 1;
2024-04-29 11:19:01 +00:00
}