adding sass libraries, updating README

.gitignore

@@ -1,8 +1,7 @@
+.DS_Store
+
 # Compiled site
 _site
 
-# Sass, external liraries
-.sass-cache
-_sass/base
-_sass/bourbon
-_sass/neat
+# Sass garbage
+.sass-cache

README.md

@@ -1,16 +1,16 @@
 # Centrarium
 
-A custom theme for my blog. You're welcome to use it, too!
+A custom theme for my Jekyll blog. 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].
+
+Demo: TO-DO.
 
 ## Installation
 
-### Required libraries
+TO-DO.
 
-```
-# Install Sass libraries
-gem install bourbon neat bitters
-cd _sass
-bourbon install
-neat install
-bitters install
-```
+[bourbon]: http://bourbon.io/
+[neat]: http://neat.bourbon.io/
+[bitters]: http://bitters.bourbon.io/
+[fontawesome]: http://fortawesome.github.io/Font-Awesome/

_includes/footer.html

@@ -4,39 +4,37 @@
 
     <h2 class="footer-heading">{{ site.title }}</h2>
 
-    <div class="">
-      <div class="">
-        <ul class="contact-list">
-          <li>{{ site.title }}</li>
-          <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
-        </ul>
-      </div>
-
-      <div class="">
-        <ul class="social-media-list">
-          {% if site.github_username %}
-          <li>
-            <a href="https://github.com/{{ site.github_username }}">
-              <i class="fa fa-github"></i>
-              <span class="username">{{ site.github_username }}</span>
-            </a>
-          </li>
-          {% endif %}
-
-          {% if site.twitter_username %}
-          <li>
-            <a href="https://twitter.com/{{ site.twitter_username }}">
-              <i class="fa fa-twitter"></i>
-              <span class="username">{{ site.twitter_username }}</span>
-            </a>
-          </li>
-          {% endif %}
-        </ul>
-      </div>
-
-      <div class="">
-        <p class="text">{{ site.description }}</p>
-      </div>
+    <div class="site-contact">
+      <ul class="contact-list">
+        <li>{{ site.title }}</li>
+        <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+      </ul>
+    </div>
+
+    <div class="site-social">
+      <ul class="social-media-list">
+        {% if site.github_username %}
+        <li>
+          <a href="https://github.com/{{ site.github_username }}">
+            <i class="fa fa-github"></i>
+            <span class="username">{{ site.github_username }}</span>
+          </a>
+        </li>
+        {% endif %}
+
+        {% if site.twitter_username %}
+        <li>
+          <a href="https://twitter.com/{{ site.twitter_username }}">
+            <i class="fa fa-twitter"></i>
+            <span class="username">{{ site.twitter_username }}</span>
+          </a>
+        </li>
+        {% endif %}
+      </ul>
+    </div>
+
+    <div class="site-signature">
+      <p class="text">{{ site.description }}</p>
     </div>
 
   </div>

_includes/header.html

@@ -1,14 +1,14 @@
 <header class="site-header">
-
   <div class="wrapper">
-
-    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
-
+    <!-- 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 %}
           {% if page.title %}
@@ -17,7 +17,5 @@
         {% endfor %}
       </div>
     </nav>
-
   </div>
-
 </header>

_posts/2015-04-16-welcome-to-jekyll.markdown

@@ -0,0 +1,25 @@
+---
+layout: post
+title:  "Welcome to Jekyll!"
+date:   2015-04-16 08:43:59
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll’s dedicated Help repository][jekyll-help].
+
+[jekyll]:      http://jekyllrb.com
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-help]: https://github.com/jekyll/jekyll-help

_posts/2015-04-17-welcome-to-jekyll.markdown

@@ -0,0 +1,25 @@
+---
+layout: post
+title:  "Welcome to Jekyll!"
+date:   2015-04-17 08:43:59
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll’s dedicated Help repository][jekyll-help].
+
+[jekyll]:      http://jekyllrb.com
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-help]: https://github.com/jekyll/jekyll-help

_posts/2015-04-18-welcome-to-jekyll.markdown

@@ -0,0 +1,25 @@
+---
+layout: post
+title:  "Welcome to Jekyll!"
+date:   2015-04-18 08:43:59
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll’s dedicated Help repository][jekyll-help].
+
+[jekyll]:      http://jekyllrb.com
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-help]: https://github.com/jekyll/jekyll-help

_sass/_layout.scss

@@ -3,22 +3,42 @@
 /*
 *	Variables
 */
-$wrapper-max-width: 960px;
+$b3: 480px;
+$b2: 768px;
+$b1: 960px;
+$mobile: new-breakpoint(max-width $b3 4);
+$tablet: new-breakpoint(max-width $b2 4);
 
 /*
 *	Header
 */
 .site-header {
+	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)
+			}
+		}
 	}
 }
 
 /*
 *	Body
 */
 .page-content {
-
+	background-color: rgba(0,255,0,.1);
 	.wrapper {
 		@include outer-container;
 
@@ -44,5 +64,26 @@ $wrapper-max-width: 960px;
 *	Footer
 */
 .site-footer {
-
+	background-color: rgba(0,0,255,.1);
+	.wrapper {
+		@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)
+			}
+		}
+	}
 }

_sass/base/_base.scss

@@ -0,0 +1,15 @@
+// Bitters 1.0.0
+// http://bitters.bourbon.io
+// Copyright 2013-2015 thoughtbot, inc.
+// MIT License
+
+@import "variables";
+
+// Neat Settings -- uncomment if using Neat -- must be imported before Neat
+// @import "grid-settings";
+
+@import "buttons";
+@import "forms";
+@import "lists";
+@import "tables";
+@import "typography";

_sass/base/_buttons.scss

@@ -0,0 +1,31 @@
+#{$all-button-inputs},
+button {
+  @include appearance(none);
+  -webkit-font-smoothing: antialiased;
+  background-color: $action-color;
+  border-radius: $base-border-radius;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.75em 1em;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    background-color: darken($action-color, 15%);
+    color: #fff;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}