diff --git a/.themes/slash b/.themes/slash new file mode 160000 index 00000000..2cc927dd --- /dev/null +++ b/.themes/slash @@ -0,0 +1 @@ +Subproject commit 2cc927dd8c198e7fa0de977e9143c317be16b08b diff --git a/sass/_base.scss b/sass/_base.scss index a8fcb864..77f309ce 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -1,4 +1,5 @@ @import "base/color"; @import "base/font"; -@import "base/utilities"; -@import "base/layout"; \ No newline at end of file +@import "base/layout"; +@import "base/typography"; +@import "base/utilities"; \ No newline at end of file diff --git a/sass/_parts.scss b/sass/_parts.scss index ffa92a32..b7ee304e 100644 --- a/sass/_parts.scss +++ b/sass/_parts.scss @@ -1,8 +1,9 @@ @import "parts/header"; -@import "parts/pagination"; +@import "parts/index"; @import "parts/article"; +@import "parts/post"; @import "parts/archive"; @import "parts/comment"; @import "parts/footer"; @import "parts/syntax"; -@import "parts/phasebeam"; \ No newline at end of file +@import "parts/twitter"; \ No newline at end of file diff --git a/sass/base/_color.scss b/sass/base/_color.scss index a9c7654b..8dae36f3 100644 --- a/sass/base/_color.scss +++ b/sass/base/_color.scss @@ -1,8 +1,7 @@ -$color-background: #000; -$color-font: #333; -$color-meta: #999; -$color-border: #ccc; -$color-main01: rgb(157, 97, 207); -$color-main02: rgb(40, 20, 105); -$color-main03: rgb(0, 150, 240); -$color-main04: rgb(0, 26, 77); \ No newline at end of file +$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; \ No newline at end of file diff --git a/sass/base/_font.scss b/sass/base/_font.scss index a7f76bd3..907e4064 100644 --- a/sass/base/_font.scss +++ b/sass/base/_font.scss @@ -1,21 +1,17 @@ -$font-main: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif; -$font-title: "Pontano Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif; -$font-mono: Menlo, Monaco, Andale Mono, Lucida console, Courier New, monospace; -$font-serif: "Georgia", serif; - -@import url(http://fonts.googleapis.com/css?family=Pontano+Sans); +$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; + 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; } \ No newline at end of file diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index a6784a21..22e58046 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -1,40 +1,49 @@ +$max-width: 1000px; + *{ - margin: 0; - padding: 0; + margin: 0; + padding: 0; } body{ - background: $color-background; - font: 300 14px $font-main; - text-shadow: 0 0 1px transparent; + 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: 2em; + font-size: 1.8em; } h2{ - font-size: 1.6em; + font-size: 1.5em; } h3{ - font-size: 1.3em; + font-size: 1.3em; } a{ - color: $color-main01; - text-decoration: none; -} -strong{ - font-weight: bold; + text-decoration: none; + outline-width: 0; + color: $color-main; } .alignleft{ - float: left; + float: left; } .alignright{ - float: right; + float: right; } .clearfix{ - @include pie-clearfix; + @include pie-clearfix; } .inner{ - margin: 0 auto; - position: relative; - width: 1000px; - z-index: 0; + width: $max-width; + margin: 0 auto; + @media screen and (max-width: 1040px){ + width: 100%; + } } \ No newline at end of file diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss index b68753fa..57f5e1f5 100644 --- a/sass/base/_typography.scss +++ b/sass/base/_typography.scss @@ -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; -} +} \ No newline at end of file diff --git a/sass/base/_utilities.scss b/sass/base/_utilities.scss index 24b6af0f..63aae7a0 100644 --- a/sass/base/_utilities.scss +++ b/sass/base/_utilities.scss @@ -1,23 +1,24 @@ -@mixin square($size){ - width: $size; - height: $size; +@mixin square($property){ + width: $property; + height: $property; +} +@mixin user-select($select){ + -moz-user-select: $select; + -khtml-user-select: $select; + -webkit-user-select: $select; + -o-user-select: $select; + user-select: $select; +} +@mixin border-shadow($top: $color-gray05, $bottom: $color-gray04){ + border-top: 1px solid $top; + border-bottom: 1px solid $bottom; } @mixin center($width, $height){ - position: absolute; - top: 50%; - left: 50%; - margin-left: -1/2 * $width; - margin-top: -1/2 * $height; -} -@mixin hide-text{ - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -@mixin user-select($prop){ - -moz-user-select: $prop; - -khtml-user-select: $prop; - -webkit-user-select: $prop; - -o-user-select: $prop; - user-select: $prop; + position: absolute; + top: 50%; + left: 50%; + margin-left: $width/(-2); + margin-top: $height/(-2); + width: $width; + height: $height; } \ No newline at end of file diff --git a/sass/custom/_color.scss b/sass/custom/_color.scss new file mode 100644 index 00000000..7e3c604a --- /dev/null +++ b/sass/custom/_color.scss @@ -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; \ No newline at end of file diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index b5116de3..af8f7641 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -1,110 +1,73 @@ -#archive-header{ - height: 2em; - margin-bottom: 50px; - h1{ - color: rgba(255,255,255,0.7); - font-family: $font-title; - font-weight: normal; - line-height: 1; - } - .search{ - input[type="text"]{ - background: rgba(0,0,0,0.3); - border: none; - color: rgba(255,255,255,0.7); - font: 0.9em $font-title; - padding: 7px 12px; - width: 150px; - } - } -} .archives{ - background: #fff; - border: 1px solid #ddd; - color: $color-font; - margin-bottom: 50px; - box-shadow: 0 0 16px rgba(0,0,0,0.3); - text-align: justify; - position: relative; - @include border-radius(3px); - &:before{ - content: ""; - position: absolute; - top: 0; - left: 0; - width: $meta-width; - height: 100%; - @include background(linear-gradient(left, #ddd, #fff)); - } - .year{ - color: $color-meta; - font: 2em $font-title; - position: absolute; - top: 15px; - left: 20px; - } - article{ - border-left: 1px solid $color-border; - margin-left: $meta-width + 20*2px; - padding: 15px 20px; - position: relative; - &:before{ - content: ""; - position: absolute; - bottom: -6px; - left: -5px; - width: 7px; - height: 7px; - border: 1px solid $color-border; - background: #fff; - z-index: 1; - @include transform(rotate(45deg)); - } - &:last-of-type{ - &:before{ - display: none; - } - } - .title{ - font-family: $font-title; - font-weight: normal; - line-height: 1.1; - a{ - color: $color-font; - } - } - footer{ - color: $color-meta; - font-size: 0.9em; - line-height: 1.6em; - margin-top: 5px; - a{ - color: $color-meta; - &:hover{ - color: darken($color-meta, 20%); - } - } - time{ - &:before{ - content: "\f073"; - font-family: $font-icon; - padding-right: 10px; - } - } - .tags{ - display: inline-block; - margin-left: 25px; - &:before{ - content: "\f02c"; - font-family: $font-icon; - padding-right: 10px; - } - } - } - } -} -.archive{ - box-shadow: none; - border: none; - margin-bottom: 0; + 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";} + } + } } \ No newline at end of file diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss index 43b0bfdd..77b97128 100644 --- a/sass/parts/_article.scss +++ b/sass/parts/_article.scss @@ -1,274 +1,141 @@ -$meta-width: 120px; - article{ - background: #fff; - border: 1px solid #ddd; - color: $color-font; - margin-bottom: 50px; - box-shadow: 0 0 16px rgba(0,0,0,0.3); - text-align: justify; - position: relative; - @include border-radius(3px); - header{ - font-family: $font-title; - padding: 15px 20px; - position: relative; - .title{ - font-weight: normal; - line-height: 1.1; - a{ - color: $color-font; - } - } - time{ - color: $color-meta; - position: absolute; - top: 15px; - left: -$meta-width - 20px; - z-index: 1; - @include user-select(none); - .day{ - font-size: 2em; - } - .month{ - &:before{ - content: " / " - } - } - } - } - .entry-content{ - line-height: 1.6; - padding: 15px 20px 15px; - margin-top: -15px; - p, blockquote, ul, ol, dl, table, iframe, h1, h2, .video-container, .sharing{ - margin-top: 15px; - } - ul, ol, dl{ - margin-left: 20px; - ul, ol, dl{ - margin-top: 0; - } - } - strong{ - font-weight: bold; - } - em{ - font-style: italic; - } - a{ - &:hover{ - text-decoration: underline; - } - } - h1, h2, h3, h4, h5, h6{ - font-family: $font-title; - font-weight: normal; - line-height: 1.1; - } - h1, h2{ - border-top: 1px solid lighten($color-border, 10%); - padding-top: 15px; - } - h3, h4, h5, h6{ - margin-top: 25px; - } - img, video{ - max-width: 100%; - height: auto; - } - blockquote{ - border-top: 1px solid lighten($color-border, 10%); - border-bottom: 1px solid lighten($color-border, 10%); - color: #666; - font-style: italic; - font-size: 1.2em; - font-family: $font-serif; - padding: 10px 25px 25px; - position: relative; - text-align: center; - &:before, &:after{ - position: absolute; - color: $color-border; - line-height: 1; - font-size: 50px; - } - &:before{ - content: "“"; - top: 3px; - left: 0; - } - &:after{ - content: "„"; - bottom: 8px; - right: 0; - } - footer{ - font-size: 0.8em; - color: $color-meta; - line-height: 1.1; - margin-top: 20px; - cite{ - &:before{ - content: "—"; - color: #ccc; - padding: 0 0.5em; - } - } - a{ - color: $color-meta; - text-decoration: underline; - &:hover{ - color: $color-font; - } - } - } - } - iframe{ - border: none; - } - .caption{ - color: $color-meta; - display: block; - font-size: 0.9em; - margin-top: 5px; - &:before{ - font-family: $font-icon; - content: "\f040"; - padding-right: 10px; - } - } - .video-container{ - position: relative; - padding-bottom: 56.25%; - padding-top: 30px; - height: 0; - overflow: hidden; - iframe{ - margin-top: 0; - } - iframe, object, embed{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - .sharing{ - border-top: 1px solid lighten($color-border, 10%); - padding-top: 15px; - iframe{ - margin-top: 0; - } - } - [class^="pullquote"]{ - float: right; - width: 45%; - display: block; - margin: 0.5em 0 1em 1.5em; - color: #666; - font-size: 1.2em; - font-style: italic; - font-family: $font-serif; - position: relative; - padding-left: 35px; - &:before{ - position: absolute; - color: $color-border; - line-height: 1; - font-size: 50px; - top: 0; - content: "“"; - left: 0; - } - } - .pullquote-left{ - float: left; - margin: 0.5em 1.5em 1em 0; - } - } + 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; + } + } + } } - -.post{ - &:before{ - content: ""; - position: absolute; - top: 0; - left: 0; - width: $meta-width; - height: 100%; - @include background(linear-gradient(left, #ddd, #fff)); - } - header, .entry-content{ - border-left: 1px solid $color-border; - margin-left: $meta-width + 20*2px; - } - .entry-content{ - min-height: 130px; - position: relative; - &:before{ - content: ""; - position: absolute; - top: 15px; - left: -5px; - width: 7px; - height: 7px; - border: 1px solid $color-border; - background: #fff; - @include transform(rotate(45deg)); - } - .meta{ - color: $color-meta; - font-size: 0.9em; - position: absolute; - top: 30px; - left: -$meta-width - 20px; - width: $meta-width; - z-index: 1; - a{ - color: $color-meta; - display: block; - &:hover{ - color: darken($color-meta, 20%); - } - } - .tags{ - line-height: 1.6em; - a{ - &:before{ - content: "\f02b"; - font-family: $font-icon; - padding-right: 10px; - } - &:hover{ - text-decoration: none; - } - } - } - .comment{ - margin-top: 20px; - &:before{ - content: "\f075"; - font-family: $font-icon; - padding-right: 8px; - } - &:hover{ - text-decoration: none; - } - } - } - } -} - -.page{ - &:before{ - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 60px; - @include background(linear-gradient(top, #ddd, #fff)); - } +.share{ + padding: 15px 0; + @include border-shadow(); } \ No newline at end of file diff --git a/sass/parts/_comment.scss b/sass/parts/_comment.scss index 3458ff04..05fa5989 100644 --- a/sass/parts/_comment.scss +++ b/sass/parts/_comment.scss @@ -1,4 +1,10 @@ #comment{ - position: relative; - margin: 30px 20px 0; + padding: 30px 0; + @include border-shadow(); + h2.title{ + font-size: 25px; + font-weight: 300; + line-height: 35px; + margin-bottom: 20px; + } } \ No newline at end of file diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index 0c0d19ae..6d478462 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -1,46 +1,6 @@ -@import "social/*.png"; -#footer{ - color: rgba(255, 255, 255, 0.7); - font-size: 0.9em; - line-height: 1.6; - margin-bottom: 50px; - a{ - color: #fff; - &:hover{ - text-decoration: underline; - } - } - .social{ - a{ - display: inline-block; - opacity: 0.7; - width: 16px; - height: 16px; - margin-left: 10px; - float: left; - @include hide-text; - @include transition(0.3s); - &:hover{ - opacity: 1; - } - &.facebook{ - @include social-sprite(facebook); - } - &.google{ - @include social-sprite(google); - } - &.github{ - @include social-sprite(github); - } - &.twitter{ - @include social-sprite(twitter); - } - &.rss{ - @include social-sprite(rss); - } - &.pinterest{ - @include social-sprite(pinterest); - } - } - } +footer{ + padding: 15px 0; + border-top: 1px solid $color-gray05; + text-align: center; + font-size: 0.9em; } \ No newline at end of file diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index bcb60b5c..50ece116 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,26 +1,395 @@ -$nav-height: 64 + 3*2px; +$header-height: 30px; #header{ - height: $nav-height; - padding: 50px 0; - nav{ - font: 1.5em $font-title; - line-height: $nav-height; - ul{ - list-style: none; - text-align: center; - li{ - margin: 0 50px; - display: inline-block; - } - a{ - color: #fff; - opacity: 0.7; - @include transition(0.3s); + 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{ - opacity: 1; + border: 1px solid darken(rgb(0,102,255), 10%); } } - } - } -} \ No newline at end of file + &.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%); + } + } + } + } +} diff --git a/sass/parts/_index.scss b/sass/parts/_index.scss new file mode 100644 index 00000000..833bf020 --- /dev/null +++ b/sass/parts/_index.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss new file mode 100644 index 00000000..cfad01f8 --- /dev/null +++ b/sass/parts/_post.scss @@ -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";} + } +} \ No newline at end of file diff --git a/sass/parts/_syntax.scss b/sass/parts/_syntax.scss index 7a1f8466..0a959882 100644 --- a/sass/parts/_syntax.scss +++ b/sass/parts/_syntax.scss @@ -38,350 +38,350 @@ $solarized: light !default; $base3: $_base03; } -$pre-bg: #eee; -$pre-border: lighten($color-border, 10%); +$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: 15px; - padding: 5px 15px; - overflow-x: auto; - @include border-radius(5px); - code{ - background: none; - border: none; - padding: 0; - margin: 0; - @include border-radius(0); - } - } + 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: 15px; - 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 !important; - td{ - text-align: left; - } - } - td.code{ - width: 100%; - padding-left: 15px; - overflow-x: auto; - } + 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-meta; - padding: 30px 15px 5px; - margin-top: 15px; - 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 $color-font; - line-height: 1.5; - margin: 0 -16px -6px; - padding: 5px 15px; - @include background(linear-gradient(top, $pre-bg, $pre-border)); - a{ - color: $color-main01; - &: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)); - } - } - } - } + 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 */ + .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 */ } diff --git a/sass/parts/_twitter.scss b/sass/parts/_twitter.scss new file mode 100644 index 00000000..6a8e6a14 --- /dev/null +++ b/sass/parts/_twitter.scss @@ -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; + } + } + } + } +} \ No newline at end of file diff --git a/sass/plugins/_fancybox.scss b/sass/plugins/_fancybox.scss index 9dfb6f92..20a94377 100644 --- a/sass/plugins/_fancybox.scss +++ b/sass/plugins/_fancybox.scss @@ -19,9 +19,7 @@ background: #f9f9f9; color: #444; text-shadow: none; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + @include border-radius(4px); } .fancybox-opened { @@ -29,9 +27,7 @@ } .fancybox-opened .fancybox-skin { - -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); + @include box-shadow(0 10px 25px rgba(0, 0, 0, 0.5)); } .fancybox-outer, .fancybox-inner { @@ -203,14 +199,12 @@ padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; 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 { diff --git a/sass/screen.scss b/sass/screen.scss index 96025e39..1f83d49a 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -1,5 +1,7 @@ @import "compass"; +@import "custom/color"; + @import "base"; @import "parts"; @import "plugins"; \ No newline at end of file diff --git a/source/_includes/after_footer.html b/source/_includes/after_footer.html index 8246c1f3..09d93b76 100644 --- a/source/_includes/after_footer.html +++ b/source/_includes/after_footer.html @@ -1,4 +1,5 @@ -{% include fancybox.html %} -{% include phasebeam.html %} + +{% include fancybox.html %} {% include disqus.html %} +{% include google_analytics.html %} {% include custom/after_footer.html %} \ No newline at end of file diff --git a/source/_includes/archive_post.html b/source/_includes/archive_post.html index c47dc424..65e923f1 100644 --- a/source/_includes/archive_post.html +++ b/source/_includes/archive_post.html @@ -5,12 +5,15 @@ {% unless forloop.first %} {% endunless %} -
{{ date | date: "%Y" }}
+

