Merge branch 'feature/design_web_colors' into dev

HappyBots · Jul 14, 2016 · f0dcfa5 · f0dcfa5
2 parents 0c7b58d + 7f5f2ae
commit f0dcfa5
Show file tree

Hide file tree

Showing 30 changed files with 232 additions and 78 deletions.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/images/alexBg5.jpg b/app/images/alexBg5.jpg
diff --git a/app/images/alexIcoNoBorder.png b/app/images/alexIcoNoBorder.png
diff --git a/app/images/happybotsIco.png b/app/images/happybotsIco.png
diff --git a/app/images/hbIcoL.png b/app/images/hbIcoL.png
diff --git a/app/images/hbIcoM.png b/app/images/hbIcoM.png
diff --git a/app/images/hbIcoS.png b/app/images/hbIcoS.png
diff --git a/app/images/hbIcoWhite.png b/app/images/hbIcoWhite.png
diff --git a/app/images/hbIcoXL.png b/app/images/hbIcoXL.png
diff --git a/app/images/hbIcoXS.png b/app/images/hbIcoXS.png
diff --git a/app/images/hbIcoXXL.png b/app/images/hbIcoXXL.png
diff --git a/app/images/hbIcoXXS.png b/app/images/hbIcoXXS.png
diff --git a/app/images/wipBg2.png b/app/images/wipBg2.png
diff --git a/app/images/wipIco3.png b/app/images/wipIco3.png
diff --git a/app/index.html b/app/index.html
@@ -14,6 +14,12 @@
     <link rel="stylesheet" href="styles/main.css">
     <!-- endbuild -->
     <script src="https://use.fontawesome.com/b8df798ef0.js"></script>
+
+    <meta property="og:title" content="HAPPYBOTS" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="http://happybots.io" />
+    <meta property="og:image" content="http://happybots.io/images/hbIcoXXL.png" />
+
   </head>
   <body ng-app="happybotsApp">
     <!--[if lte IE 8]>
@@ -27,7 +33,6 @@
 
     <div ng-view=""></div>
 
-    <bot-bar></bot-bar>
 
 
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->

diff --git a/app/scripts/services/botsdata.js b/app/scripts/services/botsdata.js
@@ -14,8 +14,8 @@ angular.module('happybotsApp')
       id: "alex",
       description: "A Wikipedia bot for messenger",
       imageSrc:"images/alex.png",
-      imageBgSrc:"images/alexBg.jpg",
-      icoSrc:"images/alexIco.png",
+      imageBgSrc:"images/alexBg5.jpg",
+      icoSrc:"images/alexIcoNoBorder.png",
       messengerUrl: "https://m.me/1753699528246555",
       githubUrl: "https://github.com/patriciamayo/wikiMessenger"
     },

diff --git a/app/styles/_about.scss b/app/styles/_about.scss
@@ -2,26 +2,75 @@
 
 	margin-top: $navbar-height;
 	text-align: center;
-	margin: auto;
+
+	 h1, h2, h3, h4, p {
+      color: #333;
+    }
+
+		h2 {
+			margin-bottom: 35px;
+		}
+
+		h4 {
+			font-weight: 300;
+			margin-top: 20px;
+			margin-bottom: 20px;
+			font-size: 2rem;
+		}
+
+    img {
+    	display: block;
+    	margin: 0 auto;
+    }
+
+    .center {
+    	display: block;
+    	margin: 0 auto;
+    }
 
 
 	.colored-block {
 		width: 100%;
-		padding: 30px 0px;
+		padding-top: 100px;
+		padding-bottom: 90px;
+		padding-left: 0;
+		padding-right: 0;
 		color:#fff;
 	}
 
