blog page restyle

source/_layouts/post.html

@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
     <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
     <link href="/stylesheets/glyphicons.css" rel="stylesheet">
     <link href="/stylesheets/base.css" rel="stylesheet">
@@ -62,15 +63,13 @@
       <div class="container">     
         <div class="row">
           <div class="col-sm-12"> 
-            <div class="blog-entry">
               <div class="row">
-                <div class="col-sm-9">
-                  <h1>{{ page.title }}</h1>
+                <div class="col-sm-9 blog-entry">
+                  <h1 class="title">{{ page.title }}</h1>
                   <h4 class="date">{{ page.date | date: "%d %B %Y" }}</h4>
                   {{ content }}
                 </div>
               </div>
-            </div>
             <div id="disqus_thread"></div>
             <script type="text/javascript">

source/stylesheets/base.css

@@ -478,10 +478,32 @@ h3.title {
   background: white;
 }
-.blog-entry h1 {
+.blog-entry {
+  float: none;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.blog-entry h1.title {
+  font-size: 50px;
+  padding-top: 30px;
+}
+
+.blog-entry h1,
+.blog-entry h2,
+.blog-entry h3,
+.blog-entry h4,
+.blog-entry h5 {
   color: #444;
   font-weight: 600;
-  font-size: 50px;
+}
+
+.blog-entry p {
+  font-family: 'Noto Serif', serif;
+  font-size: 18px;
+  color: #444;
+  line-height: 2.9rem;
+  margin: 0 0 24px;
 }
 .blog-entry .date {
@@ -489,6 +511,7 @@ h3.title {
   font-weight: 300;
   font-size: 24px;
   margin-left: 4px;
+  padding-bottom: 30px;
 }