jekyll-theme-charcoal 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ddf7b87f822559798f5c474409de9cd1a621e993
-  data.tar.gz: d59f4937ab2d3f1b30abfd1dddb7210a7788c67a
+  metadata.gz: 8965ca5c83b22a9d32d141305dd489ba9a06808f
+  data.tar.gz: 53d48d44c867bfd18d57c4169954d4e1d7c4a704
 SHA512:
-  metadata.gz: b22712c4fd7262db25359d71dade6a9f437865ad79ee5a5bc527f5b1edf13eb30621d7a8047cafa7b80ce0918455d3c5c45bf37d6181dc5607468eb1f0de82c8
-  data.tar.gz: 6b7a2b6507858cc886a7e28b8c92b3ef0c8e6bb044f96ee9e223d67643c47e2e0ba82605bcdd83361535601a1a3a11fc9cf79d48bc0ac8b3024bbe1f2c89c704
+  metadata.gz: 56e4160304f965a685d392ce69fa7c39eff795d370e084acaf463a46900e0beaed0acb9398788a4be40228309cf03be751a3cfc625ab7697389b5d450f5d2e46
+  data.tar.gz: 8d799f0d1818fa3e6e9640952914c6dfc0d60badadce2f3c41b67ec33e749880700a0c79cd74b5bc9126afb7f0c125b7d04c08e01c6b197942a8349a4413b717

data/README.md

@@ -1,18 +1,20 @@
 ---
 layout: home
-title: Charcoal
+title: Charcoal Theme
 permalink: /index.html
 ---
-# Charcoal
+# About
 
