Add callout to responsive emails course in docs sidebar

diff --git a/docs/assets/scss/_course-callout.scss b/docs/assets/scss/_course-callout.scss
new file mode 100644 (file)
index 0000000..948708b
--- /dev/null
+++ b/docs/assets/scss/_course-callout.scss
@@ -0,0 +1,40 @@
+.docs-course-callout {
+  display: block;
+  background: #A183D3;
+  color: $white;
+  padding: 1rem;
+  margin-top: 1rem;
+
+  &:hover,
+  &:focus {
+    color: $white;
+  }
+
+  .button {
+    background: $white;
+    color: #85769e;
+    font-weight: bold;
+    border-radius: 2px;
+    box-shadow: 0 2px 0 #999;
+    margin-bottom: 0;
+  }
+
+  p {
+    font-size: rem-calc(14);
+    line-height: 21px;
+  }
+}
+
+.docs-course-callout-subtitle {
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 1px;
+  font-size: rem-calc(12);
+  display: block;
+}
+
+.docs-course-callout-title {
+  font-weight: bold;
+  margin-bottom: 0.75rem;
+  display: block;
+}

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index b9cfe29f1d6d9826bccaa82743b478c59cf25cba..af17a1c5262d314bcd9aa26d34c644b172b76aae 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -25,6 +25,7 @@ $foundation-palette: (
 
 @import 'code';
 @import 'compatibility';
+@import 'course-callout';
 
 .dropdown.menu > li.is-dropdown-submenu-parent > a {
   padding-right: 1rem;

diff --git a/docs/layouts/default.html b/docs/layouts/default.html
index f729bbdd7969ac51c1d0f8408a3b901348fb2a71..1ceb9a1b4f8e596bac279aa32361fe5b791bbec4 100644 (file)
--- a/docs/layouts/default.html
+++ b/docs/layouts/default.html
@@ -35,6 +35,7 @@
         </div>
         <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
           {{> component-list}}
+          {{> course-callout}}
         </div>
       </div>
 

diff --git a/docs/partials/course-callout.html b/docs/partials/course-callout.html
new file mode 100644 (file)
index 0000000..426c884
--- /dev/null
+++ b/docs/partials/course-callout.html
@@ -0,0 +1,6 @@
+<a class="docs-course-callout" href="http://zurb.com/university/responsive-emails-foundation">
+  <span class="docs-course-callout-subtitle">ZURB Master Class</span>
+  <span class="docs-course-callout-title">Responsive Emails</span>
+  <p>In this online class, you’ll learn how to rapidly design and develop responsive emails that look beautiful on just about every screen, browser, and email client out there—even Outlook.</p>
+  <span class="button">View Class</span>
+</a>