From 944b53405f19d4bd22dc41284b53aa640558fc41 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Tue, 29 Dec 2015 01:22:12 +0100 Subject: [PATCH] Add blog logo --- assets/scss/global.scss | 26 --------------- assets/scss/itch.scss | 4 +-- assets/scss/reset.scss | 70 +++++++++-------------------------------- assets/scss/theme.scss | 6 ++-- partials/navigation.hbs | 4 +-- 5 files changed, 20 insertions(+), 90 deletions(-) diff --git a/assets/scss/global.scss b/assets/scss/global.scss index b9c8b4d..7974407 100644 --- a/assets/scss/global.scss +++ b/assets/scss/global.scss @@ -920,32 +920,6 @@ pre[class*="language-"] { } } -a.ghost-logo.animated-logo { - background: url('/assets/images/logo.png'); - left: 7px; - top: 7px; - width: 30px; - background-size: 30px, cover; - background-repeat: no-repeat; - display: none; - - @include breakpoint(660px) { - display: inline; - } -} - -.ghost-logo { - &:before { - content: ''; - } - - &:after { - content: $blog-name; - font-size: 1.6rem; - margin-left: 10px; - } -} - #global-footer .poweredby a { text-decoration: underline; } diff --git a/assets/scss/itch.scss b/assets/scss/itch.scss index 3b6355b..30c40b1 100644 --- a/assets/scss/itch.scss +++ b/assets/scss/itch.scss @@ -1,9 +1,9 @@ /* Basic */ -@import 'reset'; @import 'variables'; -@import 'mixins'; @import 'theme'; +@import 'reset'; +@import 'mixins'; @import 'global'; /* Customize */ diff --git a/assets/scss/reset.scss b/assets/scss/reset.scss index 7f16226..d453296 100644 --- a/assets/scss/reset.scss +++ b/assets/scss/reset.scss @@ -493,7 +493,7 @@ nav li a:before { margin-right: 1em; } -.ghost-logo { +.blog-logo { box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -506,7 +506,7 @@ nav li a:before { height: 30px; width: 30px; background: #242628; - color: rgba(220, 240, 240, 0.7); + color: $blog-logo-color; text-align: center; transition: all 0.15s ease; -moz-transition: all 0.15s ease; @@ -514,76 +514,34 @@ nav li a:before { border-radius: 2px; } -.ghost-logo:before { - font-family: "Icons"; - font-weight: normal; - font-style: normal; - vertical-align: -7%; - text-transform: none; - speak: none; - line-height: 1; - font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - content: "\e01d"; - position: absolute; - top: 10px; - left: 10px; -} - -.ghost-logo:hover { - text-decoration: none; -} - -.ghost-logo:after { - font-family: "Icons"; - font-weight: normal; - font-style: normal; +.blog-logo img { vertical-align: -7%; text-transform: none; speak: none; line-height: 1; - font-smoothing: antialiased; - content: "\e01e"; - font-size: 20px; - color: white; position: absolute; - top: 5px; - left: 26px; - opacity: 0; + top: 4px; + left: 4px; + max-width: 22px; } -.ghost-logo:hover { - text-decoration: none; -} - -.ghost-logo span { - display: none; -} - -.ghost-logo:hover { - width: 81px; - text-decoration: none; - transition: width 0.25s ease 0.1s; - -moz-transition: width 0.25s ease 0.1s; - transition: width 0.25s ease 0.1s; -} - -.ghost-logo:hover:after { - opacity: 1; -} .global-header { position: relative; min-height: 80px; } +.nav-current { + font-weight: bold; +} + @media (max-width: 800px), (max-width: 800px) { .global-header { min-height: 44px; } } -.global-header .ghost-logo { +.global-header .blog-logo { position: absolute; top: 15px; left: 15px; @@ -593,14 +551,14 @@ nav li a:before { } @media (max-width: 800px), (max-width: 800px) { - .global-header .ghost-logo { + .global-header .blog-logo { top: 7px; left: 7px; } } @media (max-width: 660px), (max-width: 660px) { - .global-header .ghost-logo { + .global-header .blog-logo { width: 81px; background: transparent; color: rgba(60, 80, 90, 0.7); @@ -613,7 +571,7 @@ nav li a:before { border-radius: 0; } - .global-header .ghost-logo:after { + .global-header .blog-logo:after { color: #242628; opacity: 1; } diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss index e25d1f2..964d7f6 100644 --- a/assets/scss/theme.scss +++ b/assets/scss/theme.scss @@ -1,6 +1,4 @@ -$blog-name : 'Zombeats'; - $subscribe-banner-color : $green; $selection-color : lighten($orange, 36%); $tag-color : rgba($orange, .7); @@ -8,7 +6,9 @@ $tag-color : rgba($orange, .7); $feature-one-color : $green; $feature-two-color : $blue; -$link-hover-color : $blue; +$link-hover-color : $blue; + +$blog-logo-color : rgba(220, 240, 240, 0.7); $header-color : #303538; diff --git a/partials/navigation.hbs b/partials/navigation.hbs index b890715..f9dd0de 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,8 +1,6 @@