From 39c6afc90278dff3f0ba6b0284ba92adfe4a4773 Mon Sep 17 00:00:00 2001
From: Leon Chen <leon@md.ai>
Date: Wed, 5 Oct 2016 17:32:55 -0400
Subject: [PATCH] add base stylesheet for demos site

---
 demos/base.css      | 26 ++++++++++++++++++++++++++
 demos/index.html    |  1 +
 demos/src/index.css | 24 +-----------------------
 index.html          |  5 +++--
 4 files changed, 31 insertions(+), 25 deletions(-)
 create mode 100644 demos/base.css

diff --git a/demos/base.css b/demos/base.css
new file mode 100644
index 0000000..b3f78b2
--- /dev/null
+++ b/demos/base.css
@@ -0,0 +1,26 @@
+body {
+  background: #F0F0F0;
+  min-height: 100vh;
+}
+
+#github-corner-link {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  top: -60px;
+  right: -60px;
+  border-radius: 50%;
+  background-color:  #1BBC9B;
+  transition: background-color 0.2s ease-in;
+}
+
+#github-corner-link:hover {
+  background-color: rgba(27, 188, 155, 0.7);
+}
+
+#github-corner-link .github-logo {
+  position: absolute;
+  bottom: 18px;
+  left: 18px;
+  fill: white;
+}
diff --git a/demos/index.html b/demos/index.html
index b10dc30..81baa03 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -6,6 +6,7 @@
     <title>Keras.js Demos</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="base.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">
     <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.grey-amber.min.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
diff --git a/demos/src/index.css b/demos/src/index.css
index dc55a9b..334db6e 100644
--- a/demos/src/index.css
+++ b/demos/src/index.css
@@ -5,34 +5,12 @@
 @import './_variables.css';
 
 body {
-  background: linear-gradient(0deg, #DDDDDD, #EEEEEE);
+  background: linear-gradient(0deg, #CCCCCC, #F0F0F0);
   color: $color-3;
   min-height: 100vh;
   font-family: $font-1;
 }
 
-#github-corner-link {
-  position: absolute;
-  width: 120px;
-  height: 120px;
-  top: -60px;
-  right: -60px;
-  border-radius: 50%;
-  background-color: $color-1;
-  transition: background-color 0.2s ease-in;
-
-  &:hover {
-    background-color: rgba(27, 188, 155, 0.7);
-  }
-
-  .github-logo {
-    position: absolute;
-    bottom: 18px;
-    left: 18px;
-    fill: white;
-  }
-}
-
 .title {
   width: 100%;
   color: $color-1;
diff --git a/index.html b/index.html
index 8f4177d..37356d8 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,8 @@
     <title>Keras.js Demos</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.min.css">
+    <link rel="stylesheet" href="demos/base.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">
     <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.grey-amber.min.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
@@ -24,7 +25,7 @@
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js"></script>
     <script src="https://rawgit.com/posva/vue-mdl/master/dist/vue-mdl.min.js"></script>
     <script src="lib/weblas.js"></script>
     <script src="dist/keras.min.js"></script>