Docs: Render full contents of just the latest post (#8032)

Merge pull request 8032

docs/_includes/news_item.html

@@ -16,7 +16,7 @@
     {% assign author = post.author -%}
     <a href="https://github.com/{{ author }}" class="post-author">
       {% avatar user=author size=24 -%}
-      {{ author }}
+      <span class="author-name">{{ author }}</span>
     </a>
   </div>
   <div class="post-content">

docs/_includes/news_item_archive.html

@@ -0,0 +1,26 @@
+<article>
+  <div class="cell-left">
+    <span class="post-category">
+      <span class="label">
+        {{- post.categories | array_to_sentence_string -}}
+      </span>
+    </span>
+  </div>
+  <div class="cell-right">
+    <div class="post-meta">
+      <h2 class="post-title">
+        <a href="{{ post.url }}">
+          {{- post.title -}}
+        </a>
+      </h2>
+      <span class="post-date">
+        {{- post.date | date_to_string -}}
+      </span>
+      {% assign author = post.author -%}
+      <a href="https://github.com/{{ author }}" class="post-author">
+        {% avatar user=author size=24 -%}
+        <span class="author-name">{{ author }}</span>
+      </a>
+    </div>
+  </div>
+</article>

docs/_layouts/news_item.html

@@ -22,7 +22,7 @@ layout: news
     {% assign author = page.author -%}
     <a href="https://github.com/{{ author }}" class="post-author">
       {% avatar user=author size=24 -%}
-      {{- author -}}
+      <span class="author-name">{{ author }}</span>
     </a>
   </div>
   <div class="post-content">

docs/_sass/_style.scss

@@ -664,13 +664,38 @@ article h2:first-child { margin-top: 0; }
 }
 
 .post-date,
-.post-author { margin-left: 10px; }
+.post-author { margin-left: 15px; }
+.post-author .author-name { margin-left: 8px }
 
 .news article + article {
-  margin-top: -10px;
-  @include border-radius(0 0 10px 10px);
+  margin-top: -6px;
+  padding: 15px 40px;
   border-top: 1px solid #555;
+  border-radius: 0;
   @include box-shadow(0 -1px 0 #2f2f2f);
+
+  h2.post-title {
+    margin-bottom: 0.45em;
+  }
+  .post-category {
+    margin-right: 20px;
+    padding-left: 0;
+    width: 150px;
+    box-sizing: border-box;
+    .label {
+      float: right;
+    }
+  }
+  .cell-left, .cell-right {
+    display: inline-block;
+  }
+  .cell-left {
+    max-width: 180px;
+  }
+  .cell-right {
+    width: calc(100% - 130px);
+  }
+  .post-date { margin-left: 0 }
 }
 
 /* Code Highlighting */

docs/pages/news.html

@@ -6,5 +6,9 @@ author: all
 ---
 
 {% for post in site.posts -%}
-  {% include news_item.html -%}
+  {% if forloop.index == 1 -%}
+    {% include news_item.html -%}
+  {% else -%}
+    {% include news_item_archive.html -%}
+  {% endif -%}
 {% endfor -%}

docs/pages/releases.html

@@ -6,5 +6,9 @@ author: all
 ---
 
 {% for post in site.categories.release -%}
-  {% include news_item.html -%}
+  {% if forloop.index == 1 -%}
+    {% include news_item.html -%}
+  {% else -%}
+    {% include news_item_archive.html -%}
+  {% endif -%}
 {% endfor -%}