Add blog logo

zombeats · Dec 29, 2015 · 944b534 · 944b534
1 parent ac9f21b
commit 944b534
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 90 deletions.
diff --git 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
@@ -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
@@ -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,84 +506,42 @@ 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;
        transition: all 0.15s ease;
   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
@@ -1,14 +1,14 @@
 
-$blog-name                : 'Zombeats';
-
 $subscribe-banner-color   : $green;
 $selection-color          : lighten($orange, 36%);
 $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
@@ -1,8 +1,6 @@
 <nav role="navigation">
   <div class="wrapper">
-    <a class="ghost-logo animated-logo" href="/" >
-      <span>CWMarMenor</span>
-    </a>
+    <a class="blog-logo" href="/"><img src="assets/images/favicon-32x32.png" alt="placeholder+image"></a>
     <button type="button" class="mobile-menu" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="hidden">Menu</span>
     </button>