workflow for dev/prod

Author: anibalsolon

README.md

@@ -1,20 +1,26 @@
 # Project Website
 
 ## Description
-Descartaê is the easiest way to correctly discard your wastes, and this is the project Website :)
+Descartaê is the easiest way to correctly discard your wastes, and this is its Website :)
 
-## ParcelJS
-This project is using ParceJS the blazing fast, zero configuration web application bundler. You must have ParcelJS (https://parceljs.org) installed to build and run the project correctly.
+## Running
+This project is based on [npm](https://www.npmjs.com/)/[yarn](https://yarnpkg.com/) package manager. Just follow these steps to get it running on your machine!
 
-**1 - install Parcel using Yarn or npm**
+**1 - Install Dependencies**
 
-Yarn: `yarn global add parcel-bundler`
-npm: `npm install -g parcel-bundler`
+Yarn: `yarn`
+npm: `npm install`
 
-**2 - run the project**
+**2 - Running**
 
-`parcel index.html`
+Yarn: `yarn start`
+npm: `npm start`
 
-It will be available at: http://127.0.0.1:1234/
+The website will be available at: http://127.0.0.1:1234/
 
-PS: Remember to run `npm install` at the root of the project before run the project.
+**3 - Preparing for deploy**
+
+Yarn: `yarn run build`
+npm: `npm run build`
+
+It will generate a `dist` folder, with the website ready for production.

css/style.css

@@ -1,6 +1,8 @@
+
 @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+
 body {
-    font-family: 'Signika', sans-serif;    
+    font-family: 'Signika', sans-serif;
 }
 p {
     font-family: 'Signika', sans-serif;
@@ -15,7 +17,7 @@ p {
 }
 
 @media (min-width: 768px) {
-  .break-1250 {    
+  .break-1250 {
     width: 100%;
     height: 20px;
   }
@@ -36,7 +38,7 @@ p {
 .space-top {
   margin-top: 100px;
 }
-.btn-waitlist {  
+.btn-waitlist {
   padding-left: 20px;
   padding-right: 20px;
   height: 40px;
@@ -57,7 +59,7 @@ p {
   background: url("../img/bg-intro/[email protected]");
   background-position: bottom;
   background-repeat: no-repeat;
-  background-size: cover;  
+  background-size: cover;
 }
 .text-center {
   text-align: center;
@@ -69,22 +71,22 @@ p {
 .bg-intro p {
   color: #ffffff;
 }
-.bg-intro .input {    
-    min-width: 200px;    
+.bg-intro .input {
+    min-width: 200px;
 }
-.bg-intro button {    
+.bg-intro button {
     width: 100px;
 }
-.O-jeito-fcil-e-prt {  
+.O-jeito-fcil-e-prt {
   max-width: 400px;
-  text-shadow: 0 0.5px 10px rgba(0, 0, 0, 0.2);  
+  text-shadow: 0 0.5px 10px rgba(0, 0, 0, 0.2);
   line-height: 1.63;
   font-size: 32px;
   letter-spacing: 0px;
-  color: #ffffff;  
+  color: #ffffff;
   font-weight: 600;
 }
-.Encontre-os-pontos-d {    
+.Encontre-os-pontos-d {
   max-width: 400px;
   font-size: 16px;
   font-weight: normal;
@@ -104,20 +106,20 @@ p {
 .ss-image img {
   object-fit: contain;
   max-width:100%;
-  max-height:100%;  
+  max-height:100%;
   margin-top: 10px;
 }
-.types {    
+.types {
   padding-top: 63px;
   padding-bottom: 63px;
   background-color: #f6f6f6;
-  margin: auto;   
+  margin: auto;
   text-align: center;
 }
-.types-title {  
+.types-title {
   padding-left: 30px;
   padding-right: 30px;
-  margin: auto;  
+  margin: auto;
   font-size: 21px;
   font-weight: normal;
   font-style: normal;
@@ -127,9 +129,9 @@ p {
   text-align: center;
   color: #1b4855;
 }
-.type-name {     
-  margin: auto;    
-  font-family: 'Signika', sans-serif;  
+.type-name {
+  margin: auto;
+  font-family: 'Signika', sans-serif;
   font-size: 13px;
   font-weight: normal;
   font-style: normal;
@@ -145,36 +147,36 @@ p {
   }
   .project {
     display: block;
-  }  
+  }
   .mobile {
     display: none;
   }
 }
 @media (max-width: 768px) {
   .why {
     display: none;
-  }  
+  }
   .project {
     display: none;
   }
   .mobile {
     display: block;
   }
 }
-.why {    
+.why {
   padding-left: 40px;
   padding-right: 40px;
   padding-top: 63px;
   padding-bottom: 63px;
   background-color: #f6f6f6;
-  margin: auto;   
+  margin: auto;
   text-align: center;
 }
 .why img {
   width: 100%;
   height: 100%;
 }
-.why-title, .project-title {  
+.why-title, .project-title {
   font-size: 24px;
   font-weight: 600;
   font-style: normal;
@@ -188,13 +190,13 @@ p {
     width: 100%;
     height: 100%;
 }
-.project {    
+.project {
   padding-left: 40px;
   padding-right: 40px;
   padding-top: 63px;
   padding-bottom: 63px;
   background-color: #ffffff;
-  margin: auto;   
+  margin: auto;
   text-align: center;
 }
 .project-subtitle {
@@ -211,14 +213,14 @@ p {
   padding-left: 40px;
   padding-right: 40px;
 }
-.bg-foot {        
-  padding-top: 63px;  
+.bg-foot {
+  padding-top: 63px;
   background: url("../img/bg-footer.svg");
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
 }
-.foot-desc {    
+.foot-desc {
   font-size: 16px;
   font-weight: normal;
   font-style: normal;
@@ -266,7 +268,7 @@ p {
 #message {
     height: 120px;
 }
-.btn-send {  
+.btn-send {
   padding-left: 20px;
   padding-right: 20px;
   height: 40px;
@@ -283,7 +285,7 @@ p {
   color: #ffffff;
   background-image: linear-gradient(163deg, #7ccb0d, #13a42f);
 }
-.foot-copy {    
+.foot-copy {
   font-size: 14px;
   font-weight: normal;
   font-style: normal;

package.json

@@ -5,9 +5,16 @@
   "repository": "[email protected]:descartae/website.git",
   "author": "Herlon Aguiar <[email protected]>",
   "license": "MIT",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
   "dependencies": {
-    "bootstrap": "4.0.0",
+    "bootstrap": "4.0.0-beta.2",
     "jquery": "^3.3.1",
     "popper.js": "^1.12.9"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.2"
   }
 }