Add Tomster index page

data/tomsters.yml

@@ -0,0 +1,108 @@
+- title: Original Tomster
+  url: http://emberjs.com/
+  date: May 16, 2012
+  image: /images/tomsters/original.png
+- title: Salt Lake City Tomster
+  url: http://www.meetup.com/emberjs-slc/
+  date: September 25, 2014
+  image: /images/tomsters/slc.png
+- title: Seattle Tomster
+  url: http://www.meetup.com/Ember-js-Seattle-Meetup/
+  date: April 11, 2015
+  image: /images/tomsters/seattle.png
+- title: Philly Tomster
+  url: http://www.meetup.com/EmberJS-Philly/
+  date: March 13, 2015
+  image: /images/tomsters/philly.png
+- title: Munich Tomster
+  url: http://www.meetup.com/Ember-js-Munich/
+  date: June 16, 2014
+  image: /images/tomsters/munich.png
+- title: Montevideo Tomster
+  url: http://www.meetup.com/ember-montevideo/
+  date: April 25, 2015
+  image: /images/tomsters/montevideo.png
+- title: Louisville Tomster
+  url: http://www.meetup.com/Ember-js-Louisville
+  date: April 9, 2015
+  image: /images/tomsters/louisville.png
+- title: London Tomster
+  url: http://emberlondon.com/
+  date: July 14, 2014
+  image: images/tomsters/london.png
+- title: Jacksonville Tomster
+  url: http://www.meetup.com/EmberJax/
+  date: March 30, 2015
+  image: /images/tomsters/jacksonville.png
+- title: Houston Tomster
+  url: http://www.meetup.com/EmberJS-Houston/
+  date: March 16, 2015
+  image: /images/tomsters/houston.png
+- title: Dallas Tomster
+  url: http://www.meetup.com/Ember-Dallas/
+  date: April 20, 2015
+  image: /images/tomsters/dallas.png
+- title: Austin Tomster
+  url: http://www.meetup.com/Ember-ATX/
+  date: March 25, 2015
+  image: /images/tomsters/austin.png
+- title: BuiltWithEmber Tomster
+  url: http://builtwithember.io/
+  date: December 3, 2014
+  image: /images/tomsters/builtwith.png
+- title: Ember Sherpa
+  url: 
+  date: November 25, 2014
+  image: /images/tomsters/sherpa.png
+- title: Stable Release Bust
+  url: http://www.emberjs.com/builds
+  date: December 2, 2013
+  image: /images/tomsters/3-release.png
+- title: Canary Release Bust
+  url: http://www.emberjs.com/builds
+  date: December 2, 2013
+  image: /images/tomsters/1-canary.png
+- title: Beta Release Bust
+  url: http://www.emberjs.com/builds
+  date: December 2, 2013
+  image: /images/tomsters/2-beta.png
+- title: RFC Bust
+  url: 
+  date: February 26, 2015
+  image: /images/tomsters/0-rfc.png
+- title: Construction Tomster
+  url: 
+  date: March 24, 2013
+  image: /images/tomsters/construction.png
+- title: EmberCamp Tomster
+  url: 
+  date: December 21, 2012
+  image: /images/tomsters/embercamp.png
+- title: Fishy Tomster
+  url: http://emberjs.com/community/
+  date: November 17, 2012
+  image: /images/tomsters/fishy.png
+- title: Deprecated Tomster
+  url: 
+  date: March 24, 2013
+  image: /images/tomsters/deprecated.png
+- title: 5K Tomster
+  url: 
+  date: March 12, 2014
+  image: /images/tomsters/5k.png
+- title: EmberConf 2015
+  url: http://www.emberconf.com
+  date: November 17, 2014
+  image: /images/tomsters/kayaking.png
+- title: EmberConf 2014
+  url: http://www.emberconf.com
+  date: November 1, 2013
+  image: /images/tomsters/hanggliding.png
+- title: Teaching Tomster
+  url: 
+  date: January 14, 2013
+  image: /images/tomsters/teaching.png
+- title: Office Hours Tomster
+  url: 
+  date: March 25, 2013
+  image: /images/tomsters/officehours.png

