template: Add template and styles for notices.

templates/mark1/css/style.css

@@ -50,7 +50,7 @@ article.docs header {
     pointer-events: none; /* allows selecting elements on layers with a lower z-index */
 }
 
-article.docs header + h1 {
+article.docs header + * {
     margin-top: 6.75rem;
 }
 
@@ -200,6 +200,35 @@ article.docs nav .navigation li > ul {
     padding-left: .9375rem;
 }
 
+article.docs .notice {
+    margin-bottom: .66666em;
+    padding: 0 .625rem;
+    border: 1px dotted lightgreen;
+    background-color: honeydew;
+    font-size: 0.8em;
+    line-height: 1.25;
+    text-align: center;
+}
+
+article.docs .notice.draft {
+    border: 1px dotted khaki;
+    background-color: lightyellow;
+}
+
+article.docs .notice p:first-child:before {
+    display: inline;
+    margin-right: .5em;
+    content: "♻";
+}
+
+article.docs .notice.draft p:first-child:before {
+    content: "⚠";
+}
+
+article.docs .notice p {
+    margin: 0.71429em 0;
+}
+
 article.docs h1,
 article.docs h2,
 article.docs h3,
@@ -421,7 +450,7 @@ article.docs .footnotes + footer {
         margin-top: -7.75rem;
     }
 
-    article.docs header + h1 {
+    article.docs header + * {
         margin-top: 7.5rem;
     }
 
@@ -473,7 +502,7 @@ article.docs .footnotes + footer {
         margin-top: -9.3125rem;
     }
 
-    article.docs header + h1 {
+    article.docs header + * {
         margin-top: 8.75rem;
     }
 
@@ -535,7 +564,7 @@ article.docs .footnotes + footer {
         display: block;
     }
 
-    article.docs header + h1 {
+    article.docs header + * {
         margin-top: 10.5rem;
     }
 
@@ -611,7 +640,7 @@ article.docs .footnotes + footer {
 
 /* Shorter than 550 */
 @media (max-height: 549px) {
-    article.docs header + h1 {
+    article.docs header + * {
         margin-top: 6.25rem;
     }
 
@@ -631,7 +660,7 @@ article.docs .footnotes + footer {
         margin-top: -5.3125rem;
     }
 
-    article.docs header + h1 {
+    article.docs header + * {
         margin-top: 5rem;
     }
 

templates/mark1/document.html

@@ -1,5 +1,6 @@
 <article class="docs">
     {{ template.header }}
+    {{ template.notice }}
     {{ document.content }}
     {{ template.footer }}
 </article>

templates/mark1/notice.html

@@ -0,0 +1,6 @@
+{% if document.state contains "obsolete" %}
+<div class="notice obsolete"><p>This article is for an older version of {{ document.project }}. <a href="{{ base.relpath }}">See all versions</a>.</p></div>
+{% endif %}
+{% if document.state contains "draft" %}
+<div class="notice draft"><p>This article is a draft and may contain incomplete or incorrect information.</p></div>
+{% endif %}

templates/mark1/template.yaml

@@ -4,10 +4,11 @@ Meta:     meta.html
 Title:    title.html
 Header:   header.html
 Nav:      nav.html
+Notice:   notice.html
 Document: document.html
 Footer:   footer.html
 Redirect: redirect.html
 Fonts:    fonts/opensans-bold-1.10.woff, fonts/opensans-bold-1.10.woff2, fonts/opensans-bolditalic-1.10.woff, fonts/opensans-bolditalic-1.10.woff2, fonts/opensans-italic-1.10.woff, fonts/opensans-italic-1.10.woff2, fonts/opensans-regular-1.10.woff, fonts/opensans-regular-1.10.woff2, fonts/ropasans-italic-1.002.ttf, fonts/ropasans-italic-1.002.woff, fonts/ropasans-italic-1.002.woff2, fonts/ropasans-regular-1.002.ttf, fonts/ropasans-regular-1.002.woff, fonts/ropasans-regular-1.002.woff2
 Scripts:  js/vendor/jquery/jquery-2.2.3.min.js, js/vendor/js-cookie/js-cookie-2.1.1.min.js, js/vendor/featherlight/featherlight-1.4.0.min.js, js/scripts.js?2016051901
-Styles:   css/vendor/featherlight/featherlight-1.4.0.min.css, css/fonts.css?2016051301, css/style.css?2016081201
+Styles:   css/vendor/featherlight/featherlight-1.4.0.min.css, css/fonts.css?2016051301, css/style.css?2016081601
 ...