Mic92/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improved layout flexibility

Browse Source
This commit is contained in:
B Mathis 2010-03-10 13:59:18 -06:00
parent 33bca7246e
commit 42251dddca
27 changed files with 124 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/_includes/footer.haml
View File

@ -1,5 +1,5 @@
#footer
.page_width
.content
Copyright © #{Time.now.strftime('%Y')} - #{page.blog_title} -
%span.credit Powered by <a href="http://octopress.org">Octopress</a>

7
source/_includes/header.haml
View File

@ -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}")

2
source/_includes/navigation.haml
View File

@ -1,4 +1,4 @@
.page_width
.content
%ul
%li.alpha
%a(href="/") Blog

4
source/_layouts/blog_post.haml
View File

@ -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"

5
source/_layouts/default.haml
View File

@ -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"

1
source/_posts/2009-11-13-hello-world.markdown
View File

@ -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/).

2
source/javascripts/octopress.js
View File

@ -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 = '&laquo; contract';
else
html = 'expand &raquo;';

58
stylesheets/_layout.sass
View File

@ -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
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}

7
stylesheets/_library.sass
View File

@ -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

4
stylesheets/_theme.sass
View File

@ -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

47
stylesheets/library/_border_radius.sass
View File

@ -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)

45
stylesheets/library/_button_style.sass
View File

@ -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

24
stylesheets/library/_clearfix.sass
View File

@ -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

12
stylesheets/library/_easy_box_shadow.sass
View File

@ -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")

15
stylesheets/library/_gradient.sass
View File

@ -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)

8
stylesheets/library/_hacks.sass
View File

@ -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

18
stylesheets/library/_opacity.sass
View File

@ -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)

4
stylesheets/library/_sprite_hover.sass
View File

@ -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)

52
stylesheets/library/_sprite_img.sass
View File

@ -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

16
stylesheets/library/_typography.sass
View File

@ -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

8
stylesheets/partials/_blog.sass
View File

@ -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
@ -22,3 +22,5 @@
margin-bottom: 1.5em
font-size: 75%
letter-spacing: 1px
.footer
padding-top: 15px

15
stylesheets/partials/_footer.sass
View File

@ -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
color: #fff

19
stylesheets/partials/_header.sass
View File

@ -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
margin: 0
a.title
font-weight: normal
color: #{!title_color}
text-decoration: none

23
stylesheets/partials/_navigation.sass
View File

@ -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
color: #{!nav_color_hover}

23
stylesheets/partials/_page.sass
View File

@ -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%
background-color: #{!main_bg}
border-right: 1px solid #{!sidebar_border}
padding:
top: 25px
bottom: 25px

4
stylesheets/partials/_search.sass
View File

@ -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

23
stylesheets/partials/_sidebar.sass
View File

@ -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