Brandon Mathis
14 years ago
62 changed files with 3729 additions and 1 deletions
@ -0,0 +1,12 @@ |
|||
//@import "partials/shared"; |
|||
//@import "partials/search"; |
|||
|
|||
/* layout partials */ |
|||
@import "partials/header"; |
|||
@import "partials/navigation"; |
|||
@import "partials/page"; |
|||
@import "partials/sidebar"; |
|||
@import "partials/blog"; |
|||
@import "partials/footer"; |
|||
|
|||
@import "partials/syntax"; |
|||
@ -0,0 +1,8 @@ |
|||
@include global-reset; |
|||
@include reset-html5; |
|||
|
|||
@import "core/utilities"; |
|||
@import "core/theme"; |
|||
@import "core/layout"; |
|||
@import "core/typography"; |
|||
@import "partials"; |
|||
@ -0,0 +1,128 @@ |
|||
$default-border-radius: 4px; |
|||
|
|||
$pad-min: 18px; |
|||
$pad-narrow: 18px; |
|||
$pad-medium: 24px; |
|||
$pad-wide: 30px; |
|||
$sidebar-width-medium: 240px; |
|||
$sidebar-pad-medium: 15px; |
|||
$sidebar-pad-wide: 20px; |
|||
$sidebar-width-wide: 300px; |
|||
|
|||
.group { @include pie-clearfix; } |
|||
|
|||
//html { } |
|||
body { |
|||
-webkit-text-size-adjust: none; |
|||
max-width: 1400px; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
> header, > nav, > footer, #articles > article { |
|||
@extend .group; |
|||
padding-left: $pad-min; |
|||
padding-right: $pad-min; |
|||
@media only screen and (min-width: 480px) { |
|||
padding-left: $pad-narrow; |
|||
padding-right: $pad-narrow; |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
padding-left: $pad-medium; |
|||
padding-right: $pad-medium; |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
padding-left: $pad-wide; |
|||
padding-right: $pad-wide; |
|||
} |
|||
} |
|||
> header { |
|||
font-size: .8em; |
|||
padding-top: 1.5em; |
|||
padding-bottom: 1.5em; |
|||
} |
|||
} |
|||
|
|||
.toggle-sidebar { display: none; } |
|||
#articles { width: 100%; + aside { display: none; } } |
|||
|
|||
@media only screen and (min-width: 550px) { |
|||
body > header { font-size: 1em; } |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
body { -webkit-text-size-adjust: auto; } |
|||
body > header { font-size: 1.2em; } |
|||
body > nav { |
|||
+ div { |
|||
@extend .group; |
|||
padding: 0; |
|||
margin: 0 auto; |
|||
> div { |
|||
@extend .group; |
|||
margin-right: $sidebar-width-medium; |
|||
} |
|||
} |
|||
} |
|||
#articles { |
|||
padding-top: $pad-medium/2; |
|||
padding-bottom: $pad-medium/2; |
|||
float: left; |
|||
+ aside { |
|||
width: $sidebar-width-medium - $sidebar-pad-medium*2; |
|||
padding: 0 $sidebar-pad-medium $sidebar-pad-medium; |
|||
display: block; |
|||
float: left; |
|||
margin: 0 -100% 0 0; |
|||
} |
|||
} |
|||
body > div > div { position: relative; } |
|||
|
|||
.collapse-sidebar { |
|||
> div > div { margin-right: 10px; } |
|||
#articles + aside { |
|||
display: none; |
|||
} |
|||
.toggle-sidebar { |
|||
right: -1px; |
|||
background-color: $sidebar-bg; |
|||
border-right-width: 0; |
|||
text-indent: 2px; |
|||
border-left: 1px solid $sidebar-border; |
|||
@include border-bottom-right-radius(0); |
|||
@include border-bottom-left-radius(.3em); |
|||
@include link-colors(#aaa, #888); |
|||
} |
|||
} |
|||
|
|||
.toggle-sidebar { |
|||
outline: none; |
|||
position: absolute; right: -21px; top: 0; |
|||
width: 20px; |
|||
font-size: 1.2em; |
|||
line-height: 1.1em; |
|||
padding-bottom: .1em; |
|||
text-indent: -1px; |
|||
text-decoration: none; |
|||
@include link-colors(#ccc, #999); |
|||
@include border-bottom-right-radius(.3em); |
|||
text-align: center; |
|||
background: $main-bg; |
|||
border-bottom: 1px solid $sidebar-border; |
|||
border-right: 1px solid $sidebar-border; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
@media only screen and (min-width: 992px) { |
|||
body > * { font-size: 1.1em; } |
|||
body > header { |
|||
font-size: 1.3em; |
|||
} |
|||
body > nav + div > div { margin-right: $sidebar-width-wide; } |
|||
#articles { |
|||
padding-top: $pad-wide/2; |
|||
padding-bottom: $pad-wide/2; |
|||
+ aside { |
|||
width: $sidebar-width-wide - $sidebar-pad-wide*2; |
|||
padding: 0 $sidebar-pad-wide $sidebar-pad-wide; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
// Link Colors |
|||
$link-color: lighten(#165b94, 3); |
|||
$link-color-hover: darken(#165b94, 5); |
|||
|
|||
// Main Section Colors |
|||
$body-color: #333333; |
|||
$light-text: #999999; |
|||
$page-bg: #252525; |
|||
|
|||
$header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232; |
|||
$header-border: lighten($header-bg, 15); |
|||
$title-color: #f2f2f2; |
|||
|
|||
$nav-bg: #ccc;//#3a6ea5; |
|||
$nav-color: darken($nav-bg, 38); |
|||
$nav-color-hover: darken($nav-color, 25); |
|||
$nav-border: darken($nav-bg, 10); |
|||
$nav-border-top: lighten($nav-bg, 15); |
|||
$nav-border-bottom: darken($nav-bg, 25);//darken($nav-bg, 5); |
|||
$nav-border-left: darken($nav-bg, 11); |
|||
$nav-border-right: lighten($nav-bg, 7); |
|||
|
|||
$sidebar-bg: #eee; //#f8f8f8; //desaturate(change-color(#e8f4f4, $hue: 207), 100); //mix(#f5f5f5, aqua, 93%); |
|||
$sidebar-border: darken($sidebar-bg, 7); |
|||
|
|||
// Blog |
|||
$article-border: #eeeeee; |
|||
$main-bg: #f7f7f7; |
|||
|
|||
$footer-color: #999999; |
|||
//$footer-bg: #444444; |
|||
$footer-bg: $nav-bg;//$page-bg; |
|||
$footer-border: $nav-border-top;//$page-bg; |
|||
|
|||
// Form Colors |
|||
$fieldset-bg: #ececec; |
|||
$fieldset-border: #c3c3c3; |
|||
|
|||
$textinput-color: #333333; |
|||
$textinput-bg: #f4f4f4; |
|||
$textinput-bg-focus: #fefeee; |
|||
|
|||
$textinput-border-top: #aaaaaa; |
|||
$textinput-border-bottom: #c6c6c6; |
|||
$textinput-border-left: #c3c3c3; |
|||
$textinput-border-right: #c3c3c3; |
|||
$textinput-border-focus: #989898; |
|||
|
|||
#articles a, #articles + aside a { |
|||
@include link-colors($link-color, $hover: saturate(darken($link_color, 15), 20), $focus: saturate(darken($link_color, 15), 20), $visited: darken(adjust_hue($link_color, 70), 10)); |
|||
} |
|||
@ -0,0 +1,126 @@ |
|||
$type-border: #ddd; |
|||
$type-color-light: #555; |
|||
$type-color: #000; |
|||
$blockquote: $type-border !default; //darken($type-border, 20) !default; |
|||
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; |
|||
|
|||
// Fonts |
|||
//@include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" ); |
|||
.heading { |
|||
font-family: "Georgia", "PT Sans", "Helvetica Neue", Arial, sans-serif; |
|||
font-weight: bold; |
|||
} |
|||
.sans { font-family: "Helvetica Neue", Arial, sans-serif; } |
|||
.serif { font-family: Georgia, Times, "Times New Roman", serif; } |
|||
.mono { font-family: $mono; } |
|||
|
|||
body > header h1 { |
|||
font-size: 2em; |
|||
@extend .heading; |
|||
font-weight: normal; |
|||
line-height: 1.2em; |
|||
margin-bottom: 0.6667em; |
|||
} |
|||
|
|||
body { |
|||
line-height: 1.5em; |
|||
color: $type-color; |
|||
@extend .serif; |
|||
} |
|||
|
|||
|
|||
#{headings()}{ |
|||
@extend .heading; |
|||
text-rendering: optimizelegibility; |
|||
margin-bottom: 1em; |
|||
font-weight: normal; |
|||
} |
|||
h1 { |
|||
font-size: 2em; |
|||
line-height: 1.3334em |
|||
} |
|||
h2, section h1 { |
|||
font-size: 1.5em; |
|||
} |
|||
h3, section h2, section section h1 { |
|||
font-size: 1.3em; |
|||
} |
|||
h4, section h3, section section h2, section section section h1 { |
|||
font-size: 1em; |
|||
} |
|||
h5, section h4, section section h3 { |
|||
font-size: .9em; |
|||
} |
|||
h6, section h5, section section h4, section section section h3 { |
|||
font-size: .8em; |
|||
} |
|||
p, blockquote, ul, ol { margin-bottom: 1.5em; } |
|||
|
|||
ul{ list-style-type: disc; } |
|||
|
|||
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } } |
|||
ul ul, ol ol { margin-left: 1.75em; } |
|||
|
|||
li { margin-bottom: .5em; } |
|||
|
|||
strong { font-weight: bold; } |
|||
|
|||
em { font-style: italic; } |
|||
|
|||
sup, sub { font-size: 0.8em; position: relative; display: inline-block; } |
|||
sup { top: -.5em; } |
|||
sub { bottom: -.5em; } |
|||
|
|||
q { font-style: italic; |
|||
&:before { content: "\201C"; } |
|||
&:after { content: "\201D"; } |
|||
} |
|||
|
|||
em, dfn { font-style: italic; } |
|||
|
|||
strong, dfn { font-weight: bold; } |
|||
|
|||
del, s { text-decoration: line-through; } |
|||
|
|||
abbr, acronym { border-bottom: 1px dotted; cursor: help; } |
|||
|
|||
pre, code, tt { @extend .mono-font; } |
|||
|
|||
sub, sup { line-height: 0; } |
|||
|
|||
hr { margin-bottom: 0.2em; } |
|||
|
|||
small { font-size: .8em; } |
|||
|
|||
big { font-size: 1.2em; } |
|||
|
|||
blockquote { |
|||
$bq-margin: 1.2em; |
|||
font-style: italic; |
|||
position: relative; |
|||
margin-left: $bq-margin; |
|||
> p { |
|||
&:first-child:before { |
|||
content: "\201C"; |
|||
position: absolute; |
|||
top: 0.1em; |
|||
left: -.5em; |
|||
font-size: 3em; |
|||
color: $blockquote; |
|||
} |
|||
&:last-child:after { |
|||
content: "\201D"; |
|||
position: relative; |
|||
top: 0.3em; |
|||
line-height: 0; |
|||
font-size: 2em; |
|||
color: $blockquote; |
|||
} |
|||
} |
|||
+ p > cite { |
|||
margin-left: $bq-margin; |
|||
text-align: right; |
|||
&:before { content: '– '; color: $type-color-light; } |
|||
a { font-style: italic; } |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
@mixin mask-image($img, $repeat: no-repeat){ |
|||
@include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); |
|||
@include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
#articles + aside { display: none; } |
|||
body > nav { |
|||
.site-serch { |
|||
width: 10em; |
|||
.search { width: 100%; background-color: #f6f6f6; } |
|||
} |
|||
} |
|||
|
|||
body > nav, body > footer, body > div > div { |
|||
padding-left: .5em; |
|||
padding-right: .5em; |
|||
} |
|||
body > * { font-size: .8em; } |
|||
body > header { |
|||
font-size: .5em; |
|||
padding: .4em .5em; |
|||
} |
|||
header, #{headings()} { text-align: center; } |
|||
.site-search { |
|||
margin: .15em 0 0; padding: 0; |
|||
.search { |
|||
padding: .3em .8em 0; |
|||
line-height: 1.5em; |
|||
font-size: .85em; |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
//body { |
|||
//padding: 0 1em; |
|||
//} |
|||
//body > header { |
|||
//font-size: 1em; |
|||
//padding-top: .5em; |
|||
//padding-bottom: .5em; |
|||
//} |
|||
@ -0,0 +1,19 @@ |
|||
//@include media-layout(1.2em, 20em, 1em); |
|||
//body > * { |
|||
//margin: 0 auto; |
|||
//font-size: 1em; |
|||
//} |
|||
//body { |
|||
//max-width: 1280px; |
|||
//margin: 0 auto; |
|||
//> header { |
|||
//padding-top: 2em; |
|||
//padding-bottom: 1em; |
|||
//} |
|||
//> nav { |
|||
//border-left: 1px solid $header-border; |
|||
//border-right: 1px solid $header-border; |
|||
//@include border-top-radius(.6em); |
|||
//} |
|||
//} |
|||
|
|||
@ -0,0 +1,54 @@ |
|||
#articles { |
|||
> article { |
|||
padding-bottom: 1em; |
|||
&:last-child { margin-bottom: 0; border-bottom: none; } |
|||
h2 { |
|||
padding-top: 0.8em; |
|||
//border-top: 3px double $type-border; |
|||
background: inline-image('dotted-border.png') top left repeat-x; |
|||
} |
|||
.byline + time:before, .byline + time +time:before { |
|||
content: "\2022 "; |
|||
padding: 0 .3em 0 .2em; |
|||
display: inline-block; |
|||
@include opacity(.5); |
|||
} |
|||
header { |
|||
padding-top: 2em; |
|||
margin-bottom: 1.5em; |
|||
padding-bottom: 1.5em; |
|||
background: inline-image('dotted-border.png') bottom left repeat-x; |
|||
h1 { |
|||
margin: 0; |
|||
a { text-decoration: none; |
|||
&:hover { text-decoration: underline; } } |
|||
} |
|||
p { |
|||
font-size: .9em; |
|||
color: $type-color-light; |
|||
border: none; |
|||
padding-top: 0; |
|||
margin: 0; |
|||
font-style: italic; |
|||
font-family: "Georgia", Palatino, Times, "Times New Roman"; |
|||
} |
|||
} |
|||
.entry-content { |
|||
img { max-width: 100%; } |
|||
} |
|||
#disqus_thread { } |
|||
.meta { |
|||
border-bottom: 1px dashed #dddddd; |
|||
text-transform: uppercase; |
|||
color: #777777; |
|||
padding: 8px 0 5px; |
|||
margin-bottom: 1.5em; |
|||
font-size: 75%; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
.footer { |
|||
padding-top: 15px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
.delicious-posts { |
|||
a.delicious-link { margin-bottom: .5em; display: block; } |
|||
p { font-size: 1em; } |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
body > footer { |
|||
@extend .sans; |
|||
font-size: .8em; |
|||
color: $nav-color; |
|||
text-shadow: lighten($footer-bg, 5) 0 1px; |
|||
background-color: $footer-bg; |
|||
@include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11))); |
|||
border-top: 1px solid $footer-border; |
|||
position: relative; |
|||
padding-top: 1em; |
|||
padding-bottom: 1em; |
|||
z-index: 1; |
|||
a { |
|||
@include link-colors($nav-color, $nav-color-hover); |
|||
} |
|||
p:last-child { margin-bottom: 0; } |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
body > header { |
|||
background-color: $header_bg; |
|||
h1 { |
|||
display: inline-block; |
|||
margin: 0; |
|||
a, a:visited { |
|||
color: $title_color; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,116 @@ |
|||
body > nav { |
|||
position: relative; |
|||
background-color: $nav-bg; |
|||
@include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11))); |
|||
border: { |
|||
top: 1px solid $nav-border-top; |
|||
bottom: 1px solid $nav-border-bottom; } |
|||
padding-top: .35em; |
|||
padding-bottom: .35em; |
|||
//position: absolute; left: 0; right: 0; top: 0; |
|||
form { |
|||
@include background-clip(padding-box); |
|||
margin: 0; padding: 0; |
|||
.search { |
|||
padding: .25em .5em 0; |
|||
font-size: .85em; |
|||
line-height: 1em; |
|||
width: 95%; |
|||
@include border-radius(.5em); |
|||
@include background-clip(padding-box); |
|||
@include box-shadow(lighten($nav-bg, 2) 0 1px); |
|||
background-color: lighten($nav-bg, 15); |
|||
border: 1px solid $nav-border; |
|||
color: #888; |
|||
&:focus { |
|||
color: #444; |
|||
border-color: #80b1df; |
|||
@include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset); |
|||
background-color: #fff; |
|||
outline: none; |
|||
} |
|||
} |
|||
} |
|||
fieldset[role=site-search]{ float: right; width: 48%; } |
|||
fieldset[role=mobile-nav]{ float: left; width: 48%; |
|||
select{ width: 100%; font-size: .8em; border: 1px solid #888;} |
|||
} |
|||
ul { display: none; } |
|||
@media only screen and (min-width: 550px) { |
|||
font-size: .9em; |
|||
ul { |
|||
@include horizontal-list(0); |
|||
float: left; |
|||
//float: right; |
|||
display: block; |
|||
padding-top: .25em; |
|||
} |
|||
ul[role=subscription] { |
|||
margin-left: .8em; |
|||
float: right; |
|||
li:last-child a { padding-right: 0; } |
|||
} |
|||
ul li { |
|||
margin: 0; |
|||
} |
|||
a { |
|||
@include link-colors($nav-color, $nav-color-hover, $visited: $nav-color); |
|||
@extend .sans; |
|||
text-shadow: lighten($nav-bg, 12) 0 1px; |
|||
float: left; |
|||
text-decoration: none; |
|||
font-size: .9em; |
|||
padding: .1em 0; |
|||
line-height: 1.5em; |
|||
} |
|||
li + li { |
|||
border-left: 1px solid $nav-border-left; |
|||
margin-left: .8em; |
|||
a { |
|||
padding-left: .8em; |
|||
border-left: 1px solid $nav-border-right; |
|||
} |
|||
} |
|||
fieldset[role=mobile-nav] { display: none; } |
|||
fieldset[role=site-search]{ width: 100%; } |
|||
form { |
|||
float: right; |
|||
text-align: left; |
|||
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 5px; |
|||
padding-left: .8em; |
|||
.search { |
|||
width: 93%; |
|||
font-size: .95em; |
|||
line-height: 1.2em; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media only screen and (min-width: 992px) { |
|||
form { |
|||
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 5px; |
|||
} |
|||
} |
|||
} |
|||
.maskImage { |
|||
ul[role=subscription] { li, a { border: 0; padding: 0; }} |
|||
a[rel=subscribe-rss]{ |
|||
position: relative; top: -2px; |
|||
width: image-width('rss.png'); |
|||
height: image-height('rss.png'); |
|||
@include mask-image('rss.png'); |
|||
text-indent: -999999em; |
|||
background-color: $nav-border-right; |
|||
border: 0; |
|||
padding: 0; |
|||
&:hover:after { background-color: darken($nav-border-left, 10); } |
|||
&:after { |
|||
content: ""; |
|||
@include mask-image('rss.png'); |
|||
width: image-width('rss.png'); |
|||
height: image-height('rss.png'); |
|||
position: absolute; top: -1px; left: 0; |
|||
background-color: $nav-border-left; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
html { |
|||
background: $page-bg inline-image('line-tile.png') top left; |
|||
} |
|||
body { |
|||
border: 0 0 1px 0 solid darken($page-bg, 5); |
|||
> div { |
|||
background-color: $sidebar-bg; |
|||
border-bottom: 1px solid $nav-border-bottom; |
|||
> div { |
|||
background-color: $main-bg; |
|||
border-right: 1px solid $sidebar-border; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media only screen and (min-width: 1400px) { |
|||
body { border: 0 1px 0 solid darken($page-bg, 5); } |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
#pinboard_linkroll { |
|||
.pin-title, .pin-description { |
|||
display: block; |
|||
margin-bottom: .5em; |
|||
} |
|||
.pin-tag { |
|||
@include hover-link; |
|||
@extend .aside-alt-link; |
|||
&:after { content: ','; } |
|||
&:last-child:after { content: ''; } |
|||
} |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
.side-shadow-border { |
|||
@include box-shadow(#fff 0 1px); |
|||
} |
|||
#articles + aside { |
|||
padding-top: 1.2em; |
|||
section { |
|||
@extend .sans; |
|||
font-size: .8em; |
|||
line-height: 1.5em; |
|||
margin-bottom: 1.5em; |
|||
h1 { |
|||
margin: 1.5em 0 0; |
|||
padding-bottom: .2em; |
|||
border-bottom: 1px solid $sidebar-border; |
|||
@extend .side-shadow-border; |
|||
+ p { |
|||
padding-top: .4em; |
|||
} |
|||
} |
|||
} |
|||
ul { |
|||
margin-bottom: 0.5em; |
|||
} |
|||
li { |
|||
list-style: none; |
|||
padding: .5em 0; |
|||
margin: 0; |
|||
border-bottom: 1px solid $sidebar-border; |
|||
@extend .side-shadow-border; |
|||
p:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
a { |
|||
color: inherit; |
|||
@include transition(color, .5s); |
|||
} |
|||
&:hover a, &:hover #tweets a { color: $link-color; } |
|||
#recent_posts { |
|||
time { |
|||
text-transform: uppercase; |
|||
font-size: .9em; |
|||
color: #666; |
|||
} |
|||
} |
|||
@import "twitter"; |
|||
@import "pinboard"; |
|||
@import "delicious"; |
|||
} |
|||
.aside-alt-link { |
|||
color: #999; |
|||
&:hover { |
|||
color: #555; |
|||
} |
|||
} |
|||
@ -0,0 +1,167 @@ |
|||
$base03: #002b36; //darkest blue |
|||
$base02: #073642; //dark blue |
|||
$base01: #586e75; //darkest gray |
|||
$base00: #657b83; //dark gray |
|||
$base0: #839496; //medium gray |
|||
$base1: #93a1a1; //medium light gray |
|||
$base2: #eee8d5; //cream |
|||
$base3: #fdf6e3; //white |
|||
$yellow: #b58900; |
|||
$orange: #cb4b16; |
|||
$red: #dc322f; |
|||
$magenta: #d33682; |
|||
$violet: #6c71c4; |
|||
$blue: #268bd2; |
|||
$cyan: #2aa198; |
|||
$green: #859900; |
|||
|
|||
// If you prefer light colors, uncomment the following block to change themes |
|||
//$base03: $base3; |
|||
//$base02: $base2; |
|||
//$base01: $base1; |
|||
//$base00: $base0; |
|||
//$base0: $base00; |
|||
//$base1: $base01; |
|||
//$base2: $base02; |
|||
//$base3: $base03; |
|||
|
|||
.gutter { |
|||
.line-numbers { |
|||
text-align: right; |
|||
background: $base02 !important; |
|||
border-right: 1px solid darken($base03, 2); |
|||
@include box-shadow(lighten($base02, 2) -1px 0 inset); |
|||
text-shadow: darken($base02, 10) 0 -1px; |
|||
span { color: $base01 !important; } |
|||
} |
|||
} |
|||
html .gist .gist-file { |
|||
margin-bottom: 1.5em; |
|||
border: none; |
|||
.gist-syntax { |
|||
border-bottom: 1px solid #515151 !important; |
|||
.gist-highlight{ |
|||
background: $base03 !important; |
|||
pre { |
|||
@extend .pre; |
|||
overflow-y: hidden; |
|||
overflow-x: auto; |
|||
} |
|||
} |
|||
} |
|||
.gist-meta { |
|||
@include background(linear-gradient(#b0b0b0, #a7a7a7)); |
|||
padding: 0.5em; |
|||
background-color: #bababa !important; |
|||
border: 1px solid #9c9c9c; |
|||
border-top: 1px solid #d0d0d0; |
|||
border-bottom: 1px solid #777777; |
|||
font-size: .7em !important; |
|||
font-family: "Helvetica Neue", Arial, sans-serif !important; |
|||
color: #464646 !important; |
|||
line-height: 1.4em; |
|||
} |
|||
} |
|||
pre { @extend .pre; } |
|||
|
|||
.pre { |
|||
@extend .mono; |
|||
font-size: .8em; |
|||
line-height: 1.45em; |
|||
padding: 1em 1.2em !important; |
|||
background: $base03 !important; |
|||
color: $base1 !important; |
|||
span { color: $base1 !important; } |
|||
span { font-style: normal !important; font-weight: normal !important; } |
|||
|
|||
.c { color: $base01 !important; font-style: italic !important; } /* Comment */ |
|||
.cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */ |
|||
.cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */ |
|||
.c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */ |
|||
.cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */ |
|||
.err { color: $red !important; background: none !important; } /* Error */ |
|||
.k { color: $orange !important; } /* Keyword */ |
|||
.o { color: $base1 !important; font-weight: bold !important; } /* Operator */ |
|||
.p { color: $base1 !important; } /* Operator */ |
|||
.ow { color: $cyan !important; font-weight: bold !important; } /* Operator.Word */ |
|||
.gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: block; } /* Generic.Deleted */ |
|||
.gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: block; } /* Generic.Deleted.Specific */ |
|||
.ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */ |
|||
//.gr { color: #aa0000 } /* Generic.Error */ |
|||
.gh { color: $base01 !important; } /* Generic.Heading */ |
|||
.gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: block; } /* Generic.Inserted */ |
|||
.gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: block; } /* Generic.Inserted.Specific */ |
|||
//.go { color: #888888 } /* Generic.Output */ |
|||
//.gp { color: #555555 } /* Generic.Prompt */ |
|||
.gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */ |
|||
.gu { color: $violet !important; } /* Generic.Subheading */ |
|||
//.gt { color: #aa0000 } /* Generic.Traceback */ |
|||
.kc { color: $green !important; font-weight: bold !important; } /* Keyword.Constant */ |
|||
.kd { color: $blue !important; } /* Keyword.Declaration */ |
|||
.kp { color: $orange !important; font-weight: bold !important; } /* Keyword.Pseudo */ |
|||
.kr { color: $magenta !important; font-weight: bold !important; } /* Keyword.Reserved */ |
|||
.kt { color: $cyan !important; } /* Keyword.Type */ |
|||
.n { color: $blue !important; } |
|||
.na { color: $blue !important; } /* Name.Attribute */ |
|||
.nb { color: $green !important; } /* Name.Builtin */ |
|||
//.nc { color: #445588; font-weight: bold } /* Name.Class */ |
|||
.no { color: $yellow !important; } /* Name.Constant */ |
|||
//.ni { color: #800080 } /* Name.Entity */ |
|||
.ne { color: $blue !important; font-weight: bold !important; } /* Name.Exception */ |
|||
.nf { color: $blue !important; font-weight: bold !important; } /* Name.Function */ |
|||
.nn { color: $yellow !important; } /* Name.Namespace */ |
|||
.nt { color: $blue !important; font-weight: bold !important; } /* Name.Tag */ |
|||
.nx { color: $yellow !Important; } |
|||
//.bp { color: #999999 } /* Name.Builtin.Pseudo */ |
|||
//.vc { color: #008080 } /* Name.Variable.Class */ |
|||
.vg { color: $blue !important; } /* Name.Variable.Global */ |
|||
.vi { color: $blue !important; } /* Name.Variable.Instance */ |
|||
.nv { color: $blue !important; } /* Name.Variable */ |
|||
//.w { color: #bbbbbb } /* Text.Whitespace */ |
|||
.mf { color: $cyan !important; } /* Literal.Number.Float */ |
|||
.m { color: $cyan !important; } /* Literal.Number */ |
|||
.mh { color: $cyan !important; } /* Literal.Number.Hex */ |
|||
.mi { color: $cyan !important; } /* Literal.Number.Integer */ |
|||
//.mo { color: #009999 } /* Literal.Number.Oct */ |
|||
.s { color: $cyan !important; } /* Literal.String */ |
|||
//.sb { color: #d14 } /* Literal.String.Backtick */ |
|||
//.sc { color: #d14 } /* Literal.String.Char */ |
|||
.sd { color: $cyan !important; } /* Literal.String.Doc */ |
|||
.s2 { color: $cyan !important; } /* Literal.String.Double */ |
|||
.se { color: $red !important; } /* Literal.String.Escape */ |
|||
//.sh { color: #d14 } /* Literal.String.Heredoc */ |
|||
.si { color: $blue !important; } /* Literal.String.Interpol */ |
|||
//.sx { color: #d14 } /* Literal.String.Other */ |
|||
.sr { color: $cyan !important; } /* Literal.String.Regex */ |
|||
.s1 { color: $cyan !important; } /* Literal.String.Single */ |
|||
//.ss { color: #990073 } /* Literal.String.Symbol */ |
|||
//.il { color: #009999 } /* Literal.Number.Integer.Long */ |
|||
} |
|||
|
|||
.highlight { |
|||
margin-bottom: 1.5em; |
|||
overflow-y: hidden; |
|||
.gutter pre { |
|||
padding-left: .8em !important; |
|||
padding-right: .8em !important; |
|||
} |
|||
} |
|||
|
|||
h3.filename { |
|||
font-size: 13px; |
|||
line-height: 2em; |
|||
text-align: center; |
|||
text-shadow: #cbcccc 0 1px 0; |
|||
color: #474747; |
|||
font-style: normal; |
|||
margin-bottom: 0; |
|||
|
|||
@include border-top-radius(5px); |
|||
font-family: "Helvetica Neue",Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; |
|||
background: #aaaaaa image-url("code_bg.png") top repeat-x; |
|||
border: 1px solid #565656; |
|||
border-top-color: #cbcbcb; |
|||
border-left-color: #a5a5a5; |
|||
border-right-color: #a5a5a5; |
|||
border-bottom: 0; |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
#tweets { |
|||
.loading { |
|||
background: inline-image('bird_32_gray.png') no-repeat center .5em; |
|||
color: darken($sidebar-bg, 18); |
|||
text-shadow: $main-bg 0 1px; |
|||
text-align: center; |
|||
padding: 2.5em 0 .5em; |
|||
&.error { |
|||
background: inline-image('bird_32_gray_fail.png') no-repeat center .5em; |
|||
} |
|||
} |
|||
a { color: #666; @include hover-link; } |
|||
p { |
|||
position: relative; |
|||
padding-right: 1em; |
|||
} |
|||
a[href*='status']{ |
|||
color: #aaa; |
|||
float: right; |
|||
padding: 0 0 .1em 1em; |
|||
position: relative; right: -1.3em; |
|||
text-shadow: #fff 0 1px; |
|||
font-size: .7em; |
|||
span { font-size: 1.5em; } |
|||
&:hover { |
|||
color: #555; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
a[href*='twitter.com/search']{ |
|||
@extend .aside-alt-link; |
|||
} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
@import "compass"; |
|||
@import "default/style"; |
|||
@ -0,0 +1,28 @@ |
|||
{% if page.author %} |
|||
{% assign author = page.author %} |
|||
{% else %} |
|||
{% assign author = site.author %} |
|||
{% endif %} |
|||
<header> |
|||
{% if index %} |
|||
<h1 class="entry-title"><a href="{{ page.url }}">{{ page.title }}</a></h1> |
|||
{% else %} |
|||
<h1 class="entry-title">{{ page.title }}</h1> |
|||
{% endif %} |
|||
{% unless page.nometa %} |
|||
<p> |
|||
{% if page.date %} |
|||
<time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time> |
|||
{% endif %} |
|||
{% if page.updated %} |
|||
<time class="updated" datetime="{{ page.updated | datetime }}"></time> |
|||
{% endif %} |
|||
{% if author %}<span class="byline author vcard">By <span class="fn">{{ author }}</span></span>{% endif %} |
|||
</p> |
|||
{% endunless %} |
|||
</header> |
|||
{% if index %} |
|||
<div class="entry-content">{{ content | exerpt(content, page.url, 'Continue reading »') | smart_quotes }}</div> |
|||
{% else %} |
|||
<div class="entry-content">{{ content | smart_quotes }}</div> |
|||
{% endif %} |
|||
@ -0,0 +1,7 @@ |
|||
{% if site.delicious_user %} |
|||
<section> |
|||
<h1>On Delicious</h1> |
|||
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/{{ site.delicious_user }}?title=&count={{ site.delicious_count }}&sort=date&extended"></script> |
|||
<p><a href="http://delicious.com/{{ site.delicious_user }}">My Delicious Bookmarks »</a></p> |
|||
</section> |
|||
{% endif %} |
|||
@ -0,0 +1,19 @@ |
|||
{% if site.pinboard_user %} |
|||
<section> |
|||
<h1>My Pinboard</h1> |
|||
<ul id="pinboard_linkroll">Fetching linkroll...</ul> |
|||
<p><a href="http://pinboard.in/u:{{ site.pinboard_user }}">My Pinboard Bookmarks »</a></p> |
|||
</section> |
|||
<script type="text/javascript"> |
|||
var linkroll = 'pinboard_linkroll'; //id target for pinboard list |
|||
var pinboard_user = "{{ site.pinboard_user }}"; //id target for pinboard list |
|||
var pinboard_count = {{ site.pinboard_count }}; //id target for pinboard list |
|||
(function(){ |
|||
var pinboardInit = document.createElement('script'); |
|||
pinboardInit.type = 'text/javascript'; |
|||
pinboardInit.async = true; |
|||
pinboardInit.src = '/javascripts/pinboard.js'; |
|||
document.getElementsByTagName('head')[0].appendChild(pinboardInit); |
|||
})(); |
|||
</script> |
|||
{% endif %} |
|||
@ -0,0 +1,12 @@ |
|||
{% if page.single and site.recent_posts %} |
|||
<section> |
|||
<h1>Recent Posts</h1> |
|||
<ul id="recent_posts"> |
|||
{% for post in site.posts limit: site.recent_posts %} |
|||
<li class="post"> |
|||
<a href="{{ post.url }}">{{ post.title }}</a> |
|||
</li> |
|||
{% endfor %} |
|||
</ul> |
|||
</section> |
|||
{% endif %} |
|||
@ -0,0 +1,19 @@ |
|||
{% if site.twitter_user %} |
|||
<section> |
|||
<h1>Latest Tweets</h1> |
|||
<ul id="tweets"> |
|||
<li class="loading">Status updating...</li> |
|||
</ul> |
|||
<script type="text/javascript"> |
|||
$.domReady(function(){ |
|||
getTwitterFeed("{{site.twitter_user}}", {{site.twitter_tweet_count}}, {{site.twitter_show_replies}}); |
|||
}); |
|||
</script> |
|||
<script src="/javascripts/twitter.js" type="text/javascript"> </script> |
|||
{% if site.twitter_follow_button %} |
|||
<a href="http://twitter.com/{{ site.twitter_user }}" class="twitter-follow-button" data-width="208px" data-show-count="{{ site.twitter_show_follower_count }}">Follow @{{ site.twitter_user }}</a> |
|||
{% else %} |
|||
<p>Follow <a href="http://twitter.com/{{site.twitter_user}}">@{{ site.twitter_user }}</a></p> |
|||
{% endif %} |
|||
</section> |
|||
{% endif %} |
|||
@ -0,0 +1,7 @@ |
|||
<script type="text/javascript"> |
|||
var disqus_url = "{{ site.url }}{{ page.url }}"; |
|||
</script> |
|||
<noscript> |
|||
<a href="http://{{ site.disqus_short_name }}.disqus.com/?url=ref">View the discussion thread</a> |
|||
</noscript> |
|||
<script type="text/javascript" src="http://disqus.com/forums/{{ site.disqus_short_name }}/embed.js"></script> |
|||
@ -0,0 +1,4 @@ |
|||
<p> |
|||
Copyright © {{ site.time | date: "%Y" }} - {{ site.author }} - |
|||
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span> |
|||
</p> |
|||
@ -0,0 +1,13 @@ |
|||
{% if site.google_analytics_tracking_id %} |
|||
<script type="text/javascript"> |
|||
var _gaq = _gaq || []; |
|||
_gaq.push(['_setAccount', '{{ site.google_analytics_tracking_id }}']); |
|||
_gaq.push(['_trackPageview']); |
|||
|
|||
(function() { |
|||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
|||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
|||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
|||
})(); |
|||
</script> |
|||
{% endif %} |
|||
@ -0,0 +1,32 @@ |
|||
<!DOCTYPE html> |
|||
<!--[if IEMobile 7 ]><html class="no-js iem7" manifest="default.appcache?v=1"><![endif]--> |
|||
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]--> |
|||
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" manifest="default.appcache?v=1" lang="en"><!--<![endif]--> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
{% if page.title %} |
|||
<title>{{site.title}}: {{page.title}}{% if site.author %} - {{ site.author }}{% endif %}</title> |
|||
{% else %} |
|||
<title>{{site.title}}{% if site.author %} - {{ site.author }}{% endif %}</title> |
|||
{% endif %} |
|||
<meta name="author" content="{{site.author}}"> |
|||
{% if page.description %} |
|||
<meta name="description" content="{{page.description}}"/> |
|||
{% endif %} |
|||
|
|||
<!-- http://t.co/dKP3o1e --> |
|||
<meta name="HandheldFriendly" content="True"> |
|||
<meta name="MobileOptimized" content="320"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
|
|||
{% if page.keywords %} |
|||
<meta name="keywords" content="{{page.keywords}}"/> |
|||
{% endif %} |
|||
|
|||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
|||
<script src="/javascripts/modernizr-2.0.js"></script> |
|||
<script src="/javascripts/ender.js"></script> |
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
|||
{% include google_analytics.html %} |
|||
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml"/> |
|||
</head> |
|||
@ -0,0 +1 @@ |
|||
<h1><a href="/">{{ site.title }}</a></h1> |
|||
@ -0,0 +1,16 @@ |
|||
<ul role="subscription"> |
|||
<li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss">RSS</a></li> |
|||
{% if site.subscribe_emai %} |
|||
<li><a href="{{ site.subscribe_email }}" rel="subscribe-email">Email</a></li> |
|||
{% endif %} |
|||
</ul> |
|||
<form action="{{ site.simple_search }}" method="get"> |
|||
<fieldset role="site-search"> |
|||
<input type="hidden" name="q" value="site:{{ site.url | search_url }}" /> |
|||
<input class="search" type="text" name="q" results="0" placeholder="Search"/> |
|||
</fieldset> |
|||
</form> |
|||
<ul role="main-nav"> |
|||
<li><a href="/">Home</a></li> |
|||
<li><a href="/archive.html">Archive</a></li> |
|||
</ul> |
|||
@ -0,0 +1,8 @@ |
|||
<section> |
|||
<h1>About Me</h1> |
|||
<p>Hi, I'm Octopress!</p> |
|||
</section> |
|||
{% include asides/recent_posts.html %} |
|||
{% include asides/twitter.html %} |
|||
{% include asides/delicious.html %} |
|||
{% include asides/pinboard.html %} |
|||
@ -0,0 +1,19 @@ |
|||
--- |
|||
layout: default |
|||
--- |
|||
<div id="content"> |
|||
<div class="post"> |
|||
<h1 class="post-title">{{ page.month | date_to_month }} {{ page.year }}</h1> |
|||
<p class="lead">Posts from {{ page.month | date_to_month }}, {{ page.year }}</p> |
|||
<ul> |
|||
{% for d in (1..31) reversed %} |
|||
{% if page.collated_posts[page.year][page.month][d] %} |
|||
{% for p in page.collated_posts[page.year][page.month][d] reversed %} |
|||
<li><a href='{{ p.url }}'>{{ p.title }}</a></li> |
|||
{% endfor %} |
|||
{% endif %} |
|||
{% endfor %} |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
@ -0,0 +1,25 @@ |
|||
--- |
|||
layout: default |
|||
--- |
|||
<div id="content"> |
|||
<div class="post"> |
|||
<h1 class="post-title">{{ page.year }}</h1> |
|||
<p class="lead">Posts from the year {{ page.year }}</p> |
|||
{% for m in (1..12) reversed %} |
|||
{% if page.collated_posts[page.year][m] %} |
|||
<h3>{{ m | date_to_month }}</h3> |
|||
{% for d in (1..31) reversed %} |
|||
{% if page.collated_posts[page.year][m][d] %} |
|||
{% for p in page.collated_posts[page.year][m][d] reversed %} |
|||
<div> |
|||
<strong>{{ p.date | date: "%d" }}</strong> |
|||
<a href='{{ p.url }}'>{{ p.title }}</a> |
|||
</div> |
|||
{% endfor %} |
|||
{% endif %} |
|||
{% endfor %} |
|||
{% endif %} |
|||
{% endfor %} |
|||
</div> |
|||
</div> |
|||
|
|||
@ -0,0 +1,26 @@ |
|||
{% include head.html %} |
|||
<body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == 'none' %} class="no-sidebar" {% endif %}> |
|||
<header>{% include header.html %}</header> |
|||
<nav>{% include navigation.html %}</nav> |
|||
<div> |
|||
<div> |
|||
<div id="articles">{{ content }}</div> |
|||
{% unless page.sidebar == 'none' %} |
|||
<aside>{% include sidebar.html %}</aside> |
|||
{% endunless %} |
|||
</div> |
|||
</div> |
|||
<footer>{% include footer.html %}</footer> |
|||
{% if site.twitter_follow_button or site.twitter_tweet_button %} |
|||
<script type="text/javascript"> |
|||
(function(){ |
|||
var twitterWidgets = document.createElement('script'); |
|||
twitterWidgets.type = 'text/javascript'; |
|||
twitterWidgets.async = true; |
|||
twitterWidgets.src = 'http://platform.twitter.com/widgets.js'; |
|||
document.getElementsByTagName('head')[0].appendChild(twitterWidgets); |
|||
})(); |
|||
</script> |
|||
{% endif %} |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,13 @@ |
|||
--- |
|||
layout: default |
|||
no_title_link: true |
|||
permalink: pretty |
|||
single: true |
|||
--- |
|||
|
|||
<article> |
|||
{% include article.html %} |
|||
{% if site.disqus_short_name %} |
|||
<div id="disqus_thread">{% include disqus_thread.html %}</div> |
|||
{% endif %} |
|||
</article> |
|||
@ -0,0 +1,16 @@ |
|||
--- |
|||
layout: default |
|||
single: true |
|||
--- |
|||
|
|||
<article class="hentry"> |
|||
{% include article.html %} |
|||
<footer> |
|||
<p> |
|||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a> |
|||
</p> |
|||
</footer> |
|||
{% if site.disqus_short_name %} |
|||
<div id="disqus_thread">{% include disqus_thread.html %}</div> |
|||
{% endif %} |
|||
</article> |
|||
@ -0,0 +1,16 @@ |
|||
--- |
|||
title: Hello World! I'm Octopress! |
|||
layout: post |
|||
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/). |
|||
If you don't know what Jekyll is, [Jack Moffitt](http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/) wrote a good summary: |
|||
|
|||
{% blockquote Jack Moffitt http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/ Blogging with Git Emacs and Jekyll %} |
|||
Jekyll is a static blog generator; it transforms a directory of input files into another directory of files suitable for a blog. The management of the blog is handled by standard, familiar tools like creating and renaming files, the text editor of your choice, and version control. |
|||
{% endblockquote %} |
|||
|
|||
There's no database to set up, and you get to use tools like Emacs, Vim, or TextMate to write your posts, not some lame in-browser text editor. Just write, generate, deploy, using the same tools and patterns you already use for your daily work. |
|||
|
|||
[Read the wiki to learn more](http://wiki.github.com/imathis/octopress/) |
|||
@ -0,0 +1,6 @@ |
|||
--- |
|||
title: Test Post |
|||
layout: post |
|||
--- |
|||
|
|||
This is a test! |
|||
@ -0,0 +1,50 @@ |
|||
--- |
|||
title: "Test of Typography" |
|||
date: 2011-04-07 19:17 |
|||
layout: post |
|||
--- |
|||
|
|||
In the past I've always designed my own business cards, printed them on expensive card stock, and hand-cut them with an X-Acto knife. My cards were way nicer than those my clients had gotten *professionally* printed with bubbly ink, no-bleed designs, and cheap paper. Though I put tremendous care into my cards, I never was happy with the design. |
|||
|
|||
## Why Have Business Cards? |
|||
I'm rarely asked for my business card except when I attend conferences, of which I attend one or two each year. As a freelance contractor, I leave work by walking twenty-five feet from my office to the couch. Many of the |
|||
people I work for I've never met in-person. |
|||
|
|||
When someone gives me their business card, I read it, pocket it, and eventually throw it out — sometimes before I remember to copy the information to my address book (sorry, just being honest). The reality is, with the ubiquity of the internet and with frictionless social networks like Twitter, I can connect with people immediately. So why have business cards? |
|||
|
|||
<!-- more --> |
|||
|
|||
### Inspiration Demands Action |
|||
In one of our campfire chats [Nathaniel Talbott](http://twitter.com/NTalbott) showed off his business cards which he printed through [Moo](http://moo.com). They were half the size of regular business cards featuring the company logo on the front, and the url on the back. The unique size of the card intrigued me, and days later I couldn't stop thinking about designing a set of mini-cards for myself. |
|||
|
|||
<img src="/content/blog/2010/cards/box.jpg" alt="cards in a box" width="300px" class="right"/> Moo's [MiniCard's](http://moo.com/products/minicards.php) are very unique. You can print 100 cards, each with a totally different back. With a typical printing service this would be prohibitively expensive, but with Moo the rules are different. This freedom encourages us to go beyond nicely styled contact information and branding. Some clever uses involve offering unique invite codes for a web application, or sharing a photography portfolio with Moo's Flickr import feature. |
|||
|
|||
I realized that I could print several design iterations and decide later which worked best. Without the pressure to choose a single design, I felt the freedom to create. |
|||
|
|||
### The Freedom to Fail |
|||
<img src="/content/blog/2010/cards/concepts.jpg" alt="card concepts" width="270px" class="left"/> I could be cheeky and print up half of my cards with my logo on one side and only my Twitter name on the other. For less than $20 for 100 cards, I wasn't even concerned about possibly screwing up a whole batch. So that's what I did. I designed cards that were good enough and I printed them. If the cards did't turn out how I wanted them to, I could improve and print again. |
|||
|
|||
<img src="/content/blog/2010/cards/handout.jpg" alt="handout cards" width="220px" class="right"/> The process was fun and simple, and as soon as I finished, I wanted to do it again. When my cards arrived, I was absolutely delighted by the print quality and the care put into their presentation. Smartly Moo even included some beautiful promotional cards to hand out when people inevitably ask about mine. |
|||
|
|||
### A Second Iteration |
|||
After holding the finished product, I began to see how my design could be improved. I learned that Gill Sans is harder to read at a small size in a high contrast print, so I switched to Futura. I showed my cards to some far-sighted friends and adjusted my font size accordingly. I discarded a background gradient (which I should have known wouldn't translate well to print) in favor of a solid color. **Sidenote:** On screen, gradients emulate the subtleties of a natural light source, but on a real object it doesn't make sense and generally looks bad. |
|||
|
|||
I changed my approach choosing a single design with multiple color variations. In the promotional cards Moo sent me, I learned that they do a fantastic job with bright colors and I wanted to use that boldness in my design. I was inspired by what [Seth Godin said](http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html): |
|||
|
|||
> Every interaction is both precious and an opportunity to delight. |
|||
|
|||
<img src="/content/blog/2010/cards/holder.jpg" alt="MiniCard Holder" width="220px" class="right"/> I pictured sliding a card out of my [MiniCard Holder](http://moo.com/products/accessories/holders/moo_minicard_holders) and revealing another brightly-colored card beneath. As I hand someone a card they'll see the flash of color and realize that their card was special, and different from my other cards. That's what I want my clients and future clients to feel. |
|||
|
|||
### The Final Design |
|||
|
|||
<img src="/content/blog/2010/cards/all.jpg" alt="all card designs" width="640px"/> |
|||
|
|||
The MiniCard's unique constraints inspired me with a fresh challenge and their pricing model encouraged me to experiment. Instead of treating business cards like a necessary design task, I saw them as a opportunity to release quickly, fail cheaply, and improve. Now when I give someone a business card, it's something valuable to me, and I hope they're delighted. |
|||
|
|||
**Update:** I thought I'd share some other great uses of Moo's MiniCards. There's a fantastic [Flikr pool](http://www.flickr.com/groups/moo/pool/), but here are some of my favorites. Enjoy: |
|||
|
|||
- [Product](http://www.flickr.com/photos/lushlampwork/4131018201/in/pool-moo) [tags](http://www.flickr.com/photos/lushlampwork/4297224179/in/pool-moo) |
|||
- [Photography](http://www.flickr.com/photos/thisiswoly/4206576342/in/pool-moo) or [art](http://www.flickr.com/photos/lesleybarnes/4276368956/in/pool-moo) [portfolios](http://www.flickr.com/photos/playinprogress/4158223112/in/pool-moo) |
|||
- [Gift](http://www.flickr.com/photos/polkadotcreations/4167249758/in/pool-moo) [tags](http://www.flickr.com/photos/22338102@N04/4278114745/in/pool-moo) |
|||
- [An advent calendar](http://www.flickr.com/photos/bcome/4177034036/in/pool-moo) |
|||
|
|||
@ -0,0 +1,24 @@ |
|||
--- |
|||
layout: page |
|||
title: Blog Archive |
|||
nometa: true |
|||
--- |
|||
{% for post in site.posts reverse %} |
|||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} |
|||
{% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %} |
|||
{% unless year == this_year %} |
|||
{% unless forloop.first %}</ul>{% endunless %} |
|||
{% assign year = this_year %} |
|||
<h2>{{ year }}</h2> |
|||
<ul class="blog_archives"> |
|||
{% endunless %} |
|||
{% unless month == this_month %} |
|||
{% assign month = this_month %} |
|||
<li><h4>{{ month }}</h4></li> |
|||
{% endunless %} |
|||
<li> |
|||
<time datetime="{{ post.date | datetime }}" pubdate>{{ post.date | date: "%d"}}</time> |
|||
<a href="{{ post.url }}">{{post.title}}</a> |
|||
</li> |
|||
{% if forloop.last %}</ul>{% endif %} |
|||
{% endfor %} |
|||
@ -0,0 +1,28 @@ |
|||
--- |
|||
layout: nil |
|||
--- |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<feed xmlns="http://www.w3.org/2005/Atom"> |
|||
|
|||
<title>{{ site.blog_title }}</title> |
|||
<link href="{{ site.url }}/atom.xml" rel="self"/> |
|||
<link href="{{ site.url }}/"/> |
|||
<updated>{{ site.time | date_to_xmlschema }}</updated> |
|||
<id>{{ site.url }}/</id> |
|||
<author> |
|||
<name>{{ site.author }}</name> |
|||
{% if site.email %} |
|||
<email>{{ site.email }}</email> |
|||
{% endif %} |
|||
</author> |
|||
|
|||
{% for post in site.posts %} |
|||
<entry> |
|||
<title>{{ post.title }}</title> |
|||
<link href="{{ site.url }}{{ post.url }}"/> |
|||
<updated>{{ post.date | date_to_xmlschema }}</updated> |
|||
<id>{{ site.url }}{{ post.id }}</id> |
|||
<content type="html">{{ post.content | full_urls: site.url | xml_escape }}</content> |
|||
</entry> |
|||
{% endfor %} |
|||
</feed> |
|||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 239 B |
|
After Width: | Height: | Size: 99 B |
|
After Width: | Height: | Size: 636 B |
|
After Width: | Height: | Size: 504 B |
|
After Width: | Height: | Size: 333 B |
@ -0,0 +1,11 @@ |
|||
--- |
|||
layout: default |
|||
--- |
|||
{% for page in site.posts limit:3 %} |
|||
{% assign content = page.content %} |
|||
{% assign index = true %} |
|||
<article> |
|||
{% include article.html %} |
|||
</article> |
|||
{% endfor %} |
|||
|
|||
File diff suppressed because it is too large
@ -0,0 +1,85 @@ |
|||
// jXHR.js (JSON-P XHR)
|
|||
// v0.1 (c) Kyle Simpson
|
|||
// MIT License
|
|||
|
|||
(function(global){ |
|||
var SETTIMEOUT = global.setTimeout, // for better compression
|
|||
doc = global.document, |
|||
callback_counter = 0; |
|||
|
|||
global.jXHR = function() { |
|||
var script_url, |
|||
script_loaded, |
|||
jsonp_callback, |
|||
scriptElem, |
|||
publicAPI = null; |
|||
|
|||
function removeScript() { try { scriptElem.parentNode.removeChild(scriptElem); } catch (err) { } } |
|||
|
|||
function reset() { |
|||
script_loaded = false; |
|||
script_url = ""; |
|||
removeScript(); |
|||
scriptElem = null; |
|||
fireReadyStateChange(0); |
|||
} |
|||
|
|||
function ThrowError(msg) { |
|||
try { publicAPI.onerror.call(publicAPI,msg,script_url); } catch (err) { throw new Error(msg); } |
|||
} |
|||
|
|||
function handleScriptLoad() { |
|||
if ((this.readyState && this.readyState!=="complete" && this.readyState!=="loaded") || script_loaded) { return; } |
|||
this.onload = this.onreadystatechange = null; // prevent memory leak
|
|||
script_loaded = true; |
|||
if (publicAPI.readyState !== 4) ThrowError("Script failed to load ["+script_url+"]."); |
|||
removeScript(); |
|||
} |
|||
|
|||
function fireReadyStateChange(rs,args) { |
|||
args = args || []; |
|||
publicAPI.readyState = rs; |
|||
if (typeof publicAPI.onreadystatechange === "function") publicAPI.onreadystatechange.apply(publicAPI,args); |
|||
} |
|||
|
|||
publicAPI = { |
|||
onerror:null, |
|||
onreadystatechange:null, |
|||
readyState:0, |
|||
open:function(method,url){ |
|||
reset(); |
|||
internal_callback = "cb"+(callback_counter++); |
|||
(function(icb){ |
|||
global.jXHR[icb] = function() { |
|||
try { fireReadyStateChange.call(publicAPI,4,arguments); } |
|||
catch(err) { |
|||
publicAPI.readyState = -1; |
|||
ThrowError("Script failed to run ["+script_url+"]."); |
|||
} |
|||
global.jXHR[icb] = null; |
|||
}; |
|||
})(internal_callback); |
|||
script_url = url.replace(/=\?/,"=jXHR."+internal_callback); |
|||
fireReadyStateChange(1); |
|||
}, |
|||
send:function(){ |
|||
SETTIMEOUT(function(){ |
|||
scriptElem = doc.createElement("script"); |
|||
scriptElem.setAttribute("type","text/javascript"); |
|||
scriptElem.onload = scriptElem.onreadystatechange = function(){handleScriptLoad.call(scriptElem);}; |
|||
scriptElem.setAttribute("src",script_url); |
|||
doc.getElementsByTagName("head")[0].appendChild(scriptElem); |
|||
},0); |
|||
fireReadyStateChange(2); |
|||
}, |
|||
setRequestHeader:function(){}, // noop
|
|||
getResponseHeader:function(){return "";}, // basically noop
|
|||
getAllResponseHeaders:function(){return [];} // ditto
|
|||
}; |
|||
|
|||
reset(); |
|||
|
|||
return publicAPI; |
|||
}; |
|||
})(window); |
|||
|
|||
@ -0,0 +1,88 @@ |
|||
function getNav(){ |
|||
var fieldset = $('body > nav fieldset[role=site-search]').after('<fieldset role="mobile-nav"></fieldset>').next(); |
|||
var select = $(fieldset).append('<select></select>').children(); |
|||
select.append('<option value="">Navigate…</option>'); |
|||
$($('body > nav ul[role=main-nav] a').concat($('body > nav ul[role=subscription] a'))).each(function(link) { |
|||
select.append('<option value="'+link.href+'">• '+link.text+'</option>') |
|||
}); |
|||
select.bind('change', function(event){ |
|||
if (select.val()) window.location.href = select.val(); |
|||
}); |
|||
} |
|||
function addSidebarToggler() { |
|||
$('#articles').before('<a href="#" class="toggle-sidebar">»</a>').previous().bind('click', function(e){ |
|||
e.preventDefault(); |
|||
if($('body').hasClass('collapse-sidebar')){ |
|||
$('body').removeClass('collapse-sidebar'); |
|||
e.target.innerHTML = '»'; |
|||
} else { |
|||
$('body').addClass('collapse-sidebar'); |
|||
e.target.innerHTML = '«'; |
|||
} |
|||
}); |
|||
} |
|||
function testFeatures() { |
|||
var features = ['maskImage']; |
|||
$(features).map(function(feature){ |
|||
if(Modernizr.testAllProps(feature)) { |
|||
$('html').addClass(feature); |
|||
} else { |
|||
$('html').addClass('no-'+feature); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function addDivLines(){ |
|||
$('div.highlight pre code').each(function(el){ |
|||
var content = bonzo(el).html(); |
|||
var lines = content.split('\n'); |
|||
var count = lines.length; |
|||
bonzo(lines).each(function(line, index){ |
|||
if(line == '') line = ' '; |
|||
lines[index] = '<div class="line">' + line + '</div>'; |
|||
}); |
|||
$(el).html(lines.join('')); |
|||
}); |
|||
} |
|||
function preToTable(){ |
|||
$('div.highlight').each(function(code){ |
|||
var tableStart = '<table cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter">'; |
|||
var lineNumbers = '<pre class="line-numbers">'; |
|||
var tableMiddle = '</pre></td><td class="code" width="100%">'; |
|||
var tableEnd = '</td></tr></tbody></table>'; |
|||
var count = $('div.line', code).length; |
|||
for (i=1;i<=count; i++){ |
|||
lineNumbers += '<span class="line">'+i+'</span>\n'; |
|||
} |
|||
table = tableStart + lineNumbers + tableMiddle + '<pre>'+$('pre', code).html()+'</pre>' + tableEnd; |
|||
$(code).html(table); |
|||
}); |
|||
} |
|||
$.domReady(function(){ |
|||
testFeatures(); |
|||
addDivLines(); |
|||
preToTable(); |
|||
getNav(); |
|||
addSidebarToggler(); |
|||
}); |
|||
|
|||
// iOS scaling bug fix
|
|||
// Rewritten version
|
|||
// By @mathias, @cheeaun and @jdalton
|
|||
// Source url: https://gist.github.com/901295
|
|||
(function(doc) { |
|||
var addEvent = 'addEventListener', |
|||
type = 'gesturestart', |
|||
qsa = 'querySelectorAll', |
|||
scales = [1, 1], |
|||
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; |
|||
function fix() { |
|||
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; |
|||
doc.removeEventListener(type, fix, true); |
|||
} |
|||
if ((meta = meta[meta.length - 1]) && addEvent in doc) { |
|||
fix(); |
|||
scales = [.25, 1.6]; |
|||
doc[addEvent](type, fix, true); |
|||
} |
|||
}(document)); |
|||
@ -0,0 +1,56 @@ |
|||
function pinboardNS_fetch_script(url) { |
|||
//document.writeln('<s'+'cript type="text/javascript" src="' + url + '"></s'+'cript>');
|
|||
(function(){ |
|||
var pinboardLinkroll = document.createElement('script'); |
|||
pinboardLinkroll.type = 'text/javascript'; |
|||
pinboardLinkroll.async = true; |
|||
pinboardLinkroll.src = url; |
|||
document.getElementsByTagName('head')[0].appendChild(pinboardLinkroll); |
|||
})(); |
|||
} |
|||
|
|||
function pinboardNS_show_bmarks(r) { |
|||
var lr = new Pinboard_Linkroll(); |
|||
lr.set_items(r); |
|||
lr.show_bmarks(); |
|||
} |
|||
|
|||
function Pinboard_Linkroll() { |
|||
var items; |
|||
|
|||
this.set_items = function(i) { |
|||
this.items = i; |
|||
} |
|||
this.show_bmarks = function() { |
|||
var lines = []; |
|||
for (var i = 0; i < this.items.length; i++) { |
|||
var item = this.items[i]; |
|||
var str = this.format_item(item); |
|||
lines.push(str); |
|||
} |
|||
document.getElementById(linkroll).innerHTML = lines.join("\n"); |
|||
} |
|||
this.cook = function(v) { |
|||
return v.replace('<', '<').replace('>', '>>'); |
|||
} |
|||
|
|||
this.format_item = function(it) { |
|||
var str = "<li class=\"pin-item\">"; |
|||
if (!it.d) { return; } |
|||
str += "<p><a class=\"pin-title\" href=\"" + this.cook(it.u) + "\">" + this.cook(it.d) + "</a>"; |
|||
if (it.n) { |
|||
str += "<span class=\"pin-description\">" + this.cook(it.n) + "</span>\n"; |
|||
} |
|||
if (it.t.length > 0) { |
|||
for (var i = 0; i < it.t.length; i++) { |
|||
var tag = it.t[i]; |
|||
str += " <a class=\"pin-tag\" href=\"http://pinboard.in/u:"+ this.cook(it.a) + "/t:" + this.cook(tag) + "\">" + this.cook(tag).replace(/^\s+|\s+$/g, '') + "</a> "; |
|||
} |
|||
} |
|||
str += "</p></li>\n"; |
|||
return str; |
|||
} |
|||
} |
|||
Pinboard_Linkroll.prototype = new Pinboard_Linkroll(); |
|||
pinboardNS_fetch_script("http://feeds.pinboard.in/json/v1/u:"+pinboard_user+"/?cb=pinboardNS_show_bmarks\&count="+pinboard_count); |
|||
|
|||
@ -0,0 +1,80 @@ |
|||
// JSON-P Twitter fetcher for Octopress
|
|||
// (c) Brandon Mathis // MIT Lisence
|
|||
function getTwitterFeed(user, count, replies) { |
|||
feed = new jXHR(); |
|||
feed.onerror = function (msg,url) { |
|||
$('#tweets li.loading').addClass('error').text("Twitter's busted"); |
|||
} |
|||
feed.onreadystatechange = function(data){ |
|||
if (feed.readyState === 4) { |
|||
var tweets = new Array(); |
|||
for (i in data){ |
|||
if(tweets.length < count){ |
|||
if(replies || data[i].in_reply_to_user_id == null){ |
|||
tweets.push(data[i]); |
|||
} |
|||
} |
|||
} |
|||
showTwitterFeed(tweets, user); |
|||
} |
|||
}; |
|||
feed.open("GET","http://twitter.com/statuses/user_timeline/"+user+".json?trim_user=true&count="+(parseInt(count)+60)+"&callback=?"); |
|||
feed.send(); |
|||
} |
|||
|
|||
function showTwitterFeed(tweets, twitter_user){ |
|||
var timeline = document.getElementById('tweets'); |
|||
timeline.innerHTML=''; |
|||
for (t in tweets){ |
|||
timeline.innerHTML+='<li>'+'<p>'+'<a href="http://twitter.com/'+twitter_user+'/status/'+tweets[t].id_str+'">'+prettyDate(tweets[t].created_at)+'</a>'+linkifyTweet(tweets[t].text)+'</p>'+'</li>'; |
|||
} |
|||
} |
|||
function linkifyTweet(text){ |
|||
return text.replace(/(https?:\/\/)([\w\-:;?&=+.%#\/]+)/gi, '<a href="$1$2">$2</a>') |
|||
.replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>') |
|||
.replace(/(^|\W)#(\w+)/g, '$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>'); |
|||
} |
|||
|
|||
|
|||
|
|||
// jXHR.js (JSON-P XHR) | v0.1 (c) Kyle Simpson | MIT License | http://mulletxhr.com/
|
|||
// uncompressed version available in source/javascripts/libs/jXHR.js
|
|||
(function(c){var b=c.setTimeout,d=c.document,a=0;c.jXHR=function(){var e,g,n,h,m=null;function l(){try{h.parentNode.removeChild(h)}catch(o){}}function k(){g=false;e="";l();h=null;i(0)}function f(p){try{m.onerror.call(m,p,e)}catch(o){throw new Error(p)}}function j(){if((this.readyState&&this.readyState!=="complete"&&this.readyState!=="loaded")||g){return}this.onload=this.onreadystatechange=null;g=true;if(m.readyState!==4){f("Script failed to load ["+e+"].")}l()}function i(o,p){p=p||[];m.readyState=o;if(typeof m.onreadystatechange==="function"){m.onreadystatechange.apply(m,p)}}m={onerror:null,onreadystatechange:null,readyState:0,open:function(p,o){k();internal_callback="cb"+(a++);(function(q){c.jXHR[q]=function(){try{i.call(m,4,arguments)}catch(r){m.readyState=-1;f("Script failed to run ["+e+"].")}c.jXHR[q]=null}})(internal_callback);e=o.replace(/=\?/,"=jXHR."+internal_callback);i(1)},send:function(){b(function(){h=d.createElement("script");h.setAttribute("type","text/javascript");h.onload=h.onreadystatechange=function(){j.call(h)};h.setAttribute("src",e);d.getElementsByTagName("head")[0].appendChild(h)},0);i(2)},setRequestHeader:function(){},getResponseHeader:function(){return""},getAllResponseHeaders:function(){return[]}};k();return m}})(window); |
|||
|
|||
|
|||
/* Sky Slavin, Ludopoli. MIT license. * based on JavaScript Pretty Date * Copyright (c) 2008 John Resig (jquery.com) * Licensed under the MIT license. */ |
|||
|
|||
function prettyDate(time) { |
|||
if (navigator.appName == 'Microsoft Internet Explorer') { |
|||
return "<span>∞</span>"; // because IE date parsing isn't fun.
|
|||
}; |
|||
|
|||
var say = {}; |
|||
say.just_now = " now", |
|||
say.minute_ago = "1m", |
|||
say.minutes_ago = "m", |
|||
say.hour_ago = "1h", |
|||
say.hours_ago = "h", |
|||
say.yesterday = "1d", |
|||
say.days_ago = "d", |
|||
say.weeks_ago = "w" |
|||
|
|||
var current_date = new Date(); |
|||
current_date_time = current_date.getTime(); |
|||
current_date_full = current_date_time + (1 * 60000); |
|||
var date = new Date(time); |
|||
var diff = ((current_date_full - date.getTime()) / 1000); |
|||
var day_diff = Math.floor(diff / 86400); |
|||
|
|||
if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31) return; |
|||
|
|||
return day_diff == 0 && ( |
|||
diff < 60 && say.just_now || |
|||
diff < 120 && say.minute_ago || |
|||
diff < 3600 && Math.floor(diff / 60) + say.minutes_ago || |
|||
diff < 7200 && say.hour_ago || |
|||
diff < 86400 && Math.floor(diff / 3600) + say.hours_ago) || |
|||
day_diff == 1 && say.yesterday || |
|||
day_diff < 7 && day_diff + say.days_ago || |
|||
day_diff < 31 && Math.ceil(day_diff / 7) + say.weeks_ago; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,397 @@ |
|||
--- |
|||
layout: default |
|||
layout: page |
|||
nometa: true |
|||
title: Syntax Highlighting Debug |
|||
--- |
|||
|
|||
<h3 class="filename">gist_syntax_test.rb</h3> |
|||
{% gist 996818 test.rb %} |
|||
|
|||
<h3 class="filename">syntax_test.diff</h3> |
|||
{% highlight diff %} |
|||
@@ -590,7 +590,7 @@ class SpritesTest < Test::Unit::TestCase |
|||
it "should generate a sprite from nested folders" do |
|||
css = render <<-SCSS |
|||
- @import "nested/*.png"; |
|||
+ @import "nested/**/*.png"; |
|||
@include all-nested-sprites; |
|||
SCSS |
|||
assert_correct css, <<-CSS |
|||
|
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.html</h3> |
|||
{% highlight html %} |
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
|||
<html><head> |
|||
<title>A Tiny Page</title> |
|||
<style type="text/css"> |
|||
<!-- |
|||
p { font-size:15pt; color:#000 } |
|||
--> |
|||
</style></head><!-- real comment --> |
|||
<body bgcolor="#FFFFFF" text="#000000" link="#0000CC"> |
|||
<script language="javascript" type="text/javascript"> |
|||
function changeHeight(h) { |
|||
var tds = document.getElementsByTagName("td"); |
|||
for(var i = 0; i < tds.length; i++) { |
|||
tds[i].setAttribute("height", h + "px"); |
|||
}} |
|||
</script> |
|||
<h1>abc</h1> |
|||
<h2>def</h2> |
|||
<p>Testing page</p> |
|||
</body></html> |
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.js</h3> |
|||
{% highlight js %} |
|||
|
|||
/** |
|||
sample javascript from xui |
|||
*/ |
|||
|
|||
var undefined, |
|||
xui, |
|||
window = this, |
|||
string = new String('string'), |
|||
document = window.document, |
|||
simpleExpr = /^#?([\w-]+)$/, |
|||
idExpr = /^#/, |
|||
tagExpr = /<([\w:]+)/, |
|||
slice = function (e) { return [].slice.call(e, 0); }; |
|||
try { var a = slice(document.documentElement.childNodes)[0].nodeType; } |
|||
catch(e){ slice = function (e) { var ret=[]; for (var i=0; e[i]; i++) |
|||
ret.push(e[i]); return ret; }; } |
|||
|
|||
window.x$ = window.xui = xui = function(q, context) { |
|||
return new xui.fn.find(q, context); |
|||
}; |
|||
|
|||
|
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.rb</h3> |
|||
{% highlight ruby %} |
|||
|
|||
include Enumerable |
|||
|
|||
def initialize(rbconfig) |
|||
@rbconfig = rbconfig |
|||
@no_harm = false |
|||
end |
|||
|
|||
def load_savefile |
|||
begin |
|||
File.foreach(savefile()) do |line| |
|||
k, v = *line.split(/=/, 2) |
|||
self[k] = v.strip |
|||
end |
|||
rescue Errno::ENOENT |
|||
setup_rb_error $!.message + "\n#{File.basename($0)} config first" |
|||
end |
|||
end |
|||
|
|||
if c['rubylibdir'] |
|||
# V > 1.6.3 |
|||
libruby = "#{c['prefix']}/lib/ruby" |
|||
siterubyverarch = c['sitearchdir'] |
|||
end |
|||
parameterize = lambda {|path| |
|||
path.sub(/\A#{Regexp.quote(c['prefix'])}/, '$prefix') |
|||
} |
|||
|
|||
if arg = c['configure_args'].split.detect {|arg| /--with-make-prog=/ =~ arg } |
|||
makeprog = arg.sub(/'/, '').split(/=/, 2)[1] |
|||
else |
|||
makeprog = 'make' |
|||
end |
|||
|
|||
def setup_rb_error(msg) |
|||
raise SetupError, msg |
|||
end |
|||
|
|||
if $0 == __FILE__ |
|||
begin |
|||
ToplevelInstaller.invoke |
|||
rescue SetupError |
|||
raise if $DEBUG |
|||
$stderr.puts $!.message |
|||
$stderr.puts "Try 'ruby #{$0} --help' for detailed usage." |
|||
exit 1 |
|||
end |
|||
end |
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.php</h3> |
|||
{% highlight php %} |
|||
<?php |
|||
require_once($GLOBALS['g_campsiteDir']. "/$ADMIN_DIR/country/common.php"); |
|||
require_once($GLOBALS['g_campsiteDir']. "/classes/SimplePager.php"); |
|||
camp_load_translation_strings("api"); |
|||
|
|||
$f_country_language_selected = camp_session_get('f_language_selected', ''); |
|||
$f_country_offset = camp_session_get('f_country_offset', 0); |
|||
if (empty($f_country_language_selected)) { |
|||
$f_country_language_selected = null; |
|||
} |
|||
$ItemsPerPage = 20; |
|||
$languages = Language::GetLanguages(null, null, null, array(), array(), true); |
|||
$numCountries = Country::GetNumCountries($f_country_language_selected); |
|||
|
|||
$pager = new SimplePager($numCountries, $ItemsPerPage, "index.php?"); |
|||
|
|||
$crumbs = array(); |
|||
$crumbs[] = array(getGS("Configure"), ""); |
|||
$crumbs[] = array(getGS("Countries"), ""); |
|||
echo camp_html_breadcrumbs($crumbs); |
|||
|
|||
?> |
|||
|
|||
<?php if ($g_user->hasPermission("ManageCountries")) { ?> |
|||
<table BORDER="0" CELLSPACING="0" CELLPADDING="1"> |
|||
<tr> |
|||
<td><a href="add.php"><?php putGS("Add new"); ?></a></td> |
|||
</tr> |
|||
</table> |
|||
{% endhighlight %} |
|||
|
|||
|
|||
<h3 class="filename">syntax_test.hs</h3> |
|||
{% highlight hs %} |
|||
{-# LANGUAGE OverloadedStrings #-} |
|||
module Main where |
|||
|
|||
--import Prelude hiding (id) |
|||
--import Control.Category (id) |
|||
import Control.Arrow ((>>>), (***), arr) |
|||
import Control.Monad (forM_) |
|||
-- import Data.Monoid (mempty, mconcat) |
|||
|
|||
-- import System.FilePath |
|||
|
|||
import Hakyll |
|||
|
|||
|
|||
main :: IO () |
|||
main = hakyll $ do |
|||
|
|||
route "css/*" $ setExtension "css" |
|||
compile "css/*" $ byExtension (error "Not a (S)CSS file") |
|||
[ (".css", compressCssCompiler) |
|||
, (".scss", sass) |
|||
] |
|||
|
|||
route "js/**" idRoute |
|||
compile "js/**" copyFileCompiler |
|||
|
|||
route "img/*" idRoute |
|||
compile "img/*" copyFileCompiler |
|||
|
|||
compile "templates/*" templateCompiler |
|||
|
|||
forM_ ["test.md", "index.md"] $ \page -> do |
|||
route page $ setExtension "html" |
|||
compile page $ pageCompiler |
|||
>>> applyTemplateCompiler "templates/default.html" |
|||
>>> relativizeUrlsCompiler |
|||
|
|||
sass :: Compiler Resource String |
|||
sass = getResourceString >>> unixFilter "sass" ["-s", "--scss"] |
|||
>>> arr compressCss |
|||
|
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.sh</h3> |
|||
{% highlight sh %} |
|||
#!/bin/bash |
|||
|
|||
cd $ROOT_DIR |
|||
DOT_FILES="lastpass weechat ssh Xauthority" |
|||
for dotfile in $DOT_FILES; do conform_link "$DATA_DIR/$dotfile" ".$dotfile"; done |
|||
|
|||
# TODO: refactor with suffix variables (or common cron values) |
|||
|
|||
case "$PLATFORM" in |
|||
linux) |
|||
#conform_link "$CONF_DIR/shell/zshenv" ".zshenv" |
|||
crontab -l > $ROOT_DIR/tmp/crontab-conflict-arch |
|||
cd $ROOT_DIR/$CONF_DIR/cron |
|||
if [[ "$(diff ~/tmp/crontab-conflict-arch crontab-current-arch)" == "" |
|||
]]; |
|||
then # no difference with current backup |
|||
logger "$LOG_PREFIX: crontab live settings match stored "\ |
|||
"settings; no restore required" |
|||
rm ~/tmp/crontab-conflict-arch |
|||
else # current crontab settings in file do not match live settings |
|||
crontab $ROOT_DIR/$CONF_DIR/cron/crontab-current-arch |
|||
logger "$LOG_PREFIX: crontab stored settings conflict with "\ |
|||
"live settings; stored settings restored. "\ |
|||
"Previous settings recorded in ~/tmp/crontab-conflict-arch." |
|||
fi |
|||
;; |
|||
|
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.py</h3> |
|||
{% highlight py %} |
|||
# test python (sample from offlineimap) |
|||
|
|||
class ExitNotifyThread(Thread): |
|||
"""This class is designed to alert a "monitor" to the fact that a thread has |
|||
exited and to provide for the ability for it to find out why.""" |
|||
def run(self): |
|||
global exitthreads, profiledir |
|||
self.threadid = thread.get_ident() |
|||
try: |
|||
if not profiledir: # normal case |
|||
Thread.run(self) |
|||
else: |
|||
try: |
|||
import cProfile as profile |
|||
except ImportError: |
|||
import profile |
|||
prof = profile.Profile() |
|||
try: |
|||
prof = prof.runctx("Thread.run(self)", globals(), locals()) |
|||
except SystemExit: |
|||
pass |
|||
prof.dump_stats( \ |
|||
profiledir + "/" + str(self.threadid) + "_" + \ |
|||
self.getName() + ".prof") |
|||
except: |
|||
self.setExitCause('EXCEPTION') |
|||
if sys: |
|||
self.setExitException(sys.exc_info()[1]) |
|||
tb = traceback.format_exc() |
|||
self.setExitStackTrace(tb) |
|||
else: |
|||
self.setExitCause('NORMAL') |
|||
if not hasattr(self, 'exitmessage'): |
|||
self.setExitMessage(None) |
|||
|
|||
if exitthreads: |
|||
exitthreads.put(self, True) |
|||
|
|||
def setExitCause(self, cause): |
|||
self.exitcause = cause |
|||
def getExitCause(self): |
|||
"""Returns the cause of the exit, one of: |
|||
'EXCEPTION' -- the thread aborted because of an exception |
|||
'NORMAL' -- normal termination.""" |
|||
return self.exitcause |
|||
def setExitException(self, exc): |
|||
self.exitexception = exc |
|||
def getExitException(self): |
|||
"""If getExitCause() is 'EXCEPTION', holds the value from |
|||
sys.exc_info()[1] for this exception.""" |
|||
return self.exitexception |
|||
def setExitStackTrace(self, st): |
|||
self.exitstacktrace = st |
|||
def getExitStackTrace(self): |
|||
"""If getExitCause() is 'EXCEPTION', returns a string representing |
|||
the stack trace for this exception.""" |
|||
return self.exitstacktrace |
|||
def setExitMessage(self, msg): |
|||
"""Sets the exit message to be fetched by a subsequent call to |
|||
getExitMessage. This message may be any object or type except |
|||
None.""" |
|||
self.exitmessage = msg |
|||
def getExitMessage(self): |
|||
"""For any exit cause, returns the message previously set by |
|||
a call to setExitMessage(), or None if there was no such message |
|||
set.""" |
|||
return self.exitmessage |
|||
|
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.pl</h3> |
|||
{% highlight perl %} |
|||
#!perl -w |
|||
|
|||
# Time-stamp: <2002/04/06, 13:12:13 (EST), maverick, csvformat.pl> |
|||
# Two pass CSV file to table formatter |
|||
|
|||
$delim = $#ARGV >= 1 ? $ARGV[1] : ','; |
|||
print STDERR "Split pattern: $delim\n"; |
|||
|
|||
# first pass |
|||
open F, "<$ARGV[0]" or die; |
|||
while(<F>) |
|||
{ |
|||
chomp; |
|||
$i = 0; |
|||
map { $max[$_->[1]] = $_->[0] if $_->[0] > ($max[$_->[1]] || 0) } |
|||
(map {[length $_, $i++]} split($delim)); |
|||
} |
|||
close F; |
|||
|
|||
print STDERR 'Field width: ', join(', ', @max), "\n"; |
|||
print STDERR join(' ', map {'-' x $_} @max); |
|||
|
|||
# second pass |
|||
open F, "<$ARGV[0]" or die; |
|||
while(<F>) |
|||
{ |
|||
chomp; |
|||
$i = 0; |
|||
map { printf("%-$max[$_->[1]]s ", $_->[0]) } |
|||
(map {[$_, $i++]} split($delim)); |
|||
print "\n"; |
|||
} |
|||
close F; |
|||
|
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.java</h3> |
|||
{% highlight java %} |
|||
import java.util.Map; |
|||
import java.util.TreeSet; |
|||
|
|||
public class GetEnv { |
|||
/** |
|||
* let's test generics |
|||
* @param args the command line arguments |
|||
*/ |
|||
public static void main(String[] args) { |
|||
// get a map of environment variables |
|||
Map<String, String> env = System.getenv(); |
|||
// build a sorted set out of the keys and iterate |
|||
for(String k: new TreeSet<String>(env.keySet())) { |
|||
System.out.printf("%s = %s\n", k, env.get(k)); |
|||
} |
|||
} } |
|||
{% endhighlight %} |
|||
|
|||
<h3 class="filename">syntax_test.c</h3> |
|||
{% highlight c %} |
|||
#define UNICODE |
|||
#include <windows.h> |
|||
|
|||
int main(int argc, char **argv) { |
|||
int speed = 0, speed1 = 0, speed2 = 0; // 1-20 |
|||
printf("Set Mouse Speed by Maverick\n"); |
|||
|
|||
SystemParametersInfo(SPI_GETMOUSESPEED, 0, &speed, 0); |
|||
printf("Current speed: %2d\n", speed); |
|||
|
|||
if (argc == 1) return 0; |
|||
if (argc >= 2) sscanf(argv[1], "%d", &speed1); |
|||
if (argc >= 3) sscanf(argv[2], "%d", &speed2); |
|||
|
|||
if (argc == 2) // set speed to first value |
|||
speed = speed1; |
|||
else if (speed == speed1 || speed == speed2) // alternate |
|||
speed = speed1 + speed2 - speed; |
|||
else |
|||
speed = speed1; // start with first value |
|||
|
|||
SystemParametersInfo(SPI_SETMOUSESPEED, 0, speed, 0); |
|||
SystemParametersInfo(SPI_GETMOUSESPEED, 0, &speed, 0); |
|||
printf("New speed: %2d\n", speed); |
|||
return 0; |
|||
} |
|||
|
|||
{% endhighlight %} |
|||
|
|||
@ -0,0 +1,114 @@ |
|||
--- |
|||
layout: page |
|||
title: Typography Testing |
|||
sidebar: none |
|||
--- |
|||
|
|||
%h1 Level 01 Heading |
|||
%h2 Level 02 Heading |
|||
%h3 Level 03 Heading |
|||
%h4 Level 04 Heading |
|||
%h5 Level 05 Heading |
|||
%h6 Level 06 Heading |
|||
|
|||
|
|||
%p |
|||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu |
|||
viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat |
|||
arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum |
|||
vel pede ut urna eleifend lacinia. |
|||
|
|||
%h2 Level 02 Heading |
|||
|
|||
%p |
|||
Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla |
|||
ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. |
|||
Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed |
|||
sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna. |
|||
|
|||
%h3 Level 03 Heading |
|||
|
|||
%p |
|||
Take it<sub>2</sub> to the power of<sup>3</sup> |
|||
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id |
|||
nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate |
|||
felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a |
|||
libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam |
|||
porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum |
|||
neque. Nam sodales porta elit. Mauris mollis nisl vel augue. |
|||
|
|||
%p |
|||
And we were like <q>Woah</q>, and he was like <q>Woah</q>, and they were like <q>WOAH!</q> <code><\reference></code> |
|||
|
|||
%p |
|||
%abbr(title="For The Win!") FTW! |
|||
%p |
|||
|
|||
%h3 Unordered lists |
|||
%ul |
|||
%li Lorem ipsum dolor sit amet |
|||
%li Consectetur adipisicing elit |
|||
%li Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua |
|||
%li Ut enim ad minim veniam |
|||
|
|||
%h3 Ordered lists |
|||
%ol |
|||
%li Consectetur adipisicing elit |
|||
%li Sed do eiusmod tempor incididunt ut labore |
|||
%li Et dolore magna aliqua |
|||
|
|||
%h3 Blockquotes |
|||
%blockquote |
|||
%p |
|||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore |
|||
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|||
|
|||
%h3 Tables |
|||
%table |
|||
%caption |
|||
Jimi Hendrix - albums |
|||
%thead |
|||
%tr |
|||
%th Album |
|||
%th Year |
|||
%th Price |
|||
%tfoot |
|||
%tr |
|||
%td Album |
|||
%td Year |
|||
%td Price |
|||
%tbody |
|||
%tr |
|||
%td Are You Experienced |
|||
%td 1967 |
|||
%td $10.00 |
|||
%tr |
|||
%td Axis: Bold as Love |
|||
%td 1967 |
|||
%td $12.00 |
|||
%tr |
|||
%td Electric Ladyland |
|||
%td 1968 |
|||
%td $10.00 |
|||
%tr |
|||
%td Band of Gypsys |
|||
%td 1970 |
|||
%td $12.00 |
|||
%p |
|||
%a(href="#")Link |
|||
%br/ |
|||
%strong <strong> |
|||
%br/ |
|||
%del <del> deleted |
|||
%br/ |
|||
%dfn <dfn> dfn |
|||
%br/ |
|||
%em <em> emphasis |
|||
%br/ |
|||
|
|||
%tt |
|||
<tt> |
|||
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus. |
|||
%hr |
|||
Loading…
Reference in new issue