Update Site Style

Update the site style and layout, to a more optimized and simple setup.
This new layout uses less css and js and should provide a better UX.
Still need to clean up a few things but ready for release.

Gemfile

@@ -2,5 +2,3 @@ source 'https://rubygems.org'
 require 'rbconfig'
 gem 'wdm', '>=0.1.0' if RbConfig::CONFIG['target_os'] =~ /mswin|mingw/i
 gem 'github-pages'
-# force minimum version of pygments.rb to fix windows issue
-gem 'pygments.rb', '>=0.6.1'

_config.yml

@@ -1,13 +1,27 @@
-# General
-safe: false
-timezone: America/Indiana/Indianapolis
+# Github Enforced
+safe: true
+lsi: false
+
+#General
+timezone: US/Central
+encoding: utf-8
 url: http://blog.voltaicideas.net
 
 # Excludes
-exclude: ['Readme.md', 'config.rb', 'scss', 'Gemfile', 'Gemfile.lock', 'bower_components', 'node_modules', 'Gruntfile.js', 'package.json', 'bower.json']
+exclude: [
+  'README.md',
+  'Gemfile',
+  'Gemfile.lock',
+  'CNAME',
+  'assets/css',
+  'assets/js',
+  'assets/node_modules',
+  'assets/gulpfile.js',
+  'assets/package.json',
+]
 
 # Code highlighting
-pygments: true
+highlighter: pygments
 
 # links
 permalink: date
@@ -15,20 +29,39 @@ permalink: date
 # Markdown
 markdown: redcarpet
 redcarpet:
-    smart: true
-    extensions: ['no_intra_emphasis', 'tables', 'disable_indented_code_blocks', 'strikethrough', 'superscript', 'underline']
+  smart: true
+  extensions: [
+    'no_intra_emphasis',
+    'tables',
+    'disable_indented_code_blocks',
+    'strikethrough',
+    'superscript',
+    'underline',
+    'highlight'
+  ]
 
-# Extra Variables
-owner: 
-    name: Andrew Senetar
-    email: arsenetar@gmail.com
+# Defaults for the front matter
+defaults:
+  -
+    scope:
+      path: "" # all files
+    values:
+      layout: "post"
+  -
+    scope:
+      path: ""
+      type: "posts" # all posts
+    values:
+      layout: "post"
+  -
+    scope:
+      path: ""
+      type: "pages"
+    values:
+      layout: "page"
+
+# Extra Variables for the templates
+owner:
+  name: Andrew Senetar
+  email: arsenetar@gmail.com
 title: Blog@VoltaicIdeas
-
-# Disqus
-disqus_shortname: voltaicideas
-
-# Google Analytics
-ga:
-    code: UA-42346765-1
-    domain: voltaicideas.net
-

_includes/disqus.html

@@ -1,21 +0,0 @@
-<script type="text/javascript">
-    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
-    var disqus_shortname = '{{ site.disqus_shortname }}'; // required: replace example with your forum shortname
-
-        /* * * DON'T EDIT BELOW THIS LINE * * */
-        (function() {
-                 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-                         dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-                                 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-                                     })();
-
-    /* * * DON'T EDIT BELOW THIS LINE * * */
-    (function () {
-             var s = document.createElement('script'); s.async = true;
-                     s.type = 'text/javascript';
-                             s.src = '//' + disqus_shortname + '.disqus.com/count.js';
-                                     (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
-                                         }());
-</script>
-<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

_includes/footer.html

@@ -1,23 +1,8 @@
-<div id="footer" class="row">
-    <div class="small-12 columns text-right">
-        <p>&copy; {{ site.owner.name }} 2013 - {{ site.time | date: '%Y'}} Powered by <a href="http://jekyllrb.com">Jekyll</a></p>
-    </div>
-</div>
-<script src="{{ site.url }}/assets/js/app-concat.js"></script>
-{% if site.ga %}
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-ga('create', '{{ site.ga.code }}', '{{ site.ga.domain }}');
-ga('send', 'pageview');
-
-</script>
-{% endif %}
-{% if page.comments %}
-{% include disqus.html %}
-{% endif %}
-</body>
+        <footer id="mainFooter">
+          <p>&copy; {{ site.owner.name }} 2013 - {{ site.time | date: '%Y'}} Powered by <a href="http://jekyllrb.com">Jekyll</a></p>
+        </footer>
+      </section>
+      </div>
+    <script src="{{ site.url }}/assets/dist/app.js"></script>
+  </body>
 </html>

_includes/header.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<html class="no-js" lang="en" >
-<head>
+<html lang="en" >
+  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% if page.title != nil %}{{ page.title }} - {% endif %}{{ site.title }}</title>
@@ -12,33 +12,30 @@
     {% if site.owner.google_plus %}<link rel="author" href="{{ site.owner.google_plus }}?rel=author">{% endif %}
 
     <!-- Style Sheets -->
