From d4b9b289e8a4db61dbed9c725ee602ee63515d15 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 11 Mar 2016 01:26:59 +0100 Subject: [PATCH] Adding Mastodon logo --- app/assets/javascripts/mastodon-logo.coffee | 48 ++++++++++++++++ app/assets/stylesheets/application.scss | 64 ++++++++++++++++++++- app/views/application/_logo.html.erb | 11 ++++ app/views/layouts/auth.html.haml | 5 +- 4 files changed, 125 insertions(+), 3 deletions(-) create mode 100644 app/assets/javascripts/mastodon-logo.coffee create mode 100644 app/views/application/_logo.html.erb diff --git a/app/assets/javascripts/mastodon-logo.coffee b/app/assets/javascripts/mastodon-logo.coffee new file mode 100644 index 0000000000..3fb8c0a13b --- /dev/null +++ b/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) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index a091d79ff8..187c083115 100644 --- a/app/assets/stylesheets/application.scss +++ b/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'; diff --git a/app/views/application/_logo.html.erb b/app/views/application/_logo.html.erb new file mode 100644 index 0000000000..21fa4f657e --- /dev/null +++ b/app/views/application/_logo.html.erb @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index dd0e7f1665..7758157511 100644 --- a/app/views/layouts/auth.html.haml +++ b/app/views/layouts/auth.html.haml @@ -1,8 +1,9 @@ - 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