fixed rake preview and updated sass to sass3 syntax

This commit is contained in:
B Mathis 2010-07-26 10:55:53 -05:00
parent 5951848f72
commit 76b8b8ca45
22 changed files with 248 additions and 244 deletions

View File

@ -5,6 +5,6 @@ gem 'activesupport', "2.3.2"
gem 'henrik-jekyll'
gem 'compass'
gem 'compass-colors'
gem 'rdiscount'
gem 'kramdown'
gem 'fssm'
gem 'serve'

View File

@ -43,7 +43,7 @@ end
desc "generate website in output directory"
task :generate => [:generate_site, :generate_style] do
puts ">>> Site Generating Complete! <<<\n\n"
puts ">>> Site Generating Complete! <<<\n\n>>> Refresh your browser <<<"
end
# usage rake post[my-new-post] or rake post['my new post'] or rake post (defaults to "new-post")
@ -166,6 +166,7 @@ task :start_serve => :stop_serve do
cd "#{site}" do
print "Starting serve..."
ok_failed system("serve #{port} > /dev/null 2>&1 &")
system "open http://localhost:#{port}"
end
end
@ -181,8 +182,7 @@ task :stop_serve do
end
desc "preview the site in a web browser"
multitask :preview => [:start_serve] do
system "open http://localhost:#{port}"
multitask :preview => [:generate, :start_serve, :watch] do
end

View File

@ -1,3 +1,3 @@
//compass default reset
+global-reset
@import "compass/utilities"
@import compass

View File

@ -1,51 +1,51 @@
!page_pad = 30px
!page_width = 980px
!sidebar_margin = 20px
!sidebar_width = 280px
$default_border_radius = 4px
$page_pad: 30px
$page_width: 980px
$sidebar_margin: 20px
$sidebar_width: 280px
$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)}
color: saturate(darken($link_color, 15), 20)
&:visited
color: #{darken(adjust_hue(!link_color, 70), 10)}
color: darken(adjust_hue($link_color, 70), 10)
#header, #footer, #nav
.content
position: relative
margin: 0 auto
width: #{!page_width - !page_pad}
padding: 0 #{!page_pad/2}
width: $page_width - $page_pad
padding: 0 $page_pad/2
#page, #header, #footer, #nav
min-width: #{!page_width}
min-width: $page_width
#page, #content, .content
+pie-clearfix
#content
margin: 0 auto
width: #{!page_width - !sidebar_width - !page_pad/2}
padding: 0 #{!sidebar_width} 0 #{!page_pad/2}
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}
padding-right: $sidebar_margin
#sidebar
float: left
width: #{!sidebar_width - !sidebar_margin}
width: $sidebar_width - $sidebar_margin
margin: 0 -100% 0 0
padding: #{!page_pad} 0 #{!page_pad} #{!sidebar_margin}
padding: $page_pad 0 $page_pad $sidebar_margin
#page.expanded
#content
width: #{!page_width - !page_pad/2}
padding: 0 0 0 #{!page_pad/2}
width: $page_width - $page_pad/2
padding: 0 0 0 $page_pad/2
#sidebar
float: none
margin: 0
padding: 0 0 #{!page_pad}
padding: 0 0 $page_pad

View File

@ -1,7 +1,7 @@
@import "compass/utilities"
@import "compass/css3"
@import compass/utilities
@import compass/css3
@import "library/reset"
@import "library/list_borders"
@import "library/typography"
@import "library/link_colors"
@import library/reset
@import library/list_borders
@import library/typography
@import library/link_colors

View File

