From 3331b3a4bc58bffd5c79898d5095ed2adb39f4d6 Mon Sep 17 00:00:00 2001
From: Camerin <figueroa0609@protonmail.com>
Date: Sun, 19 Sep 2021 21:13:07 -0400
Subject: [PATCH] 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

---
 src/components/Home.js         |  2 +-
 src/components/Theater.js      |  2 +-
 src/components/css/Github.css  |  2 +-
 src/components/css/Home.css    | 12 ++++++++++++
 src/components/css/Theater.css |  7 ++++++-
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Home.js b/src/components/Home.js
index ffcc235..35755bc 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -15,7 +15,7 @@ const Home = (props) => {
 
   return (
     <div className="Home">
-      <Theater title={title} description={description} />
+      <Theater title={title} description={description} h_100/>
     </div>
   );
 }
diff --git a/src/components/Theater.js b/src/components/Theater.js
index 695fcb3..b671988 100644
--- a/src/components/Theater.js
+++ b/src/components/Theater.js
@@ -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>
diff --git a/src/components/css/Github.css b/src/components/css/Github.css
index 42f1e57..6b18eca 100644
--- a/src/components/css/Github.css
+++ b/src/components/css/Github.css
@@ -1,7 +1,7 @@
 .repo-list {
     display:flex;
     flex-direction: column;
-    width: 50vw;
+    width: 75vw;
     margin-left: auto;
     margin-right: auto;
 }
diff --git a/src/components/css/Home.css b/src/components/css/Home.css
index 11a5f53..3c70b3d 100644
--- a/src/components/css/Home.css
+++ b/src/components/css/Home.css
@@ -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;
diff --git a/src/components/css/Theater.css b/src/components/css/Theater.css
index 7d1b93c..b26e67c 100644
--- a/src/components/css/Theater.css
+++ b/src/components/css/Theater.css
@@ -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');