source/javascripts/app/faq/faq-questions.js

@@ -0,0 +1,13 @@
+$(function() {
+  var faqQuestions = $('#faq-questions').find('li');
+
+  if (faqQuestions.length) {
+
+    faqQuestions.on('click', function(e){
+      e.preventDefault();
+      var answerAnchor = $(this).find('a').attr('href');
+      $('html, body').animate({ scrollTop:  $(answerAnchor).offset().top - 20 }, 'slow');
+    });
+  }
+
+});

source/stylesheets/site.css.scss

@@ -1546,6 +1546,132 @@ body.security #content {
   border-bottom: none;
 }
 
+/**
+  Tomster Page
+**/
+
+.tomster.section.intro {
+  margin: 3em auto 0;
+  width: 54em;
+  h1 {
+    text-align: center;
+  }
+}
+
+.tomster.section.list {
+  margin: 0 auto;
+
+  #tomster-list td {
+    padding: 20px;
+  }
+
+  .tomster-container {
+    border-radius: 2px;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  }
+
+  .tomster-image {
+    text-align: center;
+    width: 438px;
+    height: 438px;
+    padding: 30px;
+    // These next three lines control centering the Tomsters
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      margin-bottom: -4px; // Fixes 4px space below image
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+  .tomster-info {
+    @include clearfix;
+    padding: 12px;
+    height: 41px;
+    .title {
+      float: left;
+      font-size: 15px;
+      font-weight: bold;
+      font-family: 'Maven Pro';
+      text-transform: uppercase;
+    }
+    .date {
+      float: right;
+    }
+    p.not-yet-url {
+      // If the Tomster entry has no URL, this controls the formatting
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
+/**
+  Tomster FAQ Page
+**/
+
+body.tomster_faq #content {
+  margin: 3em auto 0 auto;
+  width: 54em;
+
+  h1, h1:first-child {
+    margin-top: 0;
+    padding-bottom: 20px;
+  }
+
+  .section {
+    width: auto;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+
+  hr {
+    height: 1px;
+    border: none;
+    margin: 2em 0;
+    background-color: #dfd7d4;
+  }
+
+  #back-to-top {
+    padding-left: 13px;
+    text-align: center;
+    display: none;
+    @include transition(opacity 0.05s linear);
+
+    @media screen and (max-width: 1200px) {
+      padding-left: 0px;
+      height: 20px;
+      width: 30px;
+      overflow: hidden;
+    }
+
+    @media screen and (max-width: 1020px) {
+      display: none !important;
+    }
+  }
+}
+
+.tomster-faq {
+  @include clearfix;
+  .left-col {
+    float: left;
+    width: 491px;
+  }
+  .right-col {
+    float: left;
+    width: 225px;
+    margin-left: 40px;
+    text-align: center;
+  }
+}
 
 /**
   Sponsors Page

source/tomster.html.erb

@@ -0,0 +1,43 @@
+---
+title: "Tomster"
+---
+
+<div class="tomster section intro">
+  <h1>The Tomster</h1>
+  <p>
+    Tomster is one of the friendly faces of the Ember project and community. Over the years we've dressed and redressed him for all sorts of fun projects and reasons.
+  <p>
+  <p>
+    The Tomster is a registered and protected trademark. These images may not be used without specific and explicit consent (which we aim never to hold back unreasonably). If you have questions about using or commissioning a Tomster, <a href="/tomster/faq">check out the FAQ</a>.
+  </p>
+</div>
+
+<div class="tomster section list">
+  <table id="tomster-list">
+    <% data.tomsters.sort_by {|t| Date.parse(t.date) }.reverse.each_slice(2) do |slice| %>
+      <tr>
+        <% slice.each do |tomster| %>
+          <td>
+            <div class="tomster-container">
+              <div class="tomster-image">
+                <img src="<%= tomster.image %>">
+              </div>
+              <div class="tomster-info">
+                <% if tomster.url %>
+                <a href="<%= tomster.url %>" class="title">
+                  <%= tomster.title %>
+                </a>
+                <% else %>
+                  <p class="not-yet-url title"><%= tomster.title %></p>
+                <% end %>
+                <div class="date">
+                  <%= tomster.date %>
+                </div>
+              </div>
+            </div>
+          </td>
+        <% end %>
+      </tr>
+    <% end %>
+  </table>
+</div>

source/tomster/faq.html.erb

@@ -0,0 +1,47 @@
+---
+title: "Tomster FAQ"
+---
+
+<h1>Tomster FAQ</h1>
+
+<div id="back-to-top"><a id="back-top-top" href="#">&#11014; Back to Top</a></div>
+
+<div class="tomster-faq section faq">
+  <div class="left-col">
+    <ol id="faq-questions">
+      <li><a href="#product">Can I use the Tomster for my product/website/company/etc.?</a></li>
+      <li><a href="#avatar">Can I use it for my avatar/Twitter photo/OKCupid headshot/etc?</a></li>
+      <li><a href="#make">Can you make a Tomster that looks like [insert thing here]?</a></li>
+      <li><a href="#own">Can I make my own Tomster?</a></li>
+      <li><a href="#trademark">Do you own the Trademark to Ember and the Tomster?</a></li>
+      <li><a href="#original">Who designed the original Tomster?</a></li>
+    </ol>
+
+    <hr>
+
+    <h3 id="product">Can I use the Tomster for my product/website/<br>company/etc.?</h3>
+    <p>The Tomster is a registered trademark, and more importantly, a big part of our identity! He may not be used for any unofficial purposes without us granting a specific license.</p>
+    <p>There are processes whereby community efforts and user groups can commission specific Tomsters and be granted license to use them. It’s affordable and easy, but we’re picky about approvals. <a href="mailto:leah@emberjs.com">To learn more, reach out</a>.</p>
+
+    <h3 id="avatar">Can I use it for my avatar/Twitter photo/<br>OKCupid headshot/etc?</h3>
+    <p>See the previous question as well. Please do not use the Tomster for anything without specific permission. Besides: you’re lovely! And also (probably) not a hamster. You can find something better <3</p>
+
+    <h3 id="make">Can you make a Tomster that looks like [insert thing here]?</h3>
+    <p>Maybe! Ember is an open source project with little by way of funding, so for now, Tomsters are made as they’re needed, rather than any time a fun idea comes up (because trust us, there are LOTS of good ideas!). You’re welcome to toss us a note with an idea or request, but for right now, assume they’re designed by necessity only.</p>
+
+    <h3 id="own">Can I make my own Tomster?</h3>
+    <p>A big friendly and polite… absolutely not :p The Tomsers are all made in-house by a small number of official Tomster Designers we work directly with and trust to help us keep the brand and image in the right place. We’re very protective of him; please don’t customize, manipulate or otherwise commandeer our identity and assets.</p>
+
+    <h3 id="trademark">Do you own the Trademark to Ember and the Tomster?</h3>
+    <p>We do indeed!</p>
+
+    <h3 id="original">Who designed the original Tomster?</h3>
+    <p>The Tomster was originally designed by the fabulous <a href="http://lindsey.io/">Lindsey Wilson</a>, as part of a set of illustrations we had made for the first Ember website. From there he rapidly grew into the iconic Tomster you know today :) Lindsey has also designed something like 90% of the other Tomsters in existence.</p>
+    <p><a href="mailto:leah@emberjs.com">Contact Leah</a> for any Tomster-related questions or commission requests. If you want to hire Lindsey for non Ember related work, please do! She’s great. Really.</p>
+  </div>
+  <div class="right-col">
+    <img src="/images/tomster-faq.png" width="95%">
+  </div>
+</div>
+
+<script src="/javascripts/app/faq/faq-questions.js"></script>