From d139da3a3277f73d7f01e4283d8dc01630a5317c Mon Sep 17 00:00:00 2001
From: Zhiming Wang <zmwangx@gmail.com>
Date: Mon, 20 Oct 2014 16:38:24 -0700
Subject: initial setup
---
sass/_base.scss | 5 +
sass/_partials.scss | 8 +
sass/base/_layout.scss | 192 ++++++++++++++++++++++++
sass/base/_solarized.scss | 46 ++++++
sass/base/_theme.scss | 85 +++++++++++
sass/base/_typography.scss | 164 +++++++++++++++++++++
sass/base/_utilities.scss | 28 ++++
sass/custom/_colors.scss | 43 ++++++
sass/custom/_fonts.scss | 10 ++
sass/custom/_layout.scss | 21 +++
sass/custom/_styles.scss | 2 +
sass/partials/_archive.scss | 72 +++++++++
sass/partials/_blog.scss | 141 ++++++++++++++++++
sass/partials/_footer.scss | 19 +++
sass/partials/_header.scss | 18 +++
sass/partials/_navigation.scss | 137 +++++++++++++++++
sass/partials/_sharing.scss | 8 +
sass/partials/_sidebar.scss | 4 +
sass/partials/_syntax.scss | 261 +++++++++++++++++++++++++++++++++
sass/partials/sidebar/_base.scss | 106 +++++++++++++
sass/partials/sidebar/_delicious.scss | 4 +
sass/partials/sidebar/_googleplus.scss | 26 ++++
sass/partials/sidebar/_pinboard.scss | 12 ++
sass/plugins/_plugins.scss | 6 +
sass/screen.scss | 10 ++
25 files changed, 1428 insertions(+)
create mode 100644 sass/_base.scss
create mode 100644 sass/_partials.scss
create mode 100644 sass/base/_layout.scss
create mode 100644 sass/base/_solarized.scss
create mode 100644 sass/base/_theme.scss
create mode 100644 sass/base/_typography.scss
create mode 100644 sass/base/_utilities.scss
create mode 100644 sass/custom/_colors.scss
create mode 100644 sass/custom/_fonts.scss
create mode 100644 sass/custom/_layout.scss
create mode 100644 sass/custom/_styles.scss
create mode 100644 sass/partials/_archive.scss
create mode 100644 sass/partials/_blog.scss
create mode 100644 sass/partials/_footer.scss
create mode 100644 sass/partials/_header.scss
create mode 100644 sass/partials/_navigation.scss
create mode 100644 sass/partials/_sharing.scss
create mode 100644 sass/partials/_sidebar.scss
create mode 100644 sass/partials/_syntax.scss
create mode 100644 sass/partials/sidebar/_base.scss
create mode 100644 sass/partials/sidebar/_delicious.scss
create mode 100644 sass/partials/sidebar/_googleplus.scss
create mode 100644 sass/partials/sidebar/_pinboard.scss
create mode 100644 sass/plugins/_plugins.scss
create mode 100644 sass/screen.scss
(limited to 'sass')
diff --git a/sass/_base.scss b/sass/_base.scss
new file mode 100644
index 00000000..05fdd005
--- /dev/null
+++ b/sass/_base.scss
@@ -0,0 +1,5 @@
+@import "base/utilities";
+@import "base/solarized";
+@import "base/theme";
+@import "base/typography";
+@import "base/layout";
diff --git a/sass/_partials.scss b/sass/_partials.scss
new file mode 100644
index 00000000..99c28b63
--- /dev/null
+++ b/sass/_partials.scss
@@ -0,0 +1,8 @@
+@import "partials/header";
+@import "partials/navigation";
+@import "partials/blog";
+@import "partials/sharing";
+@import "partials/syntax";
+@import "partials/archive";
+@import "partials/sidebar";
+@import "partials/footer";
diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss
new file mode 100644
index 00000000..81903428
--- /dev/null
+++ b/sass/base/_layout.scss
@@ -0,0 +1,192 @@
+$max-width: 1200px !default;
+
+// Padding used for layout margins
+$pad-min: 18px !default;
+$pad-narrow: 25px !default;
+$pad-medium: 35px !default;
+$pad-wide: 55px !default;
+
+// Sidebar widths used in media queries
+$sidebar-width-medium: 240px !default;
+$sidebar-pad-medium: 15px !default;
+$sidebar-pad-wide: 20px !default;
+$sidebar-width-wide: 300px !default;
+
+$indented-lists: false !default;
+
+$header-font-size: 1em !default;
+$header-padding-top: 1.5em !default;
+$header-padding-bottom: 1.5em !default;
+
+.group { @include pie-clearfix; }
+
+@mixin collapse-sidebar {
+ float: none;
+ width: auto;
+ clear: left;
+ margin: 0;
+ padding: 0 $pad-medium 1px;
+ background-color: lighten($sidebar-bg, 2);
+ border-top: 1px solid lighten($sidebar-border, 4);
+ section {
+ &.odd, &.even { float: left; width: 48%; }
+ &.odd { margin-left: 0; }
+ &.even { margin-left: 4%; }
+ }
+ &.thirds section {
+ width: 30%;
+ margin-left: 5%;
+ &.first {
+ margin-left: 0;
+ clear: both;
+ }
+ }
+}
+
+body {
+ -webkit-text-size-adjust: none;
+ max-width: $max-width;
+ position: relative;
+ margin: 0 auto;
+ > header, > nav, > footer, #content > article, #content > div > article, #content > div > section {
+ @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;
+ }
+ }
+ div.pagination {
+ @extend .group;
+ margin-left: $pad-min;
+ margin-right: $pad-min;
+ @media only screen and (min-width: 480px) {
+ margin-left: $pad-narrow;
+ margin-right: $pad-narrow;
+ }
+ @media only screen and (min-width: 768px) {
+ margin-left: $pad-medium;
+ margin-right: $pad-medium;
+ }
+ @media only screen and (min-width: 992px) {
+ margin-left: $pad-wide;
+ margin-right: $pad-wide;
+ }
+ }
+ > header {
+ font-size: $header-font-size;
+ padding-top: $header-padding-top;
+ padding-bottom: $header-padding-bottom;
+ }
+}
+
+#content {
+ overflow: hidden;
+ > div, > article { width: 100%; }
+}
+
+aside.sidebar {
+ float: none;
+ padding: 0 $pad-min 1px;
+ background-color: lighten($sidebar-bg, 2);
+ border-top: 1px solid $sidebar-border;
+ @extend .group;
+}
+
+.flex-content { max-width: 100%; height: auto; }
+
+.basic-alignment {
+ &.left { float: left; margin-right: 1.5em; }
+ &.right { float: right; margin-left: 1.5em; }
+ &.center { display:block; margin: 0 auto 1.5em; }
+ &.left, &.right { margin-bottom: .8em; }
+}
+
+.toggle-sidebar { &, .no-sidebar & { display: none; }}
+
+body.sidebar-footer {
+ @media only screen and (min-width: 750px) {
+ aside.sidebar{ @include collapse-sidebar; }
+ }
+ #content { margin-right: 0px; }
+ .toggle-sidebar { display: none; }
+}
+
+@media only screen and (min-width: 550px) {
+ body > header { font-size: $header-font-size; }
+}
+@media only screen and (min-width: 750px) {
+ aside.sidebar { @include collapse-sidebar; }
+}
+#main, #content, .sidebar {
+ @extend .group;
+}
+@media only screen and (min-width: 768px) {
+ body { -webkit-text-size-adjust: auto; }
+ body > header { font-size: $header-font-size * 1.2; }
+ #main {
+ padding: 0;
+ margin: 0 auto;
+ }
+ #content {
+ overflow: visible;
+ margin-right: $sidebar-width-medium;
+ position: relative;
+ .no-sidebar & { margin-right: 0; border-right: 0; }
+ .collapse-sidebar & { margin-right: 20px; }
+ > div, > article {
+ padding-top: $pad-medium/2;
+ padding-bottom: $pad-medium/2;
+ float: left;
+ }
+ }
+ aside.sidebar {
+ width: $sidebar-width-medium - $sidebar-pad-medium*2;
+ padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
+ background: none;
+ clear: none;
+ float: left;
+ margin: 0 -100% 0 0;
+ section {
+ width: auto; margin-left: 0;
+ &.odd, &.even { float: none; width: auto; margin-left: 0; }
+ }
+ .collapse-sidebar & {
+ @include collapse-sidebar;
+ }
+ }
+}
+
+@media only screen and (min-width: 992px) {
+ body > header { font-size: $header-font-size * 1.3; }
+ #content { margin-right: $sidebar-width-wide; }
+ #content {
+ > div, > article {
+ padding-top: $pad-wide/2;
+ padding-bottom: $pad-wide/2;
+ }
+ }
+ aside.sidebar {
+ width: $sidebar-width-wide - $sidebar-pad-wide*2;
+ padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
+ .collapse-sidebar & {
+ padding: { left: $pad-wide; right: $pad-wide; }
+ }
+ }
+}
+
+@if $indented-lists == false {
+ @media only screen and (min-width: 768px) {
+ ul, ol { margin-left: 0; }
+ }
+}
+
diff --git a/sass/base/_solarized.scss b/sass/base/_solarized.scss
new file mode 100644
index 00000000..45d8fc5e
--- /dev/null
+++ b/sass/base/_solarized.scss
@@ -0,0 +1,46 @@
+$base03: #002b36 !default; //darkest blue
+$base02: #073642 !default; //dark blue
+$base01: #586e75 !default; //darkest gray
+$base00: #657b83 !default; //dark gray
+$base0: #839496 !default; //medium gray
+$base1: #93a1a1 !default; //medium light gray
+$base2: #eee8d5 !default; //cream
+$base3: #fdf6e3 !default; //white
+$solar-yellow: #b58900 !default;
+$solar-orange: #cb4b16 !default;
+$solar-red: #dc322f !default;
+$solar-magenta: #d33682 !default;
+$solar-violet: #6c71c4 !default;
+$solar-blue: #268bd2 !default;
+$solar-cyan: #2aa198 !default;
+$solar-green: #859900 !default;
+
+$solarized: dark !default;
+
+@if $solarized == light {
+
+ $_base03: $base03;
+ $_base02: $base02;
+ $_base01: $base01;
+ $_base00: $base00;
+ $_base0: $base0;
+ $_base1: $base1;
+ $_base2: $base2;
+ $_base3: $base3;
+
+ $base03: $_base3;
+ $base02: $_base2;
+ $base01: $_base1;
+ $base00: $_base0;
+ $base0: $_base00;
+ $base1: $_base01;
+ $base2: $_base02;
+ $base3: $_base03;
+}
+
+/* non highlighted code colors */
+$pre-bg: $base03 !default;
+$pre-border: darken($base02, 5) !default;
+$pre-color: $base1 !default;
+
+
diff --git a/sass/base/_theme.scss b/sass/base/_theme.scss
new file mode 100644
index 00000000..c35136d5
--- /dev/null
+++ b/sass/base/_theme.scss
@@ -0,0 +1,85 @@
+$noise-bg: image-url('noise.png') top left !default;
+$img-border: inline-image('dotted-border.png') !default;
+
+// Main Link Colors
+$link-color: lighten(#165b94, 3) !default;
+$link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default;
+$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default;
+$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;
+
+// Main Section Colors
+$main-bg: #f8f8f8 !default;
+$page-bg: #252525 !default;
+$article-border: #eeeeee !default;
+
+$header-bg: #333 !default;
+$header-border: lighten($header-bg, 15) !default;
+$title-color: #f2f2f2 !default;
+$subtitle-color: #aaa !default;
+
+$text-color: #222 !default;
+$text-color-light: #aaa !default;
+$type-border: #ddd !default;
+
+/* Navigation */
+$nav-bg: #ccc !default;
+$nav-bg-front: image-url('noise.png') !default;
+$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)) !default;
+$nav-color: darken($nav-bg, 38) !default;
+$nav-color-hover: darken($nav-color, 25) !default;
+$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
+$nav-border: darken($nav-bg, 10) !default;
+$nav-border-top: lighten($nav-bg, 15) !default;
+$nav-border-bottom: darken($nav-bg, 25) !default;
+$nav-border-left: darken($nav-bg, 11) !default;
+$nav-border-right: lighten($nav-bg, 7) !default;
+
+/* Sidebar colors */
+$sidebar-bg: #f2f2f2 !default;
+$sidebar-link-color: $text-color !default;
+$sidebar-link-color-hover: $link-color-hover !default;
+$sidebar-link-color-active: $link-color-active !default;
+$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
+$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
+$sidebar-border-hover: darken($sidebar-bg, 7) !default;
+$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default;
+$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
+
+$footer-color: #888 !default;
+$footer-bg: #ccc !default;
+$footer-bg-front: image-url('noise.png') !default;
+$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)) !default;
+$footer-color: darken($footer-bg, 38) !default;
+$footer-color-hover: darken($footer-color, 10) !default;
+$footer-border-top: lighten($footer-bg, 15) !default;
+$footer-border-bottom: darken($footer-bg, 15) !default;
+$footer-link-color: darken($footer-bg, 38) !default;
+$footer-link-color-hover: darken($footer-color, 25) !default;
+$page-border-bottom: darken($footer-bg, 5) !default;
+
+
+/* Core theme application */
+
+a {
+ @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
+}
+aside.sidebar a {
+ @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
+}
+a {
+ @include transition(color .3s);
+}
+
+html {
+ background: $page-bg image-url('line-tile.png') top left;
+}
+body {
+ > div {
+ background: $sidebar-bg $noise-bg;
+ border-bottom: 1px solid $page-border-bottom;
+ > div {
+ background: $main-bg $noise-bg;
+ border-right: 1px solid $sidebar-border;
+ }
+ }
+}
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
new file mode 100644
index 00000000..9a6bbacd
--- /dev/null
+++ b/sass/base/_typography.scss
@@ -0,0 +1,164 @@
+$blockquote: $type-border !default;
+$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default;
+$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default;
+$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default;
+$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default;
+$header-title-font-family: $heading-font-family !default;
+$header-subtitle-font-family: $heading-font-family !default;
+
+// Fonts
+.heading {
+ font-family: $heading-font-family;
+}
+.sans { font-family: $sans; }
+.serif { font-family: $serif; }
+.mono { font-family: $mono; }
+
+body > header h1 {
+ font-size: 2.2em;
+ @extend .heading;
+ font-family: $header-title-font-family;
+ font-weight: normal;
+ line-height: 1.2em;
+ margin-bottom: 0.6667em;
+}
+body > header h2 {
+ font-family: $header-subtitle-font-family;
+}
+
+body {
+ line-height: 1.5em;
+ color: $text-color;
+ @extend .serif;
+}
+h1 {
+ font-size: 2.2em;
+ line-height: 1.2em;
+}
+
+@media only screen and (min-width: 992px) {
+ body { font-size: 1.15em; }
+ h1 { font-size: 2.6em; line-height: 1.2em; }
+}
+
+#{headings()}{
+ @extend .heading;
+ text-rendering: optimizelegibility;
+ margin-bottom: 1em;
+ font-weight: bold;
+}
+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, article blockquote, ul, ol { margin-bottom: 1.5em; }
+
+ul { list-style-type: disc;
+ ul { list-style-type: circle; margin-bottom: 0px;
+ ul { list-style-type: square; margin-bottom: 0px; }}}
+
+ol { list-style-type: decimal;
+ ol { list-style-type: lower-alpha; margin-bottom: 0px;
+ ol { list-style-type: lower-roman; margin-bottom: 0px; }}}
+
+ul, ol { &, ul, ol { margin-left: 1.3em; }}
+ul, ol { ul, ol { margin-bottom: 0em; }}
+
+strong { font-weight: bold; }
+
+em { font-style: italic; }
+
+sup, sub { font-size: 0.75em; position: relative; display: inline-block; padding: 0 .2em; line-height: .8em;}
+sup { top: -.5em; }
+sub { bottom: -.5em; }
+
+a[rev='footnote']{ font-size: .75em; padding: 0 .3em; line-height: 1; }
+
+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; }
+
+hr { margin-bottom: 0.2em; }
+
+small { font-size: .8em; }
+
+big { font-size: 1.2em; }
+
+article blockquote {
+ $bq-margin: 1.2em;
+ font-style: italic;
+ position: relative;
+ font-size: 1.2em;
+ line-height: 1.5em;
+ padding-left: 1em;
+ border-left: 4px solid rgba($text-color-light, .5);
+ cite {
+ font-style: italic;
+ a { color: $text-color-light !important; word-wrap: break-word; }
+ &:before { content: '\2014'; padding:{right: .3em; left: .3em;} color: $text-color-light; }
+ }
+ @media only screen and (min-width: 992px) {
+ padding-left: 1.5em;
+ border-left-width: 4px;
+ }
+}
+
+.pullquote-right:before,
+.pullquote-left:before {
+ /* Reset metrics. */
+ padding: 0;
+ border: none;
+
+ /* Content */
+ content: attr(data-pullquote);
+
+ /* Pull out to the right, modular scale based margins. */
+ float: right;
+ width: 45%;
+ margin: .5em 0 1em 1.5em;
+
+ /* Baseline correction */
+ position: relative;
+ top: 7px;
+ font-size: 1.4em;
+ line-height: 1.45em;
+}
+
+.pullquote-left:before {
+ /* Make left pullquotes align properly. */
+ float: left;
+ margin: .5em 1.5em 1em 0;
+}
+
+/* @extend this to force long lines of continuous text to wrap */
+.force-wrap {
+ white-space: -moz-pre-wrap;
+ white-space: -pre-wrap;
+ white-space: -o-pre-wrap;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
diff --git a/sass/base/_utilities.scss b/sass/base/_utilities.scss
new file mode 100644
index 00000000..2d49e659
--- /dev/null
+++ b/sass/base/_utilities.scss
@@ -0,0 +1,28 @@
+@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);
+ width: image-width($img);
+ height: image-height($img);
+}
+
+@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) {
+ @include border-radius($border-radius);
+ @include box-shadow($shadow);
+ @include box-sizing(border-box);
+ border: $border;
+}
+
+@mixin selection($bg, $color: inherit, $text-shadow: none){
+ * {
+ &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+ &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+ &::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+ }
+}
+
+@function text-color($color, $dark: dark, $light: light){
+ $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000;
+ $text-color: if($text-color >= 150, $dark, $light);
+ @return $text-color;
+}
+
diff --git a/sass/custom/_colors.scss b/sass/custom/_colors.scss
new file mode 100644
index 00000000..740266a8
--- /dev/null
+++ b/sass/custom/_colors.scss
@@ -0,0 +1,43 @@
+// Here you can easily change your sites's color scheme.
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
+// If you need a handy color picker try http://hslpicker.com
+
+//$header-bg: #263347;
+//$subtitle-color: lighten($header-bg, 58);
+//$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
+//$nav-bg-front: image-url('noise.png');
+//$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11));
+//$sidebar-bg: desaturate(#eceff5, 8);
+//$sidebar-link-color: saturate(#526f9a, 10);
+//$sidebar-link-color-hover: darken(#7ab662, 9);
+//$footer-bg: #ccc !default;
+//$footer-bg-front: image-url('noise.png');
+//$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11));
+
+
+/* To use the light Solarized highlighting theme uncomment the following line */
+//$solarized: light;
+
+/* If you want to tweak the Solarized colors you can do that here */
+//$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
+//$solar-yellow: #b58900;
+//$solar-orange: #cb4b16;
+//$solar-red: #dc322f;
+//$solar-magenta: #d33682;
+//$solar-violet: #6c71c4;
+//$solar-blue: #268bd2;
+//$solar-cyan: #2aa198;
+//$solar-green: #859900;
+
+
+/* Non highlighted code colors */
+//$pre-bg: $base03;
+//$pre-border: darken($base02, 5);
+//$pre-color: $base1;
diff --git a/sass/custom/_fonts.scss b/sass/custom/_fonts.scss
new file mode 100644
index 00000000..1a6b2a06
--- /dev/null
+++ b/sass/custom/_fonts.scss
@@ -0,0 +1,10 @@
+// Here you can easily change font faces which are used in your site.
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's.
+// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html
+
+//$sans: "Optima", sans-serif;
+//$serif: "Baskerville", serif;
+//$mono: "Courier", monospace;
+//$heading-font-family: "Verdana", sans-serif;
+//$header-title-font-family: "Futura", sans-serif;
+//$header-subtitle-font-family: "Futura", sans-serif;
diff --git a/sass/custom/_layout.scss b/sass/custom/_layout.scss
new file mode 100644
index 00000000..74c7de9d
--- /dev/null
+++ b/sass/custom/_layout.scss
@@ -0,0 +1,21 @@
+// Here you can easily change your sites's layout.
+// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.
+
+//$header-font-size: 1em;
+//$header-padding-top: 1.5em;
+//$header-padding-bottom: 1.5em;
+
+//$max-width: 1350px;
+//$indented-lists: true;
+
+// Padding used for layout margins
+//$pad-min: 18px;
+//$pad-narrow: 25px;
+//$pad-medium: 35px;
+//$pad-wide: 55px;
+
+// Sidebar widths used in media queries
+//$sidebar-width-medium: 240px;
+//$sidebar-pad-medium: 15px;
+//$sidebar-pad-wide: 20px;
+//$sidebar-width-wide: 300px;
diff --git a/sass/custom/_styles.scss b/sass/custom/_styles.scss
new file mode 100644
index 00000000..91ffcccf
--- /dev/null
+++ b/sass/custom/_styles.scss
@@ -0,0 +1,2 @@
+// This File is imported last, and will override other styles in the cascade
+// Add styles here to make changes without digging in too much
diff --git a/sass/partials/_archive.scss b/sass/partials/_archive.scss
new file mode 100644
index 00000000..9ef1e824
--- /dev/null
+++ b/sass/partials/_archive.scss
@@ -0,0 +1,72 @@
+#archive {
+ #content > div { &, > article { padding-top: 0; } }
+}
+#blog-archives {
+ article {
+ padding: 1em 0 1em;
+ position: relative;
+ background: $img-border bottom left repeat-x;
+ &:last-child {
+ background: none;
+ }
+ footer { padding: 0; margin: 0;}
+ }
+ h1 { color: $text-color; margin-bottom: .3em; }
+ h2 { display: none; }
+ h1 {
+ font-size: 1.5em;
+ a {
+ @include hover-link;
+ color: inherit;
+ &:hover { color: $link-color-hover; }
+ font-weight: normal;
+ display: inline-block;
+ }
+ }
+ a.category, time {
+ @extend .sans;
+ color: $text-color-light;
+ }
+ color: $text-color-light;
+ .entry-content { display: none; }
+ time {
+ font-size: .9em;
+ line-height: 1.2em;
+ .month, .day { display: inline-block; }
+ .month { text-transform: uppercase; }
+ }
+ p { margin-bottom: 1em; }
+ &, .entry-content { a { @include link-colors(inherit, $link-color-hover); }}
+ a:hover { color: $link-color-hover; }
+ @media only screen and (min-width: 550px) {
+ article { margin-left: 5em; }
+ h2 {
+ margin-bottom: .3em;
+ font-weight: normal;
+ display: inline-block;
+ position: relative; top: -1px;
+ float: left;
+ &:first-child { padding-top: .75em; }
+ }
+ time {
+ position: absolute;
+ text-align: right;
+ left: 0em;
+ top: 1.8em;
+ }
+ .year { display: none; }
+ article {
+ padding:{left: 4.5em; bottom: .7em;}
+ }
+ a.category {
+ line-height: 1.1em;
+ }
+ }
+}
+#content > .category {
+ article {
+ margin-left: 0;
+ padding-left: 6.8em;
+ }
+ .year { display: inline; }
+}
diff --git a/sass/partials/_blog.scss b/sass/partials/_blog.scss
new file mode 100644
index 00000000..57fe7a8a
--- /dev/null
+++ b/sass/partials/_blog.scss
@@ -0,0 +1,141 @@
+article {
+ padding-top: 1em;
+ a { @extend .force-wrap; }
+ header {
+ position: relative;
+ padding-top: 2em;
+ padding-bottom: 1em;
+ margin-bottom: 1em;
+ background: $img-border bottom left repeat-x;
+ h1 {
+ margin: 0;
+ a { text-decoration: none;
+ &:hover { text-decoration: underline; } }
+ }
+ p {
+ font-size: .9em;
+ color: $text-color-light;
+ margin: 0;
+ &.meta {
+ @extend .sans;
+ text-transform: uppercase;
+ position: absolute; top: 0;
+ }
+ }
+ @media only screen and (min-width: 768px) {
+ margin-bottom: 1.5em;
+ padding-bottom: 1em;
+ background: $img-border bottom left repeat-x;
+ }
+ }
+ h2 {
+ padding-top: 0.8em;
+ background: $img-border top left repeat-x;
+ }
+ .entry-content & h2:first-child, header + h2 { padding-top: 0; }
+ h2:first-child, header + h2 { background: none; }
+ .feature {
+ padding-top: .5em;
+ margin-bottom: 1em;
+ padding-bottom: 1em;
+ background: $img-border bottom left repeat-x;
+ font-size: 2.0em; font-style: italic;
+ line-height: 1.3em;
+ }
+ img, video, .flash-video {
+ @extend .flex-content;
+ @extend .basic-alignment;
+ @include shadow-box;
+ }
+ video, .flash-video { margin: 0 auto 1.5em; }
+ video { display: block; width: 100%; }
+ .flash-video {
+ > div {
+ position: relative;
+ display: block;
+ padding-bottom: 56.25%;
+ padding-top: 1px;
+ height: 0;
+ overflow: hidden;
+ iframe, object, embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ > footer {
+ padding-bottom: 2.5em;
+ margin-top: 2em;
+ @extend .sans;
+ p.meta {
+ margin-bottom: .8em;
+ font-size: .85em;
+ clear: both;
+ overflow: hidden;
+ }
+ .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
+ @extend .separator;
+ }
+ }
+
+}
+article + article {
+ .blog-index & {
+ background: $img-border top left repeat-x;
+ }
+}
+#content .blog-index {
+ padding: { top: 0; bottom: 0; }
+ article { padding-top: 2em; }
+ article header { background: none; padding-bottom: 0; }
+ article h1 {
+ font-size: 2.2em;
+ a { color: inherit; &:hover { color: $link-color-hover; } }
+ }
+ a[rel=full-article] {
+ background: darken($main-bg, 5);
+ display: inline-block;
+ padding: .4em .8em;
+ margin-right: .5em;
+ text-decoration: none;
+ color: mix($text-color, $text-color-light);
+ @extend .serif;
+ @include transition(background-color .5s);
+ &:hover {
+ background: $link-color-hover;
+ text-shadow: none;
+ color: $main-bg;
+ }
+ }
+ footer {
+ @extend .sans;
+ margin-top: 1em;
+ }
+}
+
+.separator {
+ content: "\2022 ";
+ padding: 0 .4em 0 .2em;
+ display: inline-block;
+}
+
+#content div.pagination {
+ text-align: center;
+ font-size: .95em;
+ position: relative;
+ background: $img-border top left repeat-x;
+ padding: {top: 1.5em; bottom: 1.5em;}
+ a {
+ text-decoration: none;
+ color: $text-color-light;
+ &.prev { position: absolute; left: 0; }
+ &.next { position: absolute; right: 0; }
+ &:hover { color: $link-color-hover; }
+ &[href*=archive] {
+ &:before, &:after { content: '\2014'; padding: 0 .3em; }
+ }
+ }
+}
diff --git a/sass/partials/_footer.scss b/sass/partials/_footer.scss
new file mode 100644
index 00000000..37411225
--- /dev/null
+++ b/sass/partials/_footer.scss
@@ -0,0 +1,19 @@
+body > footer {
+ @extend .sans;
+ font-size: .8em;
+ color: $footer-color;
+ text-shadow: lighten($footer-bg, 5) 0 1px;
+ background-color: $footer-bg;
+ @include background($footer-bg-front, $footer-bg-back);
+ border-top: 1px solid $footer-border-top;
+ position: relative;
+ padding-top: 1em;
+ padding-bottom: 1em;
+ margin-bottom: 3em;
+ @include border-bottom-radius(.4em);
+ z-index: 1;
+ a {
+ @include link-colors($footer-link-color, $footer-link-color-hover, $visited: $footer-link-color);
+ }
+ p:last-child { margin-bottom: 0; }
+}
diff --git a/sass/partials/_header.scss b/sass/partials/_header.scss
new file mode 100644
index 00000000..e3c6c020
--- /dev/null
+++ b/sass/partials/_header.scss
@@ -0,0 +1,18 @@
+body > header {
+ background: $header-bg;
+ h1 {
+ display: inline-block;
+ margin: 0;
+ a, a:visited, a:hover {
+ color: $title_color;
+ text-decoration: none;
+ }
+ }
+ h2 {
+ margin: .2em 0 0;
+ @extend .sans;
+ font-size: 1em;
+ color: $subtitle-color;
+ font-weight: normal;
+ }
+}
diff --git a/sass/partials/_navigation.scss b/sass/partials/_navigation.scss
new file mode 100644
index 00000000..30fa011d
--- /dev/null
+++ b/sass/partials/_navigation.scss
@@ -0,0 +1,137 @@
+body > nav {
+ position: relative;
+ background-color: $nav-bg;
+ @include background($nav-bg-front, $nav-bg-back);
+ border: {
+ top: 1px solid $nav-border-top;
+ bottom: 1px solid $nav-border-bottom; }
+ padding-top: .35em;
+ padding-bottom: .35em;
+ form {
+ @include background-clip(padding-box);
+ margin: 0; padding: 0;
+ .search {
+ padding: .3em .5em 0;
+ font-size: .85em;
+ font-family: $sans;
+ line-height: 1.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=search]{ float: right; width: 48%; }
+ fieldset.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;
+ display: block;
+ padding-top: .15em;
+ }
+ ul.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);
+ font-family: $sans;
+ text-shadow: lighten($nav-bg, 12) 0 1px;
+ float: left;
+ text-decoration: none;
+ font-size: 1.1em;
+ 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;
+ }
+ }
+ form {
+ float: right;
+ text-align: left;
+ padding-left: .8em;
+ width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 20px;
+ .search {
+ width: 93%;
+ font-size: .95em;
+ line-height: 1.2em;
+ }
+ }
+ ul[data-subscription$=email] + form {
+ width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px;
+ .search { width: 91%; }
+ }
+ fieldset.mobile-nav { display: none; }
+ fieldset[role=search]{ width: 99%; }
+ }
+ @media only screen and (min-width: 992px) {
+ form {
+ width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px;
+ }
+ ul[data-subscription$=email] + form {
+ width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px;
+ }
+ }
+}
+.no-placeholder {
+ body > nav .search {
+ background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat;
+ text-indent: 1.3em;
+ }
+}
+@mixin mask-subscription-nav($feed: 'rss.png'){
+ position: relative; top: 0px;
+ text-indent: -999999em;
+ background-color: $nav-border-right;
+ border: 0;
+ padding: 0;
+ &,&:after { @include mask-image($feed); }
+ &:after {
+ content: "";
+ position: absolute; top: -1px; left: 0;
+ background-color: lighten($nav-color, 25);
+ }
+ &:hover:after { background-color: lighten($nav-color, 20); }
+}
+.maskImage {
+ body > nav {
+ @media only screen and (min-width: 550px) {
+ ul[data-subscription$=email] + form {
+ width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px;
+ }
+ }
+ @media only screen and (min-width: 992px) {
+ ul[data-subscription$=email] + form {
+ width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px;
+ }
+ }
+ }
+ ul.subscription { position: relative; top: .2em; li, a { border: 0; padding: 0; }}
+ a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
+ a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
+}
+
diff --git a/sass/partials/_sharing.scss b/sass/partials/_sharing.scss
new file mode 100644
index 00000000..3eecb488
--- /dev/null
+++ b/sass/partials/_sharing.scss
@@ -0,0 +1,8 @@
+.sharing {
+ p.meta + & {
+ padding: { top: 1em; left: 0; }
+ background: $img-border top left repeat-x;
+ }
+}
+
+#fb-root { display: none; }
diff --git a/sass/partials/_sidebar.scss b/sass/partials/_sidebar.scss
new file mode 100644
index 00000000..cd8c1ca2
--- /dev/null
+++ b/sass/partials/_sidebar.scss
@@ -0,0 +1,4 @@
+@import "sidebar/base";
+@import "sidebar/googleplus";
+@import "sidebar/pinboard";
+@import "sidebar/delicious";
diff --git a/sass/partials/_syntax.scss b/sass/partials/_syntax.scss
new file mode 100644
index 00000000..5465286f
--- /dev/null
+++ b/sass/partials/_syntax.scss
@@ -0,0 +1,261 @@
+.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
+ table td.code { width: 100%; }
+ border: 1px solid $pre-border !important;
+}
+.highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers {
+ text-align: right;
+ font-size: 13px;
+ line-height: 1.45em;
+ @if $solarized == light {
+ background: lighten($base03, 1) $noise-bg !important;
+ border-right: 1px solid darken($base02, 2) !important;
+ @include box-shadow(lighten($base03, 2) -1px 0 inset);
+ text-shadow: lighten($base02, 2) 0 -1px;
+ } @else {
+ background: $base02 $noise-bg !important;
+ border-right: 1px solid darken($base03, 2) !important;
+ @include box-shadow(lighten($base02, 2) -1px 0 inset);
+ text-shadow: darken($base02, 10) 0 -1px;
+ }
+ span { color: $base01 !important; }
+ padding: .8em !important;
+ @include border-radius(0);
+}
+
+figure.code, .gist-file, pre {
+ @include box-shadow(rgba(#000, .06) 0 0 10px);
+ .highlight pre { @include box-shadow(none); }
+}
+
+.gist .highlight, figure.code .highlight {
+ @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
+}
+html .gist .gist-file {
+ margin-bottom: 1.8em;
+ position: relative;
+ border: none;
+ padding-top: image-height("code_bg.png") !important;
+ .highlight {
+ margin-bottom: 0;
+ }
+ .gist-syntax {
+ border-bottom: 0 !important;
+ background: none !important;
+ .gist-highlight {
+ background: $base03 !important;
+ }
+ .highlight pre {
+ @extend .pre-code;
+ padding: 0;
+ }
+ }
+ .gist-meta {
+ padding: .6em 0.8em;
+ border: 1px solid lighten($base02, 2) !important;
+ color: $base01;
+ font-size: .7em !important;
+ @if $solarized == light {
+ background: lighten($base03, 2) $noise-bg;
+ border: 1px solid $pre-border !important;
+ border-top: 1px solid lighten($base03, 2) !important;
+ } @else {
+ background: $base02 $noise-bg;
+ }
+ @extend .sans;
+ line-height: 1.5em;
+ a {
+ color: mix($base1, $base01) !important;
+ @include hover-link;
+ &:hover { color: $base1 !important; }
+ }
+ a[href*='#file'] {
+ position: absolute; top: 0; left:0; right:-10px;
+ color: #474747 !important;
+ @extend .code-title;
+ &:hover { color: $link-color !important; }
+ }
+ a[href*=raw]{
+ @extend .download-source;
+ top: .4em;
+ }
+ }
+}
+pre {
+ background: $pre-bg $noise-bg;
+ @include border-radius(.4em);
+ @extend .mono;
+ border: 1px solid $pre-border;
+ line-height: 1.45em;
+ font-size: 13px;
+ margin-bottom: 2.1em;
+ padding: .8em 1em;
+ color: $pre-color;
+ overflow: auto;
+}
+h3.filename {
+ @extend .code-title;
+ + pre { @include border-top-radius(0px); }
+}
+
+p, li {
+ code {
+ @extend .mono;
+ display: inline-block;
+ white-space: no-wrap;
+ background: #fff;
+ font-size: .8em;
+ line-height: 1.5em;
+ color: #555;
+ border: 1px solid #ddd;
+ @include border-radius(.4em);
+ padding: 0 .3em;
+ margin: -1px 0;
+ }
+ pre code { font-size: 1em !important; background: none; border: none; }
+}
+
+.pre-code {
+ font-family: $mono !important;
+ overflow: scroll;
+ overflow-y: hidden;
+ display: block;
+ padding: .8em;
+ overflow-x: auto;
+ line-height: 1.45em;
+ background: $base03 $noise-bg !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: $solar-red !important; background: none !important; } /* Error */
+ .k { color: $solar-orange !important; } /* Keyword */
+ .o { color: $base1 !important; font-weight: bold !important; } /* Operator */
+ .p { color: $base1 !important; } /* Operator */
+ .ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */
+ .gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */
+ .gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-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($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */
+ .gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-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: $solar-violet !important; } /* Generic.Subheading */
+ //.gt { color: #aa0000 } /* Generic.Traceback */
+ .kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */
+ .kd { color: $solar-blue !important; } /* Keyword.Declaration */
+ .kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */
+ .kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */
+ .kt { color: $solar-cyan !important; } /* Keyword.Type */
+ .n { color: $solar-blue !important; }
+ .na { color: $solar-blue !important; } /* Name.Attribute */
+ .nb { color: $solar-green !important; } /* Name.Builtin */
+ .nc { color: $solar-magenta !important;} /* Name.Class */
+ .no { color: $solar-yellow !important; } /* Name.Constant */
+ //.ni { color: #800080 } /* Name.Entity */
+ .nl { color: $solar-green !important; }
+ .ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */
+ .nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */
+ .nn { color: $solar-yellow !important; } /* Name.Namespace */
+ .nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */
+ .nx { color: $solar-yellow !Important; }
+ //.bp { color: #999999 } /* Name.Builtin.Pseudo */
+ //.vc { color: #008080 } /* Name.Variable.Class */
+ .vg { color: $solar-blue !important; } /* Name.Variable.Global */
+ .vi { color: $solar-blue !important; } /* Name.Variable.Instance */
+ .nv { color: $solar-blue !important; } /* Name.Variable */
+ //.w { color: #bbbbbb } /* Text.Whitespace */
+ .mf { color: $solar-cyan !important; } /* Literal.Number.Float */
+ .m { color: $solar-cyan !important; } /* Literal.Number */
+ .mh { color: $solar-cyan !important; } /* Literal.Number.Hex */
+ .mi { color: $solar-cyan !important; } /* Literal.Number.Integer */
+ //.mo { color: #009999 } /* Literal.Number.Oct */
+ .s { color: $solar-cyan !important; } /* Literal.String */
+ //.sb { color: #d14 } /* Literal.String.Backtick */
+ //.sc { color: #d14 } /* Literal.String.Char */
+ .sd { color: $solar-cyan !important; } /* Literal.String.Doc */
+ .s2 { color: $solar-cyan !important; } /* Literal.String.Double */
+ .se { color: $solar-red !important; } /* Literal.String.Escape */
+ //.sh { color: #d14 } /* Literal.String.Heredoc */
+ .si { color: $solar-blue !important; } /* Literal.String.Interpol */
+ //.sx { color: #d14 } /* Literal.String.Other */
+ .sr { color: $solar-cyan !important; } /* Literal.String.Regex */
+ .s1 { color: $solar-cyan !important; } /* Literal.String.Single */
+ //.ss { color: #990073 } /* Literal.String.Symbol */
+ //.il { color: #009999 } /* Literal.Number.Integer.Long */
+ div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }}
+}
+
+.highlight, .gist-highlight {
+ pre { background: none; @include border-radius(0px); border: none; padding: 0; margin-bottom: 0; }
+ margin-bottom: 1.8em;
+ background: $base03;
+ overflow-y: hidden;
+ overflow-x: auto;
+}
+
+$solar-scroll-bg: rgba(#fff, .15);
+$solar-scroll-thumb: rgba(#fff, .2);
+@if $solarized == light {
+ $solar-scroll-bg: rgba(#000, .15);
+ $solar-scroll-thumb: rgba(#000, .15);
+}
+
+pre, .highlight, .gist-highlight {
+ &::-webkit-scrollbar { height: .5em; background: $solar-scroll-bg; }
+ &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px }
+}
+
+.highlight code {
+ @extend .pre-code; background: #000;
+}
+figure.code {
+ background: none;
+ padding: 0;
+ border: 0;
+ margin-bottom: 1.5em;
+ pre { margin-bottom: 0; }
+ figcaption {
+ position: relative;
+ @extend .code-title;
+ a { @extend .download-source; }
+ }
+ .highlight {
+ margin-bottom: 0;
+ }
+}
+
+.code-title {
+ text-align: center;
+ font-size: 13px;
+ line-height: 2em;
+ text-shadow: #cbcccc 0 1px 0;
+ color: #474747;
+ font-weight: 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;
+}
+
+.download-source {
+ position: absolute; right: .8em;
+ @include hover-link;
+ color: #666 !important;
+ z-index: 1;
+ font-size: 13px;
+ text-shadow: #cbcccc 0 1px 0;
+ padding-left: 3em;
+}
diff --git a/sass/partials/sidebar/_base.scss b/sass/partials/sidebar/_base.scss
new file mode 100644
index 00000000..5441304e
--- /dev/null
+++ b/sass/partials/sidebar/_base.scss
@@ -0,0 +1,106 @@
+.side-shadow-border {
+ @include box-shadow(lighten($sidebar-bg, 5) 0 1px);
+}
+aside.sidebar {
+ overflow: hidden;
+ color: $sidebar-color;
+ text-shadow: lighten($sidebar-bg, 8) 0 1px;
+ a { @extend .force-wrap; }
+ section {
+ @extend .sans;
+ font-size: .8em;
+ line-height: 1.4em;
+ 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;
+ }
+ }
+ }
+ img {
+ @extend .flex-content;
+ @extend .basic-alignment;
+ @include shadow-box($border: #fff .3em solid);
+ }
+ ul {
+ margin-bottom: 0.5em;
+ margin-left: 0;
+ }
+ 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 {
+ color: $sidebar-link-color;
+ &:hover { color: $sidebar-link-color-hover; }
+ }
+}
+.aside-alt-link {
+ color: $sidebar-link-color-subdued;
+ &:hover {
+ color: $sidebar-link-color-subdued-hover;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .toggle-sidebar {
+ outline: none;
+ position: absolute; right: -10px; top: 0; bottom: 0;
+ display: inline-block;
+ text-decoration: none;
+ color: mix($text-color-light, $sidebar-bg);
+ width: 9px;
+ cursor: pointer;
+ &:hover {
+ background: mix($sidebar-border, $sidebar-bg);
+ @include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0)));
+ }
+ &:after {
+ position: absolute; right: -11px; top: 0;
+ width: 20px;
+ font-size: 1.2em;
+ line-height: 1.1em;
+ padding-bottom: .15em;
+ @include border-bottom-right-radius(.3em);
+ text-align: center;
+ background: $main-bg $noise-bg;
+ border-bottom: 1px solid $sidebar-border;
+ border-right: 1px solid $sidebar-border;
+ content: "\00BB";
+ text-indent: -1px;
+ }
+ .collapse-sidebar & {
+ text-indent: 0px;
+ right: -20px;
+ width: 19px;
+ &:hover {
+ background: mix($sidebar-border, $sidebar-bg);
+ }
+ &:after {
+ border-left: 1px solid $sidebar-border;
+ text-shadow: #fff 0 1px;
+ content: "\00AB";
+ left: 0px; right: 0;
+ text-align: center;
+ text-indent: 0;
+ border: 0;
+ border-right-width: 0;
+ background: none;
+ }
+ }
+ }
+}
diff --git a/sass/partials/sidebar/_delicious.scss b/sass/partials/sidebar/_delicious.scss
new file mode 100644
index 00000000..e962702e
--- /dev/null
+++ b/sass/partials/sidebar/_delicious.scss
@@ -0,0 +1,4 @@
+.delicious-posts {
+ a.delicious-link { margin-bottom: .5em; display: block; }
+ p { font-size: 1em; }
+}
diff --git a/sass/partials/sidebar/_googleplus.scss b/sass/partials/sidebar/_googleplus.scss
new file mode 100644
index 00000000..c2a693ee
--- /dev/null
+++ b/sass/partials/sidebar/_googleplus.scss
@@ -0,0 +1,26 @@
+.googleplus {
+ h1 {
+ -moz-box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ -o-box-shadow: none !important;
+ box-shadow: none !important;
+ border-bottom: 0px none !important;
+ }
+ a {
+ text-decoration: none;
+ white-space: normal !important;
+ line-height: 32px;
+
+ img {
+ float: left;
+ margin-right: 0.5em;
+ border: 0 none;
+ }
+ }
+}
+
+.googleplus-hidden {
+ position: absolute;
+ top: -1000em;
+ left: -1000em;
+}
diff --git a/sass/partials/sidebar/_pinboard.scss b/sass/partials/sidebar/_pinboard.scss
new file mode 100644
index 00000000..9f9ab461
--- /dev/null
+++ b/sass/partials/sidebar/_pinboard.scss
@@ -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: ''; }
+ }
+}
diff --git a/sass/plugins/_plugins.scss b/sass/plugins/_plugins.scss
new file mode 100644
index 00000000..3b4ba0b8
--- /dev/null
+++ b/sass/plugins/_plugins.scss
@@ -0,0 +1,6 @@
+/*
+ Add plugin stylesheets to this directory and they will be automatically
+ Imported. Load order is alphabetical and styles can be overriden in
+ custom/_style.scss which is loaded after all plugin stylesheets.
+*/
+
diff --git a/sass/screen.scss b/sass/screen.scss
new file mode 100644
index 00000000..75eac0a2
--- /dev/null
+++ b/sass/screen.scss
@@ -0,0 +1,10 @@
+@import "compass";
+@include global-reset;
+
+@import "custom/colors";
+@import "custom/fonts";
+@import "custom/layout";
+@import "base";
+@import "partials";
+@import "plugins/**/*";
+@import "custom/styles";
--
cgit v1.2.1