move media queries

5 files changed, 93 insertions, 128 deletions

diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss
index 7aaafbb..b50dcbb 100644
--- a/sass/base/_layout.scss
+++ b/sass/base/_layout.scss
@@ -10,6 +10,12 @@ body{
 	font-size: 14px;
 	background: $background;
 	color: $gray01;
+	@media screen and (max-width: 1040px){
+		margin: 0 20px;
+	}
+	@media screen and (max-width: 600px){
+		font-size: 13px;
+	}
 }
 h1{
 	font-size: 1.8em;
@@ -37,19 +43,7 @@ a{
 .inner{
 	width: $max-width;
 	margin: 0 auto;
-}
-
-@media screen and (max-width: 1030px){
-	body{
-		margin: 0 30px;
-	}
-	.inner{
+	@media screen and (max-width: 1040px){
 		width: 100%;
 	}
-}
-
-@media screen and (max-width: 600px){
-	body{
-		font-size: 13px;
-	}
 }
\ No newline at end of file
diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss
index e2e3aea..6b5ee75 100644
--- a/sass/parts/_archive.scss
+++ b/sass/parts/_archive.scss
@@ -32,9 +32,23 @@ section.archive{
 			width: 100%;
 			border-top: 1px solid $gray04;
 		}
+		@media screen and (max-width: 600px){
+			position: relative;
+			width: 100%;
+			& + article.archive{
+				border-top: none;
+				h1{
+					padding-top: 15px;
+				}
+			}
+		}
 	}
 	article.archive{
 		margin-left: 200px;
+		@media screen and (max-width: 600px){
+			margin-left: 0;
+			padding: 15px 0;
+		}
 		h1{
 			margin-bottom: 0;
 		}
@@ -42,6 +56,9 @@ section.archive{
 			color: $gray02;
 			line-height: 2;
 			margin-top: 15px;
+			@media screen and (max-width: 600px){
+				display: none;
+			}
 			span{
 				margin-right: 30px;
 				padding-left: 30px;
@@ -65,26 +82,4 @@ section.archive{
 			}
 		}
 	}
-}
-
-@media screen and (max-width: 600px){
-	section.archive{
-		h1.archive-title{
-			position: relative;
-			width: 100%;
-			& + article.archive{
-				border-top: none;
-				h1{
-					padding-top: 15px;
-				}
-			}
-		}
-		article.archive{
-			margin-left: 0;
-			padding: 15px 0;
-			.meta{
-				display: none;
-			}
-		}
-	}
 }
\ No newline at end of file
diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss
index 4a7ba6b..ba14807 100644
--- a/sass/parts/_article.scss
+++ b/sass/parts/_article.scss
@@ -3,6 +3,12 @@ article{
 	border-top: 1px solid $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;
@@ -115,16 +121,4 @@ article{
 .share{
 	padding: 15px 0;
 	@include border-shadow();
-}
-
-@media screen and (max-width: 800px){
-	article{
-		padding-bottom: 15px;
-	}
-}
-
-@media screen and (max-width: 600px){
-	article{
-		padding: 15px 0;
-	}
 }
\ No newline at end of file
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 32893ad..67ebf84 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -3,6 +3,16 @@ header{
 	padding: 30px 0;
 	border-bottom: 1px solid $gray04;
 	line-height: 30px;
+	@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);
@@ -13,13 +23,31 @@ header{
 	h1{
 		font-weight: 300;
 		font-size: 30px;
+		@media screen and (max-width: 1040px){
+			float: none !important;
+		}
 	}
 	nav{
 		margin-left: 30px;
+		@media screen and (max-width: 1040px){
+			margin-left: 0;
+			margin-top: 15px;
+			float: none !important;
+		}
 		>ul{
+			@media screen and (max-width: 600px){
+				display: none;
+			}
 			>li{
-				@include inline-block;
 				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: $main;
@@ -29,6 +57,13 @@ header{
 					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;
+						}
+					}
 					&:only-child{
 						padding-right: 0;
 						background: none;
@@ -45,6 +80,9 @@ header{
 				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{
@@ -94,6 +132,9 @@ header{
 		select{
 			display: none;
 			margin-bottom: 10px;
+			@media screen and (max-width: 600px){
+				display: block;
+			}
 		}
 	}
 	.search{
@@ -106,17 +147,26 @@ header{
 			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;
 				outline: none;
+				@media screen and (max-width: 600px){
+					width: 100px;
+				}
 			}
 		}
 	}
 	.social{
 		margin-right: 15px;
+		@media screen and (max-width: 600px){
+			display: none;
+		}
 		a{
 			@include border-radius(50%);
 			@include inline-block;
@@ -158,67 +208,4 @@ header{
 			}
 		}
 	}
-}
-
-@media screen and (max-width: 1030px){
-	header{
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		h1{
-			float: none !important;
-		}
-		nav{
-			margin-left: 0;
-			margin-top: 15px;
-			float: none !important;
-			>ul{
-				>li{
-					margin-left: 0;
-					margin-right: 50px;
-					&:last-of-type{
-						margin-right: 0;
-					}
-					>a{
-						padding: 18px 30px 18px 0;
-						&:only-child{
-							padding-right: 0;
-						}
-					}
-				}
-				ul{
-					top: 40px;
-				}
-			}
-		}
-		>.right{
-			position: absolute;
-			top: 30px;
-			right: 0;
-		}
-	}
-}
-
-@media screen and (max-width: 600px){
-	header{
-		nav{
-			>ul{
-				display: none;
-			}
-			select{
-				display: block;
-			}
-		}
-		.social{
-			display: none;
-		}
-		.search{
-			input[type="text"]{
-				width: 60px;
-				&:focus, &:active{
-					width: 100px;
-				}
-			}
-		}
-	}
 }
\ No newline at end of file
diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss
index 1b5f554..de9c78c 100644
--- a/sass/parts/_post.scss
+++ b/sass/parts/_post.scss
@@ -1,6 +1,9 @@
 .post{
 	h1.title, .entry{
 		margin-left: 200px;
+		@media screen and (max-width: 800px){
+			margin-left: 0;
+		}
 	}
 	.meta{
 		position: absolute;
@@ -9,12 +12,21 @@
 		font-size: $meta-size;
 		color: $gray02;
 		width: 170px;
+		@media screen and (max-width: 800px){
+			margin-top: 15px;
+			position: static;
+			width: auto;
+		}
 		a{
 			@include link-colors($gray02, $gray01);
 			@include transition(0.3s);
 		}
 		.date, .tags, .comments{
 			padding-left: 30px;
+			@media screen and (max-width: 800px){
+				@include inline-block;
+				margin-right: 30px;
+			}
 		}
 		.date{
 			background: image-url('date.png') 0 center no-repeat;
@@ -26,21 +38,4 @@
 			background: image-url('comments.png') 0 center no-repeat;
 		}
 	}
-}
-
-@media screen and (max-width: 800px){
-	.post{
-		h1.title, .entry{
-			margin-left: 0;
-		}
-		.meta{
-			margin-top: 15px;
-			position: static;
-			width: auto;
-			.date, .tags, .comments{
-				@include inline-block;
-				margin-right: 30px;
-			}
-		}
-	}
 }
\ No newline at end of file