Tutorial: add promotion header.

Matthieu Oger · Matthieu Oger · commit 740d3ece20cb · 2015-01-20T12:00:48.000+01:00
diff --git a/_includes/promotion-header.html b/_includes/promotion-header.html
@@ -0,0 +1,10 @@
+{% if page.show_promotion != nil %}
+
+<!-- Steredenn -->
+{% if page.show_promotion == 'steredenn' %}
+<div class="promotion-header">
+  Our game — <a href="http://steredenn.pixelnest.io/">Steredenn</a> — is on <a href="http://steredenn-greenlight.pixelnest.io">Steam Greenlight. <em>Help us with your vote!</em></a>
+</div>
+{% endif %}
+
+{% endif %}
diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html
@@ -7,6 +7,10 @@
 </head>
 <body>
   <div class="page tutorial" id="page">
+    <!-- start promotion header -->
+    {% include promotion-header.html %}
+    <!-- end promotion header -->
+
     <!-- reduced header -->
     <header class="page-header">
       <nav>
@@ -117,7 +121,6 @@ <h3 class="entry__subtitle">
       <!-- start promotion -->
       {% include promotion.html %}
       <!-- end promotion -->
-
     </div>
 
     <!-- reduced footer -->
diff --git a/_sources/promotion.scss b/_sources/promotion.scss
@@ -1,3 +1,27 @@
+// -------------------------------------------------------
+// Promotion header.
+// -------------------------------------------------------
+
+.promotion-header {
+    min-height: 23px;
+    padding: 12px 10px 15px 10px;
+    background: $brand1-color;
+
+    color: white;
+    font-size: 0.8em;
+    text-align: center;
+
+    a {
+      color: white;
+      text-decoration: none;
+      border-bottom: 1px dotted white;
+
+      &:hover {
+        border-bottom-style: solid;
+      }
+    }
+  }
+
 // -------------------------------------------------------
 // Promotion.
 // -------------------------------------------------------
@@ -23,6 +47,7 @@ $promotion-margin-top: 60px;
 
   img {
     width: 700px;
+    max-width: 100%;
     opacity: 0.8;
 
     @include transition(opacity, 300ms, ease-out);
diff --git a/static/css/pixelnest.css b/static/css/pixelnest.css
@@ -784,6 +784,20 @@ li {
   margin-top: 20px;
   text-align: center; }
 
+.promotion-header {
+  min-height: 23px;
+  padding: 12px 10px 15px 10px;
+  background: #00a9e0;
+  color: white;
+  font-size: 0.8em;
+  text-align: center; }
+  .promotion-header a {
+    color: white;
+    text-decoration: none;
+    border-bottom: 1px dotted white; }
+    .promotion-header a:hover {
+      border-bottom-style: solid; }
+
 .promotion {
   margin-top: 60px;
   padding: 15px;
@@ -798,6 +812,7 @@ li {
   margin-top: 60px; }
   .promotion-image img {
     width: 700px;
+    max-width: 100%;
     opacity: 0.8;
     -webkit-transition: opacity 300ms ease-out;
     -moz-transition: opacity 300ms ease-out;
