octopress-genesis-theme 0.0.8 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1be774518d5cf31019077bf2ad109f433710a4b7
-  data.tar.gz: 3115043ff22e80b0927f6513a473c0dd16c93097
+  metadata.gz: 3446206fcd4aa41d0d34df1ed8a88283b69f36b9
+  data.tar.gz: f5333e9c9e46b03e792589de90ea313f0dfb8ae2
 SHA512:
-  metadata.gz: 1e342716e79180df0dc6165402b265c5859688854c88793f8ba4fff8868ca6716d122014e5c8d528930bfe1ddd00b5ed1030e3c6ba04dae08b73b70681251d0e
-  data.tar.gz: 7cfa9767d45397f55e6e9dc684e6f31b3b9c49ddde9d1bffb6351cc8e57c50fc4d81abc91d50601913babd74daff3ebda3f7dbb9eec475584851a04d462653a6
+  metadata.gz: 1a082c1dd94c7317c0666f2e22291436b08920e6f63f515f9bd8d63356c768640f21c69c70965abe915494fc3470b4f3c36b77fd38beee23be40856b5f438393
+  data.tar.gz: 108fabf5ca59e33b6bb3623c52dea5520722574e1789e7d1e076601faaae7a17306c8212ab1aa1ac968250a293a3d74ec1942a1bf03d46c0c435b337ed1811ca

data/assets/config.yml

@@ -3,7 +3,7 @@ title: My Octopress Blog
 subtitle:
  
 # Links for main navigation
-nav:
+main_nav:
   - { url: '/', title: 'Posts' }
   - { url: '/archive/', title: 'Archive' }
   - { url: '/feed/', title: 'Subscribe' }
@@ -30,4 +30,5 @@ share_with: links # or buttons
 # Embed comments, options: false, facebook, disqus
 comments: false
 
+# Center the text in post and page headings.
 center_headings: true

data/assets/includes/cover_image.html

@@ -0,0 +1,14 @@
+<style>
+  .entry-header {
+    background-image: url('{{ page.cover_image }}');
+  }
+  .site-title, .main-nav {
+    {% wrap return page.site_header_text_color || page.header_text_color %}color: {{ yield }};{% endwrap %}
+  }
+  .entry-header, .entry-header a {
+    {% wrap return page.header_text_color %}color: {{ yield }};{% endwrap %}
+  }
+  .mobile-nav-icon, .mobile-nav-icon:before, .mobile-nav-icon:after {
+    {% wrap return page.header_text_color %}background: {{ yield }};{% endwrap %}
+  }
+</style>

data/assets/includes/index_post.html

@@ -9,7 +9,7 @@
   <header class="entry-header">
     <h2 class="entry-title">{{ post.title_link }}</h2>
     {% if post.subtitle %}<h2 class="entry-subtitle">{{ post.subtitle }}</h2>{% endif %}
-    <div class="entry-meta"><a href="{{ page.title_url }}">{{ post.date_html }}</a></div>
+    <div class="entry-meta"><a href="{{ post.url | expand_url }}">{{ post.date_html }}</a></div>
   </header>
 
   <div class="entry-content">{{ post_content }}</div>

data/assets/includes/main_nav.html

@@ -0,0 +1,5 @@
+<nav class='main-nav' role="navigation">
+  {% include theme:nav_items.html nav=theme.main_nav class='main-nav' %}
+  <div class='main-nav-item main-nav-search'>{% include theme:search.html %}</div>
+  <button class="mobile-nav-toggle" href="#" onclick="(function(){ document.querySelector('html').classList.toggle('mobile-nav-active') })()"><span class="mobile-nav-icon"></span><span class="hidden-label">Navigate<span></span></span></button>
+</nav>

data/assets/includes/mobile_nav.html

@@ -0,0 +1,7 @@
+<div class='nav-panel'>
+<nav class='mobile-nav' role="navigation">
+  <div class='mobile-nav-item mobile-nav-search'>{% include theme:search.html %}</div>
+  {% include theme:nav_items.html nav=theme.main_nav class='mobile-nav' %}
+  {% include theme:nav_items.html nav=theme.footer_nav class='mobile-nav' if theme.footer_nav %}
+</nav>
+</div>

data/assets/includes/nav_items.html

