Wrap all page content in #main div to fix mmistakes#86

- Adjust article styles to correctly display post indexes
- Remove top margin from page titles

_layouts/home.html

@@ -28,23 +28,24 @@
   </div><!-- /.image-wrap -->
 {% endif %}
 
-<div class="article-author-side">
-  {% include _author-bio.html %}
-</div>
-
-<div id="index">
-  <h3><a href="{{ site.url}}/posts/">Recent Posts</a></h3>
-  {% for post in site.posts limit:5 %}    
-  <article>
-    {% if post.link %}
-      <h2 class="link-post"><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a> <a href="{{ post.link }}" target="_blank" title="{{ post.title }}"><i class="fa fa-link"></i></h2>
-    {% else %}
-      <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
-      <p>{{ post.excerpt | strip_html | truncate: 160 }}</p>
-    {% endif %}
-  </article>
-  {% endfor %}
-</div><!-- /#index -->
+<div id="main" role="main"> 
+  <div class="article-author-side">
+    {% include _author-bio.html %}
+  </div>
+  <div id="index">
+    <h3><a href="{{ site.url}}/posts/">Recent Posts</a></h3>
+    {% for post in site.posts limit:5 %}    
+    <article>
+      {% if post.link %}
+        <h2 class="link-post"><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a> <a href="{{ post.link }}" target="_blank" title="{{ post.title }}"><i class="fa fa-link"></i></h2>
+      {% else %}
+        <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
+        <p>{{ post.excerpt | strip_html | truncate: 160 }}</p>
+      {% endif %}
+    </article>
+    {% endfor %}
+  </div><!-- /#index -->
+</div><!-- /#main -->
 
 <div class="footer-wrap">
   <footer>

_layouts/page.html

@@ -32,7 +32,7 @@
   <div class="article-author-side">
     {% include _author-bio.html %}
   </div>
-  <article>
+  <article class="page">
     <h1>{{ page.title }}</h1>
     <div class="article-wrap">
       {{ content }}

_layouts/post-index.html

@@ -28,32 +28,33 @@
   </div><!-- /.image-wrap -->
 {% endif %}
 
-<div class="article-author-side">
-  {% include _author-bio.html %}
-</div>
-
-<div id="index">
-  <h1>{{ page.title }}</h1>
-  {% for post in site.posts %}  
-  {% unless post.next %}
-    <h3>{{ post.date | date: '%Y' }}</h3>
-    {% else %}
-      {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
-      {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
-      {% if year != nyear %}
-        <h3>{{ post.date | date: '%Y' }}</h3>
-      {% endif %}
-    {% endunless %}
-    <article>
-      {% if post.link %}
-        <h2 class="link-post"><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a> <a href="{{ post.link }}" target="_blank" title="{{ post.title }}"><i class="fa fa-link"></i></h2>
+<div id="main" role="main">
+  <div class="article-author-side">
+    {% include _author-bio.html %}
+  </div>
+  <div id="index">
+    <h1>{{ page.title }}</h1>
+    {% for post in site.posts %}  
+    {% unless post.next %}
+      <h3>{{ post.date | date: '%Y' }}</h3>
       {% else %}
-        <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
-        <p>{{ post.excerpt | strip_html | truncate: 160 }}</p>
-      {% endif %}
-    </article>
-  {% endfor %}
-</div><!-- /#index -->
+        {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
+        {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
+        {% if year != nyear %}
+          <h3>{{ post.date | date: '%Y' }}</h3>
+        {% endif %}
+      {% endunless %}
+      <article>
+        {% if post.link %}
+          <h2 class="link-post"><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a> <a href="{{ post.link }}" target="_blank" title="{{ post.title }}"><i class="fa fa-link"></i></h2>
+        {% else %}
+          <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
+          <p>{{ post.excerpt | strip_html | truncate: 160 }}</p>
+        {% endif %}
+      </article>
+    {% endfor %}
+  </div><!-- /#index -->
+</div><!-- /#main -->
 
 <div class="footer-wrap">
   <footer>

_layouts/post.html

@@ -32,7 +32,7 @@
   <div class="article-author-side">
     {% include _author-bio.html %}
   </div>
-  <article>
+  <article class="post">
     <div class="headline-wrap">
       {% if page.link %}
         <h1><a href="{{ page.link }}">{{ page.title }}</a></h1>

_sass/page.scss

@@ -5,7 +5,7 @@ body {
 }
 .navigation-wrapper {
 	@include container;
-	padding: 2em 0 0;
+	padding: 2em 0 1em;
 	font-family: $heading-font;
 	font-weight: 700;
 	text-transform: uppercase;
@@ -206,8 +206,12 @@ $button-size: 1.5rem;
 	@include container;
 	@include clearfix;
 	clear: both;
-	margin-top: 1em;
-	article {
+	margin-top: 2em;
+	h1 {
+		margin-top: 0;
+	}
+	.post,
+	.page {
 		@include container;
 		@include grid(12,10);
 		@include prefix(12,1);