From 00b0d2fde3ce8d6ccaa9cd0fcf4fad208c820198 Mon Sep 17 00:00:00 2001 From: wona Date: Sun, 30 Sep 2012 15:14:20 +0530 Subject: [PATCH] added a theme --- .themes/slash | 1 + _config.yml | 12 +- sass/_base.scss | 8 +- sass/_parts.scss | 9 + sass/_plugins.scss | 1 + sass/base/_color.scss | 7 + sass/base/_font.scss | 17 + sass/base/_layout.scss | 221 ++-------- sass/base/_typography.scss | 137 +------ sass/base/_utilities.scss | 46 +-- sass/parts/_archive.scss | 73 ++++ sass/parts/_article.scss | 140 +++++++ sass/parts/_comment.scss | 10 + sass/parts/_footer.scss | 6 + sass/parts/_header.scss | 381 +++++++++++++++++ sass/parts/_index.scss | 43 ++ sass/parts/_post.scss | 43 ++ sass/parts/_syntax.scss | 387 ++++++++++++++++++ sass/parts/_twitter.scss | 49 +++ sass/plugins/_fancybox.scss | 228 +++++++++++ sass/screen.scss | 9 +- source/_includes/after_footer.html | 8 +- source/_includes/archive_post.html | 27 +- source/_includes/article.html | 41 +- source/_includes/banner.html | 15 + source/_includes/custom/after_footer.html | 3 - source/_includes/custom/footer.html | 11 +- source/_includes/custom/head.html | 3 - source/_includes/custom/header.html | 7 +- source/_includes/custom/navigation.html | 7 +- source/_includes/fancybox.html | 6 + source/_includes/google_analytics.html | 20 +- source/_includes/head.html | 41 +- source/_includes/header.html | 52 +++ source/_includes/navigation.html | 16 +- source/_includes/post/categories.html | 12 +- source/_includes/post/sharing.html | 24 +- source/_layouts/category_index.html | 14 +- source/_layouts/default.html | 19 +- source/_layouts/page.html | 49 +-- source/_layouts/post.html | 46 +-- source/_posts/2011-08-19-hello.markdown | 20 + ...stop-worrying-and-love-the-matrix.markdown | 38 ++ ...1-09-04-living-in-the-ivory-tower.markdown | 25 ++ .../2011-09-04-watch-out-for-more.markdown | 27 ++ ...1-09-19-Ghissu-Ban-Gaya-Gentleman.markdown | 27 ++ ...dates-his-status-to-rkb-muradabad.markdown | 21 + .../2011-10-19-unknown-destiny.markdown | 21 + .../2011-10-24-bulldozed-emotions.markdown | 31 ++ ...-11-22-the-curse-of-being-in-meta.markdown | 28 ++ source/_posts/2012-01-11-basti-live.markdown | 44 ++ .../2012-08-24-the-lost-paper-trail.markdown | 21 + source/blog/archives/index.html | 18 +- source/favicon.png | Bin 400 -> 22627 bytes source/font/fontawesome-webfont.eot | Bin 0 -> 42272 bytes source/font/fontawesome-webfont.svg | 175 ++++++++ source/font/fontawesome-webfont.svgz | Bin 0 -> 21845 bytes source/font/fontawesome-webfont.ttf | Bin 0 -> 41916 bytes source/font/fontawesome-webfont.woff | Bin 0 -> 23416 bytes source/images/fancybox/blank.gif | Bin 0 -> 43 bytes source/images/fancybox/fancybox_loading.gif | Bin 0 -> 3866 bytes source/images/fancybox/fancybox_sprite.png | Bin 0 -> 2277 bytes source/images/loading_gray.gif | Bin 0 -> 8787 bytes source/images/loading_pacman.gif | Bin 0 -> 1928 bytes source/images/social/delicious.png | Bin 0 -> 1064 bytes source/images/social/facebook.png | Bin 0 -> 1107 bytes source/images/social/github.png | Bin 0 -> 1205 bytes source/images/social/google.png | Bin 0 -> 1223 bytes source/images/social/linkedin.png | Bin 0 -> 1371 bytes source/images/social/pinterest.png | Bin 0 -> 1128 bytes source/images/social/rss.png | Bin 0 -> 1250 bytes source/images/social/twitter.png | Bin 0 -> 1073 bytes source/index.html | 35 +- source/javascripts/jquery.fancybox.pack.js | 35 ++ source/javascripts/slash.js | 62 +++ source/javascripts/twitter.js | 152 +++---- 76 files changed, 2345 insertions(+), 684 deletions(-) create mode 160000 .themes/slash create mode 100644 sass/_parts.scss create mode 100644 sass/_plugins.scss create mode 100644 sass/base/_color.scss create mode 100644 sass/base/_font.scss create mode 100644 sass/parts/_archive.scss create mode 100644 sass/parts/_article.scss create mode 100644 sass/parts/_comment.scss create mode 100644 sass/parts/_footer.scss create mode 100644 sass/parts/_header.scss create mode 100644 sass/parts/_index.scss create mode 100644 sass/parts/_post.scss create mode 100644 sass/parts/_syntax.scss create mode 100644 sass/parts/_twitter.scss create mode 100644 sass/plugins/_fancybox.scss create mode 100644 source/_includes/banner.html create mode 100644 source/_includes/fancybox.html create mode 100644 source/_posts/2011-08-19-hello.markdown create mode 100644 source/_posts/2011-08-22-the-illusion-of-choice-how-i-learned-to-stop-worrying-and-love-the-matrix.markdown create mode 100644 source/_posts/2011-09-04-living-in-the-ivory-tower.markdown create mode 100644 source/_posts/2011-09-04-watch-out-for-more.markdown create mode 100644 source/_posts/2011-09-19-Ghissu-Ban-Gaya-Gentleman.markdown create mode 100644 source/_posts/2011-09-23-rkb-resident-mistakenly-updates-his-status-to-rkb-muradabad.markdown create mode 100644 source/_posts/2011-10-19-unknown-destiny.markdown create mode 100644 source/_posts/2011-10-24-bulldozed-emotions.markdown create mode 100644 source/_posts/2011-11-22-the-curse-of-being-in-meta.markdown create mode 100644 source/_posts/2012-01-11-basti-live.markdown create mode 100644 source/_posts/2012-08-24-the-lost-paper-trail.markdown create mode 100755 source/font/fontawesome-webfont.eot create mode 100755 source/font/fontawesome-webfont.svg create mode 100755 source/font/fontawesome-webfont.svgz create mode 100755 source/font/fontawesome-webfont.ttf create mode 100755 source/font/fontawesome-webfont.woff create mode 100644 source/images/fancybox/blank.gif create mode 100644 source/images/fancybox/fancybox_loading.gif create mode 100644 source/images/fancybox/fancybox_sprite.png create mode 100644 source/images/loading_gray.gif create mode 100644 source/images/loading_pacman.gif create mode 100644 source/images/social/delicious.png create mode 100644 source/images/social/facebook.png create mode 100644 source/images/social/github.png create mode 100644 source/images/social/google.png create mode 100644 source/images/social/linkedin.png create mode 100644 source/images/social/pinterest.png create mode 100644 source/images/social/rss.png create mode 100644 source/images/social/twitter.png create mode 100644 source/javascripts/jquery.fancybox.pack.js create mode 100644 source/javascripts/slash.js diff --git a/.themes/slash b/.themes/slash new file mode 160000 index 0000000..c0f1e2c --- /dev/null +++ b/.themes/slash @@ -0,0 +1 @@ +Subproject commit c0f1e2c2f75bb59d0b5a3570c0a672e12e00a3f4 diff --git a/_config.yml b/_config.yml index 51fcd30..6d5fec9 100644 --- a/_config.yml +++ b/_config.yml @@ -3,9 +3,9 @@ # ----------------------- # url: http://wona.github.com -title: My Octopress Blog -subtitle: A blogging framework for hackers. -author: Your Name +title: WONA Blog +subtitle: The blog-space of Watch Out News Agency, IIT Roorkee. +author: Watchout NewsAgency, IIT-R simple_search: http://google.com/search description: @@ -38,7 +38,7 @@ pygments: false # default python pygments have been replaced by pygments.rb paginate: 10 # Posts per page on the blog index pagination_dir: blog # Directory base for pagination URLs eg. /blog/page/2/ -recent_posts: 5 # Posts in the sidebar Recent Posts section +recent_posts: 7 # Posts in the sidebar Recent Posts section excerpt_link: "Read on →" # "Continue reading" link text at the bottom of excerpted articles titlecase: true # Converts page and post titles to titlecase @@ -72,7 +72,7 @@ twitter_show_follower_count: false twitter_tweet_button: true # Google +1 -google_plus_one: false +google_plus_one: true google_plus_one_size: medium # Google Plus Profile @@ -96,4 +96,4 @@ disqus_show_comment_count: false google_analytics_tracking_id: # Facebook Like -facebook_like: false +facebook_like: true diff --git a/sass/_base.scss b/sass/_base.scss index 05fdd00..77f309c 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -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"; \ No newline at end of file diff --git a/sass/_parts.scss b/sass/_parts.scss new file mode 100644 index 0000000..b7ee304 --- /dev/null +++ b/sass/_parts.scss @@ -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"; \ No newline at end of file diff --git a/sass/_plugins.scss b/sass/_plugins.scss new file mode 100644 index 0000000..cf82d1c --- /dev/null +++ b/sass/_plugins.scss @@ -0,0 +1 @@ +@import "plugins/fancybox"; \ No newline at end of file diff --git a/sass/base/_color.scss b/sass/base/_color.scss new file mode 100644 index 0000000..ec6ed3b --- /dev/null +++ b/sass/base/_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/base/_font.scss b/sass/base/_font.scss new file mode 100644 index 0000000..907e406 --- /dev/null +++ b/sass/base/_font.scss @@ -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; +} \ No newline at end of file diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 8190342..22e5804 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -1,192 +1,49 @@ -$max-width: 1200px !default; +$max-width: 1000px; -// 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; - } - } +*{ + margin: 0; + padding: 0; } - -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; - } +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; + } } - -#content { - overflow: hidden; - > div, > article { width: 100%; } +h1{ + font-size: 1.8em; } - -aside.sidebar { - float: none; - padding: 0 $pad-min 1px; - background-color: lighten($sidebar-bg, 2); - border-top: 1px solid $sidebar-border; - @extend .group; +h2{ + font-size: 1.5em; } - -.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; } +h3{ + font-size: 1.3em; } - -.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; } +a{ + text-decoration: none; + outline-width: 0; + color: $color-main; } - -@media only screen and (min-width: 550px) { - body > header { font-size: $header-font-size; } +.alignleft{ + float: left; } -@media only screen and (min-width: 750px) { - aside.sidebar { @include collapse-sidebar; } +.alignright{ + float: right; } -#main, #content, .sidebar { - @extend .group; +.clearfix{ + @include pie-clearfix; } -@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; } - } -} - +.inner{ + 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 b68753f..57f5e1f 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 2d49e65..63aae7a 100644 --- a/sass/base/_utilities.scss +++ b/sass/base/_utilities.scss @@ -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; +} \ No newline at end of file diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss new file mode 100644 index 0000000..af8f764 --- /dev/null +++ b/sass/parts/_archive.scss @@ -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";} + } + } +} \ No newline at end of file diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss new file mode 100644 index 0000000..fdcb74d --- /dev/null +++ b/sass/parts/_article.scss @@ -0,0 +1,140 @@ +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; + } + h1.title{ + 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(); +} \ No newline at end of file diff --git a/sass/parts/_comment.scss b/sass/parts/_comment.scss new file mode 100644 index 0000000..ead3ebc --- /dev/null +++ b/sass/parts/_comment.scss @@ -0,0 +1,10 @@ +#comment{ + padding: 30px 0; + @include border-shadow(); + h1.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 new file mode 100644 index 0000000..6d47846 --- /dev/null +++ b/sass/parts/_footer.scss @@ -0,0 +1,6 @@ +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 new file mode 100644 index 0000000..42f46d3 --- /dev/null +++ b/sass/parts/_header.scss @@ -0,0 +1,381 @@ +$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%); + } + } + &.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 0000000..833bf02 --- /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 0000000..5259265 --- /dev/null +++ b/sass/parts/_post.scss @@ -0,0 +1,43 @@ +.post{ + h1.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 new file mode 100644 index 0000000..0a95988 --- /dev/null +++ b/sass/parts/_syntax.scss @@ -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 */ +} diff --git a/sass/parts/_twitter.scss b/sass/parts/_twitter.scss new file mode 100644 index 0000000..6a8e6a1 --- /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 new file mode 100644 index 0000000..20a9437 --- /dev/null +++ b/sass/plugins/_fancybox.scss @@ -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); +} \ No newline at end of file diff --git a/sass/screen.scss b/sass/screen.scss index 1899f60..96025e3 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -1,10 +1,5 @@ @import "compass"; -@include global-reset; -@include reset-html5; -@import "custom/colors"; -@import "custom/fonts"; -@import "custom/layout"; @import "base"; -@import "partials"; -@import "custom/styles"; +@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 08b8e34..09d93b7 100644 --- a/source/_includes/after_footer.html +++ b/source/_includes/after_footer.html @@ -1,5 +1,5 @@ + +{% include fancybox.html %} {% 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 %} \ No newline at end of file diff --git a/source/_includes/archive_post.html b/source/_includes/archive_post.html index fef3328..2b006f6 100644 --- a/source/_includes/archive_post.html +++ b/source/_includes/archive_post.html @@ -1,8 +1,19 @@ -{% capture category %}{{ post.categories | size }}{% endcapture %} -

