Merge pull request #40 from giraudremi92/ResponsivDesign_GIRAUDREMI92…

…_BRANCH Responsive design giraudremi92 branch
Pyrrha-Platform · Aug 23, 2021 · 49e0963 · 49e0963
2 parents 7616533 + c776382
commit 49e0963
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,10 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `yarn install`
+
+Install all dependencies you need for the project.
+
 ### `yarn start`
 
 Runs the app in the development mode.\

diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -7,15 +7,17 @@ const Banner = () => {
 
   return (
     <section className="landing__banner">
-      <div className="landing__pyrrha">
-        <div className="landing__pyrrhaWrapper">
-          <h1>Pyrrha</h1>
-        </div>
-      </div>
-      <div className="landing__mission">
-        <h2>{t("bannerMission")}</h2>
-      </div>
-    </section>
+   <div className="bx--grid">
+  <div className="bx--row">
+    <div className="bx--col col__banner__title"><h1 className="BannerTitle" >Pyrrha</h1>
+<h2 className="BannerSubtitle_Responsive">{t("bannerMission")}</h2>
+
+	  </div>
+    <div className="bx--col col__banner__subtitle">  <h2 className="BannerSubtitle">{t("bannerMission")}</h2>
+</div>
+	  </div>
+</div> 
+	  </section>
   );
 };
 

