Tutorial layout: show promotion if present.

Author: Matthieu Oger

_includes/promotion.html

@@ -0,0 +1,10 @@
+{% if page.show_promotion != nil %}
+
+<!-- BulletML for Unity promotion -->
+{% if page.show_promotion == 'bulletml-for-unity' %}
+<div class="promotion">
+  We have created a plugin called <em>"BulletML for Unity"</em> which allows you to create fantastic patterns for your shooter. Interested? <a href="/work/bulletml-for-unity/">Read more here.</a>
+</div>
+{% endif %}
+
+{% endif %}

_layouts/tutorial.html

@@ -114,6 +114,10 @@ <h3 class="entry__subtitle">
       </div>
       <!-- end pagination -->
 
+      <!-- start promotion -->
+      {% include promotion.html %}
+      <!-- end promotion -->
+
     </div>
 
     <!-- reduced footer -->

_sources/pixelnest.scss

@@ -173,4 +173,5 @@ li {
 @import "tutorial";
 @import "legal";
 @import "fusionads";
+@import "promotion";
 @import "ie";

_sources/promotion.scss

@@ -0,0 +1,17 @@
+// -------------------------------------------------------
+// Promotion.
+// -------------------------------------------------------
+
+.promotion {
+  margin-top: 60px;
+  padding: 15px;
+  background: #f3f3f3;
+  border: 1px solid #d6d6d6;
+  border-radius: 10px;
+
+  color: #5f5f5f;
+  font-size: 0.7em;
+  line-height: 1.4em;
+
+  a { @extend %link; }
+}

static/css/pixelnest.css

@@ -23,17 +23,17 @@
   zoom: 1; }
 
 .page-content p a, .page-content ul a,
-.page-content ol a, .home__aside li a, .card__title a, .entry__title a, .entry__content a, .contacts li a, .founder__links li a, .pager a, .archives a, .tutorial .page-header a, .ie .logo {
+.page-content ol a, .home__aside li a, .card__title a, .entry__title a, .entry__content a, .contacts li a, .founder__links li a, .pager a, .archives a, .tutorial .page-header a, .promotion a, .ie .logo {
   color: #00a9e0;
   text-decoration: none; }
   .page-content p a:hover, .page-content ul a:hover,
-  .page-content ol a:hover, .home__aside li a:hover, .card__title a:hover, .entry__title a:hover, .entry__content a:hover, .contacts li a:hover, .founder__links li a:hover, .pager a:hover, .archives a:hover, .tutorial .page-header a:hover, .ie .logo:hover {
+  .page-content ol a:hover, .home__aside li a:hover, .card__title a:hover, .entry__title a:hover, .entry__content a:hover, .contacts li a:hover, .founder__links li a:hover, .pager a:hover, .archives a:hover, .tutorial .page-header a:hover, .promotion a:hover, .ie .logo:hover {
     text-decoration: underline; }
   .page-content p a:active, .page-content ul a:active,
-  .page-content ol a:active, .home__aside li a:active, .card__title a:active, .entry__title a:active, .entry__content a:active, .contacts li a:active, .founder__links li a:active, .pager a:active, .archives a:active, .tutorial .page-header a:active, .ie .logo:active {
+  .page-content ol a:active, .home__aside li a:active, .card__title a:active, .entry__title a:active, .entry__content a:active, .contacts li a:active, .founder__links li a:active, .pager a:active, .archives a:active, .tutorial .page-header a:active, .promotion a:active, .ie .logo:active {
     color: #98c73d; }
   .page-content p a:focus, .page-content ul a:focus,
-  .page-content ol a:focus, .home__aside li a:focus, .card__title a:focus, .entry__title a:focus, .entry__content a:focus, .contacts li a:focus, .founder__links li a:focus, .pager a:focus, .archives a:focus, .tutorial .page-header a:focus, .ie .logo:focus {
+  .page-content ol a:focus, .home__aside li a:focus, .card__title a:focus, .entry__title a:focus, .entry__content a:focus, .contacts li a:focus, .founder__links li a:focus, .pager a:focus, .archives a:focus, .tutorial .page-header a:focus, .promotion a:focus, .ie .logo:focus {
     color: #98c73d; }
 
 html, body {
@@ -761,6 +761,16 @@ li {
   margin-top: 20px;
   text-align: center; }
 
+.promotion {
+  margin-top: 60px;
+  padding: 15px;
+  background: #f3f3f3;
+  border: 1px solid #d6d6d6;
+  border-radius: 10px;
+  color: #5f5f5f;
+  font-size: 0.7em;
+  line-height: 1.4em; }
+
 /*
  * Dirty fixes for IE version 7 and 8. Not IE6, get away.
  * The plan is not to make the site beautiful, but **readable**.