updated syntax styling to have nice headers for code windows

7 files changed, 36 insertions, 25 deletions

diff --git a/source/_includes/config.haml b/source/_includes/config.haml
deleted file mode 100644
index 7ac49a85..00000000
--- a/source/_includes/config.haml
+++ /dev/null
@@ -1,17 +0,0 @@
----
-blog_title: My Octopress Blog
-
-twitter_user: 
-tweet_count: 3
-show_replies: false
-
-delicious_user: 
-delicious_count: 3
-
-full_url: 
-disqus_short_name: 
-
-google_custom_search_id:
-google_analytics_tracking_id:
-
----
\ No newline at end of file
diff --git a/source/_layouts/default.haml b/source/_layouts/default.haml
index 9f4468b7..279682dd 100644
--- a/source/_layouts/default.haml
+++ b/source/_layouts/default.haml
@@ -2,7 +2,7 @@
 blog_title: My Octopress Blog
 author: 
 
-twitter_user: 
+twitter_user: imathis
 tweet_count: 3
 show_replies: false
 
diff --git a/source/images/code_bg.png b/source/images/code_bg.png
new file mode 100644
index 00000000..a57bab56
--- /dev/null
+++ b/source/images/code_bg.png
diff --git a/source/test/syntax.markdown b/source/test/syntax.markdown
index 368ba58d..ec5bab50 100644
--- a/source/test/syntax.markdown
+++ b/source/test/syntax.markdown
@@ -2,6 +2,8 @@
 layout: default
 title: Syntax Highlighting Debug
 ---
+<div class="code_window">
+<em>Ruby</em>
 {% highlight ruby %}
 def rebuild_site(relative)
   puts ">>> Change Detected to: #{relative} <<<"
@@ -11,9 +13,12 @@ def rebuild_site(relative)
   puts '>>> Update Complete <<<'
 end
 {% endhighlight %}
+</div>
 
 So that's a small example. What about a big one?
 
+<div class="code_window">
+<em>Ruby</em>
 {% highlight ruby %}
 require 'active_support/core_ext/array'
 require 'active_support/core_ext/hash/except'
@@ -219,4 +224,5 @@ module ActiveRecord
     end
   end
 end
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
+</div>
\ No newline at end of file
diff --git a/stylesheets/_layout.sass b/stylesheets/_layout.sass
index fe0d0d93..fc4a8c64 100644
--- a/stylesheets/_layout.sass
+++ b/stylesheets/_layout.sass
@@ -1,7 +1,7 @@
 !page_pad = 30px
 !page_width = 980px
 !sidebar_margin = 25px
-!sidebar_width = 250px
+!sidebar_width = 280px
 !default_border_radius = 4px
 
 html body
@@ -23,7 +23,6 @@ html body
 
 #page, #header, #footer, #nav
   min-width: #{!page_width}
-  
 #page, #content, .content
   +pie-clearfix
 #content
@@ -38,9 +37,9 @@ html body
 
 #sidebar
   float: left
-  width: #{!sidebar_width - !page_pad}
+  width: #{!sidebar_width - !page_pad/2}
   margin: 0 -100% 0 0
-  padding: #{!page_pad} 0 #{!page_pad} #{!page_pad}
+  padding: #{!page_pad} 0 #{!page_pad} #{!page_pad/2}
 
 #page.expanded
   #content
diff --git a/stylesheets/partials/_syntax.sass b/stylesheets/partials/_syntax.sass
index 633a4969..ff70c16b 100644
--- a/stylesheets/partials/_syntax.sass
+++ b/stylesheets/partials/_syntax.sass
@@ -1,3 +1,26 @@
+.code_window
+  +border-top-radius(5px)
+  +border-bottom-radius(2px)
+  background: #aaa #{image_url("code_bg.png")} top repeat-x
+  position: relative
+  margin: .3em 0 1.3em
+  padding: 0 3px 3px
+  font-size: 14px
+  border: 1px solid #898989
+  border-top-color: #cbcbcb
+  border-left-color: #a5a5a5
+  border-right-color: #a5a5a5
+  em
+    text-align: center
+    +text-shadow(#ccc, 1px, 1px, 1px)
+    display: block
+    padding: 1px 0
+    color: #333
+    font-style: normal
+    +sans-font
+  .highlight
+    margin: 0
+    
 pre
   color: #ccc
   font-size: 13px
diff --git a/stylesheets/partials/_twitter.sass b/stylesheets/partials/_twitter.sass
index 2db993f8..1545e67f 100644
--- a/stylesheets/partials/_twitter.sass
+++ b/stylesheets/partials/_twitter.sass
@@ -2,9 +2,9 @@
   p
     padding-bottom: 10px
     a.topic
-      color= !twitter_topic
+      color: #{!twitter_topic}
   .meta
-    color= !light_text
+    color: #{!light_text}
     font-size: 80%
     display: block
     padding: 8px 0 0