{{ date | date: "%Y" }}

{% endunless %} -
-

{{ post.title }}

-
- -
{{ post.categories | category_links }}
-
+
+

{{post.title}}

+
+ {{ date | date: "%b %e" }} + {% include post/categories.html %} + {% if site.disqus_short_name and post.comments == true and site.disqus_show_comment_count == true %} + Comments + {% endif %} +
\ No newline at end of file diff --git a/source/_includes/article.html b/source/_includes/article.html index aee6efb1..13861563 100644 --- a/source/_includes/article.html +++ b/source/_includes/article.html @@ -1,32 +1,26 @@ -
- {% if index %} -

{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

- {% else %} -

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

- {% endif %} - {% if post or page.single %}{% include post/date.html %}{% endif %} -
-
- {% if index %} - {{ content | excerpt }} - {% else %} - {{ content }} - {% unless index %} - {% include post/sharing.html %} - {% endunless %} - {% endif %} - {% if post or page.single %} -
- {% include post/categories.html %} - {% if site.disqus_short_name and site.disqus_show_comment_count == true %} - {% if post.comments == true %} - Comments - {% endif %} - {% if page.comments == true %} - Comments - {% endif %} - {% endif %} -
- {% endif %} -
-{% include post/comment.html %} \ No newline at end of file +{% if index %} +

+ {% if post.external-url %} + + {% else %} + + {% endif %} + {% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %} +

+
+ {{ content | excerpt }} + {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} + {% if excerpted == 'true' %}{{ site.excerpt_link }}{% endif %} +
+{% else %} +

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

+
{{ content }}
+{% endif %} + +
+
{% include post/date.html %}{{ time }}
+
{% include post/categories.html %}
+ {% if site.disqus_short_name and site.disqus_show_comment_count == true %} + Comments + {% endif %} +
\ No newline at end of file diff --git a/source/_includes/banner.html b/source/_includes/banner.html new file mode 100644 index 00000000..af38f032 --- /dev/null +++ b/source/_includes/banner.html @@ -0,0 +1,15 @@ +{% if site.twitter_user and site.twitter_tweet_count > 0 %} + + + +{% endif %} \ No newline at end of file diff --git a/source/_includes/custom/footer.html b/source/_includes/custom/footer.html index 2a654ea5..d6b4a362 100644 --- a/source/_includes/custom/footer.html +++ b/source/_includes/custom/footer.html @@ -1 +1,6 @@ -

© {{ site.time | date: "%Y" }} {{ site.author }}

\ No newline at end of file +Copyright © {{ site.time | date: "%Y" }} +{% if site.author %} + {{ site.author }} +{% else %} + {{ site.title }} +{% endif %} diff --git a/source/_includes/custom/navigation.html b/source/_includes/custom/navigation.html index b207ca4a..f16a7a2a 100644 --- a/source/_includes/custom/navigation.html +++ b/source/_includes/custom/navigation.html @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/source/_includes/fancybox.html b/source/_includes/fancybox.html index 0529d671..fd5bcfdb 100644 --- a/source/_includes/fancybox.html +++ b/source/_includes/fancybox.html @@ -1,18 +1,6 @@ \ No newline at end of file diff --git a/source/_includes/footer.html b/source/_includes/footer.html index 72e2c3df..aa810747 100644 --- a/source/_includes/footer.html +++ b/source/_includes/footer.html @@ -1,20 +1 @@ - -{% include custom/footer.html %} -
\ No newline at end of file +{% include custom/footer.html %} \ No newline at end of file diff --git a/source/_includes/google_analytics.html b/source/_includes/google_analytics.html index 4d4d5969..2950c768 100644 --- a/source/_includes/google_analytics.html +++ b/source/_includes/google_analytics.html @@ -1,13 +1,13 @@ {% if site.google_analytics_tracking_id %} - + (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); + })(); + {% endif %} diff --git a/source/_includes/head.html b/source/_includes/head.html index 16d74d6f..2adee9f3 100644 --- a/source/_includes/head.html +++ b/source/_includes/head.html @@ -2,19 +2,19 @@ - {% if page.title %}{{ page.title }} | {% endif %}{{ site.title }} + {% if page.title %}{{ page.title }} - {% endif %}{{ site.title }} {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %} {% if page.keywords %}{% endif %} + - - {% include google_analytics.html %} + {% include custom/head.html %} \ No newline at end of file diff --git a/source/_includes/header.html b/source/_includes/header.html index f2961830..5fb456ae 100644 --- a/source/_includes/header.html +++ b/source/_includes/header.html @@ -1,2 +1,56 @@ - -{% include custom/header.html %} \ No newline at end of file +

