Refactor of the nav, and added in new .clearfix

author: Barry Clark <barry@barryclark.co> 2014-06-01 17:12:38 -0400
committer: Barry Clark <barry@barryclark.co> 2014-06-01 17:12:38 -0400
commit: 9d6de3c942b2cfbe0aae3e260c74faffda06b8e5 (patch)
tree: cb5fbb5d8042af41158739085bbe871ce8e6a75d
parent: 5ec5d054c2cb7bd2f60d12edfc54f48185068e78 (diff)
download: kompetenzbolzen.github.io-9d6de3c942b2cfbe0aae3e260c74faffda06b8e5.tar.gz
3 files changed, 89 insertions, 92 deletions
diff --git a/_layouts/default.html b/_layouts/default.html
index 915d7ac..22c6559 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -20,18 +20,18 @@
   <body>
     <div class="wrapper-masthead">
       <div class="container">
-        <header class="masthead">
-          <a href="{{ site.baseurl }}/" class="avatar"><img src="{{ site.avatar }}" /></a>
-          <a href="{{ site.baseurl }}/" class="site-name">{{ site.name }}</a>
-          <br><br>
-          <p class="site-description">{{ site.description }}</p>
+        <header class="masthead clearfix">
+          <a href="{{ site.baseurl }}/" class="site-avatar"><img src="{{ site.avatar }}" /></a>
+          
+          <div class="site-info">
+            <h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
+            <p class="site-description">{{ site.description }}</p>
+          </div>
           
           <nav>
             <a href="{{ site.baseurl }}/">Blog</a>
             <a href="{{ site.baseurl }}/about">About</a>
           </nav>
-
-          <div style="clear:both;"></div>
         </header>
       </div>
     </div>
diff --git a/scss/style.scss b/scss/style.scss
index ff12bc9..9078450 100755
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -127,6 +127,17 @@ img {
   background: $lighterGray;
 }
 
+// Nicolas Gallagher's micro clearfix hack
+// http://nicolasgallagher.com/micro-clearfix-hack/
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
 
 //
 // LAYOUT / SECTIONS
