Review template page

docs/_assets/main.css

@@ -97,6 +97,7 @@ body:not(.about) .mdl-layout__header {
   width: 100%;
   height: 64px;
   flex-shrink: 0;
+  padding-left: 16px !important;
 }
 .mdl-navigation span.mdl-icon {
   font-size: 24px;
@@ -279,6 +280,15 @@ body:not(.about) .mdl-layout__header {
   width: 100%;
   margin-bottom: 72px;
 }
+.template > .template__meta {
+  align-content: flex-start;
+}
+.template > .template__meta.template__meta > * {
+  margin-bottom: 24px;
+}
+.template > .template__meta > *:last-child {
+  margin-bottom: 0px;
+}
 .template > .template__meta a {
   color:inherit;
 }
@@ -287,12 +297,6 @@ body:not(.about) .mdl-layout__header {
   background-size: cover;
   min-height: 30vh;
 }
-.template.template--product > .template__preview {
-  background-image: url('template_product.jpg');
-}
-.template.template--general > .template__preview {
-  background-image: url('template_general.jpg');
-}
 
 
 .mdl-layout__content p {
@@ -372,3 +376,16 @@ button a {
     background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_white_24dp.png');
   }
 }
+.subpageheader {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+  flex-shrink: 0;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: 500;
+}
+.about .subpageheader {
+  display: none;
+}

docs/_pages/templates.md

@@ -4,22 +4,22 @@ title: Templates
 bodyclass: templates
 include_prefix: ../
 templates:
+  - name: product
+    title: Product
+    description: Laborum quis laboris veniam minim labore id excepteur.
+  - name: blog
+    title: Blog
+    description: Deserunt dolor dolore ut excepteur tempor occaecat aliqua sunt eu velit incididunt irure irure in.
+  - name: general
+    title: Universal
+    description: Esse irure aliqua amet ullamco aliqua ullamco est exercitation adipisicing nisi laborum sit labore voluptate.
+  - name: dashboard
+    title: Dashboard
+    description: Non laboris consequat ullamco aute cillum ad.
   - name: text-only
     title: Text-heavy webpage
     description: Laborum quis laboris veniam minim labore id excepteur.
   - name: article
     title: Stand-alone article
     description: Non laboris consequat ullamco aute cillum ad.
-  - name: general
-    title: Universal
-    description: Esse irure aliqua amet ullamco aliqua ullamco est exercitation adipisicing nisi laborum sit labore voluptate.
-  - name: blog
-    title: Blog
-    description: Deserunt dolor dolore ut excepteur tempor occaecat aliqua sunt eu velit incididunt irure irure in.
-  - name: product
-    title: Product
-    description: Laborum quis laboris veniam minim labore id excepteur.
-  - name: dashboard
-    title: Dashboard
-    description: Non laboris consequat ullamco aute cillum ad.
 ---

docs/_templates/layout.html

@@ -74,6 +74,7 @@
         </a>
       </nav>
     </header>
+    <div class="subpageheader">{{page.title}}</div>
     <main class="mdl-layout__content mdl-color-text--grey-600">
       <div class="content mdl-grid mdl-grid--no-spacing">
         {% block content %}

docs/_templates/templates.html

@@ -3,7 +3,7 @@
 {% for template in page.templates %}
 <section class="template template--{{ template.name }} mdl-grid mdl-cell mdl-cell--12-col">
   <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
-    <h3 class="template__header mdl-cell mdl-cell--12-col">{{ template.title }}</h3>
+    <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">{{ template.title }}</h3>
     <p class="mdl-cell mdl-cell--12-col">
       {{ template.description }}
     </p>