Flourishes on in-article pagination

Author: csswizardry

_includes/css/components.pagination.css

@@ -131,6 +131,10 @@ <h1 itemprop="name  headline" elementtiming=page-title style="view-transition-na
 
         <hr />
 
+        {% include article-pagination.html %}
+
+        <hr />
+
         <div class=layout>
 
           <div class="layout__item  one-half">
@@ -149,10 +153,6 @@ <h1 itemprop="name  headline" elementtiming=page-title style="view-transition-na
 
         <hr />
 
-        {% include article-pagination.html %}
-
-        <hr />
-
         {% include mini-profile.html %}
 
         {% endif %}

_layouts/post.html

@@ -20,6 +20,8 @@
     padding: 12px;
     border-radius: $base-round;
     border: 1px solid transparent;
+    will-change: transform;
+    transition: 0.3333s transform;
 
     &:hover {
       text-decoration: none;
@@ -45,14 +47,27 @@
       color: $color-gray;
     }
 
-    .c-pagination__prev::before {
-      content: "Previously: "
+    .c-pagination__prev {
+
+      &:hover {
+        transform: translateX(-$spacing-unit--small);
+      }
+
+      &::before {
+        content: "Previously: "
+      }
+
     }
 
   .c-pagination__next {
     text-align: right;
-  }
 
-    .c-pagination__next::before {
+    &:hover {
+      transform: translateX($spacing-unit--small);
+    }
+
+    &::before {
       content: "Up next: "
     }
+
+  }