first cut

Blog/_card.scss

@@ -0,0 +1,95 @@
+/**
+ * See:
+ *
+ *  https://github.com/google/material-design-lite/tree/master/src/card
+ */
+
+div[typeof~=Blog] {
+  .mdl-card {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 360px;
+
+    > a {
+      color: inherit;
+      text-decoration: none;
+      font-weight: inherit;
+    }
+
+    h3 {
+      margin: 0;
+
+      a {
+        text-decoration: none;
+      }
+
+      &.quote {
+        &:before,
+        &:after {
+          display: block;
+          font-size: 3em;
+          margin-top: 0.5em;
+        }
+
+        &:before,
+        &:after {
+          content: '“';
+        }
+      }
+    }
+  }
+
+  .mdl-card__title {
+    padding: 16px;
+    flex-grow: 1;
+
+    a {
+      color: inherit;
+    }
+  }
+
+  .mdl-card__media {
+    box-sizing: border-box;
+    background-size: cover;
+    padding: 24px;
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
+    align-items: flex-end;
+    cursor: pointer;
+
+    a {
+      color: inherit;
+    }
+
+    ~ .mdl-card__supporting-text {
+      min-height: 64px;
+    }
+  }
+
+  .mdl-card__supporting-text {
+    width: 100%;
+    padding: 16px;
+    min-height: 64px;
+    display: flex;
+    align-items: center;
+
+    strong {
+      font-weight: 400;
+    }
+
+    &:not(:last-child) {
+      box-sizing: border-box;
+      min-height: 76px;
+    }
+  }
+
+  .mdl-card__actions:first-child {
+    margin-left: 0;
+  }
+}
+
+article:not([typeof~=Blog]) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
+  border-top: 1px solid rgba(0,0,0,0.1);
+}

Blog/_index.scss

@@ -0,0 +1,130 @@
+/**
+ * Styles for a BlogPosting object, as defined by:
+ *
+ *  https://schema.org/BlogPosting
+ */
+
+@import "card";
+
+div[typeof~=Blog] {
+  max-width: 900px;
+  padding: 0;
+  display: flex;
+  width: 100%;
+  margin: 0 auto;
+  flex-shrink: 0;
+
+  @extend .mdl-grid;
+
+  > div {
+    @extend .mdl-card, .mdl-shadow--4dp;
+    @extend .mdl-cell, .mdl-cell--12-col;
+
+    > div {
+      > h3 {
+        @extend .mdl-card__media, .mdl-color-text--grey-50;
+      }
+
+      /**
+       * The main content:
+       */
+
+      > div {
+        @extend .mdl-color-text--grey-600;
+        @extend .mdl-card__supporting-text;
+      }
+    }
+  }
+
+  header {
+    .meta > * {
+      align-items: center;
+    }
+
+    + div {
+      border: 0;
+      display: flex;
+      flex-direction: column;
+
+      p {
+        max-width: 512px;
+        margin: 16px auto;
+        font-size: 16px;
+        line-height: 28px;
+      }
+    }
+  }
+
+  > nav {
+    @extend .mdl-color-text--grey-50;
+    @extend .mdl-cell, .mdl-cell--12-col;
+
+    margin: 12px 15px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    font-weight: 500;
+
+    > .demo-back {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      color: white;
+      z-index: 9999;
+
+      a {
+        @extend .mdl-button, .mdl-js-button;
+        @extend .mdl-js-ripple-effect;
+        @extend .mdl-button--icon;
+      }
+    }
+
+    > a {
+      @extend .demo-nav__button;
+
+      color: white;
+      text-decoration: none;
+
+      > button {
+        @extend .mdl-button, .mdl-js-button, .mdl-button--icon;
+        @extend .mdl-js-ripple-effect;
+        @extend .mdl-color--white, .mdl-color-text--grey-900;
+      }
+
+      > .demo-nav__button {
+        &:first-child .mdl-button {
+          margin-right: 16px;
+        }
+        &:last-child .mdl-button {
+          margin-left: 16px;
+        }
+      }
+    }
+
+    .mdl-button {
+      color: rgba(0,0,0,0.54);
+      background-color: white;
+    }
+  }
+
+  .custom-header {
+    background-color: transparent;
+  }
+
+  .section-spacer {
+    flex-grow: 1;
+  }
+
+  .minilogo {
+    width: 44px;
+    height: 44px;
+    background-image: url('../images/avatar.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 50%;
+    border-radius: 22px;
+    background-color: #F5F5F5;
+  }
+}

BlogPosting/_card.scss

@@ -0,0 +1,95 @@
+/**
+ * See:
+ *
+ *  https://github.com/google/material-design-lite/tree/master/src/card
+ */
+
+article[typeof~=BlogPosting] {
+  .mdl-card {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 360px;
+
+    > a {
+      color: inherit;
+      text-decoration: none;
+      font-weight: inherit;
+    }
+
+    h3 {
+      margin: 0;
+
+      a {
+        text-decoration: none;
+      }
+
+      &.quote {
+        &:before,
+        &:after {
+          display: block;
+          font-size: 3em;
+          margin-top: 0.5em;
+        }
+
+        &:before,
+        &:after {
+          content: '“';
+        }
+      }
+    }
+  }
+
+  .mdl-card__title {
+    padding: 16px;
+    flex-grow: 1;
+
+    a {
+      color: inherit;
+    }
+  }
+
+  .mdl-card__media {
+    box-sizing: border-box;
+    background-size: cover;
+    padding: 24px;
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
+    align-items: flex-end;
+    cursor: pointer;
+
+    a {
+      color: inherit;
+    }
+
+    ~ .mdl-card__supporting-text {
+      min-height: 64px;
+    }
+  }
+
+  .mdl-card__supporting-text {
+    width: 100%;
+    padding: 16px;
+    min-height: 64px;
+    display: flex;
+    align-items: center;
+
+    strong {
+      font-weight: 400;
+    }
+
+    &:not(:last-child) {
+      box-sizing: border-box;
+      min-height: 76px;
+    }
+  }
+
+  .mdl-card__actions:first-child {
+    margin-left: 0;
+  }
+}
+
+article:not([typeof~=BlogPosting]) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
+  border-top: 1px solid rgba(0,0,0,0.1);
+}