Sign up page styling.

5 files changed, 137 insertions, 3 deletions

diff --git a/app/assets/images/utility-belt/logo.png b/app/assets/images/utility-belt/logo.png
new file mode 100644
index 0000000..2562726
--- /dev/null
+++ b/app/assets/images/utility-belt/logo.png
diff --git a/app/assets/stylesheets/custom.css.scss b/app/assets/stylesheets/custom.css.scss
index 8004595..5aba5f7 100644
--- a/app/assets/stylesheets/custom.css.scss
+++ b/app/assets/stylesheets/custom.css.scss
@@ -9,10 +9,10 @@ body {
 
 footer{
   background-color: $blue;
-  position: fixed;
   bottom: 0;
+  position: fixed;
   width: 100%;
-  padding: 20px 20px 220px;
+  padding: 20px 20px;
 
   .content{
     color: white;
@@ -26,12 +26,18 @@ footer{
 }
 
 h1#logo{
-
+  background: transparent url('/assets/utility-belt/logo.png') no-repeat 0 0;
+  width: 313px;
+  height: 86px;
+  text-indent: -9999px;
+  float:left;
+  margin-right: 50px;
 }
 
 h2 { font-size: 44px; line-height: 48px; color: #333;}
 
 .about {
+  margin: 54px 0 90px;
   font: 36px/48px "Helvetica Neue";
   font-weight: 200;
   color: #666;
@@ -39,3 +45,25 @@ h2 { font-size: 44px; line-height: 48px; color: #333;}
 .customers{ color: $blue; }
 .product{ color: $green; }
 .features{ color: $orange; }
+
+#new_sign_up{
+  label{
+    font-style: italic;
+    font-weight: 200;
+    color: #666;
+  }
+
+  .field{
+    float: left;
+    input[type="email"]{
+      width: 350px;
+    }
+    margin-right: 20px;
+  }
+  .actions{
+    float: left;
+    margin-top: 24px;
+  }
+  @include clearfix;
+}
+
diff --git a/app/assets/stylesheets/forms.css.scss b/app/assets/stylesheets/forms.css.scss
new file mode 100644
index 0000000..0b965fe
--- /dev/null
+++ b/app/assets/stylesheets/forms.css.scss
@@ -0,0 +1,46 @@
+@import "mixins.css.scss";
+
+input[type="email"], input[type="submit"]{
+  border-color: #79a8c4;
+  font-size: 24px;
+}
+
+input[type="email"]{
+  padding: 20px;
+  color: #bacdd8;
+  @include appearance(textfield);
+}
+
+::-webkit-input-placeholder { /* WebKit browsers */
+  margin-top: 3px;
+  color: #bacdd8;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  color: #bacdd8;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+  color: #bacdd8;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+  color: #bacdd8;
+}
+
+input[type="submit"] {
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  @include gradient(#B1DBAA, #8BC980);
+  @include border-radius(4px);
+  padding: 20px 73px;
+  border-color: #8BC980;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+input[type="submit"]:hover,
+input[type="submit"]:active,
+input[type="submit"].active,
+input[type="submit"].disabled,
+input[type="submit"][disabled] {
+  color: #FFFFFF;
+  background-color: #8BC980;
+  *background-color: #003bb3;
+}
diff --git a/app/assets/stylesheets/media-queries.css.scss b/app/assets/stylesheets/media-queries.css.scss
new file mode 100644
index 0000000..0f6a31d
--- /dev/null
+++ b/app/assets/stylesheets/media-queries.css.scss
@@ -0,0 +1,11 @@
+/* Large desktop */
+@media (min-width: 1200px) {}
+
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 979px) {}
+
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {}
diff --git a/app/assets/stylesheets/mixins.css.scss b/app/assets/stylesheets/mixins.css.scss
new file mode 100644
index 0000000..d69e5eb
--- /dev/null
+++ b/app/assets/stylesheets/mixins.css.scss
@@ -0,0 +1,49 @@
+@mixin border-box{
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+@mixin border-radius($pixels) {
+  -webkit-border-radius: $pixels;
+     -moz-border-radius: $pixels;
+      -ms-border-radius: $pixels;
+       -o-border-radius: $pixels;
+          border-radius: $pixels;
+}
+
+@mixin box-shadow($shadows...){
+  -webkit-box-shadow: $shadows;
+     -moz-box-shadow: $shadows;
+          box-shadow: $shadows;
+}
+
+@mixin appearance($appearance){
+  -webkit-appearance: $appearance;
+     -moz-appearance: $appearance;
+          appearance: $appearance;
+}
+
+@mixin gradient($top, $bottom){
+  background-color: $bottom;
+  *background-color: $bottom;
+  background-image: -moz-linear-gradient(top, $top, $bottom);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($top), to($bottom));
+  background-image: -webkit-linear-gradient(top, $top, $bottom);
+  background-image: -o-linear-gradient(top, $top, $bottom);
+  background-image: linear-gradient(to bottom, $top, $bottom);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$top', endColorstr='$bottom', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+@mixin clearfix {
+  &:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+  * html & { height: 1px }
+}