{{post.title}}

- -{% if category != '0' %} - -{% endif %} +{% capture date %}{{ post.date }}{% endcapture %} +{% capture this_year %}{{ date | date: "%Y" }}{% endcapture %} +{% unless year == this_year %} + {% assign year = this_year %} + {% unless forloop.first %} + + {% endunless %} +

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

+{% endunless %} +
+

{{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 23f4884..1e1c835 100644 --- a/source/_includes/article.html +++ b/source/_includes/article.html @@ -1,28 +1,19 @@ -{% unless page.no_header %} -
- {% if index %} -

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

- {% else %} -

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

- {% endif %} - {% unless page.meta == false %} -

- {% 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 %} - | Comments - {% endif %} -

- {% endunless %} -
-{% endunless %} {% if index %} -
{{ content | excerpt }}
- {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} - {% if excerpted == 'true' %} - - {% 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 %} -
{{ content }}
+

{% 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 0000000..9a156da --- /dev/null +++ b/source/_includes/banner.html @@ -0,0 +1,15 @@ +{% if site.twitter_user and site.twitter_tweet_count > 0 %} + + + +{% endif %} diff --git a/source/_includes/custom/after_footer.html b/source/_includes/custom/after_footer.html index bce25dd..e69de29 100644 --- a/source/_includes/custom/after_footer.html +++ b/source/_includes/custom/after_footer.html @@ -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 %} diff --git a/source/_includes/custom/footer.html b/source/_includes/custom/footer.html index e12f067..9680f59 100644 --- a/source/_includes/custom/footer.html +++ b/source/_includes/custom/footer.html @@ -1,4 +1,7 @@ -

- Copyright © {{ site.time | date: "%Y" }} - {{ site.author }} - - Powered by Octopress -

+Copyright © {{ site.time | date: "%Y" }} +{% if site.author %} + {{ site.author }} +{% else %} + {{ site.title }} +{% endif %} +Powered by Octopress diff --git a/source/_includes/custom/head.html b/source/_includes/custom/head.html index 85879f4..e69de29 100644 --- a/source/_includes/custom/head.html +++ b/source/_includes/custom/head.html @@ -1,3 +0,0 @@ - - - diff --git a/source/_includes/custom/header.html b/source/_includes/custom/header.html index 35f9c05..8b13789 100644 --- a/source/_includes/custom/header.html +++ b/source/_includes/custom/header.html @@ -1,6 +1 @@ -
-

{{ site.title }}

- {% if site.subtitle %} -

{{ site.subtitle }}

- {% endif %} -
+ diff --git a/source/_includes/custom/navigation.html b/source/_includes/custom/navigation.html index d6bd424..46380f2 100644 --- a/source/_includes/custom/navigation.html +++ b/source/_includes/custom/navigation.html @@ -1,4 +1,5 @@ -