Docs changes

docs/css/carbon.css

@@ -1,55 +1,51 @@
 #carbonads {
+  display: flex;
+  float: right;
+  margin: 0 0 20px 20px;
+  max-width: 130px;
+  border-radius: 4px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+  font-size: 11px;
   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;
+  color: #111;
   text-decoration: none;
 }
 
 #carbonads a:hover {
-  color: inherit;
-}
-
-#carbonads span {
-  position: relative;
-  display: block;
-  overflow: hidden;
-}
-
-#carbonads .carbon-wrap {
-  display: flex;
+  color: #111;
 }
 
 .carbon-img {
   display: block;
-  margin: 0;
+  margin-bottom: 8px;
+  max-width: 130px;
   line-height: 1;
 }
 
 .carbon-img img {
   display: block;
+  margin: 0 auto;
+  max-width: 130px;
+  width: 130px;
+  height: auto;
 }
 
 .carbon-text {
-  font-size: 13px;
-  padding: 10px;
-  line-height: 1.5;
+  display: block;
+  padding: 0 10px 8px;
   text-align: left;
+  line-height: 1.35;
 }
 
 .carbon-poweredby {
   display: block;
-  padding: 8px 10px;
+  padding: 10px;
   background: repeating-linear-gradient(
       -45deg,
       transparent,
@@ -58,10 +54,41 @@
       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;
+  font-size: 8px;
+  line-height: 0;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 759px) {
+  #carbonads {
+    position: relative;
+    float: none;
+    margin: 20px 0;
+    max-width: 330px;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .carbon-img {
+    margin: 0;
+  }
+
+  .carbon-text {
+    padding: 10px 10px 0 10px;
+    font-size: 12px;
+  }
+
+  .carbon-poweredby {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-radius: 0;
+    border-top-left-radius: 3px;
+    text-align: center;
+  }
 }

docs/src/components/Docs/index.js

@@ -1,16 +1,17 @@
-import React, { Component } from 'react';
-import Installation from './Installation';
-import Usage from './Usage';
-import Props from './Props';
-import ARIASupport from './ARIASupport';
-import DataConversion from './DataConversion';
-import './styles.css';
+import React, { Component } from "react";
+import Installation from "./Installation";
+import Usage from "./Usage";
+import Props from "./Props";
+import ARIASupport from "./ARIASupport";
+import DataConversion from "./DataConversion";
+import "./styles.css";
 
-export default () =>
-<div className="docs-root">
-  <Installation />
-  <Usage />
-  <Props />
-  <ARIASupport />
-  <DataConversion />
-</div>;
+export default () => (
+  <div className="docs-root">
+    <Installation />
+    <Usage />
+    <Props />
+    <ARIASupport />
+    <DataConversion />
+  </div>
+);

docs/src/components/Home/index.js

@@ -6,39 +6,47 @@ import uploadImageCallBack from "../../util/uploadImageCallBack";
 import "./styles.css";
 
 export default class Home extends Component {
+  componentDidMount() {
+    const script = document.createElement("script");
+    script.id = "_carbonads_js";
+    script.type = "text/javascript";
+    script.src =
+      "//cdn.carbonads.com/carbon.js?serve=CEBIP5Q7&placement=jpurigithubio";
+    script.async = true;
+
+    document.getElementById("carbon_ad").appendChild(script);
+  }
+
   render() {
     return (
       <div className="root">
-        <Editor
-          wrapperClassName="home-wrapper"
-          editorClassName="home-editor"
-          toolbar={{
-            image: {
-              uploadCallback: uploadImageCallBack,
-              alt: { present: true },
-              previewImage: true,
-            },
-            fontFamily: {
-              options: [
-                "Arial",
-                "Georgia",
-                "Impact",
-                "Tahoma",
-                "Roboto",
-                "Times New Roman",
-                "Verdana",
-              ],
-            },
-          }}
-          placeholder="Begin typing..."
-          hashtag={{}}
-        />
-        <script
-          async
-          type="text/javascript"
-          src="//cdn.carbonads.com/carbon.js?serve=CEBIP5Q7&placement=jpurigithubio"
-          id="_carbonads_js"
-        ></script>
+        <div className="carbon_wrapper">
+          <div id="carbon_ad" className="carbon_ad" />
+          <Editor
+            wrapperClassName="home-wrapper"
+            editorClassName="home-editor"
+            toolbar={{
+              image: {
+                uploadCallback: uploadImageCallBack,
+                alt: { present: true },
+                previewImage: true,
+              },
+              fontFamily: {
+                options: [
+                  "Arial",
+                  "Georgia",
+                  "Impact",
+                  "Tahoma",
+                  "Roboto",
+                  "Times New Roman",
+                  "Verdana",
+                ],
+              },
+            }}
+            placeholder="Begin typing..."
+            hashtag={{}}
+          />
+        </div>
         <div className="quote-section">
           <div className="quote">
             <span className="quote-text">This is incredibly well done!</span>

docs/src/components/Home/styles.css

@@ -24,7 +24,7 @@
   height: 400px !important;
 }
 .home-editor {
-  border: 1px solid #F1F1F1 !important;
+  border: 1px solid #f1f1f1 !important;
   padding: 5px !important;
   border-radius: 2px !important;
   height: 80% !important;
@@ -61,3 +61,11 @@
 .discussion {
   margin-top: 15px;
 }
+.carbon_wrapper {
+  display: flex;
+}
+.carbon_ad {
+  margin-left: -200px;
+  margin-right: 50px;
+  margin-top: 50px;
+}