@@ -0,0 +1,7 @@
+{% for link in include.nav %}
+  {% assign url = link.url | expand_url %}
+  {% assign page_url = page.url | expand_url | remove:'index.html' %}
+  {% assign class = (url == page_url ? 'active ' : '') %}
+  {% assign class += link.class | classify if link.class %}
+  <a class="{{ include.class }}-item {{ class }}" href="{{ url }}">{{ link.title }}</a>
+{% endfor %}

data/assets/includes/post_meta.html

@@ -1,6 +1,5 @@
 <div class="entry-meta">
-  <a href="{{ page.title_url }}">{{ page.date_html }}</a>
+  <a href="{% return post.url || page.url %}">{% return post.date_html || page.date_html %}</a>
   {% include theme:category_links.html %}
   {% include theme:tag_links.html %}
-  {% include theme:social/sharing.html %}
 </div>

data/assets/includes/search.html

@@ -0,0 +1 @@
+{% capture search_template %}theme:search/{{ theme.search }}.html{% endcapture %}{% include search_template %}

data/assets/includes/search/duckduckgo.html

@@ -1,4 +1,4 @@
 <form class='site-search' action="http://www.duckduckgo.com/" method="get">
   <input type="hidden" name="sites" value="{{ site.url | strip_url_protocol }}">
-  <input class="search-input" type="text" name="q" results="0" placeholder="Search&hellip;" accesskey="/">
+  <input class="search-input" type="text" name="q" results="0" placeholder="Search" accesskey="/">
 </form>

data/assets/includes/search/google.html

@@ -1,4 +1,4 @@
 <form class='site-search' action="https://google.com/search" method="get">
   <input type="hidden" name="sitesearch" value="{{ site.url | strip_url_protocol }}">
-  <input class="search-input" type="text" name="q" results="0" placeholder="Search&hellip;" accesskey="/">
+  <input class="search-input" type="text" name="q" results="0" placeholder="Search" accesskey="/">
 </form>

data/assets/includes/site_footer.html

@@ -1,14 +1,9 @@
 <footer class='site-footer' role="contentinfo">
-  <p class='footer-copyright'>Copyright © {{ site.time | date: "%Y" }} - {{ site.author }} - Powered by Octopress</p>
-  {% if theme.footer-nav %}
+  <p class='footer-copyright'>Copyright © {{ site.time | date: "%Y" }}{% wrap return site.author %} - {{ yield }}{% endwrap %}
+  - Powered by <a href='http://octopress.org'>Octopress</a></p>
+  {% if theme.footer_nav %}
   <nav class='footer-nav' role="navigation">
-    {% for link in theme.footer-nav %}
-      {% assign url = link.url | expand_url %}
-      {% assign class = link.class | classify if link.class %}
-      <a class="primary-nav-link {{ class }}" href="{{ url }}">{{ link.title }}</a>
-    {% endfor %}
+    {% include theme:nav_items.html nav=theme.footer_nav class='footer-nav' %}
   </nav>
   {% endif %}
-  {% capture search_template %}theme:search/{{ theme.search }}.html{% endcapture %}
-  {% include search_template %}
 </footer>

data/assets/layouts/base.html

@@ -1,14 +1,13 @@
 <!DOCTYPE html>
-<html class="{{ page.class }}" lang="{% return page.lang || site.lang || 'en' %}" >
+<html class="{{ page.class }} {% return 'cover-image' if page.cover_image %}" lang="{% return page.lang || site.lang || 'en' %}" >
 <head>
 {% include theme:head.html | expand_urls %}
+{% include theme:cover_image.html if page.cover_image %}
 {% yield head %}
 </head>
 <body>
-  <div class="site">
-    <div class="site-content">{{ content | expand_urls }}</div>
+  <div class="site">{{ content | expand_urls }}</div>
   {% js_asset_tag %}
-  </div>
   {% include theme:social/scripts.html %}
   {% yield footer_scripts %}
 </body>

data/assets/layouts/default.html

@@ -1,9 +1,11 @@
 ---
 layout: theme:base
 ---
+{% include theme:mobile_nav.html %}
+<div class="site-content">
 <div class="site-top"><div class="site-top-content">
 {% include theme:site_header.html | compact_newlines %}
-{% include theme:primary_nav.html | compact_newlines %}
+{% include theme:main_nav.html | compact_newlines %}
 </div></div>
 <div class="site-main">
 <div class="main {% return 'with-sidebar' if sidebar %}">
@@ -12,4 +14,4 @@ layout: theme:base
 </div>
 <div class="site-bottom"><div class="site-bottom-content">
 {% include theme:site_footer.html %}
