Update ad code

css/demo-page.css

@@ -53,45 +53,105 @@ nav li {
   margin: 0 4px;
 }
 
-.carbon-ad.ad {
+#carbonads {
+  --width: 180px;
+  --font-size: 14px;
+}
+
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  display: block;
+  overflow: hidden;
+  margin: 0 auto;
+  margin-bottom: 20px;
+  max-width: var(--width);
+  border-radius: 4px;
+  text-align: center;
+  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1);
+  background-color: hsl(0, 0%, 98%);
+  font-size: var(--font-size);
+  line-height: 1.5;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
   position: relative;
   display: block;
-  box-sizing: border-box;
-  max-width: 320px;
-  margin: 0 auto;
-  margin-top: 6em;
-  padding: 1em 2.5em;
-  padding-top: 2em;
-  text-align: center;
-  font-size: 14px;
+  overflow: hidden;
 }
 
-.carbon-ad-label {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  margin: 0;
-  margin-bottom: 2px;
-  font-size: 11px;
-  text-align: center;
-  color: #999;
-}
-
-.carbon-ad .carbon-poweredby {
-  margin-bottom: 0;
-  font-size: 12px;
-}
-
-.carbon-ad .carbon-img {
-  margin: 0 auto;
-  margin-bottom: .625em;
-  background: white;
-}
-
-.carbon-ad img {
+.carbon-img {
   display: block;
-  border: solid 1px #ddd;
+  margin-bottom: 8px;
+  max-width: var(--width);
+  line-height: 1;
+}
+
+.carbon-img img {
+  display: block;
+  margin: 0 auto;
+  max-width: var(--width) !important;
+  width: var(--width);
+  height: auto;
+}
+
+.carbon-text {
+  display: block;
+  padding: 0 1em 8px;
+}
+
+.carbon-poweredby {
+  display: block;
+  padding: 10px var(--font-size);
+  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 0;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 759px) {
+  #carbonads {
+    float: none;
+    margin: 0 auto;
+    max-width: 330px;
+  }
+  #carbonads span {
+    position: relative;
+  }
+  #carbonads > span {
+    max-width: none;
+  }
+  .carbon-img {
+    float: left;
+    margin: 0;
+  }
+
+  .carbon-img img {
+    max-width: 130px !important;
+  }
+  .carbon-text {
+    float: left;
+    margin-bottom: 0;
+    padding: 8px 20px;
+    text-align: left;
+    max-width: calc(100% - 130px - 3em);
+  }
+  .carbon-poweredby {
+    left: 130px;
+    bottom: 0;
+    display: block;
+    width: 100%;
+  }
 }
 
 .main {

index.html

@@ -47,12 +47,9 @@
 			</div>
 
 			<hr />
-
-			<div class="ad carbon-ad">
-				<p class="carbon-ad-label">Advertisement:</p>
-				<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ianlunngithubiohover" id="_carbonads_js"></script>
-			</div>
-
+			<br />
+			
+			<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIE23M&placement=ianlunncouk" id="_carbonads_js"></script>
 
 			<div id="effects" class="effects">