Adjust codesponsor message

_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:"

_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>

_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;
+  }
 }

_sass/2017/components/site-header.scss

@@ -30,6 +30,7 @@
   }
 
   & > .adbox {
-    margin-top: 16px;
+    margin-top: 32px;
+    margin-bottom: -16px;
   }
 }