From b4a9c916730258c4fdea53dabbf45b16e8458135 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Tue, 19 Sep 2017 14:57:11 +0800
Subject: [PATCH] Adjust codesponsor message

---
 _data/content.yml                       |  5 ++++
 _includes/2017/code-sponsor.html        | 11 ++++++---
 _sass/2017/components/code-sponsor.scss | 31 ++++++++++++++++++++++++-
 _sass/2017/components/site-header.scss  |  3 ++-
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/_data/content.yml b/_data/content.yml
index e37bbcea3..848e643ce 100644
--- a/_data/content.yml
+++ b/_data/content.yml
@@ -38,3 +38,8 @@ not_found:
   title: Not found
   description: Sorry, we don't have a cheatsheet for this yet. Try searching!
   home: Back to home
+
+code_sponsor:
+  recommender_name: "@rstacruz"
+  recommender_url: "https://twitter.com/rstacruz"
+  recommender_suffix: "recommends:"
diff --git a/_includes/2017/code-sponsor.html b/_includes/2017/code-sponsor.html
index 03001db27..0441b452c 100644
--- a/_includes/2017/code-sponsor.html
+++ b/_includes/2017/code-sponsor.html
@@ -1,6 +1,11 @@
-<div class='code-sponsor'>
+<aside class='code-sponsor'>
   {% unless include.noprelude %}
-    <span class='prelude'>We recommend:</span>
+  <span class='prelude'>
+    <a href='{{ site.data.content.code_sponsor.recommender_url }}'>
+      {{ site.data.content.code_sponsor.recommender_name }}
+    </a>
+    {{ site.data.content.code_sponsor.recommender_suffix }}
+  </span>
   {% endunless %}
   <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>
+</aside>
diff --git a/_sass/2017/components/code-sponsor.scss b/_sass/2017/components/code-sponsor.scss
index 2f7b71d03..4e123e218 100644
--- a/_sass/2017/components/code-sponsor.scss
+++ b/_sass/2017/components/code-sponsor.scss
@@ -1,21 +1,50 @@
 .code-sponsor {
   & {
     text-align: center;
+    position: relative;
   }
 
   /* Prelude */
   & > .prelude {
+    position: relative;
+    z-index: 5;
     display: block;
     @include font-size(-1);
     color: lighten($gray-text, 20%);
     text-align: center;
-    margin-bottom: -8px;
     font-weight: normal;
     user-select: none;
   }
 
+  & > .prelude > a,
+  & > .prelude > a:visited {
+    text-decoration: none;
+    color: lighten($gray-text, 20%);
+  }
+
+  & > .prelude > a:hover,
+  & > .prelude > a:focus {
+    color: $gray-text;
+  }
+
+  /* Compensate padding to put it next to prelude */
+  & > div {
+    position: relative;
+    z-index: 1;
+    margin-top: -16px;
+  }
+
+  /* Extra line between prelude and ad? */
+  & > .prelude + div {
+    margin-top: -8px;
+  }
+
   & > div > iframe {
     display: inline-block;
     opacity: 0.7;
   }
+
+  & > div:hover > iframe {
+    opacity: 1;
+  }
 }
diff --git a/_sass/2017/components/site-header.scss b/_sass/2017/components/site-header.scss
index 728f2475d..1d47a02a5 100644
--- a/_sass/2017/components/site-header.scss
+++ b/_sass/2017/components/site-header.scss
@@ -30,6 +30,7 @@
   }
 
   & > .adbox {
-    margin-top: 16px;
+    margin-top: 32px;
+    margin-bottom: -16px;
   }
 }