Fixed some css bugs

Github repos were expanded to a 75vw width
Theater in Home.js was fixed such that the theater will always fill
This commit is contained in:
Camerin 2021-09-19 21:13:07 -04:00
parent 3a5c189a16
commit 3331b3a4bc
5 changed files with 21 additions and 4 deletions

View File

@ -15,7 +15,7 @@ const Home = (props) => {
return ( return (
<div className="Home"> <div className="Home">
<Theater title={title} description={description} /> <Theater title={title} description={description} h_100/>
</div> </div>
); );
} }

View File

@ -4,7 +4,7 @@ import './css/Theater.css';
const Theater = (props) => { const Theater = (props) => {
return ( return (
<div className={`theater ${props.peak ? 'peak':''}`}> <div className={`theater ${props.peak ? 'peak':''} ${props.h_100 ? 'h-100':''}`}>
<div className="theater-bg" style={props.background ? {backgroundImage: `url(${props.background})`} : {}}/> <div className="theater-bg" style={props.background ? {backgroundImage: `url(${props.background})`} : {}}/>
<div className="theater-content"> <div className="theater-content">
<h1>{props.title}</h1> <h1>{props.title}</h1>

View File

@ -1,7 +1,7 @@
.repo-list { .repo-list {
display:flex; display:flex;
flex-direction: column; flex-direction: column;
width: 50vw; width: 75vw;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

View File

@ -17,6 +17,18 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
.App {
height: 100vh;
display:flex;
}
.Home {
flex-grow: 1;
height: auto;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.theater-content p { .theater-content p {
width: 80vw; width: 80vw;

View File

@ -4,8 +4,13 @@
grid-template-areas: "inner-div"; grid-template-areas: "inner-div";
} }
.theater.h-100 {
height:100%;
}
.theater-bg { .theater-bg {
height: 94.6vh;
height: 100%;
width:100vw; width:100vw;
background-size: cover; background-size: cover;
background-image: url('../../img/background.webp'); background-image: url('../../img/background.webp');