octopress-genesis-theme 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 07dc3fcb2e6ce1975f001de0fdb9a527cc0c5b0e
-  data.tar.gz: 200f33e9fb039f84365836909e371f4726dba048
+  metadata.gz: d44474e2d922073c99ef5837f3d6a516ce9116fa
+  data.tar.gz: 9b74336892b62ea103047bb62f71e373b4099414
 SHA512:
-  metadata.gz: ad5fd96e4409cab63413616a0558f5f7056b85e8ac6519fe4f306a7133b9d3f42cba83b03349aea88ae8a18fdb6745cdd18464526f85d570645b1e44dde53f10
-  data.tar.gz: ffe997c8f177c41406fb82f05988ed998f7b6a55c482610e6b453a3e435fbabab4b53a3a544df2405bf3be89ae13eb5977088eb616dea881e44dbbb88834032b
+  metadata.gz: 4c8e7718cf9bf8b7ee291af3a82e8b6fe76f981cef5fd1f19dfdf729d8a35d8b64230ce2c5ec553847d74796158d66ddcfcc85493567ecc126706b9c5d2c5ebe
+  data.tar.gz: b54e9dc8daca7c709576a228d7160c182cfa804a73e359b0c6897b6ba81c0fd3b16036ad9fb3ae072ddfab2978d5ebd8048edb6be123614e656b7bc8b24a03ed

data/.gitignore

@@ -22,3 +22,4 @@ tmp
 mkmf.log
 _site
 .sass-cache
+.DS_Store

data/README.md

@@ -2,29 +2,70 @@
 
 A new theme build on Octopress Ink. 
 
-TODO: 
-- Add support for Javascript embedded comment integration.
-- Add support for social embeds.
-- Add tall site footer design with support for social integration.
-- Add stylesheets.
-- Add page layout.
-- Add sections (recent posts).
-- Add system for searching.
-- Add footer navigation.
+Note: This theme is in alpha development. What's left to do? See [the issues](https://github.com/octopress/genesis-theme/issues/).
 
 ## Installation
 
-To play around:
+Add this line to your application's Gemfile:
 
-1. Clone this repository, `git clone git@github.com:octopress/genesis-theme`
-2. Install gems, `bundle install`
-3. Check out the demo `cd demo; bundle exec jekyll build`
+    gem 'octopress-genesis-theme'
 
-Note: this may not work, it's in active development.
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install octopress-genesis-theme
+
+Next add it to your gems list in Jekyll's `_config.yml`
+
+    gems:
+      - octopress-genesis-theme
 
 ## Usage
 
-TODO: Write usage instructions here
+This is best demonstrated on a new Jekyll site:
+
+- Create a new Jekyll site.
+- Add some posts or pages.
+- Ensure that posts have the layout `theme:post`, and pages `theme:page`
+- Run `jekyll server` and check it out.
+
+## Configuration
+
+To configure this theme, create a `_plugins/theme/config.yml` and add your settings. Here are
+the defaults.
+
+```yaml
+# Settings for main header
+header:
+  title: My Octopress Blog
+  subtitle: A clever subtitle (optional)
+ 
+# Links for main navigation
+nav:
+  - { url: '/', title: 'Home' }
+  - { url: '/archive', title: 'Archive' }
+  - { url: '/feed', title: 'RSS' }
+
+# Settings for category index generator
+category:
+  prefix: Category
+  url:    category
+
+post_index:
+  excerpt_posts: true
+  permalink_label: "Permalink"
+  read_more_label: "Continue Reading →"
+
+# Center the text in post and page headings.
+center-headings: true
+```
+
+You can also easily overwrite stylesheets, layouts, partials and basically everything about
+this plugin by adding a copy of that file in the `_plugins/theme` directory. More on that
+later.
 
 ## Contributing
 

data/assets/config.yml

@@ -13,3 +13,10 @@ nav:
 category:
   prefix: Category
   url:    category
+
+post_index:
+  excerpt_posts: true
+  permalink_label: "Permalink"
+  read_more_label: "Continue Reading →"
+
+center-headings: true

data/assets/includes/index-post.html

@@ -1,11 +1,13 @@
-{% assign post_content = (theme.index.excerpt_posts ? post.excerpt : post.content) %}
+{% assign post_content = (theme.post_index.excerpt_posts ? post.excerpt : post.content) %}
 {% assign excerpted = true if post_content != post.content %}
-{% assign permalink_label = (excerpted ? theme.index.excerpt_label : theme.index.permalink_label) %}
+{% assign classnames = post.class | join: " " | classify if post.class %}
+{% assign classnames += " excerpt" if excerpted %}
+{% assign permalink_label = (excerpted ? theme.post_index.read_more_label : theme.post_index.permalink_label) %}
 