@@ -137,24 +148,19 @@ img {
 //
 
 .wrapper-masthead {
-  //background-color: #e8e8f2;
   margin-bottom: 40px;
 }
 
 .masthead {
   padding: 20px 0;
   border-bottom: 1px solid $lighterGray;
+  
   @include mobile {
     text-align: center;
   }
-
-  // @TODO: OMG this is so bad, I just can't
-  br {
-    visibility: none;
-  }
 }
 
-.avatar {
+.site-avatar {
   float: left;
   width: 70px;
   height: 70px;
@@ -171,66 +177,68 @@ img {
   }
 }
 
-.site-name {
+.site-info {
   float: left;
 
-  font-family: $helveticaNeue; 
-  font-weight: 300;
-  font-size: 28px;
-  letter-spacing: 1px;
   @include mobile {
     float: none;
     display: block;
+    margin: 0 auto;
   }
+}
 
+.site-name {
+  margin: 0;
+  color: $darkGray;
   text-decoration: none;
   cursor: pointer;
-  color: $darkGray;
-  &:hover, &:active {
-    text-decoration: none;
-    
+  font-family: $helveticaNeue; 
+  font-weight: 300;
+  font-size: 28px;
+  letter-spacing: 1px;
+
+  a {
+    &:hover, &:active {
+      color: $blue;
+      text-decoration: none;
+    }
   }
 }
 
 .site-description {
-  float: left;
-  font-size: 16px;
-  margin: 0;
-  margin-top: -5px;
+  margin: -5px 0 0 0;
   color: #777;
-
+  font-size: 16px;
+  
   @include mobile {
-    float: none;
-    display: block;
     margin: 3px 0;
   }
 }
 
 nav {
   float: right;
-  margin-top: -25px; // @TODO - containers for nav and content blocks in header
-
+  margin-top: 23px; // @TODO: Vertically middle align
   font-family: $helveticaNeue; 
   font-size: 18px;
+  
   @include mobile {
     float: none;
-    display: block;
     margin-top: 15px;
+    display: block;
     font-size: 16px;
   }
 
-  // nav has it's own link highlighting
   a {
     margin-left: 25px;
+    color: $darkGray;
     text-align: right;
     font-weight: 300;
     letter-spacing: 1px;
-    color: $darkGray;
 
     &:hover, &:active {
+      color: $darkGray;
       text-decoration: none;
       cursor: pointer;
-      color: $darkGray;
     }
 
     @include mobile {
@@ -239,22 +247,12 @@ nav {
   }
 }
 
-.logo, nav {
-  @include mobile {
-    float: none;
-    width: 100%;
-    text-align: center;
-  }
-}
+
 
 //
 // .main
 //
 
-.wrapper-posts {
-  
-}
-
 .posts > .post {
   padding-bottom: 2em;
   border-bottom: 1px solid $lighterGray;
@@ -275,19 +273,19 @@ nav {
   }
 
   blockquote {
-    border-left: 2px solid $gray;
-    font-size: 22px;
-    font-style: italic;
     margin: 1.8em .8em;
+    border-left: 2px solid $gray;
     padding: 0.1em 1em;
     color: $gray;
+    font-size: 22px;
+    font-style: italic;
   }
 }
 
 .wrapper-footer {
   margin-top: 50px;
-  background-color: #eee;
   border-top: 1px solid #ddd;
+  background-color: #eee;
 }
 
 footer {
diff --git a/style.css b/style.css
index acc9f0a..0007b33 100644
--- a/style.css
+++ b/style.css
@@ -403,6 +403,13 @@ img {
   color: black;
   background: #eeeeee; }
 
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table; }
+
+.clearfix:after {
+  clear: both; }
+
 .wrapper-masthead {
   margin-bottom: 40px; }
 
@@ -412,82 +419,74 @@ img {
   @media screen and (max-width: 520px) {
     .masthead {
       text-align: center; } }
-  .masthead br {
-    visibility: none; }
 
-.avatar {
+.site-avatar {
   float: left;
   width: 70px;
   height: 70px;
   margin-right: 15px; }
   @media screen and (max-width: 520px) {
-    .avatar {
+    .site-avatar {
       float: none;
       display: block;
       margin: 0 auto; } }
-  .avatar img {
+  .site-avatar img {
     border-radius: 5px; }
 
+.site-info {
+  float: left; }
+  @media screen and (max-width: 520px) {
+    .site-info {
+      float: none;
+      display: block;
+      margin: 0 auto; } }
+
 .site-name {
-  float: left;
+  margin: 0;
+  color: #333333;
+  text-decoration: none;
+  cursor: pointer;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 300;
   font-size: 28px;
-  letter-spacing: 1px;
-  text-decoration: none;
-  cursor: pointer;
-  color: #333333; }
-  @media screen and (max-width: 520px) {
-    .site-name {
-      float: none;
-      display: block; } }
-  .site-name:hover, .site-name:active {
+  letter-spacing: 1px; }
+  .site-name a:hover, .site-name a:active {
+    color: #4183c4;
     text-decoration: none; }
 
 .site-description {
-  float: left;
-  font-size: 16px;
-  margin: 0;
-  margin-top: -5px;
-  color: #777777; }
+  margin: -5px 0 0 0;
+  color: #777777;
+  font-size: 16px; }
   @media screen and (max-width: 520px) {
     .site-description {
-      float: none;
-      display: block;
       margin: 3px 0; } }
 
 nav {
   float: right;
-  margin-top: -25px;
+  margin-top: 23px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px; }
   @media screen and (max-width: 520px) {
     nav {
       float: none;
-      display: block;
       margin-top: 15px;
+      display: block;
       font-size: 16px; } }
   nav a {
     margin-left: 25px;
+    color: #333333;
     text-align: right;
     font-weight: 300;
-    letter-spacing: 1px;
-    color: #333333; }
+    letter-spacing: 1px; }
     nav a:hover, nav a:active {
+      color: #333333;
       text-decoration: none;
-      cursor: pointer;
-      color: #333333; }
+      cursor: pointer; }
     @media screen and (max-width: 520px) {
       nav a {
         margin: 0 10px; } }
 
-@media screen and (max-width: 520px) {
-  .logo, nav {
-    float: none;
-    width: 100%;
-    text-align: center; } }
-
-
 .posts > .post {
   padding-bottom: 2em;
   border-bottom: 1px solid #eeeeee; }
@@ -502,17 +501,17 @@ nav {
     color: #4183c4;
     text-decoration: none; }
 .post blockquote {
-  border-left: 2px solid #666666;
-  font-size: 22px;
-  font-style: italic;
   margin: 1.8em 0.8em;
+  border-left: 2px solid #666666;
   padding: 0.1em 1em;
-  color: #666666; }
+  color: #666666;
+  font-size: 22px;
+  font-style: italic; }
 
 .wrapper-footer {
   margin-top: 50px;
-  background-color: #eeeeee;
-  border-top: 1px solid #dddddd; }
+  border-top: 1px solid #dddddd;
+  background-color: #eeeeee; }
 
 footer {
   padding: 20px 0;
author	Barry Clark <barry@barryclark.co>	2014-06-01 17:12:38 -0400
committer	Barry Clark <barry@barryclark.co>	2014-06-01 17:12:38 -0400
commit	9d6de3c942b2cfbe0aae3e260c74faffda06b8e5 (patch)
tree	cb5fbb5d8042af41158739085bbe871ce8e6a75d
parent	5ec5d054c2cb7bd2f60d12edfc54f48185068e78 (diff)
download	kompetenzbolzen.github.io-9d6de3c942b2cfbe0aae3e260c74faffda06b8e5.tar.gz