{{ site.title }}

+ + + +{% include custom/header.html %} diff --git a/source/_includes/navigation.html b/source/_includes/navigation.html index 2f0e6280..888042ea 100644 --- a/source/_includes/navigation.html +++ b/source/_includes/navigation.html @@ -1,15 +1 @@ -
    -
  • RSS
  • - {% if site.subscribe_email %} -
  • Email
  • - {% endif %} -
- {% if site.simple_search %} -
-
- - -
-
- {% endif %} -{% include custom/navigation.html %} +{% include custom/navigation.html %} \ No newline at end of file diff --git a/source/_includes/post/categories.html b/source/_includes/post/categories.html index 9763a528..8c1c81f7 100644 --- a/source/_includes/post/categories.html +++ b/source/_includes/post/categories.html @@ -1,6 +1,8 @@ -{% capture category %}{% if post %}{{ post.categories | category_links | replace:', ','' }}{% else %}{{ page.categories | category_links | replace:', ','' }}{% endif %}{% endcapture %} -{% capture has_category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %} - -{% unless has_category == '0' %} -
{{ category }}
-{% endunless %} \ No newline at end of file +{% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %} +{% unless category == '0' %} +{% if post %} + {{ post.categories | category_links }} +{% else %} + {{ page.categories | category_links }} +{% endif %} +{% endunless %} diff --git a/source/_includes/post/date.html b/source/_includes/post/date.html index fd27160a..ecf1ad71 100644 --- a/source/_includes/post/date.html +++ b/source/_includes/post/date.html @@ -6,14 +6,10 @@ {% capture updated_formatted %}{{ page.updated_formatted }}{{ post.updated_formatted }}{% endcapture %} {% capture was_updated %}{{ updated | size }}{% endcapture %} +{% if has_date != '0' %} + {% capture time %}{% endcapture %} +{% endif %} + {% if was_updated != '0' %} - -{% else %} - {% if has_date != '0' %} - - {% endif %} -{% endif %} \ No newline at end of file + {% capture updated %}{% endcapture %} +{% else %}{% assign updated = false %}{% endif %} \ No newline at end of file diff --git a/source/_includes/post/sharing.html b/source/_includes/post/sharing.html index 205664d2..735c992f 100644 --- a/source/_includes/post/sharing.html +++ b/source/_includes/post/sharing.html @@ -1,4 +1,4 @@ - diff --git a/source/_layouts/category_index.html b/source/_layouts/category_index.html index 228b6ab5..8ab5341a 100644 --- a/source/_layouts/category_index.html +++ b/source/_layouts/category_index.html @@ -2,14 +2,6 @@ layout: default --- -
-

