Update design

.gitignore

@@ -2,4 +2,4 @@
 .sass-cache/
 _site
 node_modules/
-config.json
+config.json

README.md

@@ -10,10 +10,10 @@ We use [Jekyll](https://jekyllrb.com/) to build [http://nodeschool.io/toronto](h
 
 We pull in event information through the [Tito](http://tito.io) embed widget but all the attendees listed are pulled via the [Tito API](http://api.tito.io). In order to update the listing of attendees, you'll have:
 
-- Request our Tito API key (ping @darcyclarke or @jeffjewiss)
+- Request our Tito API "auth_token" (ping @darcyclarke or @jeffjewiss)
 
-- Create a `config.json` in the root with the following: `{ "key": "..." }`
+- Create a `config.json` in the root with the following: `{ "auth_token": "..." }`
 
 - `npm install`
 
-- `npm update-attendees`
+- `npm update-attendees` or `node ./tasks/update-attendees.js`

_data/attendees.json

@@ -0,0 +1 @@
+{"attendees":[[70,"https://s.gravatar.com/avatar/4e7ccb3577b73a2112c73bb7ba9eb610?s=300&r=x&d=404",6],[27,"https://s.gravatar.com/avatar/aca08174f7ce8203fd410fcb3dd557f4?s=300&r=x&d=404",5],[8,"https://s.gravatar.com/avatar/053f853202971bf7a053e1fb06ef3af4?s=300&r=x&d=404",4],[56,"https://s.gravatar.com/avatar/2809958c874062ff6748dadb9f9c4635?s=300&r=x&d=404",4],[43,"https://s.gravatar.com/avatar/c1916eb0c06074a8c3a0980c0546ae72?s=300&r=x&d=404",4],[44,"https://s.gravatar.com/avatar/83ca0d1eb67810d08a131c46011d6fe4?s=300&r=x&d=404",4],[52,"https://s.gravatar.com/avatar/6f7e43a151cf595a4cf556522de834a7?s=300&r=x&d=404",4],[1,"https://s.gravatar.com/avatar/f62e2c4099d12f1afe5b50c7517a3f75?s=300&r=x&d=404",4],[50,"https://s.gravatar.com/avatar/20a7ec4297f08cb989e68579e314d8e7?s=300&r=x&d=404",3],[28,"https://s.gravatar.com/avatar/a3909727f88d33847348bf41dc505bd5?s=300&r=x&d=404",3],[9,"https://s.gravatar.com/avatar/474bbc7849086793b2bc5b4a8f0477dc?s=300&r=x&d=404",3],[55,"https://s.gravatar.com/avatar/12c59e256733bddc3bdfd5cae59377e0?s=300&r=x&d=404",3],[54,"https://s.gravatar.com/avatar/cdeb30656e42758451ad439c6fd0fa64?s=300&r=x&d=404",3],[80,"https://s.gravatar.com/avatar/95fd6a541a200a85402851b8d452249d?s=300&r=x&d=404",3],[4,"https://s.gravatar.com/avatar/11ff28188057a06109109868a6b8a336?s=300&r=x&d=404",3],[60,"https://s.gravatar.com/avatar/3797aff066747006a4099515ec639ac8?s=300&r=x&d=404",3],[0,"https://s.gravatar.com/avatar/f88eebeb31ede748638310d2ccb8460b?s=300&r=x&d=404",3],[48,"https://s.gravatar.com/avatar/ffe985a5dd6322247a295278a7113167?s=300&r=x&d=404",3],[49,"https://s.gravatar.com/avatar/72b5ef033e8fdfdad21a566c25339909?s=300&r=x&d=404",3],[21,"https://s.gravatar.com/avatar/fc903c29744a825ea03d77b47921b8c0?s=300&r=x&d=404",2],[3,"https://s.gravatar.com/avatar/e6f09a427373cfae82db027deb8bb913?s=300&r=x&d=404",2],[39,"https://s.gravatar.com/avatar/ee3f8fc54852fdfe7f4ab36a81330d20?s=300&r=x&d=404",2],[37,"https://s.gravatar.com/avatar/f6c80ba543da296a6eeec3860911d18d?s=300&r=x&d=404",2],[35,"https://s.gravatar.com/avatar/760116e0b522d00753dc45c347092c23?s=300&r=x&d=404",2],[24,"https://s.gravatar.com/avatar/56a9b09c05724c60f2e53fcc2057705c?s=300&r=x&d=404",2],[63,"https://s.gravatar.com/avatar/89fb065729be612abc1fafe572828448?s=300&r=x&d=404",2],[65,"https://s.gravatar.com/avatar/1fcce55bdf533ea724fe1b366ca3e0bc?s=300&r=x&d=404",2],[66,"https://s.gravatar.com/avatar/ba7ea308ef6bc5e4310b992f4da96e6c?s=300&r=x&d=404",2],[46,"https://s.gravatar.com/avatar/e04385989ddd433f5f62ce8f575f7384?s=300&r=x&d=404",2],[75,"https://s.gravatar.com/avatar/74fa9cc4dfe80e4eabc48450a696124b?s=300&r=x&d=404",2],[76,"https://s.gravatar.com/avatar/f06d014347c56f564423009275dfc925?s=300&r=x&d=404",2],[77,"https://s.gravatar.com/avatar/a483dcfb117c62c1eee917039aab632f?s=300&r=x&d=404",2],[79,"https://s.gravatar.com/avatar/54fa0e3264c061504253e857255b376a?s=300&r=x&d=404",2],[16,"https://s.gravatar.com/avatar/952cb6445eef79127aab12ca5ca1be8a?s=300&r=x&d=404",2],[81,"https://s.gravatar.com/avatar/d81fd2ceee1a4eb503b3920284c8d9c1?s=300&r=x&d=404",2],[84,"https://s.gravatar.com/avatar/483d96cd14d63b1957c0d49bcd0bfc07?s=300&r=x&d=404",2],[87,"https://s.gravatar.com/avatar/8a5f033b195753ed5b8d8fa036c0e187?s=300&r=x&d=404",2],[89,"https://s.gravatar.com/avatar/1ec91dd37de21d61a5c94e8bd2001d87?s=300&r=x&d=404",2],[38,"https://s.gravatar.com/avatar/c69e81fd32203a01908b5b280b39803b?s=300&r=x&d=404",1],[12,"https://s.gravatar.com/avatar/64725a6d99c0cd273c7dafee063d4e08?s=300&r=x&d=404",1],[40,"https://s.gravatar.com/avatar/5716929ef0fba390068992486a66d6fe?s=300&r=x&d=404",1],[41,"https://s.gravatar.com/avatar/9f07384609d2dd971c13facf14ca148a?s=300&r=x&d=404",1],[42,"https://s.gravatar.com/avatar/adf2288e9f4fbd825d8bebeae68380e8?s=300&r=x&d=404",1],[13,"https://s.gravatar.com/avatar/e50a4149862c7647a59fa6a55140e7aa?s=300&r=x&d=404",1],[14,"https://s.gravatar.com/avatar/2f99a4aa77cc84d563e2f4bf4813d2d7?s=300&r=x&d=404",1],[45,"https://s.gravatar.com/avatar/a64e28d8617bba9c1384db6e6b526280?s=300&r=x&d=404",1],[15,"https://s.gravatar.com/avatar/4b1ebaf7d3cd38b9c52b9c82ab9e3b5d?s=300&r=x&d=404",1],[5,"https://s.gravatar.com/avatar/35531b1ad5f553738ea33e5fc0ec5524?s=300&r=x&d=404",1],[17,"https://s.gravatar.com/avatar/45c83d7223047b6d165a241eff0c3434?s=300&r=x&d=404",1],[18,"https://s.gravatar.com/avatar/25416aa0799f0d1854ef76df1c2ef1ec?s=300&r=x&d=404",1],[19,"https://s.gravatar.com/avatar/4d0c548b7956854392125d3f9d6915e0?s=300&r=x&d=404",1],[51,"https://s.gravatar.com/avatar/3a961a2ec810564cea77fd1c6aaa09c2?s=300&r=x&d=404",1],[20,"https://s.gravatar.com/avatar/d4941db3190df08058508cb8aad6033c?s=300&r=x&d=404",1],[53,"https://s.gravatar.com/avatar/865d62e6547d96091f0006d1cb5a4e40?s=300&r=x&d=404",1],[6,"https://s.gravatar.com/avatar/469ee810154ba8a1f162486d156d4463?s=300&r=x&d=404",1],[22,"https://s.gravatar.com/avatar/5b9a25a1a676397a25579dfad59e1d7b?s=300&r=x&d=404",1],[23,"https://s.gravatar.com/avatar/60608778b56e911c60ade15876c4196d?s=300&r=x&d=404",1],[57,"https://s.gravatar.com/avatar/ecf07fa5d47f0a954f6ca3d488ae41e7?s=300&r=x&d=404",1],[58,"https://s.gravatar.com/avatar/96c18101c030207258fcdf55197c6bef?s=300&r=x&d=404",1],[59,"https://s.gravatar.com/avatar/c3e54806012e43562073cd5f46b63afb?s=300&r=x&d=404",1],[7,"https://s.gravatar.com/avatar/e7ead7059d925b437bd6069eca2c0e90?s=300&r=x&d=404",1],[61,"https://s.gravatar.com/avatar/4c1cb76f9d644f22799d590d60fecbbf?s=300&r=x&d=404",1],[62,"https://s.gravatar.com/avatar/ad7b829a70c6ec34fa15e99f2e9d7e4e?s=300&r=x&d=404",1],[25,"https://s.gravatar.com/avatar/6357a3619b12a9c892e64a1a40a1e6dd?s=300&r=x&d=404",1],[64,"https://s.gravatar.com/avatar/cc6b951896a9333998a271de492a9a74?s=300&r=x&d=404",1],[26,"https://s.gravatar.com/avatar/ff4bc1ff0149ff1f394868865016bae4?s=300&r=x&d=404",1],[93,"https://s.gravatar.com/avatar/74b892f155373834c4d0d9929efdef72?s=300&r=x&d=404",1],[67,"https://s.gravatar.com/avatar/ba0adbbfa699d09f6ee7b4402e4dcf9f?s=300&r=x&d=404",1],[68,"https://s.gravatar.com/avatar/f462c599a012150a96898f064943d519?s=300&r=x&d=404",1],[69,"https://s.gravatar.com/avatar/b70bcbc8bf35842c88135cfa30cf8c43?s=300&r=x&d=404",1],[2,"https://s.gravatar.com/avatar/4a517c9d5a8ddc2f683175764b99d9d5?s=300&r=x&d=404",1],[71,"https://s.gravatar.com/avatar/2c8df7d41a53e95dd90be48795d80778?s=300&r=x&d=404",1],[72,"https://s.gravatar.com/avatar/5111caa6f8486ccadc5fcf56dc4bcc62?s=300&r=x&d=404",1],[73,"https://s.gravatar.com/avatar/93bf9c1cf0d894c8d0970ea59002983a?s=300&r=x&d=404",1],[74,"https://s.gravatar.com/avatar/06f8c81afdd4663eea3314bebeb3e97f?s=300&r=x&d=404",1],[29,"https://s.gravatar.com/avatar/19ec0129b17757387ed84d64f89ee37d?s=300&r=x&d=404",1],[30,"https://s.gravatar.com/avatar/9fcae44e96b1a6fb5a00fd6ea5b25536?s=300&r=x&d=404",1],[31,"https://s.gravatar.com/avatar/144b7c23f24db55b7d8947eaad381f56?s=300&r=x&d=404",1],[78,"https://s.gravatar.com/avatar/9e3c140cdd4930619096553ac78be37c?s=300&r=x&d=404",1],[32,"https://s.gravatar.com/avatar/fe3fa8f48f9209077f65cecadd3955d4?s=300&r=x&d=404",1],[33,"https://s.gravatar.com/avatar/abc0aec302cb2beb3cd0427c10c24d67?s=300&r=x&d=404",1],[34,"https://s.gravatar.com/avatar/dc6b85b16bd11e397ab8f0b8bcef86f4?s=300&r=x&d=404",1],[82,"https://s.gravatar.com/avatar/96f9a01b7376b9caec1ded1af96b2c00?s=300&r=x&d=404",1],[83,"https://s.gravatar.com/avatar/7da6a0a1c1b49c64e89441cd1534d6d0?s=300&r=x&d=404",1],[10,"https://s.gravatar.com/avatar/1777ea010f8b217bc0cf43daa7a20520?s=300&r=x&d=404",1],[85,"https://s.gravatar.com/avatar/f9080c34321d686c2f2e0027562942bb?s=300&r=x&d=404",1],[86,"https://s.gravatar.com/avatar/ba0adbbfa699d09f6ee7b4402e4dcf9f?s=300&r=x&d=404",1],[36,"https://s.gravatar.com/avatar/3014f80ae412cb62a1f1688b50d1a89a?s=300&r=x&d=404",1],[88,"https://s.gravatar.com/avatar/b941f25b8b4f22ae92d50ed1752c0511?s=300&r=x&d=404",1],[11,"https://s.gravatar.com/avatar/b5d6cb6cc43d8564369f4c4c4d299696?s=300&r=x&d=404",1],[90,"https://s.gravatar.com/avatar/b0fe0affbd7286e1d3ddf50ec2410858?s=300&r=x&d=404",1],[91,"https://s.gravatar.com/avatar/b9125ef1c8b101a3140e865096531f19?s=300&r=x&d=404",1],[92,"https://s.gravatar.com/avatar/52b14a33caa451b707d77da3827943da?s=300&r=x&d=404",1],[47,"https://s.gravatar.com/avatar/e6f3480fa8465519d7a6f894e4c89e38?s=300&r=x&d=404",1]]}

_layouts/index.html

@@ -17,6 +17,32 @@
 
   <body>
 
+    <!-- SVG Images -->
+    <svg class="svgs" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        {% for mentor in site.mentors %}
+        <pattern id="mentor-{{forloop.index}}" width="300" height="300" patternUnits="userSpaceOnUse">
+          <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="i/mentors/{{mentor.name}}.jpg" width="250" height="300" preserveAspectRatio="xMidYMid slice">
+          </image>
+        </pattern>
+        {% endfor %}
+        {% for i in (1..30) %}
+        <pattern id="photo-{{i}}" width="300" height="300" patternUnits="userSpaceOnUse">
+          <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="i/photos/{{i}}.jpg" width="250" height="300" preserveAspectRatio="xMidYMid slice">
+          </image>
+        </pattern>
+        {% endfor %}
+        {% for value in site.data.attendees %}
+        {% for attendee in value[1] %}
+        <pattern id="attendee-{{attendee[0]}}" width="300" height="300" patternUnits="userSpaceOnUse">
+          <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{attendee[1]}}" width="250" height="300" preserveAspectRatio="xMidYMid slice">
+          </image>
+        </pattern>
+        {% endfor %}
+        {% endfor %}
+      </defs>
+    </svg>
+
     <!-- Navigation -->
     <nav class="nav">
       <ul>
@@ -25,6 +51,7 @@
         <li><a href="#events" class="ir events" data-text="Events">Events</a></li>
         <li><a href="#faq" class="ir faq" data-text="FAQ">Frequently Asked Questions</a></li>
         <li><a href="#mentors" class="ir mentors" data-text="Mentors">Mentors</a></li>
+        <li><a href="#attendees" class="ir attendees" data-text="Attendees">Attendees</a></li>
         <li><a href="#photos" class="ir photos" data-text="Photos">Photos</a></li>
         <li><a href="#codeofconduct" class="ir code" data-text="Code of Conduct">Code of Conduct</a></li>
       </ul>
@@ -104,6 +131,20 @@ <h3>"How do I run a Workshopper?"</h3>
             <pre>$ learnyounode</pre>
           </code>
 
+          <h2 id="photos">Photos</h2>
+
+          <div class="list-photos cf">
+            {% for i in (1..30) %}
+            {% cycle '<div class="row">', '', '', '', '' %}
+              <a href="i/photos/{{i}}.jpg" target="_blank" class="image-wrapper">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 300" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <polygon class="hex" points="250,75 250,225 125,300 0,225 0,75 125,0" fill="url('#photo-{{i}}')"></polygon>
+                </svg>
+              </a>
+            {% cycle '', '', '', '', '</div>' %}
+            {% endfor %}
+          </div>
+
           <h2 id="codeofconduct">Code of Conduct</h2>
 
           <p>We, the organizers of <strong>NodeSchool Toronto</strong>, are dedicated to providing a harassment-free community for everyone, regardless of sex, gender identity or expression, sexual orientation, disability, physical appearance, age, body size, race, nationality, or religious beliefs. We do not tolerate harassment of community members in any form. Participants violating these rules may be sanctioned or expelled from the community at the discretion of the organizers of <strong>NodeSchool Toronto</strong>.</p>
@@ -171,7 +212,11 @@ <h2 id="credit">Credits</h2>
                 </li>
                 <li class="row">
                   <span class="time">1:00pm - 1:30pm</span>
-                  <span class="name">Presentations</span>
+                  <span class="name">Presentations:<br>
+                    <a href="http://twitter.com/rickycodes"><strong>@rickycodes</strong> - Electron + Audio</a><br>
+                    <a href="http://twitter.com/andrewdamelio"><strong>@andrewdamelio</strong> - Electron + Emojis</a><br>
+                    <a href="http://twitter.com/darcy"><strong>@darcy</strong> - Video Streaming</a>
+                  </span>
                 </li>
                 <li class="row">
                   <span class="time">1:30pm - 3:30pm</span>
@@ -196,39 +241,36 @@ <h2 id="mentors">Mentors</h2>
             <p>Mentors are currently <strong>contacted and confirmed</strong> before each event in our <a href='https://nodeschool-toronto-slackin.herokuapp.com/'>Slack Channel</a>.</p>
 
             <div class="list-mentors cf">
-
-              <svg class="photos" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
-                <defs>
-                  {% for mentor in site.mentors %}
-                  <pattern id="{{mentor.name}}" width="300" height="300" patternUnits="userSpaceOnUse">
-                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="i/mentors/{{mentor.name}}.jpg" width="250" height="300" preserveAspectRatio="xMidYMid slice">
-                    </image>
-                  </pattern>
-                  {% endfor %}
-                </defs>
-              </svg>
-
               {% for mentor in site.mentors %}
-              <a href="https://twitter.com/{{mentor.twitter}}" target="_blank" class="mentor">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 300" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
-                  <polygon class="hex" points="250,75 250,225 125,300 0,225 0,75 125,0" fill="url('#{{mentor.name}}')"></polygon>
-                </svg>
-              </a>
+                {% cycle '<div class="row">', '', '', '', '' %}
+                  <a href="https://twitter.com/{{mentor.twitter}}" target="_blank" class="image-wrapper">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 300" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <polygon class="hex" points="250,75 250,225 125,300 0,225 0,75 125,0" fill="url('#mentor-{{forloop.index}}')"></polygon>
+                    </svg>
+                  </a>
+                {% cycle '', '', '', '', '</div>' %}
               {% endfor %}
-
             </div>
 
-            <h2 id="photos">Photos</h2>
-
-            <div class="gallery">
-              {% for i in (1..23) %}
-              <a href="i/photos/{{i}}.jpg" target="_blank" class="image-wrapper">
-                <div class="image" style="background-image: url(i/photos/{{i}}.jpg);"></div>
-              </a>
+            <h2 id="attendees">Attendees</h2>
+
+            <div class="list-attendees cf">
+              {% for value in site.data.attendees %}
+                {% for attendee in value[1] %}
+                {% cycle '<div class="row">', '', '', '', '', '', '', '' %}
+                  <div class="image-wrapper">
+                    <div class="badge"><span>{{attendee[2]}}</span></div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 300" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <polygon class="hex" points="250,75 250,225 125,300 0,225 0,75 125,0" fill="url('#attendee-{{attendee[0]}}')"></polygon>
+                    </svg>
+                  </div>
+                {% cycle '', '', '', '', '', '', '', '</div>' %}
+                {% endfor %}
               {% endfor %}
             </div>
 
           </div>
+
         </div>
 
       </aside>

_plugins/modulo.filter.rb

@@ -0,0 +1,21 @@
+
+# Modulo filter for Jekyll
+#
+# Adds modulo functionality to Jekyll. It's already in the Liquid core, but that
+# version doesn't appear to be in Jekyll.
+#
+# That's about it.
+
+module Jekyll
+  module ModuloFilter
+
+    # Returns the modulo of the input based on the supplied modulus
+    # Called 'mod' to avoid conflict with newer Liquid's 'modulo' filter
+    def mod(input, modulus)
+      input.to_i % modulus.to_i
+    end
+
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::ModuloFilter)

