From a8f6a29a7e85fa906f54797fee7743ef8268d01c Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Tue, 19 Sep 2017 14:28:38 +0800
Subject: [PATCH] Reorder ads, and pre-emptively add codesponsor support

---
 _data/codesponsor.yml                   |  2 +
 _layouts/2017/sheet.html                | 16 +++++--
 _sass/2017/components/code-sponsor.scss | 22 ++++++++++
 _sass/2017/components/main-heading.scss | 55 ++++++-------------------
 _sass/2017/style.scss                   |  1 +
 5 files changed, 49 insertions(+), 47 deletions(-)
 create mode 100644 _data/codesponsor.yml
 create mode 100644 _sass/2017/components/code-sponsor.scss

diff --git a/_data/codesponsor.yml b/_data/codesponsor.yml
new file mode 100644
index 000000000..1eb138eae
--- /dev/null
+++ b/_data/codesponsor.yml
@@ -0,0 +1,2 @@
+enabled: false
+id: R1EbPvY5DOvuC69kWMtpkA
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html
index 393a0238a..ebb1993a6 100644
--- a/_layouts/2017/sheet.html
+++ b/_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' %}
diff --git a/_sass/2017/components/code-sponsor.scss b/_sass/2017/components/code-sponsor.scss
new file mode 100644
index 000000000..be9fb44f6
--- /dev/null
+++ b/_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;
+  }
+}
diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
index 4ef4959d2..9a458f535 100644
--- a/_sass/2017/components/main-heading.scss
+++ b/_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 @@
   }
 }
 
-/*
- * With ads
- */
-
-.main-heading.-with-ads {
-  & {
-    display: flex;
+.main-heading.-center {
+  & > h1 {
+    text-align: center;
   }
 
-  // Desktop
-  @media (min-width: 541px) {
-    & {
-      align-items: flex-end; // bottom alighn
-    }
-
-    & > h1 {
-      flex: 1 0 auto;
-    }
-
-    // Advertisement
-    & > .ad {
-      flex: 0 1 auto;
-    }
+  & > .adbox {
+    margin-top: 16px;
+    text-align: center;
   }
 
-  // Mobile: reorder things
-  @media (max-width: 540px) {
-    & {
-      flex-direction: column;
-      flex-wrap: wrap;
-      margin-top: 0;
-    }
+  & > .adbox > .ad {
+    display: inline-block;
+  }
 
-    & > h1,
-    & > .ad {
-      flex: 1 0 100%;
-    }
-
-    & > h1 {
-      order: 2;
-    }
-
-    & > .ad {
-      order: 1;
-      margin-left: auto;
-      margin-bottom: 16px;
-    }
+  & > .adbox > .ad.-carbon {
+    margin-top: 16px;
   }
 }
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 376e1b8bf..fa72cfdc5 100644
--- a/_sass/2017/style.scss
+++ b/_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';