Adds tooltips for team members description

source/index.html.erb

@@ -349,35 +349,35 @@ description: EuRuKo 2013 - The European Ruby Conference in sunny Athens, Greece
     <h4 id="organisers">Organisers</h4>
     <ul class="centered committee">
       <li>
-        <%= image_tag "committee/gfotos.png", alt: "@gfotos avatar", title: "@gfotos" %>
+        <%= image_tag "committee/gfotos.png", class: 'organisers-avatar', alt: "@gfotos avatar", title: "@gfotos" %>
         <h5>Fotos Georgiadis</h5>
       </li>
       <li>
-        <%= image_tag "committee/vvatikiotis.png", alt: "@o_trixlidios avatar", title: "@o_trixlidios" %>
+        <%= image_tag "committee/vvatikiotis.png", class: 'organisers-avatar', alt: "@o_trixlidios avatar", title: "<h3>Vassilis Vatikiotis</h3><p class='website'><i class='icon-globe'></i><a href='http://www.whotouchedmygun.com'>http://www.whotouchedmygun.com</a></p><p class='twitter'><i class='icon-twitter'></i> <a href='http://twitter.com/o_trixlidios'>@o_trixlidios</a></p><p>Sysadmin, part time developer, ex-escapist, currently pragmatist, builder at heart.</p>" %>
         <h5>Vassilis Vatikiotis</h5>
       </li>
       <li>
-        <%= image_tag "committee/nikosd.png", alt: "@nikosd avatar", title: "@nikosd" %>
+        <%= image_tag "committee/nikosd.png", class: 'organisers-avatar', alt: "@nikosd avatar", title: "<h3>Nikos Dimitrakopoulos</h3><p class='website'><i class='icon-globe'></i><a href='http://blog.nikosd.com'>http://blog.nikosd.com</a></p><p class='twitter'><i class='icon-twitter'></i> <a href='http://twitter.com/nikosd'>@nikosd</a></p><p>“All things web” developer with Ruby and Rails since 2006, with small breaks for C# and Java and constantly alongside beloved/hatred JavaScript. Equally interested in agile and lean methodologies and coming up with ideas on how to change the world. One day he hopes to actually change the world.</p>" %>
         <h5>Nikos Dimitrakopoulos</h5>
       </li>
       <li>
-        <%= image_tag "committee/apantsiop.png", alt: "@apantsiop avatar", title: "@apantsiop" %>
+        <%= image_tag "committee/apantsiop.png", class: 'organisers-avatar', alt: "@apantsiop avatar", title: "<h3>Apostolos Pantsiopoulos</h3><p class='website'><i class='icon-globe'></i><a href='http://apantsiop.me'>http://apantsiop.me</a></p><p class='twitter'><i class='icon-twitter'></i> <a href='http://twitter.com/apantsiop'>@apantsiop</a></p><p>The empire never ended. Yossarian lives. I also like coding (in Ruby when possible) and riding motorcycles. They also call me Punchy... for some reason.</p>" %>
         <h5>Apostolos Pantsiopoulos</h5>
       </li>
       <li>
-        <%= image_tag "committee/pagojo.png", alt: "@JohnPagonis avatar", title: "@JohnPagonis" %>
+        <%= image_tag "committee/pagojo.png", class: 'organisers-avatar', alt: "@JohnPagonis avatar", title: "<h3>Dr. John Pagonis</h3><p class='website'><i class='icon-globe'></i><a href='http://www.pagonis.org'>http://www.pagonis.org</a></p><p class='twitter'><i class='icon-twitter'></i> <a href='http://twitter.com/johnPagonis'>@johnPagonis</a></p><p>John likes learning and tends to get involved in whatever is interesting. He started with Ruby somehow unorthodoxically by porting YARV to Symbian OS and then decided to experience the language for himself. Since then he quit developing mobile phone software and switched to work with machine learning and building content recommender systems with Ruby. One day he hopes to grok Ruby as much as everyone else in the EuRuKo 2013 organising committee and to stop bugging people and software.</p>" %>
         <h5>Dr. John Pagonis</h5>
       </li>
       <li>
-        <%= image_tag "committee/giorgostsiftsis.png", alt: "@giorgostsiftsis avatar", title: "@giorgostsiftsis" %>
+        <%= image_tag "committee/giorgostsiftsis.png", class: 'organisers-avatar', alt: "@giorgostsiftsis avatar", title: "<h3>Giorgos Tsiftsis</h3><p class='twitter'><i class='icon-twitter'></i> <a href='http://twitter.com/giorgostsiftsis'>@giorgostsiftsis</a></p><p>%w(art ruby athe anarch nil) * 'ist ' + ' wannabe'</p>" %>
         <h5>Giorgos Tsiftsis</h5>
       </li>
       <li>
-        <%= image_tag "committee/nolamesa.png", alt: "@nolamesa avatar", title: "@nolamesa" %>
+        <%= image_tag "committee/nolamesa.png", class: 'organisers-avatar', alt: "@nolamesa avatar", title: "<h3>Nikos Diamantopoulos</h3><p class='twitter'><i class='icon-twitter'></i><a href='http://twitter.com/nolamesa'>@nolamesa</a></p><p>Obsessed with Ruby Web developer. Loves experimenting with new technologies and cool ideas. He has been striving to travel all over the world, but there is still a lot to cover... Unfortunately travelling does not scale, Ruby does ;-)</p>" %>
         <h5>Nikos Diamantopoulos</h5>
       </li>
       <li>
-        <%= image_tag "committee/arcandros.png", alt: "@arcandros avatar", title: "@arcandros" %>
+        <%= image_tag "committee/arcandros.png", class: 'organisers-avatar', alt: "@arcandros avatar", title: "<h3>Vassilis Rizopoulos</h3><p class='website'><i class='icon-globe'></i><a href='http://www.ampelofilosofies.gr'>http://www.ampelofilosofies.gr</a></p><p class='twitter'><i class='icon-twitter'></i> <a href='http://twitter.com/arcandros'>@arcandros</a></p><p>Remote worker, testing hardliner, automation geek and founding member of the thessaloniki.rb user group. Actively developing in Ruby since 2001 he claims the title of oldest active Ruby developer that has never actually created a production Rails application - which is probably not true.</p>" %>
         <h5>Vassilis Rizopoulos</h5>
       </li>
     </ul>

source/javascripts/main.coffee

@@ -38,6 +38,13 @@ $ ->
     _gaq.push(['_trackEvent', 'Newsletter', 'Signup']);
     return
 
+  # Organisers tooltip on mouserOver
+
+  $('.organisers-avatar').powerTip
+    placement: 'n',
+    smartPlacement: true
+    mouseOnToPopup: true
+
   # Countdown for first ticket batch
   countdown_container = $('.countdown')
   if countdown_container.length > 0

source/layouts/layout.erb

@@ -34,11 +34,11 @@
     <link rel="alternate" type="application/atom+xml" title="EuRuKo 2013 Blog feed" href="/blog/feed.xml" />
 
     <!-- Stylesheets -->
-    <%= stylesheet_link_tag "main" %>
+    <%= stylesheet_link_tag "reset", "main", "jquery.powertip" %>
 
     <!-- JavaScript -->
-    <%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' %>
-    <%= javascript_include_tag 'main', 'parallax', 'vendor/easing', 'vendor/countdown' %>
+    <%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' %>
+    <%= javascript_include_tag 'vendor/powertip', 'main', 'parallax', 'vendor/easing' %>
 
     <!-- Google Analytics -->
     <script>

source/stylesheets/_homepage.css.scss.erb

@@ -592,6 +592,29 @@ h3 {
   }
 }
 
+#powerTip {
+  width: 35%;
+  h3 {
+      text-shadow: none;
+      text-align: center;
+      color: #fff;
+      padding: 0;
+      text-decoration: none;
+  }
+  .website, .twitter {
+    margin: 10px 0;
+    text-align: center;
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+    .icon-globe, .icon-twitter {
+      margin-right: 7px;
+      font-size: 16px;
+    }
+  }
+}
+
 #contact {
   background: #e1e1e1;
   text-align: center;
@@ -800,6 +823,7 @@ h3 {
 
     .committee {
       margin-bottom: 3*$vr;
+
    }
 
     .community {
@@ -821,7 +845,11 @@ h3 {
   .section {
     padding: 20px 0;
   }
-
+  #powerTip {
+    h3 {
+      font-size: 16px;
+    }
+  }
   .back_top {
     visibility: visible;
     width: 70px;

source/stylesheets/jquery.powertip.css

@@ -0,0 +1,95 @@
+/* PowerTip Plugin */
+#powerTip {
+  cursor: default;
+  background-color: #333;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 2px;
+  color: #fff;
+  display: none;
+  padding: 25px;
+  font-size: 14px;
+  line-height: 1.6em;
+  position: absolute;
+  /*white-space: nowrap; NOT USED */
+  z-index: 2147483647;
+}
+#powerTip:before {
+  content: "";
+  position: absolute;
+}
+#powerTip.n:before, #powerTip.s:before {
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  left: 50%;
+  margin-left: -5px;
+}
+#powerTip.e:before, #powerTip.w:before {
+  border-bottom: 10px solid transparent;
+  border-top: 10px solid transparent;
+  margin-top: -5px;
+  top: 50%;
+}
+#powerTip.n:before {
+  border-top: 10px solid #333;
+  border-top: 10px solid rgba(0, 0, 0, 0.8);
+  bottom: -9px;
+}
+#powerTip.e:before {
+  border-right: 10px solid #333;
+  border-right: 10px solid rgba(0, 0, 0, 0.8);
+  left: -10px;
+}
+#powerTip.s:before {
+  border-bottom: 10px solid #333;
+  border-bottom: 10px solid rgba(0, 0, 0, 0.8);
+  top: -9px;
+}
+#powerTip.w:before {
+  border-left: 10px solid #333;
+  border-left: 10px solid rgba(0, 0, 0, 0.8);
+  right: -10px;
+}
+#powerTip.ne:before, #powerTip.se:before {
+  border-right: 10px solid transparent;
+  border-left: 0;
+  left: 10px;
+}
+#powerTip.nw:before, #powerTip.sw:before {
+  border-left: 10px solid transparent;
+  border-right: 0;
+  right: 10px;
+}
+#powerTip.ne:before, #powerTip.nw:before {
+  border-top: 10px solid #333;
+  border-top: 10px solid rgba(0, 0, 0, 0.8);
+  bottom: -10px;
+}
+#powerTip.se:before, #powerTip.sw:before {
+  border-bottom: 10px solid #333;
+  border-bottom: 10px solid rgba(0, 0, 0, 0.8);
+  top: -10px;
+}
+#powerTip.nw-alt:before, #powerTip.ne-alt:before,
+#powerTip.sw-alt:before, #powerTip.se-alt:before {
+  border-top: 10px solid #333;
+  border-top: 10px solid rgba(0, 0, 0, 0.8);
+  bottom: -10px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  left: 10px;
+}
+#powerTip.ne-alt:before {
+  left: auto;
+  right: 10px;
+}
+#powerTip.sw-alt:before, #powerTip.se-alt:before {
+  border-top: none;
+  border-bottom: 10px solid #333;
+  border-bottom: 10px solid rgba(0, 0, 0, 0.8);
+  bottom: auto;
+  top: -10px;
+}
+#powerTip.se-alt:before {
+  left: auto;
+  right: 10px;
+}

vendor/assets/font-awesome/sass/font-awesome.sass

@@ -46,7 +46,7 @@ $iconMuted:         #eee
   font-family: FontAwesome
   font-weight: normal
   font-style: normal
-  text-decoration: inherit
+  text-decoration: none
   -webkit-font-smoothing: antialiased
 
   /* sprites.less reset */