-<article class="entry {% return post.class | join: " " | classify if post.class %}" role="article">
+<article class="entry {{ classnames }}" role="article">
   <header class="entry-header">
     <h1 class="entry-title">{{ post.title_link }}</h1>
-    <div class="entry-meta">{{ post.date_time_html }}</div>
+    <div class="entry-meta">{{ post.date_html }}</div>
   </header>
 
   <div class="entry-content">{{ post_content }}</div>

data/assets/includes/post-nav.html

@@ -2,14 +2,14 @@
 <nav role="pagination" class="post-nav">
 {% if page.previous.url %}
 <a class="previous-post" href="{{page.previous.url}}" title="Previous Article: {{page.previous.title_text}}">
-  <div class=-'previous-post-post-marker'><span class='previous-post-arrow'>&larr;</span> Previous Article</div>
+  <div class='previous-post-marker'><span class='previous-post-arrow'>&larr;</span> Previous Article</div>
   <h6 class='previous-post-title'>{{page.previous.title_html}}</h6>
   <div class="previous-post-date">{{ page.previous.date_html }}</div>
 </a>
 {% endif %}
 {% if page.next.url %}
 <a class="next-post" href="{{page.next.url}}" title="Next Article: {{page.next.title_text}}">
-  <div class=-'next-post-post-marker'>Next Article <span class='next-post-arrow'>&rarr;</span></div>
+  <div class='next-post-marker'>Next Article <span class='next-post-arrow'>&rarr;</span></div>
   <h6 class='next-post-title'>{{page.next.title_html}}</h6>
   <div class="next-post-date">{{ page.next.date_html }}</div>
 </a>

data/assets/includes/primary-nav.html

@@ -2,8 +2,8 @@
   {% 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 ? 'here ' : '') %}
+    {% assign class = (url == page_url ? 'active ' : '') %}
     {% assign class += link.class | classify if link.class %}
-    <a class="primary-nav-link {{ class }}" href="{{ url }}">{{ link.title }}</a>
+    <a class="site-nav-link {{ class }}" href="{{ url }}">{{ link.title }}</a>
   {% endfor %}
 </nav>

data/assets/includes/social/page-header.html

@@ -0,0 +1 @@
+<!-- Page header social buttons go here -->

data/assets/includes/social/post-footer.html

@@ -0,0 +1 @@
+<!-- Post footer social buttons go here -->

data/assets/includes/social/post-header.html

@@ -0,0 +1 @@
+<!-- Post header social buttons go here -->

data/assets/layouts/default.html

@@ -1,15 +1,15 @@
 ---
 layout: theme:base
 ---
-<div class="site-top">
+<div class="site-top"><div class="site-top-content">
 {% include theme:site-header.html | compact_newlines %}
 {% include theme:primary-nav.html | compact_newlines %}
-</div>
+</div></div>
 <div class="site-main">
 <div class="main {% return 'with-sidebar' if sidebar %}">
   <div class="main-content">{{ content }}</div>
 </div>
 </div>
-<div class="site-bottom">
+<div class="site-bottom"><div class="site-bottom-content">
 {% include theme:site-footer.html %}
-</div>
+</div></div>

data/assets/layouts/page.html

@@ -4,14 +4,12 @@ layout: theme:default
 <article class="page entry {{ page.class }}" role="article">
   <header class="entry-header">
     <h1 class="entry-title">{{ page.title_html }}</h1>
-    {% yield header %}
+    <div class="entry-meta">{{ page.date_html }}</div>
+    <div class="entry-social top">{% include theme:social/page-header.html %}</div>
   </header>
 
-  <div class="entry-content">{{ page.content }}</div>
+  <div class="entry-content">{{ content }}</div>
 
-  <footer class='entry-footer' role='contentinfo'>
-    <div class="entry-meta">{{ page.date_html }}</div>
-  </footer>
 </article>
 {% wrap include theme:comments/embed.html if page.comments %}
 <div class='entry-comments'>{{ yield }}</div>

data/assets/layouts/paginated-posts.html

@@ -1,13 +1,13 @@
 ---
 layout: theme:default
 ---
-<div class="posts-index">
+<div class="post-index">
   {% for post in paginator.posts %}
     {% include theme:index-post.html %}
   {% endfor %}
 </div>
 
-<nav class="post-index-navigation pagination" role="navigation">
+<nav class="post-index-nav pagination" role="navigation">
   {% if paginator.next_page %}
     <a class="pagination-prev" title="Older posts" href="{{paginator.next_page_path}}">&larr; Older</a>
   {% endif %}

