1. Updated readme

2. Improved blog typography 3. Improved support for Disqus 4. Removed unnecessary page layout
14 years ago · 5d61b46358
13 changed files with 110 additions and 79 deletions
--- a/README.markdown
+++ b/README.markdown
@ -42,7 +42,13 @@ which tells Jekyll how to processes posts and pages.
 Octopress adds some custom paramaters to give you more publishing flexibility and you can [read about those here](#include_link),
 but for now. Go ahead and type up a sample post or use some [inspired filler](http://baconipsum.com/).

-### Generate Your Blog
+{% pullquote %}
+  When writing longform posts, I find it helpful to include pullquotes, which help those scanning a post discern whether or not a post is helpful.
+  It is important to note, {" pullquotes are merely visual in presentation and should not appear twice in the text. "} That is why it is prefered
+  to use a CSS only technique for styling pullquotes.
+{% endpullquote %}
+
+## Generate Your Blog

    rake preview

--- a/themes/classic/sass/default/core/_theme.scss
+++ b/themes/classic/sass/default/core/_theme.scss
@ -5,8 +5,6 @@ $link-color-visited: darken(adjust_hue($link_color, 70), 10) !default;
 $link-color-active: darken($link-color-hover, 15) !default;

 // Main Section Colors
-$body-color: #333333 !default;
-$light-text: #999999 !default;
 $page-bg: #252525 !default;
 $article-border: #eeeeee !default;
 $main-bg: #f5f5f5 !default;
@ -16,42 +14,42 @@ $header-border: lighten($header-bg, 15) !default;
 $title-color: #f2f2f2 !default;
 $subtitle-color: #aaa !default;

-$type-color: #222 !default;
-$type-color-light: #555 !default;
+$text-color: #222 !default;
+$text-color-light: #aaa !default;
 $type-border: #ddd !default;


 /* Navigation */
 $nav-bg: #ccc !default;
 $nav-color: darken($nav-bg, 38) !default;
-$nav-color-hover: darken($nav-color, 25);
-$nav-placeholder: desaturate(darken($nav-bg, 10), 15);
-$nav-border: darken($nav-bg, 10);
-$nav-border-top: lighten($nav-bg, 15);
-$nav-border-bottom: darken($nav-bg, 25);
-$nav-border-left: darken($nav-bg, 11);
-$nav-border-right: lighten($nav-bg, 7);
+$nav-color-hover: darken($nav-color, 25) !default;
+$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
+$nav-border: darken($nav-bg, 10) !default;
+$nav-border-top: lighten($nav-bg, 15) !default;
+$nav-border-bottom: darken($nav-bg, 25) !default;
+$nav-border-left: darken($nav-bg, 11) !default;
+$nav-border-right: lighten($nav-bg, 7) !default;

 /* Sidebar colors */
 $sidebar-bg: #eee !default;
 $sidebar-link-color: $link-color !default;
 $sidebar-link-color-hover: $link-color-hover !default;
-$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
-$sidebar-border: desaturate(darken($sidebar-bg, 7), 10);
-$sidebar-border: darken($sidebar-bg, 7);
-$sidebar-link-color-subdued: lighten($sidebar-color, 20);
-$sidebar-link-color-subdued-hover: $sidebar-link-color-hover;
-$twitter-status-link: lighten($sidebar-link-color-subdued, 15);
+$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
+$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
+$sidebar-border: darken($sidebar-bg, 7) !default;
+$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default;
+$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
+$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default;

 $footer-color: #999999 !default;
 $footer-bg: #ccc !default;
-$footer-color: darken($footer-bg, 38);
-$footer-color-hover: darken($footer-color, 10);
-$footer-border-top: lighten($footer-bg, 15);
-$footer-border-bottom: darken($footer-bg, 15);
-$footer-link-color: darken($footer-bg, 38);
-$footer-link-color-hover: darken($footer-color, 25);
-$page-border-bottom: darken($footer-bg, 5);
+$footer-color: darken($footer-bg, 38) !default;
+$footer-color-hover: darken($footer-color, 10) !default;
+$footer-border-top: lighten($footer-bg, 15) !default;
+$footer-border-bottom: darken($footer-bg, 15) !default;
+$footer-link-color: darken($footer-bg, 38) !default;
+$footer-link-color-hover: darken($footer-color, 25) !default;
+$page-border-bottom: darken($footer-bg, 5) !default;

 // Form Colors
 $fieldset-bg: #ececec;
--- a/themes/classic/sass/default/core/_typography.scss
+++ b/themes/classic/sass/default/core/_typography.scss
@ -19,7 +19,7 @@ body > header h1 {

 body {
  line-height: 1.5em;
-  color: $type-color;
+  color: $text-color;
  @extend .serif;
 }

@ -115,7 +115,7 @@ blockquote {
  + p > cite {
    margin-left: $bq-margin;
    text-align: right;
-    &:before { content: '– '; color: $type-color-light; }
+    &:before { content: '– '; color: $text-color-light; }
    a { font-style: italic; }
  }
 }
@ -131,11 +131,11 @@ blockquote {
  /* Pull out to the right, modular scale based margins. */
  float: right;
  width: 45%;
-  margin: 1em 0 1em 1.5em;
+  margin: .5em 0 1em 1.5em;

  /* Baseline correction */
  position: relative;
-  top: 6px;
+  top: 7px;
  font-size: 1.4em;
  line-height: 1.45em;
 }
--- a/themes/classic/sass/default/partials/_blog.scss
+++ b/themes/classic/sass/default/partials/_blog.scss
@ -14,11 +14,8 @@ $border: inline-image('dotted-border.png');
        padding-top: 0;
      }
    }
-    time + .byline:before, .byline + time +time:before {
-      content: "\2022 ";
-      padding: 0 .3em 0 .2em;
-      display: inline-block;
-      @include opacity(.5);
+    .byline + time:before, time +time:before, .comments:before {
+      @extend .separator;
    }
    header {
      position: relative;
@ -33,7 +30,7 @@ $border: inline-image('dotted-border.png');
      }
      p {
        font-size: .9em;
-        color: $type-color-light;
+        color: $text-color-light;
        margin: 0;
        @extend .sans;
        &.meta {
@ -82,9 +79,20 @@ $border: inline-image('dotted-border.png');
    }
    #disqus_thread { }

+    iframe.twitter-share-button {
+      //display: block;
+      //margin-top: .5em;
+      //padding: .2em 0;
+      position: relative;
+      top: .3em;
+      padding-left: .5em;
+    }
    footer {
-      padding-top: 15px;
-      time, .author { color: $light-text; }
+      margin-top: 2em;
+      padding-top: 1em;
+      margin-bottom: 1.5em;
+      background: $border top left repeat-x;
+      time, .author { color: $text-color-light; @extend .sans; }
    }
  }
 }
@ -103,10 +111,25 @@ article + article {
    padding: .4em .8em;
    margin-right: .5em;
    text-decoration: none;
+    color: mix($text-color, $text-color-light);
+    @extend .serif;
    @include transition(background-color, .5s);
    &:hover {
      background: $link-color-hover;
+      text-shadow: none;
      color: $main-bg;
    }
  }
+  footer {
+    @extend .sans;
+    margin-top: 1em;
+    p.meta { color: $text-color-light; }
+    a { color: inherit; &:hover{ color: $link-color-hover;} }
+  }
+}
+
+.separator {
+  content: "\2022 ";
+  padding: 0 .4em 0 .2em;
+  display: inline-block;
 }