-</div></div>
+</div></div></div>

data/assets/layouts/post.html

@@ -1,22 +1,25 @@
 ---
 layout: theme:default
 ---
-<article class="post entry {% return 'graphic-title' if page.title-graphic %} {% return 'linkpost' if page.linkpost %}" role="article">
-  
-  <header class="entry-header {% if page.title-graphic %} graphic-entry-header" style="background-image: url('{{ page.title-graphic }}'){% endif %}">
+<article class="post entry {% return 'cover-image' if page.cover_image %} {% return 'linkpost' if page.linkpost %}" role="article">
+  <header class="entry-header">
     {% assign title = (page.linkpost ? page.title_link : page.title_html) %}
-    <h1 class="entry-title">{{ title }}</h1>
-    {% if page.subtitle %}<h2 class="entry-subtitle">{{ page.subtitle }}</h2>{% endif %}
-    {% yield header %}
+    <div class='entry-header-content'>
+      <h1 class="entry-title">{{ title }}</h1>
+      {% if page.subtitle %}<h2 class="entry-subtitle">{{ page.subtitle }}</h2>{% endif %}
+      {% yield header %}
+    </div>
   </header>
 
+  {% include theme:post_meta.html | join_lines %}
+
   <div class="entry-content">{{ content }}</div>
 
   <footer class='entry-footer' role='contentinfo'>
     {% yield footer %}
   </footer>
 
-  {% include theme:post_meta.html | join_lines %}
+  {% include theme:social/sharing.html | join_lines %}
 
 </article>
 {% include theme:post_nav.html %}

data/assets/stylesheets/_cover-image.scss

@@ -0,0 +1,26 @@
+.cover-image {
+  .site-top-content {
+    position: absolute;
+    z-index: 10;
+    background: none;
+    overflow: visible;
+    padding: 0;
+  }
+  .main-nav-item, .site-title-link {
+    opacity: .8;
+    transition: opacity .25s ease-in-out;
+    &:hover {
+      color: inherit;
+      opacity: 1;
+    }
+  }
+  .main-nav-search {
+    opacity: 1;
+    input {
+      opacity: .8;
+      &:hover, &:focus {
+        opacity: 1;
+      }
+    }
+  }
+}

data/assets/stylesheets/_entry.scss

@@ -1,5 +1,6 @@
 .entry {
   margin: { top: 4rem; bottom: 4rem; }
+  margin: { left: auto; right: auto; }
   + .entry {
     padding-top: 2rem;
     &:before {
@@ -12,9 +13,6 @@
       top: -2rem;
     }
   }
-  a {
-    text-decoration: none;
-  }
 }
 
 .article-link {
@@ -43,10 +41,6 @@
   margin: { top: 3rem; bottom: 3rem; }
 }
 
-.entry {
-  margin: { left: auto; right: auto; }
-}
-
 .entry-meta, .entry-subtitle, .entry-footer {
   font-family: $meta-font;
   font-weight: 400;
@@ -58,27 +52,29 @@
   z-index: 1;
 }
 .entry-subtitle {
+  font-family: $subtitle-font;
   font-size: 1.15em;
   margin-top: 0;
 }
 