_sass/base.sass

@@ -55,11 +55,6 @@ a
     color: $accent
     text-decoration: underline
 
-::selection
-  color: $base
-  background: rgba($secondary, 0.15)
-  text-shadow: none
-
 // --------------------------------
 // Classes
 // --------------------------------

_sass/events.sass

@@ -96,7 +96,7 @@
       width: 100%
       margin: 0
       padding: 0
-      line-height: 100%
+      line-height: 180%
       border-bottom: 1px solid rgba($tertiary, 0.35)
 
       .time, .name
@@ -109,11 +109,11 @@
         width: 30%
         padding: 20px 10px 20px 30px
         font-weight: 600
-        border-right: 1px solid rgba($tertiary, 0.35)
 
       .name
         width: 70%
         font-size: 100
+        border-left: 1px solid rgba($tertiary, 0.35)
 
   .map
     width: 100%

_sass/mentors.sass

@@ -1,44 +1,106 @@
 // --------------------------------
-// Mentors
+// Mentors / Gallery / Attendees
 // --------------------------------
 
-.list-mentors
+.svgs
+  height: 0
+  width: 0
+  display: block
+  overflow: hidden
+
+.list-mentors, .list-photos, .list-attendees
   width: 100%
   z-index: 900
+  transform: translate3d( -5%, 0, 0 )
   margin: 50px 0 0 0
