diff options
-rw-r--r-- | sass/base/_color.scss | 9 | ||||
-rw-r--r-- | sass/base/_layout.scss | 4 | ||||
-rw-r--r-- | sass/parts/_archive.scss | 12 | ||||
-rw-r--r-- | sass/parts/_article.scss | 27 | ||||
-rw-r--r-- | sass/parts/_footer.scss | 2 | ||||
-rw-r--r-- | sass/parts/_header.scss | 22 | ||||
-rw-r--r-- | sass/parts/_post.scss | 6 | ||||
-rw-r--r-- | sass/parts/_syntax.scss | 8 | ||||
-rw-r--r-- | sass/parts/_twitter.scss | 4 |
9 files changed, 48 insertions, 46 deletions
diff --git a/sass/base/_color.scss b/sass/base/_color.scss index 51efe3d..7dbee46 100644 --- a/sass/base/_color.scss +++ b/sass/base/_color.scss @@ -1,6 +1,7 @@ $background: #eee; $main: #258fb8; -$border: #ddd; -$light-shadow: #fff; -$font-main: #666; -$font-meta: #999;
\ No newline at end of file +$gray01: #666; +$gray02: #999; +$gray03: #ccc; +$gray04: #ddd; +$gray05: #fff;
\ No newline at end of file diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 71cb9f1..da9ad8a 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -11,7 +11,7 @@ $max-width: 1000px; -o-user-select: $select; user-select: $select; } -@mixin border-shadow($top: #fff, $bottom: #ddd){ +@mixin border-shadow($top: $gray05, $bottom: $gray04){ border-top: 1px solid $top; border-bottom: 1px solid $bottom; } @@ -34,7 +34,7 @@ body{ font-weight: 300; font-size: 14px; background: $background; - color: $font-main; + color: $gray01; } h1{ font-size: 1.8em; diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index 694c0e2..405922d 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -1,7 +1,7 @@ section.archive{ position: relative; &:first-of-type{ - border-top: 1px solid $light-shadow; + border-top: 1px solid $gray05; article.archive{ border-top: none; } @@ -13,7 +13,7 @@ section.archive{ } } &:last-of-type{ - border-bottom: 1px solid $border; + border-bottom: 1px solid $gray04; article.archive{ border-bottom: none; } @@ -30,7 +30,7 @@ section.archive{ position: absolute; top: -2px; width: 100%; - border-top: 1px solid #ddd; + border-top: 1px solid $gray04; } } article.archive{ @@ -39,7 +39,7 @@ section.archive{ margin-bottom: 0; } .meta{ - color: $font-meta; + color: $gray02; line-height: 2; margin-top: 15px; span{ @@ -48,10 +48,10 @@ section.archive{ display: inline-block; } a{ - color: $font-meta; + color: $gray02; @include transition(0.3s); &:hover{ - color: $font-main; + color: $gray01; } } .date{ diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss index 953a337..5754fd1 100644 --- a/sass/parts/_article.scss +++ b/sass/parts/_article.scss @@ -1,6 +1,6 @@ article{ - border-bottom: 1px solid $border; - border-top: 1px solid $light-shadow; + border-bottom: 1px solid $gray04; + border-top: 1px solid $gray05; padding: 30px 0; position: relative; h1.title{ @@ -8,7 +8,7 @@ article{ line-height: 35px; margin-bottom: 20px; a{ - color: $font-main; + color: $gray01; } } .entry{ @@ -42,13 +42,13 @@ article{ h2{ font-weight: 300; margin-top: 10px; - border-bottom: 1px solid $border; + border-bottom: 1px solid $gray04; position: relative; &:before{ content: ""; position: absolute; bottom: -2px; - border-bottom: 1px solid $light-shadow; + border-bottom: 1px solid $gray05; width: 100%; } } @@ -60,21 +60,22 @@ article{ height: auto; } blockquote{ - background: $border; - border-left: 5px solid #ccc; + background: $gray04; + border-left: 5px solid $gray03; padding: 15px 20px; margin-top: 10px; & > p:first-of-type{ margin-top: 0; } } - iframe[src*="youtube"]{ + iframe{ margin-top: 10px; + border: none; } ol, ul, p, blockquote{ code{ - background: $border; - border: 1px solid #ccc; + background: $gray04; + border: 1px solid $gray03; padding: 1px 3px; margin: 0 3px; @include border-radius(5px); @@ -84,10 +85,10 @@ article{ font: $meta-size $monospace; } >pre{ - background: $border; + background: $gray04; padding: 5px 15px; margin-top: 10px; - border: 1px solid #ccc; + border: 1px solid $gray03; line-height: 1.5; overflow-x: auto; @include border-radius(5px); @@ -96,7 +97,7 @@ article{ background: image-url('caption.png') 0 4px no-repeat; display: block; font-size: $meta-size; - color: #999; + color: $gray02; padding-left: 25px; } .video-container{ diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index c645a9e..74f5e41 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -1,6 +1,6 @@ footer{ padding: 15px 0; - border-top: 1px solid $light-shadow; + border-top: 1px solid $gray05; text-align: center; font-size: $meta-size; }
\ No newline at end of file diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 7f76330..4af00e4 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,10 +1,10 @@ header{ height: 30px; padding: 30px 0; - border-bottom: 1px solid $border; + border-bottom: 1px solid $gray04; line-height: 30px; a{ - color: $font-main; + color: $gray01; @include transition(0.3s); &:hover{ color: $main; @@ -42,14 +42,14 @@ header{ left: -15px; z-index: 10; white-space: nowrap; - background: #ddd; - border: 1px solid #ccc; + background: $gray04; + border: 1px solid $gray03; @include border-radius(0 0 5px 5px); - box-shadow: 0 4px 8px #DDDDDD; + box-shadow: 0 4px 8px $gray04; list-style: none; display: none; li{ - @include border-shadow(#eee, #ccc); + @include border-shadow(#eee, $gray03); &:hover{ background: #d5d5d5; } @@ -64,7 +64,7 @@ header{ padding: 5px 15px; width: 100%; &:hover{ - color: #666; + color: $gray01; } } } @@ -85,8 +85,8 @@ header{ .search{ input[type="text"]{ background: image-url('search.png') 10px center no-repeat #f2f2f2; - color: #999; - border: 1px solid $border; + color: $gray02; + border: 1px solid $gray04; @include border-radius(15px); font: 13px $default; padding: 6px 15px 6px 35px; @@ -95,8 +95,8 @@ header{ &:focus, &:active{ background: image-url('search.png') 10px center no-repeat #fff; width: 150px; - border-top: 1px solid #ccc; - color: $font-main; + border-top: 1px solid $gray03; + color: $gray01; outline: none; } } diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss index 704096b..09a4491 100644 --- a/sass/parts/_post.scss +++ b/sass/parts/_post.scss @@ -7,13 +7,13 @@ top: 85px; line-height: 2; font-size: $meta-size; - color: $font-meta; + color: $gray02; width: 170px; a{ - color: $font-meta; + color: $gray02; @include transition(0.3s); &:hover{ - color: $font-main; + color: $gray01; } } .date, .tags, .comments{ diff --git a/sass/parts/_syntax.scss b/sass/parts/_syntax.scss index d99bb54..2ea1a8f 100644 --- a/sass/parts/_syntax.scss +++ b/sass/parts/_syntax.scss @@ -44,10 +44,10 @@ $pre-border: darken($base02, 5) !default; $pre-color: $base1 !default; figure.code{ - background: $border; + background: $gray04; padding: 5px 15px; margin-top: 10px; - border: 1px solid #ccc; + border: 1px solid $gray03; line-height: 1.5; overflow-x: auto; @include border-radius(5px); @@ -58,7 +58,7 @@ figure.code{ margin: -10px -15px 0; padding: 10px 15px 5px; display: block; - @include background(linear-gradient(top, #ccc, #ddd)); + @include background(linear-gradient(top, $gray03, $gray04)); &:empty{ display: none; } @@ -70,7 +70,7 @@ figure.code{ } } .line-numbers{ - border-right: 1px solid #ccc; + border-right: 1px solid $gray03; color: #000; padding-right: 15px; } diff --git a/sass/parts/_twitter.scss b/sass/parts/_twitter.scss index 3aaea08..e6a7736 100644 --- a/sass/parts/_twitter.scss +++ b/sass/parts/_twitter.scss @@ -1,5 +1,5 @@ #banner{ - color: $font-meta; + color: $gray02; padding: 30px 0; line-height: 30px; text-align: center; @@ -12,7 +12,7 @@ } } a{ - color: #999; + color: $gray02; @include transition(0.3s); &:hover{ text-decoration: underline; |