-A dark theme for [jekyll](https://jekyllrb.com/).
+Charcoal is a dark theme for [jekyll](https://jekyllrb.com/).
 
-## Usage
+# Usage
 
 The theme is available as open source under the terms of the [MIT License](LICENSE.txt).
 It is distributed as a [ruby gem](https://rubygems.org/gems/jekyll-theme-charcoal).
 
-### Installation
+[![Gem Version](https://badge.fury.io/rb/jekyll-theme-charcoal.svg)](https://badge.fury.io/rb/jekyll-theme-charcoal)
+
+## Installation
 
 Add this line to your Jekyll site's `Gemfile`:
 
@@ -39,32 +41,40 @@ user@localhost ~/my-awesome-site
 $ bundle install
 ```
 
-### Layouts
+## Layouts
 
 * `default` is the base layout, contianing only a header and content.
 * `home` is ideal for a landing page, as it includes not only the content, but also a blog roll with RSS link and social links as configured below.
 * `page` is currently no more than a repackaged default.
 * `post` is currently no more than a repackaged default, except that [posts](https://jekyllrb.com/docs/posts/) are indexed and listed on the `home` page. 
 
-In addition to the standard jekyll front matter, the charcoal theme can use `author_name` and `author_url` to add some background information about each page or post:
+In addition to the standard jekyll front matter, the charcoal theme will use the following variables on each page:
 
 ```yaml
-author_name: Greg Gibeling
-author_url: https://github.com/gdgib/
+toc: true                             # Adds a table of contents to the left sidebar of the page
+bare: true                            # Make this page by not displaying author information, and ensuring there's no table of contents
+author_name: Greg Gibeling            # Sets the name of the author
+author_url: https://github.com/gdgib/ # An optional link to a page specific to the author
 ```
 
-### Customization
+## 404
+
+You should copy our [404](https://github.com/g2forge/charcoal/blob/master/404.html) page into your site.
+Ours is configured to display in the most friendly manner.
+
+## Customization
 
 You can configure a default author for pages and posts in your `_config.yml`:
 
-```
-author_name: Greg Gibeling
-author_url: https://github.com/gdgib/
+```yaml
+toc: true                             # Sets whether to adds a table of contents to the left sidebar of the page by default
+author_name: Greg Gibeling            # Sets the name of the default author, which can be overriden on each page
+author_url: https://github.com/gdgib/ # An optional link to a page specific to the default author, can be overriden on each page
 ```
 
 As [in minima](https://github.com/jekyll/minima/blob/master/README.md#social-networks) you can add links to the accounts you have on other sites, with respective icon, by adding one or more of the following options in your `_config.yml`:
 
-```
+```yaml
 twitter_username: jekyllrb
 github_username:  jekyll
 dribbble_username: jekyll
@@ -84,7 +94,34 @@ mastodon:
    instance: example.com
 ```
 
-## Contributing
+## Includes
+
+Below is a list of the includes designed to be used manually.
+The theme itself uses several includes which are automatically used that you may also wish to explore.
+
+### About Image
+
+The `about_image.html` include will generate a small section including a profile picture on the left and some HTML content on the right.
+While intended for talking about, for example, the author of a webite we encourage you to get creative with this. 
+
+Usage:
+
+```liquid
+{% raw %}
+{% capture about %}
+Some content goes here
+{% endcapture %}
+{% include about_image.html image_src="images/Profile.jpg" image_alt="My awesome profile picture" content=about %}
+{% endraw %}
+```
+
+Parameters:
+
+* `image_src` (`string`) - The page or URL of the image to display
+* `image_alt` (`string`) - The alternate text of the image
+* `content`   (`text`) - The content to display to the right of the image
+
+# Contributing
 
 Issues and pull requests are welcome on [github.com/g2forge/charcoal](https://github.com/g2forge/charcoal).
 
@@ -123,9 +160,10 @@ user@localhost ~/charcoal
 $ gem push ./jekyll-theme-charcoal-<VERSION>.gem
 ```
 
-## Inspiration
+# Inspiration
 
-This theme is based on the following themes:
+This theme is based on the following:
 
-* [minima](https://github.com/jekyll/minima) by [Jekyll](https://jekyllrb.com/)
-* [midnight](https://github.com/pages-themes/midnight) by [Matt Graham](https://twitter.com/michigangraham)
+* [midnight](https://github.com/pages-themes/midnight) by [Matt Graham](https://twitter.com/michigangraham) - design, structure, fonts, etc
+* [minima](https://github.com/jekyll/minima) by [Jekyll](https://jekyllrb.com/) - including social icons and design
+* [jekyll-toc](https://github.com/allejo/jekyll-toc) by [Vladimir Jimenez](https://github.com/allejo) - for the fancy table of contents

data/_includes/about_image.html

@@ -0,0 +1,7 @@
+<div class="about_image">
+	<div class="about_image_col">
+		<img src="{{ include.image_src }}" alt="{{ include.image_alt }}" class="about_image_image"/>
+	</div>
+	<div class="about_image_col about_image_content">{{ include.content }}</div>
+</div>
+<br/>

data/_includes/footer.html

@@ -0,0 +1,17 @@
+<footer>
+	<div class="content">
+	<div class="wrapper">
+		<div class="footer-col footer-col-1">
+			<h2 class="footer-heading">{{ site.title | escape }}</h2>
+		</div>
+		<div class="footer-col footer-col-2">
+			{% if site.dribbble_username or site.facebook_username or site.flickr_username or site.github_username or site.instagram_username or site.linkedin_username or site.pinterest_username or site.mastodon or site.twitter_username or site.youtube_username or site.googleplus_username or site.rss %}
+				{% include social.html %}
+			{% endif %}
+		</div>
+		<div class="footer-col footer-col-3">
+			<p>{{ site.description | escape }}</p>
+		</div>
+	</div>
+	</div>
+</footer>

data/_includes/header.html

@@ -1,8 +1,12 @@
 <div id="header">
 	<div class="wrapper">
 		<div id="title">
-			<h1><a class="site-title" rel="project" href="{{ "/" | relative_url }}">{{ site.title | default: site.github.repository_name | escape }}</a></h1>
-			<p>{{ site.description | default: site.github.project_tagline | escape }}</p>
+			<h1><a class="site-title" rel="project" href="{{ "/" | relative_url }}">
+				{% if site.image %}
+					<img class="site-image" src="{{ site.image }}"/>
+				{% endif %}
+				{{ site.title | default: site.github.repository_name | escape }}
+			</a></h1>
 			<span class="credits left"><a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></span>
 			<span class="credits right">Hosted on GitHub Pages &mdash; <a href="https://github.com/g2forge/charcoal">Charcoal theme</a> inspired by <a href="https://twitter.com/michigangraham">mattgraham</a></span>
 		</div>

data/_includes/social.html

@@ -1,4 +1,5 @@
 <ul class="social-media-list">
+	{% if site.email %}<li><a href="mailto:{{ site.email }}"><span class="username">{{ site.email| escape }}</span></a></li>{% endif %}
 	{% if site.dribbble_username%}<li><a href="https://dribbble.com/{{ site.dribbble_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#dribbble' | relative_url }}"></use></svg> <span class="username">{{ site.dribbble_username| escape }}</span></a></li>{% endif %}
 	{% if site.facebook_username%}<li><a href="https://www.facebook.com/{{ site.facebook_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#facebook' | relative_url }}"></use></svg> <span class="username">{{ site.facebook_username| escape }}</span></a></li>{% endif %}
 	{% if site.flickr_username%}<li><a href="https://www.flickr.com/photos/{{ site.flickr_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#flickr' | relative_url }}"></use></svg> <span class="username">{{ site.flickr_username| escape }}</span></a></li>{% endif %}

data/_includes/toc.html

@@ -0,0 +1,86 @@
+<!-- Code copied from https://github.com/allejo/jekyll-toc, under MIT license (https://github.com/allejo/jekyll-toc/blob/6d617d96e68111890d139e7d0577ae853527130b/LICENSE.MIT.md) -->
+{% capture tocWorkspace %}
+    {% comment %}
+        Version 1.0.4
+          https://github.com/allejo/jekyll-toc
+
+        "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
+
+        Usage:
+            {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
+
+        Parameters:
+            * html       (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+
+        Optional Parameters:
+            * sanitize   (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
+            * class      (string) :   ''   - a CSS class assigned to the TOC
+            * id         (string) :   ''   - an ID to assigned to the TOC
+            * h_min      (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
+            * h_max      (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
+            * ordered    (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
+            * item_class (string) :   ''   - add custom class for each list item; has support for '%level%' placeholder, which is the current heading level
+
+        Output:
+            An ordered or unordered list representing the table of contents of a markdown block. This snippet will only generate the table of contents and will NOT output the markdown given to it
+    {% endcomment %}
+
+    {% capture my_toc %}{% endcapture %}
+    {% assign orderedList = include.ordered | default: false %}
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign nodes = include.html | split: '<h' %}
+    {% assign firstHeader = true %}
+
+    {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+        {% if headerLevel < minHeader or headerLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% if firstHeader %}
+            {% assign firstHeader = false %}
+            {% assign minHeader = headerLevel %}
+        {% endif %}
+
+        {% assign indentAmount = headerLevel | minus: minHeader | add: 1 %}
+        {% assign _workspace = node | split: '</h' %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+        {% assign html_id = _idWorkspace[0] %}
+
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+        {% assign space = '' %}
+        {% for i in (1..indentAmount) %}
+            {% assign space = space | prepend: '    ' %}
+        {% endfor %}
+
+        {% unless include.item_class == blank %}
+            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+        {% endunless %}
+
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}](#{{ html_id }}){% endcapture %}
+
+    {% endfor %}
+
+    {% if include.class %}
+        {% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+
+    {% if include.id %}
+        {% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}

data/_layouts/default.html

@@ -2,19 +2,33 @@
 <html lang="{{ page.lang | default: site.lang | default: "en-US" }}">
 	{% include head.html %}
 	<body>
-		{% include header.html %}
-		<div class="wrapper">
-			<section>
-				<div id="title">
-					<h1>{{ page.title }}</h1>
-					<hr>
-					<span class="credits left">By <a href="{{ page.author_url | default: site.author_url }}">{{ page.author_name | default: site.author_name }}</a></span>
-					<span class="credits right">{{ page.date | date: date_format }}</span>
-				</div>
-
-				{{ content }}
-				
-			</section>
+		<div class="nonfooter">
+			{% include header.html %}
+			<div class="wrapper">
+				<section>
+					<div id="title">
+						<h1>{{ page.title }}</h1>
+						<hr>
+						{% unless page.bare %}
+						<span class="credits left">By <a href="{{ page.author_url | default: site.author_url }}">{{ page.author_name | default: site.author_name }}</a></span>
+						<span class="credits right">{{ page.date | date: date_format }}</span>
+						{% endunless %}
+					</div>
+	
+					<div class="content">
+						{% unless page.bare %}{% assign generate_toc = page.toc | default: site.toc %}{% if generate_toc %}
+							<div class="sidebar">
+								<h1 id="contents">Contents</h1>
+								{% include toc.html html=content %}
+							</div>
+						{% endif %}{% endunless %}
+						
+						<div class="main">
+							{{ content }}
+						</div>
+					</div>
+				</section>
+			</div>
 		</div>
 		{% include footer.html %}
 	</body>

data/_layouts/home.html

@@ -4,13 +4,13 @@ layout: default
 {{ content }}
 
 {% if site.posts.size > 0 %}
-	<h1 class="post-list-heading">{{ page.list_title | default: "Blog" }} <a href="{{ "/feed.xml" | relative_url }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#rss' | relative_url }}"></use></svg></a></h1>
+	<h1 class="post-list-heading" id="blog">{{ page.list_title | default: "Blog" }} <a href="{{ "/feed.xml" | relative_url }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#rss' | relative_url }}"></use></svg></a></h1>
 	<ul class="post-list">
 		{% for post in site.posts %}
 		<li>
 			{% assign date_format = site.charcoal.date_format | default: "%b %-d, %Y" %}
 			<span class="post-meta">{{ post.date | date: date_format }}, <a href="{{ page.author_url | default: site.author_url }}">{{ page.author_name | default: site.author_name }}</a></span>
-			<h2><a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h2>
+			<h2 id="{{ post.slug | handleize }}"><a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h2>
 			{% if site.show_excerpts %}
 				{{ post.excerpt }}
 			{% endif %}
@@ -18,7 +18,3 @@ layout: default
 		{% endfor %}
 	</ul>
 {% endif %}
-{% if site.dribbble_username or site.facebook_username or site.flickr_username or site.github_username or site.instagram_username or site.linkedin_username or site.pinterest_username or site.mastodon or site.twitter_username or site.youtube_username or site.googleplus_username or site.rss %}
-	<h1>Social</h1>
-	{% include social.html %}
-{% endif %}

data/_sass/fonts.scss

@@ -7,7 +7,6 @@
          url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
 
 @font-face {
@@ -19,7 +18,6 @@
          url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
 
 @font-face {
@@ -92,4 +90,4 @@
     font-weight: normal;
     font-style: normal;
     -webkit-font-smoothing:antialiased;
-}
+}

data/_sass/jekyll-theme-charcoal.scss

@@ -2,93 +2,79 @@
 @import "fonts";
 @import "rouge-base16-dark.scss";
 
-$charcoal-width: 1300px;
-$charcoal-header-height: 110px;
-
+$charcoal-color-highlight:  #2288ff;
+$charcoal-color-text:       #d8d8d8;
+$charcoal-color-background: #1c1c1e;
+$charcoal-width:            1300px;
+$charcoal-header-height:    60px;
+$spacing-unit:              10px;
+
+html, body { height: 100%; }
 body {
-  padding:0px 0 20px 0px;
-  margin: 0px;
-  font:14px/1.5 "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color:#f0e7d5;
-  font-weight: normal;
-  background: #252525;
-  background-attachment: fixed !important;
-  background: linear_gradient(#2a2a29, #1c1c1c);
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color:#e8e8e8;
-  margin:0 0 10px;
-  font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  
+  padding: 0;
+  margin: 0;
+  font: 14px/1.5 "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: $charcoal-color-text;
   font-weight: normal;
+  background: $charcoal-color-background;
 }
+.nonfooter { flex: 1 0 auto; }
 
-p, ul, ol, table, pre, dl {
-  margin:0 0 20px;
-}
-
-h1, h2, h3 {
-  line-height:1.1;
-
-}
-
-h1 {
-  font-size:28px;
+p, table, pre, ul, ol, dl {
+  margin: 0 0 20px;
 }
-
-h2 {
-  font-size: 24px;
+ul, ol, dl {
+	ul, ol, dl {
+		margin: 0;
+	}
 }
 
-h4, h5, h6 {
-  color:#e8e8e8;
+h1, h2, h3, h4, h5, h6 {
+  position: relative;
+  z-index: -1;
+  color: lighten($charcoal-color-text, 20%);
+  padding-top: $charcoal-header-height + 10px;
+  margin: -$charcoal-header-height - 10px 0 10px;
+  font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: normal;
 }
-
+h1, h2, h3 { line-height: 1.1; }
+h1         { font-size: 28px; }
+h2         { font-size: 24px; }
 h3 {
   font-size: 18px;
   line-height: 24px;
   font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
   font-weight: normal;
-  color: #b6b6b6;
 }
 
 a {
-  color:#ffcc00;
-  font-weight:400;
-  text-decoration:none;
-
-  &:hover {
-    color: #ffeb9b;
-  }
-  
-  .social-media-list &:hover {
-    text-decoration: none;
-
-    .username {
-      text-decoration: underline;
-    }
-  }
+  color: $charcoal-color-highlight;
+  font-weight: 400;
+  text-decoration: none;
+  &:hover { color: lighten($charcoal-color-highlight, 25%); }
 }
 
 a small {
-  font-size:11px;
-  color:#666;
-  margin-top:-0.6em;
-  display:block;
+  font-size: 11px;
+  color: #666;
+  margin-top: -0.6em;
+  display: block;
 }
 
 .social-media-list {
-  li + li {
-    padding-top: 5px;
-  }
+  li + li { padding-top: 5px; }
 }
 
 .svg-icon {
   width: 16px;
   height: 16px;
   display: inline-block;
-  fill: #ffcc00;
-  padding-right: 5px;
+  fill: $charcoal-color-highlight;
+  padding-right: 2px;
   vertical-align: middle;
 }
 
@@ -102,43 +88,39 @@ strong {
 }
 
 .wrapper {
-  max-width:$charcoal-width;
-  margin:0 auto;
-  position:relative;
+  max-width: $charcoal-width;
+  margin: 0 auto;
+  position: relative;
   padding: 0 20px;
 }
 
-section img {
-  max-width: 100%;
-}
-
 blockquote {
-  border-left:3px solid #ffcc00;
-  margin:0;
-  padding:0 0 0 20px;
-  font-style:italic;
+  border-left: 3px solid #ffcc00;
+  margin: 0;
+  padding: 0 0 0 20px;
+  font-style: italic;
 }
 
 code {
   font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
-  color:#efefef;
-  font-size:13px;
-  margin: 0 4px;
-  padding: 4px 6px;
-  border-radius: 2px;
+  color: darken($charcoal-color-text, 20%);
+  font-size: 13px;
+  margin: 0 1px;
+  padding: 1px 2px;
+  border-radius: 1px;
 }
 
 pre {
-  padding:8px 15px;
-  background: #191919;
+  padding: 8px 15px;
+  background: darken($charcoal-color-background, 5%);
   border-radius: 2px;
-  border:1px solid #121212;
+  border: 1px solid darken($charcoal-color-background, 10%);
   box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
   overflow: auto;
   overflow-y: hidden;
 
   code {
-    color: #efefef;
+    color: darken($charcoal-color-text, 20%);
     text-shadow: 0px 1px 0px #000;
     margin: 0;
     padding: 0;
@@ -160,9 +142,9 @@ th {
 }
 
 td {
-  text-align:left;
-  padding:5px 10px;
-  border-bottom:1px solid #434343;
+  text-align: left;
+  padding: 5px 10px;
+  border-bottom: 1px solid #434343;
 }
 
 hr {
@@ -181,25 +163,31 @@ dt {
 
 #header {
   z-index: 100;
-  left:0;
+  position: fixed;
   top: 0px;
   height: $charcoal-header-height;
+  left: 0;
   width: 100%;
-  position: fixed;
-  background: url(../images/nav-bg.gif) #353535;
-  border-bottom: 4px solid #434343;
+  
+  background: url(../images/nav-bg.gif) lighten($charcoal-color-background, 5%);
+  border-bottom: 4px solid lighten($charcoal-color-background, 20%);
   box-shadow: 0px 1px 3px rgba(0,0,0,.25);
   
   #title {
     margin: 0 0 0 0;
     
 	h1 {
+	  position: relative;
+	  z-index: 100;
       text-align: left;
       line-height: 40px;
 	}
 	
-	p {
-      text-align: left;
+	p { text-align: left; }
+	.site-image {
+      width: 40px;
+      border-radius: 2px;
+      vertical-align: middle;
     }
   }
 
@@ -253,16 +241,21 @@ dt {
 }
 
 section {
-  max-width:$charcoal-width;
+  max-width: $charcoal-width;
   padding: 10px 0px 10px 0px;
   margin: 20px 0;
   margin-top: $charcoal-header-height + 10px;
+  
+  img { max-width: 100%; }
+  
+  .content { display: flex; }
+  .sidebar { flex: 20%; }
 }
 
 #title {
   border: 0;
   outline: none;
-  margin: 0 0 30px 0;
+  margin: 0 0 15px 0;
   padding: 0 0 5px 0;
 
   h1 {
@@ -288,47 +281,62 @@ section {
     color: #696969;
     margin-top: -10px;
 
-    &.left {
-      float: left;
-    }
+    &.left { float: left; }
+    &.right { float: right; }
+  }
+}
 
-    &.right {
-      float: right;
+footer {
+  z-index: -3;
+  flex-shrink: 0;
+  padding-top: 10px;
+  width: 100%;
+  background: url(../images/nav-bg.gif) lighten($charcoal-color-background, 5%);
+  border-top: 4px solid lighten($charcoal-color-background, 20%);
+  
+  .wrapper {
+  	display: flex;
+    .footer-col-1 {
+      width: -webkit-calc(20% - (#{$spacing-unit} / 2));
+      width:         calc(20% - (#{$spacing-unit} / 2));
+    }
+    .footer-col-2 {
+      width: -webkit-calc(35% - (#{$spacing-unit} / 2));
+      width:         calc(35% - (#{$spacing-unit} / 2));
+    }
+    .footer-col-3 {
+      width: -webkit-calc(45% - (#{$spacing-unit} / 2));
+      width:         calc(45% - (#{$spacing-unit} / 2));
     }
   }
 }
 
-@media print, screen and (max-width: 720px) {
-  #title {
-    .credits {
-      display: block;
-      width: 100%;
-      line-height: 30px;
-      text-align: center;
-
-      .left {
-        float: none;
-        display: block;
-      }
-
-      .right {
-        float: none;
-        display: block;
-      }
-    }
+.about_image {
+  display: flex;
+  align-items: center;
+  
+  .about_image_col { float: left; }
+  .about_image_content { margin-left: 20px; }
+  .about_image_image {
+    width: 200px;
+    border-radius: 15px;
   }
 }
 
 @media print, screen and (max-width: 480px) {
   #header {
-    margin-top: -20px;
-  }
-
-  section {
-    margin-top: 40px;
+  	height: $charcoal-header-height - 65px;
+  	#title {
+  	  p { display: none; }
+  	  .credits { display: none; }
+    }
   }
-  
-  nav {
-    display: none;
+  section { margin-top: $charcoal-header-height - 65px; }
+  nav { display: none; }
+  footer {
+      .wrapper {
+      	flex-wrap: wrap;
+        .footer-col { width: 100%; }
+      }
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-charcoal
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Greg Gibeling
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-08 00:00:00.000000000 Z
+date: 2018-03-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -75,11 +75,13 @@ extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
+- _includes/about_image.html
 - _includes/footer.html
 - _includes/google-analytics.html
 - _includes/head.html
 - _includes/header.html
 - _includes/social.html
+- _includes/toc.html
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/page.html
@@ -127,7 +129,7 @@ files:
 - assets/images/nav-bg.gif
 - assets/js/respond.js
 - assets/minima-social-icons.svg
-homepage: https://github.com/g2forge/charcoal
+homepage: http://www.g2forge.com/charcoal/
 licenses:
 - MIT
 metadata: {}