Create grid styling for related posts module

- Add default teaser image
- Disable image watch gulp task

assets/scss/_archive.scss

@@ -40,4 +40,13 @@
   & + p {
     text-indent: 0;
   }
+}
+
+a:hover {
+  .archive__item-teaser {
+    box-shadow: 0 0 10px rgba(#000, 0.25);
+  }
+  .archive__item-title {
+    text-decoration: underline;
+  }
 }

assets/scss/_base.scss

@@ -119,6 +119,11 @@ a {
   &:active {
     outline: 0;
   }
+  &:hover {
+    img {
+      box-shadow: 0 0 10px rgba(#000, 0.25);
+    }
+  }
 }
 
 /* lists */
@@ -188,12 +193,6 @@ figure {
   }
   > a {
     display: block;
-    // image hover animation
-    &:hover {
-      img {
-        box-shadow: 0 0 10px rgba(#000, 0.20);
-      }
-    }
   }
   &.half {
     > a,
@@ -283,6 +282,6 @@ nav {
    Global animation transition
    ========================================================================== */
 
-b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item, .archive__item-thumb, .archive__item-body, .palette__swatch {
+b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
   transition: all 0.2s ease-in-out;
 }

assets/scss/_page.scss

@@ -99,6 +99,7 @@
 
 .page__meta {
   margin-top: 2em;
+  color: mix(#fff, $gray, 25%);
   font-family: $sans-serif;
   font-size: 14px;
   a {
@@ -141,21 +142,43 @@
   margin-top: 2em;
   padding-top: 1em;
   border-top: 1px solid $border-color;
+  @include clearfix();
+  float: left;
   @include breakpoint($medium) {
-    @include span(10 of 12);
     @include pre(2 of 12);
   }
   @include breakpoint($x-large) {
     @include pre(2.5 of 12);
   }
-  li {
-    margin-bottom: 0;
+  .grid__item {
+    margin-bottom: 2em;
+    .archive__item-excerpt {
+      display: none;
+    }
+    .archive__item-teaser {
+      border-radius: $border-radius;
+    }
+    @include breakpoint($small) {
+      @include gallery(5 of 10);
+      .archive__item-teaser {
+        max-height: 200px;
+        overflow: hidden;
+      }
+    }
+    @include breakpoint($medium) {
+      margin-left: 0; // reset before mixin does its thing
+      margin-right: 0; // reset before mixin does its thing
+      @include gallery(2.5 of 10);
+      .archive__item-teaser {
+        max-height: 120px;
+      }
+      .archive__item-excerpt {
+        display: block;
+      }
+    }
   }
   a {
     text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
   }
 }