diff --git a/src/components/Sensors.js b/src/components/Sensors.js
@@ -97,7 +97,7 @@ const SensorInfo = () => {
                 alt="pyrrha testing pic"
               ></img>
             </Column>
-            <div classname="tests">
+            <div className="tests">
               <h3>{t("actionDescription2")}</h3>
               <ol>
                 <li>{t("actionDescription3")}</li>
@@ -106,7 +106,7 @@ const SensorInfo = () => {
               </ol>
               <br />
             </div>
-            <div classname="results">
+            <div className="results">
               <h3>{t("actionDescription6")}</h3>
               <ol>
                 <li>{t("actionDescription7")}</li>
@@ -136,41 +136,57 @@ const DashboardInfo = () => {
           </Column>
         </Row>
         <Row className="info-media">
-          <Column lg={{ span: 12, offset: 3 }}>
-            <div class="gallery">
+          <Column className="col__media">
+          <div className="gallery">
               <img src={salome} alt="Salomé Valero"></img>
-              <div class="desc">
+              <div className="desc">
                 <p>Salomé Valero</p>
                 <p>Chief Executive Officer</p>
                 <p>Co-Founder</p>
               </div>
             </div>
-            <div class="gallery">
+
+	  </Column>
+
+	  <Column className="col__media">
+
+	  <div className="gallery">
               <img src={marco} alt="Marco Emilio Rodríguez Serrano" />
-              <div class="desc">
+              <div className="desc">
                 <p>Marco Emilio Rodríguez Serrano</p>
                 <p>Chief Technology Officer</p>
                 <p>Co-Founder</p>
               </div>
             </div>
-            <div class="gallery">
+          </Column>
+
+	  <Column className="col__media">
+
+
+	  <div className="gallery">
               <img src={joan} alt="Joan Herrera" />
-              <div class="desc">
+              <div className="desc">
                 <p>Joan Herrera</p>
                 <p>Chief Operating Officer</p>
                 <p>Co-Founder</p>
               </div>
             </div>
-            <div class="gallery">
+          </Column>
+
+	<Column className="col__media">
+
+
+	  <div className="gallery">
               <img src={artur} alt="Artur Álvarez" />
-              <div class="desc">
+              <div className="desc">
                 <p>Artur Álvarez</p>
                 <p>Media Producer</p>
                 <p>Co-Founder</p>
               </div>
             </div>
           </Column>
-        </Row>
+
+	  </Row>
       </Grid>
     </section>
   );

diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -2,10 +2,14 @@
 @import "~carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss";
 @import "~carbon-components/scss/globals/scss/typography.scss";
 @import "~carbon-components/scss/globals/scss/vars.scss";
+@import 'carbon-components/scss/globals/grid/grid';
+
 
 $small: 320px;
 $medium: 992px;
-
+$tablet: 800px;
+$smartphone: 550px;
+$mediumscreen: 1100px;
 *,
 *::after,
 *::before {

diff --git a/src/styles/Landing.scss b/src/styles/Landing.scss
@@ -13,81 +13,126 @@
   right: 95px;
 }
 
+// New Banner Responsive
+
 .landing__banner {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 1rem 1rem 0 1rem;
+  display: block;
+  height:100vh;
+  width:100%;
   background-image: url(../content/assets/pyrrha-hero.jpg);
-  background-size: cover;
+  background-position-y: 0px;
+  background-repeat: no-repeat;
   background-attachment: fixed;
   color: white;
+  background-size: cover;
+  margin-top: 7rem;
+  margin-bottom: 7rem;
 
-  @media screen and (min-width: $medium) {
-    height: 50vh;
-    margin: 7rem auto;
-    height: 35rem;
-  }
 
-  .landing__pyrrha {
-    flex: 0 0 100%;
+@media only screen and (max-width: $tablet){
+	height: 60vh;
+	background-attachment: initial;
 
-    @media screen and (min-width: $medium) {
-      flex: 0 0 50%;
-      display: flex;
-      align-items: center;
-      padding: 6rem 0 19.5rem 8rem;
-    }
 
-    .landing__pyrrhaWrapper {
-      position: relative;
-      background-image: url(../content/assets/pyrrha-hero.jpg);
-
-      h1 {
-        @include carbon--type-style("expressive-heading-06");
-        font-size: 10rem;
-        position: absolute;
-        top: 5px;
-        left: 105px;
-
-        @media screen and (min-width: $medium) {
-          width: 7rem;
-          top: -1px;
-          left: 90px;
-        }
-      }
+}
 
-      img {
-        width: 5rem;
-        margin-bottom: 1rem;
+@media only screen and (max-width: $smartphone){
+	margin-bottom:5rem;
+	background-attachment: initial; 
 
-        @media screen and (min-width: $medium) {
-          width: 6rem;
-        }
-      }
+}
 
-      @media screen and (min-width: $medium) {
-        display: flex;
-      }
-    }
-  }
+ }
+
+// Banner Grid
+
+.col__banner__title{
+	padding-top:15%;
+}
+
+.col__banner__subtitle{
+	padding-top:15%;
+
+@media only screen and (max-width: $mediumscreen){
+	display: none;
+}
+
+}
+
+// Banner Title Responsive
+
+.BannerTitle{
+      @include carbon--type-style("expressive-heading-06");
+      display:block;
+      font-size: 10rem;
+      position: absolute;
+
+@media only screen and (max-width: $smartphone){
+	font-size: 6rem;
+}
+
+}
+
+// Banner Subtitle Responsive Widescreen
+
+.BannerSubtitle{
+    font-weight: 400;
+    line-height: 1.25;
+    letter-spacing: 0;
+    border-left: 4px solid;
+    padding-left: 2rem;
+    font-size: 2.5rem;
+}
+
+// Banner Subtitle Responsive Laptop Tablet Mobile 
+
+.BannerSubtitle_Responsive{
+    font-weight: 400;
+    line-height: 1.25;
+    letter-spacing: 0;
+    border-left: 4px solid;
+    padding-left: 2rem;
+    font-size: 2.5rem;
+    display: none;
+    margin-top: 14rem;
+
+    @media only screen and (max-width: $mediumscreen){
+	display:block;
+}
+
+
+    @media only screen and (max-width: $tablet){
+	display:block;
+	margin-top: 12rem;
+}
+
+    @media only screen and (max-width: 700px){
+	display:block;
+	font-size: 2rem;
 
-  .landing__mission {
-    margin-top: 1rem;
 
-    @media screen and (min-width: $medium) {
-      flex: 0 0 50%;
-      display: flex;
-      align-items: center;
-      padding: 0rem;
-    }
 
-    h2 {
-      @include carbon--type-style("expressive-heading-05");
-      border-left: 4px solid;
-      padding-left: 2rem;
-      font-size: 2.5rem;
-    }
-  }
+}
+
+    @media only screen and (max-width: $smartphone){
+	display:block;
+	font-size: 1.5rem;
+	margin-top:10rem;
+
+
+
+}
+
+@media only screen and (max-width: $small){
+	display:block;
+	font-size: 1.3rem;
+	margin-top:9rem;
+
+
+
+}
+
+
 }
 
 .landing__diagram {
@@ -184,25 +229,25 @@
   .sensor-image {
     margin-top: 2vw;
     margin-bottom: 1.5vw;
-    width: 150%;
+    width: 100%;
   }
 
   .device {
     margin-top: 1vw;
     margin-bottom: 1.5vw;
-    width: 250%;
+    width: 100%;
   }
 
   .dash {
     margin-top: 1vw;
     margin-bottom: 4vw;
-    width: 400%;
+    width: 100%;
   }
 
   .testing {
     margin-top: 1vw;
     margin-bottom: 1.5vw;
-    width: 260%;
+    width: 100%;
   }
 
   .archdescrip {
@@ -219,7 +264,6 @@
     background-color: inherit;
     border: 2px solid #cc3d3d;
   }
-}
 
 // Dashboard information section
 .dashboard-image {
@@ -228,20 +272,25 @@
 }
 
 //alignment for the team images/text
+
+//Responsiv Column Team section
+
+.col__media{
+	padding-right:0;
+}
+
 .gallery {
-  margin: 20px 50px -100px 50px;
+margin-top:3rem;	
   float: left;
-  width: 15%;
   padding: 0 43px 0 0;
 }
 
 .desc {
-  padding: 10px;
   text-align: center;
   @include carbon--type-style("body-short-02");
-  width: 200%;
+  padding-top:1rem;
+}
 }
-
 footer {
   background-color: #cc3d3d;
   border-top: 1px solid #cc3d3d;