Reorder ads, and pre-emptively add codesponsor support

_data/codesponsor.yml

@@ -0,0 +1,2 @@
+enabled: false
+id: R1EbPvY5DOvuC69kWMtpkA

_layouts/2017/sheet.html

@@ -3,15 +3,23 @@
 {% include 2017/top-nav.html page=page %}
 
 <div class='body-area'>
-  <header class='main-heading {% if page.ads != false %}-with-ads{% endif %}'>
+  <header class='main-heading -center'>
     <h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
-    {% if page.ads != false %}
+
+    <div class='adbox'>
+      {% if site.data.codesponsor.enabled %}
+      <div class='code-sponsor ad -codesponsor'>
+        <span>Also recommended:</span>
+        <div id='code-sponsor-widget'></div><script src='https://app.codesponsor.io/scripts/{{ site.data.codesponsor.id }}?theme=light&image=hide&height=100&width=330'></script>
+      </div>
+      {% endif %}
+
       {% if site.data.carbon.enabled %}
-        <div class='HeadlineAd ad'>
+        <div class='HeadlineAd ad -carbon'>
           <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
         </div>
       {% endif %}
-    {% endif %}
+    </div>
   </header>
 
   {% if page.tags contains 'WIP' %}

_sass/2017/components/code-sponsor.scss

@@ -0,0 +1,22 @@
+.code-sponsor {
+  & {
+    text-align: center;
+  }
+
+  & > span {
+    display: block;
+    @include font-size(-1);
+    color: lighten($gray-text, 20%);
+    text-align: center;
+    margin-bottom: -8px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: bold;
+    user-select: none;
+  }
+
+  & > div > iframe {
+    display: inline-block;
+    opacity: 0.7;
+  }
+}

_sass/2017/components/main-heading.scss

@@ -10,7 +10,7 @@
   }
 
   & > h1 {
-    @include font-size(7);
+    @include font-size(8);
     line-height: 1.2;
     font-weight: 200;
     font-family: $body-font;
@@ -23,52 +23,21 @@
   }
 }
 
-/*
+.main-heading.-center {
- * With ads
- */
-
-.main-heading.-with-ads {
-  & {
-    display: flex;
-  }
-
-  // Desktop
-  @media (min-width: 541px) {
-    & {
-      align-items: flex-end; // bottom alighn
-    }
-
   & > h1 {
-      flex: 1 0 auto;
+    text-align: center;
   }
 
-    // Advertisement
+  & > .adbox {
-    & > .ad {
+    margin-top: 16px;
-      flex: 0 1 auto;
+    text-align: center;
-    }
   }
 
-  // Mobile: reorder things
+  & > .adbox > .ad {
-  @media (max-width: 540px) {
+    display: inline-block;
-    & {
-      flex-direction: column;
-      flex-wrap: wrap;
-      margin-top: 0;
   }
 
-    & > h1,
+  & > .adbox > .ad.-carbon {
-    & > .ad {
+    margin-top: 16px;
-      flex: 1 0 100%;
-    }
-
-    & > h1 {
-      order: 2;
-    }
-
-    & > .ad {
-      order: 1;
-      margin-left: auto;
-      margin-bottom: 16px;
-    }
   }
 }

_sass/2017/style.scss

@@ -21,6 +21,7 @@
 @import './components/attribute-peg';
 @import './components/back-button';
 @import './components/body-area';
+@import './components/code-sponsor';
 @import './components/comments-area';
 @import './components/comments-details';
 @import './components/comments-section';