From 42251dddcadd8ff23f30b128f1f468b18c0adf92 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Wed, 10 Mar 2010 13:59:18 -0600 Subject: [PATCH] improved layout flexibility --- source/_includes/footer.haml | 2 +- source/_includes/header.haml | 7 ++- source/_includes/navigation.haml | 2 +- source/_layouts/blog_post.haml | 4 +- source/_layouts/default.haml | 5 +- source/_posts/2009-11-13-hello-world.markdown | 1 + source/javascripts/octopress.js | 2 +- stylesheets/_layout.sass | 58 ++++++++++++++----- stylesheets/_library.sass | 9 +-- stylesheets/_theme.sass | 4 +- stylesheets/library/_border_radius.sass | 47 --------------- stylesheets/library/_button_style.sass | 45 -------------- stylesheets/library/_clearfix.sass | 24 -------- stylesheets/library/_easy_box_shadow.sass | 12 ---- stylesheets/library/_gradient.sass | 15 ----- stylesheets/library/_hacks.sass | 8 --- stylesheets/library/_opacity.sass | 18 ------ stylesheets/library/_sprite_hover.sass | 4 -- stylesheets/library/_sprite_img.sass | 52 ----------------- stylesheets/library/_typography.sass | 16 ++--- stylesheets/partials/_blog.sass | 10 ++-- stylesheets/partials/_footer.sass | 15 +++-- stylesheets/partials/_header.sass | 19 +++--- stylesheets/partials/_navigation.sass | 23 ++++---- stylesheets/partials/_page.sass | 23 ++------ stylesheets/partials/_search.sass | 4 +- stylesheets/partials/_sidebar.sass | 23 ++++---- 27 files changed, 124 insertions(+), 328 deletions(-) delete mode 100644 stylesheets/library/_border_radius.sass delete mode 100644 stylesheets/library/_button_style.sass delete mode 100644 stylesheets/library/_clearfix.sass delete mode 100644 stylesheets/library/_easy_box_shadow.sass delete mode 100644 stylesheets/library/_gradient.sass delete mode 100644 stylesheets/library/_hacks.sass delete mode 100644 stylesheets/library/_opacity.sass delete mode 100644 stylesheets/library/_sprite_hover.sass delete mode 100644 stylesheets/library/_sprite_img.sass diff --git a/source/_includes/footer.haml b/source/_includes/footer.haml index 3385617..99870db 100644 --- a/source/_includes/footer.haml +++ b/source/_includes/footer.haml @@ -1,5 +1,5 @@ #footer - .page_width + .content Copyright © #{Time.now.strftime('%Y')} - #{page.blog_title} - %span.credit Powered by Octopress diff --git a/source/_includes/header.haml b/source/_includes/header.haml index ce1d054..f4b821f 100644 --- a/source/_includes/header.haml +++ b/source/_includes/header.haml @@ -1,6 +1,7 @@ -.page_width - %a.title(href="/")=page.blog_title - - if page.respond_to? :google_custom_search_id +.content + %h1 + %a.title(href="/")=page.blog_title + - if page.respond_to?(:google_custom_search_id) && page.google_custom_search_id #search %form(action="http://www.google.com/cse" id="cse-search-box") %input(type="hidden" name="cx" value="#{page.google_custom_search_id}") diff --git a/source/_includes/navigation.haml b/source/_includes/navigation.haml index 4b273fc..8ee0bfe 100644 --- a/source/_includes/navigation.haml +++ b/source/_includes/navigation.haml @@ -1,4 +1,4 @@ -.page_width +.content %ul %li.alpha %a(href="/") Blog diff --git a/source/_layouts/blog_post.haml b/source/_layouts/blog_post.haml index 112df95..8201632 100644 --- a/source/_layouts/blog_post.haml +++ b/source/_layouts/blog_post.haml @@ -25,8 +25,8 @@ google_analytics_tracking_id: #header= include "header.haml" #nav= include "navigation.haml" #page - .page_width + #content #main - .blog= include "post.haml" + .blog.content= include "post.haml" #sidebar= include "sidebar.haml" = include "footer.haml" \ No newline at end of file diff --git a/source/_layouts/default.haml b/source/_layouts/default.haml index ef41e25..9f4468b 100644 --- a/source/_layouts/default.haml +++ b/source/_layouts/default.haml @@ -25,7 +25,8 @@ google_analytics_tracking_id: #header= include "header.haml" #nav= include "navigation.haml" #page - .page_width - #main= preserve rp(content) + #content + #main + .content= preserve rp(content) #sidebar= include "sidebar.haml" = include "footer.haml" \ No newline at end of file diff --git a/source/_posts/2009-11-13-hello-world.markdown b/source/_posts/2009-11-13-hello-world.markdown index 35cda1d..40ac325 100644 --- a/source/_posts/2009-11-13-hello-world.markdown +++ b/source/_posts/2009-11-13-hello-world.markdown @@ -1,5 +1,6 @@ --- title: Hello World! I'm Octopress! +updated: March 10th, 2010 --- **Octopress is a blogging framework designed for hackers**, based on [Jekyll](http://github.com/mojombo/jekyll) the blog aware static site generator powering [Github pages](http://pages.github.com/). diff --git a/source/javascripts/octopress.js b/source/javascripts/octopress.js index 8e7c1a4..d5173a4 100644 --- a/source/javascripts/octopress.js +++ b/source/javascripts/octopress.js @@ -17,7 +17,7 @@ function addExpander(div){ function toggleExpander(expander){ var html = ''; var expanderPos = expander.getPosition().y; - if($('main').toggleClass('expanded').hasClass('expanded')) + if($('page').toggleClass('expanded').hasClass('expanded')) html = '« contract'; else html = 'expand »'; diff --git a/stylesheets/_layout.sass b/stylesheets/_layout.sass index e58b073..fe0d0d9 100644 --- a/stylesheets/_layout.sass +++ b/stylesheets/_layout.sass @@ -1,20 +1,52 @@ -!page_width = 900px -!main_width = 620px !page_pad = 30px -!sidebar_margin = 30px -!sidebar_width = !page_width - !main_width - !sidebar_margin -!pad = 15px +!page_width = 980px +!sidebar_margin = 25px +!sidebar_width = 250px !default_border_radius = 4px html body - background-color= !body_bg - color= !body_color + background-color: #{!body_bg} + color: #{!body_color} a - color= !link_color + color: #{!link_color} + &:hover, &:focus + color: #{saturate(darken(!link_color, 15), 20)} + &:visited + color: #{darken(adjust_hue(!link_color, 70), 10)} -.page_width - width= !page_width +#header, #footer, #nav + .content + position: relative + margin: 0 auto + width: #{!page_width - !page_pad} + padding: 0 #{!page_pad/2} + +#page, #header, #footer, #nav + min-width: #{!page_width} + +#page, #content, .content + +pie-clearfix +#content margin: 0 auto - padding: - left= !page_pad - right= !page_pad \ No newline at end of file + width: #{!page_width - !sidebar_width - !page_pad/2} + padding: 0 #{!sidebar_width} 0 #{!page_pad/2} +#main + float: left + width: 100% + .content + padding-right: #{!sidebar_margin} + +#sidebar + float: left + width: #{!sidebar_width - !page_pad} + margin: 0 -100% 0 0 + padding: #{!page_pad} 0 #{!page_pad} #{!page_pad} + +#page.expanded + #content + width: #{!page_width} + padding: 0 + #sidebar + float: none + margin: 0 + padding: 0 0 #{!page_pad} \ No newline at end of file diff --git a/stylesheets/_library.sass b/stylesheets/_library.sass index e6c0082..3861722 100644 --- a/stylesheets/_library.sass +++ b/stylesheets/_library.sass @@ -1,10 +1,7 @@ +@import compass/utilities @import compass/css3 + @import library/reset.sass -@import library/clearfix.sass -@import library/border_radius.sass -@import library/easy_box_shadow.sass @import library/list_borders.sass @import library/typography.sass -@import library/link_colors.sass -@import library/gradient.sass -@import library/button_style.sass \ No newline at end of file +@import library/link_colors.sass \ No newline at end of file diff --git a/stylesheets/_theme.sass b/stylesheets/_theme.sass index 48a7b94..5b87b61 100644 --- a/stylesheets/_theme.sass +++ b/stylesheets/_theme.sass @@ -20,10 +20,12 @@ !page_border_sides = #ccc !page_bg = #f0f0f0 +!sidebar_bg = #fcfcfc +!sidebar_border = #eee // Blog !article_border = #eee -!blog_bg = #fff +!main_bg = #fff !footer_color = #999 !footer_bg = #444 diff --git a/stylesheets/library/_border_radius.sass b/stylesheets/library/_border_radius.sass deleted file mode 100644 index 475b66d..0000000 --- a/stylesheets/library/_border_radius.sass +++ /dev/null @@ -1,47 +0,0 @@ -!default_border_radius ||= 5px - -// Round all borders by amount -=border-radius(!radius = !default_border_radius) - border-radius= !radius - -moz-border-radius= !radius - -webkit-border-radius= !radius - -// Round radius at position by amount. -// values for !vert: "top", "bottom" -// values for !horz: "left", "right -=border-corner-radius(!vert, !horz, !radius = !default_border_radius) - border-#{!vert}-#{!horz}-radius= !radius - -moz-border-radius-#{!vert}#{!horz}= !radius - -webkit-border-#{!vert}-#{!horz}-radius= !radius - -=border-top-left-radius(!radius = !default_border_radius) - +border-corner-radius("top", "left", !radius) - -=border-top-right-radius(!radius = !default_border_radius) - +border-corner-radius("top", "right", !radius) - -=border-bottom-left-radius(!radius = !default_border_radius) - +border-corner-radius("bottom", "left", !radius) - -=border-bottom-right-radius(!radius = !default_border_radius) - +border-corner-radius("bottom", "right", !radius) - -// Round top corners by amount -=border-top-radius(!radius = !default_border_radius) - +border-top-left-radius(!radius) - +border-top-right-radius(!radius) - -// Round right corners by amount -=border-right-radius(!radius = !default_border_radius) - +border-top-right-radius(!radius) - +border-bottom-right-radius(!radius) - -// Round bottom corners by amount -=border-bottom-radius(!radius = !default_border_radius) - +border-bottom-left-radius(!radius) - +border-bottom-right-radius(!radius) - -// Round left corners by amount -=border-left-radius(!radius = !default_border_radius) - +border-top-left-radius(!radius) - +border-bottom-left-radius(!radius) \ No newline at end of file diff --git a/stylesheets/library/_button_style.sass b/stylesheets/library/_button_style.sass deleted file mode 100644 index 2b68d5d..0000000 --- a/stylesheets/library/_button_style.sass +++ /dev/null @@ -1,45 +0,0 @@ -=btn-border-color(!color) - border-color= darken(!color, 25) - -=btn-text-shadow(!color) - !text_shadow = darken(!color, 25) - text-shadow= !text_shadow "1px 1px 1px" - -=btn-style(!color) - !color1 = lighten(!color, 30) - !color2 = darken(!color, 20) - +h-linear-gradient(!color1, !color2) - background-color= !color - +btn-border-color(!color) - +btn-text-shadow(!color) - -=btn-style-hover(!color) - !color = lighten(!color, 8) - !color1 = lighten(!color, 22) - !color2 = darken(!color, 38) - +h-linear-gradient(!color1, !color2) - background-color= !color - +btn-border-color(!color) - +btn-text-shadow(!color) - -=btn-style-active(!color) - !color = darken(!color, 5) - !color1 = lighten(!color, 25) - !color2 = darken(!color, 35) - +h-linear-gradient(!color1, !color2) - background-color= !color - +btn-border-color(!color) - +btn-text-shadow(!color) - -=btn-structure(!font_size, !border_width, !line_height = !font_size *1.2) - !v_padding = floor(!font_size/2.5) - !h_padding = floor(!font_size) - !v_padding_active = !v_padding - 1px - !h_padding_active = !h_padding - 1px - border-width= !border_width - font-size= !font_size - padding= !v_padding !h_padding - line-height= !line_height - &:active - border-width= !border_width + 1px - padding= !v_padding_active !h_padding_active \ No newline at end of file diff --git a/stylesheets/library/_clearfix.sass b/stylesheets/library/_clearfix.sass deleted file mode 100644 index 29548fe..0000000 --- a/stylesheets/library/_clearfix.sass +++ /dev/null @@ -1,24 +0,0 @@ -// based on compass clearfix - -@import _hacks.sass - -// Extends the element to enclose any floats it contains. -// This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container. -// Recommendations include using this in conjunction with a width: -// http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html -=clearfix - :overflow hidden - +has-layout - -// Extends the element to enclose any floats it contains. -// This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS. -// http://www.positioniseverything.net/easyclearing.html -=pie-clearfix - &:after - :content " " - :display block - :height 0 - :clear both - :overflow hidden - :visibility hidden - +has-layout \ No newline at end of file diff --git a/stylesheets/library/_easy_box_shadow.sass b/stylesheets/library/_easy_box_shadow.sass deleted file mode 100644 index b8b9fce..0000000 --- a/stylesheets/library/_easy_box_shadow.sass +++ /dev/null @@ -1,12 +0,0 @@ -!default_box_shadow_color = #333 -!default_box_shadow_x_offset = 1px -!default_box_shadow_y_offset = 1px -!default_box_shadow_blur_radius = 8px - -=box-shadow(!color = !default_box_shadow_color, !blur_radius = !default_box_shadow_blur_radius, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset, !inset = "") - box-shadow= !inset !x_offset !y_offset !blur_radius !color - -webkit-box-shadow= !inset !x_offset !y_offset !blur_radius !color - -moz-box-shadow= !inset !x_offset !y_offset !blur_radius !color - -=inset-box-shadow(!color = !default_box_shadow_color, !blur_radius = !default_box_shadow_blur_radius, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset) - +box-shadow(!color, !blur_radius, !x_offset, !y_offset, "inset") \ No newline at end of file diff --git a/stylesheets/library/_gradient.sass b/stylesheets/library/_gradient.sass deleted file mode 100644 index 31c498e..0000000 --- a/stylesheets/library/_gradient.sass +++ /dev/null @@ -1,15 +0,0 @@ -=linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop1 = 0, !color_stop1_pos = .3, !color_stop_2 = 0, !color_stop2_pos = .9) - !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})" - //@if !color_stop1 != 0 - // !gradient += "color-stop(#{!color_stop1_pos}, #{!color_stop1})" - background= "-webkit-gradient(linear, #{!gradient})" - background= "-moz-linear-gradient(#{!gradient})" - -=h-linear-gradient(!color1, !color2) - +linear-gradient("left top", "left bottom", !color1, !color2) - -=v-linear-gradient(!color1, !color2) - +linear-gradient("left top", "right top", !color1, !color2) - -//=h-three-color-gradient(!color1, !color2, !color3, !color3_pos = .5) -// +linear-gradient("left top", "left bottom", !color1, !color2, !color3, !color3_pos) \ No newline at end of file diff --git a/stylesheets/library/_hacks.sass b/stylesheets/library/_hacks.sass deleted file mode 100644 index 33b442b..0000000 --- a/stylesheets/library/_hacks.sass +++ /dev/null @@ -1,8 +0,0 @@ -// based on compass hacks - -=has-layout - // This makes ie6 get layout - :display inline-block - // and this puts it back to block - & - :display block \ No newline at end of file diff --git a/stylesheets/library/_opacity.sass b/stylesheets/library/_opacity.sass deleted file mode 100644 index f8d2a05..0000000 --- a/stylesheets/library/_opacity.sass +++ /dev/null @@ -1,18 +0,0 @@ -//** - Provides cross-browser css opacity. - @param !opacity - A number between 0 and 1, where 0 is transparent and 1 is opaque. -=opacity(!opacity) - :opacity= !opacity - :-moz-opacity= !opacity - :-khtml-opacity= !opacity - :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")" - :filter= "alpha(opacity=" + round(!opacity*100) + ")" - -// Make an element completely transparent. -=transparent - +opacity(0) - -// Make an element completely opaque. -=opaque - +opacity(1) diff --git a/stylesheets/library/_sprite_hover.sass b/stylesheets/library/_sprite_hover.sass deleted file mode 100644 index 13c644f..0000000 --- a/stylesheets/library/_sprite_hover.sass +++ /dev/null @@ -1,4 +0,0 @@ -=sprite-column-hover-row(!col, !row_hover=2, !width=!sprite_default_size, !height=!sprite_default_size, !margin=!sprite_default_margin) - +sprite-position(!col, 1, !width, !height, !margin) - &:hover - +sprite-position(!col, !row_hover, !width, !height, !margin) \ No newline at end of file diff --git a/stylesheets/library/_sprite_img.sass b/stylesheets/library/_sprite_img.sass deleted file mode 100644 index dadac12..0000000 --- a/stylesheets/library/_sprite_img.sass +++ /dev/null @@ -1,52 +0,0 @@ -//** - Example 1: - a.twitter - +sprite-img("icons-32.png", 1) - a.facebook - +sprite-img("icons-32png", 2) - ... - Example 2: - a - +sprite-background("icons-32.png") - a.twitter - +sprite-column(1) - a.facebook - +sprite-row(2) - ... - -!sprite_default_size ||= 32px -!sprite_default_margin ||= 0px -!sprite_image_default_width ||= !sprite_default_size -!sprite_image_default_height ||= !sprite_default_size - - -// Sets all the rules for a sprite from a given sprite image to show just one of the sprites. -// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning. -=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin) - +sprite-background(!img, !width, !height) - +sprite-position(!col, !row, !width, !height, !margin) - -// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region. -=sprite-background(!img, !width = !sprite_default_size, !height = !width) - +sprite-background-rectangle(!img, !width, !height) - -// Sets rules common for all sprites, assumes a rectangular region. -=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height) - :background= image_url(!img) "no-repeat" - :width= !width - :height= !height - :overflow hidden - -// Allows horizontal sprite positioning optimized for a single row of sprites. -=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin) - +sprite-position(!col, 1, !width, 0px, !margin) - -// Allows vertical sprite positioning optimized for a single column of sprites. -=sprite-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin) - +sprite-position(1, !row, 0px, !height, !margin) - -// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites. -=sprite-position(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin) - !x = ((!col - 1) * -!width) - ((!col - 1) * !margin) - !y = ((!row - 1) * -!height) - ((!row - 1) * !margin) - :background-position= !x !y \ No newline at end of file diff --git a/stylesheets/library/_typography.sass b/stylesheets/library/_typography.sass index b432d67..c349a7c 100644 --- a/stylesheets/library/_typography.sass +++ b/stylesheets/library/_typography.sass @@ -2,12 +2,12 @@ !small ||= floor(!base_font_size * .85) !big ||= floor(!base_font_size * 1.25) !base_font_color ||= #333 -!h6 = ceil(!base_font_size*1.3) -!h5 = ceil(!base_font_size*1.4) -!h4 = ceil(!base_font_size*1.7) -!h3 = ceil(!base_font_size*1.9) -!h2 = ceil(!base_font_size*2.2) -!h1 = ceil(!base_font_size*2.5) +!h6 = ceil(!base_font_size*1) +!h5 = ceil(!base_font_size*1) +!h4 = ceil(!base_font_size*1.2) +!h3 = ceil(!base_font_size*1.8) +!h2 = ceil(!base_font_size*2.8) +!h1 = ceil(!base_font_size*3.2) =heading-font font-family: "Helvetica Neue", Helvetica, Arial, sans-serif @@ -29,8 +29,8 @@ !h5 = ceil(!font_size*1) !h4 = ceil(!font_size*1.2) !h3 = ceil(!font_size*1.8) - !h2 = ceil(!font_size*3) - !h1 = ceil(!font_size*3.5) + !h2 = ceil(!font_size*2.8) + !h1 = ceil(!font_size*3.2) h1, h2, h3, h4 &:first-child margin-top: 0 diff --git a/stylesheets/partials/_blog.sass b/stylesheets/partials/_blog.sass index b54ef4f..75325b3 100644 --- a/stylesheets/partials/_blog.sass +++ b/stylesheets/partials/_blog.sass @@ -7,12 +7,12 @@ &:hover text-decoration: underline .article - padding= !base_font_size * 1.5 0 !base_font_size * 1.5 - border-bottom= "1px solid" !article_border + padding: #{!base_font_size * 1.5 0} #{!base_font_size * 1.5} + border-bottom: 1px solid #{!article_border} &:first-child padding-top: 0 #disqus_thread - padding-top= !base_font_size + padding-top: #{!base_font_size} .meta +sans-font border-bottom: 1px dashed #ddd @@ -21,4 +21,6 @@ padding: 8px 0 5px margin-bottom: 1.5em font-size: 75% - letter-spacing: 1px \ No newline at end of file + letter-spacing: 1px + .footer + padding-top: 15px \ No newline at end of file diff --git a/stylesheets/partials/_footer.sass b/stylesheets/partials/_footer.sass index 16ec40f..c67118c 100644 --- a/stylesheets/partials/_footer.sass +++ b/stylesheets/partials/_footer.sass @@ -1,13 +1,12 @@ #footer + +linear-gradient(color_stops(darken(!body_bg, 5), !body_bg)) + font-size: #{!base_font_size_small} + color: #{!footer_color} + border-top: 10px solid #{!footer_bg} + padding: 15px 0 position: relative z-index: 2 - font-size= !base_font_size_small - clear: both - padding= !base_font_size * 1.5 0 - color= !footer_color - +h-linear-gradient(darken(!body_bg, 25), !body_bg) - border-top= "14px solid" !footer_bg a - color= #ddd + color: #ddd &:hover - color = #fff \ No newline at end of file + color: #fff \ No newline at end of file diff --git a/stylesheets/partials/_header.sass b/stylesheets/partials/_header.sass index 8ab6ad1..2c70ba6 100644 --- a/stylesheets/partials/_header.sass +++ b/stylesheets/partials/_header.sass @@ -1,12 +1,11 @@ #header - background-color= !header_bg - border-bottom= "1px solid" !header_border - padding: 30px 0 - .page_width - position: relative - a.title - font-size= !h1 - +heading-font + background-color: {!header_bg} + border-bottom: 1px solid #{!header_border} + padding: 25px 0 + h1 display: inline-block - color= !title_color - text-decoration: none \ No newline at end of file + margin: 0 + a.title + font-weight: normal + color: #{!title_color} + text-decoration: none \ No newline at end of file diff --git a/stylesheets/partials/_navigation.sass b/stylesheets/partials/_navigation.sass index bdbf511..2667b74 100644 --- a/stylesheets/partials/_navigation.sass +++ b/stylesheets/partials/_navigation.sass @@ -2,23 +2,20 @@ +clearfix position: relative z-index: 1 - padding: 6px 0 - background: - color= !nav_bg - image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4)) - image: -moz-linear-gradient(left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4)) + background-color: #{!nav_bg} + +linear-gradient(color_stops(#fcfcfc, #f4f4f4 .3, #ddd)) border: - top= "1px solid" !nav_border_top - bottom= "1px solid" !nav_border_bottom + top: 1px solid #{!nav_border_top} + bottom: 1px solid #{!nav_border_bottom} ul position: relative +horizontal-list margin: 0 auto - overflow: visible + padding: 6px 0 li padding: 0 15px - border-left= "1px solid" !nav_border_left - border-right= "1px solid" !nav_border_right + border-left: 1px solid #{!nav_border_left} + border-right: 1px solid #{!nav_border_right} &.alpha border-left: none padding-left: 0 @@ -26,7 +23,7 @@ border-right: 0 &.subscribe position: absolute - left= !page_width - !sidebar_width - !sidebar_margin/2 + left: #{!page_width - !sidebar_width - !sidebar_margin/2} border: none a display: inline-block @@ -34,8 +31,8 @@ background: url("/images/rss.png") left top no-repeat a display: inline-block - color= !nav_color + color: #{!nav_color} line-height: 150% text-decoration: none &:hover - color= !nav_color_hover \ No newline at end of file + color: #{!nav_color_hover} \ No newline at end of file diff --git a/stylesheets/partials/_page.sass b/stylesheets/partials/_page.sass index e17c8ac..29dcc92 100644 --- a/stylesheets/partials/_page.sass +++ b/stylesheets/partials/_page.sass @@ -1,19 +1,8 @@ #page - +clearfix - background-color= !page_bg - .page_width - +clearfix - position: relative - padding: - top: 25px - bottom: 25px - background-color= !blog_bg - +box-shadow(#ccc) - border: - left= "1px solid" !page_border_sides - right= "1px solid" !page_border_sides + background-color: #{!main_bg} #main - width= !main_width - float: left - &.expanded - width: 100% \ No newline at end of file + background-color: #{!main_bg} + border-right: 1px solid #{!sidebar_border} + padding: + top: 25px + bottom: 25px \ No newline at end of file diff --git a/stylesheets/partials/_search.sass b/stylesheets/partials/_search.sass index 72bebdf..0deb11a 100644 --- a/stylesheets/partials/_search.sass +++ b/stylesheets/partials/_search.sass @@ -1,7 +1,7 @@ #search position: absolute - left= !page_width + !sidebar_margin - !sidebar_width - top= 10% + left: #{!page_width + !sidebar_margin - !sidebar_width} + top: #{30%} form background: url(/images/search_bg.png) no-repeat padding: 0 diff --git a/stylesheets/partials/_sidebar.sass b/stylesheets/partials/_sidebar.sass index 851a9f5..d98ef35 100644 --- a/stylesheets/partials/_sidebar.sass +++ b/stylesheets/partials/_sidebar.sass @@ -1,16 +1,17 @@ #sidebar - float: left - width= !sidebar_width - margin-left= !sidebar_margin - font-size: 80% - line-height: 1.625em - h4 - margin: 20px 0 0 + line-height: 1.45em + font-size: 90% + h3 + font-size: #{!h4+2} + margin: 20px -15px 10px + padding: 12px 15px + background: #fff + border-bottom: 1px solid #e5e5e5 + border-top: 1px solid #e5e5e5 &:first-child - margin-top: 10px - .small - +sans-font - font-size: 50% + margin-top: 0 + h4 + font-size: #{!h5} #twitter, #delicious +border-radius