First pass at masthead styling.

barryclark · barryclark · commit 9931bd1ed25b · 2014-02-17T10:07:14.000-05:00
diff --git 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
@@ -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
@@ -105,21 +105,46 @@ img {
 // LAYOUT / SECTIONS
 //
 
-.logo {
+//
+// .masthead
+//
+
+.masthead {
+  margin: 20px 0 70px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid $darkGray;
+}
+
+.avatar {
   float: left;
+  width: 35px;
 
-  a {
+  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;
-    cursor: pointer;
-    color: $darkGray;
-    &:hover, &:active {
-      color: $blue;
-    }
   }
 }
 
-.avatar {
-  border-radius: 6px;
+.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
@@ -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 {

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`#`
`4`	`4`
`5`	`5`	`# The name of your site`
`6`		`-name: Jekyll Boilerplate`
	`6`	`+name: Barry Clark`
`7`	`7`
`8`	`8`	`# A short bio or description`
`9`	`9`	`description: Short bio of description placeholder.`