-    <link rel="stylesheet" href="{{ site.url }}/assets/css/app.css">
+    <link rel="stylesheet" href="{{ site.url }}/assets/dist/app.css">
 
     <!-- Fonts -->
     <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css' >
-    
+
     <!-- Favicon -->
     <link rel="shortcut icon" href="{{ site.url }}/favicon.ico" >
 
-    <!-- Modernizr -->
-    <script src="{{ site.url }}/assets/js/modernizr.js"></script>
-    
-</head>
-<body itemscope itemtype="http://schema.org/WebPage">
-<div class="contain-to-grid">
-    <nav class="top-bar" data-topbar>
-      <ul class="title-area">
-        <li class="name">
-          <h1><a href="{{ site.url }}/">{{ site.title | uppercase }}</a></h1>
-        </li>
-        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
-      </ul>
+  </head>
+  <body>
+    <div id="layout">
+      <!-- Menu toggle -->
+      <a href="#menu" id="menuLink" class="menu-link">
+        <!-- Hamburger icon -->
+        <span></span>
+      </a>
 
-      <section class="top-bar-section">
-        <!-- Left Nav Section -->
-        <ul class="left">
+      <!-- Menu -->
+      <nav id="menu">
+        <div class="pure-menu">
+          <a class="pure-menu-heading" href="{{ site.url }}/">{{ site.title | uppercase }}</a>
+          <ul class="pure-menu-list">
             {% for item in site.data.menu %}
-            <li><a href="
+            <li class="pure-menu-item"><a class="pure-menu-link" href="
             {% if item.link contains 'http' %}
             {{ item.link }}
             {% else %}
@@ -46,20 +43,21 @@
             {% endif %}
             ">{{ item.name }}</a></li>
             {% endfor %}
-        </ul>
-        
-        <!-- Right Nav Section -->
-        <ul class="right">
-            {% for social in site.data.social %}
-            <li class="social">
-                <a href="{{ social.link }}">
-                    <i class="large icon-{{ social.name }}"></i>
-                    <span>{{ social.name | capitalize}}</span>
-                </a>
+            {% for item in site.data.social %}
+            <li class="pure-menu-item {% if forloop.first %}menu-item-divided{% endif %}">
+              <a class="pure-menu-link" href="{{ item.link }}">{{ item.name | capitalize }}</a>
             </li>
+            {% else %}
             {% endfor %}
-        </ul>
-      </section>
-    </nav>
-</div>
+          </ul>
+        </div>
+      </nav>
 
+      <!-- main area closed in footer -->
+      <section id="main">
+        <header id="mainHeader">
+          <h1>{{ page.title }}</h1>
+          {% if page.subtitle %}
+          <h2>{{ page.subtitle }}</h2>
+          {% endif %}
+        </header>

_layouts/list.html

@@ -1,12 +1,5 @@
 {% include header.html %}
-<div class="row">
-    <div class="small-12 columns">
-        <h1 class="pageHeader">{{ page.title }}</h1>
-    </div>
-</div>
-<div class="row" itemprop="mainContentOfPage">
-    <div class="small-12 columns">
-        {{ content }}
-    </div>
+<div id="mainContent">
+  {{ content }}
 </div>
 {% include footer.html %}

_layouts/notFound.html

@@ -1,7 +1,5 @@
 {% include header.html %}
-<div class="row">
-    <div class="small-12 columns">
-    {{ content }}
-    </div>
+<div id="mainContent">
+  {{ content }}
 </div>
-{% include footer.html %}
+{% include footer.html %}

_layouts/page.html

@@ -1,30 +1,35 @@
 {% include header.html %}
+<div id="mainContent">
 {% if page.feature %}
