merging branches

petele · petele · commit 7ee5428d51d3 · 2015-10-28T13:34:05.000-04:00
diff --git a/src/content/en/fundamentals/index.markdown b/src/content/en/fundamentals/index.markdown
@@ -18,6 +18,8 @@ translation_priority: 0
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
+
 <div class="page-content mdl-grid wf-fundamentals-cta">
   {% include shared/base_card.liquid title="Get started" text="Not sure where to start? Our getting started guides will walk you through some key things you need to know and help you figure out where to go next." linkHref="/web/fundamentals/getting-started/" linkText="Get Started" imgUrl="/web/fundamentals/imgs/wsk-on-pixel-n5.jpg" %}
 
diff --git a/src/content/en/showcase/case-study/index.markdown b/src/content/en/showcase/case-study/index.markdown
@@ -16,6 +16,8 @@ description: "Every so often, we talk with the engineering team behind a success
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
+
 <div class="page-content">
   <div class="mdl-grid">
     {% for pageInSection in page.context.pages reversed %}
diff --git a/src/content/en/showcase/spotlight/index.markdown b/src/content/en/showcase/spotlight/index.markdown
@@ -16,6 +16,8 @@ description: "Sites and apps we love, regardless of their mainstream success. Al
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
+
 <div class="page-content">
   <div class="mdl-grid">
     {% for pageInSection in page.context.pages reversed %}
diff --git a/src/content/en/shows/index.markdown b/src/content/en/shows/index.markdown
@@ -12,6 +12,8 @@ title: "Shows"
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
+
 <div class="page-content">
   <div class="mdl-grid">
     {% for subdirectory in page.context.subdirectories %}
diff --git a/src/content/en/tools/chrome-devtools/index.markdown b/src/content/en/tools/chrome-devtools/index.markdown
@@ -29,6 +29,8 @@ translation_priority: 1
     </div>
   </div>
 
+  {% include page-structure/site-promo-banner.liquid %}
+
   <div class="wf-devtools-panels">
     
     <h2 class="page-content mdl-typography--font-light">Discover the Panels</h2>
diff --git a/src/content/en/tools/index.markdown b/src/content/en/tools/index.markdown
@@ -17,6 +17,8 @@ translation_priority: 0
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
+
 <div class="page-content">
 
   <div class="mdl-grid">
diff --git a/src/content/en/tools/polymer-starter-kit/index.markdown b/src/content/en/tools/polymer-starter-kit/index.markdown
@@ -23,6 +23,7 @@ feedURL: https://github.com/polymerelements/polymer-starter-kit/releases.atom
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
 
 <div class="page-content">
   <div class="mdl-grid mdl-typography--text-center">
diff --git a/src/content/en/tools/service-worker-libraries/index.markdown b/src/content/en/tools/service-worker-libraries/index.markdown
@@ -28,6 +28,7 @@ feedURL: https://github.com/googlechrome/sw-toolbox/releases.atom
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
 
 <div class="page-content">
   <h2>Ship your shell with <code>sw-precache</code></h2>
diff --git a/src/content/en/tools/starter-kit/index.markdown b/src/content/en/tools/starter-kit/index.markdown
@@ -26,6 +26,8 @@ feedURL: https://github.com/google/web-starter-kit/releases.atom
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
+
 <div class="page-content">
 
   <h3>What is Web Starter Kit?</h3>
diff --git a/src/jekyll/_config/common.yml b/src/jekyll/_config/common.yml
@@ -57,6 +57,13 @@ WFStyleguideLocation: resources/styleguide/
 WFarray: []
 
 
+# Custom Promo across the entire site, use with care.
+# Image is optional, 
+WFPromo: 
+  title: "Chrome Developer Summit"
+  image: "https://www.gstatic.com/images/branding/product/1x/chrome_512dp.png"
+  text: "Nov 17-18, Mountain View, CA - <a href='https://developer.chrome.com/devsummit'>Learn more</a>"
+
 ## Unknowns
 fundamentals: /web/fundamentals
 spotlights: false
diff --git a/src/jekyll/_includes/page-structure/site-promo-banner.liquid b/src/jekyll/_includes/page-structure/site-promo-banner.liquid
@@ -0,0 +1,19 @@
+{% if site.WFPromo %}
+<div class="wf-promo-banner wf-secondaryheading">
+  <div class="wf-promo-banner-container">
+    {% if site.WFPromo.image %}
+    <div class="wf-promo-banner__image">
+      <img src="{{site.WFPromo.image}}">
+    </div>
+    {% endif %}
+    <div class="wf-promo-banner__text">
+      {% if site.WFPromo.title %}
+      <h3 class="wf-promo-banner__title">{{ site.WFPromo.title }}</h3>
+      {% endif %}
+      <p class="wf-promo-banner__description">
+      {{site.WFPromo.text}}
+      </p>
+    </div>
+  </div>
+</div>
+{% endif%}
diff --git a/src/jekyll/_includes/page-structure/site-promo-small.liquid b/src/jekyll/_includes/page-structure/site-promo-small.liquid
@@ -0,0 +1,13 @@
+{% if site.WFPromo %}
+<div class="page-content">
+  <div class="wf-promo-small-container">
+    {% if site.WFPromo.image %}<img src="{{site.WFPromo.image}}">{% endif %}
+    {% if site.WFPromo.title %}
+    <p class="mdl-typography--caption wf-promo-small__title">{{ site.WFPromo.title }}</p>
+    {% endif %}
+    <p class="mdl-typography--caption wf-promo-small__description">
+      {{site.WFPromo.text}}
+    </p>
+  </div>
+</div>
+{% endif%}
diff --git a/src/jekyll/_layouts/shared/narrow-pages-list.liquid b/src/jekyll/_layouts/shared/narrow-pages-list.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
 
   {% include page-structure/out-of-date.liquid %}
