💫 Add transitions to author/article nav links

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - External links in article content will now open in a new browser tab ([#312](https://github.com/jpanther/congo/pull/312))
 - Independent control over the display of taxonomy listings on article and list pages ([#326](https://github.com/jpanther/congo/pull/326))
 - Button shortcode now supports an optional `download` parameter to instruct browsers to directly download resources rather than navigate to a URL ([#349](https://github.com/jpanther/congo/pull/349))
+- Minor style and layout improvements
 
 ### Changed
 

assets/css/compiled/main.css

@@ -1807,12 +1807,12 @@ body:has(#menu-controller:checked) {
   margin-top: -1rem;
 }
 
-.mr-3 {
+.mr-2 {
-  margin-right: 0.75rem;
+  margin-right: 0.5rem;
 }
 
-.ml-3 {
+.ml-2 {
-  margin-left: 0.75rem;
+  margin-left: 0.5rem;
 }
 
 .mt-\[0\.1rem\] {
@@ -1831,10 +1831,6 @@ body:has(#menu-controller:checked) {
   margin-bottom: 0.25rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1843,10 +1839,6 @@ body:has(#menu-controller:checked) {
   margin-bottom: -0.25rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
@@ -2447,6 +2439,12 @@ body:has(#menu-controller:checked) {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2457,6 +2455,12 @@ body:has(#menu-controller:checked) {
   margin-top: 2rem;
 }
 
+.hover\:scale-125:hover {
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-primary-300:hover {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-300), var(--tw-border-opacity));
@@ -2540,6 +2544,16 @@ body:has(#menu-controller:checked) {
   outline-color: transparent;
 }
 
+.group:hover .group-hover\:-translate-x-\[2px\] {
+  --tw-translate-x: -2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:translate-x-\[2px\] {
+  --tw-translate-x: 2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group:hover .group-hover\:text-primary-600 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));

layouts/partials/article-pagination.html

@@ -11,13 +11,13 @@
       <div class="flex justify-between pt-3">
         <span>
           {{ if $prev }}
-            <a class="flex group" href="{{ $prev.RelPermalink }}">
+            <a class="group flex" href="{{ $prev.RelPermalink }}">
               <span
-                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
+                class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
                 >&larr;</span
               >
               <span
-                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
+                class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
                 >&rarr;</span
               >
               <span class="flex flex-col">
@@ -36,7 +36,7 @@
         </span>
         <span>
           {{ if $next }}
-            <a class="flex text-right group" href="{{ $next.RelPermalink }}">
+            <a class="group flex text-right" href="{{ $next.RelPermalink }}">
               <span class="flex flex-col">
                 <span
                   class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
@@ -49,11 +49,11 @@
                 </span>
               </span>
               <span
-                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
+                class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
                 >&rarr;</span
               >
               <span
-                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
+                class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
                 >&larr;</span
               >
             </a>

layouts/partials/author-links.html

@@ -3,7 +3,7 @@
     {{ range $links := . }}
       {{ range $name, $url := $links }}
         <a
-          class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
+          class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400"
           href="{{ $url }}"
           target="_blank"
           aria-label="{{ $name | title }}"