layout

18 files changed, 194 insertions, 539 deletions

diff --git a/sass/_partials.scss b/sass/_partials.scss
deleted file mode 100644
index 7a7c3d7..0000000
--- a/sass/_partials.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "partials/header";
-@import "partials/index";
-@import "partials/banner";
-@import "partials/sidebar";
-@import "partials/post";
-@import "partials/comments";
-@import "partials/footer";
\ No newline at end of file
diff --git a/sass/_parts.scss b/sass/_parts.scss
new file mode 100644
index 0000000..7069d84
--- /dev/null
+++ b/sass/_parts.scss
@@ -0,0 +1,5 @@
+@import "parts/header";
+@import "parts/banner";
+@import "parts/index";
+@import "parts/article";
+@import "parts/footer";
\ No newline at end of file
diff --git a/sass/base/_color.scss b/sass/base/_color.scss
index 38eb870..4925193 100644
--- a/sass/base/_color.scss
+++ b/sass/base/_color.scss
@@ -1,3 +1,6 @@
-$black: rgba(0,0,0,0.5);
-$main: #258fb8;
-$shadow: rgba(0,0,0,0.3);
\ No newline at end of file
+$background: #eee;
+$main: #FF9500;
+$border: #ddd;
+$light-shadow: #fff;
+$font-main: #666;
+$font-meta: #999;
\ No newline at end of file
diff --git a/sass/base/_font.scss b/sass/base/_font.scss
index 89fd7e4..44f829f 100644
--- a/sass/base/_font.scss
+++ b/sass/base/_font.scss
@@ -1,10 +1,2 @@
 $default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-$symbol: "WebSymbolsRegular", sans-serif;
