📖✨：add single post pager

.stylelintrc.json

@@ -2,5 +2,8 @@
   "extends": [
     "stylelint-config-standard-scss",
     "stylelint-config-recess-order"
-  ]
+  ],
+  "rules": {
+    "no-descending-specificity": null
+  }
 }

_assets/styles/_news-item.scss

@@ -1,5 +1,137 @@
+@mixin respond-to($media) {
+  @if $media == handhelds {
+    @include media-breakpoint-down(sm) {
+      @content;
+    }
+  } @else if $media == medium-screens {
+    @include media-breakpoint-up(sm) {
+      @content;
+    }
+  } @else if $media == wide-screens {
+    @include media-breakpoint-up(lg) {
+      @content;
+    }
+  }
+}
+
 .news-item {
   .post-content {
     padding-top: 3rem;
   }
+
+  .single-post-pager {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    width: 100%;
+    border-top: 2px solid $tertiary;
+    border-bottom: 2px solid $tertiary;
+
+    @include respond-to(handhelds) {
+      display: block;
+    }
+  }
+
+  .post-title {
+    font-weight: normal;
+  }
+
+  .pager-link {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    color: inherit;
+    text-decoration: none;
+
+    .pager-direction,
+    .pager-date,
+    .pager-chevron {
+      position: absolute;
+      color: $primary;
+    }
+
+    .pager-date {
+      bottom: 0.5rem;
+      font-size: 0.75em;
+    }
+
+    .pager-direction {
+      top: 0.5rem;
+      font-weight: bold;
+    }
+
+    .pager-chevron {
+      top: 50%;
+      height: 4rem;
+      margin-top: -2rem;
+      font-size: 4rem;
+      line-height: 4rem;
+      transition: all 0.2s ease;
+    }
+
+    .pager-title {
+      line-height: 1.25rem;
+    }
+
+    &:hover {
+      background: shade-color($body-bg, 10%);
+
+      .pager-title {
+        color: $primary;
+      }
+    }
+
+    @include respond-to(handhelds) {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .newer-post {
+    padding-right: 1rem;
+    padding-left: 4rem;
+    text-align: left;
+
+    @include respond-to(handhelds) {
+      border-bottom: 1px solid tint-color($tertiary, 10%);
+    }
+
+    .pager-chevron {
+      left: 1.5rem;
+    }
+
+    &:hover .pager-chevron {
+      left: 1rem;
+    }
+
+    .pager-date {
+      left: 4rem;
+    }
+  }
+
+  .older-post {
+    justify-content: flex-end;
+    padding-right: 4rem;
+    padding-left: 1rem;
+    text-align: right;
+
+    .pager-chevron {
+      right: 1.5rem;
+    }
+
+    &:hover .pager-chevron {
+      right: 1rem;
+    }
+
+    .pager-date {
+      right: 4rem;
+    }
+
+    .pager-direction {
+      right: 4rem;
+    }
+  }
 }

_layouts/news-item.liquid

@@ -1,11 +1,13 @@
 ---
 layout: default
 permalink: "/news/{{ page.date | date: '%Y/%m/%d' }}/{{ page.fileSlug }}/"
+body_classes:
+  - news-item
 ---
 {%- assign author = authors[author] -%}
 <main class='flex-shrink-0'>
   <div class='container'>
-    <article itemscope itemtype='http://schema.org/Article'>
+    <article class='pb-4' itemscope itemtype='http://schema.org/Article'>
       <h1 class='post-title mt-5 mb-4' itemprop='headline'>
         {{- title -}}
       </h1>
@@ -43,5 +45,29 @@ permalink: "/news/{{ page.date | date: '%Y/%m/%d' }}/{{ page.fileSlug }}/"
         {{ content }}
       </div>
     </article>
+    {%- assign prev_post = collections.posts | getPreviousCollectionItem -%}
+    {%- assign next_post = collections.posts | getNextCollectionItem -%}
+    <nav class='single-post-pager'>
+      {% if prev_post %}
+        <a class='pager-link newer-post' href='{{ prev_post.url }}'>
+          <span class='pager-direction'>Newer</span>
+          <span class='pager-title'>{{- prev_post.data.title -}}</span>
+          <span class='pager-date'>
+            {{- prev_post.date | date_to_string -}}
+          </span>
+          <span class='pager-chevron'>&#8249;</span>
+        </a>
+      {% endif %}
+      {% if next_post %}
+        <a class='pager-link older-post' href='{{ next_post.url }} '>
+          <span class='pager-direction'>Older</span>
+          <span class='pager-title'>{{- next_post.data.title -}}</span>
+          <span class='pager-date'>
+            {{- next_post.date | date_to_string -}}
+          </span>
+          <span class='pager-chevron'>&#8250;</span>
+        </a>
+      {% endif %}
+    </nav>
   </div>
 </main>