Add new layout indicators

_includes/2017/related-posts-item.html

@@ -1,6 +1,12 @@
 <li class='{{ include.class }}'>
-  <a href='{{ base }}{{ include.post.url | remove: '.html' }}'>
-    <strong>{{ include.post.title }}</strong>
-    <span>cheatsheet</span>
+  <a href='{{ base }}{{ include.page.url | remove: '.html' }}'>
+    <strong>{{ include.page.title }}</strong>
+    <span>
+      cheatsheet
+
+      {% if include.page.layout == '2017/sheet' %}
+      <abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
+      {% endif %}
+    </span>
   </a>
 </li>

_includes/2017/related-posts.html

@@ -1,10 +1,10 @@
-{% assign category_posts = site.pages
+{% assign category_pages = site.pages
   | where: "category", include.page.category
   | where_exp: "page", "page.url != include.page.url"
   | where_exp: "page", "page.deprecated != true"
   | sort: "weight", "last"
 %}
-{% assign top_posts = site.pages
+{% assign top_pages = site.pages
   | where_exp: "page", "page.tags contains 'Featured'"
   | where_exp: "page", "page.url != include.page.url"
   | where_exp: "page", "page.deprecated != true"
@@ -19,16 +19,16 @@
     {% endif %}
 
     <ul class='related-post-list'>
-      {% for post in category_posts limit: 6 %}
-        {% include 2017/related-posts-item.html post=post class='item related-post-item' %}
+      {% for page in category_pages limit: 6 %}
+        {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
       {% endfor %}
     </ul>
 
     <h3>Top cheatsheets</h3>
 
     <ul class='related-post-list'>
-      {% for post in top_posts limit: 6 %}
-        {% include 2017/related-posts-item.html post=post class='item related-post-item' %}
+      {% for page in top_pages limit: 6 %}
+        {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
       {% endfor %}
     </ul>
   </div>

_sass/2017/components/related-posts.scss

@@ -83,7 +83,7 @@
   & > a,
   & > a:visited {
     background: white;
-    color: $base-text;
+    color: $base-mute;
 
     & > strong {
       color: $base-a;
@@ -103,7 +103,7 @@
   &:first-of-type > a,
   &:first-of-type > a:visited {
     background: $base-a;
-    color: white;
+    color: rgba(white, 0.5);
 
     & > strong {
       color: white;
@@ -139,6 +139,5 @@
 
   & > a > span {
     @include font-size(-1);
-    opacity: 0.5;
   }
 }