restyling

src/scripts/app.tag

@@ -3,7 +3,6 @@
     <div
       style={
               {
-                "border-bottom" : showBorder ? "solid 1px" : "none",
                 "opacity" : showBorder ? "0.7" : "1",
                 "background-color" : showBorder ? "white" : "white"
               }

src/scripts/browse.tag

@@ -99,7 +99,7 @@ self.openPost = (id) => {
 
 self.cardStyle = {
   "margin" : "auto",
-  "margin-top" : "8px"
+  "margin-top" : "13px"
 };
 
 self.linkStyle = {

src/scripts/links.tag

@@ -11,7 +11,9 @@
       <div class="column col-12">
         <loading if={loading}></loading>
       </div>
-      <div each={links in groups} class="column col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4">
+      <div each={links in groups}
+           class="column col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 links-column"
+      >
         <h5 class="text-center">{links.title}</h5>
         <div each={item in links.items} class="tile link-box">
           <div class="tile-icon">

src/styles/riotblog.scss

@@ -8,6 +8,31 @@ $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);
+}
+
+.gradient {
+  -webkit-background-size: cover !important;
+  -moz-background-size: cover !important;
+  -o-background-size: cover !important;
+  background-size: cover !important;
+  background-repeat:no-repeat !important;
+  background-color: #FBFCFD !important;
+}
+
+html {
+    min-height: 100%;
+    @extend .gradient;
+}
+
+.app-body {
+  @extend .gradient;
+  margin-top: 80px;
+}
+
 .blog-title {
   text-transform: capitalize;
   margin-top: 15px;
@@ -33,10 +58,7 @@ $navbarHeight: 100px;
   z-index: 1;
   width: 100%;
   margin: auto;
-}
-
-.app-body {
-  margin-top: 80px;
+  border-bottom: 1px solid $brandingBG;
 }
 
 .twitter-share-button-rendered {
@@ -289,6 +311,7 @@ p, h6, h5, h4, h3, h2, h1 {
 }
 
 .projects-card {
+  @extend .shadow;
   height: 200px !important;
 }
 
@@ -312,6 +335,7 @@ p, h6, h5, h4, h3, h2, h1 {
 }
 
 .post-card {
+  @extend .shadow;
   max-width: 80%;
   @media(max-width: 400px) {
     max-width: 95%;
@@ -371,6 +395,13 @@ code {
   }
 }
 
+.links-column {
+  @extend .shadow;
+  background-color: white;
+  margin: 5px 5px 5px 5px;
+  border: 1px solid $brandingBG;
+}
+
 .links-content {
   margin-top: 5px;
   margin-left: auto;