working on typography, header

bencentra · Apr 14, 2015 · abb1ed1 · abb1ed1
1 parent 66dd83d
commit abb1ed1
Show file tree

Hide file tree

Showing 9 changed files with 354 additions and 58 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{html,js,scss}]
+charset = utf-8
+indent_style = tab
+indent_size = 2
diff --git a/README.md b/README.md
@@ -1,16 +1,27 @@
 # Centrarium
 
-A custom theme for my Jekyll blog. If you like it, you're welcome to use it, too!
+A custom theme for [my Jekyll blog][bencentra]. If you like it, you're welcome to use it, too!
 
-Uses [Bourbon][bourbon], [Neat][neat], and [Bitters][bitters] (thanks, thoughtbot!), as well as [Font Awesome][fontawesome].
+Built with these awesome libraries: 
+* [Bourbon][bourbon] 
+* [Neat][neat]
+* [Bitters][bitters]
+* [Refills][refills]
+* [Font Awesome][fontawesome]
 
-Demo: TO-DO.
+Demo: TO-DO
 
 ## Installation
 
-TO-DO.
+TO-DO
 
+## Configuration
+
+TO-DO
+
+[bencentra]: http://bencentra.com
 [bourbon]: http://bourbon.io/
 [neat]: http://neat.bourbon.io/
 [bitters]: http://bitters.bourbon.io/
-[fontawesome]: http://fortawesome.github.io/Font-Awesome/
+[refills]: http://refills.bourbon.io/
+[fontawesome]: http://fortawesome.github.io/Font-Awesome/
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -40,3 +40,25 @@ <h2 class="footer-heading">{{ site.title }}</h2>
   </div>
 
 </footer>
+
+<!-- Scripts -->
+<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
+<script>
+
+$(document).ready(function() {
+	// Header
+  var menuToggle = $('#js-mobile-menu').unbind();
+  $('#js-navigation-menu').removeClass("show");
+  menuToggle.on('click', function(e) {
+    e.preventDefault();
+    $('#js-navigation-menu').slideToggle(function(){
+      if($('#js-navigation-menu').is(':hidden')) {
+        $('#js-navigation-menu').removeAttr('style');
+      }
+    });
+  });
+
+
+});
+
+</script>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,21 +1,20 @@
-<header class="site-header">
-  <div class="wrapper">
-    <!-- Site Brand (logo, etc) -->
-    <div class="site-brand">
-      <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
-    </div>
-    <!-- Site Navigation -->
-    <nav class="site-nav">
-      <a href="#" class="menu-icon">
-        <i class="fa fa-bars"></i>
-      </a>
-      <div class="">
-        {% for page in site.pages %}
+<header class="navigation" role="banner">
+  <div class="navigation-wrapper">
+    <a href="{{ site.baseurl }}/" class="logo">
+      <!-- <img src="//raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image"> -->
+      <span>{{ site.title }}</span>
+    </a>
+    <a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">
+    	<i class="fa fa-bars"></i>
+    </a>
+    <nav role="navigation">
+      <ul id="js-navigation-menu" class="navigation-menu show">
+      	{% for page in site.pages %}
           {% if page.title %}
-          <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+          <li class="nav-link"><a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
           {% endif %}
         {% endfor %}
-      </div>
+      </ul>
     </nav>
   </div>
 </header>
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -4,34 +4,105 @@
 *	Variables
 */
 $b3: 480px;
+$mobile: $b3;
 $b2: 768px;
+$tablet: $b2;
 $b1: 960px;
-$mobile: new-breakpoint(max-width $b3 4);
-$tablet: new-breakpoint(max-width $b2 4);
+$large-screen: $b1;
+
 
 /*
 *	Header
 */
