Install Carbon

michaelrhodes · Jun 9, 2017 · ee3e3f7 · ee3e3f7
1 parent 00ff5f9
commit ee3e3f7
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/example/example.css b/example/example.css
@@ -202,3 +202,83 @@ button:hover {
   margin-top: -8px;
   line-height: 16px;
 }
+
+/* Carbon */
+
+#carbonads {
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  margin-left: -180px;
+  padding: 1em;
+  max-width: calc(130px + 2em);
+  background-color: #aa5579;
+  text-align: center;
+  font-size: 12px;
+  font-family: Verdana, "Helvetica Neue", Helvetica, sans-serif;
+  line-height: 1.5;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+  transition: color .2s ease-in-out;
+}
+
+#carbonads a:hover {
+  color: #221c3b;
+}
+
+#carbonads span {
+  display: block;
+  overflow: hidden;
+}
+
+.carbon-img {
+  display: block;
+  margin: 0 auto 1em;
+}
+
+.carbon-text {
+  display: block;
+  margin-bottom: 1em;
+}
+
+.carbon-poweredby {
+  display: block;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 9px;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 960px) {
+  #carbonads {
+    position: relative;
+    float: none;
+    margin: 0 auto -2em;
+    max-width: 330px;
+  }
+  #carbonads span {
+    position: relative;
+  }
+  #carbonads > span {
+    max-width: none;
+  }
+  .carbon-img {
+    float: left;
+    margin: 0 1em 0 0;
+  }
+  .carbon-text {
+    float: left;
+    margin-bottom: 0;
+    max-width: calc(100% - 130px - 1em);
+    text-align: left;
+  }
+  .carbon-poweredby {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+  }
+}
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@ <h3 class='tagline'><span class='tagline-text'>Drag and drop so simple it hurts<
   <img class='gh-fork' src='https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png' />
 </a>
 <div class='examples'>
+  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=githubcombevacqua" id="_carbonads_js"></script>
   <div class='parent'>
     <label for='hy'>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label>
     <div class='wrapper'>