{{ page.title }}

- -
- {% for post in site.categories[page.category] %} {% include archive_post.html %} -{% endfor %} \ No newline at end of file +{% endfor %} diff --git a/source/_layouts/default.html b/source/_layouts/default.html index 18f16dfa..a3fc49db 100644 --- a/source/_layouts/default.html +++ b/source/_layouts/default.html @@ -3,6 +3,9 @@ + {% unless page.banner == false %} + {% include banner.html %} + {% endunless %}
{{ content | expand_urls: root_url }}
{% include footer.html %}
{% include after_footer.html %} diff --git a/source/_layouts/page.html b/source/_layouts/page.html index 5f4baca5..5c1381dc 100644 --- a/source/_layouts/page.html +++ b/source/_layouts/page.html @@ -2,4 +2,18 @@ layout: default --- -
{% include article.html %}
\ No newline at end of file +
+ {% if page.title %} +

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

+ {% endif %} +
{{ content }}
+
+{% unless page.sharing == false %} + {% include post/sharing.html %} +{% endunless %} +{% if site.disqus_short_name and page.comments == true %} +
+

Comments

+
{% include post/disqus_thread.html %}
+
+{% endif %} diff --git a/source/_layouts/post.html b/source/_layouts/post.html index e43605f0..eed607e3 100644 --- a/source/_layouts/post.html +++ b/source/_layouts/post.html @@ -3,4 +3,13 @@ layout: default single: true --- -
{% include article.html %}
\ No newline at end of file +
{% include article.html %}
+{% unless page.sharing == false %} + {% include post/sharing.html %} +{% endunless %} +{% if site.disqus_short_name and page.comments == true %} +
+

