Merge pull request #36 from jointDeveloper/firebaseDeployment

Firebase deployment

README.md

@@ -15,3 +15,23 @@ _Somos una comunidad que busca despertar el interés de las mujeres y niñas en
 
 * `master` rama principal. Cambios para el Servidor de Producción.
 * `dev` rama desarrollo. Cambios y pruebas. Cuando se tiene una versión considerada como estable se dispone fusionar con `master`.
+
+## Como comenzar
+
+Instala las dependencias con:
+
+```
+npm i
+```
+
+Luego compila:
+
+```
+npm run build
+```
+
+Y corre:
+
+```
+npm run start
+```

web-app/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "jointdevweb"
+  }
+}

web-app/firebase.json

@@ -0,0 +1,19 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
+    "headers": [
+      {"source": "./src/serviceWorker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
+    ]
+  }
+}

web-app/src/App.css

@@ -28,14 +28,13 @@
   src: url(./fonts/OpenSans/OpenSans-Italic.ttf);
 }
 
-.App .font-title {
-  font-size: 70px;
-  font-family: fontTitle;
+.App .font-subtitle {
+  font-family: fontSubtitle;
 }
 
-.App .font-subtitle {
+.App .font-title {
   font-size: 70px;
-  font-family: fontSubtitle;
+  font-family: fontTitle;
 }
 
 .App .font-paragraph {
@@ -54,9 +53,46 @@
   font-family: highlightedParagraph;
 }
 
-.show-red {
-  background-color: red;
-  border-style: solid;
-  border-width: 1px 1px 1px 1px;
-  border-color: black;
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575.98px) {
+  .App .font-subtitle {
+    font-size: 30px;
+  }
+  .App .font-title {
+    font-size: 40px;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .App .font-subtitle {
+    font-size: 35px;
+  }
+  .App .font-title {
+    font-size: 45px;
+  }
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .App .font-subtitle {
+    font-size: 40px;
+  }
+  .App .font-title {
+    font-size: 50px;
+  }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  .App .font-subtitle {
+    font-size: 45px;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .App .font-subtitle {
+    font-size: 50px;
+  }
 }

web-app/src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import './App.css';
-import Header from './components/Header/Header';
+import Nav from './components/NavBar/Nav';
 import Footer from './components/Footer/Footer';
 import Home from './components/Home/Home';
 import Members from './components/Members/Members';
@@ -15,7 +15,7 @@ class App extends Component {
     return (
       <Router>
         <div className="App">
-          <Header image="./images/jointDev.png" />
+          <Nav image="./images/jointDev.png" />
 
           <Route exact path="/" component={ Home } />
           <Route path="/members" component={ withFirebase(Members) } />

web-app/src/components/About/About.css

@@ -1,7 +1,62 @@
 .About {
   height: 100%;
   padding: 15vh;
-  background: url(../../images/forma-redes-pink-top-completa.png) center top no-repeat;
+  background: url(../../images/forma-redes-pink-top-completa.png) center top no-repeat,
+              linear-gradient(90deg, #eac1e7, white, white, white, white, white, #eac1e7);
+}
+
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575.98px) {
+  .About .what-we-do h3 {
+    font-size: 23px;
+  }
+  .About .what-we-do p {
+    font-size: 15px;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .About .what-we-do h3 {
+    font-size: 23px;
+  }
+  .About .what-we-do p {
+    font-size: 16px;
+  }
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .About .what-we-do h3 {
+    font-size: 25px;
+  }
+  .About .what-we-do p {
+    font-size: 18px;
+  }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  .About .what-we-do h3 {
+    font-size: 30px;
+  }
+  .About .what-we-do p {
+    font-size: 20px;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .About .what-we-do h3 {
+    font-size: 32px;
+  }
+  .About .what-we-do p {
+    font-size: 22px;
+  }
+}
+
+.About .what-we-do h3 {
+  font-weight: bold;
 }
 
 .About .col {
@@ -30,7 +85,3 @@
   padding-top: 5vh;
   height: 15vw;
 }
-
-.About .what-we-do img:hover {
-  color: red;
-}

web-app/src/components/About/About.js

@@ -29,18 +29,18 @@ class Header extends React.Component {
         <div className="col d-flex justify-content-center what-we-do" key={index + "whatWeDo"}>
           <div class="container">
             <div class="row">
-              <div class="col-sm-12">
+              <div class="col">
                 <h3 className="text-smoke-strong text-center">{item.title}</h3>
               </div>
             </div>
           </div>
           <div class="row">
-            <div class="col-sm-12">
-              <i className={"text-olympia-strong " + item.icon}></i>
+            <div class="col">
+              <i className={"text-olympia " + item.icon}></i>
             </div>
           </div>
           <div class="row">
-            <div class="col-sm-12">
+            <div class="col">
               <p className="text-smoke-strong text-center">{item.text}</p>
             </div>
           </div>
@@ -52,7 +52,7 @@ class Header extends React.Component {
         <div class="container">
           <div class="row">
             <div class="col-lg-12">
-              <h1 className="font-subtitle text-center text-navy font-weight-bold">¿Qué hacemos?</h1>
+              <h1 className="font-subtitle text-center text-dark font-weight-bold">¿Qué hacemos?</h1>
             </div>
           </div>
         </div>

web-app/src/components/Blog/Blog.css

@@ -10,8 +10,9 @@
 }
 
 .Blog .card {
-  margin: 5vh;
+  /* margin: 5vh; */
   border-style: outset;
+  border-block-color: black;
 }
 
 .Blog .btn-primary {
@@ -22,3 +23,20 @@
   border-color: white;
   background-color: rgba(0,0,128,.3);
 }
+
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575.98px) {
+  .Blog {
+    background: linear-gradient(120deg, #461442,#49b9ff, #e6e7ee, #e6e7ee, #49b9ff,#461442);
+  }
+  .Blog .card {
+    margin-bottom: 10px;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+  .Blog .card {
+    margin: 10px;
+  }
+}

web-app/src/components/Carousel/Carousel.css

@@ -1,18 +1,26 @@
 .Carousel .carousel-img {
   height: 50vh;
   width: auto;
-  margin-bottom: 10vh;
+  margin-bottom: 0;
+  margin-top: 20px;
 }
 
-.Carousel .carousel-control-next .carousel-control-next-icon,
-.Carousel .carousel-control-prev .carousel-control-prev-icon {
-  position: relative;
-}
+.Carousel .carousel-control-next {
+  right: -15%;
+  border-radius: 50%;
+  height: 100px;
+  width: 100px;
+  top: 36%;
+} 
 
-.Carousel .carousel-control-next .carousel-control-next-icon {
-  left: 5vw;
+.Carousel .carousel-control-prev {
+  left: -20%;
+  border-radius: 50%;
+  height: 100px;
+  width: 100px;
+  top: 36%;
 }
 
-.Carousel .carousel-control-prev .carousel-control-prev-icon {
-  right: 7vw;
-}
+.Carousel .card {
+  margin: 10px;
+}

web-app/src/components/Carousel/Carousel.js

@@ -26,11 +26,11 @@ class Carousel extends React.Component {
           <div className="carousel-inner row">
             { this.state.carouselImages }
           </div>
-          <a className="carousel-control-prev" href={ "#" + this.props.carouselId } role="button" data-slide="prev" onClick={(e) => this.props.isMultipleCarousel ? this.props.showPrevElement() : null }>
-            <span className="carousel-control-prev-icon" aria-hidden="true"></span>
+          <a className="carousel-control-prev bg-pink-yarrow-light" href={ "#" + this.props.carouselId } onClick={(e) => this.props.isMultipleCarousel ? this.props.showPrevElement() : null }>
+            <span className="carousel-control-prev-icon" role="button" data-slide="prev" aria-hidden="true"></span>
             <span className="sr-only">Previous</span>
           </a>
-          <a className="carousel-control-next" href={ "#" + this.props.carouselId } role="button" data-slide="next" onClick={(e) => this.props.isMultipleCarousel ? this.props.showNextElement() : null} >
+          <a className="carousel-control-next bg-pink-yarrow-light" href={ "#" + this.props.carouselId } role="button" data-slide="next" onClick={(e) => this.props.isMultipleCarousel ? this.props.showNextElement() : null} >
             <span className="carousel-control-next-icon" aria-hidden="true"></span>
             <span className="sr-only">Next</span>
           </a>