diff options
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/_plugin.scss | 1 | ||||
| -rw-r--r-- | sass/_plugins.scss | 1 | ||||
| -rw-r--r-- | sass/base/_color.scss | 14 | ||||
| -rw-r--r-- | sass/base/_font.scss | 6 | ||||
| -rw-r--r-- | sass/base/_layout.scss | 14 | ||||
| -rw-r--r-- | sass/base/_utilities.scss | 2 | ||||
| -rw-r--r-- | sass/parts/_archive.scss | 48 | ||||
| -rw-r--r-- | sass/parts/_article.scss | 27 | ||||
| -rw-r--r-- | sass/parts/_footer.scss | 4 | ||||
| -rw-r--r-- | sass/parts/_header.scss | 85 | ||||
| -rw-r--r-- | sass/parts/_post.scss | 8 | ||||
| -rw-r--r-- | sass/parts/_syntax.scss | 22 | ||||
| -rw-r--r-- | sass/parts/_twitter.scss | 6 | ||||
| -rw-r--r-- | sass/plugins/_fancybox.scss (renamed from sass/plugin/_fancybox.scss) | 94 | ||||
| -rw-r--r-- | sass/screen.scss | 2 |
15 files changed, 172 insertions, 162 deletions
diff --git a/sass/_plugin.scss b/sass/_plugin.scss deleted file mode 100644 index 746ffd0..0000000 --- a/sass/_plugin.scss +++ /dev/null @@ -1 +0,0 @@ -@import "plugin/fancybox";
\ 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 index 7dbee46..ec6ed3b 100644 --- a/sass/base/_color.scss +++ b/sass/base/_color.scss @@ -1,7 +1,7 @@ -$background: #eee; -$main: #258fb8; -$gray01: #666; -$gray02: #999; -$gray03: #ccc; -$gray04: #ddd; -$gray05: #fff;
\ No newline at end of file +$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 index 7f61fb6..ac8b2ae 100644 --- a/sass/base/_font.scss +++ b/sass/base/_font.scss @@ -1,4 +1,2 @@ -$default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -$monospace: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; - -$meta-size: 0.9em;
\ No newline at end of file +$font-default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
\ No newline at end of file diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index b50dcbb..22e5804 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -5,11 +5,11 @@ $max-width: 1000px; padding: 0; } body{ - font-family: $default; + font-family: $font-default; font-weight: 300; font-size: 14px; - background: $background; - color: $gray01; + background: $color-background; + color: $color-gray01; @media screen and (max-width: 1040px){ margin: 0 20px; } @@ -29,15 +29,15 @@ h3{ a{ text-decoration: none; outline-width: 0; - color: $main; + color: $color-main; } -.left{ +.alignleft{ float: left; } -.right{ +.alignright{ float: right; } -.clear{ +.clearfix{ @include pie-clearfix; } .inner{ diff --git a/sass/base/_utilities.scss b/sass/base/_utilities.scss index 1a3ed2f..63aae7a 100644 --- a/sass/base/_utilities.scss +++ b/sass/base/_utilities.scss @@ -9,7 +9,7 @@ -o-user-select: $select; user-select: $select; } -@mixin border-shadow($top: $gray05, $bottom: $gray04){ +@mixin border-shadow($top: $color-gray05, $bottom: $color-gray04){ border-top: 1px solid $top; border-bottom: 1px solid $bottom; } diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index 6b5ee75..1a2009c 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -1,24 +1,15 @@ -section.archive{ +.archives{ position: relative; - &:first-of-type{ - border-top: 1px solid $gray05; - article.archive{ - border-top: none; - } - h1.archive-title{ - border-top: none; - &:before{ - border-top: none; - } - } - } &:last-of-type{ - border-bottom: 1px solid $gray04; - article.archive{ - border-bottom: none; + &:before{ + content: ""; + position: absolute; + bottom: 0; + width: 200px; + border-top: 1px solid $color-gray04; } } - h1.archive-title{ + .year{ line-height: 35px; width: 200px; position: absolute; @@ -30,30 +21,27 @@ section.archive{ position: absolute; top: -2px; width: 100%; - border-top: 1px solid $gray04; + border-top: 1px solid $color-gray04; } @media screen and (max-width: 600px){ position: relative; width: 100%; - & + article.archive{ - border-top: none; - h1{ - padding-top: 15px; - } - } } } - article.archive{ + article{ margin-left: 200px; @media screen and (max-width: 600px){ margin-left: 0; - padding: 15px 0; + &:first-of-type{ + border-top: none; + padding-top: 30px; + } } - h1{ + .title{ margin-bottom: 0; } .meta{ - color: $gray02; + color: $color-gray02; line-height: 2; margin-top: 15px; @media screen and (max-width: 600px){ @@ -65,10 +53,10 @@ section.archive{ @include inline-block; } a{ - color: $gray02; + color: $color-gray02; @include transition(0.3s); &:hover{ - color: $gray01; + color: $color-gray01; } } .date{ diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss index ba14807..91f6273 100644 --- a/sass/parts/_article.scss +++ b/sass/parts/_article.scss @@ -1,6 +1,6 @@ article{ - border-bottom: 1px solid $gray04; - border-top: 1px solid $gray05; + border-bottom: 1px solid $color-gray04; + border-top: 1px solid $color-gray05; padding: 30px 0; position: relative; @media screen and (max-width: 800px){ @@ -14,10 +14,10 @@ article{ line-height: 35px; margin-bottom: 20px; a{ - color: $gray01; + color: $color-gray01; } } - .entry{ + .entry-content{ line-height: 2; text-align: justify; a{ @@ -51,13 +51,13 @@ article{ } h2{ font-weight: 300; - border-bottom: 1px solid $gray04; + border-bottom: 1px solid $color-gray04; position: relative; &:before{ content: ""; position: absolute; bottom: -2px; - border-bottom: 1px solid $gray05; + border-bottom: 1px solid $color-gray05; width: 100%; } } @@ -66,8 +66,8 @@ article{ height: auto; } blockquote{ - background: $gray04; - border-left: 5px solid $gray03; + background: $color-gray04; + border-left: 5px solid $color-gray03; padding: 15px 20px; margin-top: 10px; & > p:first-of-type{ @@ -78,12 +78,12 @@ article{ border: none; } table{ - background: $gray04; - border: 1px solid $gray03; + background: $color-gray04; + border: 1px solid $color-gray03; border-spacing: 0; margin-top: 10px; th{ - background: $gray03; + background: $color-gray03; padding: 0 15px; } td{ @@ -98,8 +98,8 @@ article{ .caption{ background: image-url('caption.png') 0 4px no-repeat; display: block; - font-size: $meta-size; - color: $gray02; + font-size: 0.9em; + color: $color-gray02; padding-left: 25px; } .video-container{ @@ -114,6 +114,7 @@ article{ left: 0; width: 100%; height: 100%; + margin-top: 0; } } } diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index 74f5e41..6d47846 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -1,6 +1,6 @@ footer{ padding: 15px 0; - border-top: 1px solid $gray05; + border-top: 1px solid $color-gray05; text-align: center; - font-size: $meta-size; + font-size: 0.9em; }
\ No newline at end of file diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index b22b1e0..41cd977 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,38 +1,42 @@ -header{ - height: 30px; +$header-height: 30px; + +#header{ + height: $header-height; padding: 30px 0; - border-bottom: 1px solid $gray04; - line-height: 30px; + border-bottom: 1px solid $color-gray04; + line-height: $header-height; @media screen and (max-width: 1040px){ height: auto; position: relative; padding-bottom: 10px; - >.right{ + >.alignright{ position: absolute; top: 30px; right: 0; } } a{ - color: $gray01; - @include transition(0.3s); + color: $color-gray01; + @include transition(color 0.3s); &:hover{ - color: $main; + color: $color-main; } } h1{ + float: left; font-weight: 300; font-size: 30px; @media screen and (max-width: 1040px){ - float: none !important; + float: none; } } - nav{ + .menu{ + float: left; margin-left: 30px; @media screen and (max-width: 1040px){ + float: none; margin-left: 0; margin-top: 15px; - float: none !important; } >ul{ @media screen and (max-width: 600px){ @@ -50,7 +54,7 @@ header{ } &:hover{ >a{ - color: $main; + color: $color-main; } } >a{ @@ -59,7 +63,6 @@ header{ background: image-url('detail.png') right center no-repeat; @media screen and (max-width: 1040px){ padding: 18px 30px 18px 0; - /* Todo */ &:only-child{ padding-right: 0; } @@ -76,8 +79,8 @@ header{ left: -15px; z-index: 10; white-space: nowrap; - background: $gray04; - border: 1px solid $gray03; + background: $color-gray04; + border: 1px solid $color-gray03; list-style: none; display: none; @media screen and (max-width: 1040px){ @@ -89,7 +92,7 @@ header{ @include border-radius(0 5px 5px 5px); } li{ - @include border-shadow($background, $gray03); + @include border-shadow($color-background, $color-gray03); &:hover{ background: #d5d5d5; } @@ -107,7 +110,7 @@ header{ display: block; padding: 5px 30px 5px 15px; &:hover{ - color: $gray01; + color: $color-gray01; } &:only-child{ background: none; @@ -138,32 +141,42 @@ header{ } } .search{ + float: left; + margin-top: 1px; + @media screen and (max-width: 1040px){ + float: none; + margin-top: 15px; + } + @media screen and (max-width: 600px){ + margin-top: 40px; + } input[type="text"]{ background: image-url('search.png') 10px center no-repeat #f2f2f2; - color: $gray02; - border: 1px solid $gray04; - font: 13px $default; + 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); - @media screen and (max-width: 600px){ - width: 60px; - } &:focus, &:active{ background: image-url('search.png') 10px center no-repeat #fff; - width: 150px; - border-top: 1px solid $gray03; - color: $gray01; + border-top: 1px solid $color-gray03; + color: $color-gray01; outline: none; - @media screen and (max-width: 600px){ - width: 100px; - } } } } .social{ + float: left; margin-right: 15px; + @media screen and (max-width: 1040px){ + float: none; + margin-right: 0; + a:last-of-type{ + margin-right: 0; + } + } @media screen and (max-width: 600px){ display: none; } @@ -179,49 +192,49 @@ header{ opacity: 1; } &.facebook{ - background: image-url('facebook.png') center no-repeat #3B5998; + 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('google.png') center no-repeat #C83D20; + 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('twitter.png') center no-repeat #55CFF8; + 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('github.png') center no-repeat rgb(175,182,202); + 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%); } } &.pinterest{ - background: image-url('pinterest.png') center no-repeat rgb(190,64,55); + 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('delicious.png') center no-repeat rgb(50,113,203); + 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('rss.png') center no-repeat #EF7522; + 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/_post.scss b/sass/parts/_post.scss index de9c78c..fc4bf6d 100644 --- a/sass/parts/_post.scss +++ b/sass/parts/_post.scss @@ -1,5 +1,5 @@ .post{ - h1.title, .entry{ + h1.title, .entry-content{ margin-left: 200px; @media screen and (max-width: 800px){ margin-left: 0; @@ -9,8 +9,8 @@ position: absolute; top: 85px; line-height: 2; - font-size: $meta-size; - color: $gray02; + font-size: 0.9em; + color: $color-gray02; width: 170px; @media screen and (max-width: 800px){ margin-top: 15px; @@ -18,7 +18,7 @@ width: auto; } a{ - @include link-colors($gray02, $gray01); + @include link-colors($color-gray02, $color-gray01); @include transition(0.3s); } .date, .tags, .comments{ diff --git a/sass/parts/_syntax.scss b/sass/parts/_syntax.scss index 8777000..0a95988 100644 --- a/sass/parts/_syntax.scss +++ b/sass/parts/_syntax.scss @@ -38,17 +38,17 @@ $solarized: light !default; $base3: $_base03; } -$pre-bg: $gray04; -$pre-border: $gray03; +$pre-bg: $color-gray04; +$pre-border: $color-gray03; article{ code, pre{ background: $pre-bg; border: 1px solid $pre-border; - font-family: $monospace; + font-family: $font-mono; } code{ - font-size: $meta-size; + font-size: 0.9em; padding: 1px 3px; margin: 0 3px; @include border-radius(5px); @@ -77,7 +77,7 @@ figure.code{ padding: 5px 15px; @include border-radius(5px); figcaption{ - font-size: $meta-size; + font-size: 0.9em; position: relative; span{ margin: -5px -15px 0; @@ -106,7 +106,7 @@ figure.code{ } .line-numbers{ border-right: 1px solid $pre-border; - font-family: $monospace; + font-family: $font-mono; padding-right: 15px; text-align: right; } @@ -124,9 +124,9 @@ figure.code{ overflow-x: auto; } } -.entry .gist{ +.entry-content .gist{ background: $pre-bg; - color: $gray01; + color: $color-gray01; padding: 30px 15px 5px; margin-top: 10px; border: 1px solid $pre-border; @@ -139,18 +139,18 @@ figure.code{ background: none; border: none; pre{ - font: $meta-size $monospace; + font: 0.9em $font-mono; line-height: 1.5; } } .gist-meta{ - font: 300 $meta-size $default; + 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: $main; + color: $color-main; &:first-of-type{ position: absolute; top: 5px; diff --git a/sass/parts/_twitter.scss b/sass/parts/_twitter.scss index e6a7736..6a8e6a1 100644 --- a/sass/parts/_twitter.scss +++ b/sass/parts/_twitter.scss @@ -1,5 +1,5 @@ #banner{ - color: $gray02; + color: $color-gray02; padding: 30px 0; line-height: 30px; text-align: center; @@ -8,11 +8,11 @@ @include border-shadow(); &:hover{ a{ - color: $main; + color: $color-main; } } a{ - color: $gray02; + color: $color-gray02; @include transition(0.3s); &:hover{ text-decoration: underline; diff --git a/sass/plugin/_fancybox.scss b/sass/plugins/_fancybox.scss index 89dec97..20a9437 100644 --- a/sass/plugin/_fancybox.scss +++ b/sass/plugins/_fancybox.scss @@ -1,4 +1,4 @@ -/*! fancyBox v2.0.4 fancyapps.com | fancyapps.com/fancybox/#license */ +/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-tmp iframe, .fancybox-tmp object { vertical-align: top; padding: 0; @@ -9,10 +9,11 @@ position: absolute; top: 0; left: 0; - z-index: 1002; + z-index: 8020; } -.fancybox-outer { +.fancybox-skin { + position: relative; padding: 0; margin: 0; background: #f9f9f9; @@ -22,28 +23,33 @@ } .fancybox-opened { - z-index: 1003; + z-index: 8030; } -.fancybox-opened .fancybox-outer { +.fancybox-opened .fancybox-skin { @include box-shadow(0 10px 25px rgba(0, 0, 0, 0.5)); } -.fancybox-inner { - width: 100%; - height: 100%; +.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; + font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; + margin: 0; + padding: 10px; } .fancybox-image, .fancybox-iframe { @@ -61,22 +67,26 @@ 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: -21px; - margin-left: -21px; - width: 42px; - height: 42px; - background: image-url('fancybox/fancybox_loading.gif'); + margin-top: -22px; + margin-left: -22px; + background-position: 0 -108px; opacity: 0.8; cursor: pointer; - z-index: 1010; + z-index: 8020; } -.fancybox-close, .fancybox-prev span, .fancybox-next span { - background-image: image-url('fancybox/fancybox_sprite.png'); +#fancybox-loading div { + width: 44px; + height: 44px; + background: image-url('fancybox/fancybox_loading.gif') center center no-repeat; } .fancybox-close { @@ -86,59 +96,53 @@ width: 36px; height: 36px; cursor: pointer; - z-index: 1004; + z-index: 8040; } -.fancybox-prev, .fancybox-next { +.fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; background: transparent image-url('fancybox/blank.gif'); /* helps IE */ - z-index: 1003; + -webkit-tap-highlight-color: rgba(0,0,0,0); + z-index: 8040; } .fancybox-prev { - left: 0; + left: 0; } .fancybox-next { right: 0; } -.fancybox-prev span, .fancybox-next span { +.fancybox-nav span { position: absolute; top: 50%; - left: -9999px; width: 36px; - height: 36px; + height: 34px; margin-top: -18px; cursor: pointer; - z-index: 1003; + z-index: 8040; + visibility: hidden; } .fancybox-prev span { + left: 20px; background-position: 0 -36px; } .fancybox-next span { + right: 20px; background-position: 0 -72px; } -.fancybox-prev:hover, .fancybox-next:hover { +.fancybox-nav:hover span { visibility: visible; } -.fancybox-prev:hover span { - left: 20px; -} - -.fancybox-next:hover span { - left: auto; - right: 20px; -} - .fancybox-tmp { position: absolute; top: -9999px; @@ -156,18 +160,24 @@ left: 0; overflow: hidden; display: none; - z-index: 1001; + z-index: 8010; background: #000; } +#fancybox-overlay.overlay-fixed { + position: fixed; + bottom: 0; + right: 0; +} + /* Title helper */ .fancybox-title { - visibility: hidden; + visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; - z-index: 1005; + z-index: 8050; } .fancybox-opened .fancybox-title { @@ -179,7 +189,7 @@ bottom: 0; right: 50%; margin-bottom: -35px; - z-index: 1003; + z-index: 8030; text-align: center; } @@ -210,7 +220,7 @@ .fancybox-title-over-wrap { position: absolute; bottom: 0; - left: 0; + left: 0; color: #fff; padding: 10px; background: #000; diff --git a/sass/screen.scss b/sass/screen.scss index ebc9d41..96025e3 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -2,4 +2,4 @@ @import "base"; @import "parts"; -@import "plugin";
\ No newline at end of file +@import "plugins";
\ No newline at end of file |