add back carbon ads

index.html

@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 	<link rel="stylesheet" type="text/css" href="st/theme.css">
+	<link rel="stylesheet" type="text/css" href="st/carbon.css">
 
 	<meta charset="utf-8"/>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
@@ -20,6 +21,9 @@
 
 	<div class="container">
 		<div class="text-center row header">
+			<div class="col-12 mb-4">
+				<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7I65QW&placement=sortablejsgithubio" id="_carbonads_js"></script>
+			</div>
 			<img class="mx-auto d-block" src="st/og-image.png" style="max-width: 200px; max-height: 200px" />
 			<h1 class="col-12">SortableJS</h1>
 			<h3 class="col-12 text-center">JavaScript library for reorderable drag-and-drop lists</h3>

st/carbon.css

+@media (min-width: 992px) {
+  #carbonads {
+    display: block;
+    overflow: hidden;
+    padding: 10px;
+    box-shadow: 0 1px 3px hsla(0, 0%, 0%, .05);
+    border-radius: 4px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    max-width: 300px;
+    margin-top: 50px;
+    font-size: 12px;
+    position: absolute;
+    background-color: #fff;
+  }
+
+  #carbonads a {
+    text-decoration: none;
+  }
+
+  #carbonads span {
+    position: relative;
+    display: block;
+    overflow: hidden;
+  }
+
+  .carbon-img {
+    float: left;
+    margin-right: 1em;
+  }
+
+  .carbon-img img {
+    display: block;
+  }
+
+  .carbon-text {
+    display: block;
+    float: left;
+    max-width: calc(100% - 130px - 1em);
+    text-align: left;
+    color: #637381;
+  }
+
+  .carbon-poweredby {
+    position: absolute;
+    left: 142px;
+    bottom: 0;
+    display: block;
+    font-size: 8px;
+    color: #c5cdd0;
+    font-weight: 500;
+    text-transform: uppercase;
+    line-height: 1;
+    letter-spacing: 1px;
+  }
+}
+
+@media (max-width: 992px) {
+ #carbonads {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+    --width: 728px;
+    --font-size: 22px;
+  }
+
+  #carbonads {
+    display: block;
+    overflow: hidden;
+    max-width: var(--width);
+    position: relative;
+    background-color: hsl(0, 0%, 99%);
+    border: solid 1px #eee;
+    font-size: var(--font-size);
+    box-sizing: border-box;
+  }
+
+  .detail #carbonads {
+    margin-top: 12px;
+  }
+
+  #carbonads a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  #carbonads a:hover {
+    color: inherit;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  carbon-img {
+    display: block;
+    float: left;
+    margin: 0;
+    max-width: var(--width);
+    line-height: 1;
+  }
+
+  .carbon-img img {
+    display: block;
+    height: 90px;
+    width: auto;
+  }
+
+  .carbon-text {
+    display: block;
+    float: left;
+    padding: 0 1em;
+    line-height: 1.35;
+    max-width: calc(100% - 130px - 2em);
+    text-align: left;
+  }
+
+  .carbon-poweredby {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 6px 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.8);
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    font-size: 8px;
+    border-top-left-radius: 4px;
+    line-height: 1;
+  }
+
+  @media only screen and (min-width: 320px) and (max-width: 759px) {
+    .carbon-text {
+      font-size: 14px;
+    }
+  }
+}
\ No newline at end of file