diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/mastodon-logo.coffee | 48 | ||||
| -rw-r--r-- | app/assets/stylesheets/application.scss | 64 | ||||
| -rw-r--r-- | app/views/application/_logo.html.erb | 11 | ||||
| -rw-r--r-- | app/views/layouts/auth.html.haml | 5 |
4 files changed, 125 insertions, 3 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'; diff --git a/app/views/application/_logo.html.erb b/app/views/application/_logo.html.erb new file mode 100644 index 000000000..21fa4f657 --- /dev/null +++ b/app/views/application/_logo.html.erb @@ -0,0 +1,11 @@ +<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> diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index dd0e7f166..775815751 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 |