-	.purple{
-		background:purple;
+	.white{
+		background: white;
 	}
 
-	.green{
-		background:green;
+	.grey{
+		background: $gray-lighter;
 	}
 
 	.blue{
 		background:blue;
 	}
 
+	.block {
+		margin-top: $navbar-height;
+		margin-bottom: $navbar-height;
+	}
+
+	.text-block {
+		text-align: center;
+	}
+
+	.love {
+		color: $red !important;
+	}
+
+
+	.about-logo {
+		height:150px;
+		width: 150px;
+	}
+
+	.team-section {
+		padding-bottom: 130px;
+	}
 
 }
diff --git a/app/styles/_bot.scss b/app/styles/_bot.scss
@@ -1,7 +1,8 @@
+
 .bot {
 
     h1, h2 {
-      color: #fff;
+      color: #333;
     }
 
     h1 {
@@ -18,5 +19,18 @@
       width: 20px;
     }
 
+    min-height: 100vh;
+
+}
+
+
+@media (max-width: $screen-sm-min) {
+
+  .bot {
+      h1 {
+        text-transform: uppercase;
+        font-size: 3rem;
+      }
+  }
 
 }
diff --git a/app/styles/_botbar.scss b/app/styles/_botbar.scss
@@ -2,7 +2,7 @@ footer {
   position: fixed;
   bottom: 0;
   width: 100%;
-  border-bottom: 40px solid #fff;
+  border-bottom: 40px solid $accent;
 }
 
 .botbar {

diff --git a/app/styles/_flexbox.scss b/app/styles/_flexbox.scss
@@ -1,12 +1,26 @@
-.center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
+@media (min-width: $screen-sm-min) {
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  }
+
+  .vcenter {
+      display: inline-block;
+      vertical-align: middle;
+      float: none;
+  }
+
 }
 
-.vcenter {
-    display: inline-block;
-    vertical-align: middle;
-    float: none;
+@media (max-width: $screen-sm-min) {
+
+  .center, .text-block {
+    text-align: center !important;
+  }
+
+
+
 }
diff --git a/app/styles/_global.scss b/app/styles/_global.scss
@@ -1,3 +1,29 @@
 .cursor-link {
   cursor:pointer;
 }
+
+.logo {
+	height: 40px;
+	margin-right: 5px;
+	margin-top: 5px;
+  float: left;
+  padding-left: 10px;
+}
+
+
+
+.text-block {
+				margin-top: 30px;
+				margin-bottom: 30px;
+				text-align: justify;
+				font-size: 2rem;
+}
+
+.love {
+	color: $red !important;
+}
+
+
+.btn {
+  margin-bottom: 5px;
+}
diff --git a/app/styles/_socialbuttons.scss b/app/styles/_socialbuttons.scss
@@ -3,6 +3,25 @@
     padding-left: 0;
 }
 
+.parent-center  {
+    .social { text-align: center; }
+    .social ul { display:inline-table; }
+    .social li { display:inline; }
+}
+
+
+
+
+@media (max-width: $screen-sm-min) {
+
+  .social-center {
+    .social { text-align: center; }
+    .social ul { display:inline-table; }
+    .social li { display:inline; }
+    margin-bottom: 100px;
+  }
+
+}
 
 .social {
    ul {

diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
@@ -15,6 +15,9 @@ $gray:                   lighten($gray-base, 33.5%) !default; // #555
 $gray-light:             lighten($gray-base, 46.7%) !default; // #777
 $gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
 $red:                   #ED5565;
+$accent: 					#06a8e1;
+$accent-secondary: #25c079;
+
 
 $brand-primary:         #0084ff !default; // #337ab7
 $brand-success:         #5cb85c !default;
@@ -33,7 +36,7 @@ $body-bg:               #fff !default;
 $text-color:            $gray-dark !default;
 
 //** Global textual link color.
-$link-color:            $brand-primary !default;
+$link-color:            $accent !default;
 //** Link hover color set via `darken()` function.
 $link-hover-color:      darken($link-color, 15%) !default;
 //** Link hover decoration.
@@ -370,12 +373,14 @@ $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
 $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
 $navbar-collapse-max-height:       340px !default;
 
-$navbar-default-color:             #777 !default;
-$navbar-default-bg:                #f8f8f8 !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+//$navbar-default-color:             #777 !default;
+$navbar-default-color:             $accent-secondary !default;
+//$navbar-default-bg:                #f8f8f8 !default;
+$navbar-default-bg:                $accent-secondary !default;
+$navbar-default-border:            $accent-secondary !default;
 
 // Navbar links
-$navbar-default-link-color:                #777 !default;
+$navbar-default-link-color:                #ffffff !default;
 $navbar-default-link-hover-color:          #333 !default;
 $navbar-default-link-hover-bg:             transparent !default;
 $navbar-default-link-active-color:         #555 !default;

diff --git a/app/styles/_wip.scss b/app/styles/_wip.scss
@@ -1,14 +1,10 @@
 .wip {
 
-		h2 {
-	      margin-bottom: 30px;
-				text-transform: uppercase;
-				font-size: 4rem;
-	    }
+			h2 {
+		      margin-bottom: 30px;
+					font-size: 3rem;
+		    }
 
-			h3 {
-				font-size: 3rem;
-			}
 
 			.text-block {
 				margin-top: 30px;
@@ -66,3 +62,15 @@
 
 
 }
+
+
+@media (max-width: $screen-sm-min) {
+
+  .wip {
+      h2 {
+        font-size: 2rem;
+      }
+
+  }
+
+}