Make pangolin responsive

Author: ronellecaguioa

app/components/Home.tsx

@@ -5,8 +5,11 @@ import '../stylesheets/Home.scss';
 
 const Home = () => (
   <div className="home">
-    <img src={'../assets/pangolin.png'} alt="Chronos logo" />
-    <h1 id="welcome">Welcome to Chronos!</h1>
+    <div className="pangolin-container">
+      <img src={'../assets/pangolin.png'} alt="Chronos logo" />
+    </div>
+    <h1 id="welcome">Welcome to Chronos</h1>
+    <p>A very short short description about Chronos...</p>
     <Link className="get-started-btn" to="/applications">
       Get Started
     </Link>

app/stylesheets/Home.scss

@@ -1,24 +1,38 @@
+@import './constants.scss';
+
 .home {
   background-color: #f4f4f4;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: column;
-}
 
-.home img {
-  margin-top: 75px;
-  width: 400px;
-  height: auto;
-  animation: twirl 20s infinite linear;
-  transition: 0.3s ease-in;
-}
+  .pangolin-container {
+    margin-top: 65px;
+    height: auto;
+    width: 40%;
+    max-width: 650px;
+
+    img {
+      width: 100%;
+      animation: twirl 20s infinite linear;
+      transition: 0.3s ease-in;
+
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+  }
+
+  h1 {
+    font-size: 325%;
+    letter-spacing: 2px;
+  }
 
-.home h1 {
-  font-size: 325%;
-  letter-spacing: 2px;
-  margin: 0 0 15px;
+  p {
+    margin: 15px 0;
+  }
 }
 
 .get-started-btn {
@@ -40,15 +54,3 @@
 .get-started-btn:hover {
   background-color: #494fee;
 }
-
-.home img:hover {
-  filter: brightness(0.90);
-}
-@keyframes twirl {
-  from {
-    transform: rotateZ(0deg);
-  }
-  to {
-    transform: rotateZ(360deg);
-  }
-}

app/stylesheets/MainContainer.scss

@@ -6,6 +6,11 @@
   @include centerWithFlex(space-between);
   flex-direction: column;
 
+  .main-routes {
+    width: 100%;
+    height: 100%;
+  }
+
   .copyright-container {
     @include centerWithFlex();
     width: 100%;

app/stylesheets/constants.scss

@@ -17,4 +17,13 @@ $headergray: #dedede;
   100% {
     background-color: rgb(170, 1, 1);
   }
+}
+
+@keyframes twirl {
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(360deg);
+  }
 }