@ -1,13 +1,13 @@
@import partials/shared.sass
@import partials/syntax.sass
@import partials/search.sass
@import partials/sidebar.sass
@import partials/twitter.sass
@import partials/shared
@import partials/syntax
@import partials/search
@import partials/sidebar
@import partials/twitter
/* 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
@import partials/header
@import partials/navigation
@import partials/page
@import partials/sidebar
@import partials/blog
@import partials/footer

View File

@ -1,7 +1,7 @@
!base_font_size = 16px
!base_font_size_small = 13px
!base_font_color = #333
$default_border_radius = 6px
$base_font_size: 16px
$base_font_size_small: 13px
$base_font_color: #333
$default_border_radius: 6px
+general-typography
=heading-font
@ -10,7 +10,7 @@ $default_border_radius = 6px
+serif-font
body
font-size= !base_font_size
font-size: $base_font_size
+serif-font
h1,h2,h3,h4,h5,h6
@ -33,13 +33,13 @@ blockquote
color: #ddd
cite
+sans-font
font-size= !base_font_size - 2px
font-size: $base_font_size - 2px
display: block
padding-top= !base_font_size
padding-top: $base_font_size
&:before
content: "\30FC"
padding-right: 2px
a
color: inherit !important
&:hover
color= !link_color !important
color: $link_color !important

View File

@ -3,9 +3,9 @@
@import modules/_clearfix.sass
// Available as alternate syntax with just +float
=float(!side = "left")
:display inline
:float= !side
=float($side: "left")
display: inline
float: !side
// Implementation of float:left with fix for double-margin bug
=float-left

View File

@ -1,6 +1,6 @@
=list-borders(!color1,!color2)
border-left= "1px solid" !color1
border-right= "1px solid" !color2
=list-borders($color1, $color2)
border-left: 1px solid $color1
border-right: 1px solid $color2
&.alpha
border-left: none
&.omega

View File

@ -22,37 +22,37 @@
table
+reset-table
a img
:border none
border: none
=reset-box-model
:margin 0
:padding 0
:border 0
margin: 0
padding: 0
border: 0
=reset
+reset-box-model
:font
:weight inherit
:style inherit
:size 100%
:family inherit
:vertical-align baseline
font:
weight: inherit
style: inherit
size: 100%
family: inherit
vertical-align: baseline
=reset-quotation
+reset
:quotes "" ""
quotes: "" ""
&:before,
&:after
:content ""
content: ""
=reset-table-cell
+reset
:text-align left
:font-weight normal
:vertical-align middle
text-align: left
font-weight: normal
vertical-align: middle
=reset-table
+reset
:border-collapse separate
:border-spacing 0
:vertical-align middle
border-collapse: separate
border-spacing: 0
vertical-align: middle

View File

@ -1,70 +1,74 @@
!base_font_size ||= 16px
!small ||= floor(!base_font_size * .85)
!big ||= floor(!base_font_size * 1.25)
!base_font_color ||= #333
!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)
$base-font-size: 16px !default
$small: floor($base-font-size * 0.85) !default
$big: floor($base-font-size * 1.25) !default
$base-font-color: #333333 !default
$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
=sans-font
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
=serif-font
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)
+typography-defaults(!font_size)
=general-typography($font-size: $base-font-size)
+set-heading-sizes($font-size)
+typography-defaults($font-size)
=set-heading-sizes(!font_size = !base_font_size)
!h6 = ceil(!font_size*1)
!h5 = ceil(!font_size*1)
!h4 = ceil(!font_size*1.2)
!h3 = ceil(!font_size*1.8)
!h2 = ceil(!font_size*2.8)
!h1 = ceil(!font_size*3.2)
=set-heading-sizes($font-size: $base-font-size)
$h6: ceil($font-size * 1)
$h5: ceil($font-size * 1)
$h4: ceil($font-size * 1.2)
$h3: ceil($font-size * 1.8)
$h2: ceil($font-size * 2.8)
$h1: ceil($font-size * 3.2)
h1, h2, h3, h4
&:first-child
margin-top: 0
h1,h2,h3,h4,h5,h6
line-height: 1.1em
margin-bottom: .7em
margin-top: .3em
margin-bottom: 0.7em
margin-top: 0.3em
h1
font-size= !h1
font-size: $h1
h2
font-size= !h2
font-size: $h2
h3
font-size= !h3
font-size: $h3
h4
font-size= !h4
font-size: $h4
h5
font-size= !h5
font-size: $h5
h6
font-size= !h6
font-size: $h6
=typography-defaults(!font_size = !base_font_size)
=typography-defaults($font-size: $base-font-size)
body
line-height: 1.45em
color= !base_font_color
color: $base-font-color
p
+p-style(!font_size)
+p-style($font-size)
table
+table-style(!font_size)
+table-style($font-size)
ol
+ol-style(!font_size)
+ol-style($font-size)
ul
+ul-style(!font_size)
+ul-style($font-size)
dl
+dl-style(!font_size)
+dl-style($font-size)
blockquote
+quote-style
q
@ -80,57 +84,57 @@
del
text-decoration: line-through
span.highlight, em.highlight, strong.highlight
background-color: #ff6
background-color: #ffff66
padding: 2px
margin: 0 -2px
abbr, acronym
border-bottom: 1px dotted
cursor: help
address
margin-top= !font_size * 1.625
margin-top: $font-size * 1.625
font-style: italic
pre, code, tt
+fixed-font
line-height= !font_size * 1.5
line-height: $font-size * 1.5
tt
display: block
margin= !font_size * 1.625 0
margin: $font-size * 1.625 0
sub, sup
line-height: 0
hr
margin-bottom: .2em
margin-bottom: 0.2em
small, .small
font-size= floor(!font_size * .85)
font-size: floor($font-size * 0.85)
big, .big
font-size= floor(!font_size * 1.25)
font-size: floor($font-size * 1.25)
=ol-style(!font_size = !base_font_size)
=ol-style($font-size: $base-font-size)
list-style: inside decimal
margin= 0 0 !font_size * 1.625
margin: 0 0 $font-size * 1.625
li ol
margin= 0 0 !font_size * 1.625
margin: 0 0 $font-size * 1.625
=ul-style(!font_size = !base_font_size)
=ul-style($font-size: $base-font-size)
list-style: inside
margin= 0 0 !font_size * 1.625
margin: 0 0 $font-size * 1.625
li ul
margin= 0 0 !font_size * 1.625
margin: 0 0 $font-size * 1.625
=dl-style(!font_size = !base_font_size)
margin= 0 0 !font_size * 1.625
=dl-style($font-size: $base-font-size)
margin: 0 0 $font-size * 1.625
dt
font-weight: bold
dd
margin-left= !font_size * 1.625
margin-left: $font-size * 1.625
=quote-style(!font_size = !base_font_size)
padding= !font_size*1.5 !font_size*1.5 !font_size * 1.5 !font_size * 1.8
=quote-style($font-size: $base-font-size)
padding: $font-size * 1.5 $font-size * 1.5 $font-size * 1.5 $font-size * 1.8
position: relative
margin-bottom= !font_size * 0.8125
margin-bottom: $font-size * 0.813
&:before
content: "\201C"
font-size= !font_size * 3
margin= 5px 0 0 -.525em
font-size: $font-size * 3
margin: 5px 0 0 -0.525em
position: absolute
font-family: Times, Georgia, serif
line-height: 0
@ -138,29 +142,29 @@
padding: 0
margin: 0
=p-style(!font_size = !base_font_size)
=p-style($font-size: $base-font-size)
padding-bottom: 1.3em
img
float: left
margin:
top= !font_size * .5
right= !font_size * .8125
bottom= !font_size* .8125
left= 0
top: $font-size * 0.5
right: $font-size * 0.813
bottom: $font-size * 0.813
left: 0
padding: 0
&.right
margin:
right= 0
left= !font_size * .8125
right: 0
left: $font-size * 0.813
=table-style(!font_size = !base_font_size)
margin= 0 0 !font_size * 1.625
=table-style($font-size: $base-font-size)
margin: 0 0 $font-size * 1.625
border-collapse: collapse
th
font-weight: bold
tr, th, td
margin: 0
padding= 0 !font_size * 1.625 0 !font_size
padding: 0 $font-size * 1.625 0 $font-size
tfoot
font-style: italic
caption

View File

@ -1,23 +1,23 @@
.blog
h2
padding-top: 0
margin-bottom: .1em
margin-bottom: 0.1em
.title
text-decoration: none
&: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
border-bottom: 1px dashed #dddddd
text-transform: uppercase
color: #777
color: #777777
padding: 8px 0 5px
margin-bottom: 1.5em
font-size: 75%

View File

@ -1,12 +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}
+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
a
color: #ddd
color: #dddddd
&:hover
color: #fff
color: white

View File

@ -1,11 +1,11 @@
#header
background-color: $header_bg
border-bottom: 1px solid #{$header_border}
border-bottom: 1px solid $header_border
padding: 25px 0
h1
display: inline-block
margin: 0
a.title
font-weight: normal
color: #{$title_color}
color: $title_color
text-decoration: none

View File

@ -2,11 +2,11 @@
+clearfix
position: relative
z-index: 1
background-color: #{!nav_bg}
+linear-gradient(color_stops(#fcfcfc, #f4f4f4 .3, #ddd))
background-color: $nav-bg
+linear-gradient(color-stops(#fcfcfc, #f4f4f4 0.3, #dddddd))
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
@ -14,8 +14,8 @@
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
@ -23,16 +23,16 @@
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
padding-left: 28px
background: url("/images/rss.png") left top no-repeat
background: image-url("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

View File

@ -1,8 +1,8 @@
#page
background-color: #{!main_bg}
background-color: $main_bg
#main
background-color: #{!main_bg}
border-right: 1px solid #{!sidebar_border}
background-color: $main_bg
border-right: 1px solid $sidebar_border
padding:
top: 25px
bottom: 25px

View File

@ -1,9 +1,9 @@
#search
position: absolute
left: #{!page_width + !sidebar_margin - !sidebar_width}
top: #{30%}
left: $page-width + $sidebar-margin - $sidebar-width
top: 30%
form
background: url(/images/search_bg.png) no-repeat
background: image-url("search_bg.png") no-repeat
padding: 0
height: 28px
width: 218px
@ -15,6 +15,6 @@
margin-left: 30px
font-size: 15px
border: none
color: #aaa
color: #aaaaaa
&:focus
outline: none

View File

@ -2,21 +2,21 @@
line-height: 1.45em
font-size: 90%
h3
font-size: #{!h4+2}
font-size: $h4 + 2
margin: 20px -15px 10px
padding: 12px 15px
background: #fff
background: white
border-bottom: 1px solid #e5e5e5
border-top: 1px solid #e5e5e5
&:first-child
margin-top: 0
h4
font-size: #{!h5}
font-size: $h5
#twitter, #delicious
+border-radius
background: #f8f8f8
border: 1px solid #eee
border: 1px solid #eeeeee
padding: 5px 0
ul
list-style-type: none
@ -24,7 +24,7 @@
li
margin: 0 15px
padding: 10px 0 0
border-bottom: #ddd 1px dashed
border-bottom: #dddddd 1px dashed
&:last-child
border-bottom: 0
@ -32,6 +32,6 @@
p
font-style: italic
li
color: #666
color: #666666
font-style: normal
padding-bottom: 8px

View File

@ -1,9 +1,9 @@
.code_window
+border-top-radius(5px)
+border-bottom-radius(2px)
background: #aaa #{image_url("code_bg.png")} top repeat-x
background: #aaaaaa image-url("code_bg.png") top repeat-x
position: relative
margin: .3em 0 1.3em
margin: 0.3em 0 1.3em
padding: 0 3px 3px
font-size: 14px
border: 1px solid #898989
@ -12,26 +12,26 @@
border-right-color: #a5a5a5
em
text-align: center
+text-shadow(#ccc, 1px, 1px, 1px)
+text-shadow(#cccccc, 1px, 1px, 1px)
display: block
padding: 1px 0
color: #333
color: #333333
font-style: normal
+sans-font
.highlight
margin: 0
pre
color: #ccc
color: #cccccc
font-size: 13px
background: #222
background: #222222
line-height: 1.5em
border: #aaa 1px solid
border: #aaaaaa 1px solid
overflow-x: auto
overflow-y: hidden
padding: 25px 20px
.lineno
color: #888
color: #888888
background: #e3e3e3
display: inline-block
padding: 0 0 0 10px
@ -53,11 +53,11 @@ pre
right: 2px
+border-bottom-left-radius
display: block
color: #777
background: #333
color: #777777
background: #333333
&:hover
background: #444
color: #ccc
background: #444444
color: #cccccc
// based on: http://github.com/mojombo/tpw/raw/master/css/syntax.css
.editor
@ -66,20 +66,20 @@ pre
pre.console
background-color: black
color= lighten(#008000, 25)
color: lighten(green, 25)
letter-spacing: 1px
padding: 0.5em
.prompt
color= lighten(#000080, 50)
color: lighten(navy, 50)
&:before
:color white
color: white
content: "["
&:after
:color white
color: white
content: "]"
.stdin
font-weight: bold
color= lighten(#008000, 75)
color: lighten(green, 75)
.highlight
padding: 0 0 0.1em
@ -100,7 +100,7 @@ pre.console
color: rgb(255, 157, 0)
// Paren
.p
color= darken(#FF9D00, 33)
color: darken(#ff9d00, 33)
// Operator
.o
color: rgb(255, 157, 0)
@ -121,11 +121,11 @@ pre.console
font-style: italic
// Generic.Deleted
.gd
color: #000000
color: black
background-color: #ffdddd
// Generic.Deleted.Specific
.gd .x
color: #000000
color: black
background-color: #ffaaaa
// Generic.Emph
.ge
@ -138,11 +138,11 @@ pre.console
color: #999999
// Generic.Inserted
.gi
color: #000000
color: black
background-color: #ddffdd
// Generic.Inserted.Specific
.gi .x
color: #000000
color: black
background-color: #aaffaa
// Generic.Output
.go
@ -179,22 +179,22 @@ pre.console
color: rgb(255, 98, 140)
// Literal.String
.s
color: #d14
color: #dd1144
// Name.Attribute
.na
color: #008080
color: teal
// Name.Builtin
.nb
color= darken(rgb(128, 255, 187), 20)
color: darken(rgb(128, 255, 187), 20)
// Name.Class
.nc
color= darken(rgb(128, 255, 187), 20)
color: darken(rgb(128, 255, 187), 20)
// Name.Constant
.no
color: rgb(128, 255, 187)
// Name.Entity
.ni
color: #800080
color: purple
// Name.Exception
.ne
color: rgb(255, 221, 0)
@ -209,7 +209,7 @@ pre.console
color: white
// Name.Variable
.nv
color: #008080
color: teal
// Operator.Word
.ow
color: white
@ -269,13 +269,13 @@ pre.console
color: #999999
// Name.Variable.Class
.vc
color: #008080
color: teal
// Name.Variable.Global
.vg
color: #008080
color: teal
// Name.Variable.Instance
.vi
color: #008080
color: teal
// Literal.Number.Integer.Long
.il
color: rgb(255, 98, 140)

View File

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

View File

@ -1,11 +1,11 @@
/* SASS mixins */
@import "library"
@import library
/* primary SASS */
@import "base"
@import "theme"
@import "typography"
@import "layout"
@import base
@import theme
@import typography
@import layout
/* specific SASS */
@import "partials"
@import partials