From da514a65594ee9f2be0bcd0aa3325acc7720ffac Mon Sep 17 00:00:00 2001
From: Brandon Mathis <brandon@imathis.com>
Date: Wed, 22 Jun 2011 18:53:17 -0400
Subject: 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 094e4bc3..2f0712bd 100644
--- a/themes/classic/_plugins/blockquote.rb
+++ b/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 @@ module Jekyll
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 << '/…' 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
diff --git a/themes/classic/sass/core/_layout.scss b/themes/classic/sass/core/_layout.scss
index 339c049f..8ad14a98 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 a3e5538d..3e07c93c 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 b6e541cc..0771a86c 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 00000000..162f5ad6
--- /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 5d80d4e2..485f5e89 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 cf012555..7ee650cb 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 c27468f6..a26f08e2 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";
--
cgit v1.2.1