From 16aab4abb277c2b98947b0983b442741fb19045e Mon Sep 17 00:00:00 2001
From: B Mathis <brandon@imathis.com>
Date: Wed, 10 Mar 2010 14:22:19 -0600
Subject: updated syntax styling to have nice headers for code windows
---
source/_includes/config.haml | 17 -----------------
source/_layouts/default.haml | 2 +-
source/images/code_bg.png | Bin 0 -> 239 bytes
source/test/syntax.markdown | 8 +++++++-
stylesheets/_layout.sass | 7 +++----
stylesheets/partials/_syntax.sass | 23 +++++++++++++++++++++++
stylesheets/partials/_twitter.sass | 4 ++--
7 files changed, 36 insertions(+), 25 deletions(-)
delete mode 100644 source/_includes/config.haml
create mode 100644 source/images/code_bg.png
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
Binary files /dev/null and b/source/images/code_bg.png differ
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
--
cgit v1.2.1