data/assets/layouts/post.html

@@ -1,28 +1,38 @@
 ---
 layout: theme:default
 ---
-<article class="post entry {{ page.class }} {% return 'linkpost' if entry.linkpost %}" role="article">
-  <header class="entry-header">
-    <h1 class="entry-title">{{ page.title_link }}</h1>
+<article class="post entry {{ page.class }} {% return 'graphic-title' if page.title-graphic %} {% return 'linkpost' if entry.linkpost %}" role="article">
+  {% if page.title-graphic %}
+    <header class="entry-header" style='background-image: url("{{ page.title-graphic }}")'>
+  {% else %}
+    <header class="entry-header">
+  {% endif %}
+    {% assign title = (page.linkpost ? page.title_link : page.title_html) %}
+    <h1 class="entry-title">{{ title }}</h1>
+    {% if page.subtitle %}<p class="entry-subtitle">{{ page.subtitle }}</p>{% endif %}
     <div class="entry-meta">{{ page.date_html }}</div>
+    <div class="entry-social header">{% include theme:social/post-header.html %}</div>
     {% yield header %}
   </header>
 
-  <div class="entry-content">{{ page.content }}</div>
+  <div class="entry-content">{{ content }}</div>
 
   <footer class='entry-footer' role='contentinfo'>
     <p class="entry-meta">
       {% yield footer %}
       {% assign author = page.author || site.author %}
       {% if author %}
-      Written by {{ author }} &bull;
+        <div class='author-credit'>Written by: {{ author }}</div>
+      {% endif %}
+      <div class='posted-date'>Published: {{ page.date_time_html }}</div>
+      {% if page.categories %} 
+        <div class="categories">Categories: {{ page.categories | category_links }}</div>
       {% endif %}
-      {{ page.date_time_html }}
-      {% if page.categories %} &bull; <span class="categories">{{ page.categories | category_links }}</span>{% endif %}
     </p>
-  {% include theme:post-nav.html %}
+    <div class="entry-social footer">{% include theme:social/post-footer.html %}</div>
   </footer>
 </article>
+{% include theme:post-nav.html %}
 {% wrap include theme:comments/embed.html if post.comments %}
 <div class='entry-comments'>{{ yield }}</div>
 {% endwrap %}

data/assets/pages/index.html

@@ -1,11 +1,11 @@
 ---
 layout: theme:default
 ---
-<div class="posts-index">
+<div class="post-index">
   {% for post in site.posts limit: 10 %}
     {% include theme:index-post.html %}
   {% endfor %}
 </div>
-<nav class="post-index-navigation" role="navigation">
+<nav class="post-index-nav" role="navigation">
   <a class='archive-link' href="{{ theme.permalinks.archive }}">Post Archive</a>
 </nav>

data/assets/stylesheets/_colors.scss

@@ -1,4 +1,16 @@
 $site-bg:            #edefef;
 $main-bg:            #f5f6f6;
-$site-text-color:    #444;
+$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:     #edefef;
+$site-title-color:   #555;
+$site-nav-color:     #333;
+
+$gray:               #8d9297;

data/assets/stylesheets/_entry.scss

