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 (
<div className="Home">
<Theater title={title} description={description} />
<Theater title={title} description={description} h_100/>
</div>
);
}

View File

@ -4,7 +4,7 @@ import './css/Theater.css';
const Theater = (props) => {
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-content">
<h1>{props.title}</h1>

View File

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

View File

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

View File

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