1. Updated typography for blockquotes

2. Improved blockquote Liquid tag
3. Added custom layout Sass for making layout changes simple
This commit is contained in:
Brandon Mathis 2011-06-22 18:53:17 -04:00
parent a2ab1d4802
commit da514a6559
8 changed files with 72 additions and 54 deletions

View File

@ -11,7 +11,7 @@
# <blockquote> # <blockquote>
# <p>Wheeee!</p> # <p>Wheeee!</p>
# <footer> # <footer>
# <strong>John Paul Jones</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a> # <strong>Bobby Willis</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a>
# </blockquote> # </blockquote>
# #
require './_plugins/titlecase.rb' require './_plugins/titlecase.rb'
@ -40,18 +40,33 @@ module Jekyll
end end
def render(context) def render(context)
output = super output = paragraphize(super.map(&:strip).join)
author = "<strong>#{@by}</strong>" author = "<strong>#{@by.strip}</strong>"
cite = "<cite><a class='source' href='#{@source}'>#{(@title || 'source')}</a></cite>" if @source
url = @source.match(/https?:\/\/(.+)/)[1].split('/')
parts = []
url.each do |part|
if (parts + [part]).join('/').length < 32
parts << part
end
end
source = parts.join('/')
source << '/&hellip;' unless source == @source
end
cite = "<cite><a href='#{@source}'>#{(@title || source)}</a></cite>"
reply = if @by.nil? reply = if @by.nil?
"<p>#{output.join.gsub(/\n\n/, '</p><p>')}</p>" output
elsif !@source.nil? elsif !@source.nil?
"<p>#{output.join.gsub(/\n\n/, '</p><p>')}</p><footer>#{author + cite}</footer>" "#{output}<footer>#{author + cite}</footer>"
else else
"<p>#{output.join.gsub(/\n\n/, '</p><p>')}</p><footer>#{author}</footer>" "#{output}<footer>#{author}</footer>"
end end
"<blockquote>#{reply}</blockquote>" "<blockquote>#{reply}</blockquote>"
end end
def paragraphize(input)
"<p>#{input.gsub(/\n\n/, '</p><p>').gsub(/\n/, '<br/>')}</p>"
end
end end
end end

View File

@ -1,19 +1,18 @@
$default-border-radius: 4px; $max-width: 1200px !default;
$pad-min: 18px !default;
$pad-min: 18px; $pad-narrow: 25px !default;
$pad-narrow: 20px; $pad-medium: 35px !default;
$pad-medium: 35px; $pad-wide: 55px !default;
$pad-wide: 55px; $sidebar-width-medium: 240px !default;
$sidebar-width-medium: 240px; $sidebar-pad-medium: 15px !default;
$sidebar-pad-medium: 15px; $sidebar-pad-wide: 20px !default;
$sidebar-pad-wide: 20px; $sidebar-width-wide: 300px !default;
$sidebar-width-wide: 300px;
.group { @include pie-clearfix; } .group { @include pie-clearfix; }
body { body {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
max-width: 1350px; max-width: $max-width;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
> header, > nav, > footer, #articles > article { > header, > nav, > footer, #articles > article {

View File

@ -10,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
.mono { font-family: $mono; } .mono { font-family: $mono; }
body > header h1 { body > header h1 {
font-size: 3em; font-size: 2.6em;
@extend .heading; @extend .heading;
font-weight: normal; font-weight: normal;
line-height: 1.2em; line-height: 1.2em;
@ -93,30 +93,18 @@ blockquote {
$bq-margin: 1.2em; $bq-margin: 1.2em;
font-style: italic; font-style: italic;
position: relative; position: relative;
margin-left: $bq-margin; font-size: 1.2em;
> p { line-height: 1.5em;
&:first-child:before { padding-left: 1em;
content: "\201C"; border-left: 4px solid rgba($text-color-light, .5);
position: absolute; cite {
top: 0.1em; font-style: italic;
left: -.5em; a { color: $text-color-light !important; word-wrap: break-word; }
font-size: 3em; &:before { content: ''; padding:{right: .3em; left: .3em;} color: $text-color-light; }
color: $blockquote;
} }
&:last-child:after { @media only screen and (min-width: 992px) {
content: "\201D"; padding-left: 1.5em;
position: relative; border-left-width: 4px;
top: 0.3em;
line-height: 0;
font-size: 2em;
color: $blockquote;
}
}
+ p > cite {
margin-left: $bq-margin;
text-align: right;
&:before { content: ' '; color: $text-color-light; }
a { font-style: italic; }
} }
} }

View File

@ -10,13 +10,11 @@
//To use the light Solarized highlighting theme uncomment this block //To use the light Solarized highlighting theme uncomment this block
/* //$base03: $base3;
$base03: $base3; //$base02: $base2;
$base02: $base2; //$base01: $base1;
$base01: $base1; //$base00: $base0;
$base00: $base0; //$base0: $base00;
$base0: $base00; //$base1: $base01;
$base1: $base01; //$base2: $base02;
$base2: $base02; //$base3: $base03;
$base3: $base03;
*/

View File

@ -0,0 +1,16 @@
// Here you can easily change your sites's layout.
// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.
//$max-width: 1350px;
// Padding used for layout margins
//$pad-min: 18px;
//$pad-narrow: 25px;
//$pad-medium: 35px;
//$pad-wide: 55px;
// Sidebar widths used in media queries
//$sidebar-width-medium: 240px;
//$sidebar-pad-medium: 15px;
//$sidebar-pad-wide: 20px;
//$sidebar-width-wide: 300px;

View File

@ -1,5 +1,6 @@
$border: inline-image('dotted-border.png'); $border: inline-image('dotted-border.png');
#articles { #articles {
overflow: hidden;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
ul, ol { margin-left: 1.4em; } ul, ol { margin-left: 1.4em; }
} }
@ -91,7 +92,7 @@ $border: inline-image('dotted-border.png');
top: .3em; top: .3em;
padding-left: .5em; padding-left: .5em;
} }
footer { > footer {
margin-top: 2em; margin-top: 2em;
padding-top: 1em; padding-top: 1em;
margin-bottom: 1.5em; margin-bottom: 1.5em;

View File

@ -58,7 +58,7 @@ pre {
line-height: 1.45em; line-height: 1.45em;
font-size: .8em; font-size: .8em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
padding: .4em .8em; padding: .8em 1em;
color: #555; color: #555;
overflow: auto; overflow: auto;
} }

View File

@ -6,6 +6,7 @@
@import "partials/solarized"; @import "partials/solarized";
@import "custom/colors"; @import "custom/colors";
@import "core/theme"; @import "core/theme";
@import "custom/layout";
@import "core/layout"; @import "core/layout";
@import "core/typography"; @import "core/typography";