Adding Mastodon logo
Eugen Rochko
parent
6c4c84b161
commit
d4b9b289e8
|
|
@ -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)
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -1,7 +1,8 @@
|
|||
- content_for :content do
|
||||
.logo-container
|
||||
%h1
|
||||
Mastodon
|
||||
= link_to root_path do
|
||||
= render partial: 'logo', locals: { dim: 200 }
|
||||
%small= Rails.configuration.x.local_domain
|
||||
|
||||
.form-container
|
||||
|
|
|
|||
Loading…
Reference in New Issue