From bdc66eabdfca4ae623ec359cd7751d60fbffc06e Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 14 Nov 2009 13:08:19 -0600 Subject: reorganized stylesheets --- source/_layouts/default.haml | 14 +++-- stylesheets/_layout.sass | 105 +--------------------------------- stylesheets/_partials.sass | 11 +++- stylesheets/partials/_footer.sass | 13 +++++ stylesheets/partials/_header.sass | 12 ++++ stylesheets/partials/_navigation.sass | 41 +++++++++++++ stylesheets/partials/_page.sass | 19 ++++++ stylesheets/partials/_sidebar.sass | 14 +++++ 8 files changed, 117 insertions(+), 112 deletions(-) create mode 100644 stylesheets/partials/_footer.sass create mode 100644 stylesheets/partials/_header.sass create mode 100644 stylesheets/partials/_navigation.sass create mode 100644 stylesheets/partials/_page.sass diff --git a/source/_layouts/default.haml b/source/_layouts/default.haml index 10e9315e..4da11a13 100644 --- a/source/_layouts/default.haml +++ b/source/_layouts/default.haml @@ -37,7 +37,7 @@ google_analytics: true %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") - %body + %body(id="#{(page.respond_to?(:body_id) ? page.body_id : nil)}") #header .page_width %a.title(href="/")=page.blog_title @@ -60,11 +60,13 @@ google_analytics: true .page_width #main - if page.respond_to? :date - %h2= page.title - = preserve rp(content) - %p.pubdate - Published: - =page.date.strftime("%d %b, %Y") + .blog + .article + %h2= page.title + = preserve rp(content) + %p.pubdate + Published: + =page.date.strftime("%d %b, %Y") - if page.respond_to? :disqus_short_name #disqus_thread :javascript diff --git a/stylesheets/_layout.sass b/stylesheets/_layout.sass index 4f792728..e58b0731 100644 --- a/stylesheets/_layout.sass +++ b/stylesheets/_layout.sass @@ -12,112 +12,9 @@ html body a color= !link_color -#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 - display: inline-block - color= !title_color - text-decoration: none - -#nav - +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)) - border: - top= "1px solid" !nav_border_top - bottom= "1px solid" !nav_border_bottom - ul - position: relative - +horizontal-list - margin: 0 auto - overflow: visible - li - padding: 0 15px - border-left= "1px solid" !nav_border_left - border-right= "1px solid" !nav_border_right - &.alpha - border-left: none - padding-left: 0 - &.omega - border-right: 0 - &.subscribe - position: absolute - left= !page_width - !sidebar_width - !sidebar_margin/2 - border: none - a - display: inline-block - padding-left: 28px - background: url("/images/rss.png") left top no-repeat - a - display: inline-block - color= !nav_color - line-height: 150% - text-decoration: none - &:hover - color= !nav_color_hover - .page_width width= !page_width margin: 0 auto padding: left= !page_pad - right= !page_pad - -#page - +clearfix - background-color= !page_bg - .page_width - +clearfix - position: relative - padding: - top: 25px - bottom: 25px - background-color= !blog_bg - +easy-box-shadow(#ccc) - border: - left= "1px solid" !page_border_sides - right= "1px solid" !page_border_sides -#main - width= !main_width - float: left - &.expanded - width: 100% - -#sidebar - float: left - width= !sidebar_width - margin-left= !sidebar_margin - font-size: 80% - line-height: 1.625em - h4 - margin: 20px 0 0 - &:first-child - margin-top: 10px - .small - +sans-font - font-size: 50% - -#footer - 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 - &:hover - color = #fff \ No newline at end of file + right= !page_pad \ No newline at end of file diff --git a/stylesheets/_partials.sass b/stylesheets/_partials.sass index 815d9581..160f93de 100644 --- a/stylesheets/_partials.sass +++ b/stylesheets/_partials.sass @@ -1,6 +1,13 @@ @import partials/shared.sass -@import partials/blog.sass @import partials/syntax.sass @import partials/search.sass @import partials/sidebar.sass -@import partials/twitter.sass \ No newline at end of file +@import partials/twitter.sass + +/* layout partials */ +@import partials/header.sass +@import partials/navigation.sass +@import partials/page.sass +@import partials/sidebar.sass +@import partials/blog.sass +@import partials/footer.sass \ No newline at end of file diff --git a/stylesheets/partials/_footer.sass b/stylesheets/partials/_footer.sass new file mode 100644 index 00000000..16ec40ff --- /dev/null +++ b/stylesheets/partials/_footer.sass @@ -0,0 +1,13 @@ +#footer + 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 + &:hover + color = #fff \ No newline at end of file diff --git a/stylesheets/partials/_header.sass b/stylesheets/partials/_header.sass new file mode 100644 index 00000000..8ab6ad1b --- /dev/null +++ b/stylesheets/partials/_header.sass @@ -0,0 +1,12 @@ +#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 + display: inline-block + color= !title_color + text-decoration: none \ No newline at end of file diff --git a/stylesheets/partials/_navigation.sass b/stylesheets/partials/_navigation.sass new file mode 100644 index 00000000..bdbf5115 --- /dev/null +++ b/stylesheets/partials/_navigation.sass @@ -0,0 +1,41 @@ +#nav + +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)) + border: + top= "1px solid" !nav_border_top + bottom= "1px solid" !nav_border_bottom + ul + position: relative + +horizontal-list + margin: 0 auto + overflow: visible + li + padding: 0 15px + border-left= "1px solid" !nav_border_left + border-right= "1px solid" !nav_border_right + &.alpha + border-left: none + padding-left: 0 + &.omega + border-right: 0 + &.subscribe + position: absolute + left= !page_width - !sidebar_width - !sidebar_margin/2 + border: none + a + display: inline-block + padding-left: 28px + background: url("/images/rss.png") left top no-repeat + a + display: inline-block + color= !nav_color + line-height: 150% + text-decoration: none + &:hover + color= !nav_color_hover \ No newline at end of file diff --git a/stylesheets/partials/_page.sass b/stylesheets/partials/_page.sass new file mode 100644 index 00000000..f161adbc --- /dev/null +++ b/stylesheets/partials/_page.sass @@ -0,0 +1,19 @@ +#page + +clearfix + background-color= !page_bg + .page_width + +clearfix + position: relative + padding: + top: 25px + bottom: 25px + background-color= !blog_bg + +easy-box-shadow(#ccc) + border: + left= "1px solid" !page_border_sides + right= "1px solid" !page_border_sides +#main + width= !main_width + float: left + &.expanded + width: 100% \ No newline at end of file diff --git a/stylesheets/partials/_sidebar.sass b/stylesheets/partials/_sidebar.sass index 44331b18..851a9f5a 100644 --- a/stylesheets/partials/_sidebar.sass +++ b/stylesheets/partials/_sidebar.sass @@ -1,3 +1,17 @@ +#sidebar + float: left + width= !sidebar_width + margin-left= !sidebar_margin + font-size: 80% + line-height: 1.625em + h4 + margin: 20px 0 0 + &:first-child + margin-top: 10px + .small + +sans-font + font-size: 50% + #twitter, #delicious +border-radius background: #f8f8f8 -- cgit v1.2.1