-.graphic-title {
-  margin-top: 0;
+.cover-image {
+  .entry {
+    margin-top: 0;
+  }
   .entry-header {
+    background-repeat: no-repeat;
+    height: 100vh;
+    max-height: 1000px;
+    overflow: visible;
+	background-attachment: scroll;
     background-size: cover;
     background-position: center center;
-    padding: { top: 10%; bottom: 10%; }
-  }
-
-}
-
-.light-title {
-  .entry-header, .entry-header .entry-meta {
-    color: #fff;
     text-shadow: rgba(#000, .5) 0 1px 1px;
-  }
-  .entry-header {
     position: relative;
+    display: table;
+    width: 100%;
+    
+    // Darken image a bit
     &:after {
       content: "";
       position: absolute;
@@ -90,6 +86,21 @@
       background: rgba(#000, .08);
     }
   }
+
+  .entry-header-content {
+    display: table-cell;
+    padding: 10% 0;
+    vertical-align: middle;
+  }
+
+  .entry-title {
+    font-family: $title-font;
+    font-size: 2.5em;
+
+    @include at-least($medium) {
+      font-size: 3.5em;
+    }
+  }
 }
 
 .entry-meta {
@@ -109,6 +120,7 @@
 .entry-social-sharing {
   display: block;
   margin: 2em auto;
+  text-align: center;
 }
 
 .entry-categories, .entry-tags {

data/assets/stylesheets/_header.scss

@@ -1,50 +1,127 @@
 .site-top-content {
-  display: table;
   width: 100%;
-  background-color: $site-header-bg;
+  padding: 1px 0;
+  background: $site-header-bg;
 }
 
-.site-header, .site-nav {
-  padding: 1rem 1rem;
+.site-header, .main-nav {
   vertical-align: middle;
-  @include at-least($medium) {
-    padding: 1rem 1.5rem;
-  }
+  text-align: center;
+  margin: .5em 0;
 }
 
-.site-header {
-  text-align: left;
-  display: table-cell;
+.site-title {
+  margin: 0;
+  font-size: 1.5rem;
 }
 
 .site-title {
-  margin: 0;
-  font-size: 1.8rem;
+  color: $site-title-color;
 }
 
 .site-title-link {
   text-decoration: none;
-  color: $site-title-color;
+  color: inherit;
   font-weight: normal;
 }
 
-.site-nav {
-  display: table-cell;
-  text-align: right;
+.main-nav {
+  color: $main-nav-color;
 }
 
-.site-nav-link {
+.main-nav-item {
+  display: none;
+  font-family: $nav-font;
   text-decoration: none;
-  color: $site-nav-color;
+  color: inherit;
   padding: 0 .3rem;
 
   &:last-child {
     padding-right: 0;
   }
 }
+a.main-nav-item {
+  &:hover {
+    color: $accent-color;
+  }
+}
+
+.main-nav-search {
+  padding: 0;
+  input {
+    cursor: pointer;
+    font-family: $nav-font;
+    line-height: 1.65em;
+    font-size: .8rem;
+
+    border: {
+      color: transparent;
+      width: 1px;
+      style: solid;
+      radius: .2rem;
+    }
+
+    background: none;
+    color: inherit;
+    padding: 0 .5rem;
+    outline: none;
+    width: 5em;
+    transition: all .25s ease-in-out;
+    position: relative;
+    top: -1px;
+
+    &:focus {
+      outline: none;
+      width: 10em;
+      border-color: inherit;
+      @include placeholder {
+        font-size: .8rem;
+        opacity: .5;
+      }
+    }
+
+    @include placeholder {
+      transition: opacity .25s ease-in-out;
+      font-size: $main-nav-font-size;
+      font-family: $nav-font;
+      color: inherit;
+      opacity: 1;
+    }
+
+  }
+}
 
 .site-subtitle {
   margin: .2rem 0;
   color: $medium-text-color;
   font-size: .95rem;
 }
+
+@include at-least($small) {
+  .main-nav-item {
+    display: inline-block;
+  }
+}
+
+
+@include at-least($medium) {
+  .site-top-content {
+    display: table;
+  }
+  .site-header, .main-nav {
+    display: table-cell;
+    padding: .7rem 1.4rem;
+  }
+  .site-header {
+    text-align: left;
+  }
+  .main-nav {
+    text-align: right;
+    font-size: $main-nav-font-size;
+  }
+  .site-title {
+    margin: 0;
+    font-size: 1.8rem;
+  }
+}
+

data/assets/stylesheets/_layout.scss

@@ -12,6 +12,13 @@ html, body, .site {
   min-height: 100%;
   display: table;
   table-layout: fixed;
+  transform: translate3d(0,0,0);
+}
+
+.hidden-label {
+  font-size: 0;
+  width: 0px;
+  display: inline-block;
 }
 
 .site-top, .site-main, .site-bottom {
@@ -31,7 +38,6 @@ html, body, .site {
   table-layout: fixed;
   width: 100%;
   float: right;
-  border-top: 1px solid transparent;
 }
 
 .main-content {

data/assets/stylesheets/_mobile-nav.scss

@@ -0,0 +1,142 @@
+.nav-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+  left: 0;
+  width: 85%;
+  background: $mobile-nav-bg;
+  font-family: $nav-font;
+  transform:  translate3d(0,0,0);
+}
+
+.mobile-nav {
+  transform: scale(.95, .95);
+  opacity: .4;
+  transition: all .25s ease-out;
+}
+
+/*$header-pad: 15px; */
+
+// Nav button for toggling mobile nav
+.mobile-nav-toggle {
+  cursor: pointer;
+  padding: 8px 2px;
+  border: 0px;
+  background: none;
+  position: absolute;
+  top: 1.5em;
+  left: 1.5em;
+  
+  &:focus {
+    outline: none;
+  }
+
+  .label {
+    text-transform: uppercase;
+    font-size: .4rem;
+    position: relative;
+    top: 5px;
+    opacity: .5;
+  }
+}
+
+.mobile-nav-icon {
+  &, &:before, &:after {
+    position: relative;
+    display: block;
+    width: 18px;
+    height: 3px;
+    background: $main-nav-color;
+    transition: all .15s ease-in-out;
+  }
+  &:before, &:after {
+    content: "";
+  }
+  &:before { top: -6px; }
+  &:after { top: 3px; }
+
+  @include until($small) {
+    .mobile-nav-active & {
+      background: rgba($main-nav-color, 0);
+      &:before {
+        transform: rotate(-45deg);
+        top: -1px;
+      }
+      &:after {
+        transform: rotate(45deg);
+        top: -4px;
+      }
+    }
+  }
+}
+
+.mobile-nav-item {
+  color: $mobile-nav-color;
+  display: block;
+  text-decoration: none;
+  padding: .5rem 1rem;
+  border-bottom: 1px solid $mobile-nav-border;
+}
+
+.mobile-nav-search {
+  padding: 1rem .5rem 0;
+  border-bottom: 0;
+  input {
+    font-family: $nav-font;
+    font-size: $base-font-size;
+    line-height: 1.65em;
+    margin: 0;
+    background: $mobile-nav-border;
+    border: 1px solid lighten($mobile-nav-border, 5);
+    color: $mobile-search-color;
+    padding: 0 .5rem;
+    outline: none;
+    width: 100%;
+    transition: all .25s ease-in-out;
+    position: relative;
+    top: -1px;
+
+    &:focus {
+      outline: none;
+    }
+    @include placeholder {
+      transition: opacity .25s ease-in-out;
+      font-size: $main-nav-font-size;
+      font-family: $nav-font;
+      color: $mobile-search-color;
+      opacity: .5;
+    }
+  }
+}
+
+@include at-least($small) {
+  .mobile-nav {
+    display: none;
+  }
+  .mobile-nav-toggle {
+    display: none;
+  }
+}
+
+.site-content {
+  transition: transform .25s ease-out;
+}
+
+@include until($small) {
+  .mobile-nav-active {
+    .site {
+      overflow-x: hidden;
+    }
+    .mobile-nav {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+    .site-content {
+      transform: translateX(85%);
+      position: relative;
+      z-index: 2;
+      box-shadow: rgba(darken($mobile-nav-bg, 10), .5) -20px 0 20px 1px;
+    }
+  }
+}

data/assets/stylesheets/_social.scss

@@ -1,5 +1,5 @@
 %social-link {
-  transition: all .3s ease-in-out;
+  transition: all .25s ease-in-out;
   display: inline-block;
   font-size: 0;
   background: {
@@ -13,6 +13,8 @@
   @extend %social-link;
   width: 55px;
   height: 35px;
+  position: relative;
+  font-family: $meta-font;
   &:first-child {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -21,6 +23,40 @@
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
+
+  &:after {
+    content: attr(title);
+    position: absolute;
+    top: 0;
+    padding: .1rem .4rem;
+    border-radius: .2rem;
+    display: inline-block;
+    line-height: 1rem;
+    font-size: .7rem;
+    white-space: nowrap;
+    transition: all .25s ease-in-out;
+    transform: translate(-50%, -10px);
+    color: transparent;
+    z-index: -2;
+    border: 1px solid rgba(#000, 0);
+  }
+  &:hover:after {
+    color: $light-text-color;
+    background: $site-header-bg;
+    transform: translate(-50%, -33px);
+    border-color: rgba(#000, .15);
+  }
+  &:before {
+    content: "";
+    @include triangle(down, #fff, 6px);
+    transform: translate(-50%, 16px);
+    position: absolute;
+    z-index: -1;
+    transition: all .25s ease-in-out;
+  }
+  &:hover:before {
+    transform: translate(-50%, -9px);
+  }
 }
 
 %social-profile-link {

data/assets/stylesheets/_theme.scss

@@ -3,8 +3,17 @@ html {
   background: $main-bg;
 }
 
+.site-content {
+  background: $main-bg;
+}
+
 a {
+  text-decoration: none;
   color: $link-color;
+  transition: color .25s ease-in-out;
+  &:hover {
+    color: $light-text-color;
+  }
 }
 
 .site-top-content,
@@ -17,12 +26,10 @@ a {
 }
 
 .full-width {
-  @supports(width:100vw) {
-    width: 101vw;
-    transform: translateX(-#{$content-pad});
-    @include at-least($main-content-max) {
-      $w: $main-content-max - ($content-pad * 2);
-      transform: translateX(calc((#{$w} - 101vw)/2));
-    }
+  width: 101vw;
+  transform: translateX(-#{$content-pad});
+  @include at-least($main-content-max) {
+    $w: $main-content-max - ($content-pad * 2);
+    transform: translateX(calc((#{$w} - 101vw)/2));
   }
 }

data/assets/stylesheets/core/_colors.scss

@@ -0,0 +1,20 @@
+$main-bg:              #f4f3ef;//#edefef;//#f5f6f6;
+$page-border:          #dadede;
+
+$accent-color:         #e46767; // pale red
+
+$text-color:           #444;
+$medium-text-color:    #666;
+$light-text-color:     #888;
+$link-color:           $accent-color;//#4A89DC;
+
+$site-header-bg:       #fff;//#edefef;
+$site-title-color:     #555;
+$main-nav-color:       #333;
+
+$mobile-nav-bg:        #393b3d;
+$mobile-nav-color:     #fff;
+$mobile-search-color:  #fff;
+$mobile-nav-border:    lighten($mobile-nav-bg, 5);
+
+$gray:                 #8d9297;

data/assets/stylesheets/core/_fonts.scss

@@ -0,0 +1,8 @@
+$serif-font-stack: "Source Serif Pro", Georgia, Times, 'Times New Roman', serif;
+$sans-font-stack:  "Source Sans Pro", "Helvetica Neue", Arial, sans;
+
+$main-font:     $serif-font-stack;
+$title-font:    $serif-font-stack;
+$subtitle-font: $serif-font-stack;
+$meta-font:     $sans-font-stack;
+$nav-font:      $sans-font-stack;

data/assets/stylesheets/core/_index.scss

@@ -0,0 +1,6 @@
+@import 'sizes';
+@import 'mixins';
+@import 'grid';
+@import 'colors';
+@import 'fonts';
+@import 'typography';

data/assets/stylesheets/{_mixins.scss → core/_mixins.scss}

@@ -7,6 +7,13 @@
   @media all and (min-width: $size) { @content; }
 }
 
+@mixin placeholder {
+  &::-webkit-input-placeholder { @content; }
+  &:-moz-placeholder           { @content; }
+  &::-moz-placeholder          { @content; }
+  &:-ms-input-placeholder      { @content; }
+}
+
 @mixin between($small-width, $large-width) {
   $large-width: $large-width - 1;
   @media (max-width: $large-width) and (min-width: $small-width) { @content; }
@@ -60,3 +67,29 @@
   }
 }
 
+@mixin triangle($direction, $color, $size) {
+  @if $direction == left {
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == right {
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == up {
+    border-bottom: $size solid $color;
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+  }
+  @else if $direction == down {
+    border-right: $size solid transparent;
+    border-left: $size solid transparent;
+    border-top: $size solid $color;
+  }
+
+  height: 0;
+  width: 0;
+}
+

data/assets/stylesheets/{_sizes.scss → core/_sizes.scss}

@@ -8,10 +8,11 @@ $max: 1080px;
 
 // Item widths
 $main-sidebar-width: 300px;
-$main-content-max: 800px;
+$main-content-max: 900px;
 $content-pad: 20px;
 
 $h-pad-box: 5%, 40px;
 $v-pad-box: 5%, 30px;
 
 $base-font-size: 20px;
+$main-nav-font-size: 20px;

data/assets/stylesheets/{_typography.scss → core/_typography.scss}

@@ -1,11 +1,9 @@
-$post-title-font-stack: "Source Serif Pro", Georgia, Times, 'Times New Roman', serif;
-
 html {
   font-size: $base-font-size;
 }
 
 body {
-  font-family: "Source Serif Pro", Georgia, Times, 'Times New Roman', serif;
+  font-family: $main-font;
   line-height: 1.65em;
 }
 

data/assets/stylesheets/index.scss

@@ -5,15 +5,12 @@
 $center-headings: {{ theme.center_headings }};
 
 // Stylesheets
-@import "colors";
-@import "sizes";
-@import "mixins";
-@import "fonts";
-@import "typography";
-@import "theme";
-@import "grid";
+@import "core/index";
 @import "layout";
+@import "theme";
 @import "header";
 @import "entry";
 @import "post-nav";
 @import "social";
+@import "cover-image";
+@import "mobile-nav";

data/lib/octopress-genesis-theme/version.rb

@@ -1,5 +1,5 @@
 module Octopress
   module Genesis
-    VERSION = "0.0.8"
+    VERSION = "0.0.9"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: octopress-genesis-theme
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.9
 platform: ruby
 authors:
 - Brandon Mathis
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-26 00:00:00.000000000 Z
+date: 2015-04-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: octopress-ink
@@ -137,21 +137,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: octopress-return-tag
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: octopress-content-for
+  name: octopress-social
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -165,19 +151,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: octopress-social
+  name: sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.4'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -259,11 +245,15 @@ files:
 - assets/config.yml
 - assets/includes/archive_post.html
 - assets/includes/category_links.html
+- assets/includes/cover_image.html
 - assets/includes/head.html
 - assets/includes/index_post.html
+- assets/includes/main_nav.html
+- assets/includes/mobile_nav.html
+- assets/includes/nav_items.html
 - assets/includes/post_meta.html
 - assets/includes/post_nav.html
-- assets/includes/primary_nav.html
+- assets/includes/search.html
 - assets/includes/search/duckduckgo.html
 - assets/includes/search/google.html
 - assets/includes/site_footer.html
@@ -277,18 +267,21 @@ files:
 - assets/layouts/page.html
 - assets/layouts/paginated-posts.html
 - assets/layouts/post.html
-- assets/stylesheets/_colors.scss
+- assets/stylesheets/_cover-image.scss
 - assets/stylesheets/_entry.scss
-- assets/stylesheets/_fonts.scss
-- assets/stylesheets/_grid.scss
 - assets/stylesheets/_header.scss
 - assets/stylesheets/_layout.scss
-- assets/stylesheets/_mixins.scss
+- assets/stylesheets/_mobile-nav.scss
 - assets/stylesheets/_post-nav.scss
-- assets/stylesheets/_sizes.scss
 - assets/stylesheets/_social.scss
 - assets/stylesheets/_theme.scss
-- assets/stylesheets/_typography.scss
+- assets/stylesheets/core/_colors.scss
+- assets/stylesheets/core/_fonts.scss
+- assets/stylesheets/core/_grid.scss
+- assets/stylesheets/core/_index.scss
+- assets/stylesheets/core/_mixins.scss
+- assets/stylesheets/core/_sizes.scss
+- assets/stylesheets/core/_typography.scss
 - assets/stylesheets/index.scss
 - assets/templates/category_feed.xml
 - assets/templates/category_index.html

data/assets/includes/primary_nav.html

@@ -1,9 +0,0 @@
-<nav class='site-nav' role="navigation">
-  {% for link in theme.nav %}
-    {% assign url = link.url | expand_url %}
-    {% assign page_url = page.url | expand_url | remove:'index.html' %}
-    {% assign class = (url == page_url ? 'active ' : '') %}
-    {% assign class += link.class | classify if link.class %}
-    <a class="site-nav-link {{ class }}" href="{{ url }}">{{ link.title }}</a>
-  {% endfor %}
-</nav>

data/assets/stylesheets/_colors.scss

@@ -1,16 +0,0 @@
-/*$site-bg:            #edefef;*/
-$main-bg:            #eef0f2;//#edefef;//#f5f6f6;
-$page-border:        #dadede;
-
-$accent-color:       #e46767; // pale red
-
-$text-color:         #444;
-$medium-text-color:  #666;
-$light-text-color:   #888;
-$link-color:         #4A89DC;
-
-$site-header-bg:     #fff;//#edefef;
-$site-title-color:   #555;
-$site-nav-color:     #333;
-
-$gray:               #8d9297;

data/assets/stylesheets/_fonts.scss

@@ -1,3 +0,0 @@
-$title-font: "Source Serif Pro", Georgia, Times, 'Times New Roman', serif;
-$body-font:  "Source Serif Pro", Georgia, Times, 'Times New Roman', serif;
-$meta-font: "Source Sans Pro", "Helvetica Neue", Arial, sans;