From 9931bd1ed25bf92afcc7782269281169ebceb578 Mon Sep 17 00:00:00 2001
From: Barry Clark <barry@barryclark.co>
Date: Mon, 17 Feb 2014 10:07:14 -0500
Subject: [PATCH] First pass at masthead styling.

---
 _config.yml           |  2 +-
 _layouts/default.html |  4 ++--
 scss/style.scss       | 56 +++++++++++++++++++++++++++++++------------
 style.css             | 40 +++++++++++++++++++++----------
 4 files changed, 72 insertions(+), 30 deletions(-)
diff --git a/_config.yml b/_config.yml
index 9e58c71..db57a35 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,7 +3,7 @@
 #
 
 # The name of your site
-name: Jekyll Boilerplate
+name: Barry Clark
 
 # A short bio or description
 description: Short bio of description placeholder.
diff --git a/_layouts/default.html b/_layouts/default.html
index 0992bcc..d7f8c43 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -22,8 +22,8 @@
   <body>
     <header class="masthead">
       <img src="{{ site.avatar }}" class="avatar" />
-      <a href="/" class="name">{{ site.name }}</a>
-      <p class="description">{{ site.description }}</p>
+      <a href="/" class="site-name">{{ site.name }}</a>
+      <p class="site-description">{{ site.description }}</p>
       
       <nav>
         <a href="/">Blog</a>
diff --git a/scss/style.scss b/scss/style.scss
index 6b13419..29b4a0e 100755
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -105,21 +105,46 @@ img {
 // LAYOUT / SECTIONS
 //
 
-.logo {
-  float: left;
+//
+// .masthead
+//
 
-  a {
-    text-decoration: none;
-    cursor: pointer;
-    color: $darkGray;
-    &:hover, &:active {
-      color: $blue;
-    }
-  }
+.masthead {
+  margin: 20px 0 70px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid $darkGray;
 }
 
 .avatar {
-  border-radius: 6px;
+  float: left;
+  width: 35px;
+
+  margin-right: 10px;
+  border-radius: 5px;
+}
+
+.site-name {
+  float: left;
+
+  font-family: $helveticaNeue; 
+  font-weight: 300;
+  font-size: 24px;
+  letter-spacing: 1px;
+  @include mobile {
+    font-size: 22px;
+  }
+
+  text-decoration: none;
+  cursor: pointer;
+  color: $darkGray;
+  &:hover, &:active {
+    text-decoration: none;
+  }
+}
+
+.site-description {
+  float: left;
+  display: none;
 }
 
 nav {
@@ -137,15 +162,12 @@ nav {
     text-align: right;
     font-weight: 300;
     letter-spacing: 1px;
-    color: $gray;
+    color: $darkGray;
 
     &:hover, &:active {
       text-decoration: none;
       cursor: pointer;
       color: $darkGray;
-      &:hover, &:active {
-        color: $blue;
-      }
     }
   }
 }
@@ -158,6 +180,10 @@ nav {
   }
 }
 
+//
+// .main
+//
+
 .posts > .post {
   padding-bottom: 2em;
   border-bottom: 1px solid $lighterGray;
diff --git a/style.css b/style.css
index 604acd2..ca7c869 100644
--- a/style.css
+++ b/style.css
@@ -351,17 +351,35 @@ img {
   color: black;
   background: #eeeeee; }
 
-.logo {
-  float: left; }
-  .logo a {
-    text-decoration: none;
-    cursor: pointer;
-    color: #333333; }
-    .logo a:hover, .logo a:active {
-      color: #4183c4; }
+.masthead {
+  margin: 20px 0 70px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #333333; }
 
 .avatar {
-  border-radius: 6px; }
+  float: left;
+  width: 35px;
+  margin-right: 10px;
+  border-radius: 5px; }
+
+.site-name {
+  float: left;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  font-size: 24px;
+  letter-spacing: 1px;
+  text-decoration: none;
+  cursor: pointer;
+  color: #333333; }
+  @media screen and (max-width: 520px) {
+    .site-name {
+      font-size: 22px; } }
+  .site-name:hover, .site-name:active {
+    text-decoration: none; }
+
+.site-description {
+  float: left;
+  display: none; }
 
 nav {
   float: right;
@@ -375,13 +393,11 @@ nav {
     text-align: right;
     font-weight: 300;
     letter-spacing: 1px;
-    color: #666666; }
+    color: #333333; }
     nav a:hover, nav a:active {
       text-decoration: none;
       cursor: pointer;
       color: #333333; }
-      nav a:hover:hover, nav a:hover:active, nav a:active:hover, nav a:active:active {
-        color: #4183c4; }
 
 @media screen and (max-width: 520px) {
   .logo, nav {