-<div class="row">
-    <div class="small-12 columns imageHeader">
-        <img src="{{page.feature.url }}">
-        {% if page.feature.credit %}
-        <div class="imageCredit">
-            Image Source: <a href="{{ page.feature.creditLink }}">{{ page.feature.credit }}</a>
-        </div>
-        {% endif %}
+  <div class="imageHeader">
+    <img src="{{ page.feature.url }}">
+    {% if page.feature.credit %}
+    <div class="imageCredit">
+      Image Source: <a href="{{ page.feature.creditLink }}">{{ page.feature.credit }}</a>
     </div>
-</div>
-{% endif %}
-
-<div class="row" itemprop="mainContentOfPage">
-    <article class="small-12 columns">
-        <header>
-            <h1>{{ page.title }}</h1>
-        </header>
-        <div class="content">
-            {{ content }}
-        </div>
-        <footer>
-            {% if page.modified %}
-            <span class="meta">Last modified: <time datetime="{{ page.modified | date_to_xmlschema }}">{{ page.modified | date_to_string }}</time></span>
-            {% endif %}
-        </footer>
-    </article>
+    {% endif %}
+  </div>
+  {% endif %}
+    <article>
+      <header>
+        <h5>
+          {% if page.modified %}
+            <em>Last Updated:</em>
+            <time datetime="{{ page.modified | date_to_xmlschema }}">{{ page.modified | date_to_string }}</time>
+          {% endif %}
+          <a class="iconLink" title="Perma-link" href="{{ site.url }}{{ page.url }}"><i class="large icon-bookmark"></i></a>
+        </h5>
+      </header>
+    <div class="content">
+      {{ content }}
+    </div>
+    {% if page.links %}
+    <footer>
+      {% for link in page.links %}
+      <!-- TODO -->
+      {% endfor %}
+    </footer>
+    {% endif %}
+  </article>
 </div>
 {% include footer.html %}

_layouts/post.html

@@ -1,52 +1,37 @@
 {% include header.html %}
+<div id="mainContent">
 {% if page.feature %}
-<div class="row">
-    <div class="small-12 columns imageHeader">
-        <img src="{{ page.feature.url }}">
-        {% if page.feature.credit %}
-        <div class="imageCredit">
-            Image Source: <a href="{{ page.feature.creditLink }}">{{ page.feature.credit }}</a>
-        </div>
+  <div class="imageHeader">
+    <img src="{{ page.feature.url }}">
+    {% if page.feature.credit %}
+    <div class="imageCredit">
+      Image Source: <a href="{{ page.feature.creditLink }}">{{ page.feature.credit }}</a>
+    </div>
+    {% endif %}
+  </div>
+{% endif %}
+  <article>
+    <header>
+      <h5>
+        <em>By</em> {% if page.author != nil %}{{ page.author }} - {% endif %}{{ site.owner.name }}
+        - Published: <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_long_string }}</time>
+        {% if page.modified %}
+          (<em>Revised:</em>
+          <time datetime="{{ page.modified | date_to_xmlschema }}">{{ page.modified | date_to_string }}</time>)
         {% endif %}
+         <a class="iconLink" href="{{ site.url }}{{ page.url }}"><i class="large icon-bookmark"></i></a>
+      </h5>
+    </header>
+    <div class="content">
+      {{ content }}
     </div>
+    {% if page.links %}
+    <footer>
+      {% for link in page.links %}
+      <!-- TODO -->
+      {% endfor %}
+    </footer>
+    {% endif %}
+  </article>
 </div>
-{% endif %}
-<div class="row" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
-    <article class="small-12 columns" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
-        <header>
-            <h1 itemprop="name">
-                <a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}">{{ page.title }}</a>
-            </h1>
-            <h5>
-                <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_long_string }}</time>
-            </h5>
-        </header>
-        <div itemprop="articleBody" class="content">
-            {{ content }}
-        </div>
-        <footer>
-            <span class="meta">
-                <a itemprop="url" href="{{ site.url }}{{ page.url }}">{{ page.title }}</a>
-                <em>Published:</em> <time itemprop="dateCreated" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_long_string }}</time> {% if page.modified %}(<em>Revised:</em> <time itemprop="dateModified" datetime="{{ page.modified | date_to_xmlschema }}">{{ page.modified | date_to_string }}</time>){% endif %} <em>By:</em> 
-                <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-                    <span itemprop="name">
-                        <a itemprop="url" href="{{ site.url }}/about/" title="About {{ site.owner.name }}" >{{ site.owner.name }}</a>
-                    </span>
-                </span>
-            </span>
-            <div class="text-center">
-                {% for tag in page.tags %}
-                    <a class="tag" href="{{ site.url }}/tags/#{{ tag | cgi_escape }}" title="Pages tagged {{ tag }}">{{ tag }}</a></li>
-                {% endfor %}
-            </div>
-        </footer>
-    </article>
-</div>
-{% if site.disqus_shortname and page.comments %}
-<div class="row">
-    <div class="small-12 columns">
-        <div id="disqus_thread"></div>
-    </div>
-</div>
-{% endif %}
 {% include footer.html %}

