octopress-genesis-theme 0.0.1 → 0.0.2

data/assets/stylesheets/_header.scss

@@ -0,0 +1,50 @@
+.site-top-content {
+  display: table;
+  width: 100%;
+  background-color: $site-header-bg;
+}
+
+.site-header, .site-nav {
+  padding: 1rem 1rem;
+  vertical-align: middle;
+  @include at-least($medium) {
+    padding: 1rem 1.5rem;
+  }
+}
+
+.site-header {
+  text-align: left;
+  display: table-cell;
+}
+
+.site-title {
+  margin: 0;
+  font-size: 1.8rem;
+}
+
+.site-title-link {
+  text-decoration: none;
+  color: $site-title-color;
+  font-weight: normal;
+}
+
+.site-nav {
+  display: table-cell;
+  text-align: right;
+}
+
+.site-nav-link {
+  text-decoration: none;
+  color: $site-nav-color;
+  padding: 0 .3rem;
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.site-subtitle {
+  margin: .2rem 0;
+  color: $medium-text-color;
+  font-size: .95rem;
+}

data/assets/stylesheets/_layout.scss

@@ -7,18 +7,14 @@ html, body, .site {
   margin: 0;
 }
 
-.site {
-  position: relative;
-}
-
 .site-content {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   display: table;
   table-layout: fixed;
 }
 
-.site-main, .site-top, .site-bottom {
+.site-top, .site-main, .site-bottom {
   display: table-row;
 }
 
@@ -32,14 +28,14 @@ html, body, .site {
   z-index: 1;
   height: 100%;
   display: table;
+  table-layout: fixed;
   width: 100%;
   float: right;
   border-top: 1px solid transparent;
 }
 
-.site-header, .site-nav, .main-content,
-.site-footer {
-  @include pad-box;
+.main-content {
+  padding-bottom: 3rem;
 }
 
 @include at-least($large) {
@@ -55,9 +51,21 @@ html, body, .site {
 
 @include at-least($max) {
   .site {
-    width: $max;
     margin-left: auto;
     margin-right: auto;
   }
 }
 
+.entry-title,
+.entry-meta,
+.entry-subtitle,
+.entry-social,
+.entry-content, 
+.post-nav,
+.entry-footer {
+  max-width: $main-content-max;
+  padding-left: $content-pad;
+  padding-right: $content-pad;
+  margin: { left: auto; right: auto; }
+}
+

data/assets/stylesheets/_post-nav.scss

@@ -0,0 +1,38 @@
+// Post index navigation
+
+.post-index-nav {
+  text-align: center;
+  border-top: 1px solid $page-border;
+  overflow: hidden;
+  padding: { top: .65em; }
+}
+
+.post-nav {
+  border-top: 1px solid $page-border;
+  overflow: hidden;
+}
+
+.next-post     { float: right; text-align: right; }
+.previous-post { float: left; }
+
+.next-post, .previous-post {
+  text-decoration: none;
+  color: inherit;
+  padding: { top: .65em; bottom: .65em; }
+}
+
+.previous-post-marker, .next-post-marker {
+  color: $accent-color;
+  font-size: .8em;
+}
+
+.previous-post-title, .next-post-title {
+  font-family: $title-font;
+  font-weight: bold;
+  margin: .2em 0;
+}
+
+.previous-post-date, .next-post-date {
+  color: $light-text-color;
+  font-size: .8em;
+}

data/assets/stylesheets/_sizes.scss

@@ -3,13 +3,15 @@ $tiny: 320px;
 $small: 600px;
 $medium: 750px;
 $large: 900px;
-$x-large: 1020px;
-$max: 1300px;
+$max: 1080px;
 
 
 // Item widths
 $main-sidebar-width: 300px;
+$main-content-max: 900px;
+$content-pad: 20px;
 
-$h-pad-box: 10px, 40px;
-$v-pad-box: 10px, 30px;
+$h-pad-box: 5%, 40px;
+$v-pad-box: 5%, 30px;
 
+$base-font-size: 20px;

data/assets/stylesheets/_theme.scss

@@ -1,19 +1,28 @@
 html {
-  background: $site-bg;
-  color: $site-text-color;
-  @include at-least($max) {
-    background: $main-bg;
-  }
-}
-
-.site-top, .site-bottom {
-  background: $site-bg;
+  color: $text-color;
+  background: $main-bg;
 }
 
 a {
   color: $link-color;
 }
 
-.main {
-  background: $main-bg;
+.site-top-content,
+.site-bottom-content {
+  text-align: center;
+}
+
+.site-bottom-content {
+  border-top: 1px solid $page-border;
+}
+
+.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));
+    }
+  }
 }

data/assets/stylesheets/_typography.scss

@@ -0,0 +1,90 @@
+$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;
+  line-height: 1.65em;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  line-height: normal;
+  margin: .83em 0;
+}
+
+h1 {
+  font-size: 2.8rem;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.6em;
+}
+
+h4 {
+  font-size: 1.3em;
+}
+
+h5 {
+  font-size: 1.2em;
+}
+
+h6 {
+  font-size: 1em;
+}
+
+p, ul, ol, dl, table, figure, blockquote {
+  margin: { top: 1.45rem; bottom: 1.45rem; }
+}
+
+figure {
+  margin: {left: 0; right: 0;}
+}
+
+img {
+  max-width: 100%;
+}
+
+blockquote {
+  border-left: 5px solid $page-border;
+  margin-left: 0;
+  padding: 1px .5rem 1px 2rem;
+  color: $medium-text-color;
+  p {
+    margin: .8rem 0;
+  }
+}
+
+.float-right { 
+  float: right; 
+  margin: { top: 1.1em; left: 1.1em; bottom: 1.1em; }
+}
+.float-left  { 
+  float: left; 
+  margin: { top: 1.1em; right: 1.1em; bottom: 1.1em; }
+}
+
+.align-left   { text-align: left; }
+.align-center { text-align: center; }
+.align-left   { text-align: left; }
+
+.align-top    { vertical-align: top; }
+.align-middle { vertical-align: middle; }
+.align-bottom { vertical-align: bottom; }
+
+hr {
+  border: none;
+  background: none;
+  width: 100%;
+  border-bottom: 1px solid $page-border;
+  &.dark {
+    border-bottom: 1px solid $gray;
+  }
+  &.thick {
+  }
+}

