add waterColor Style

Gruntfile.js

@@ -1,6 +1,7 @@
 module.exports = function(grunt) {
 
 	grunt.loadNpmTasks('grunt-contrib-less');
+	grunt.loadNpmTasks('grunt-contrib-watch');
 	grunt.loadNpmTasks('grunt-contrib');
 
 	grunt.initConfig({
@@ -22,7 +23,9 @@ module.exports = function(grunt) {
 					"build/metro-vibes/metro-vibes.css": "themes/metro-vibes/metro-vibes.less",
 					"build/metro-vibes-dark/metro-vibes-dark.css": "themes/metro-vibes-dark/metro-vibes-dark.less",
 					"build/wood/wood.css": "themes/wood/wood.less",
-					"build/wood-ri/wood-ri.css": "themes/wood-ri/wood-ri.less"
+					"build/wood-ri/wood-ri.css": "themes/wood-ri/wood-ri.less",
+					"build/imazine/magazine.css": "themes/imazine/magazine.less",
+					"build/imazine/water-color.css": "themes/imazine/water-color.less"
 				}
 			}
 		},
@@ -44,9 +47,20 @@ module.exports = function(grunt) {
           { src: 'themes/wood-ri/wood.jpg', dest: 'build/wood-ri/wood.jpg' }
 				]
 			}
+		},
+
+		watch: {
+			options: {
+				files: ['themes/**'],
+				tasks: ['less'],
+				options:{
+					livereload: true,
+				}
+			}
 		}
+
 	});
 
 	grunt.registerTask('default', [ 'less:development', 'copy:resources', 'copy:preview' ]);
 	grunt.registerTask('build', [ 'less:development', 'copy' ]);
-}
+}

assets/css/imazine/magazine.css

@@ -0,0 +1,104 @@
+@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
+
+.magazine{
+	font: 1em 'Quicksand', sans-serif, 'Apple SD Gothic Neo', '맑은 고딕','Malgun Gothic', 'Nanum Gothic', '나눔고딕','Driod Sans Fallback', 'Driod Sans', Helvetica, 'Gulim';
+	padding: 50px;
+	color: #222;
+	line-height: 1.5em;
+	letter-spacing: -0.03em;
+	word-spacing: 0.24em;
+	font-weight: 300;
+	/*text-shadow: inset 1px 1px 1px black;*/
+}
+
+.magazine h1,
+.magazine h2,
+.magazine h3,
+.magazine h4,
+.magazine h5,
+.magazine h6{
+	letter-spacing: -0.1em;
+	font-weight: 400;
+	padding-top: 30px;
+	color: #000;
+	margin: 30px 0;
+}
+
+.magazine a{
+	color: #e74b3b;
+	font-weight: 400;
+	text-decoration: underline;
+}
+
+.magazine h1{
+	padding: 40px 0 20px;
+	font-size: 3em;
+	line-height: 1em;
+}
+
+.magazine h2{
+	border-bottom: 1px solid;
+	padding: 14px 0;
+}
+
+.magazine img{
+	-webkit-transition: scale 0.4s ease;
+}
+
+.magazine strong.highlight{
+	background-color: #d91303;
+	padding: 4px 8px;
+	border-radius: 10px;
+	color: white;
+}
+
+.magazine thead{
+	background-color: #e74b3b;
+	color: white;
+}
+
+.magazine tbody tr td{
+	border-color: white;
+	padding: 10px 14px;
+}
+
+.magazine tbody tr{
+	background-color: #f2f2f2;
+}
+
+.magazine tbody tr:nth-child(2n){
+	background-color: #e3dad9;
+}
+
+.magazine pre{
+	border: none;
+	background: #f2f2f2;
+	color: #a70b00;
+	border-radius: 10px;
+	padding: 30px;
+}
+
+.magazine pre code{
+	border: none;
+	font-weight: 300;
+}
+
+.magazine blockquote{
+	padding: 30px;
+	font-style: italic;
+	font-size: 1.2em;
+	font-weight: bold;
+	color: black;
+	background-color: #f2f2f2;
+	border-radius: 10px;
+	margin: 0 auto;
+	width: 84%;
+}
+
+.magazine blockquote p:before,
+.magazine blockquote p:after{
+	position: relative;
+	top: 0.05em;
+	color: black;
+	content: ' " ';
+}

index.html

@@ -18,6 +18,8 @@
         <link rel="stylesheet" href="assets/css/metro-vibes-dark/metro-vibes-dark.css">
         <link rel="stylesheet" href="assets/css/wood/wood.css">
         <link rel="stylesheet" href="assets/css/wood-ri/wood-ri.css">
+        <link rel="stylesheet" href="assets/css/imazine/water-color.css">
+        <link rel="stylesheet" href="assets/css/imazine/magazine.css">
         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script>
             $(document.body).ready(function() {
@@ -51,6 +53,8 @@
             <li>Metro Vibes Dark</li>
             <li>Wood</li>
             <li>Wood Ri</li>
+            <li>Water Color</li>
+            <li>Magazine</li>
         </ul>
         <i class="clear"></i>
         <div id="markdown" class="markdown">