From 83545ebf75fc9d61c355cc929d54083fd9591089 Mon Sep 17 00:00:00 2001
From: Scarlett <kadansk8@gmail.com>
Date: Sun, 3 Sep 2023 11:17:01 -0500
Subject: [PATCH] better scaling

---
 src/assets/stylesheets/bubble.scss |  6 +--
 src/assets/stylesheets/home.scss   | 24 +++++++++++-
 src/components/Bubble.js           |  8 ++--
 src/components/Home.js             | 63 +++++++++++++++---------------
 4 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/assets/stylesheets/bubble.scss b/src/assets/stylesheets/bubble.scss
index 1427009..846dab0 100644
--- a/src/assets/stylesheets/bubble.scss
+++ b/src/assets/stylesheets/bubble.scss
@@ -14,11 +14,11 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-bottom: 50px;
+  margin: 30px; 
 }
 
 .bubble_main {
-  width: 40vw;
+  width: 100%;
 }
 
 .bubble_main h1 {
@@ -60,7 +60,7 @@
 @media screen and (max-width: 650px) {
   // Phones
   .bubble_main {
-    width: 80vw;
+    width: auto;
   }
 
   .bubble_main h1 {
diff --git a/src/assets/stylesheets/home.scss b/src/assets/stylesheets/home.scss
index 6b4f3a0..47969bf 100644
--- a/src/assets/stylesheets/home.scss
+++ b/src/assets/stylesheets/home.scss
@@ -51,18 +51,38 @@
 }
 
 .home__content__info {
-  height: auto;
+  height: 100vh;
   width: 100%;
   margin: 0px;
   padding: 0px;
   background: linear-gradient(#353535, #232323);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.c {
+  margin: 0px;
+  padding: 0px;
+  width: 80%;
+  height: 80%;
+  position: relative;
+  display: flex;
+  opacity: 100%;
+  flex-direction: column;
+  justify-content: center;
+  background: transparent;
+  z-index: 0;
 }
 
 @media screen and (max-width: 650px) {
   // Phones
+  .home__content__panel__title {
+    font-size: 45px;
+  }
 }
 
-
 // Animations
 
 @keyframes textSlide {
diff --git a/src/components/Bubble.js b/src/components/Bubble.js
index 8abe199..3529e69 100644
--- a/src/components/Bubble.js
+++ b/src/components/Bubble.js
@@ -6,10 +6,10 @@ export default class Bubble extends Component {
   render() {
     return (
       <div
-        style={{
-          marginLeft: `${this.props.left}`,
-          paddingTop: `${this.props.top}`,
-        }}
+        // style={{
+        //   marginLeft: `${this.props.left}`,
+        //   paddingTop: `${this.props.top}`,
+        // }}
       >
         <div className="bubble">
           <AnimationOnScroll
diff --git a/src/components/Home.js b/src/components/Home.js
index 9a59898..05f15d3 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -41,41 +41,40 @@ export default class Home extends Component {
               className="home__content__panel__video"
               type="video/mp4"
               src={backgroundVideo}
-            >
-            </video>
+            ></video>
           </div>
 
           <div className="home__content__info">
-            <Bubble top="10vh" left="30vw" h1="Join us at our" h2="GBMs 🤝">
-              <span>
-                Welcome to the Illinois Tech Robotics Club! We are a student-run
-                organization that promotes the field of robotics through
-                hands-on projects, competitions and events. Open to students of
-                all majors and skill levels, we meet every week at 6:30pm CST to
-                work on exciting robotics projects.
-              </span>
-            </Bubble>
-            <Bubble
-              top="5vh"
-              left="30vw"
-              h1="Directions to the"
-              h2="ITR Lab 🗺️"
-            >
-              <span>
-                1. Enter through the{" "}
-                <a href="https://goo.gl/maps/NJW5LzDDBYoHiD5X6">IIT Tower</a>{" "}
-                located at 10 W 35 St, Chicago, IL.
-                <br />
-                2. Sign in with the front desk, and then take the elevator to
-                the basement.
-                <br />
-                3. Once in the basement, take a right from the elevator and
-                enter the last door on the left.
-                <br />
-                4. Finally, sign in to the Elevate Underground Lab with the CLA
-                on guard!
-              </span>
-            </Bubble>
+            <div className="c">
+              <Bubble h1="Join us at our" h2="GBMs 🤝">
+                <span>
+                  Welcome to the Illinois Tech Robotics Club! We are a
+                  student-run organization that promotes the field of robotics
+                  through hands-on projects, competitions and events. Open to
+                  students of all majors and skill levels, we meet every week at
+                  6:30pm CST to work on exciting robotics projects.
+                </span>
+              </Bubble>
+              <Bubble
+                h1="Directions to the"
+                h2="ITR Lab 🗺️"
+              >
+                <span>
+                  1. Enter through the{" "}
+                  <a href="https://goo.gl/maps/NJW5LzDDBYoHiD5X6">IIT Tower</a>{" "}
+                  located at 10 W 35 St, Chicago, IL.
+                  <br />
+                  2. Sign in with the front desk, and then take the elevator to
+                  the basement.
+                  <br />
+                  3. Once in the basement, take a right from the elevator and
+                  enter the last door on the left.
+                  <br />
+                  4. Finally, sign in to the Elevate Underground Lab with the
+                  CLA on guard!
+                </span>
+              </Bubble>
+            </div>
           </div>
         </div>
       </div>