data/assets/stylesheets/index.scss

@@ -1,5 +1,16 @@
+// Theme settings
+
+$center-headings: {{ theme.center-headings }};
+
+// Stylesheets
 @import "colors";
 @import "sizes";
 @import "mixins";
+@import "fonts";
+@import "typography";
 @import "theme";
+@import "grid";
 @import "layout";
+@import "header";
+@import "entry";
+@import "post-nav";

data/demo/Gemfile

@@ -1,5 +1,5 @@
 source 'https://rubygems.org'
 
 gemspec path: '../'
-gem 'octopress-ink'#, path: '../../ink'
+gem 'octopress-ink', path: '../../ink'
 gem 'jekyll-paginate', path: '../../jekyll-paginate'

data/demo/_config.yml

@@ -4,3 +4,4 @@ gems:
   - octopress-genesis
 url: http://example.com/
 paginate: 10
+markdown: redcarpet

data/demo/_plugins/theme/config.yml

@@ -1,11 +1,10 @@
 # Settings for main header
 header:
   title: My Octopress Blog
-  subtitle: A clever subtitle (optional)
  
 # Links for main navigation
 nav:
-  - { url: '/', title: 'Home' }
+  - { url: '/', title: 'Posts' }
   - { url: '/archive', title: 'Archive' }
   - { url: '/feed', title: 'RSS' }
 
@@ -13,3 +12,8 @@ nav:
 category:
   prefix: Category
   url:    category
+
+post_index:
+  excerpt_posts: true
+
+center-headings: true

data/demo/_plugins/theme/stylesheets/_colors.scss

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

data/demo/_plugins/theme/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);
+      }
+    }
+  }
+}