From da514a65594ee9f2be0bcd0aa3325acc7720ffac Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Wed, 22 Jun 2011 18:53:17 -0400 Subject: [PATCH] 1. Updated typography for blockquotes 2. Improved blockquote Liquid tag 3. Added custom layout Sass for making layout changes simple --- themes/classic/_plugins/blockquote.rb | 29 +++++++++++++----- themes/classic/sass/core/_layout.scss | 21 +++++++------ themes/classic/sass/core/_typography.scss | 36 ++++++++--------------- themes/classic/sass/custom/_colors.scss | 18 +++++------- themes/classic/sass/custom/_layout.scss | 16 ++++++++++ themes/classic/sass/partials/_blog.scss | 3 +- themes/classic/sass/partials/_syntax.scss | 2 +- themes/classic/sass/screen.scss | 1 + 8 files changed, 72 insertions(+), 54 deletions(-) create mode 100644 themes/classic/sass/custom/_layout.scss diff --git a/themes/classic/_plugins/blockquote.rb b/themes/classic/_plugins/blockquote.rb index 094e4bc..2f0712b 100644 --- a/themes/classic/_plugins/blockquote.rb +++ b/themes/classic/_plugins/blockquote.rb @@ -11,7 +11,7 @@ #
#

Wheeee!

#
# require './_plugins/titlecase.rb' @@ -40,18 +40,33 @@ module Jekyll end def render(context) - output = super - author = "#{@by}" - cite = "#{(@title || 'source')}" + output = paragraphize(super.map(&:strip).join) + author = "#{@by.strip}" + 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 << '/…' unless source == @source + end + cite = "#{(@title || source)}" reply = if @by.nil? - "

#{output.join.gsub(/\n\n/, '

')}

" + output elsif !@source.nil? - "

#{output.join.gsub(/\n\n/, '

')}

" + "#{output}" else - "

#{output.join.gsub(/\n\n/, '

')}

" + "#{output}" end "
#{reply}
" end + + def paragraphize(input) + "

#{input.gsub(/\n\n/, '

').gsub(/\n/, '
')}

" + end end end diff --git a/themes/classic/sass/core/_layout.scss b/themes/classic/sass/core/_layout.scss index 339c049..8ad14a9 100644 --- a/themes/classic/sass/core/_layout.scss +++ b/themes/classic/sass/core/_layout.scss @@ -1,19 +1,18 @@ -$default-border-radius: 4px; - -$pad-min: 18px; -$pad-narrow: 20px; -$pad-medium: 35px; -$pad-wide: 55px; -$sidebar-width-medium: 240px; -$sidebar-pad-medium: 15px; -$sidebar-pad-wide: 20px; -$sidebar-width-wide: 300px; +$max-width: 1200px !default; +$pad-min: 18px !default; +$pad-narrow: 25px !default; +$pad-medium: 35px !default; +$pad-wide: 55px !default; +$sidebar-width-medium: 240px !default; +$sidebar-pad-medium: 15px !default; +$sidebar-pad-wide: 20px !default; +$sidebar-width-wide: 300px !default; .group { @include pie-clearfix; } body { -webkit-text-size-adjust: none; - max-width: 1350px; + max-width: $max-width; position: relative; margin: 0 auto; > header, > nav, > footer, #articles > article { diff --git a/themes/classic/sass/core/_typography.scss b/themes/classic/sass/core/_typography.scss index a3e5538..3e07c93 100644 --- a/themes/classic/sass/core/_typography.scss +++ b/themes/classic/sass/core/_typography.scss @@ -10,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; .mono { font-family: $mono; } body > header h1 { - font-size: 3em; + font-size: 2.6em; @extend .heading; font-weight: normal; line-height: 1.2em; @@ -93,30 +93,18 @@ blockquote { $bq-margin: 1.2em; font-style: italic; position: relative; - margin-left: $bq-margin; - > p { - &:first-child:before { - content: "\201C"; - position: absolute; - top: 0.1em; - left: -.5em; - font-size: 3em; - color: $blockquote; - } - &:last-child:after { - content: "\201D"; - position: relative; - top: 0.3em; - line-height: 0; - font-size: 2em; - color: $blockquote; - } + font-size: 1.2em; + line-height: 1.5em; + padding-left: 1em; + border-left: 4px solid rgba($text-color-light, .5); + cite { + font-style: italic; + a { color: $text-color-light !important; word-wrap: break-word; } + &:before { content: '–'; padding:{right: .3em; left: .3em;} color: $text-color-light; } } - + p > cite { - margin-left: $bq-margin; - text-align: right; - &:before { content: '– '; color: $text-color-light; } - a { font-style: italic; } + @media only screen and (min-width: 992px) { + padding-left: 1.5em; + border-left-width: 4px; } } diff --git a/themes/classic/sass/custom/_colors.scss b/themes/classic/sass/custom/_colors.scss index b6e541c..0771a86 100644 --- a/themes/classic/sass/custom/_colors.scss +++ b/themes/classic/sass/custom/_colors.scss @@ -10,13 +10,11 @@ //To use the light Solarized highlighting theme uncomment this block -/* -$base03: $base3; -$base02: $base2; -$base01: $base1; -$base00: $base0; -$base0: $base00; -$base1: $base01; -$base2: $base02; -$base3: $base03; -*/ +//$base03: $base3; +//$base02: $base2; +//$base01: $base1; +//$base00: $base0; +//$base0: $base00; +//$base1: $base01; +//$base2: $base02; +//$base3: $base03; diff --git a/themes/classic/sass/custom/_layout.scss b/themes/classic/sass/custom/_layout.scss new file mode 100644 index 0000000..162f5ad --- /dev/null +++ b/themes/classic/sass/custom/_layout.scss @@ -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; diff --git a/themes/classic/sass/partials/_blog.scss b/themes/classic/sass/partials/_blog.scss index 5d80d4e..485f5e8 100644 --- a/themes/classic/sass/partials/_blog.scss +++ b/themes/classic/sass/partials/_blog.scss @@ -1,5 +1,6 @@ $border: inline-image('dotted-border.png'); #articles { + overflow: hidden; @media only screen and (max-width: 768px) { ul, ol { margin-left: 1.4em; } } @@ -91,7 +92,7 @@ $border: inline-image('dotted-border.png'); top: .3em; padding-left: .5em; } - footer { + > footer { margin-top: 2em; padding-top: 1em; margin-bottom: 1.5em; diff --git a/themes/classic/sass/partials/_syntax.scss b/themes/classic/sass/partials/_syntax.scss index cf01255..7ee650c 100644 --- a/themes/classic/sass/partials/_syntax.scss +++ b/themes/classic/sass/partials/_syntax.scss @@ -58,7 +58,7 @@ pre { line-height: 1.45em; font-size: .8em; margin-bottom: 1.5em; - padding: .4em .8em; + padding: .8em 1em; color: #555; overflow: auto; } diff --git a/themes/classic/sass/screen.scss b/themes/classic/sass/screen.scss index c27468f..a26f08e 100644 --- a/themes/classic/sass/screen.scss +++ b/themes/classic/sass/screen.scss @@ -6,6 +6,7 @@ @import "partials/solarized"; @import "custom/colors"; @import "core/theme"; +@import "custom/layout"; @import "core/layout"; @import "core/typography";