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

@@ -11,7 +11,7 @@
 #   <blockquote>
 #     <p>Wheeee!</p>
 #     <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>
 #
 require './_plugins/titlecase.rb'
@@ -40,18 +40,33 @@ def initialize(tag_name, markup, tokens)
     end
 
     def render(context)
-      output = super
-      author = "<strong>#{@by}</strong>"
-      cite = "<cite><a class='source' href='#{@source}'>#{(@title || 'source')}</a></cite>"
+      output = paragraphize(super.map(&:strip).join)
+      author = "<strong>#{@by.strip}</strong>"
+      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?
-        "<p>#{output.join.gsub(/\n\n/, '</p><p>')}</p>"
+        output
       elsif !@source.nil?
-        "<p>#{output.join.gsub(/\n\n/, '</p><p>')}</p><footer>#{author + cite}</footer>"
+        "#{output}<footer>#{author + cite}</footer>"
       else
-        "<p>#{output.join.gsub(/\n\n/, '</p><p>')}</p><footer>#{author}</footer>"
+        "#{output}<footer>#{author}</footer>"
       end
       "<blockquote>#{reply}</blockquote>"
     end
+
+    def paragraphize(input)
+      "<p>#{input.gsub(/\n\n/, '</p><p>').gsub(/\n/, '<br/>')}</p>"
+    end
   end
 end
 

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 {

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;
   }
 }
 

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;

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;

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;

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;
 }

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";