-$code-font: "Consolas",Monaco,Courier New,Courier,monospace;
-
-@font-face {
-    font-family: 'WebSymbolsRegular';
-    src: image-url('fonts/websymbols-regular-webfont.ttf');
-    font-weight: normal;
-    font-style: normal;
-}
\ No newline at end of file
+$monospace: "Consolas", Monaco, Courier New, Courier, monospace;
\ No newline at end of file
diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss
index 60d27a7..10d0d10 100644
--- a/sass/base/_layout.scss
+++ b/sass/base/_layout.scss
@@ -1,4 +1,4 @@
-$max-width: 1200px;
+$max-width: 1000px;
 
 @mixin square($property){
 	width: $property;
@@ -20,7 +20,8 @@ body{
 	font-family: $default;
 	font-weight: 300;
 	font-size: 14px;
-	background: #333 image-url('random_grey_variations.png');
+	background: $background;
+	color: $font-main;
 }
 h1{
 	font-size: 2em;
diff --git a/sass/partials/_banner.scss b/sass/partials/_banner.scss
deleted file mode 100644
index 3164048..0000000
--- a/sass/partials/_banner.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-#banner{
-	margin-bottom: 30px;
-	position: relative;
-	height: 300px;
-	@include user-select(none);
-	.image{
-		width: 1120px;
-		position: absolute;
-		left: 40px;
-		height: 100%;
-		overflow: hidden;
-		background: #000;
-		.wrap{
-			position: absolute;
-			left: 0;
-			height: 100%;
-		}
-		img{
-			height: 100%;
-			position: absolute;
-			&:first-child{
-				display: block;
-			}
-		}
-	}
-	.loading, .error{
-		width: 1200px;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
-		background: #000;
-		color: #fff;
-		&:before{
-			position: absolute;
-			top: 50%;
-			margin-top: -20px;
-			width: 100%;
-			text-align: center;
-			font: 40px/1 $symbol;
-		}
-		div{
-			position: absolute;
-			top: 50%;
-			width: 100%;
-			text-align: center;
-			margin-top: 40px;
-		}
-	}
-	.loading{
-		&:before{
-			content: "P";
-		}
-	}
-	.error{
-		&:before{
-			content: "'";
-		}
-	}
-	.prev, .next{
-		position: absolute;
-		height: 100%;
-		width: 35px;
-		background: $black;
-		cursor: pointer;
-		&:before{
-			position: absolute;
-			top: 50%;
-			font: 20px/1 $symbol;
-			color: #fff;
-			margin-top: -10px;
-		}
-		&:hover{
-			background: #000;
-		}
-	}
-	.prev{
-		left: 0;
-		&:before{
-			content: "<";
-			left: 10px;
-		}
-	}
-	.next{
-		right: 0;
-		&:before{
-			content: ">";
-			right: 10px;
-		}
-	}
-	.dots{
-		position: absolute;
-		bottom: -40px;
-		right: 0;
-		z-index: 1;
-		li{
-			display: inline-block;
-			margin-left: 10px;
-			background: $black;
-			cursor: pointer;
-			overflow: hidden;
-			position: relative;
-			@include square(10px);
-			&.current, &:hover{
-				background: $main;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/sass/partials/_comments.scss b/sass/partials/_comments.scss
deleted file mode 100644
index e69de29..0000000
--- a/sass/partials/_comments.scss
+++ /dev/null
diff --git a/sass/partials/_footer.scss b/sass/partials/_footer.scss
deleted file mode 100644
index faa17fb..0000000
--- a/sass/partials/_footer.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-#footer{
-	position: relative;
-	height: 50px;
-	margin-bottom: 30px;
-	&:before{
-		position: absolute;
-		top: 0;
-		left: 0;
-		content: "©";
-		background: #000;
-		color: #fff;
-		font-size: 50px;
-		line-height: 1.5;
-		overflow: hidden;
-		text-align: right;
-		@include square(50px);
-		@include user-select(none);
-	}
-	.wrap{
-		margin-left: 55px;
-		background: $black;
-		color: #fff;
-		line-height: 1;
-		padding: 29px 10px 10px;
-		font-size: 11px;
-		.right{
-			margin-top: -5px;
-			a{
-				position: relative;
-				text-indent: -9999px;
-				color: #fff;
-				display: inline-block;
-				margin-left: 10px;
-				@include square(16px);
-				&:before{
-					position: absolute;
-					top: 0;
-					left: 0;
-					font: 16px/1 $symbol;
-					color: #999;
-					text-indent: 0;
-					@include user-select(none);
-				}
-				&:hover{
-					&:before{
-						color: #fff;
-					}
-				}
-				&:first-child:before{content: "f"}
-				&:nth-child(2):before{content: "g"}
-				&:nth-child(3):before{content: "t"}
-				&:last-child:before{content: "B"}
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/sass/partials/_header.scss b/sass/partials/_header.scss
deleted file mode 100644
index fb6680e..0000000
--- a/sass/partials/_header.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-#header{
-	height: 68px;
-	margin: 30px auto;
-	text-transform: uppercase;
-	line-height: 1;
-	h1{
-		a{
-			background: #000;
-			color: #fff;
-			padding: 30px 10px 10px 100px;
-			margin-right: 5px;
-			display: block;
-		}
-	}
-	ul{
-		background: $black;
-		font-size: 14px;
-		li{
-			display: inline-block;
-			position: relative;
-			>a{
-				color: #fff;
-				position: relative;
-				padding: 44px 20px 7px;
-				display: block;
-				border-bottom: 3px solid transparent;
-				&:after{
-					font: 13px/1 $symbol;
-					color: #666;
-					content: "[";
-					margin-left: 10px;
-				}
-				&:only-child{
-					&:after{
-						display: none;
-					}
-				}
-			}
-			&:hover{
-				>a{
-					background: #000;
-					border-bottom: 3px solid $main;
-					&:after{
-						color: #ccc;
-					}
-				}
-				>.sub-menu{
-					display: block;
-				}
-			}
-			.sub-menu{
-				position: absolute;
-				top: 100%;
-				left: 0;
-				background: $main;
-				white-space: nowrap;
-				z-index: 5;
-				text-transform: none;
-				display: none;
-				font-size: 13px;
-				@include box-shadow(0 12px 16px $shadow);
-				li{
-					display: block;
-					a{
-						padding: 10px 40px 10px 20px;
-						border-bottom: 1px solid lighten($main, 5%);
-						border-top: 1px solid darken($main, 5%);
-						&:hover{
-							background: darken($main, 10%);
-						}
-						&:after{
-							content: ">";
-							position: absolute;
-							right: 10px;
-							font: 13px/1 $symbol;
-							color: lighten($main, 10%);
-						}
-						&:only-child{
-							padding-right: 20px;
-							&:after{
-								content: "";
-							}
-						}
-					}
-					&:hover{
-						>a{
-							background: darken($main, 10%);
-						}
-					}
-					&:first-of-type{
-						a{
-							border-top: none;
-						}
-					}
-					&:last-of-type{
-						a{
-							border-bottom: none;
-						}
-					}
-				}
-				.sub-menu{
-					top: 0;
-					left: 100%;
-				}
-			}
-		}
-	}
-	.search{
-		margin-top: 25px;
-		input[type="text"]{
-			background: rgba(0,0,0,0.2);
-			border-style: solid;
-			border-width: 1px 0;
-			border-color: rgba(0,0,0,0.5) transparent #555;
-			color: #ccc;
-			padding: 5px 15px;
-			margin: 2px 10px 0 0;
-			width: 150px;
-			font-size: 13px;
-			font-family: inherit;
-			@include border-radius(15px);
-			&:active, &:focus{
-				background: $black;
-			}
-		}
-		input[type="submit"]{
-			font: 18px/1 $symbol;
-			width: 24px;
-			height: 24px;
-			@include square(24px);
-			border: none;
-			background: none;
-			color: #fff;
-			cursor: pointer;
-			&:hover{
-				color: $main;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/sass/partials/_index.scss b/sass/partials/_index.scss
deleted file mode 100644
index bbb45cb..0000000
--- a/sass/partials/_index.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-#main_col{
-	width: 750px;
-	article{
-		margin-bottom: 30px;
-		header{
-			line-height: 1;
-			.date{
-				background: #000;
-				color: #fff;
-				width: 40px;
-				height: 50px;
-				padding: 5px 10px;
-				margin-right: 5px;
-				white-space: nowrap;
-				text-transform: uppercase;
-				strong{
-					display: block;
-					font-size: 30px;
-					margin-bottom: 2px;
-					font-weight: bold;
-				}
-			}
-			.title{
-				background: $black;
-				color: #fff;
-				font-size: 25px;
-				padding: 25px 10px 10px;
-				max-width: 665px;
-				font-weight: inherit;
-				a{
-					color: #fff;
-				}
-			}
-		}
-		.entry{
-			text-align: justify;
-			margin-top: 5px;
-			background: #fff;
-			padding: 10px 20px;
-			line-height: 2;
-			color: #333;
-			position: relative;
-			word-wrap: break-word;
-			p{
-				margin-bottom: 10px;
-			}
-			img{
-				max-width: 100%;
-				height: auto;
-				margin-top: 10px;
-			}
-			a{
-				color: $main;
-				&:hover{
-					text-decoration: underline;
-				}
-			}
-			ul, ol{
-				margin-left: 20px;
-				margin-bottom: 10px;
-			}
-			h2{
-				margin-bottom: 10px;
-				border-bottom: 1px solid #ddd;
-				font-weight: inherit;
-				color: #000;
-			}
-			blockquote{
-				color: #666;
-				font-size: 13px;
-				position: relative;
-				padding-left: 30px;
-				margin-bottom: 10px;
-				&:before{
-					position: absolute;
-					content: "“";
-					font-size: 50px;
-					line-height: 1;
-					top: 0;
-					left: 0;
-					@include user-select(none);
-				}
-				&.attach:before{
-					content: "A";
-					font: 13px/2 $symbol;
-				}
-			}
-			pre{
-				color: #666;
-				font: 13px $code-font;
-				position: relative;
-				margin-bottom: 10px;
-				overflow-x: auto;
-				line-height: 1.5;
-			}
-			code{
-				font-family: $code-font;
-			}
-			footer{
-				border-top: 1px solid #ddd;
-				padding-top: 10px;
-				min-height: 26px;
-				a{
-					color: #000;
-					position: relative;
-					&:hover{
-						color: $main;
-						text-decoration: none;
-					}
-					&:before, &:after{
-						font: 16px $symbol;
-						@include user-select(none);
-					}
-				}
-				.more-link{
-					&:hover{
-						color: $main;
-						text-decoration: none;
-					}
-					&:before{
-						content: "j";
-						padding-right: 10px;
-					}
-				}
-				.comment{
-					&:after{
-						content: "d";
-						right: 0;
-						padding-left: 10px;
-					}
-					&:hover{
-						&:after{
-							content: "e";
-						}
-					}
-				}
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/sass/partials/_post.scss b/sass/partials/_post.scss
deleted file mode 100644
index b88812a..0000000
--- a/sass/partials/_post.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-article{
-	.entry{
-		footer{
-			.cat{
-				font-size: 13px;
-				position: relative;
-				padding-left: 25px;
-				&:before{
-					font-family: $symbol;
-					padding-right: 10px;
-					position: absolute;
-					top: 0;
-					left: 0;
-					content: ",";
-					font-size: 14px;
-					@include user-select(none);
-				}
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/sass/partials/_sidebar.scss b/sass/partials/_sidebar.scss
deleted file mode 100644
index 862840c..0000000
--- a/sass/partials/_sidebar.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-#sidebar{
-	width: 420px;
-	background: $black;
-	margin: 70px 0 30px;
-	word-wrap: break-word;
-	ul{
-		list-style: none;
-	}
-	.widget{
-		margin: 20px;
-		color: #999;
-		font-size: 13px;
-		line-height: 1.5;
-		h3{
-			color: $main;
-			font-weight: normal;
-			font-size: 15px;
-			margin-bottom: 5px;
-			a{
-				color: $main;
-				&:hover{
-					color: $main;
-				}
-			}
-		}
-		a{
-			color: #ccc;
-			&:hover{
-				color: #fff;
-				text-decoration: underline;
-			}
-		}
-		ul{
-			list-style: disc;
-			margin-left: 15px;
-			li{
-				ul{
-					list-style: circle;
-				}
-			}
-		}
-		&.thin{
-			width: 180px;
-			display: inline-block;
-			vertical-align: top;
-			&:nth-of-type(2n){
-				margin-right: 0;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss
new file mode 100644
index 0000000..d4157fe
--- /dev/null
+++ b/sass/parts/_article.scss
@@ -0,0 +1,75 @@
+article{
+	border-bottom: 1px solid $border;
+	border-top: 1px solid $light-shadow;
+	padding: 30px 0;
+	position: relative;
+	h1.title, .entry{
+		margin-left: 200px;
+	}
+	h1.title{
+		font-size: 25px;
+		font-weight: 300;
+		line-height: 35px;
+		margin-bottom: 20px;
+		a{
+			color: $font-main;
+		}
+	}
+	.entry{
+		line-height: 2;
+		text-align: justify;
+		a{
+			&:hover{
+				text-decoration: underline;
+			}
+		}
+		.more-link{
+			display: block;
+			margin-top: 20px;
+		}
+		ol, ul{
+			margin-left: 20px;
+		}
+		p{
+			margin-top: 10px;
+		}
+		h2{
+			font-weight: 300;
+			margin-top: 10px;
+			border-bottom: 1px solid $border;
+			position: relative;
+			&:before{
+				content: "";
+				position: absolute;
+				bottom: -2px;
+				border-bottom: 1px solid $light-shadow;
+				width: 100%;
+			}
+		}
+		h3{
+			margin-top: 10px;
+		}
+		code{
+			font-family: $monospace;
+		}
+		pre{
+			margin-top: 10px;
+			line-height: 1.5;
+		}
+	}
+	.meta{
+		position: absolute;
+		top: 85px;
+		line-height: 2;
+		font-size: 13px;
+		color: $font-meta;
+		width: 170px;
+		a{
+			color: $font-meta;
+			@include transition(0.3s);
+			&:hover{
+				color: $font-main;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/sass/parts/_banner.scss b/sass/parts/_banner.scss
new file mode 100644
index 0000000..23b3353
--- /dev/null
+++ b/sass/parts/_banner.scss
@@ -0,0 +1,6 @@
+#banner{
+	border-top: 1px solid $light-shadow;
+	border-bottom: 1px solid $border;
+	color: $font-main;
+	padding: 30px 0;
+}
\ No newline at end of file
diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss
new file mode 100644
index 0000000..b713b8e
--- /dev/null
+++ b/sass/parts/_footer.scss
@@ -0,0 +1,6 @@
+footer{
+	padding: 30px 0;
+	border-top: 1px solid $light-shadow;
+	text-align: center;
+	font-size: 13px;
+}
\ No newline at end of file
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
new file mode 100644
index 0000000..79553e3
--- /dev/null
+++ b/sass/parts/_header.scss
@@ -0,0 +1,89 @@
+header{
+	height: 30px;
+	padding: 30px 0;
+	border-bottom: 1px solid $border;
+	line-height: 30px;
+	a{
+		color: $font-main;
+		@include transition(0.3s);
+		&:hover{
+			color: $main;
+		}
+	}
+	h1{
+		font-weight: 300;
+		font-size: 30px;
+	}
+	nav{
+		margin-left: 30px;
+		ul{
+			list-style: none;
+			li{
+				float: left;
+				margin-left: 50px;
+			}
+			ul{
+				display: none;
+			}
+		}
+	}
+	.search{
+		input[type="text"]{
+			background: #f2f2f2;
+			color: #999;
+			border: 1px solid $border;
+			@include border-radius(15px);
+			font: 13px $default;
+			padding: 6px 15px;
+			@include transition(0.3s);
+			&:focus, &:active{
+				background: #fff;
+				border-top: 1px solid #ccc;
+				color: $font-main;
+			}
+		}
+	}
+	.social{
+		margin-right: 15px;
+		a{
+			@include border-radius(50%);
+			display: inline-block;
+			text-indent: -9999px;
+			margin-right: 15px;
+			opacity: 0.5;
+			@include square(28px);
+			@include transition(0.3s);
+			&:hover{
+				opacity: 1;
+			}
+			&:first-of-type{
+				background: #3B5998;
+				border: 1px solid #3B5998;
+				&:hover{
+					border: 1px solid darken(#3B5998, 10%);
+				}
+			}
+			&:nth-of-type(2){
+				background: #C83D20;
+				border: 1px solid #C83D20;
+				&:hover{
+					border: 1px solid darken(#C83D20, 10%);
+				}
+			}
+			&:nth-of-type(3){
+				background: #55CFF8;
+				border: 1px solid #55CFF8;
+				&:hover{
+					border: 1px solid darken(#55CFF8, 10%);
+				}
+			}
+			&:last-of-type{
+				background: #EF7522;
+				border: 1px solid #EF7522;
+				&:hover{
+					border: 1px solid darken(#EF7522, 10%);
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/sass/parts/_index.scss b/sass/parts/_index.scss
new file mode 100644
index 0000000..2d90e17
--- /dev/null
+++ b/sass/parts/_index.scss
@@ -0,0 +1,2 @@
+#content{
+}
\ No newline at end of file
diff --git a/sass/screen.scss b/sass/screen.scss
index 347fc15..1c20d06 100644
--- a/sass/screen.scss
+++ b/sass/screen.scss
@@ -1,4 +1,4 @@
 @import "compass";
 
 @import "base";
-@import "partials";
\ No newline at end of file
+@import "parts";
\ No newline at end of file