diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/mastodon-logo.coffee | 48 | ||||
-rw-r--r-- | app/assets/stylesheets/application.scss | 64 |
2 files changed, 111 insertions, 1 deletions
diff --git a/app/assets/javascripts/mastodon-logo.coffee b/app/assets/javascripts/mastodon-logo.coffee new file mode 100644 index 000000000..3fb8c0a13 --- /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 a091d79ff..187c08311 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'; |