@@ -0,0 +1,85 @@
+.entry {
+  margin: { top: 4em; bottom: 4em; }
+  + .entry {
+    border-top: 1px solid $page-border;
+    padding-top: 2em;
+  }
+}
+
+.article-link {
+  text-decoration: none;
+  color: inherit;
+  &:hover {
+    color: $link-color;
+  }
+}
+
+.entry-header {
+  @if ($center-headings) {
+    text-align: center;
+  }
+}
+
+.entry-title {
+  margin-bottom: 0;
+  font-size: 2.4rem;
+  @include at-least($medium) {
+    font-size: 2.8rem;
+  }
+}
+
+.entry-meta {
+  color: $medium-text-color;
+}
+
+.entry-content {
+  margin: { top: 3rem; bottom: 3rem; }
+}
+
+.entry {
+  margin: { left: auto; right: auto; }
+}
+
+.entry-meta, .entry-subtitle, .entry-footer {
+  font-family: $meta-font;
+  font-weight: 400;
+  font-size: .9rem;
+}
+
+.entry-header > * {
+  position: relative;
+  z-index: 1;
+}
+.entry-subtitle {
+  font-size: 1.4rem;
+  margin-top: 0;
+}
+
+.graphic-title {
+  margin-top: 0;
+  .entry-header {
+    background-size: cover;
+    background-position: center center;
+    padding: { top: 10%; bottom: 10%; }
+  }
+
+  &.light-title {
+    .entry-header, .entry-meta {
+      color: #fff;
+      text-shadow: rgba(#000, .5) 0 1px 1px;
+    }
+    .entry-header {
+      position: relative;
+      &:after {
+        content: "";
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        background: rgba(#000, .08);
+      }
+    }
+  }
+}

data/assets/stylesheets/_fonts.scss

@@ -0,0 +1,3 @@
+$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;

data/assets/stylesheets/_grid.scss

@@ -0,0 +1,153 @@
+/* ==========================================================================
+ * Grid core - Based on Griddle, Heavily customized.
+ * ========================================================================== */
+
+@mixin destroy-margins {
+  @include destroy-top-margins;
+  @include destroy-bottom-margins;
+}
+
+@mixin destroy-top-margins {
+  > :first-child,
+  > :first-child > :first-child,
+  > :first-child > :first-child > :first-child { margin-top: 0; }
+}
+
+@mixin destroy-bottom-margins {
+  > :last-child,
+  > :last-child > :last-child,
+  > :last-child > :last-child > :last-child { margin-bottom: 0; }
+}
+
+// Remove inner elements' top and bottom margin
+%destroy-margins {
+  @include destroy-margins;
+}
+
+
+$grid-gutter: 4%;
+$margin: 30px;
+
+$grid-gutter-none: 0;
+$grid-gutter-small: 2%;
+$grid-gutter-large: 8%;
+
+.grid {
+  display: block;
+  padding: 0;
+  $m:  -.5 * $grid-gutter;
+  margin: { left: $m; right: $m; }
+  letter-spacing: -5px;
+  text-rendering: optimizespeed;
+
+  // Nested `grid` object adjustments
+  > .grid {
+    overflow: hidden;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  /* ==========================================================================
+   * Gutter sizing
+   * ========================================================================== */
+
+  // No gutter (0%)
+  &.no-gutter {
+    $m:  -.5 * $grid-gutter-none;
+    margin: { left: $m; right: $m; }
+    > .grid-cell {
+      padding: 0 0.5 * $grid-gutter-none;
+    }
+
+    &.match-gutters {
+      > .grid-cell {
+        padding: 0;
+        margin: { left: 0; right: 0; }
+      }
+    }
+  }
+
+  // Small gutter (2%)
+  &.small-gutter {
+    $m:  -.5 * $grid-gutter-small;
+    margin: { left: $m; right: $m; }
+    > .grid-cell {
+      padding: 0 0.5 * $grid-gutter-small;
+    }
+
+    &.match-gutters {
+      > .grid-cell {
+        padding: 0 0.5 * $grid-gutter-small;
+        margin: { bottom: $grid-gutter-small; }
+      }
+    }
+  }
+
+  // Large gutter (8%)
+  &.large-gutter {
+    $m:  -.5 * $grid-gutter-large;
+    margin: { left: $m; right: $m; }
+    > .grid-cell {
+      padding: 0 0.5 * $grid-gutter-large;
+    }
+
+    &.match-gutters {
+      > .grid-cell {
+        padding: 0 0.5 * $grid-gutter-large;
+        margin: { bottom: $grid-gutter-large; }
+      }
+    }
+  }
+
+
+  /* ==========================================================================
+   * Adhere to set gutter spacing & ignore inner elements' margin
+   * ========================================================================== */
+
+  &.match-gutters  {
+    > .grid-cell {
+      padding: 0.5 * $grid-gutter;
+      @extend %destroy-margins;
+    }
+  }
+}
+
+
+// Grid cells - Apply `.x-of-x` classes to set width.
+.grid-cell {
+  display: inline-block;
+  width: 100%;
+  margin: 0;
+  padding: 0 .5 * $grid-gutter;
+  text-align: left;
+  vertical-align: top;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-rendering: auto;
+  &.auto {
+    width: auto;
+  }
+}
+
+/* =====================================================================
+ * Cell sizing
+ * ===================================================================== */
+
+$cell-sizes: (1:one, 2:two, 3:three, 4:four, 5:five, 6:six);
+
+@mixin grid-cell($num) {
+  @for $i from 1 to $num {
+    .#{map-get($cell-sizes, $i)}-of-#{map-get($cell-sizes, $num)} {
+      width: 100%*$i/$num; 
+    }
+  }
+}
+
+@include grid-cell(6);
+@include grid-cell(5);
+@include grid-cell(4);
+@include grid-cell(3);
+@include grid-cell(2);
+.small-golden { width: 38.2%; }
+.large-golden { width: 61.8%; }
+