+  position: relative
 
   &:hover
 
-    .mentor
+    .image-wrapper
       opacity: 0.25
 
       &:hover
         opacity: 1
         transform: scale(1.5)
         z-index: 9999
 
-  .photos
-    height: 0
-    width: 0
+  .row
+    @extend .cf
+    display: block
+    clear: both
+
+  .row:nth-of-type(even)
+    @extend .cf
+    display: block
+    clear: both
+    transform: translate3d( 10%, 0, 0 )
+
+    @media(max-width: 800px)
+      transform: none
 
-  .mentor
+  .image-wrapper
     display: block
     float: left
     position: relative
     text-align: center
     width: 20%
     height: 0
-    padding: 20% 0 0 0
-    margin: 0 0 20px 0
+    padding: 24% 0 0 0
+    margin: 0 0 0 0
     transition: opacity 0.3s, transform 0.2s
 
-    @media (screen and max-width: 1200px)
-      width: 25%
-      padding: 25% 0 0 0
-
     svg
       top: 0
       left: 0
       position: absolute
       width: 100%
       height: 100%
+
+.list-attendees
+
+  .image-wrapper
+    width: 12.5%
+    padding: 18% 0 0 0
+
+    .badge
+      display: none
+      width: 50px
+      height: 25px
+      background: $highlight
+      position: absolute
+      bottom: 0
+      left: 50%
+      margin: 0 0 0 -25px
+      z-index: 910
+
+      span
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        text-align: center
+        color: black
+
+      &:before
+        content: ''
+        position: absolute
+        top: -15px
+        left: 0
+        width: 0
+        height: 0
+        border-left: 25px solid transparent
+        border-right: 25px solid transparent
+        border-bottom: 15px solid $highlight
+
+      &:after
+        content: ''
+        position: absolute
+        bottom: -15px
+        left: 0
+        width: 0
+        height: 0
+        border-left: 25px solid transparent
+        border-right: 25px solid transparent
+        border-top: 15px solid $highlight
+

_sass/navigation.sass

@@ -72,6 +72,9 @@
       &.mentors:before
         content: '\e602'
 
+      &.attendees:before
+        content: '\e71f'
+
       &.photos:before
         content: '\e633'
 

_sass/tito.sass

@@ -107,6 +107,10 @@
   line-height: 160%
   font-weight: 100
 
+.tito-tickets-remaining
+  display: block
+  font-size: 14px
+
 .tito-badge-link
   display: block
   clear: both