style improvements

src/scripts/app.tag

@@ -19,7 +19,7 @@
       </a>
     </li>
   </ul>
-  <div class="content">
+  <div class="projects-content">
     <loading if={!this.state.loaded}></loading>
     <projectsview
       class="animated fadeInDown"
@@ -28,6 +28,8 @@
       ref="projectsview"
     >
     </projectsview>
+  </div>
+  <div class="content">
     <postsview
       state={this.state}
       if={this.active.posts}

src/scripts/post.tag

@@ -6,8 +6,8 @@
         if={this.swipe && !this.loading}
         class={`animated ${this.transition}`}
       >
-        <h4>{ this.title }</h4>
+        <h4 class="post-title">{ this.title }</h4>
-        <h5>Posted by { this.author }</h5>
+        <h5 class="post-author">Posted by { this.author }</h5>
         <p class="post-content centered text-break">
           <raw content="{ this.converter.makeHtml(this.content) }"></raw>
         </p>

src/styles/projects.scss

@@ -1,4 +1,5 @@
 .projects {
+	font-family: 'Open Sans',sans-serif;
   margin: 0 auto !important;
 }
 
@@ -8,9 +9,14 @@
 
 .title {
   margin: 0 auto !important;
+	font-family: 'Open Sans',sans-serif;
+	font-size: 1.6em;
+	line-height: 1.6em;
+	color: #3A4145;
 }
 
 .gh-username {
+	font-family: 'Open Sans',sans-serif;
   margin: 0 auto !important;
   max-width: 75%;
 }

src/styles/riotblog.scss

@@ -1,7 +1,22 @@
 $branding: #5764c6;
 
-.post-text, .ltb-title, .post, .postnav {
+.post-text, .title, .post, .postnav {
   text-align: center;
+  border: 1px;
+}
+
+.post-title {
+	font-family: 'Open Sans',sans-serif;
+	font-size: 1.6em;
+	line-height: 1.6em;
+	color: #3A4145;
+}
+
+.post-author {
+	font-family: 'Open Sans',sans-serif;
+	font-size: 1.0em;
+	line-height: 1.2em;
+	color: #3A4145;
 }
 
 .loading {
@@ -50,7 +65,21 @@ $branding: #5764c6;
 
 .content {
   margin: auto;
-  max-width: 40%;
+  max-width: 50%;
+  @media (max-width: 1000px) {
+    max-width: 70%;
+  }
+  @media (max-width: 800px) {
+    max-width: 80%;
+  }
+  @media (max-width: 400px) {
+    max-width: 90%;
+  }
+}
+
+.projects-content {
+  margin: auto;
+  max-width: 30%;
   @media (max-width: 1000px) {
     max-width: 60%;
   }
@@ -63,11 +92,13 @@ $branding: #5764c6;
 }
 
 .post-content {
+  text-indent: 6mm;
   max-width: 100%;
 	font-family: 'Open Sans',sans-serif;
 	font-size: 1.4em;
 	line-height: 1.6em;
 	color: #3A4145;
+  text-align: left;
 }
 
 .rounded-button {