Adding Mastodon logo

This commit is contained in:
Eugen Rochko 2016-03-11 01:26:59 +01:00
parent 6c4c84b161
commit d4b9b289e8
4 changed files with 125 additions and 3 deletions

View file

@ -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)

View file

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

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -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