From a48ff37d500f597367623adb5b802b8565cb391b Mon Sep 17 00:00:00 2001
From: wes <wjak56@gmail.com>
Date: Mon, 4 Sep 2017 03:41:17 -0400
Subject: [PATCH] restyling

---
 src/scripts/app.tag      |  1 -
 src/scripts/browse.tag   |  2 +-
 src/scripts/links.tag    |  4 +++-
 src/styles/riotblog.scss | 39 +++++++++++++++++++++++++++++++++++----
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/scripts/app.tag b/src/scripts/app.tag
index 26e881f..13d4b09 100644
--- a/src/scripts/app.tag
+++ b/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"
               }
diff --git a/src/scripts/browse.tag b/src/scripts/browse.tag
index fef7f5f..53ae99c 100644
--- a/src/scripts/browse.tag
+++ b/src/scripts/browse.tag
@@ -99,7 +99,7 @@ self.openPost = (id) => {
 
 self.cardStyle = {
   "margin" : "auto",
-  "margin-top" : "8px"
+  "margin-top" : "13px"
 };
 
 self.linkStyle = {
diff --git a/src/scripts/links.tag b/src/scripts/links.tag
index 8543957..bff6f23 100644
--- a/src/scripts/links.tag
+++ b/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">
diff --git a/src/styles/riotblog.scss b/src/styles/riotblog.scss
index 10aca43..b3addd0 100644
--- a/src/styles/riotblog.scss
+++ b/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;