aboutsummaryrefslogtreecommitdiff
path: root/themes/classic
diff options
context:
space:
mode:
authorBrandon Mathis <brandon@imathis.com>2011-06-19 15:14:01 -0400
committerBrandon Mathis <brandon@imathis.com>2011-06-19 15:14:01 -0400
commitf77db80077d739077becc1618b87818ea42f145c (patch)
treee12f94b6badb067597bf76b1dd383a2c370b82c4 /themes/classic
parent105ba1434314e06f6cce39e17aedd1f0d66a92d6 (diff)
downloadmy_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 'themes/classic')
-rw-r--r--themes/classic/_plugins/blockquote.rb24
-rw-r--r--themes/classic/_plugins/custom_filters.rb16
-rw-r--r--themes/classic/_plugins/include_file.rb31
-rw-r--r--themes/classic/_plugins/pullquote.rb42
-rw-r--r--themes/classic/sass/default/core/_typography.scss26
-rw-r--r--themes/classic/sass/default/partials/_blog.scss62
-rw-r--r--themes/classic/sass/default/partials/_syntax.scss1
-rw-r--r--themes/classic/source/_includes/article.html23
-rw-r--r--themes/classic/source/_includes/post_meta.html7
-rw-r--r--themes/classic/source/_layouts/default.html2
-rw-r--r--themes/classic/source/index.html5
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&hellip;", permalink_text=false)
+ def auto_exerpt(input, url, url_text="Read more &hellip;")
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 &raquo;') | 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 &hellip;</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>