diff options
author | Brandon Mathis <brandon@imathis.com> | 2011-06-19 15:14:01 -0400 |
---|---|---|
committer | Brandon Mathis <brandon@imathis.com> | 2011-06-19 15:14:01 -0400 |
commit | f77db80077d739077becc1618b87818ea42f145c (patch) | |
tree | e12f94b6badb067597bf76b1dd383a2c370b82c4 /themes | |
parent | 105ba1434314e06f6cce39e17aedd1f0d66a92d6 (diff) | |
download | my_new_personal_website-f77db80077d739077becc1618b87818ea42f145c.tar.xz my_new_personal_website-f77db80077d739077becc1618b87818ea42f145c.zip |
1. Switched back to Rdiscount
2. Improved Blockquote comment header
3. Added Include File and Pullquote plugins
4. Improved blog typography
5. Simplified "Read more" link
Diffstat (limited to '')
-rw-r--r-- | themes/classic/_plugins/blockquote.rb | 24 | ||||
-rw-r--r-- | themes/classic/_plugins/custom_filters.rb | 16 | ||||
-rw-r--r-- | themes/classic/_plugins/include_file.rb | 31 | ||||
-rw-r--r-- | themes/classic/_plugins/pullquote.rb | 42 | ||||
-rw-r--r-- | themes/classic/sass/default/core/_typography.scss | 26 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_blog.scss | 62 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_syntax.scss | 1 | ||||
-rw-r--r-- | themes/classic/source/_includes/article.html | 23 | ||||
-rw-r--r-- | themes/classic/source/_includes/post_meta.html | 7 | ||||
-rw-r--r-- | themes/classic/source/_layouts/default.html | 2 | ||||
-rw-r--r-- | themes/classic/source/index.html | 5 |
11 files changed, 185 insertions, 54 deletions
diff --git a/themes/classic/_plugins/blockquote.rb b/themes/classic/_plugins/blockquote.rb index 8048f476..094e4bc3 100644 --- a/themes/classic/_plugins/blockquote.rb +++ b/themes/classic/_plugins/blockquote.rb @@ -2,21 +2,21 @@ # Author: Brandon Mathis # Based on the work of: Josediaz Gonzalez - https://github.com/josegonzalez/josediazgonzalez.com/blob/master/_plugins/blockquote.rb # +# Outputs a string with a given attribution as a quote +# +# {% blockquote Bobby Willis http://google.com/blah the search for bobby's mom %} +# Wheeee! +# {% endblockquote %} +# ... +# <blockquote> +# <p>Wheeee!</p> +# <footer> +# <strong>John Paul Jones</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a> +# </blockquote> +# require './_plugins/titlecase.rb' module Jekyll - # Outputs a string with a given attribution as a quote - # - # {% blockquote Bobby Willis http://google.com/blah the search for bobby's mom %} - # Wheeee! - # {% endblockquote %} - # ... - # <blockquote> - # <p>Wheeee!</p> - # <footer> - # <strong>John Paul Jones</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a> - # </blockquote> - # class Blockquote < Liquid::Block FullCiteWithTitle = /([\w\s]+)(https?:\/\/)(\S+\s)([\w\s]+)/i FullCite = /([\w\s]+)(https?:\/\/)(\S+)/i diff --git a/themes/classic/_plugins/custom_filters.rb b/themes/classic/_plugins/custom_filters.rb index 158586af..0d24d720 100644 --- a/themes/classic/_plugins/custom_filters.rb +++ b/themes/classic/_plugins/custom_filters.rb @@ -1,11 +1,16 @@ #custom filters for Octopress module OctopressFilters - def exerpt(input, url, url_text="Reade more…", permalink_text=false) + def auto_exerpt(input, url, url_text="Read more …") if input.index(/<!--\s?more\s?-->/i) - input.split(/<!--\s?more\s?-->/i)[0] + "<p><a href='#{url}'>#{url_text}</a></p>" - elsif permalink_text - input + "<p><a href='#{url}'>#{permalink_text}</a></p>" + input.split(/<!--\s?more\s?-->/i)[0] + "<p><a rel='full-article' href='#{url}'>#{url_text}</a></p>" + else + input + end + end + def exerpt(input) + if input.index(/<!--\s*more\s*-->/i) + input.split(/<!--\s*more\s*-->/i)[0] else input end @@ -35,7 +40,7 @@ module OctopressFilters end def ordinalize(date) date = datetime(date) - "#{date.strftime('%B')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}" + "#{date.strftime('%b')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}" end def ordinal(number) if (11..13).include?(number.to_i % 100) @@ -56,4 +61,3 @@ module OctopressFilters end end Liquid::Template.register_filter OctopressFilters - diff --git a/themes/classic/_plugins/include_file.rb b/themes/classic/_plugins/include_file.rb new file mode 100644 index 00000000..3862228b --- /dev/null +++ b/themes/classic/_plugins/include_file.rb @@ -0,0 +1,31 @@ +require 'pathname' + +module Jekyll + + class IncludePartialTag < Liquid::Tag + def initialize(tag_name, file, tokens) + super + @file = file.strip + end + + def render(context) + file_dir = (context.registers[:site].source || 'source') + file_path = Pathname.new(file_dir).expand_path + file = file_path + @file + + unless file.file? + return "File #{file} could not be found" + end + + Dir.chdir(file_path) do + partial = Liquid::Template.parse(file.read) + context.stack do + partial.render(context) + end + end + end + end +end + +Liquid::Template.register_tag('include_partial', Jekyll::IncludePartialTag) + diff --git a/themes/classic/_plugins/pullquote.rb b/themes/classic/_plugins/pullquote.rb new file mode 100644 index 00000000..2b8544ab --- /dev/null +++ b/themes/classic/_plugins/pullquote.rb @@ -0,0 +1,42 @@ +# +# Author: Brandon Mathis +# Based on the sematic pullquote technique by Maykel Loomans at http://miekd.com/articles/pull-quotes-with-html5-and-css/ +# +# Outputs a span with a data-pullquote attribute set from the marked pullquote. Example: +# +# {% 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 %} +# ...will output... +# <p> +# <span data-pullquote="pullquotes are merely visual in presentation and should not appear twice in the text."> +# 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. This is why a CSS only approach # for styling pullquotes is prefered. +# </span> +# </p> +# + +module Jekyll + + class PullquoteTag < Liquid::Block + PullQuoteMarkup = /\{(.+)\}/i + + def initialize(tag_name, markup, tokens) + super + end + + def render(context) + output = super + if output.join =~ /\{"\s*(.+)\s*"\}/ + @quote = $1 + "<span class='has-pullquote' data-pullquote='#{@quote}'>#{output.join.gsub(/\{"\s*|\s*"\}/, '')}</span>" + else + return "Surround your pullquote like this {! text to be quoted !}" + end + end + end +end + +Liquid::Template.register_tag('pullquote', Jekyll::PullquoteTag) diff --git a/themes/classic/sass/default/core/_typography.scss b/themes/classic/sass/default/core/_typography.scss index 78abb6e4..1328d9b1 100644 --- a/themes/classic/sass/default/core/_typography.scss +++ b/themes/classic/sass/default/core/_typography.scss @@ -31,8 +31,11 @@ body { } h1 { font-size: 3.2em; - line-height: 1.2em + line-height: 1.2em; + @media only screen and (max-width: 768px) { font-size: 2.2em; } } + + h2, section h1 { font-size: 1.5em; } @@ -116,3 +119,24 @@ blockquote { a { font-style: italic; } } } + +.has-pullquote:before { + /* Reset metrics. */ + padding: 0; + border: none; + + /* Content */ + content: attr(data-pullquote); + + /* Pull out to the right, modular scale based margins. */ + float: right; + width: 45%; + margin: 1em 0 1em 1.5em; + + /* Baseline correction */ + position: relative; + top: 6px; + font-size: 1.4em; + line-height: 1.45em; +} + diff --git a/themes/classic/sass/default/partials/_blog.scss b/themes/classic/sass/default/partials/_blog.scss index 1f1a4a86..be6239af 100644 --- a/themes/classic/sass/default/partials/_blog.scss +++ b/themes/classic/sass/default/partials/_blog.scss @@ -14,16 +14,17 @@ $border: inline-image('dotted-border.png'); padding-top: 0; } } - .byline + time:before, .byline + time +time:before { + time + .byline:before, .byline + time +time:before { content: "\2022 "; padding: 0 .3em 0 .2em; display: inline-block; @include opacity(.5); } header { + position: relative; padding-top: 2em; margin-bottom: 1.5em; - padding-bottom: 1.5em; + padding-bottom: 1em; background: $border bottom left repeat-x; h1 { margin: 0; @@ -33,11 +34,24 @@ $border: inline-image('dotted-border.png'); p { font-size: .9em; color: $type-color-light; - border: none; - padding-top: 0; margin: 0; - font-style: italic; @extend .sans; + &.meta { + text-transform: uppercase; + position: absolute; + top: 0; + } + } + @media only screen and (max-width: 768px) { + padding-bottom: 1em; + margin-bottom: 1em; + background: $border bottom left repeat-x; + p.meta { position: static; } + } + + &.feature h1 { + font-size: 2.0em; font-style: italic; + line-height: 1.3em; } } .entry-content { @@ -66,23 +80,33 @@ $border: inline-image('dotted-border.png'); } } } - header.feature h1 { - font-size: 2.0em; font-style: italic; - line-height: 1.3em; - } #disqus_thread { } - .meta { - border-bottom: 1px dashed #dddddd; - text-transform: uppercase; - color: #777777; - padding: 8px 0 5px; - margin-bottom: 1.5em; - font-size: 75%; - letter-spacing: 1px; - } - .footer { + footer { padding-top: 15px; + time, .author { color: $light-text; } + } + } +} +article + article { + background: $border top left repeat-x; +} +#articles.blog-index { + article header { background: none; padding-bottom: 0; } + article h1 { + font-size: 2.2em; + a { color: inherit; &:hover{ color: $link-color-hover; } } + } + a[rel=full-article] { + background: darken($main-bg, 5); + display: inline-block; + padding: .4em .8em; + margin-right: .5em; + text-decoration: none; + @include transition(background-color, .5s); + &:hover { + background: $link-color-hover; + color: $main-bg; } } } diff --git a/themes/classic/sass/default/partials/_syntax.scss b/themes/classic/sass/default/partials/_syntax.scss index 22f5eb06..05a97082 100644 --- a/themes/classic/sass/default/partials/_syntax.scss +++ b/themes/classic/sass/default/partials/_syntax.scss @@ -60,6 +60,7 @@ pre { margin-bottom: 1.5em; padding: .4em .8em; color: #555; + overflow: auto; } p code { diff --git a/themes/classic/source/_includes/article.html b/themes/classic/source/_includes/article.html index 764e36d1..c0a9782f 100644 --- a/themes/classic/source/_includes/article.html +++ b/themes/classic/source/_includes/article.html @@ -10,22 +10,19 @@ {% else %} <h1 class="entry-title">{{ page.title | titlecase }}</h1> {% endif %} - {% unless page.no_meta %} - <p> - {% 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">By <span class="fn">{{ author }}</span></span>{% endif %} - </p> - {% endunless %} + {% unless page.no_meta or !index %}<p class="meta">{% include post_meta.html %}</p>{% endunless %} </header> {% endunless %} {% if index %} -<div class="entry-content">{{ content | exerpt(content, page.url, 'Continue reading »') | smart_quotes }}</div> +<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 …</a> + {% endif %} + {% include post_meta.html %} + </p> +</footer> {% else %} <div class="entry-content">{{ content | smart_quotes }}</div> {% endif %} - diff --git a/themes/classic/source/_includes/post_meta.html b/themes/classic/source/_includes/post_meta.html new file mode 100644 index 00000000..24768255 --- /dev/null +++ b/themes/classic/source/_includes/post_meta.html @@ -0,0 +1,7 @@ +{% 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 %} diff --git a/themes/classic/source/_layouts/default.html b/themes/classic/source/_layouts/default.html index dc69ef83..4e4f81a3 100644 --- a/themes/classic/source/_layouts/default.html +++ b/themes/classic/source/_layouts/default.html @@ -4,7 +4,7 @@ <nav>{% include navigation.html %}</nav> <div> <div> - <div id="articles">{{ content }}</div> + <div id="articles" {% if page.blog_index %} class="blog-index" {% endif %}>{{ content }}</div> {% unless page.sidebar == 'none' %} <aside>{% include sidebar.html %}</aside> {% endunless %} diff --git a/themes/classic/source/index.html b/themes/classic/source/index.html index 09eb8d13..f151e06e 100644 --- a/themes/classic/source/index.html +++ b/themes/classic/source/index.html @@ -1,9 +1,10 @@ --- layout: default +blog_index: true --- -{% for page in site.posts limit:3 %} -{% assign content = page.content %} {% assign index = true %} +{% for page in site.posts limit:site.posts_per_page %} +{% assign content = page.content %} <article> {% include article.html %} </article> |