fix projects styling

src/scripts/app.tag

@@ -10,7 +10,7 @@
       class="header"
     >
     <section
-      style={{"margin-top" : "5px"}}
+      style={{"margin-top" : page !== "posts" ? "15px" : "5px"}}
       class="text-center nav navbar centered navbar-section"
     >
       <h3 class="blog-title">{ currentPage }</h3>

src/scripts/browse.tag

@@ -56,12 +56,12 @@
           each={result in opts.state.results}
         >
           <div class="card-header">
-            <h3 class="card-title">
+            <h2 class="card-title">
               { result[1].title } by { result[1].author }
-            </h3>
+            </h2>
           </div>
           <div class="card-body">
-            <raw content="{ converter.makeHtml(result[1].content) }"></raw>
+              <raw content="{ converter.makeHtml(result[1].content) }"></raw>
             <a
               style={linkStyle}
               href={"/blog/posts/"+result[1].id}

src/scripts/projects.tag

@@ -1,6 +1,8 @@
 <projects>
     <div class="projects-box">
-      <div class="columns">
+      <div
+        class="columns"
+      >
         <div class="column col-8">
           <h4 class="float-right">
             Some Projects I Work On
@@ -17,10 +19,21 @@
       </div>
 
       <loading if={loading}></loading>
-      <div if={!loading} class="text-break">
+      <div
+        if={!loading} class="text-break"
+      >
         <div if={this.swipe} class={"projects-card card animated "+this.transition}>
           <div class="card-header">
-            <h3 class="card-title project-title">{ this.project().name }</h3>
+            <h5
+              class="show-sm show-xs project-title"
+            >
+              { this.project().name }
+            </h5>
+            <h3
+              class="hide-sm hide-xs project-title"
+            >
+              { this.project().name }
+            </h3>
             <h5 class="project-description">{ this.project().description }</h5>
           </div>
           <div class="card-body">
@@ -96,7 +109,7 @@ next() {
   console.log(self.project());
   self.update(
     {
-      "transition" : "flipInX",
+      "transition" : "fadeInRight",
       "swipe" : true
     }
   );
@@ -107,7 +120,7 @@ prev() {
   self.projects = Z.goLeft(self.projects);
   self.update(
     {
-      "transition" : "flipInX",
+      "transition" : "fadeInLeft",
       "swipe" : true
     }
   );

src/styles/riotblog.scss

@@ -9,9 +9,9 @@ $menuWidth: 60px;
 $navbarHeight: 100px;
 
 .shadow {
-  -webkit-box-shadow: 1px 4px 20px -2px rgba(0,0,0,0.2);
-  -moz-box-shadow: 1px 4px 20px -2px rgba(0,0,0,0.2);
-  box-shadow: 1px 4px 20px -2px rgba(0,0,0,0.2);
+  -webkit-box-shadow: 1px 4px 20px -8px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 4px 20px -8px rgba(0,0,0,0.2);
+  box-shadow: 1px 4px 20px -8px rgba(0,0,0,0.2);
 }
 
 .gradient {
@@ -34,9 +34,12 @@ html {
 }
 
 .blog-title {
+  -webkit-transform-style: preserve-3d !important;
+  -webkit-transform: translate3d(0, 0, 0) !important;
+  transform : translate3d(0, 0, 0) !important;
   text-transform: capitalize;
   margin-top: 15px;
-  max-width: 70%;
+  max-width: 100%;
   margin: auto;
   font-weight: 400;
   color: black;
@@ -49,7 +52,8 @@ html {
 }
 
 .header {
-  background-color: white;
+  @extend .shadow;
+  background-color: #FBFCFD !important;
   height: 68px;
   margin-top: 0px;
   padding-top: 0px;
@@ -58,7 +62,6 @@ html {
   z-index: 1;
   width: 100%;
   margin: auto;
-  border-bottom: 1px solid $brandingBG;
 }
 
 .twitter-share-button-rendered {
@@ -227,7 +230,6 @@ p, h6, h5, h4, h3, h2, h1 {
 
 .project-title {
 	font-family: 'Open Sans',sans-serif !important;
-	font-size: 1.9em !important;
 	line-height: 1.6em !important;
 	color: #3A4145 !important;
 }
@@ -307,12 +309,27 @@ p, h6, h5, h4, h3, h2, h1 {
 
 .projects-box {
   @extend .content-box;
-  height: 300px !important;
+  margin-bottom: 10px;
 }
 
 .projects-card {
   @extend .shadow;
-  height: 200px !important;
+  height: 250px !important;
+  @media(max-width: 1000px) {
+    height: 280px !important;
+  }
+  @media(max-width: 1240px) {
+    height: 260px !important;
+  }
+  @media(max-width: 800px) {
+    height: 265px !important;
+  }
+  @media(max-width: 360px) {
+    height: 270px !important;
+  }
+  @media(max-width: 330px) {
+    height: 295px !important;
+  }
 }
 
 .posts-box {
@@ -333,6 +350,16 @@ p, h6, h5, h4, h3, h2, h1 {
     max-width: 100%;
   }
 }
+$bg-color: red;
+
+.browse-readmore {
+  z-index: 1;
+  background: linear-gradient(to bottom, rgba($bg-color, 0) 0%, rgba($bg-color, 1) 100%);
+  height: 100px;
+  width: 100px;
+  margin-top: -100px;
+  position: absolute;
+}
 
 .post-card {
   @extend .shadow;
@@ -399,7 +426,6 @@ code {
   @extend .shadow;
   background-color: white;
   margin: 5px 5px 5px 5px;
-  border: 1px solid $brandingBG;
 }
 
 .links-content {

src/templates/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <meta name="theme-color" content="#67ADDB"/>
     <title>
     {{