-.site-header {
+
+.navigation {
 	background-color: rgba(255,0,0,.1);
-	.wrapper {
-		@include outer-container;
-		.site-brand {
-			@include span-columns(6);
-			@include media($mobile) {
-				@include span-columns(12)
-			}
-			.site-title {
-
-			}
-		}
-		.site-nav {
-			@include span-columns(6);
-			@include media($mobile) {
-				@include span-columns(12)
-			}
-		}
-	}
+	padding: .25em;
+
+  // Mobile view
+  .navigation-menu-button {
+    display: block;
+    float: right;
+    margin: 0;
+    padding-right: 0.25em;
+    font-size: 1.5em;	
+
+    @include media ($tablet) {
+      display: none;
+    }
+  }
+
+  // Nav menu
+  .navigation-wrapper {
+  	@include outer-container;
+    @include clearfix;
+    position: relative;
+  }
+
+  .logo {
+    float: left;
+
+    img {
+      max-height: 2em;
+      padding-right: 1em;
+    }
+
+    span {
+    	padding: .5em;
+    	font-size: 1.5em;
+    }
+  }
+
+  nav {
+    float: none;
+
+    @include media ($tablet) {
+      float: right;
+      line-height: 1.5em;
+      padding-top: 0.3em;
+    }
+  }
+
+  ul.navigation-menu {
+    clear: both;
+    display: none;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 0;
+    width: 100%;
+
+    @include media ($tablet) {
+      display: block;
+      margin: 0;
+      padding: 0;
+    }
+
+    &.show {
+      display: block;
+    }
+  }
+
+  // Nav items
+  ul li.nav-link {
+    display: block;
+    text-align: right;
+    width: 100%;
+
+    @include media ($tablet) {
+      background: transparent;
+      display: inline;
+      text-decoration: none;
+      width: auto;
+    }
+  }
+
+  li.nav-link a {
+    display: inline-block;
+
+    @include media ($tablet) {
+      padding-right: 1em;
+    }
+  }
 }
 
 /*
@@ -69,21 +140,15 @@ $tablet: new-breakpoint(max-width $b2 4);
 		@include outer-container;
 		.site-contact {
 			@include span-columns(4);
-			@include media($mobile) {
-				@include span-columns(12)
-			}
+
 		}
 		.site-social {
 			@include span-columns(4);
-			@include media($mobile) {
-				@include span-columns(12)
-			}
+
 		}
 		.site-signature {
 			@include span-columns(4);
-			@include media($mobile) {
-				@include span-columns(12)
-			}
+
 		}
 	}
-}
+}
diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss
@@ -16,7 +16,26 @@ h6 {
   font-family: $heading-font-family;
   font-size: $base-font-size;
   line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
+  // margin: 0 0 $small-spacing;
+  margin: 0 0 1rem;
+}
+h1 {
+	font-size: 2rem;
+}
+h2 {
+	font-size: 1.5rem;
+}
+h3 {
+	font-size: 1.25rem;
+}
+h4 {
+	font-size: 1rem;
+}
+h5 {
+	font-size: 0.87rem;
+}
+h6 {
+	font-size: 0.8rem;
 }
 
 p {

diff --git a/_sass/base/_variables.scss b/_sass/base/_variables.scss
@@ -3,15 +3,15 @@ $base-font-family: $helvetica;
 $heading-font-family: $base-font-family;
 
 // Font Sizes
-$base-font-size: 1em;
+$base-font-size: $em-base;
 
 // Line height
 $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
 // Other Sizes
 $base-border-radius: 3px;
-$base-spacing: $base-line-height * 1em;
+$base-spacing: $base-line-height * $em-base;
 $small-spacing: $base-spacing / 2;
 $base-z-index: 0;
 

diff --git a/css/main.scss b/css/main.scss
@@ -6,8 +6,8 @@
 // Import partials from `sass_dir` (defaults to `_sass`)
 // Includes Bourbon, Neat, and Bitters (thanks, thoughtbot!)
 @import
-    "bourbon/bourbon",
-    "base/base",
-    "neat/neat",
-    "layout"
+  "bourbon/bourbon",
+  "base/base",
+  "neat/neat",
+  "layout"
 ;