Some more work on the landing page

shageman · Sep 15, 2012 · f6e90dd · f6e90dd
1 parent bab873c
commit f6e90dd
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 11 deletions.
diff --git a/engines/teaser/app/assets/stylesheets/teaser/teaser.css.scss b/engines/teaser/app/assets/stylesheets/teaser/teaser.css.scss
@@ -7,6 +7,7 @@
 $lightgreen: #e4e8ae;
 $browngreen: #786f27;
 $gray: #b5acad;
+$darkgray: #424343;
 $midgreen: #cfcb65;
 $darkgreen: #758559;
 
@@ -16,33 +17,78 @@ $darkgreen: #758559;
  * Thanks to css easy!
  */
 
+@import url(http://fonts.googleapis.com/css?family=Lilita+One);
+
+* {
+  font-family: 'Lilita One', cursive;
+}
+
 body {
-  background-color: #dc8;
+  background-color: $midgreen;
   font-size: 16px;
   margin: 0;
   padding: 0;
 }
 
 #header {
-  background-color: #333;
+  background-color: $browngreen;
-  height: 150px;
+  height: 90px;
+  padding: 50px;
+  font-size: 80px;
+  text-align: center;
+  color: #fff;
+  text-shadow: black 0.05em 0.05em 0.05em;
 }
 
 #top {
   width: 100%;
-  background-color: #dc8;
+  background-color: $midgreen;
   height: 50px;
 }
 
 #center {
-  background-color: #eec;
+  background-color: $lightgreen;
   min-height: 600px; /* for modern browsers */
   height: auto !important; /* for modern browsers */
   height: 600px; /* for IE5.x and IE6 */
+  text-align: center;
+  color: #fff;
 }
 
 #footer {
   clear: both;
-  background-color: #333;
+  background-color: $browngreen;
-  height: 100px;
+  height: 200px;
 }
+
+#content {
+  font-size: 28px;
+  padding: 80px 0px;
+  text-align: center;
+  color: $darkgray;
+  p {
+    line-height: 28px;
+  }
+  input {
+    background-color: white;
+    border: 1px solid $gray;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+    display: inline-block;
+    height: 20px;
+    width: 200px;
+    padding: 4px 6px;
+    margin-top: 20px;
+    margin-bottom: 9px;
+    font-size: 14px;
+    line-height: 20px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+  }
+}
diff --git a/engines/teaser/app/views/layouts/teaser/application.html.erb b/engines/teaser/app/views/layouts/teaser/application.html.erb
@@ -13,8 +13,13 @@
 <div id="top">
   <%= content_for :top %>
 </div>
+<a href="https://github.com/shageman/the_next_big_thing">
+  <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
+</a>
 <div id="center">
-  <%= yield %>
+  <div id="content">
+    <%= yield %>
+  </div>
 </div>
 <div id="footer">
   <%= content_for :footer %>

diff --git a/engines/teaser/app/views/teaser/tease/index.html.haml b/engines/teaser/app/views/teaser/tease/index.html.haml
@@ -1,4 +1,9 @@
 -content_for :header do
-  The next big Thing
+  The Next Big Thing
 
-%p Find nothing out about it right here!
+%p Find nothing out about it right here!
+
+%p Also: sign up to receive our updates
+
+%form
+  %input
diff --git a/spec/requests/home_page_spec.rb b/spec/requests/home_page_spec.rb
@@ -8,7 +8,7 @@
 
   scenario "The Homepage" do
     visit "/"
-    page.should have_content("The next big Thing")
+    page.should have_content("The Next Big Thing")
     page.should have_content("Find nothing out about it right here!")
   end
 end