From d4b9b289e8a4db61dbed9c725ee602ee63515d15 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 11 Mar 2016 01:26:59 +0100 Subject: Adding Mastodon logo --- app/assets/stylesheets/application.scss | 64 ++++++++++++++++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets') 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'; -- cgit