Adding Mastodon logo

app/assets/javascripts/mastodon-logo.coffee

+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';

app/views/application/_logo.html.erb

+<svg xmlns="http://www.w3.org/2000/svg" width="<%= dim %>" height="<%= dim %>" class="mastodon" viewBox="-100 0 1390 750">
+  <circle cx="600" cy="380" r="500" fill="#9baec8" class="mastodon-backdrop"/>
+  <path fill="#282c37" d="M500 200l130-60h140l160 130-90 160-250 45-150-24-26 56 16 83h60l10 40-50 50-80-40-60-160 90-180" class="mastodon-shape" id="mastodon-head-backdrop"/>
+  <path fill="#282c37" d="M442.1204 451.3337l-42.08-151.3737-.0425.0424-89.993 180.007 60.002 159.9848 80.003 40.0015 49.9913-49.9913-10.011-40.0015h-59.981l-16.0134-82.994 26.003-56.015 2.121.3393z" class="mastodon-shape" id="mastodon-nose"/>
+  <path fill="#282c37" d="M498.2625 201.7378L400.0403 299.96l42.08 151.3737 147.8742 23.67.5515-.106-92.2835-273.16z" class="mastodon-shape" id="mastodon-cheek"/>
+  <path fill="#282c37" d="M498.2625 201.7378l92.2835 273.16.7635-.1273L770.0862 140.06l-.0848-.0637H629.996l-129.9943 60.0023-1.7392 1.7392z" class="mastodon-shape" id="mastodon-forehead"/>
+  <path fill="#282c37" d="M770.0862 140.06L591.3095 474.7705l248.684-44.7737 90.014-160.006L770.0862 140.06z" class="mastodon-shape" id="mastodon-backhead"/>
+  <path fill="#fff" d="M440 450l-40 80-170-20L70 390-80 230 0 390l100 100 120 100 120 20h130l90-140" class="mastodon-shape" id="mastodon-tusk-front"/>
+  <path fill="#d9e1e8" d="M268 516L120 360 80 260l70 90 110 90 59 22-8 18 15 41" class="mastodon-shape" id="mastodon-tusk-back"/>
+  <path fill="#282c37" d="M780 190l110 80-80 140-40-80" class="mastodon-shape" id="mastodon-ear"/>
+ </svg>

app/views/layouts/auth.html.haml

 - content_for :content do
   .logo-container
     %h1
-      Mastodon
-      %small= Rails.configuration.x.local_domain
+      = link_to root_path do
+        = render partial: 'logo', locals: { dim: 200 }
+        %small= Rails.configuration.x.local_domain
 
   .form-container
     = yield