Style tweaks to pagination, right sidebar, and background color

_includes/post_pagination.html

@@ -1,8 +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>
+    <a href="{{ base_path }}{{ page.previous.url }}" class="pagination--pager" 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>
+    <a href="{{ base_path }}{{ page.next.url }}" class="pagination--pager" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next }}</a>
   {% endif %}
 </nav>

_includes/sidebar.html

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

_layouts/single.html

@@ -47,6 +47,8 @@ layout: default
       </footer>
 
       {% if site.share and page.share %}{% include social-share.html %}{% endif %}
+
+      {% include post_pagination.html %}
     </div>
 
     {% if site.comments.provider and page.comments %}

assets/_scss/_base.scss

@@ -8,7 +8,7 @@ body {
   color: $text-color;
   font-family: $serif;
   line-height: 1.5;
-  background-color: $body-color;
+  background-color: $background-color;
 
   &.overflow--hidden {
     /* when primary navigation is visible, the content in the background won't scroll */
@@ -122,18 +122,6 @@ a {
   }
 }
 
-/* lists */
-
-ol, ul {
-  @include breakpoint($small) {
-    padding-left: 0;
-
-    ol, ul {
-      padding: 0.5em 1em;
-    }
-  }
-}
-
 /* code */
 
 tt, code, kbd, samp, pre {

assets/_scss/_navigation.scss

@@ -53,8 +53,10 @@
    ========================================================================== */
 
 .pagination {
-  margin-top: 1em;
+  @include full();
-  padding-top: 1em;
+  @include clearfix();
+  margin-top: 2em;
+  padding-top: 2em;
   border-top: 1px solid $border-color;
 
   ul {
@@ -77,6 +79,37 @@
   .current {
     font-weight: bold;
   }
+
+  /* next/previous buttons */
+  &--pager {
+    display: block;
+    padding: 1em 2em;
+    float: left;
+    width: 50%;
+    font-family: $sans-serif;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    color: mix(#fff, $gray, 25%);
+    border: 1px solid $light-gray;
+    border-radius: $border-radius;
+    &:hover {
+      color: $gray;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      margin-left: -1px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
 }
 
 
@@ -87,7 +120,7 @@
 .greedy-nav {
   position: relative;
   min-width: 250px;
-  background: #fff;
+  background: $background-color;
 
   a {
     display: block;

assets/_scss/_page.scss

@@ -22,18 +22,13 @@
 }
 
 .page {
-  @include breakpoint($medium) {
-    padding-right: $right-sidebar-width-narrow;
-  }
-
   @include breakpoint($large) {
     @include span(10 of 12 last);
-    padding-right: $right-sidebar-width;
+    @include suffix(2 of 12);
   }
 
   @include breakpoint($x-large) {
     @include prefix(0.5 of 12);
-    padding-right: $right-sidebar-width-wide;
   }
 
   .page__inner-wrap {
@@ -225,7 +220,7 @@
 
   &:hover {
     text-decoration: none;
-    border-color: $gray;
+    color: $gray;
   }
 }
 

assets/_scss/_sidebar.scss

@@ -10,13 +10,8 @@
   @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);
   }
 
   @include breakpoint($x-large) {
@@ -48,29 +43,16 @@
 }
 
 .sidebar__right {
-  @include breakpoint($medium) {
+  margin-bottom: 1em;
-    position: absolute;
-    top: 0;
-    right: 1em;
-    width: $right-sidebar-width-narrow;
-    padding-left: 2em;
-
-    @include breakpoint($large) {
-      width: $right-sidebar-width;
-    }
-
-    @include breakpoint($x-large) {
-      width: $right-sidebar-width-wide;
-      padding-left: span(1 of 12);
-    }
-  }
 
   @include breakpoint($large) {
-    right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
+    float: right;
+    width: $right-sidebar-width-narrow;
+    margin-left: span(0.5 of 12);
   }
 
   @include breakpoint($x-large) {
-    right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
+    width: $right-sidebar-width;
   }
 }
 

assets/_scss/_variables.scss

@@ -40,7 +40,7 @@ $light-gray                 : mix(#fff, $gray, 70%);
 $lighter-gray               : mix(#fff, $gray, 90%);
 
 $body-color                 : #fff;
-$background-color           : #fff;
+$background-color           : #f5f5f5;
 $code-background-color      : #f8f8f8;
 $text-color                 : #333332;
 $border-color               : $lighter-gray;