Responsive team page

package.json

@@ -35,17 +35,17 @@
     "graphql-yoga": "^1.16.7",
     "http-proxy": "^1.17.0",
     "prisma-binding": "^2.1.6",
-    "react": "^16.6.1",
+    "react": "^16.6.3",
     "react-apollo": "^2.2.4",
-    "react-dom": "^16.6.1",
+    "react-dom": "^16.6.3",
     "react-helmet": "^5.2.0",
     "react-mailto": "^0.4.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scrollchor": "^6.0.0",
     "react-slick": "^0.23.2",
     "slick-carousel": "^1.8.1",
-    "styled-components": "^4.0.3",
+    "styled-components": "^4.1.1",
     "write-yaml": "^1.0.0"
   }
 }

web/src/components/AboutPage/AboutPage.css

@@ -1 +1,5 @@
-
+@media only screen and (max-width: 600px) {
+    .team-container {
+        top: -100px;
+    }
+}

web/src/components/AboutPage/index.js

@@ -4,7 +4,10 @@ import Team from '../team/team'
 
 const AboutPage = () => (
   <div>
-    <BasicPage>
+    <BasicPage 
+      teamWidth = "auto"
+      teamMazeBottom = "none"
+    >
       <Team/>
     </BasicPage>
   </div>

web/src/components/BasicPage/index.js

@@ -29,7 +29,7 @@ class BasicPage extends React.Component {
             backgroundColor={this.props.navBackgroundColor}
           />
           {Hero && <Hero />}
-          <div className="content-container">
+          <div className="content-container" style={{ width: this.props.teamWidth }}>
             <div className="content-container--inner">
               <div className="content-container--background">
                 <img
@@ -44,7 +44,7 @@ class BasicPage extends React.Component {
               {this.props.children}
             </div>
           </div>
-          <div className="page-maze--bottom">
+          <div className="page-maze--bottom" style={{ display: this.props.teamMazeBottom}}>
             <div
               className="page-maze--content bottom"
               style={{ backgroundImage: `url(${this.props.bottomMazeSrc})` }}

web/src/components/team-member/team-member.css

@@ -23,7 +23,7 @@ img.team-member__photo, .team-accent-dot {
 
 .ellie-photo {
   top: 100px;
-  left: 200px;
+  left: 250px;
 }
 
 .lian-photo {
@@ -108,7 +108,7 @@ div.team-member__photo-div:active .tooltiptext {
 @media only screen and (max-width: 500px) {
   .olga-photo {
     top: 250px;
-    left: 310px;
+    left: 300px;
   }
 
   .ellie-photo {
@@ -121,7 +121,7 @@ div.team-member__photo-div:active .tooltiptext {
   }
 
   .alina-photo {
-    left: -10px;
+    left: -20px;
     top: 300px;
   }
 }

web/src/components/team/team.css

@@ -1,9 +1,9 @@
 .team-container {
   position: relative;
-  margin-bottom: 80px;
   padding-top: 70px;
   clear: both;
   overflow: hidden;
+  top: -200px;
 }
 
 .team {
@@ -30,21 +30,23 @@
   margin: 0 auto;
 }
 
+@media only screen and (max-width: 900px) {
+  .team {
+    right: 150px;
+    width: 150%;
+  }
+}
+
 @media only screen and (max-width: 600px) {
   .team__title {
     width: 720px;
   }
 
   .team {
-    height: 300px;
     width: 160%;
     right: 160px;
-  }
-}
-
-@media only screen and (max-width: 900px) {
-  .team {
-    height: 600px;
+    margin-top: 100px;
+    height: 600px
   }
 }