Home screen base design

5 files changed, 48 insertions, 104 deletions

diff --git a/client/button.js b/client/button.js
index 11b9dac..525bbbf 100644
--- a/client/button.js
+++ b/client/button.js
@@ -6,7 +6,7 @@ Template.layout.events({
 })
 
 Template.login.events({
-  'click .login-instagram': function (event) {
+  'click button.login': function (event) {
     Meteor.loginWithInstagram({}, function (err) {
       if (err)
         Session.set('errorMessage', err.reason || 'Unknown error');
diff --git a/client/colors.css b/client/colors.css
deleted file mode 100644
index db0e6f8..0000000
--- a/client/colors.css
+++ /dev/null
@@ -1,98 +0,0 @@
-/* Base styles */
-.login-instagram {
-  font-size: 1.2em;
-  font-family: sans-serif;
-  color:#333;
-	text-shadow:1px 1px #fff;
-	text-decoration: none;
-	display:inline-block;
-	padding:0.5em 1.75em 0.5em 1em;
-	border-radius: 0.25em;
-	background: #f8f8f8;
-	border:1px solid #ccc;
-	border-right:0.25em solid #00558D; /* blue stripe */
-	position: relative;
-	margin:0 0 1px;
-}
-
-.login-instagram:before, .login-instagram:after {
-	content:'';
-	display:block;
-	position: absolute;
-}
-
-/* Add Stripes */
-.login-instagram:before {
-	width:0.25em;
-	height: 100%;
-	background:#FBB03B; /* yellow stripe */
-	border-left:0.25em solid #D4145A; /* red stripe */
-	border-right:0.25em solid #00A99D; /* green stripe */
-	top:0;
-	right:0;
-}
-
-/* Add Hightlights */
-.login-instagram:after {
-	width:100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	border-radius: 0.25em;
-	padding-left: 0.25em;
-	box-shadow: inset 1px 1px 0px rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.1);
-
-background: -moz-linear-gradient(top,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.35)), color-stop(49%,rgba(255,255,255,0.2)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1)));
-background: -webkit-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
-background: -o-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
-background: -ms-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
-background: linear-gradient(to bottom,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#1a000000',GradientType=0 );
-
-}
-
-
-/* Animate - Fade */
-.login-instagram, .login-instagram:before {
-    -webkit-transition-property: background, border;
-    -webkit-transition: 0.1s ease-in;
-    -moz-transition-property: background, border;
-    -moz-transition: 0.1s ease-in;
-    -o-transition-property: background, border;
-    -o-transition: 0.1s ease-in;
-    transition-property: background, border;
-    transition: 0.1s ease-in;
-
-}
-
-/* Hover / Focus */
-.login-instagram:hover, .login-instagram:focus  {
-	background: #fff;
-}
-
-.login-instagram:hover {
-	border-right:0.25em solid #09c;
-}
-
-.login-instagram:hover:before {
-	background:#fc6; /* yellow stripe */
-	border-left:0.25em solid #f06; /* red stripe */
-	border-right:0.25em solid #0cc; /* green stripe */
-}
-
-.login-instagram:hover:after {
-background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(49%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.05)));
-background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
-background: -o-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
-background: -ms-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
-background: linear-gradient(to bottom,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#0d000000',GradientType=0 );
-
-}
-
-/* Active */
-.login-instagram:active {
-	margin:1px 0 0;
-}
diff --git a/client/colors.less b/client/colors.less
new file mode 100644
index 0000000..87fe959
--- /dev/null
+++ b/client/colors.less
@@ -0,0 +1,37 @@
+body {
+  .page {
+    div.login-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: auto;
+      min-height: 1000px;
+      div.login {
+        text-align: center;
+        flex: 0 0 auto;
+        h1 {
+          color: #67C288;
+          font-size: 6em;
+          font-weight: bold;
+        }
+        h2 {
+          margin-top: 80px;
+          font-size: 3.3em;
+          font-weight: bold;
+        }
+        button.login {
+          margin-top: 100px;
+          color: #fff;
+          font-size: 2.8em;
+          background-color: #67C288;
+          padding: 7px 35px;
+          border: 0px;
+          line-height: 72px;
+          &:hover, &:active {
+            background-color: #5DA577;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/client/templates/layout.html b/client/templates/layout.html
index 8fb5d07..2798e7d 100644
--- a/client/templates/layout.html
+++ b/client/templates/layout.html
@@ -1,7 +1,7 @@
 <template name="layout">
-  <div class="container">
-    <button class="logout">logout</button>
-    <hr>
+  <div class="container page">
+    <!-- <button class="logout">logout</button>
+    <hr> -->
 {{> yield}}
   </div>
 </template>
diff --git a/client/templates/login.html b/client/templates/login.html
index 1f42513..79d7f7e 100644
--- a/client/templates/login.html
+++ b/client/templates/login.html
@@ -1,4 +1,9 @@
 <template name="login">
-  <h2>Welcome</h2>
-  <button class="login-instagram">Sign in with Instagram</button>
+  <div class="login-wrapper">
+    <div class="login">
+      <h1>Hello!</h1>
+      <h2>To start the process of creating your own unique icon you'll need to login thru your Instagram account</h2>
+      <button class="login">Sign in with Instagram</button>
+    </div>
+  </div>
 </template>