change color code

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;