Changed team name to proper spelling, color and layout tweaks to matc…

…h comp. Glued in clickable thumbnails. Still need the proper images.

README.rdoc

@@ -1,3 +1,3 @@
-== Stachesquatch
+== Stachequatch
 
-Team Stachesquatch, Movember men.
+Team Stachequatch, Movember men.

app/assets/javascripts/application.js

@@ -21,4 +21,9 @@ $(function(){
   $('.buy').click(function() {
     $(this).find('.purchase').slideToggle("slow", function(){ });
   });
+
+  $('.thumbnails a').click(function() {
+    image_name = '/assets/shirt_design_' + $(this).attr('data') + '.jpg';
+    $('.shirt_design .fullsize').attr('src', image_name);
+  });
 })

app/assets/stylesheets/_colors.scss

@@ -11,6 +11,8 @@ $half_brown:  #A09086;
 $green:       #10c793;
 $yellow:      #fdfcb2;
 $grey:        #E9E3DC;
+$header_grey: #c7c8ca;
+$rule:        #e6e7e8;
 
 /* Other colors */
 $light_red:   adjust-lightness($red, 20);

app/assets/stylesheets/application.scss

@@ -28,7 +28,7 @@ body {
 
 h1, h2, h3 {
   font-family: museo-slab,Tahoma,sans-serif;
-  color: $orange;
+  color: $red;
   margin-bottom: 3px;
   margin-top: 0;
 }
@@ -66,15 +66,14 @@ p {
 }
 
 .header {
-  height : 60px;
+  height : 30px;
   width: 100%;
-  border-bottom: 3px solid $orange;
+  background-color: $header_grey;
   margin: 0 0 15px 0;
 
   .inner_header {
-    padding: 10px;
+    padding: 5px;
     margin-right: auto; margin-left: auto; width: $layout_size;
-    color: $orange;
 
     .logo {
       width: 100px;
@@ -85,7 +84,6 @@ p {
       width: 300px;
       float: right;
       text-align: right;
-      padding-top: 20px;
 
       .twitter {
         width: 80px;
@@ -113,8 +111,8 @@ p {
 
 .footer {
   width: 100%;
-  background-color: $red;
-  margin: 35px 0 4px;
+  background-color: $header_grey;
+  margin: 25px 0 4px;
 
   color: $white;
   font-size: 12px;

app/assets/stylesheets/home.scss

@@ -10,12 +10,17 @@
 .intro_column {
   width: 380px;
   float: left;
+  margin-top: 15px;
   margin-left: 40px;
   margin-bottom: 20px;
+
+  h3 {
+    color: $brown;
+  }
 }
 
 .intro_graphic {
-  margin-top: 1em;
+  margin-top: 60px;
 }
 
 .goal {
@@ -122,21 +127,30 @@
   height: 5px;
 }
 
-.about_header {
+.about_header, .about_footer {
   margin: 5px 0 0 0;
-  border-bottom: 2px solid $orange;
+  border-bottom: 2px solid $rule;
   width: 933px;
   font-size: 26px;
-  color: $orange;
+  color: $red;
   font-weight: 300;
   font-family: museo-slab,Tahoma,sans-serif;
 }
 
+.about_footer {
+  clear: both;
+  margin-bottom: 25px;
+}
+
 .about_column {
   width: 353px;
   float: left;
   margin-bottom: 20px; 
   margin-top: 15px;
+
+  h3 {
+    color: $brown;
+  }
 }
 
 .group_column {
@@ -146,14 +160,6 @@
   margin-bottom: 20px;
 }
 
-.about_footer {
-  clear: both;
-  height: 1px;
-  margin: 25px 0 45px 0;
-  width: 940px;
-  border-bottom: 1px solid $grey;
-}
-
 .service, .quality, .movember {
   width: 290px;
   float: left;

app/views/goals/edit.html.erb

@@ -1,4 +1,4 @@
-<h1>Update Stachesquatch Goals</h1>
+<h1>Update Stachequatch Goals</h1>
 
 <div style="margin-top: 25px;">
   <%= form_tag(goals_path) do %>

app/views/home/_buy_now.html.erb

@@ -1,31 +1,7 @@
 <div class="buy">
-  <h1>Buy Now</h1>
+  <h1>$25 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> -->
+</div>

app/views/home/_design.html.erb

@@ -1,10 +1,10 @@
 <div class="shirt_design">
-  <%= image_tag "shirt_design.jpg", :width => 513%>
+  <%= image_tag "shirt_design_one.jpg", :width => 513, :class=>"fullsize" %>
 </div>
 
 <div class="thumbnails">
-  <span><%= image_tag "thumbnail.jpg", :class => 'thumbnail' %></span>
-  <span><%= image_tag "thumbnail.jpg", :class => 'thumbnail' %></span>
-  <span><%= image_tag "thumbnail.jpg", :class => 'thumbnail' %></span>
-  <span><%= image_tag "thumbnail.jpg", :class => 'thumbnail last' %></span>
+  <%= link_to image_tag("thumbnail.jpg", :class => 'thumbnail'), "javascript:void(0);", :data => "one" %>
+  <%= link_to image_tag("thumbnail.jpg", :class => 'thumbnail'), "javascript:void(0);", :data => "two" %>
+  <%= link_to image_tag("thumbnail.jpg", :class => 'thumbnail'), "javascript:void(0);", :data => "three" %>
+  <%= link_to image_tag("thumbnail.jpg", :class => 'thumbnail last'), "javascript:void(0);", :data => "four" %>
 </div>

app/views/home/_footer.html.erb

@@ -1,58 +1,57 @@
-<% if branding_enabled? %>
-  <div class="service">
-    <div class="banner">
-      <%= image_tag "ci_logo_big.jpg" %>
-    </div>
-  </div>
-
-  <div class="quality">
-    <div class="banner">
-      <%= image_tag "sample_shirt.jpg" %>
-    </div>
-  </div>
 
-  <div class="movember">
-    <div class="banner">
-      <%= image_tag "mo_logo.jpg" %>
-    </div>
+<div class="service">
+  <div class="banner">
+    <%= image_tag "ci_logo_big.jpg" %>
   </div>
+</div>
 
-  <div class="reset_columns"></div>
-
-  <div class="service">
-    <h3>CustomInk Service</h3>
-    <p>CustomInk is printing and individually 
-  shipping our T-shirts to you with the 
-  same signature care used to serve their 
-  one million plus customers. They will  
-  batch print the shirts twice during the 
-  month of November and be delivered by 
-  the following dates.</p>
+<div class="quality">
+  <div class="banner">
+    <%= image_tag "sample_shirt.jpg" %>
   </div>
+</div>
 
-  <div class="quality">
-    <h3>Quality T-Shirts</h3>
-    <p>Our T-shirts are printed on American 
-  Apparel Products.  They are 
-  Contemporary, lightweight, stylish and 
-  made in the USA.</p>
-
-    <p>
-      <%= link_to 'Uni-sex sizing line-up', 'http://www.customink.com/items/sizing/15000_lineup/standard.htm', :target => "_new" %> <br/>
-      <%= link_to 'Ladies sizing line-up', 'http://www.customink.com/items/sizing/30000_lineup/standard.htm', :target => "_new" %>
-    </p>
+<div class="movember">
+  <div class="banner">
+    <%= image_tag "mo_logo.jpg" %>
   </div>
-
-  <div class="movember">
-    <h3>The Movember Effect</h3>
-    <p>Movember is responsible for the 
-  sprouting of moustaches on thousands 
-  of men’s faces, in the US and around the 
-  world. With their Mo's, these men raise 
-  vital awareness and funds for men's 
-  health issues</p>
-  <p><%=link_to "Learn More", "http://us.movember.com/mens-health/"%></p>
-  </div>
-
-  <div class="reset_columns">&nbsp;</div>
-<% end %>
+</div>
+
+<div class="reset_columns"></div>
+
+<div class="service">
+  <h3>Printing</h3>
+  <p>CustomInk is printing and individually 
+shipping our T-shirts to you with the 
+same signature care used to serve their 
+one million plus customers. They will  
+batch print the shirts twice during the 
+month of November and be delivered by 
+the following dates.</p>
+</div>
+
+<div class="quality">
+  <h3>Next Level T-shirts</h3>
+  <p>Our T-shirts are printed on American 
+Apparel Products.  They are 
+Contemporary, lightweight, stylish and 
+made in the USA.</p>
+
+  <p>
+    <%= link_to 'Uni-sex sizing line-up', 'http://www.customink.com/items/sizing/15000_lineup/standard.htm', :target => "_new" %> <br/>
+    <%= link_to 'Ladies sizing line-up', 'http://www.customink.com/items/sizing/30000_lineup/standard.htm', :target => "_new" %>
+  </p>
+</div>
+
+<div class="movember">
+  <h3>The Movember Effect</h3>
+  <p>Movember is responsible for the 
+sprouting of moustaches on thousands 
+of men’s faces, in the US and around the 
+world. With their Mo's, these men raise 
+vital awareness and funds for men's 
+health issues</p>
+<p><%=link_to "Learn More", "http://us.movember.com/mens-health/"%></p>
+</div>
+
+<div class="reset_columns">&nbsp;</div>

app/views/home/_intro.html.erb

@@ -1,5 +1,5 @@
-<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>
+<h3>Okay fellas - it's time to bring back the Stache.</h3>
+<p>This year you can grab a limited edition Team Stachequatch Tee to rally for the cause. Each purchase will not only help fund prostate and testicular research, but you'll also get a pretty sweet t-shirt.</p>
 <p>Thanks,<br/>
 <%= image_tag "signature.jpg"%>
 </p>

app/views/home/_message.html.erb

@@ -1,7 +1,9 @@
-<p>It's Movember and time to make a difference.</p>
+<h3>Team Stachequatch</h3>
 
-<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>Who are we, you ask? We are husbands, fathers, sons, and brothers. We are neighbors and friends. We take pride in our work and in our families, and each year we band together to raise awareness and funding for men’s health issues through the power of the moustache.</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>Join us this Movember to celebrate the moustache, a powerful symbol that stands strong in support of research and funding for prostate and testicular cancer.</p>
 
-<p><%=link_to "Check out our team page here", "http://us.movember.com/team/448725", :target => "_blank"%></p>
+<p>Whether you’re rocking the pencil, the cowboy, the handlebar, or the elusive walrus, it makes no difference - The Mo the better!</p>
+
+<p>Don't like the shirts?  You can <%=link_to "donate to Team Stachequatch directly", "http://us.movember.com/team/448725", :target => "_blank"%>.</p>

app/views/home/index.html.erb

@@ -1,6 +1,6 @@
 <div class="column_span">
   <h2>Movember</h2>
-  <h1>Team Stachesquatch</h1>
+  <h1>Team Stachequatch</h1>
 </div>
 
 <div class="design_column">
@@ -15,7 +15,7 @@
 
 <div class="reset_columns">&nbsp;</div>
 
-<div class="about_header">About</div>
+<div class="about_header">The Story</div>
 
 <div class="about_column">
     <%= render :partial => 'message' %>
@@ -27,6 +27,6 @@
   </div>
 </div>
 
-<div class="about_footer">&nbsp;</div>
+<div class="about_footer">About The Shirts</div>
 
 <%= render :partial => 'footer' %>