assets/css/_sideMenu.css

@@ -127,7 +127,7 @@ appears on the left side of the page.
     ul {
       border: none;
       background: transparent;
-      border-top: 1px solid #333;
+      border-top: 1px solid color(var(--menuBgColor) l(-15%));
     }
 
     li {
@@ -140,7 +140,7 @@ appears on the left side of the page.
 
     /* Border to divide groups */
     .menu-item-divided {
-      border-top: 1px solid #333;
+      border-top: 1px solid color(var(--menuBgColor) l(-15%));
     }
 
     /* Selected item */
@@ -176,7 +176,6 @@ small screens.
   top: 0;
   left: 0; /* "#menu width" */
   background: color(var(--globalBgColor) contrast(100%));
-  background: color(var(--globalBgColor)B3 contrast(100%));
   font-size: 10px; /* change this value to increase/decrease button size */
   z-index: 10;
   width: 2em;
@@ -216,8 +215,7 @@ Hides the menu at `48em`, but modify this based on your app's needs.
 */
 @media (min-width: 48em) {
 
-    .header,
-    .content {
+    .header {
         padding-left: 2em;
         padding-right: 2em;
     }

assets/css/app.css

@@ -70,8 +70,6 @@ a {
 }
 
 .content {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
   a {
     text-decoration: underline;
   }
@@ -100,9 +98,6 @@ a {
 
 article {
   header {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-
     h5 {
       color: color(var(--globalBgColor) contrast(0%));
     }
@@ -143,14 +138,6 @@ article {
   }
 }
 
-@media only screen {
-  .social a {
-    padding: 0 9px !important;
-    span { display: none; }
-    i { display: inline }
-  }
-}
-
 /* Styles for code blocks and inline code */
 @import "_pygments";
 @import "_pygments_friendly";

assets/dist/app.js

@@ -0,0 +1 @@
+!function(window,document){function toggleClass(element,className){for(var classes=element.className.split(/\s+/),length=classes.length,i=0;length>i;i++)if(classes[i]===className){classes.splice(i,1);break}length===classes.length&&classes.push(className),element.className=classes.join(" ")}var layout=document.getElementById("layout"),menu=document.getElementById("menu"),menuLink=document.getElementById("menuLink");menuLink.onclick=function(e){var active="active";e.preventDefault(),toggleClass(layout,active),toggleClass(menu,active),toggleClass(menuLink,active)}}(this,this.document);

assets/gulpfile.js

@@ -31,10 +31,19 @@ var uglify = require('gulp-uglify');
 var config = {
   'cssDir': 'css',
   'jsDir': 'js',
-  'distDir': 'dist'
+  'distDir': 'dist',
+  'sourcemaps': true
 };
 
+gulp.task('dist', function(callback) {
+  config.sourcemaps = false;
+  return runSequence('clean',
+    ['css', 'js'],
+    callback);
+});
+
 gulp.task('default', function(callback) {
+
   return runSequence('clean',
     ['css', 'js'],
     callback);
@@ -45,21 +54,37 @@ gulp.task('clean', function() {
 });
 
 gulp.task('css', function() {
-  return gulp.src([config.cssDir+'/app.css'])
-    .pipe(sourcemaps.init())
-    .pipe(postcss(processors))
-    .on('error', function (error) {
-      console.log(error);
-    })
-    .pipe(sourcemaps.write('./'))
-    .pipe(gulp.dest(config.distDir));
+  if(config.sourcemaps) {
+    return gulp.src([config.cssDir+'/app.css'])
+      .pipe(sourcemaps.init())
+      .pipe(postcss(processors))
+      .on('error', function (error) {
+        console.log(error);
+      })
+      .pipe(sourcemaps.write('./'))
+      .pipe(gulp.dest(config.distDir));
+    } else {
+      return gulp.src([config.cssDir+'/app.css'])
+        .pipe(postcss(processors))
+        .on('error', function (error) {
+          console.log(error);
+        })
+        .pipe(gulp.dest(config.distDir));
+    }
 });
 
 gulp.task('js', function() {
-  return gulp.src([config.jsDir+'/*.js'])
-    .pipe(concat('app.js'))
-    .pipe(sourcemaps.init())
-    .pipe(uglify({mangle: false}))
-    .pipe(sourcemaps.write('./'))
-    .pipe(gulp.dest(config.distDir));
+  if(config.sourcemaps) {
+    return gulp.src([config.jsDir+'/*.js'])
+      .pipe(concat('app.js'))
+      .pipe(sourcemaps.init())
+      .pipe(uglify({mangle: false}))
+      .pipe(sourcemaps.write('./'))
+      .pipe(gulp.dest(config.distDir));
+  } else {
+    return gulp.src([config.jsDir+'/*.js'])
+      .pipe(concat('app.js'))
+      .pipe(uglify({mangle: false}))
+      .pipe(gulp.dest(config.distDir));
+  }
 });

assets/js/app.js

@@ -1,4 +1,4 @@
-/* TODO */
+/* Application JS Code */
 
 /* Menu Code */
 (function (window, document) {

atom.xml

@@ -1,9 +1,9 @@
 ---
-layout: nil
+layout: null
 ---
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
- 
+
   <title type="text">{{ site.title }}</title>
   <generator uri="http://jekyllrb.com/">Jekyll</generator>
   <link rel="self" type="application/atom+xml" href="{{ site.url }}/atom.xml"/>
@@ -32,5 +32,5 @@ layout: nil
     &lt;p&gt;&lt;a href=&quot;{{ site.url }}{{ post.url }}&quot;&gt;{{ post.title }}&lt;/a&gt; was originally published by {{ site.owner.name }} at &lt;a href=&quot;{{ site.url }}/&quot;&gt;{{ site.title }}&lt;/a&gt; on {{ post.date | date: "%B %d, %Y" }}.&lt;/p&gt;</content>
   </entry>
   {% endfor %}
- 
-</feed>
+
+</feed>

index.html

@@ -1,13 +1,14 @@
 ---
 layout: list
 title: Latest Posts
+subtitle: Cutting edge stuff here!
 description: 'Latest Posts from Blog@VoltaicIdeas'
 ---
 {% for post in site.posts limit: 10 %}
 <article class="excerpt">
     <header>
         <h3><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></h3>
-        <h6 class="subheader"><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time> <em>By</em> {{ site.owner.name }} <em>Tagged:</em> 
+        <h6 class="subheader"><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time> <em>By</em> {{ site.owner.name }} <em>Tagged:</em>
             {% for tag in post.tags %}
             <a class="tag" title="Posts tagged {{ tag }}" href="{{ site.url }}/tags/#{{ tag | cgi_escape }}">{{ tag }}</a>
             {% endfor %}

robots.txt

@@ -1,2 +1 @@
 User-agent: *
-

sitemap.xml

@@ -1,23 +1,23 @@
 ---
-layout: nil
----
+layout: null
+
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
         <loc>{{ site.url }}</loc>
     </url>
-    
+
     {% for post in site.posts %}
     <url>
         <loc>{{ site.url }}{{ post.url }}</loc>
-        <lastmod>{% if post.modified %}{{ post.modified | date_to_xmlschema }}{% else %}{{ post.date | date_to_xmlschema }}{% endif %}</lastmod>       
+        <lastmod>{% if post.modified %}{{ post.modified | date_to_xmlschema }}{% else %}{{ post.date | date_to_xmlschema }}{% endif %}</lastmod>
     </url>
     {% endfor %}
-    
+
     {% for page in site.pages %}
     <url>
         <loc>{{ site.url }}{{ page.url }}</loc>
         <lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
     </url>
     {% endfor %}
-</urlset>
+</urlset>

tags.html

@@ -1,16 +1,9 @@
 ---
 layout: list
-title: Tags 
+title: Tags
 description: 'All Posts from Blog@VoltaicIdeas grouped by tag.'
 permalink: /tags/
 ---
-<div class="row" id="top">
-    <div class="small-12 columns text-center">
-        {% for tag in site.tags %}
-        <a class="tag" title="Posts tagged {{ tag[0] }}" href="#{{ tag[0] | cgi_escape }}">{{ tag[0] }}<span>{{ tag[1].size }}</span></a>
-        {% endfor %}
-    </div>
-</div>
 {% for tag in site.tags %}
 <div class="row">
     <div class="small-12 columns">