Add deprecation warning to style guide header

closes UIDEV-231

Test plan:
- start up Canvas and navigate to /styleguide
- you should see the deprecation notice as a warning style alert
- the link should open a new tab and go to the blog post about the
  deprecation

Change-Id: Ic287939123b38178e3c49b699730e65ccf574b02
Reviewed-on: https://gerrit.instructure.com/172808
Product-Review: Arlo Guthrie <aguthrie@instructure.com>
Tested-by: Jenkins
Reviewed-by: Steve Jensen <sejensen@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>

app/stylesheets/pages/styleguide/_styleguide_layout.scss

@@ -84,6 +84,10 @@ body.Sg-only {
   width: 100%;
   z-index: 999;
 }
+.Sg-header__Alert {
+  background: darken($ic-color-dark, 5%);
+  padding: 16px;
+}
 .Sg-header__Navigation {
   @include sg-header-logo;
   @extend %sg-flex;
@@ -137,7 +141,7 @@ body.Sg-only {
 }
 .Sg-Main {
   /// Account for fixed header
-  padding-top: 85px;
+  padding-top: 121px;
 }
 // Hologram class
 .Sg-Content,

doc/styleguide/template.mustache

@@ -5,6 +5,17 @@
 {{!-- Navigation --}}
 
 <header class="Sg-header">
+  <div class="Sg-header__Alert">
+    <div class="ic-flash-warning">
+      <div class="ic-flash__icon" aria-hidden="true">
+        <i class="icon-warning"></i>
+      </div>
+      This page is deprecated.
+      <a target="_blank" href="https://community.canvaslms.com/community/ideas/blog/2018/11/16/instui-instructure-s-style-guide-20">
+        Learn More
+      </a>
+    </div>
+  </div>
   <nav class="Sg-header__Navigation">
       <a href="#" data-sg-category="Sg-Navigation--Style" class="Sg-header__Navigation-item ">Style</a>
       <a href="#" data-sg-category="Sg-Navigation--Scaffold" class="Sg-header__Navigation-item">Scaffold</a>