From 1eddd60a716accb9252600202b79f25a7ceda904 Mon Sep 17 00:00:00 2001
From: B Mathis <brandon@imathis.com>
Date: Thu, 12 Nov 2009 10:19:36 -0600
Subject: updated syntax style, added javascript for expanding code blocks
---
source/_layouts/default.haml | 1 +
source/javascripts/octopress.js | 34 ++++++++++++++++++++++++++++++++++
source/test/syntax.markdown | 19 ++++++++++---------
stylesheets/_layout.sass | 4 ++--
stylesheets/library/_typography.sass | 2 ++
stylesheets/partials/_syntax.sass | 35 ++++++++++++++++++++++++++---------
6 files changed, 75 insertions(+), 20 deletions(-)
create mode 100644 source/javascripts/octopress.js
diff --git a/source/_layouts/default.haml b/source/_layouts/default.haml
index 8f698ea4..a072fc1e 100644
--- a/source/_layouts/default.haml
+++ b/source/_layouts/default.haml
@@ -33,6 +33,7 @@ google_analytics: true
var tweet_count = #{page.tweet_count};
%script(src="/javascripts/mootools-yui-compressed.js" type="text/javascript")
%script(src="/javascripts/mootools-1.2.4.2-more.js" type="text/javascript")
+ %script(src="/javascripts/octopress.js" type="text/javascript")
%script(src="/javascripts/twitter.js" type="text/javascript")
- if page.respond_to? :google_analytics
%script(src="http://www.google-analytics.com/ga.js" type="text/javascript")
diff --git a/source/javascripts/octopress.js b/source/javascripts/octopress.js
new file mode 100644
index 00000000..300d9c6a
--- /dev/null
+++ b/source/javascripts/octopress.js
@@ -0,0 +1,34 @@
+window.addEvent('domready', function() {
+ addPreExpanders();
+});
+
+function addPreExpanders(){
+ $$('div.highlight').each(function(div){
+ addExpander(div);
+ });
+}
+function addExpander(div){
+ new Element('span',{
+ html: 'expand »',
+ 'class': 'pre_expander',
+ 'styles': {
+ 'display': 'block'
+ },
+ 'events': {
+ 'click': function(){
+ toggleExpander();
+ }
+ }
+ }).inject(div, 'top');
+}
+function toggleExpander(){
+ var html = '';
+ if($('main').toggleClass('expanded').hasClass('expanded')){
+ html = '« contract';
+ } else {
+ html = 'expand »';
+ }
+ $$('div.highlight span.pre_expander').each(function(span){
+ span.set('html',html);
+ });
+}
\ No newline at end of file
diff --git a/source/test/syntax.markdown b/source/test/syntax.markdown
index 8a406628..368ba58d 100644
--- a/source/test/syntax.markdown
+++ b/source/test/syntax.markdown
@@ -2,18 +2,19 @@
layout: default
title: Syntax Highlighting Debug
---
-{% highlight ruby linenos %}
- def rebuild_site(relative)
- puts ">>> Change Detected to: #{relative} <<<"
- IO.popen('rake generate') do |io|
- print(io.readpartial(512)) until io.eof?
- end
- puts '>>> Update Complete <<<'
+{% highlight ruby %}
+def rebuild_site(relative)
+ puts ">>> Change Detected to: #{relative} <<<"
+ IO.popen('rake generate') do |io|
+ print(io.readpartial(512)) until io.eof?
end
-
+ puts '>>> Update Complete <<<'
+end
{% endhighlight %}
-{% highlight ruby linenos %}
+So that's a small example. What about a big one?
+
+{% highlight ruby %}
require 'active_support/core_ext/array'
require 'active_support/core_ext/hash/except'
require 'active_support/core_ext/object/metaclass'
diff --git a/stylesheets/_layout.sass b/stylesheets/_layout.sass
index 1b57761b..94c6015e 100644
--- a/stylesheets/_layout.sass
+++ b/stylesheets/_layout.sass
@@ -87,9 +87,9 @@ html body
right= "1px solid" !page_border_sides
#main
width= !page_width - !sidebar_width - !sidebar_margin
-
-#main
float: left
+ &.expanded
+ width: 100%
#footer
position: relative
diff --git a/stylesheets/library/_typography.sass b/stylesheets/library/_typography.sass
index d78f869f..d203ecf8 100644
--- a/stylesheets/library/_typography.sass
+++ b/stylesheets/library/_typography.sass
@@ -17,6 +17,8 @@
font-family: Georgia, Times, "Times New Roman", serif
=fixed-font
font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
+=mono-font
+ +fixed-font
=general-typography(!font_size = !base_font_size)
+set-heading-sizes(!font_size)
diff --git a/stylesheets/partials/_syntax.sass b/stylesheets/partials/_syntax.sass
index 5064a816..ee22a1d9 100644
--- a/stylesheets/partials/_syntax.sass
+++ b/stylesheets/partials/_syntax.sass
@@ -2,21 +2,38 @@ pre
color: #ccc
font-size: 13px
background: #222
- padding: 0 15px 0 0
- line-height: 1.625em
+ line-height: 1.5em
border: #aaa 1px solid
overflow-x: auto
+ padding: 25px 20px
.lineno
color: #888
background: #e3e3e3
- position: relative
- line-height: 180%
display: inline-block
- padding: 0 10px
+ padding: 0 0 0 10px
&:first-child
- padding-top: 12px
- &:last-child
- padding-bottom: 12px
+ padding-top: 15px
+ display: inline-block
+
+.highlight
+ position: relative
+ .pre_expander
+ +mono-font
+ font-size: 10px
+ text-align: right
+ padding: 4px 8px
+ line-height: 150%
+ position: absolute
+ cursor: pointer
+ top: 2px
+ right: 2px
+ +border-bottom-left-radius
+ display: block
+ color: #777
+ background: #333
+ &:hover
+ background: #444
+ color: #ccc
// based on: http://github.com/mojombo/tpw/raw/master/css/syntax.css
.editor
@@ -41,7 +58,7 @@ pre.console
color= lighten(#008000, 75)
.highlight
- padding: 0.5em
+ padding: 0 0 0.1em
color: white
// Comment
.c
--
cgit v1.2.1