Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

We’re showing branches in this repository, but you can also compare across forks.

base fork: mikegao/mikegao.github.com
base: 7bdd9e2a28
...
head fork: mikegao/mikegao.github.com
compare: f693d22d4c
  • 2 commits
  • 68 files changed
  • 0 commit comments
  • 1 contributor
Showing with 2,080 additions and 691 deletions.
  1. +1 −0  .themes/slash
  2. +3 −3 _config.yml
  3. +4 −4 sass/_base.scss
  4. +9 −0 sass/_parts.scss
  5. +1 −0  sass/_plugins.scss
  6. +7 −0 sass/base/_color.scss
  7. +17 −0 sass/base/_font.scss
  8. +49 −192 sass/base/_layout.scss
  9. +1 −136 sass/base/_typography.scss
  10. +21 −25 sass/base/_utilities.scss
  11. +7 −0 sass/custom/_color.scss
  12. +73 −0 sass/parts/_archive.scss
  13. +141 −0 sass/parts/_article.scss
  14. +10 −0 sass/parts/_comment.scss
  15. +6 −0 sass/parts/_footer.scss
  16. +395 −0 sass/parts/_header.scss
  17. +43 −0 sass/parts/_index.scss
  18. +43 −0 sass/parts/_post.scss
  19. +387 −0 sass/parts/_syntax.scss
  20. +49 −0 sass/parts/_twitter.scss
  21. +228 −0 sass/plugins/_fancybox.scss
  22. +4 −7 sass/screen.scss
  23. +4 −4 source/_includes/after_footer.html
  24. +19 −8 source/_includes/archive_post.html
  25. +23 −25 source/_includes/article.html
  26. +15 −0 source/_includes/banner.html
  27. +0 −3  source/_includes/custom/after_footer.html
  28. +6 −4 source/_includes/custom/footer.html
  29. +0 −3  source/_includes/custom/head.html
  30. +0 −6 source/_includes/custom/header.html
  31. +3 −3 source/_includes/custom/navigation.html
  32. +6 −0 source/_includes/fancybox.html
  33. +1 −1  source/_includes/footer.html
  34. +10 −10 source/_includes/google_analytics.html
  35. +17 −26 source/_includes/head.html
  36. +55 −0 source/_includes/header.html
  37. +1 −15 source/_includes/navigation.html
  38. +5 −7 source/_includes/post/categories.html
  39. +14 −10 source/_includes/post/sharing.html
  40. +2 −12 source/_layouts/category_index.html
  41. +10 −11 source/_layouts/default.html
  42. +11 −34 source/_layouts/page.html
  43. +8 −36 source/_layouts/post.html
  44. +4 −14 source/blog/archives/index.html
  45. BIN  source/font/fontawesome-webfont.eot
  46. +175 −0 source/font/fontawesome-webfont.svg
  47. BIN  source/font/fontawesome-webfont.svgz
  48. BIN  source/font/fontawesome-webfont.ttf
  49. BIN  source/font/fontawesome-webfont.woff
  50. BIN  source/images/fancybox/blank.gif
  51. BIN  source/images/fancybox/fancybox_loading.gif
  52. BIN  source/images/fancybox/fancybox_sprite.png
  53. BIN  source/images/loading_gray.gif
  54. BIN  source/images/loading_pacman.gif
  55. BIN  source/images/social/coderwall.png
  56. BIN  source/images/social/delicious.png
  57. BIN  source/images/social/facebook.png
  58. BIN  source/images/social/github.png
  59. BIN  source/images/social/google.png
  60. BIN  source/images/social/linkedin.png
  61. BIN  source/images/social/pinboard.png
  62. BIN  source/images/social/pinterest.png
  63. BIN  source/images/social/rss.png
  64. BIN  source/images/social/twitter.png
  65. +12 −23 source/index.html
  66. +35 −0 source/javascripts/jquery.fancybox.pack.js
  67. +62 −0 source/javascripts/slash.js
  68. +83 −69 source/javascripts/twitter.js
