created

13 files changed, 595 insertions, 0 deletions

diff --git a/sass/_base.scss b/sass/_base.scss
new file mode 100644
index 0000000..e9707e2
--- /dev/null
+++ b/sass/_base.scss
@@ -0,0 +1,3 @@
+@import "base/color";
+@import "base/font";
+@import "base/layout";
\ No newline at end of file
diff --git a/sass/_partials.scss b/sass/_partials.scss
new file mode 100644
index 0000000..7a7c3d7
--- /dev/null
+++ b/sass/_partials.scss
@@ -0,0 +1,7 @@
+@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/base/_color.scss b/sass/base/_color.scss
new file mode 100644
index 0000000..38eb870
--- /dev/null
+++ b/sass/base/_color.scss
@@ -0,0 +1,3 @@
+$black: rgba(0,0,0,0.5);
+$main: #258fb8;
+$shadow: rgba(0,0,0,0.3);
\ No newline at end of file
diff --git a/sass/base/_font.scss b/sass/base/_font.scss
new file mode 100644
index 0000000..89fd7e4
--- /dev/null
+++ b/sass/base/_font.scss
@@ -0,0 +1,10 @@
+$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
diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss
new file mode 100644
index 0000000..60d27a7
--- /dev/null
+++ b/sass/base/_layout.scss
@@ -0,0 +1,51 @@
+$max-width: 1200px;
+
+@mixin square($property){
+	width: $property;
+	height: $property;
+}
+@mixin user-select($select){
+	-moz-user-select: $select;
+	-khtml-user-select: $select;
+	-webkit-user-select: $select;
+	-o-user-select: $select;
+	user-select: $select;
+}
+
+*{
+	margin: 0;
+	padding: 0;
+}
+body{
+	font-family: $default;
+	font-weight: 300;
+	font-size: 14px;
+	background: #333 image-url('random_grey_variations.png');
+}
+h1{
+	font-size: 2em;
+}
+h2{
+	font-size: 1.5em;
+}
+h3{
+	font-size: 1.3em;
+}
+a{
+	text-decoration: none;
+	outline-width: 0;
+	color: $main;
+}
+.left{
+	float: left;
+}
+.right{
+	float: right;
+}
+.clear{
+	clear: both;
+}
+.inner{
+	width: $max-width;
+	margin: 0 auto;
+}
\ No newline at end of file
diff --git a/sass/partials/_banner.scss b/sass/partials/_banner.scss
new file mode 100644
index 0000000..3164048
--- /dev/null
+++ b/sass/partials/_banner.scss
@@ -0,0 +1,109 @@
+#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
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/sass/partials/_comments.scss
diff --git a/sass/partials/_footer.scss b/sass/partials/_footer.scss
new file mode 100644
index 0000000..faa17fb
--- /dev/null
+++ b/sass/partials/_footer.scss
@@ -0,0 +1,56 @@
+#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
new file mode 100644
index 0000000..fb6680e
--- /dev/null
+++ b/sass/partials/_header.scss
@@ -0,0 +1,140 @@
+#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
new file mode 100644
index 0000000..bbb45cb
--- /dev/null
+++ b/sass/partials/_index.scss
@@ -0,0 +1,140 @@
+#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
new file mode 100644
index 0000000..b88812a
--- /dev/null
+++ b/sass/partials/_post.scss
@@ -0,0 +1,21 @@
+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
new file mode 100644
index 0000000..862840c
--- /dev/null
+++ b/sass/partials/_sidebar.scss
@@ -0,0 +1,51 @@
+#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/screen.scss b/sass/screen.scss
new file mode 100644
index 0000000..347fc15
--- /dev/null
+++ b/sass/screen.scss
@@ -0,0 +1,4 @@
+@import "compass";
+
+@import "base";
+@import "partials";
\ No newline at end of file