updating layout to latest comp.

karledurante · Oct 18, 2012 · 2eb4a9e · 2eb4a9e
1 parent 6fe61fb
commit 2eb4a9e
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 114 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -54,37 +54,32 @@ p {
 }
 
 .header {
-  background-color: $red;
-  color: $white;
-  height : 40px;
+  height : 50px;
   width: 100%;
+  border-bottom: 3px solid $orange;
   margin: 0 0 25px 0;
-}
 
-.logo {
-  padding: 10px;
-  margin-right: auto; margin-left: auto; width: 980px;
-}
+  .inner_header {
+    padding: 10px;
+    margin-right: auto; margin-left: auto; width: 980px;
+    color: $orange;
 
-.content {
-  margin-right: auto; margin-left: auto; width: 980px;
-}
+    .logo {
+      width: 100px;
+      float: left;
+    }
 
-.left_column {
-  width: 620px;
-  float: left;
-  margin-bottom: 20px;
-}
+    .share {
+      width: 300px;
+      float: right;
+      text-align: right;
+      padding-right: 60px;
+    }
 
-.right_column {
-  width: 300px;
-  float: left;
-  margin-left: 20px;
-  margin-bottom: 20px;
+  }
 }
 
-.reset_columns {
-  clear: both;
-  margin: 10px 0 0 0;
-  height: 10px;
+
+.content {
+  margin-right: auto; margin-left: auto; width: 980px;
 }
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
@@ -1,54 +1,67 @@
 @import "colors";
 
+.design_column {
+  width: 500px;
+  float: left;
+  margin-bottom: 20px; 
+  margin-top: 15px;
+}
+
+.intro_column {
+  width: 360px;
+  float: left;
+  margin-left: 40px;
+  margin-bottom: 20px;
+}
+
 .intro_graphic {
   margin-top: 1em;
 }
 
 .goal {
-  border-radius: 2px;
-  background-color: $grey;
-  padding: 20px;
-  margin: 30px 0 15px;
+  margin: 30px 0;
+  padding: 20px 0;
+  border-top: solid 1px $grey;
+  border-bottom: solid 1px $grey;
 
   h1, h2 {
     color: $brown;
   }
 
   .sold {
     float: left;
-    width: 130px;
+    width: 180px;
   }
 
-  .days_left {
+  .progress {
     float: left;
-    margin-left: 35px;
   }
 
   .reset {
     clear: both;
   }
 
   .meter {
-    margin: 20px 0 10px;
+    margin: 20px 0 5px;
     border-radius: 7px; 
-    border: 2px solid $red;
-    background-color: $white;
-    height: 15px;
+    background-color: $grey;
+    height: 12px;
 
     .fill {
       background-color: $red;
-      border-radius: 3px;
-      height: 15px;
+      border-radius: 7px 0 0 7px;
+      height: 12px;
     }
   }
 }
 
 .buy {
-  border-radius: 2px;
-  background-color: $red;
-  padding: 1em;
-  margin: 15px 0;
-  color: $white;
+  border-radius: 4px;
+  background-color: $blue;
+  padding: 25px;
+  margin: 25px;
+  color: white;
+  text-align: center;
 
   &:hover {
     color: $dark_red;
@@ -57,38 +70,63 @@
 
   h1, h2 {
     color: $white;
+    font-size: 36px;
+    text-shadow: $grey 0.1em;
 
     &:hover {
-      color: $dark_red;
+      color: $grey;
       cursor: pointer;
     }
   }
 
-  .cost {
-    float: left;
-    width: 85px;
-  }
-
-  .product {
-    float: left;
-  }
-
-  .reset {
-    clear: both;
-  }
-
   .purchase {
     text-align: center;
   } 
 }
 
-
 .shirt_design {
   text-align: center;
   display: block;
-  margin: 5px 0 20px 0
+  margin: 5px 0;
+}
+
+.thumbnails {
+  text-align: center;
 }
 
 .thumbnail {
-  padding: 0 5px 0 5px;
+  padding: 0 3px;
+  width: 110px;
+}
+
+.reset_columns {
+  clear: both;
+  height: 5px;
+}
+
+.about_header {
+  margin: 5px 0 0 0;
+  border-radius: 2px;
+  height: 20px;
+  width: 900px;
+  padding: 5px 15px;
+  font-size: 18px;
+  background-color: $orange;
+  color: $white;
+  font-weight: 300;
+  font-family: museo-slab,Tahoma,sans-serif;
+}
+
+.about_column {
+  width: 360px;
+  float: left;
+  margin-bottom: 20px; 
+  margin-top: 15px;
+}
+
+.group_column {
+  width: 520px;
+  float: left;
+  margin-left: 40px;
+  margin-bottom: 20px;
 }
diff --git a/app/views/home/_buy_now.html.erb b/app/views/home/_buy_now.html.erb
@@ -0,0 +1,31 @@
+<div class="buy">
+  <h1>Buy Now</h1>
+
+  <div class="purchase" style="display:none">
+    <a class="wepay-widget-button wepay-green" id="wepay_widget_anchor_50805c8b23472" href="https://www.wepay.com/stores/255710/item/891086">Checkout</a><script type="text/javascript">var WePay = WePay || {};WePay.load_widgets = WePay.load_widgets || function() { };WePay.widgets = WePay.widgets || [];WePay.widgets.push( {object_id: 891086,widget_type: "store_item_add_to_cart",anchor_id: "wepay_widget_anchor_50805c8b23472",widget_options: {store_id: 255710,show_item_price: false,show_item_images: false,button_text_sold_out: "Sold Out",show_item_custom_options: true,button_text: "Checkout"}});if (!WePay.script) {WePay.script = document.createElement('script');WePay.script.type = 'text/javascript';WePay.script.async = true;WePay.script.src = 'https://static.wepay.com/min/js/widgets.v2.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(WePay.script, s);} else if (WePay.load_widgets) {WePay.load_widgets();}</script>
+  </div>
+</div>
+<!-- <div class="buy">
+  <div class="cost">
+    <h1>$20</h1>
+  </div>
+  <div class="product">
+    <h2>Unisex T-Shirt</h2>
+  </div>
+  <div class="reset"></div>
+  <div class="purchase" style="display:none">
+    <a class="wepay-widget-button wepay-green" id="wepay_widget_anchor_507f2b3fe14bb" href="https://www.wepay.com/stores/255710/item/891086">Buy Now</a><script type="text/javascript">var WePay = WePay || {};WePay.load_widgets = WePay.load_widgets || function() { };WePay.widgets = WePay.widgets || [];WePay.widgets.push( {object_id: 891086,widget_type: "store_item_add_to_cart",anchor_id: "wepay_widget_anchor_507f2b3fe14bb",widget_options: {store_id: 255710,show_item_price: false,show_item_images: false,button_text_sold_out: "Sold Out",show_item_custom_options: true,button_text: "Buy Now"}});if (!WePay.script) {WePay.script = document.createElement('script');WePay.script.type = 'text/javascript';WePay.script.async = true;WePay.script.src = 'https://static.wepay.com/min/js/widgets.v2.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(WePay.script, s);} else if (WePay.load_widgets) {WePay.load_widgets();}</script>
+  </div>
+</div>
+<div class="buy">
+  <div class="cost">
+    <h1>$20</h1>
+  </div>
+  <div class="product">
+    <h2>Ladies T-Shirt</h2>
+  </div>
+  <div class="reset"></div>
+  <div class="purchase" style="display:none">
+    <a class="wepay-widget-button wepay-green" id="wepay_widget_anchor_507f2b33d63d3" href="https://www.wepay.com/stores/255710/item/627375">Buy Now</a><script type="text/javascript">var WePay = WePay || {};WePay.load_widgets = WePay.load_widgets || function() { };WePay.widgets = WePay.widgets || [];WePay.widgets.push( {object_id: 627375,widget_type: "store_item_add_to_cart",anchor_id: "wepay_widget_anchor_507f2b33d63d3",widget_options: {store_id: 255710,show_item_price: false,show_item_images: false,button_text_sold_out: "Sold Out",show_item_custom_options: true,button_text: "Buy Now"}});if (!WePay.script) {WePay.script = document.createElement('script');WePay.script.type = 'text/javascript';WePay.script.async = true;WePay.script.src = 'https://static.wepay.com/min/js/widgets.v2.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(WePay.script, s);} else if (WePay.load_widgets) {WePay.load_widgets();}</script>
+  </div>
+</div> -->
diff --git a/app/views/home/_design.html.erb b/app/views/home/_design.html.erb
@@ -0,0 +1,10 @@
+<div class="shirt_design">
+  <%= image_tag "shirt_design.jpg", :width => 500%>
+</div>
+
+<div class="thumbnails">
+  <span><%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %></span>
+  <span><%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %></span>
+  <span><%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %></span>
+  <span><%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %></span>
+</div>
diff --git a/app/views/home/_goal.html.erb b/app/views/home/_goal.html.erb
@@ -4,9 +4,9 @@
     shirts sold
   </div>
 
-  <div class="days_left">
-    <h1>15</h1>
-    days to go 
+  <div class="progress">
+    <h1>$600</h1>
+    dollars raised
   </div>
 
   <div class="reset"></div>

diff --git a/app/views/home/_intro.html.erb b/app/views/home/_intro.html.erb
@@ -0,0 +1,3 @@
+<p>It's Movember and time to make a difference.</p>
+<p>This year we are selling limited edition Tees to raise funds for men's health, specifically prostate and testicular cancer initiatives.  With a purchase, you are not only supporting a great cause but you also get a really cool T-shirt.</p>
+<p>Thanks,<br/>Team Stachesquatch</p>
diff --git a/app/views/home/_message.html.erb b/app/views/home/_message.html.erb
@@ -0,0 +1,7 @@
+<p>It's Movember and time to make a difference.</p>
+
+<p>Men's health is a cause we're passionate about. Our commitment is to grow a mustache for the month of November and by changing our appearance, raise vital awareness and funds men's health, specifically prostate and testicular cancer initiatives.</p>
+
+<p>This year we are selling a limited edition T-Shirt to raise funds. With a purchase, you are not only supporting a great cause, but you also get a really cool T-Shirt.</p>
+
+<p>Thanks,<br/>- Team Stachesquach</p>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,64 +1,28 @@
 <div class="column_span">
-  <!-- <h2>Movember</h2> -->
+  <h2>Movember</h2>
   <h1>Team Stachesquatch</h1>
 </div>
 
-<div class="left_column">
-  <div class="intro_graphic">
-    <%= image_tag "stachesquatch_2012.jpg", :width=> "620" %>
-  </div>
+<div class="design_column">
+  <%= render :partial => 'design' %>
 </div>
 
-<div class="right_column">
-  <p>It's Movember and time to make a difference.</p>
-
-  <p>Men's health is a cause we're passionate about. Our commitment is to grow a mustache for the month of November and by changing our appearance, raise vital awareness and funds men's health, specifically prostate and testicular cancer initiatives.</p>
-
-  <p>This year we are selling a limited edition T-Shirt to raise funds. With a purchase, you are not only supporting a great cause, but you also get a really cool T-Shirt.</p>
-
-  <p>Thanks,<br/>- Team Stachesquach</p>
+<div class="intro_column">
+  <%= render :partial => 'intro' %>
+  <%= render :partial => 'goal' %>
+  <%= render :partial => 'buy_now' %>
 </div>
 
-<div class="rest_columns">&nbsp;</div>
+<div class="reset_columns">&nbsp;</div>
 
-<div class="left_column">
-  <h2>American Apparel Jersey T-Shirt</h2>
-  <div class="shirt_design">
-    <%= image_tag "shirt_design.jpg"%>
-  </div>
+<div class="about_header">About</div>
 
-  <span class="thumbnail"><%= image_tag "thumbnail.jpg"%></span>
-  <span class="thumbnail"><%= image_tag "thumbnail.jpg"%></span>
-  <span class="thumbnail"><%= image_tag "thumbnail.jpg"%></span>
-  <span class="thumbnail"><%= image_tag "thumbnail.jpg"%></span>
+<div class="about_column">
+    <%= render :partial => 'message' %>
 </div>
 
-<div class="right_column">
-
-  <%= render :partial => 'goal' %>
-
-  <div class="buy">
-    <div class="cost">
-      <h1>$20</h1>
-    </div>
-    <div class="product">
-      <h2>Unisex T-Shirt</h2>
-    </div>
-    <div class="reset"></div>
-    <div class="purchase" style="display:none">
-      <a class="wepay-widget-button wepay-green" id="wepay_widget_anchor_507f2b3fe14bb" href="https://www.wepay.com/stores/255710/item/891086">Buy Now</a><script type="text/javascript">var WePay = WePay || {};WePay.load_widgets = WePay.load_widgets || function() { };WePay.widgets = WePay.widgets || [];WePay.widgets.push( {object_id: 891086,widget_type: "store_item_add_to_cart",anchor_id: "wepay_widget_anchor_507f2b3fe14bb",widget_options: {store_id: 255710,show_item_price: false,show_item_images: false,button_text_sold_out: "Sold Out",show_item_custom_options: true,button_text: "Buy Now"}});if (!WePay.script) {WePay.script = document.createElement('script');WePay.script.type = 'text/javascript';WePay.script.async = true;WePay.script.src = 'https://static.wepay.com/min/js/widgets.v2.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(WePay.script, s);} else if (WePay.load_widgets) {WePay.load_widgets();}</script>
-    </div>
-  </div>
-  <div class="buy">
-    <div class="cost">
-      <h1>$20</h1>
-    </div>
-    <div class="product">
-      <h2>Ladies T-Shirt</h2>
-    </div>
-    <div class="reset"></div>
-    <div class="purchase" style="display:none">
-      <a class="wepay-widget-button wepay-green" id="wepay_widget_anchor_507f2b33d63d3" href="https://www.wepay.com/stores/255710/item/627375">Buy Now</a><script type="text/javascript">var WePay = WePay || {};WePay.load_widgets = WePay.load_widgets || function() { };WePay.widgets = WePay.widgets || [];WePay.widgets.push( {object_id: 627375,widget_type: "store_item_add_to_cart",anchor_id: "wepay_widget_anchor_507f2b33d63d3",widget_options: {store_id: 255710,show_item_price: false,show_item_images: false,button_text_sold_out: "Sold Out",show_item_custom_options: true,button_text: "Buy Now"}});if (!WePay.script) {WePay.script = document.createElement('script');WePay.script.type = 'text/javascript';WePay.script.async = true;WePay.script.src = 'https://static.wepay.com/min/js/widgets.v2.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(WePay.script, s);} else if (WePay.load_widgets) {WePay.load_widgets();}</script>
-    </div>
+<div class="group_column">
+  <div class="intro_graphic">
+    <%= image_tag "stachesquatch_2012.jpg", :width=> "525" %>
   </div>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -21,7 +21,10 @@
 
 <div class ="body">
   <div class="header">
-    <div class="logo">Movember</div>
+    <div class="inner_header">
+      <div class="logo">[logo]</div>
+      <div class="share">Share: [T] [F] [P] </div>
+    </div>
   </div>
 
   <div class="content">