v1.0 beta init

public/css/index.less

@@ -71,6 +71,21 @@ a:hover {
 	background-color: #fff;
 	-webkit-box-shadow: 1px 1px 8px -1px rgba(0, 0, 0, 0.1);
 	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
+	margin: 0;
+	.navbar-brand {
+		padding: 0;
+		padding-left: 10px;
+		line-height: @headerHeight;
+		img {
+			height: 50px;
+			display: inline-block;
+			margin-top: -5px;
+		}
+	}
+	.navbar-nav a {
+		line-height: @headerHeight;
+		padding: 0 10px;
+	}
 }
 #header, #posts, #loginContainer {
 }
@@ -116,6 +131,7 @@ section {
 	margin: auto;
 	width: 850px;	
 	text-align: center;
+	overflow: hidden;
 	img {
 		// box-shadow: -15px 10px 0 rgba(0, 0, 0, 0.15);
 	}
@@ -134,7 +150,7 @@ section {
 		}
 	}
 	.mobile {
-		position: absolute; bottom: 0px; right: 0;
+		position: absolute; bottom: -80px; right: 0;
 		.mobile-header {
 			padding: 8px 15px;
 			border-radius: 14px 14px 0 0;
@@ -147,7 +163,7 @@ section {
 		img {
 			border: 3px solid rgb(46, 62, 78);
 			border-bottom: 0;
-			width: 160px;
+			width: 200px;
 		}
 	}
 }
@@ -163,33 +179,18 @@ section {
   }
   background-color: #fff;
 }
-#blogNav {
-	margin: 0;
-	padding: 0;
-	line-height: @headerHeight;
-	li {
-		display: inline-block;
-		a {
-			display: inline-block;
-			padding: 0 10px;
-			color: #1b252e;
-			&:hover {
-				background-color: #eee;
-			}
-		}
-		a.active {
-			// font-weight: bold;
-		}
-	}
+#navbar {
+	float: right;
+	background: #fff;
 }
 
 #loginBtns {
 	border-left: 1px solid #eee;
 	border-color: rgba(200, 200, 200, 0.5);
 	padding-left: 10px;
-	line-height: 30px;
 	margin-top: 15px;
 	a {
+		line-height: 30px !important;
 		display: inline-block;
 		color: #1b252e;
 		padding: 0 10px;
@@ -201,7 +202,51 @@ section {
 		border-radius: 2px;
 	}
 }
+.red-circle {
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	background: red;
+	top: 15px;
+	right: 5px;
+	border-radius: 9px;
+}
 
+.navbar-toggle {
+	padding: 14px 10px;
+}
+@media screen and (max-width:700px) {
+	#loginBtns {
+		border: none;
+	}
+	.red-circle {
+		display: none;
+	}
+	#navbar {
+		padding: 0;
+	}
+	.navbar-nav {
+		margin: 0;
+		padding: 0;
+		border: 1px solid #ccc;
+		li {
+			border-bottom: 1px solid #ccc;
+		}
+		#loginBtns {
+			padding-right: 10px;
+			padding-bottom: 5px;
+		}
+	}
+}
+@media screen and (max-width:600px) {
+	.header .btn {
+		display: block;
+		margin: 0;
+	}
+	.mobile {
+		top: 0 !important;
+	}
+}
 /* posts */
 #posts {
 	padding-top: 10px;
@@ -591,4 +636,10 @@ input, .form-control {
 	-moz-animation-name: fadeInDownBig;
 	-o-animation-name: fadeInDownBig;
 	animation-name: fadeInDownBig;
-}
+}
+
+@media screen and (max-width:500px) {
+	* {
+		max-width: 100% !important;
+	}
+}