Add post pagination to sidebar and make minor styling alterations

_includes/paginator.html

@@ -6,9 +6,9 @@
     {% comment %} Link for previous page {% endcomment %}
     {% if paginator.previous_page %}
       {% if paginator.previous_page == 1 %}
-        <li><a href="{{ base_path }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
+        <li><a href="{{ base_path }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
       {% else %}
-        <li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
+        <li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
       {% endif %}
     {% endif %}
 
@@ -59,7 +59,7 @@
 
     {% comment %}Link next page{% endcomment %}
     {% if paginator.next_page %}
-      <li><a href="{{ base_path }}/page{{ paginator.next_page }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
+      <li><a href="{{ base_path }}/page{{ paginator.next_page }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
     {% endif %}
   </ul>
 </nav>

_includes/post_pagination.html

@@ -0,0 +1,8 @@
+<nav class="pagination">
+  {% if page.previous %}
+    <a href="{{ base_path }}{{ page.previous.url }}" class="btn btn--inverse btn--small" title="{{ page.previous.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
+  {% endif %}
+  {% if page.next %}
+    <a href="{{ base_path }}{{ page.next.url }}" class="btn btn--inverse btn--small" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next }}</a>
+  {% endif %}
+</nav>

_includes/sidebar.html

@@ -19,5 +19,6 @@
       {% include nav_list items=page.sidebar.nav %}
     {% endif %}
   {% endif %}
+  {% include post_pagination.html %}
   </div>
 {% endif %}

_posts/2013-01-11-markup-html-tags-and-formatting.md

@@ -114,6 +114,8 @@ Make any link standout more when applying the `.btn` class.
 [Warning Button](#){: .btn .btn--warning}
 [Danger Button](#){: .btn .btn--danger}
 [Info Button](#){: .btn .btn--info}
+[Inverse Button](#){: .btn .btn--inverse}
+[Light Outline Button](#){: .btn .btn--light-outline}
 
 ```markdown
 [Primary Button Text](#link){: .btn}
@@ -121,6 +123,8 @@ Make any link standout more when applying the `.btn` class.
 [Warning Button Text](#link){: .btn .btn--warning}
 [Danger Button Text](#link){: .btn .btn--danger}
 [Info Button Text](#link){: .btn .btn--info}
+[Inverse Button](#link){: .btn .btn--inverse}
+[Light Outline Button](#link){: .btn .btn--light-outline}
 ```
 
 [X-Large Button](#){: .btn .btn--x-large}
@@ -130,11 +134,11 @@ Make any link standout more when applying the `.btn` class.
 [X-Small Button](#){: .btn .btn--x-small}
 
 ```markdown
-[X-Large Button](#){: .btn .btn--x-large}
-[Large Button](#){: .btn .btn--large}
-[Default Button](#){: .btn}
-[Small Button](#){: .btn .btn--small}
-[X-Small Button](#){: .btn .btn--x-small}
+[X-Large Button](#link){: .btn .btn--x-large}
+[Large Button](#link){: .btn .btn--large}
+[Default Button](#link){: .btn}
+[Small Button](#link){: .btn .btn--small}
+[X-Small Button](#link){: .btn .btn--x-small}
 ```
 
 ## Notices

assets/_scss/_navigation.scss

@@ -53,13 +53,16 @@
    ========================================================================== */
 
 .pagination {
-  padding-top: 0.5em;
+  margin-top: 1em;
+  padding-top: 1em;
   border-top: 1px solid $border-color;
 
   ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
+    font-family: $sans-serif;
+    font-size: 12px;
   }
 
   li {
@@ -222,7 +225,7 @@
 .nav__list {
   a {
     display: block;
-    padding: 2px 0;
+    padding: 4px 0;
 
     &:hover {
       text-decoration: underline;
@@ -260,12 +263,13 @@
    ========================================================================== */
 
 .toc {
-  padding: 0 0 1em;
   font-family: $sans-serif-narrow;
   color: $gray;
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: #fff;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
 }
 
 .toc__menu {

assets/_scss/_page.scss

@@ -61,7 +61,7 @@
 }
 
 .page__content {
-  p, li {
+  p, li, dl {
     font-size: 16px;
   }
 
@@ -77,6 +77,15 @@
       }
     }
   }
+
+  dt {
+    margin-top: 1em;
+    font-weight: bold;
+  }
+
+  dd {
+    margin-left: 1em;
+  }
 }
 
 .page__hero {

assets/_scss/_sidebar.scss

@@ -10,6 +10,10 @@
   @include clearfix();
   margin-bottom: 1em;
 
+  @include breakpoint($medium) {
+    padding-right: $right-sidebar-width-narrow;
+  }
+
   @include breakpoint($large) {
     @include span(2 of 12);
     @include suffix(0.25 of 12);
@@ -34,7 +38,7 @@
 
   p, li {
     font-family: $sans-serif;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 1.2;
   }
 
@@ -89,6 +93,11 @@
   img {
     max-width: 110px;
     border-radius: 50%;
+
+    @include breakpoint($large) {
+      padding: 5px;
+      border: 1px solid $border-color;
+    }
   }
 }
 
@@ -109,20 +118,24 @@
 
 .author__name {
   margin: 0;
-  font-size: 18px;
 
   @include breakpoint($large) {
     margin-top: 10px;
     margin-bottom: 10px;
-    font-size: 20px;
   }
 }
 .sidebar .author__name {
   font-family: $sans-serif;
+  font-size: 16px;
+
+  @include breakpoint($large) {
+    font-size: 18px;
+  }
 }
 
 .author__bio {
   margin: 0;
+  font-size: 12px;
 
   @include breakpoint($large) {
     margin-top: 10px;

index.html

@@ -14,4 +14,4 @@ author_profile: false
   {% include archive-single.html %}
 {% endfor %}
 
-{% include pagination.html %}
+{% include paginator.html %}