Add a vignette effect and remove link backgrounds

- Links now fade in smoother (opacity jump fixed) - Links don’t have a background, instead, the main image now has a vignette using box-shadow
nocturneDevs · May 2, 2016 · 6b3513e · 6b3513e
1 parent 615018d
commit 6b3513e
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 6 deletions.
diff --git a/app/background.js b/app/background.js
@@ -86,6 +86,7 @@ var Background = React.createClass({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        boxShadow: "inset 0px 0px 85px rgba(0,0,0,.5)"
       }
     };
     return (

diff --git a/app/background.jsx b/app/background.jsx
@@ -86,6 +86,7 @@ var Background = React.createClass({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        boxShadow: "inset 0px 0px 85px rgba(0,0,0,.5)"
       }
     };
     return (

diff --git a/app/link.js b/app/link.js
@@ -11,10 +11,8 @@ var Link = React.createClass({
   render: function() {
     var style = {
       textDecoration: "none",
-      color: "#ccc",
-      opacity: "0.8",
+      color: "rgba(200,200,200,0.8)",
       padding: "5px",
-      backgroundImage: "radial-gradient(closest-side at 50% 50% , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%)",
       WebkitAnimation: "fadein 1s"
     }
     return (

diff --git a/app/link.jsx b/app/link.jsx
@@ -11,10 +11,8 @@ var Link = React.createClass({
   render: function() {
     var style = {
       textDecoration: "none",
-      color: "#ccc",
-      opacity: "0.8",
+      color: "rgba(200,200,200,0.8)",
       padding: "5px",
-      backgroundImage: "radial-gradient(closest-side at 50% 50% , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%)",
       WebkitAnimation: "fadein 1s"
     }
     return (