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 | 19 | ||||
| -rw-r--r-- | sass/base/_layout.scss | 14 | ||||
| -rw-r--r-- | sass/base/_utilities.scss | 2 | ||||
| -rw-r--r-- | sass/parts/_archive.scss | 70 | ||||
| -rw-r--r-- | sass/parts/_article.scss | 48 | ||||
| -rw-r--r-- | sass/parts/_footer.scss | 4 | ||||
| -rw-r--r-- | sass/parts/_header.scss | 383 | ||||
| -rw-r--r-- | sass/parts/_index.scss | 17 | ||||
| -rw-r--r-- | sass/parts/_post.scss | 28 | ||||
| -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 |
16 files changed, 453 insertions, 272 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..907e406 100644 --- a/sass/base/_font.scss +++ b/sass/base/_font.scss @@ -1,4 +1,17 @@ -$default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -$monospace: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; +$font-default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; -$meta-size: 0.9em;
\ No newline at end of file +$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 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..af8f764 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -1,59 +1,49 @@ -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; top: 0; - padding-top: 30px; + padding-top: 15px; border-top: 1px solid #fff; &:before{ content: ""; 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; + padding: 15px 0; @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; + font-size: 0.9em; line-height: 2; margin-top: 15px; @media screen and (max-width: 600px){ @@ -61,25 +51,23 @@ section.archive{ } span{ margin-right: 30px; - padding-left: 30px; @include inline-block; + &:before{ + color: $color-gray03; + font: 1.3em $font-icon; + padding-right: 10px; + } } a{ - color: $gray02; + color: $color-gray02; @include transition(0.3s); &:hover{ - color: $gray01; + color: $color-gray01; } } - .date{ - background: image-url('date.png') 0 center no-repeat; - } - .tags{ - background: image-url('tags.png') 0 center no-repeat; - } - .comments{ - background: image-url('comments.png') 0 center no-repeat; - } + .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 ba14807..fdcb74d 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{ @@ -27,9 +27,16 @@ article{ } .more-link{ display: block; - margin-top: 20px; + margin-top: 16px; padding-left: 30px; - background: image-url('more.png') 0 center no-repeat; + 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; @@ -51,13 +58,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 +73,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 +85,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{ @@ -96,11 +103,19 @@ 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; + 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; @@ -114,6 +129,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 3c13875..9548dfe 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,171 +1,310 @@ -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{ - 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{ - margin-left: 30px; - @media screen and (max-width: 1040px){ - margin-left: 0; - margin-top: 15px; - float: none !important; +} +#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; } - >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; + } } - >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{ - >a{ - color: $main; + background: #d5d5d5; + } + &:first-of-type{ + border-top: none; + ul{ + @include border-radius(0 0 5px 5px); } } + &:last-of-type{ + border-bottom: none; + } >a{ - padding: 38px 30px 38px 0; - margin-top: -38px; - 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; - } + display: block; + padding: 5px 15px; + &:after{ + content: "\f054"; + color: $color-gray02; + font: 12px $font-icon; + padding-left: 10px; + } + &:hover{ + color: $color-gray01; } &:only-child{ - padding-right: 0; - background: none; + &:after{ + content: ""; + } } } } ul{ - position: absolute; - top: 60px; - left: -15px; - z-index: 10; - white-space: nowrap; - background: $gray04; - border: 1px solid $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); + top: 0; + left: 100%; + } + } + li{ + position: relative; + &:hover{ + >ul{ + display: block; } - li{ - @include border-shadow($background, $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{ - background: image-url('detail-sub.png') right center no-repeat; - display: block; - padding: 5px 30px 5px 15px; - &:hover{ - color: $gray01; - } - &:only-child{ - background: none; - padding-right: 15px; - } - } + } + } + } + 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; + } + .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{ - top: 0; - left: 100%; + margin-left: 20px; } } - li{ - position: relative; - &:hover{ - >ul{ - display: block; - } - } + a{ + padding: 0 10px; } } - select{ - display: none; - margin-bottom: 10px; - @media screen and (max-width: 600px){ - display: block; + } + .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: image-url('search.png') 10px center no-repeat #f2f2f2; - color: $gray02; - border: 1px solid $gray04; - font: 13px $default; + 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); - @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; + background: #fff; + 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: 600px){ - display: none; + @media screen and (max-width: 1040px){ + float: none; + margin-right: 0; + a:last-of-type{ + margin-right: 0; + } } a{ @include border-radius(50%); @@ -179,28 +318,28 @@ 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%); @@ -214,21 +353,21 @@ header{ } } &.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/_index.scss b/sass/parts/_index.scss index e20323b..833bf02 100644 --- a/sass/parts/_index.scss +++ b/sass/parts/_index.scss @@ -13,18 +13,31 @@ position: absolute; } .prev{ - background: image-url('back.png') 0 center no-repeat; padding-left: 30px; left: 0; + &:before{ + content: "\f060"; + font: 1.3em $font-icon; + position: absolute; + left: 0; + } } .next{ - background: image-url('more.png') right center no-repeat; 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 index de9c78c..5259265 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,24 +18,26 @@ width: auto; } a{ - @include link-colors($gray02, $gray01); + @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{ - background: image-url('date.png') 0 center no-repeat; - } - .tags{ - background: image-url('tags.png') 0 center no-repeat; - } - .comments{ - background: image-url('comments.png') 0 center no-repeat; - } + .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 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 |