| ... | ... |
@@ -115,7 +115,7 @@ blockquote {
|
| 115 | 115 |
} |
| 116 | 116 |
} |
| 117 | 117 |
|
| 118 |
-.has-pullquote:before {
|
|
| 118 |
+.pullquote-right:before, .pullquote-left:before {
|
|
| 119 | 119 |
/* Reset metrics. */ |
| 120 | 120 |
padding: 0; |
| 121 | 121 |
border: none; |
| ... | ... |
@@ -134,6 +134,15 @@ blockquote {
|
| 134 | 134 |
font-size: 1.4em; |
| 135 | 135 |
line-height: 1.45em; |
| 136 | 136 |
} |
| 137 |
+ |
|
| 138 |
+.pullquote-left:before {
|
|
| 139 |
+ |
|
| 140 |
+ /* Make left pullquotes align properly. */ |
|
| 141 |
+ float: left; |
|
| 142 |
+ margin: .5em 1.5em 1em 0; |
|
| 143 |
+ |
|
| 144 |
+} |
|
| 145 |
+ |
|
| 137 | 146 |
/* @extend this to force long lines of continuous text to wrap */ |
| 138 | 147 |
.force-wrap {
|
| 139 | 148 |
white-space: -moz-pre-wrap; |
| ... | ... |
@@ -1,10 +1,10 @@ |
| 1 | 1 |
# |
| 2 | 2 |
# Author: Brandon Mathis |
| 3 |
-# Based on the sematic pullquote technique by Maykel Loomans at http://miekd.com/articles/pull-quotes-with-html5-and-css/ |
|
| 3 |
+# Based on the semantic pullquote technique by Maykel Loomans at http://miekd.com/articles/pull-quotes-with-html5-and-css/ |
|
| 4 | 4 |
# |
| 5 | 5 |
# Outputs a span with a data-pullquote attribute set from the marked pullquote. Example: |
| 6 | 6 |
# |
| 7 |
-# {% pullquote %}
|
|
| 7 |
+# {% pullquote %}
|
|
| 8 | 8 |
# 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. |
| 9 | 9 |
# 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
|
| 10 | 10 |
# to use a CSS only technique for styling pullquotes. |
| ... | ... |
@@ -17,11 +17,14 @@ |
| 17 | 17 |
# </span> |
| 18 | 18 |
# </p> |
| 19 | 19 |
# |
| 20 |
+# Strand's modification adds the ability to call this plugin with {% pullquote left %} which duplicates the current behavior of the pullquote plugin, with a left float and appropriate margins.
|
|
| 21 |
+# Note: this version of the plugin now creates pullquotes with the class of pullquote-right by default |
|
| 20 | 22 |
|
| 21 | 23 |
module Jekyll |
| 22 | 24 |
|
| 23 | 25 |
class PullquoteTag < Liquid::Block |
| 24 | 26 |
def initialize(tag_name, markup, tokens) |
| 27 |
+ markup =~ /left/i ? @align = "left" : @align = "right" |
|
| 25 | 28 |
super |
| 26 | 29 |
end |
| 27 | 30 |
|
| ... | ... |
@@ -29,7 +32,7 @@ module Jekyll |
| 29 | 29 |
output = super |
| 30 | 30 |
if output.join =~ /\{"\s*(.+)\s*"\}/
|
| 31 | 31 |
@quote = $1 |
| 32 |
- "<span class='has-pullquote' data-pullquote='#{@quote}'>#{output.join.gsub(/\{"\s*|\s*"\}/, '')}</span>"
|
|
| 32 |
+ "<span class='pullquote-#{@align}' data-pullquote='#{@quote}'>#{output.join.gsub(/\{"\s*|\s*"\}/, '')}</span>" # TODO Determine how to makethis span have a left or right flag.
|
|
| 33 | 33 |
else |
| 34 | 34 |
return "Surround your pullquote like this {\" text to be quoted \"}"
|
| 35 | 35 |
end |