Include Carbon Ads

_includes/footer.html

@@ -1,5 +1,5 @@
 <footer class="flex flex-column items-center pv6-l pv5">
-  <ul class="flex flex-column flex-row-l justify-center w-80 mv0 pl0 list">
+  <ul class="flex flex-column flex-row-l justify-center w-80 mw8 mv0 pl0 list">
     {% for link in include.links %}
     <li class="mh3-l pv3 pv0-l f5 bb b--black-10 bn-l">
       <a class="lh-copy color-inherit no-underline dim" href="{{ link.url }}" target="_blank">{{ link.title }}</a>

_includes/header.html

@@ -1,5 +1,5 @@
 <header class="pv3 bb b--black-10">
-  <div class="w-80 center flex justify-between items-center">
+  <div class="w-80 mw8 center flex justify-between items-center">
     <h1 class="mv0 normal f3 lh-copy black-90">Feather</h1>
 
     <ul class="list mv0 pl0 flex">

_includes/hero.html

@@ -1,4 +1,4 @@
-<div class="flex flex-column items-center w-80 pv5 pv6-ns center">
+<div class="flex flex-column items-center w-80 mw8 pv5 pv6-ns center">
   <h2 class="mt0 mb4 f2 fw3 tc lh-title black-90">Simply beautiful open source icons</h2>
   <a
     class="button white bg-accent dim br2"

_includes/icons.html

@@ -1,4 +1,4 @@
-<div class="w-80 center">
+<div class="w-80 mw8 center">
   <ul class="icon-grid mv0 pl0 list">
       {% for file in site.static_files %}
         {% if file.path contains 'dist/icons/'  %}

index.html

@@ -37,9 +37,11 @@ links:
 
   {% include header.html %}
   {% include hero.html %}
+
+  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=feathericonscom" id="_carbonads_js"></script>
+
   {% include icons.html %}
   {% include footer.html links=page.links %}
 
-  </script>
 </body>
 </html>

style.css

@@ -50,6 +50,8 @@
   padding: 0 0.5rem 1rem;
 }
 
+
+
 /* medium breakpoint */
 @media (min-width: 30em) {
   .icon-grid li {
@@ -68,7 +70,7 @@
 @supports (display: grid) {
   .icon-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
     grid-gap: 1rem;
     margin: 0;
   }
@@ -79,3 +81,71 @@
     padding: 0;
   }
 }
+
+/* Carbon Ads */
+
+#carbonads {
+  width: 80%;
+  margin: 0 auto;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background: #f4f4f4;
+  border-radius: .25rem;
+}
+
+#carbonads a {
+  text-decoration: none;
+}
+
+.carbon-wrap {
+  display: flex;
+}
+
+.carbon-img {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+  line-height: 0;
+}
+
+.carbon-text {
+  color: currentColor;
+}
+
+.carbon-poweredby {
+  display: block;
+  margin-top: 1rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+@media (min-width: 45em) {
+  #carbonads {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    max-width: 12rem;
+    margin: 0;
+    background: rgba(255,255,255,0.9);
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
+  }
+
+  .carbon-wrap {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .carbon-img {
+    margin-right: 0;
+  }
+
+  .carbon-text {
+    text-align: center;
+    margin-top: 1rem;
+  }
+}