octopress 3.0.0.alpha1

data/.themes/classic/assets/stylesheets/base/_utilities.scss

@@ -0,0 +1,27 @@
+@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;
+}

data/.themes/classic/assets/stylesheets/custom/_colors.scss

@@ -0,0 +1,49 @@
+/*
+  Here you can easily change your site's color scheme.
+  To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
+  Look at sass/base/_theme.scss for more colors you tweak (override them in this file)
+
+  For a handy color picker try http://hslpicker.com */
+
+//$header-bg: #263347;
+//$subtitle-color: lighten($header-bg, 58);
+//$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
+//$sidebar-bg: desaturate(#eceff5, 8);
+//$sidebar-link-color: saturate(#526f9a, 10);
+//$sidebar-link-color-hover: darken(#7ab662, 9);
+
+
+/* To use the dark code highlighting theme uncomment the following line */
+
+//$solarized: dark;
+
+/* To adjust the background color uncomment and edit the following line */
+/* If you intend to use a dark background, uncomment $solarized: dark; above*/
+
+//$pre-bg: #252525;
+
+/* To change the color of the code markers, uncomment and change the following lines */
+
+//$marker:        rgba(#00baff, .5);
+//$marker-bg:     rgba($marker, .03);
+//$marker-border: rgba($marker, .13);
+//$marker-border-left:   $marker;
+
+/* For fine control over the syntax highlighting colors edit 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;

data/.themes/classic/assets/stylesheets/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;

data/.themes/classic/assets/stylesheets/custom/_layout.scss

@@ -0,0 +1,17 @@
+// 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.
+
+$max-width: 1069px;
+//$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;

data/.themes/classic/assets/stylesheets/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

data/.themes/classic/assets/stylesheets/partials/_archive.scss

@@ -0,0 +1,77 @@
+#archive {
+  #content > div { &, > article { padding-top: 0; } }
+}
+#blog-archives {
+  color: $text-color-light;
+  article {
+    padding: 1em 0 1em;
+    position: relative;
+    background: $img-border bottom left repeat-x;
+    &:last-child {
+      background: none;
+    }
+    footer {
+      padding: 0; margin: 0;
+      font-size: .85em;
+      line-height: 1em;
+    }
+  }
+  h2 { display: none; }
+  .entry-title {
+    color: $text-color; margin-bottom: .3em;
+    font-size: $h3;
+    a {
+      @include hover-link;
+      &:hover { color: $link-color-hover; }
+      font-weight: normal;
+      display: inline-block;
+    }
+  }
+  article[data-linklog] .entry-title {
+    font-size: $h4;
+    a { text-decoration: underline; }
+  }
+  a.category, time {
+    @extend .sans;
+    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; }
+  a:hover { color: $link-color-hover; }
+
+  @media only screen and (min-width: 550px) {
+    article {
+      padding: { left: 4.5em; bottom: .7em;}
+      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; }
+    a.category { line-height: 1.1em; }
+  }
+}
+#content > .category {
+  article {
+    margin-left: 0;
+    padding-left: 6.8em;
+  }
+  .year { display: inline; }
+}

data/.themes/classic/assets/stylesheets/partials/_blog.scss

@@ -0,0 +1,165 @@
+#content .blog-index {
+  padding: { top: 0; bottom: 0; }
+  article { padding-top: 2em; }
+}
+
+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;
+    @media only screen and (min-width: 768px) {
+      margin-bottom: 1.5em;
+      padding-bottom: 1em;
+      background: $img-border bottom left repeat-x;
+    }
+    .blog-index & { background: none; padding-bottom: 0; }
+    p {
+      font-size: .8em;
+      margin: 0;
+      color: $text-color-light;
+      &.meta { @extend .sans; position: absolute; top: 0; }
+    }
+    time { text-transform: uppercase; }
+  }
+  .entry-title {
+    margin: 0;
+    a { text-decoration: none;
+      &:hover { text-decoration: underline; }
+    }
+    .blog-index & {
+      font-size: $h1;
+      a { color: inherit; &:hover { color: $link-color-hover; } }
+    }
+  }
+
+  a[rel=bookmark] { text-decoration: none; }
+
+  h2 {
+    padding-top: 0.8em;
+    background: $img-border top left repeat-x;
+  }
+  h2:first-child, header + h2 { background: none; }
+
+  .entry-content & h2:first-child, header + h2 { padding-top: 0; }
+
+  &.linklog {
+    .entry-title {
+      font-size: $h1;
+      a { text-decoration: underline; }
+    }
+    .blog-index & .entry-title { font-size: $h2; }
+  }
+
+  .linklog-marker {
+    color: $text-color-light;
+    font-size: .8em;
+    line-height: 1em;
+    position: relative; top: -.15em;
+  }
+
+  > footer {
+    @extend .sans;
+    padding-bottom: 2.5em;
+    margin-top: 2em;
+    .blog-index & { margin-top: 1em; }
+  }
+  footer {
+    .meta {
+      margin-bottom: .8em;
+      font-size: .85em;
+      clear: both;
+      overflow: hidden;
+    }
+    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
+      @extend .separator;
+    }
+    p:last-child { margin-bottom: 0; }
+    .comments-link {
+      font-size: .8em;
+      color: inherit;
+      &:hover, &:focus { 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;
+    }
+  }
+
+  .blog-index & + article {
+    background: $img-border top left repeat-x;
+  }
+
+  .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-top: 1px;
+      height: 0;
+      overflow: hidden;
+      iframe, object, embed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.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; }
+    }
+  }
+}

data/.themes/classic/assets/stylesheets/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; }
+}

data/.themes/classic/assets/stylesheets/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;
+  }
+}

data/.themes/classic/assets/stylesheets/partials/_navigation.scss

@@ -0,0 +1,136 @@
+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'); }
+}