Latest changes

public/index.html

@@ -17,7 +17,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <a
-      style="z-index:1; position: fixed; top: 0; right: 0"
+      style="z-index:1; position: absolute; top: 0; right: 0"
       href="https://github.com/javierbyte/cohesive-colors/"
       class="github-corner"
       ><svg
@@ -66,6 +66,13 @@
       }
     </style>
 
+    <script
+      async
+      type="text/javascript"
+      src="//cdn.carbonads.com/carbon.js?serve=CK7D5KQL&placement=javierxyz"
+      id="_carbonads_js"
+    ></script>
+
     <script>
       (function(i, s, o, g, r, a, m) {
         i["GoogleAnalyticsObject"] = r;
@@ -76,7 +83,8 @@
           }),
           (i[r].l = 1 * new Date());
         (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
+        //javier.xyz/visual-center
+        https: a.async = 1;
         a.src = g;
         m.parentNode.insertBefore(a, m);
       })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");

src/App.css

@@ -21,12 +21,6 @@ h4 {
   color: #000;
 }
 
-.github-corner {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
 .flex-center {
   display: flex;
   align-items: center;
@@ -41,7 +35,7 @@ button {
   background-color: rgba(255, 255, 255, 1);
   font-size: 0.9rem;
   border-radius: 3px;
-  margin: 0 2px 0;
+  margin: 0 2px 0.5rem;
   box-shadow: inset rgba(255, 255, 255, 0.5) 0 1px 0, rgba(0, 0, 0, 0.07) 0 1px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px;
   line-height: 1;
   padding: 0.618rem 1rem;
@@ -173,3 +167,84 @@ button:hover {
     width: 8rem;
   }
 }
+
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
+    Helvetica, Arial, sans-serif;
+}
+
+#carbonads {
+  display: flex;
+  max-width: 330px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+}
+
+.carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+
+.carbon-img img {
+  display: block;
+}
+
+.carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.carbon-poweredby {
+  display: block;
+  padding: 8px 10px;
+  background: repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 5px,
+      hsla(0, 0%, 0%, 0.025) 5px,
+      hsla(0, 0%, 0%, 0.025) 10px
+    )
+    hsla(203, 11%, 95%, 0.4);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 1;
+}
+
+#carbonads {
+  position: absolute;
+  left: 0;
+  bottom: 20vmin;
+}
+
+@media screen and (max-width: 1350px) {
+  #carbonads {
+    position: relative;
+    bottom: 0;
+    margin: 0 auto 2rem;
+  }
+}

src/components/ColorBar/index.js

@@ -135,5 +135,3 @@ class ColorBar extends React.Component {
 }
 
 export default ColorBar;
-
-

src/views/Home/index.js

@@ -12,8 +12,6 @@ const jsonp = require("jsonp");
 // const ColorBar = require("../../components/ColorBar");
 // const ColorBar = () => <div>khe</div>
 
-console.warn({ ColorBar });
-
 const kInitialColorSchemeSource = [
   ["555e7b", "b7d968", "b576ad", "e04644", "fde47f", "7ccce5"],
   ["69D2E7", "A7DBD8", "E0E4CC", "F38630", "FA6900"],
@@ -228,6 +226,7 @@ class Home extends React.Component {
           />
         </div>
         <br />
+
         <div className="credits">
           <div className="credits-header">Other projects</div>
           <a href="https://javier.xyz/img2css">
@@ -268,7 +267,6 @@ class Home extends React.Component {
             .
           </div>
           <br />
-          <br />
         </div>
       </div>
     );