reuse existing article and aside styles, reducing nested markup

site/_includes/news_item.html

@@ -1,4 +1,4 @@
-<div class="post">
+<article>
   <h2 class="center-on-mobiles">
     <a href="{{ post.url }}">
       {{ post.title }}
@@ -12,4 +12,4 @@
     by <a href="https://github.com/{{ post.author }}">@{{ post.author }}</a>,
     filed in {{ post.categories | array_to_sentence_string }}
   </p>
-</div>
+</article>

site/_layouts/news.html

@@ -8,9 +8,7 @@ layout: default
       {% include news_contents_mobile.html %}
 
       <div class="unit four-fifths">
-        <article class="listing">
         {{ content }}
-        </article>
       </div>
 
       {% include news_contents.html %}

site/_layouts/news_item.html

@@ -2,9 +2,7 @@
 layout: news
 ---
 
-<div class="grid">
+<article>
-  <div class="unit whole entry">
-    <div class="post single">
   <h2 class="center-on-mobiles">
     {{ page.title }}
     <a href="{{ page.url }}" class="permalink" title="Permalink">∞</a>
@@ -17,7 +15,4 @@ layout: news
     by <a href="https://github.com/{{ page.author }}">@{{ page.author }}</a>,
     filed in {{ page.categories | array_to_sentence_string }}
   </p>
-    </div>
+</article>
-  </div>
-  <div class="clear"></div>
-</div>

site/css/style.css

@@ -359,40 +359,38 @@ body > footer a:hover img {
   }
 }
 
-/* Documentation */
+/* Article - Used for both docs and news */
 
-.docs .content {
-  padding: 0;
-}
 
-.docs article {
+article {
   background: #444;
   border-radius: 10px;
   padding: 20px;
   margin: 0 10px;
   box-shadow: 0 3px 10px rgba(0,0,0,.1);
-  min-height: 800px;
   font-size: 16px;
 }
 
 @media (max-width: 568px){
-  .docs article {
+  article {
     margin: 0;
   }
 }
 
 @media (min-width: 768px){
-  .docs article {
+  article {
     padding: 40px 40px 30px;
     font-size: 21px;
   }
 }
 
-.docs aside {
+/* Right-side nav - used by both docs and news */
+
+aside {
   padding-top: 30px;
 }
 
-.docs aside h4 {
+aside h4 {
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 700;
@@ -402,20 +400,24 @@ body > footer a:hover img {
   border-bottom: 1px solid #c00;
 }
 
-.docs aside ul {
+aside ul {
   padding-left: 0;
 }
 
-.docs aside li {
+aside ul:first-child {
+  margin-top: 0;
+}
+
+aside li {
   list-style-type: none;
 }
 
-.docs aside li a {
+aside li a {
   font-size: 16px;
   position: relative
 }
 
-.docs aside li.current a:before {
+aside li.current a:before {
   content: "";
   border-color: transparent transparent transparent #444;
   border-style: solid;
@@ -427,6 +429,16 @@ body > footer a:hover img {
   left: -30px;
 }
 
+/* Documentation */
+
+.docs article {
+  min-height: 800px;
+}
+
+.docs .content {
+  padding: 0;
+}
+
 .section-nav {
   text-align: center;
   padding-top: 40px;
@@ -501,82 +513,20 @@ body > footer a:hover img {
 
 /* News */
 
-.news .entry {
+article h2:first-child {
-  background: #444;
-  border-radius: 10px;
-  padding: 20px;
-  margin: 0 10px;
-  box-shadow: 0 3px 10px rgba(0,0,0,.1);
-  font-size: 16px;
-}
-
-@media (max-width: 568px){
-  .news .entry {
-    margin: 0 0 20px 0;
-  }
-}
-
-@media (min-width: 768px){
-  .news .entry {
-    font-size: 21px;
-    margin-bottom: 20px;
-  }
-}
-
-.news .post {
-  padding: 40px;
-}
-
-
-.news .listing h2 {
   margin-top: 0;
 }
 
+.news article {
+  margin-bottom: 20px;
+}
+
 .news .post-details {
   padding: 0;
   font-size: 0.8em;
   color: gray;
 }
 
-.news aside {
-  padding-left: 20px;
-}
-
-.news aside h4 {
-  text-transform: uppercase;
-  font-size: 14px;
-  font-weight: 700;
-  padding: 0 0 10px 29px;
-  margin-left: -29px;
-  display: inline-block;
-  border-bottom: 1px solid #c00;
-}
-
-.news aside ul {
-  padding-left: 0;
-}
-
-.news aside li {
-  list-style-type: none;
-}
-
-.news aside li a {
-  font-size: 16px;
-  position: relative
-}
-
-.news aside li.current a:before {
-  content: "";
-  border-color: transparent transparent transparent #444;
-  border-style: solid;
-  border-width: 10px;
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 0;
-  left: -30px;
-}
-
 /* Code Highlighting */
 
 

site/news/index.md

@@ -5,11 +5,6 @@ permalink: /news/
 author: all
 ---
 
-<div class="grid">
+{% for post in site.posts %}
-  {% for post in site.posts %}
-  <div class="unit whole entry">
   {% include news_item.html %}
-  </div>
+{% endfor %}
-  {% endfor %}
-  <div class="clear"></div>
-</div>

site/news/releases/index.md

@@ -5,11 +5,6 @@ permalink: /news/releases/
 author: all
 ---
 
-<div class="grid">
 {% for post in site.categories.releases %}
-<div class="unit whole entry">
+  {% include news_item.html %}
-{% include news_item.html %}
-</div>
 {% endfor %}
-<div class="clear"></div>
-</div>