--- a/themes/classic/sass/default/partials/_syntax.scss
+++ b/themes/classic/sass/default/partials/_syntax.scss
@ -69,10 +69,12 @@ p code {
  white-space: no-wrap;
  background: #fff;
  font-size: .9em;
+  line-height: 1.5em;
  color: #555;
  border: 1px solid #ddd;
  @include border-radius(.4em);
  padding: 0 .3em;
+  margin: -1px 0;
 }

 .pre-code {
--- a/themes/classic/source/_includes/article.html
+++ b/themes/classic/source/_includes/article.html
@ -1,8 +1,3 @@
-{% if page.author %}
-  {% assign author = page.author %}
-{% else %}
-  {% assign author = site.author %}
-{% endif %}
 {% unless page.no_header %}
  <header>
    {% if index %}
@ -10,19 +5,20 @@
    {% else %}
      <h1 class="entry-title">{{ page.title | titlecase }}</h1>
    {% endif %}
-    {% unless page.no_meta or !index %}<p class="meta">{% include post_meta.html %}</p>{% endunless %}
+    {% unless page.no_meta or !index %}<p class="meta">{% include post_date.html %}</p>{% endunless %}
  </header>
 {% endunless %}
 {% if index %}
-<div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
-<footer>
-  <p>
-  {% if content contains "<!-- more -->" or content contains "<!--more-->" %}
-    <a rel="full-article" href="{{ page.url }}">Read more &hellip;</a>
-  {% endif %}
-  {% include post_meta.html %}
-  </p>
-</footer>
+  <div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
+  <p><a rel="full-article" href="{{ page.url }}">Read on &rarr;</a></p>
+  <footer>
+    <p class="meta">
+      {% include post_author.html %}
+      {% include post_date.html %}
+      <span class="comments"><a rel="comments" href="{{ page.url }}#disqus_thread">Add a comment</a></span>
+      {% include sharing.html %}
+    </p>
+  </footer>
 {% else %}
 <div class="entry-content">{{ content | smart_quotes }}</div>
 {% endif %}
--- a/themes/classic/source/_includes/asides/recent_posts.html
+++ b/themes/classic/source/_includes/asides/recent_posts.html
@ -8,5 +8,5 @@
      </li>
    {% endfor %}
  </ul>
-  </section>
+</section>
 {% endif %}
--- a/themes/classic/source/_includes/disqus_thread.html
+++ b/themes/classic/source/_includes/disqus_thread.html
@ -1,7 +1,13 @@
+<div id="disqus_thread"></div>
 <script type="text/javascript">
-  var disqus_url = "{{ site.url }}{{ page.url }}";
+  var disqus_shortname = '{{ site.disqus_short_name }}';
+  var disqus_identifier = '{{ site.url }}{{ page.url }}';
+  var disqus_url = '{{ site.url }}{{ page.url }}';
+  var disqus_developer = 1;
+  (function() {
+    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+  })();
 </script>
-<noscript>
-  <a href="http://{{ site.disqus_short_name }}.disqus.com/?url=ref">View the discussion thread</a>
-</noscript>
-<script type="text/javascript" src="http://disqus.com/forums/{{ site.disqus_short_name }}/embed.js"></script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
--- a/themes/classic/source/_includes/post_meta.html
+++ b/themes/classic/source/_includes/post_meta.html
@ -1,7 +0,0 @@
-{% if page.date %}
-<time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time>
-{% endif %}
-{% if page.updated %}
-<time class="updated" datetime="{{ page.updated | datetime }}"></time>
-{% endif %}
-{% if author %}<span class="byline author vcard"><span class="fn">{{ author }}</span></span>{% endif %}
--- a/themes/classic/source/_layouts/page.html
+++ b/themes/classic/source/_layouts/page.html
@ -1,13 +1,5 @@
 ---
-layout: default
-no_title_link: true
-permalink: pretty
-single: true
+layout: post
 ---

-<article>
-  {% include article.html %}
-  {% if site.disqus_short_name %}
-    <div id="disqus_thread">{% include disqus_thread.html %}</div>
-  {% endif %}
-</article>
+<!-- if you want a page layout -->
--- a/themes/classic/source/_layouts/post.html
+++ b/themes/classic/source/_layouts/post.html
@ -6,11 +6,16 @@ single: true
 <article class="hentry">
  {% include article.html %}
  <footer>
-    <p>
-      <a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>
+    <p class="meta">
+      {% include post_author.html %}
+      {% include post_date.html %}
+      {% include sharing.html %}
    </p>
  </footer>
  {% if site.disqus_short_name %}
+  <section>
+    <h1>Comments</h1>
    <div id="disqus_thread">{% include disqus_thread.html %}</div>
+  </section>
  {% endif %}
 </article>
--- a/themes/classic/source/archive.html
+++ b/themes/classic/source/archive.html
@ -1,5 +1,5 @@
 ---
-layout: page
+layout: post
 title: Blog Archive
 no_meta: true
 ---
--- a/themes/classic/source/index.html
+++ b/themes/classic/source/index.html
@ -9,4 +9,14 @@ blog_index: true
    {% include article.html %}
  </article>
 {% endfor %}
-
+{% if site.disqus_short_name %}
+<script type="text/javascript">
+    var disqus_shortname = '{{ site.disqus_short_name }}';
+    (function () {
+      var s = document.createElement('script'); s.async = true;
+      s.type = 'text/javascript';
+      s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
+      (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
+    }());
+</script>
+{% endif %}