Create highlight post layout

for use in the templates only include in the site settings post_type:
highlight for now this is static

_config.yml

@@ -12,5 +12,6 @@ github_username:  jekyll
 
 # Layout settings
 header_type: fixed
+post_type: highlight
 # Build settings
 markdown: kramdown

_includes/highlight_post.html

@@ -0,0 +1,26 @@
+<div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
+
+  <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white" style="">
+    <i class="material-icons">play_circle_filled</i>
+  </header>
+
+  <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
+    <div class="mdl-card__supporting-text">
+      <h4>Features</h4>
+      Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
+    </div>
+    <div class="mdl-card__actions">
+      <a href="#" class="mdl-button">Read our features</a>
+    </div>
+  </div>
+
+  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn1">
+    <i class="material-icons">more_vert</i>
+  </button>
+  <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn1">
+    <li class="mdl-menu__item">Lorem</li>
+    <li class="mdl-menu__item" disabled>Ipsum</li>
+    <li class="mdl-menu__item">Dolor</li>
+  </ul>
+
+</div>

_layouts/default.html

@@ -15,6 +15,9 @@
 
       <main class="mdl-layout__content">
         <div class="page-content">
+          {% if site.post_type == 'highlight' %}
+          {% include highlight_post.html %}
+          {% endif %}
           {{ content }}
         </div>
         {% include footer.html %}

_sass/_layout.scss

@@ -13,3 +13,57 @@
   color: #fff;
 }
 
+.section-highlight {
+  position: relative;
+
+  .mdl-card__supporting-text {
+    margin: 40px;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    padding: 0;
+    color: inherit;
+    width: calc(100% - 80px);
+  }
+
+  .mdl-card__actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0;
+    padding: 4px 40px;
+    color: inherit;
+
+      a {
+        color: #00BCD4;
+        margin: 0;
+      }
+  }
+
+  header {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    min-height: 200px;
+
+    .material-icons {
+      font-size: 3rem;
+    }
+  }
+
+  button {
+    position: absolute;
+    z-index: 99;
+    top: 8px;
+    right: 8px;
+  }
+
+}