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:
parent
3a5c189a16
commit
3331b3a4bc
|
|
@ -15,7 +15,7 @@ const Home = (props) => {
|
|||
|
||||
return (
|
||||
<div className="Home">
|
||||
<Theater title={title} description={description} />
|
||||
<Theater title={title} description={description} h_100/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.repo-list {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
width: 50vw;
|
||||
width: 75vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue