Adding Mastodon logo

app/assets/javascripts/mastodon-logo.coffee

@@ -0,0 +1,48 @@
+defaultClass = 'mastodon-shape'
+pieces = [
+  'path#mastodon-tusk-front, path#mastodon-tusk-back',
+  'path#mastodon-nose',
+  'path#mastodon-cheek',
+  'path#mastodon-forehead',
+  'path#mastodon-backhead',
+  'path#mastodon-ear',
+]
+pieceIndex = 0
+firstPiece = pieces[0]
+
+currentTimer = null
+delay        = 100
+runs         = 0
+stop_at_run  = 1
+
+clearHighlights = ->
+  $(".#{defaultClass}.highlight").attr('class', defaultClass)
+
+start = ->
+  clearHighlights()
+  pieceIndex = 0
+  runs = 0
+  pieces.reverse() unless pieces[0] == firstPiece
+  clearInterval(currentTimer) if currentTimer
+  currentTimer = setInterval(work, delay)
+
+stop = ->
+  clearInterval(currentTimer)
+  clearHighlights()
+
+work = ->
+  clearHighlights()
+  $(pieces[pieceIndex]).attr('class', "#{defaultClass} highlight")
+
+  if pieceIndex == pieces.length - 1
+    pieceIndex = 0
+    pieces.reverse()
+    runs++
+  else
+    pieceIndex++
+
+  if runs == stop_at_run
+    stop()
+
+$ ->
+  setTimeout(start, 500)

app/assets/stylesheets/application.scss

@@ -95,9 +95,14 @@ body {
     text-align: center;
     color: #fff;
     font-size: 48px;
-    line-height: 48px;
     font-weight: 500;
 
+    a {
+      color: inherit;
+      text-decoration: none;
+      outline: 0;
+    }
+
     small {
       display: block;
       font-size: 12px;
@@ -233,6 +238,63 @@ body {
   }
 }
 
+.mastodon {
+  $head: #282c37;
+  $tusk: #d9e1e8;
+  $backdrop: #2b90d9;
+  $highlight: 18%;
+
+  .mastodon-backdrop {
+    fill: $backdrop;
+  }
+
+  #mastodon-ear {
+    fill: lighten($head, 5%);
+
+    &:hover, &.highlight {
+      fill: lighten($head, $highlight);
+    }
+  }
+
+  #mastodon-head-backdrop {
+    fill: darken($head, 5%);
+
+    &:hover, &.highlight {
+      fill: darken($head, 5%);
+    }
+  }
+
+  #mastodon-nose, #mastodon-cheek, #mastodon-forehead, #mastodon-backhead {
+    fill: $head;
+
+    &:hover, &.highlight {
+      fill: lighten($head, $highlight);
+    }
+  }
+
+  #mastodon-tusk-front {
+    fill: lighten($tusk, 5%);
+  }
+
+  #mastodon-tusk-back {
+    fill: $tusk;
+
+    &:hover, &.highlight {
+      fill: lighten($tusk, $highlight);
+    }
+  }
+
+  .mastodon-shape {
+    transition: all 0.8s ease;
+    stroke: transparent;
+    stroke-width: 0px;
+
+    &:hover, &.highlight {
+      transition-duration: 0.2s;
+    }
+  }
+}
+
 @import 'home';
 @import 'accounts';
 @import 'stream_entries';