Beginnings of something beautiful

site/_layouts/news.html

@@ -8,8 +8,8 @@ layout: default
       {% include news_contents_mobile.html %}
 
       <div class="unit four-fifths">
+        <h1 class="news-header center-on-mobiles">{{ page.title }}</h1>
         <article class="news-listing">
-          <h1>{{ page.title }}</h1>
           {{ content }}
         </article>
       </div>

site/_layouts/news_item.html

@@ -0,0 +1,28 @@
+---
+layout: default
+---
+
+  <section class="docs news">
+    <div class="grid">
+
+      {% include news_contents_mobile.html %}
+
+      <div class="unit four-fifths">
+        <h1 class="news-header center-on-mobiles">News</h1>
+        <article class="news-item">
+          <h2 class="center-on-mobiles"><a href="{{ page.url }}">{{ page.title }}</a></h2>
+          <p class="post-content">
+            {{ page.content }}
+          </p>
+          <p class="post-details">
+            Posted on {{ page.date | date_to_string }} by @{{ page.author }}, filed in {{ page.categories | array_to_sentence_string }}
+          </p>
+        </article>
+      </div>
+
+      {% include news_contents.html %}
+
+      <div class="clear"></div>
+
+    </div>
+  </section>

site/_posts/2013-05-06-jekyll-1-dot-0-dot-0-released.markdown

@@ -1,5 +1,5 @@
 ---
-layout: news
+layout: news_item
 title: "Jekyll 1.0.0 Released"
 date: "2013-05-06 02:12:52 +0200"
 author: parkr

site/_posts/2013-05-08-jekyll-1-dot-0-dot-1-released.markdown

@@ -1,5 +1,5 @@
 ---
-layout: news
+layout: news_item
 title: "Jekyll 1.0.1 Released"
 date: "2013-05-08 23:46:11 +0200"
 author: parkr

site/_posts/2013-05-12-jekyll-1-dot-0-dot-2-released.markdown

@@ -1,5 +1,5 @@
 ---
-layout: news
+layout: news_item
 title: "Jekyll 1.0.2 Released"
 date: "2013-05-12 14:45:00 +0200"
 author: parkr

site/css/style.css

@@ -499,9 +499,13 @@ body > footer a:hover img {
   width: 100%;
 }
 
-/* Blog */
+/* News */
 
-section.news article h2 {
+section.news .news-header {
+  margin: 0 50px;
+}
+
+section.news .news-listing h2 {
   margin: 0;
   padding-top: 10px;
   border-top: rgba(220, 220, 220, 0.5) 1px solid;