diff --git a/src/jekyll/_layouts/shared/narrow-subdirectories-list.liquid b/src/jekyll/_layouts/shared/narrow-subdirectories-list.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
 
 {% include page-structure/out-of-date.liquid %}
diff --git a/src/jekyll/_layouts/shared/narrow.liquid b/src/jekyll/_layouts/shared/narrow.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
 
 {% include page-structure/out-of-date.liquid %}
diff --git a/src/jekyll/_layouts/showcase/casestudy.liquid b/src/jekyll/_layouts/showcase/casestudy.liquid
@@ -63,7 +63,12 @@
 
     {{ page.description | markdownify }}
   </section>
+</div>
+
+<div style="clear:both;"></div>
+{% include page-structure/site-promo-banner.liquid %}
 
+<div class="page-content">
   {% if showcase.ytvideo %}
   <section class="wf-showcase__section-container clear">
     <h3>The Interview</h3>
diff --git a/src/jekyll/_layouts/showcase/spotlight.liquid b/src/jekyll/_layouts/showcase/spotlight.liquid
@@ -61,7 +61,12 @@
 
     {{ page.description | markdownify }}
   </section>
+</div>
+
+<div style="clear:both;"></div>
+{% include page-structure/site-promo-banner.liquid %}
 
+<div class="page-content">
   {% if showcase.ytvideo %}
   <section class="wf-showcase__section-container clear">
     <h3>The Interview</h3>
diff --git a/src/jekyll/_layouts/shows/episode.liquid b/src/jekyll/_layouts/shows/episode.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
 
   {% ytvideo page.youtubeID %}
diff --git a/src/jekyll/_layouts/shows/podcast-episode.liquid b/src/jekyll/_layouts/shows/podcast-episode.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content top-padding">
 
   <div class="wf-podcast__content">
diff --git a/src/jekyll/_layouts/shows/podcast.liquid b/src/jekyll/_layouts/shows/podcast.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
   {{ content }}
 
diff --git a/src/jekyll/_layouts/shows/season.liquid b/src/jekyll/_layouts/shows/season.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
   {{ content }}
 
diff --git a/src/jekyll/_layouts/shows/show.liquid b/src/jekyll/_layouts/shows/show.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content top-padding">
 
   <!-- Latest Episode -->
diff --git a/src/jekyll/_layouts/updates/index.liquid b/src/jekyll/_layouts/updates/index.liquid
@@ -9,6 +9,8 @@
   </div>
 </div>
 
+{% include page-structure/site-promo-banner.liquid %}
+
 <div class="page-content">
   <div class="mdl-grid">
     {% for article in page.updates %}
diff --git a/src/jekyll/_layouts/updates/post.liquid b/src/jekyll/_layouts/updates/post.liquid
@@ -1,4 +1,7 @@
 {% include page-structure/open-page.liquid %}
+
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
 
   {{ content }}
diff --git a/src/jekyll/_layouts/updates/tag.liquid b/src/jekyll/_layouts/updates/tag.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
 
   <div class="mdl-grid">
diff --git a/src/jekyll/_layouts/updates/tags.liquid b/src/jekyll/_layouts/updates/tags.liquid
@@ -1,5 +1,7 @@
 {% include page-structure/open-page.liquid %}
 
+{% include page-structure/site-promo-small.liquid %}
+
 <div class="page-content">
 
 {% assign firstThird = page.tags.size | divided_by: 3 %}
diff --git a/src/static/styles/_global.scss b/src/static/styles/_global.scss
@@ -35,3 +35,4 @@
 @import "partials/components/wf-subdirectory-list";
 @import "partials/components/wf-contributor";
 @import "partials/components/wf-grid";
+@import "partials/components/wf-promo";
diff --git a/src/static/styles/partials/components/_wf-promo.scss b/src/static/styles/partials/components/_wf-promo.scss
@@ -0,0 +1,58 @@
+/* Promo Small */
+
+.wf-promo-small-container {
+  border-top-style: solid;
+  border-color: $color-accent;
+  border-width: $base-line / 2;
+  margin-bottom:$base-line * 2;
+
+  img {
+    max-height: 42px;
+    float: left;
+    margin-right: 8px;
+    margin-top: 8px;
+  }
+}
+
+.wf-promo-small__title {
+  font-size: 1em;
+  margin-top: 12px;
+  margin-bottom: 8px;
+}
+
+.wf-promo-small__description {
+  margin: 0;
+}
+
+/* Promo Full Sized Banner */
+
+.wf-promo-banner-container {
+  text-align: center;
+  padding: 20px;
+  vertical-align: top;
+}
+
+.wf-promo-banner__image {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.wf-promo-banner__image img {
+  max-height: 100px;
+}
+
+.wf-promo-banner__text {
+  text-align: left;
+  display: inline-block;
+  margin-left: 1em;
+
+  .wf-promo-banner__title {
+    margin-top: 24px;
+    margin-bottom: 0;
+  }
+
+  .wf-promo-banner__description {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
diff --git a/src/static/styles/tools.scss b/src/static/styles/tools.scss
@@ -13,6 +13,10 @@ $color-accent: unquote("rgb(#{$palette-blue-300})");
 
 .wf-devtools-wrapper {
 
+  .wf-promo-banner {
+    margin-top: -24px;
+  }
+
   h2 {
     color: #757575;
   }