Comments

+
{% include post/disqus_thread.html %}
+
+{% endif %} \ No newline at end of file diff --git a/source/blog/archives/index.html b/source/blog/archives/index.html index 0402bd6a..e4bc23ca 100644 --- a/source/blog/archives/index.html +++ b/source/blog/archives/index.html @@ -1,16 +1,8 @@ --- layout: default -title: Archives +title: Blog Archives --- -
-

Archives

- -
- {% for post in site.posts reverse %} {% include archive_post.html %} {% endfor %} \ No newline at end of file diff --git a/source/images/loading_gray.gif b/source/images/loading_gray.gif new file mode 100644 index 00000000..945a2aa1 Binary files /dev/null and b/source/images/loading_gray.gif differ diff --git a/source/images/loading_pacman.gif b/source/images/loading_pacman.gif new file mode 100644 index 00000000..8f61add1 Binary files /dev/null and b/source/images/loading_pacman.gif differ diff --git a/source/images/social/coderwall.png b/source/images/social/coderwall.png new file mode 100644 index 00000000..48e32cfc Binary files /dev/null and b/source/images/social/coderwall.png differ diff --git a/source/images/social/delicious.png b/source/images/social/delicious.png new file mode 100644 index 00000000..a936776b Binary files /dev/null and b/source/images/social/delicious.png differ diff --git a/source/images/social/linkedin.png b/source/images/social/linkedin.png new file mode 100644 index 00000000..1a7ae919 Binary files /dev/null and b/source/images/social/linkedin.png differ diff --git a/source/images/social/pinboard.png b/source/images/social/pinboard.png new file mode 100644 index 00000000..2961f30f Binary files /dev/null and b/source/images/social/pinboard.png differ diff --git a/source/index.html b/source/index.html index d87fe87a..8e298160 100644 --- a/source/index.html +++ b/source/index.html @@ -5,6 +5,14 @@ layout: default {% assign index = true %} {% for post in paginator.posts %} {% assign content = post.content %} -
{% include article.html %}
+
{% include article.html %}
{% endfor %} -{% include pagination.html %} \ No newline at end of file + \ No newline at end of file diff --git a/source/javascripts/slash.js b/source/javascripts/slash.js new file mode 100644 index 00000000..52885722 --- /dev/null +++ b/source/javascripts/slash.js @@ -0,0 +1,62 @@ +(function($){ + // Open external links in new window + var externalLinks = function(){ + var host = location.host; + + $('body').on('click', 'a', function(e){ + var href = this.href, + link = href.replace(/https?:\/\/([^\/]+)(.*)/, '$1'); + + if (link != '' && link != host && !$(this).hasClass('fancybox')){ + window.open(href); + e.preventDefault(); + } + }); + }; + + // Append caption after pictures + var appendCaption = function(){ + $('.entry-content').each(function(i){ + var _i = i; + $(this).find('img').each(function(){ + var alt = this.alt; + + if (alt != ''){ + $(this).after(''+alt+''); + } + + $(this).wrap(''); + }); + }); + }; + + externalLinks(); // Delete or comment this line to disable opening external links in new window + appendCaption(); // Delete or comment this line to disable caption + + var mobilenav = $('#mobile-nav'); + + $('html').click(function(){ + mobilenav.find('.on').each(function(){ + $(this).removeClass('on').next().hide(); + }); + }); + + mobilenav.on('click', '.menu .button', function(){ + if (!$(this).hasClass('on')){ + var width = $(this).width() + 42; + $(this).addClass('on').next().show().css({width: width}); + } else { + $(this).removeClass('on').next().hide(); + } + }).on('click', '.search .button', function(){ + if (!$(this).hasClass('on')){ + var width = mobilenav.width() - 51; + mobilenav.children('.menu').children().eq(0).removeClass('on').next().hide(); + $(this).addClass('on').next().show().css({width: width}).children().children().eq(0).focus(); + } else { + $(this).removeClass('on').next().hide().children().children().eq(0).val(''); + } + }).click(function(e){ + e.stopPropagation(); + }); +})(jQuery); \ No newline at end of file diff --git a/source/javascripts/twitter.js b/source/javascripts/twitter.js index 3e2dd0d7..00ecc365 100644 --- a/source/javascripts/twitter.js +++ b/source/javascripts/twitter.js @@ -1,78 +1,92 @@ -// JSON-P Twitter fetcher for Octopress -// (c) Brandon Mathis // MIT License +(function($){ + $.fn.getTwitterFeed = function(userid, count, reply){ + var banner = $(this), + feed = banner.find('.feed'), + interval = 10000, + speed = 500; -/* Sky Slavin, Ludopoli. MIT license. * based on JavaScript Pretty Date * Copyright (c) 2008 John Resig (jquery.com) * Licensed under the MIT license. */ -function prettyDate(time) { - if (navigator.appName === 'Microsoft Internet Explorer') { - return ""; // because IE date parsing isn't fun. - } - var say = { - just_now: " now", - minute_ago: "1m", - minutes_ago: "m", - hour_ago: "1h", - hours_ago: "h", - yesterday: "1d", - days_ago: "d", - last_week: "1w", - weeks_ago: "w" - }; + var linkify = function(text){ + text = text.replace(/(https?:\/\/)([\w\-:;?&=+.%#\/]+)/gi, '$2').replace(/(^|\W)@(\w+)/g, '$1@$2').replace(/(^|\W)#(\w+)/g, '$1#$2'); - var current_date = new Date(), - current_date_time = current_date.getTime(), - current_date_full = current_date_time + (1 * 60000), - date = new Date(time), - diff = ((current_date_full - date.getTime()) / 1000), - day_diff = Math.floor(diff / 86400); + return text; + } - if (isNaN(day_diff) || day_diff < 0) { return ""; } + var relativeDate = function(date){ + if (navigator.appName === 'Microsoft Internet Explorer') return ''; - return day_diff === 0 && ( - diff < 60 && say.just_now || - diff < 120 && say.minute_ago || - diff < 3600 && Math.floor(diff / 60) + say.minutes_ago || - diff < 7200 && say.hour_ago || - diff < 86400 && Math.floor(diff / 3600) + say.hours_ago) || - day_diff === 1 && say.yesterday || - day_diff < 7 && day_diff + say.days_ago || - day_diff === 7 && say.last_week || - day_diff > 7 && Math.ceil(day_diff / 7) + say.weeks_ago; -} + var unit = { + now: 'Now', + minute: '1 min', + minutes: ' mins', + hour: '1 hr', + hours: ' hrs', + day: 'Yesterday', + days: ' days', + week: '1 week', + weeks: ' weeks' + }; -function linkifyTweet(text, url) { - // Linkify urls, usernames, hashtags - text = text.replace(/(https?:\/\/)([\w\-:;?&=+.%#\/]+)/gi, '$2') - .replace(/(^|\W)@(\w+)/g, '$1@$2') - .replace(/(^|\W)#(\w+)/g, '$1#$2'); + var current = new Date(), + tweet = new Date(date), + diff = (((current.getTime() + (1 * 60000)) - tweet.getTime()) / 1000), + day_diff = Math.floor(diff / 86400); + + if (day_diff == 0){ + if (diff < 60) return unit.now; + else if (diff < 120) return unit.minute; + else if (diff < 3600) return Math.floor(diff / 60) + unit.minutes; + else if (diff < 7200) return unit.hour; + else if (diff < 86400) return Math.floor(diff / 3600) + unit.hours; + else return ''; + } else if (day_diff == 1) { + return unit.day; + } else if (day_diff < 7) { + return day_diff + unit.days; + } else if (day_diff == 7) { + return unit.week; + } else if (day_diff > 7) { + return Math.ceil(day_diff / 7) + unit.weeks; + } else { + return ''; + } + } - // Use twitter's api to replace t.co shortened urls with expanded ones. - for (var u in url) { - if(url[u].expanded_url != null){ - var shortUrl = new RegExp(url[u].url, 'g'); - text = text.replace(shortUrl, url[u].expanded_url); - var shortUrl = new RegExp(">"+(url[u].url.replace(/https?:\/\//, '')), 'g'); - text = text.replace(shortUrl, ">"+url[u].display_url); - } - } - return text -} + if ($(window).width() > 600){ + var url = 'https://api.twitter.com/1/statuses/user_timeline/'+userid+'.json?count='+count+'&exclude_replies='+(reply ? '0' : '1')+'&trim_user=true&callback=?'; + banner.show(); + $.getJSON(url, function(json){ + var length = json.length, + fragment = document.createDocumentFragment(), + counts = 0, + timeout; -function showTwitterFeed(tweets, twitter_user) { - var timeline = document.getElementById('tweets'), - content = ''; + for (var i=0; i'+relativeDate(json[i].created_at)+''; + fragment.appendChild(item); + } - for (var t in tweets) { - content += '
  • '+'

    '+''+prettyDate(tweets[t].created_at)+''+linkifyTweet(tweets[t].text.replace(/\n/g, '
    '), tweets[t].entities.urls)+'

    '+'
  • '; - } - timeline.innerHTML = content; -} + var play = function(){ + timeout = setTimeout(function(){ + feed.animate({top: '-='+30}, speed, function(){ + $(this).append($(this).children().eq(counts).clone()); + counts++; + play(); + }); + }, interval); + } -function getTwitterFeed(user, count, replies) { - count = parseInt(count, 10); - $.ajax({ - url: "https://api.twitter.com/1/statuses/user_timeline/" + user + ".json?trim_user=true&count=" + (count + 20) + "&include_entities=1&exclude_replies=" + (replies ? "0" : "1") + "&callback=?" - , type: 'jsonp' - , error: function (err) { $('#tweets li.loading').addClass('error').text("Twitter's busted"); } - , success: function(data) { showTwitterFeed(data.slice(0, count), user); } - }) -} + var pause = function(){ + clearTimeout(timeout); + } + + banner.on('mouseenter', pause).on('mouseleave', play) + .children('.loading').hide().end() + .children('.container').show() + .children('.feed').append(fragment); + + play(); + }); + } + }; +})(jQuery); \ No newline at end of file