1  .themes/slash
@@ -0,0 +1 @@
+Subproject commit 2cc927dd8c198e7fa0de977e9143c317be16b08b
6 _config.yml
View
@@ -3,9 +3,9 @@
# ----------------------- #
url: http://mikegao.github.com
-title: My Octopress Blog
-subtitle: A blogging framework for hackers.
-author: Your Name
+title: Mike Tech
+subtitle:
+author: Mike Gao
simple_search: http://google.com/search
description:
8 sass/_base.scss
View
@@ -1,5 +1,5 @@
-@import "base/utilities";
-@import "base/solarized";
-@import "base/theme";
-@import "base/typography";
+@import "base/color";
+@import "base/font";
@import "base/layout";
+@import "base/typography";
+@import "base/utilities";
9 sass/_parts.scss
View
@@ -0,0 +1,9 @@
+@import "parts/header";
+@import "parts/index";
+@import "parts/article";
+@import "parts/post";
+@import "parts/archive";
+@import "parts/comment";
+@import "parts/footer";
+@import "parts/syntax";
+@import "parts/twitter";
1  sass/_plugins.scss
View
@@ -0,0 +1 @@
+@import "plugins/fancybox";
7 sass/base/_color.scss
View
@@ -0,0 +1,7 @@
+$color-background: #eee !default;
+$color-main: #258fb8 !default;
+$color-gray01: #666 !default;
+$color-gray02: #999 !default;
+$color-gray03: #ccc !default;
+$color-gray04: #ddd !default;
+$color-gray05: #fff !default;
17 sass/base/_font.scss
View
@@ -0,0 +1,17 @@
+$font-default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
+
+$font-icon: FontAwesome;
+$font-icon-path: "/font/fontawesome-webfont";
+
+@font-face {
+ font-family: 'FontAwesome';
+ src: url('#{$font-icon-path}.eot');
+ src: url('#{$font-icon-path}.eot?#iefix') format('embedded-opentype'),
+ url('#{$font-icon-path}.woff') format('woff'),
+ url('#{$font-icon-path}.ttf') format('truetype'),
+ url('#{$font-icon-path}.svgz#FontAwesomeRegular') format('svg'),
+ url('#{$font-icon-path}.svg#FontAwesomeRegular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
241 sass/base/_layout.scss
View
@@ -1,192 +1,49 @@
-$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; }
- }
-}
-
+$max-width: 1000px;
+
+*{
+ margin: 0;
+ padding: 0;
+}
+body{
+ font-family: $font-default;
+ font-weight: 300;
+ font-size: 14px;
+ background: $color-background;
+ color: $color-gray01;
+ @media screen and (max-width: 1040px){
+ margin: 0 20px;
+ }
+ @media screen and (max-width: 600px){
+ font-size: 13px;
+ }
+}
+h1{
+ font-size: 1.8em;
+}
+h2{
+ font-size: 1.5em;
+}
+h3{
+ font-size: 1.3em;
+}
+a{
+ text-decoration: none;
+ outline-width: 0;
+ color: $color-main;
+}
+.alignleft{
+ float: left;
+}
+.alignright{
+ float: right;
+}
+.clearfix{
+ @include pie-clearfix;
+}
+.inner{
+ width: $max-width;
+ margin: 0 auto;
+ @media screen and (max-width: 1040px){
+ width: 100%;
+ }
+}
137 sass/base/_typography.scss
View
@@ -1,129 +1,3 @@
-$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, 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; }}
-
-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; }
-
-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;
- 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. */
@@ -149,13 +23,4 @@ blockquote {
/* 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;
-}
+}
46 sass/base/_utilities.scss
View
@@ -1,28 +1,24 @@
-@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 square($property){
+ width: $property;
+ height: $property;
}
-
-@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 user-select($select){
+ -moz-user-select: $select;
+ -khtml-user-select: $select;
+ -webkit-user-select: $select;
+ -o-user-select: $select;
+ user-select: $select;
}
-
-@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; }
- }
+@mixin border-shadow($top: $color-gray05, $bottom: $color-gray04){
+ border-top: 1px solid $top;
+ border-bottom: 1px solid $bottom;
}
-
-@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;
-}
-
+@mixin center($width, $height){
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: $width/(-2);
+ margin-top: $height/(-2);
+ width: $width;
+ height: $height;
+}
7 sass/custom/_color.scss
View
@@ -0,0 +1,7 @@
+// $color-background: #eee;
+// $color-main: #258fb8;
+// $color-gray01: #666;
+// $color-gray02: #999;
+// $color-gray03: #ccc;
+// $color-gray04: #ddd;
+// $color-gray05: #fff;
73 sass/parts/_archive.scss
View
@@ -0,0 +1,73 @@
+.archives{
+ position: relative;
+ &:last-of-type{
+ &:before{
+ content: "";
+ position: absolute;
+ bottom: 0;
+ width: 200px;
+ border-top: 1px solid $color-gray04;
+ }
+ }
+ .year{
+ line-height: 35px;
+ width: 200px;
+ position: absolute;
+ top: 0;
+ padding-top: 15px;
+ border-top: 1px solid #fff;
+ &:before{
+ content: "";
+ position: absolute;
+ top: -2px;
+ width: 100%;
+ border-top: 1px solid $color-gray04;
+ }
+ @media screen and (max-width: 600px){
+ position: relative;
+ width: 100%;
+ }
+ }
+ article{
+ margin-left: 200px;
+ padding: 15px 0;
+ @media screen and (max-width: 600px){
+ margin-left: 0;
+ &:first-of-type{
+ border-top: none;
+ padding-top: 30px;
+ }
+ }
+ .title{
+ margin-bottom: 0;
+ }
+ .meta{
+ color: $color-gray02;
+ font-size: 0.9em;
+ line-height: 2;
+ margin-top: 15px;
+ @media screen and (max-width: 600px){
+ display: none;
+ }
+ span{
+ margin-right: 30px;
+ @include inline-block;
+ &:before{
+ color: $color-gray03;
+ font: 1.3em $font-icon;
+ padding-right: 10px;
+ }
+ }
+ a{
+ color: $color-gray02;
+ @include transition(0.3s);
+ &:hover{
+ color: $color-gray01;
+ }
+ }
+ .date:before{content: "\f073";}
+ .tags:before{content: "\f02c";}
+ .comments:before{content: "\f075";}
+ }
+ }
+}
141 sass/parts/_article.scss
View
@@ -0,0 +1,141 @@
+article{
+ border-bottom: 1px solid $color-gray04;
+ border-top: 1px solid $color-gray05;
+ padding: 30px 0;
+ position: relative;
+ @media screen and (max-width: 800px){
+ padding-bottom: 15px;
+ }
+ @media screen and (max-width: 600px){
+ padding: 15px 0;
+ }
+ h2.title{
+ font-size: 1.8em;
+ font-weight: 300;
+ line-height: 35px;
+ margin-bottom: 20px;
+ a{
+ color: $color-gray01;
+ }
+ }
+ .entry-content{
+ line-height: 2;
+ text-align: justify;
+ a{
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ .more-link{
+ display: block;
+ margin-top: 16px;
+ padding-left: 30px;
+ position: relative;
+ &:before{
+ content: "\f061";
+ font: 1.3em $font-icon;
+ line-height: 1.6em;
+ position: absolute;
+ left: 0;
+ }
+ }
+ p, blockquote, ul, ol, dl, table, iframe, h1, h2, h3, h4, h5, h6, .video-container{
+ margin-top: 10px;
+ }
+ ul, ol, dl{
+ margin-left: 20px;
+ ul, ol, dl{
+ margin-top: 0;
+ }
+ }
+ strong{
+ font-weight: bold;
+ }
+ em{
+ font-style: italic;
+ }
+ p{
+ margin-top: 10px;
+ }
+ h2{
+ font-weight: 300;
+ border-bottom: 1px solid $color-gray04;
+ position: relative;
+ &:before{
+ content: "";
+ position: absolute;
+ bottom: -2px;
+ border-bottom: 1px solid $color-gray05;
+ width: 100%;
+ }
+ }
+ img, video{
+ max-width: 100%;
+ height: auto;
+ }
+ blockquote{
+ background: $color-gray04;
+ border-left: 5px solid $color-gray03;
+ padding: 15px 20px;
+ margin-top: 10px;
+ & > p:first-of-type{
+ margin-top: 0;
+ }
+ }
+ iframe{
+ border: none;
+ }
+ table{
+ background: $color-gray04;
+ border: 1px solid $color-gray03;
+ border-spacing: 0;
+ margin-top: 10px;
+ th{
+ background: $color-gray03;
+ padding: 0 15px;
+ }
+ td{
+ text-align: center;
+ }
+ tr{
+ &:nth-of-type(2n){
+ background: #d5d5d5;
+ }
+ }
+ }
+ .caption{
+ display: block;
+ font-size: 0.9em;
+ color: $color-gray02;
+ padding-left: 25px;
+ position: relative;
+ &:before{
+ content: "\f040";
+ color: $color-gray03;
+ font: 1.3em $font-icon;
+ line-height: 1.6em;
+ position: absolute;
+ left: 0;
+ }
+ }
+ .video-container{
+ position: relative;
+ padding-bottom: 56.25%;
+ padding-top: 30px;
+ height: 0;
+ overflow: hidden;
+ iframe, object, embed{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ margin-top: 0;
+ }
+ }
+ }
+}
+.share{
+ padding: 15px 0;
+ @include border-shadow();
+}
10 sass/parts/_comment.scss
View
@@ -0,0 +1,10 @@
+#comment{
+ padding: 30px 0;
+ @include border-shadow();
+ h2.title{
+ font-size: 25px;
+ font-weight: 300;
+ line-height: 35px;
+ margin-bottom: 20px;
+ }
+}
6 sass/parts/_footer.scss
View
@@ -0,0 +1,6 @@
+footer{
+ padding: 15px 0;
+ border-top: 1px solid $color-gray05;
+ text-align: center;
+ font-size: 0.9em;
+}
395 sass/parts/_header.scss
View
@@ -0,0 +1,395 @@
+$header-height: 30px;
+
+#header{
+ height: $header-height;
+ padding: 30px 0;
+ border-bottom: 1px solid $color-gray04;
+ line-height: $header-height;
+ @media screen and (max-width: 1040px){
+ height: auto;
+ position: relative;
+ padding-bottom: 10px;
+ }
+ a{
+ color: $color-gray01;
+ @include transition(color 0.3s);
+ &:hover{
+ color: $color-main;
+ }
+ }
+ h1{
+ float: left;
+ font-weight: 300;
+ font-size: 30px;
+ @media screen and (max-width: 1040px){
+ float: none;
+ }
+ }
+}
+#main-nav{
+ float: left;
+ margin-left: 30px;
+ @media screen and (max-width: 1040px){
+ float: none;
+ margin-left: 0;
+ margin-top: 15px;
+ }
+ >ul{
+ @media screen and (max-width: 600px){
+ display: none;
+ }
+ >li{
+ margin-left: 50px;
+ @include inline-block;
+ @media screen and (max-width: 1040px){
+ margin-left: 0;
+ margin-right: 50px;
+ &:last-of-type{
+ margin-right: 0;
+ }
+ }
+ &:hover{
+ >a{
+ color: $color-main;
+ }
+ }
+ >a{
+ padding: 38px 0;
+ margin-top: -38px;
+ &:after{
+ content: "\f078";
+ color: $color-gray03;
+ font: 12px $font-icon;
+ padding-left: 10px;
+ }
+ &:only-child{
+ &:after{
+ content: "";
+ }
+ }
+ @media screen and (max-width: 1040px){
+ padding: 18px 0;
+ }
+ }
+ }
+ ul{
+ position: absolute;
+ top: 60px;
+ left: -15px;
+ z-index: 10;
+ white-space: nowrap;
+ background: $color-gray04;
+ border: 1px solid $color-gray03;
+ list-style: none;
+ display: none;
+ @media screen and (max-width: 1040px){
+ top: 40px;
+ }
+ @include box-shadow(0 4px 8px rgba(0,0,0,0.1));
+ @include border-radius(0 0 5px 5px);
+ ul{
+ @include border-radius(0 5px 5px 5px);
+ }
+ li{
+ @include border-shadow($color-background, $color-gray03);
+ &:hover{
+ background: #d5d5d5;
+ }
+ &:first-of-type{
+ border-top: none;
+ ul{
+ @include border-radius(0 0 5px 5px);
+ }
+ }
+ &:last-of-type{
+ border-bottom: none;
+ }
+ >a{
+ display: block;
+ padding: 5px 15px;
+ &:after{
+ content: "\f054";
+ color: $color-gray02;
+ font: 12px $font-icon;
+ padding-left: 10px;
+ }
+ &:hover{
+ color: $color-gray01;
+ }
+ &:only-child{
+ &:after{
+ content: "";
+ }
+ }
+ }
+ }
+ ul{
+ top: 0;
+ left: 100%;
+ }
+ }
+ li{
+ position: relative;
+ &:hover{
+ >ul{
+ display: block;
+ }
+ }
+ }
+ }
+ select{
+ display: none;
+ margin-bottom: 10px;
+ @media screen and (max-width: 600px){
+ display: block;
+ }
+ }
+}
+#mobile-nav{
+ display: none;
+ height: 37px;
+ position: relative;
+ @media screen and (max-width: 600px){
+ display: block;
+ }
+ a{
+ display: block;
+ }
+ .button{
+ cursor: pointer;
+ }
+ .container{
+ display: none;
+ }
+ .menu{
+ position: relative;
+ width: 100%;
+ .button{
+ background: #f2f2f2;
+ border: 1px solid $color-gray04;
+ color: #999;
+ padding: 0 60px 0 10px;
+ position: relative;
+ @include border-radius(5px);
+ &:hover{
+ color: #999;
+ }
+ &.on{
+ color: #666;
+ @include border-radius(5px 5px 5px 0);
+ &:before{
+ content: "\f077";
+ }
+ }
+ &:before{
+ content: "\f078";
+ color: $color-gray04;
+ font: 16px $font-icon;
+ line-height: 30px;
+ position: absolute;
+ top: 0;
+ right: 40px;
+ }
+ }
+ .container{
+ background: #f2f2f2;
+ border: 1px solid #ddd;
+ border-top: none;
+ position: absolute;
+ top: 31px;
+ z-index: 1;
+ @include border-radius(0 0 5px 5px);
+ ul{
+ list-style: none;
+ ul{
+ margin-left: 20px;
+ }
+ }
+ a{
+ padding: 0 10px;
+ }
+ }
+ }
+ .search{
+ position: absolute;
+ top: 0;
+ right: 0;
+ .button{
+ background: $color-gray04;
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top: 1px;
+ right: -1px;
+ @include border-radius(0 5px 5px 0);
+ &:before{
+ content: "\f002";
+ color: #f2f2f2;
+ font: 20px $font-icon;
+ line-height: 30px;
+ position: absolute;
+ top: 0;
+ left: 7px;
+ }
+ &.on{
+ background: $color-gray03;
+ &:before{
+ content: "\f00d";
+ }
+ }
+ }
+ .container{
+ position: absolute;
+ right: 51px;
+ z-index: 1;
+ }
+ input[type="text"]{
+ background: #fff;
+ border: 1px solid $color-gray04;
+ border-right: none;
+ color: $color-gray02;
+ font: 13px $font-default;
+ height: 30px;
+ width: 100%;
+ padding: 0 10px;
+ @include border-radius(5px 0 0 5px);
+ }
+ }
+}
+#sub-nav{
+ @media screen and (max-width: 1040px){
+ position: absolute;
+ top: 30px;
+ right: 0;
+ }
+ @media screen and (max-width: 600px){
+ display: none;
+ }
+ .search{
+ float: left;
+ margin-top: 1px;
+ position: relative;
+ @media screen and (max-width: 1040px){
+ float: none;
+ margin-top: 15px;
+ }
+ &:before{
+ content: "\f002";
+ color: $color-gray03;
+ font: 18px $font-icon;
+ line-height: 30px;
+ position: absolute;
+ top: 0;
+ right: 125px;
+ }
+ input[type="text"]{
+ background: #f2f2f2;
+ color: $color-gray02;
+ border: 1px solid $color-gray04;
+ font: 13px $font-default;
+ padding: 6px 15px 6px 35px;
+ width: 100px;
+ @include transition(0.3s);
+ @include border-radius(15px);
+ &:focus, &:active{
+ background: #fff;
+ border-top: 1px solid $color-gray03;
+ color: $color-gray01;
+ outline: none;
+ }
+ }
+ }
+ .social{
+ float: left;
+ margin-right: 15px;
+ @media screen and (max-width: 1040px){
+ float: none;
+ margin-right: 0;
+ a:last-of-type{
+ margin-right: 0;
+ }
+ }
+ a{
+ @include border-radius(50%);
+ @include inline-block;
+ text-indent: -9999px;
+ margin-right: 15px;
+ opacity: 0.5;
+ @include square(28px);
+ @include transition(0.3s);
+ &:hover{
+ opacity: 1;
+ }
+ &.facebook{
+ background: image-url('social/facebook.png') center no-repeat #3B5998;
+ border: 1px solid #3B5998;
+ &:hover{
+ border: 1px solid darken(#3B5998, 10%);
+ }
+ }
+ &.google{
+ background: image-url('social/google.png') center no-repeat #C83D20;
+ border: 1px solid #C83D20;
+ &:hover{
+ border: 1px solid darken(#C83D20, 10%);
+ }
+ }
+ &.twitter{
+ background: image-url('social/twitter.png') center no-repeat #55CFF8;
+ border: 1px solid #55CFF8;
+ &:hover{
+ border: 1px solid darken(#55CFF8, 10%);
+ }
+ }
+ &.github{
+ background: image-url('social/github.png') center no-repeat rgb(175,182,202);
+ border: 1px solid rgb(175,182,202);
+ &:hover{
+ border: 1px solid darken(rgb(175,182,202), 10%);
+ }
+ }
+ &.coderwall{
+ background: image-url('social/coderwall.png') center no-repeat rgb(58,114,159);
+ border: 1px solid rgb(58,114,159);
+ &:hover{
+ border: 1px solid darken(rgb(58,114,159), 10%);
+ }
+ }
+ &.pinboard{
+ background: image-url('social/pinboard.png') center no-repeat rgb(0,102,200);
+ border: 1px solid rgb(58,114,159);
+ &:hover{
+ border: 1px solid darken(rgb(0,102,255), 10%);
+ }
+ }
+ &.linkedin{
+ background: image-url('social/linkedin.png') center no-repeat #005A87;
+ border: 1px solid #005A87;
+ &:hover{
+ border: 1px solid darken(#005A87, 10%);
+ }
+ }
+ &.pinterest{
+ background: image-url('social/pinterest.png') center no-repeat rgb(190,64,55);
+ border: 1px solid rgb(190,64,55);
+ &:hover{
+ border: 1px solid darken(rgb(190,64,55), 10%);
+ }
+ }
+ &.delicious{
+ background: image-url('social/delicious.png') center no-repeat rgb(50,113,203);
+ border: 1px solid rgb(50,113,203);
+ &:hover{
+ border: 1px solid darken(rgb(50,113,203), 10%);
+ }
+ }
+ &.rss{
+ background: image-url('social/rss.png') center no-repeat #EF7522;
+ border: 1px solid #EF7522;
+ &:hover{
+ border: 1px solid darken(#EF7522, 10%);
+ }
+ }
+ }
+ }
+}
43 sass/parts/_index.scss
View
@@ -0,0 +1,43 @@
+#pagenavi{
+ padding: 20px 0;
+ height: 20px;
+ line-height: 20px;
+ position: relative;
+ @include border-shadow();
+ a{
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ .prev, .next{
+ position: absolute;
+ }
+ .prev{
+ padding-left: 30px;
+ left: 0;
+ &:before{
+ content: "\f060";
+ font: 1.3em $font-icon;
+ position: absolute;
+ left: 0;
+ }
+ }
+ .next{
+ padding-right: 30px;
+ right: 0;
+ &:before{
+ content: "\f061";
+ font: 1.3em $font-icon;
+ position: absolute;
+ right: 0;
+ }
+ }
+ .center{
+ text-align: center;
+ width: 100%;
+ display: block;
+ @media screen and (max-width: 400px){
+ display: none;
+ }
+ }
+}
43 sass/parts/_post.scss
View
@@ -0,0 +1,43 @@
+.post{
+ h2.title, .entry-content{
+ margin-left: 200px;
+ @media screen and (max-width: 800px){
+ margin-left: 0;
+ }
+ }
+ .meta{
+ position: absolute;
+ top: 85px;
+ line-height: 2;
+ font-size: 0.9em;
+ color: $color-gray02;
+ width: 170px;
+ @media screen and (max-width: 800px){
+ margin-top: 15px;
+ position: static;
+ width: auto;
+ }
+ a{
+ @include link-colors($color-gray02, $color-gray01);
+ @include transition(0.3s);
+ }
+ .date, .tags, .comments{
+ padding-left: 30px;
+ position: relative;
+ &:before{
+ color: $color-gray03;
+ font: 1.3em $font-icon;
+ line-height: 1.6em;
+ position: absolute;
+ left: 0;
+ }
+ @media screen and (max-width: 800px){
+ @include inline-block;
+ margin-right: 30px;
+ }
+ }
+ .date:before{content: "\f073";}
+ .tags:before{content: "\f02c";}
+ .comments:before{content: "\f075";}
+ }
+}
387 sass/parts/_syntax.scss
View
@@ -0,0 +1,387 @@
+$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: light !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;
+}
+
+$pre-bg: $color-gray04;
+$pre-border: $color-gray03;
+
+article{
+ code, pre{
+ background: $pre-bg;
+ border: 1px solid $pre-border;
+ font-family: $font-mono;
+ }
+ code{
+ font-size: 0.9em;
+ padding: 1px 3px;
+ margin: 0 3px;
+ @include border-radius(5px);
+ }
+ pre{
+ font-size: 1 / 0.9em;
+ line-height: 1.5;
+ margin-top: 10px;
+ padding: 5px 15px;
+ overflow-x: auto;
+ @include border-radius(5px);
+ code{
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ @include border-radius(0);
+ }
+ }
+}
+
+figure.code{
+ background: $pre-bg;
+ border: 1px solid $pre-border;
+ margin-top: 10px;
+ padding: 5px 15px;
+ @include border-radius(5px);
+ figcaption{
+ font-size: 0.9em;
+ position: relative;
+ span{
+ margin: -5px -15px 0;
+ padding: 5px 15px;
+ display: block;
+ @include background(linear-gradient(top, $pre-border, $pre-bg));
+ &:empty{
+ display: none;
+ }
+ }
+ a{
+ position: absolute;
+ top: 5px;
+ right: 0;
+ }
+ }
+ code, pre{
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ @include border-radius(0);
+ }
+ .highlight{
+ overflow-x: auto;
+ }
+ .line-numbers{
+ border-right: 1px solid $pre-border;
+ font-family: $font-mono;
+ padding-right: 15px;
+ text-align: right;
+ }
+ table{
+ border: none;
+ text-align: left;
+ margin-top: 0;
+ td{
+ text-align: left;
+ }
+ }
+ td.code{
+ width: 100%;
+ padding-left: 15px;
+ overflow-x: auto;
+ }
+}
+.entry-content .gist{
+ background: $pre-bg;
+ color: $color-gray01;
+ padding: 30px 15px 5px;
+ margin-top: 10px;
+ border: 1px solid $pre-border;
+ position: relative;
+ overflow: hidden;
+ @include border-radius(5px);
+ .gist-file{
+ margin: 0;
+ .gist-data{
+ background: none;
+ border: none;
+ pre{
+ font: 0.9em $font-mono;
+ line-height: 1.5;
+ }
+ }
+ .gist-meta{
+ font: 300 0.9em $font-default;
+ line-height: 1.5;
+ margin: 0 -16px -6px;
+ padding: 5px 15px;
+ @include background(linear-gradient(top, $pre-bg, $pre-border));
+ a{
+ color: $color-main;
+ &:first-of-type{
+ position: absolute;
+ top: 5px;
+ right: 15px;
+ z-index: 1;
+ }
+ &:nth-of-type(2){
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 5px 15px;
+ width: 100%;
+ @include background(linear-gradient(top, $pre-border, $pre-bg));
+ }
+ }
+ }
+ }
+}
+figure.code, .gist-highlight{
+ .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 */
+ .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 */
+ .gs {
+ color:$base1 !important;
+ font-weight: bold !important;
+ }
+ /* Generic.Strong */
+ .gu {
+ color: $solar-violet !important;
+ }
+ /* Generic.Subheading */
+ .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 */
+ .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;
+ }
+ .vg {
+ color: $solar-blue !important;
+ }
+ /* Name.Variable.Global */
+ .vi {
+ color: $solar-blue !important;
+ }
+ /* Name.Variable.Instance */
+ .nv {
+ color: $solar-blue !important;
+ }
+ /* Name.Variable */
+ .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 */
+ .s {
+ color: $solar-cyan !important;
+ }
+ /* Literal.String */
+ .sd {
+ color: $solar-cyan !important;
+ }
+ /* Literal.String.Doc */
+ .s2 {
+ color: $solar-cyan !important;
+ }
+ /* Literal.String.Double */
+ .se {
+ color: $solar-red !important;
+ }
+ /* Literal.String.Escape */
+ .si {
+ color: $solar-blue !important;
+ }
+ /* Literal.String.Interpol */
+ .sr {
+ color: $solar-cyan !important;
+ }
+ /* Literal.String.Regex */
+ .s1 {
+ color: $solar-cyan !important;
+ }
+ /* Literal.String.Single */
+}
49 sass/parts/_twitter.scss
View
@@ -0,0 +1,49 @@
+#banner{
+ color: $color-gray02;
+ padding: 30px 0;
+ line-height: 30px;
+ text-align: center;
+ position: relative;
+ display: none;
+ @include border-shadow();
+ &:hover{
+ a{
+ color: $color-main;
+ }
+ }
+ a{
+ color: $color-gray02;
+ @include transition(0.3s);
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ small{
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+ .loading{
+ background: image-url('loading_pacman.gif') center no-repeat;
+ text-indent: -9999px;
+ }
+ .container{
+ height: 30px;
+ overflow: hidden;
+ position: relative;
+ display: none;
+ .feed{
+ list-style: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ li{
+ position: relative;
+ small{
+ position: absolute;
+ right: 0;
+ }
+ }
+ }
+ }
+}
228 sass/plugins/_fancybox.scss
View
@@ -0,0 +1,228 @@
+/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */
+.fancybox-tmp iframe, .fancybox-tmp object {
+ vertical-align: top;
+ padding: 0;
+ margin: 0;
+}
+
+.fancybox-wrap {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 8020;
+}
+
+.fancybox-skin {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ background: #f9f9f9;
+ color: #444;
+ text-shadow: none;
+ @include border-radius(4px);
+}
+
+.fancybox-opened {
+ z-index: 8030;
+}
+
+.fancybox-opened .fancybox-skin {
+ @include box-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
+}
+
+.fancybox-outer, .fancybox-inner {
+ padding: 0;
+ margin: 0;
+ position: relative;
+ outline: none;
+}
+
+.fancybox-inner {
+ overflow: hidden;
+}
+
+.fancybox-type-iframe .fancybox-inner {
+ -webkit-overflow-scrolling: touch;
+}
+
+.fancybox-error {
+ color: #444;
+ font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ margin: 0;
+ padding: 10px;
+}
+
+.fancybox-image, .fancybox-iframe {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ vertical-align: top;
+}
+
+.fancybox-image {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
+ background-image: image-url('fancybox/fancybox_sprite.png');
+}
+
+#fancybox-loading {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-top: -22px;
+ margin-left: -22px;
+ background-position: 0 -108px;
+ opacity: 0.8;
+ cursor: pointer;
+ z-index: 8020;
+}
+
+#fancybox-loading div {
+ width: 44px;
+ height: 44px;
+ background: image-url('fancybox/fancybox_loading.gif') center center no-repeat;
+}
+
+.fancybox-close {
+ position: absolute;
+ top: -18px;
+ right: -18px;
+ width: 36px;
+ height: 36px;
+ cursor: pointer;
+ z-index: 8040;
+}
+
+.fancybox-nav {
+ position: absolute;
+ top: 0;
+ width: 40%;
+ height: 100%;
+ cursor: pointer;
+ background: transparent image-url('fancybox/blank.gif'); /* helps IE */
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ z-index: 8040;
+}
+
+.fancybox-prev {
+ left: 0;
+}
+
+.fancybox-next {
+ right: 0;
+}
+
+.fancybox-nav span {
+ position: absolute;
+ top: 50%;
+ width: 36px;
+ height: 34px;
+ margin-top: -18px;
+ cursor: pointer;
+ z-index: 8040;
+ visibility: hidden;
+}
+
+.fancybox-prev span {
+ left: 20px;
+ background-position: 0 -36px;
+}
+
+.fancybox-next span {
+ right: 20px;
+ background-position: 0 -72px;
+}
+
+.fancybox-nav:hover span {
+ visibility: visible;
+}
+
+.fancybox-tmp {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ padding: 0;
+ overflow: visible;
+ visibility: hidden;
+}
+
+/* Overlay helper */
+
+#fancybox-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ display: none;
+ z-index: 8010;
+ background: #000;
+}
+
+#fancybox-overlay.overlay-fixed {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+}
+
+/* Title helper */
+
+.fancybox-title {
+ visibility: hidden;
+ font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ position: relative;
+ text-shadow: none;
+ z-index: 8050;
+}
+
+.fancybox-opened .fancybox-title {
+ visibility: visible;
+}
+
+.fancybox-title-float-wrap {
+ position: absolute;
+ bottom: 0;
+ right: 50%;
+ margin-bottom: -35px;
+ z-index: 8030;
+ text-align: center;
+}
+
+.fancybox-title-float-wrap .child {
+ display: inline-block;
+ margin-right: -100%;
+ padding: 2px 20px;
+ background: transparent; /* Fallback for web browsers that doesn't support RGBa */
+ background: rgba(0, 0, 0, 0.8);
+ text-shadow: 0 1px 2px #222;
+ color: #FFF;
+ font-weight: bold;
+ line-height: 24px;
+ white-space: nowrap;
+ @include border-radius(15px);
+}
+
+.fancybox-title-outside-wrap {
+ position: relative;
+ margin-top: 10px;
+ color: #fff;
+}
+
+.fancybox-title-inside-wrap {
+ margin-top: 10px;
+}
+
+.fancybox-title-over-wrap {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ color: #fff;
+ padding: 10px;
+ background: #000;
+ background: rgba(0, 0, 0, .8);
+}
11 sass/screen.scss
View
@@ -1,10 +1,7 @@
@import "compass";
-@include global-reset;
-@include reset-html5;
-@import "custom/colors";
-@import "custom/fonts";
-@import "custom/layout";
+@import "custom/color";
+
@import "base";
-@import "partials";
-@import "custom/styles";
+@import "parts";
+@import "plugins";
8 source/_includes/after_footer.html
View
@@ -1,5 +1,5 @@
+<script src="{{ root_url }}/javascripts/slash.js"></script>
+{% include fancybox.html %} <!-- Delete or comment this line to disable Fancybox -->
{% include disqus.html %}
-{% include facebook_like.html %}
-{% include google_plus_one.html %}
-{% include twitter_sharing.html %}
-{% include custom/after_footer.html %}
+{% include google_analytics.html %}
+{% include custom/after_footer.html %}
27 source/_includes/archive_post.html
View
@@ -1,8 +1,19 @@
-{% capture category %}{{ post.categories | size }}{% endcapture %}
-<h1><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h1>
-<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "<span class='month'>%b</span> <span class='day'>%d</span> <span class='year'>%Y</span>"}}</time>
-{% if category != '0' %}
-<footer>
- <span class="categories">posted in {{ post.categories | category_links }}</span>
-</footer>
-{% endif %}
+{% capture date %}{{ post.date }}{% endcapture %}
+{% capture this_year %}{{ date | date: "%Y" }}{% endcapture %}
+{% unless year == this_year %}
+ {% assign year = this_year %}
+ {% unless forloop.first %}
+ </section>
+ {% endunless %}
+ <section class="archives"><h1 class="year">{{ date | date: "%Y" }}</h1>
+{% endunless %}
+<article>
+ <h2 class="title"><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h2>
+ <div class="meta">
+ <span class="date">{{ date | date: "%b %e" }}</span>
+ <span class="tags">{% include post/categories.html %}</span>
+ {% if site.disqus_short_name and post.comments == true and site.disqus_show_comment_count == true %}
+ <span class="comments"><a href="{{ root_url }}{{ post.url }}#disqus_thread">Comments</a></span>
+ {% endif %}
+ </div>
+</article>
48 source/_includes/article.html
View
@@ -1,28 +1,26 @@
-{% unless page.no_header %}
- <header>
- {% if index %}
- <h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
- {% else %}
- <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
- {% endif %}
- {% unless page.meta == false %}
- <p class="meta">
- {% include post/date.html %}{{ time }}
- {% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %}
- | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread">Comments</a>
- {% endif %}
- </p>
- {% endunless %}
- </header>
-{% endunless %}
{% if index %}
- <div class="entry-content">{{ content | excerpt }}</div>
- {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %}
- {% if excerpted == 'true' %}
- <footer>
- <a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
- </footer>
- {% endif %}
+ <h2 class="title">
+ {% if post.external-url %}
+ <a href="{{ post.external-url }}">
+ {% else %}
+ <a href="{{ root_url }}{{ post.url }}">
+ {% endif %}
+ {% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a>
+ </h2>
+ <div class="entry-content">
+ {{ content | excerpt }}
+ {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %}
+ {% if excerpted == 'true' %}<a href="{{ root_url }}{{ post.url }}" class="more-link">{{ site.excerpt_link }}</a>{% endif %}
+ </div>
{% else %}
-<div class="entry-content">{{ content }}</div>
+ <h2 class="title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h2>
+ <div class="entry-content">{{ content }}</div>
{% endif %}
+
+<div class="meta">
+ <div class="date">{% include post/date.html %}{{ time }}</div>
+ <div class="tags">{% include post/categories.html %}</div>
+ {% if site.disqus_short_name and site.disqus_show_comment_count == true %}
+ <span class="comments"><a href="{{ root_url }}{{ post.url }}{{ page.url }}#disqus_thread">Comments</a></span>
+ {% endif %}
+</div>
15 source/_includes/banner.html
View
@@ -0,0 +1,15 @@
+{% if site.twitter_user and site.twitter_tweet_count > 0 %}
+<div id="banner" class="inner">
+ <div class="container">
+ <ul class="feed"></ul>
+ </div>
+ <small><a href="http://twitter.com/{{ site.twitter_user }}">{{ site.twitter_user }}</a> @ <a href="http://twitter.com">Twitter</a></small>
+ <div class="loading">Loading...</div>
+</div>
+<script src="{{ root_url }}/javascripts/twitter.js"></script>
+<script type="text/javascript">
+ (function($){
+ $('#banner').getTwitterFeed('{{ site.twitter_user }}', {{ site.twitter_tweet_count }}, {{ site.twitter_show_replies }});
+ })(jQuery);
+</script>
+{% endif %}
3  source/_includes/custom/after_footer.html
View
@@ -1,3 +0,0 @@
-{% comment %}
- Add content to be output at the bottom of each page. (You might use this for analytics scripts, for example)
-{% endcomment %}
10 source/_includes/custom/footer.html
View
@@ -1,4 +1,6 @@
-<p>
- Copyright &copy; {{ site.time | date: "%Y" }} - {{ site.author }} -
- <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
-</p>
+Copyright &copy; {{ site.time | date: "%Y" }}
+{% if site.author %}
+ {{ site.author }}
+{% else %}
+ {{ site.title }}
+{% endif %}
3  source/_includes/custom/head.html
View
@@ -1,3 +0,0 @@
-<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
-<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
-<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
6 source/_includes/custom/header.html
View
@@ -1,6 +0,0 @@
-<hgroup>
- <h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
- {% if site.subtitle %}
- <h2>{{ site.subtitle }}</h2>
- {% endif %}
-</hgroup>
6 source/_includes/custom/navigation.html
View
@@ -1,4 +1,4 @@
-<ul class="main-navigation">
- <li><a href="{{ root_url }}/">Blog</a></li>
- <li><a href="{{ root_url }}/blog/archives">Archives</a></li>
+<ul class="main">
+ <li><a href="{{ root_url }}/">Blog</a></li>
+ <li><a href="{{ root_url }}/blog/archives">Archives</a></li>
</ul>
6 source/_includes/fancybox.html
View
@@ -0,0 +1,6 @@
+<script src="{{ root_url }}/javascripts/jquery.fancybox.pack.js"></script>
+<script type="text/javascript">
+(function($){
+ $('.fancybox').fancybox();
+})(jQuery);
+</script>
2  source/_includes/footer.html
View
@@ -1 +1 @@
-{% include custom/footer.html %}
+{% include custom/footer.html %}
20 source/_includes/google_analytics.html
View
@@ -1,13 +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']);
+ <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>
+ (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 %}
43 source/_includes/head.html
View
@@ -1,29 +1,20 @@
-<!DOCTYPE html>
-<!--[if IEMobile 7 ]><html class="no-js iem7"><![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" lang="en"><!--<![endif]-->
+<!DOCTYPE HTML>
+<html>
<head>
- <meta charset="utf-8">
- <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
- <meta name="author" content="{{ site.author }}">
+ <meta charset="utf-8">
+ <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+ <meta name="author" content="{{ site.author }}">
- {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
- <meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
- {% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
+ {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
+ <meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
+ {% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <!-- http://t.co/dKP3o1e -->
- <meta name="HandheldFriendly" content="True">
- <meta name="MobileOptimized" content="320">
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' }}{% endif %}{% endcapture %}
- <link rel="canonical" href="{{ canonical }}">
- <link href="{{ root_url }}/favicon.png" rel="icon">
- <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
- <script src="{{ root_url }}/javascripts/modernizr-2.0.js"></script>
- <script src="{{ root_url }}/javascripts/ender.js"></script>
- <script src="{{ root_url }}/javascripts/octopress.js" type="text/javascript"></script>
- <link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
- {% include custom/head.html %}
- {% include google_analytics.html %}
-</head>
+ <link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
+ <link rel="canonical" href="{{ canonical }}">
+ <link href="{{ root_url }}/favicon.png" rel="shortcut icon">
+ <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+ <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ {% include custom/head.html %}
+</head>
55 source/_includes/header.html
View
@@ -1 +1,56 @@
+<h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
+<nav id="main-nav">{% include navigation.html %}</nav>
+<nav id="mobile-nav">
+ <div class="alignleft menu">
+ <a class="button">Menu</a>
+ <div class="container">{% include navigation.html %}</div>
+ </div>
+ <div class="alignright search">
+ <a class="button"></a>
+ <div class="container">
+ <form action="{{ site.simple_search }}" method="get">
+ <input type="text" name="q" results="0">
+ <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
+ </form>
+ </div>
+ </div>
+</nav>
+<nav id="sub-nav" class="alignright">
+ <div class="social">
+ {% if site.facebook_user %}
+ <a class="facebook" href="http://www.facebook.com/{{ site.facebook_user }}" title="Facebook">Facebook</a>
+ {% endif %}
+ {% if site.googleplus_user and site.googleplus_hidden == false %}
+ <a class="google" href="https://plus.google.com/{{ site.googleplus_user }}?rel=author" title="Google+">Google+</a>
+ {% endif %}
+ {% if site.twitter_user %}
+ <a class="twitter" href="http://twitter.com/{{ site.twitter_user }}" title="Twitter">Twitter</a>
+ {% endif %}
+ {% if site.github_user %}
+ <a class="github" href="https://github.com/{{ site.github_user }}" title="GitHub">GitHub</a>
+ {% endif %}
+ {% if site.pinboard_user %}
+ <a class="pinboard" href="https://pinboard.in/u:{{ site.pinboard_user }}" title="Pinboard">Pinboard</a>
+ {% endif %}
+ {% if site.coderwall_user %}
+ <a class="coderwall" href="https://coderwall.com/{{ site.coderwall_user }}" title="Coderwall">Coderwall</a>
+ {% endif %}
+ {% if site.linkedin_user %}
+ <a class="linkedin" href="http://www.linkedin.com/in/{{ site.linkedin_user }}">LinkedIn</a>
+ {% endif %}
+ {% if site.pinterest_user %}
+ <a class="pinterest" href="https://pinterest.com/{{ site.pinterest_user }}" title="Pinterest">Pinterest</a>
+ {% endif %}
+ {% if site.delicious_user %}
+ <a class="delicious" href="http://delicious.com/{{ site.delicious_user }}" title="Delicious">Delicious</a>
+ {% endif %}
+ {% if site.subscribe_rss %}
+ <a class="rss" href="{{ site.subscribe_rss }}" title="RSS">RSS</a>
+ {% endif %}
+ </div>
+ <form class="search" action="{{ site.simple_search }}" method="get">
+ <input class="alignright" type="text" name="q" results="0">
+ <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
+ </form>
+</nav>
{% include custom/header.html %}
16 source/_includes/navigation.html
View
@@ -1,15 +1 @@
-<ul class="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
- <li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
- {% if site.subscribe_email %}
- <li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
- {% endif %}
-</ul>
- {% if site.simple_search %}
-<form action="{{ site.simple_search }}" method="get">
- <fieldset role="search">
- <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}" />
- <input class="search" type="text" name="q" results="0" placeholder="Search"/>
- </fieldset>
-</form>
- {% endif %}
-{% include custom/navigation.html %}
+{% include custom/navigation.html %}
12 source/_includes/post/categories.html
View
@@ -1,10 +1,8 @@
{% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %}
{% unless category == '0' %}
-<span class="categories">
- {% if post %}
- {{ post.categories | category_links }}
- {% else %}
- {{ page.categories | category_links }}
- {% endif %}
-</span>
+{% if post %}
+ {{ post.categories | category_links }}
+{% else %}
+ {{ page.categories | category_links }}
+{% endif %}
{% endunless %}
24 source/_includes/post/sharing.html
View
@@ -1,11 +1,15 @@
-<div class="sharing">
- {% if site.twitter_tweet_button %}
- <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>
- {% endif %}
- {% if site.google_plus_one %}
- <div class="g-plusone" data-size="{{ site.google_plus_one_size }}"></div>
- {% endif %}
- {% if site.facebook_like %}
- <div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
- {% endif %}
+<div class="share">
+ <div class="addthis_toolbox addthis_default_style ">
+ {% if site.facebook_like %}
+ <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
+ {% endif %}
+ {% if site.twitter_tweet_button %}
+ <a class="addthis_button_tweet"></a>
+ {% endif %}