finish footer links

src/components/Icon.astro

@@ -1,9 +1,11 @@
 ---
 export interface Props {
     name: string,
+    width?: string,
+    height?: string,
 };
 
-const { name } = Astro.props;
+const { name, width, height } = Astro.props;
 
 const icons = import.meta.glob<{string: string}>('@components/icons/*.svg', { query: '?raw', import: 'default' });
 const path = `/src/components/icons/${name}.svg`;
@@ -13,11 +15,11 @@ if (icons[path] === undefined) {
 const icon = await icons[path]();
 ---
 
-<Fragment set:html={icon} />
+<span class="icon" set:html={icon} />
 
-<style>
-    svg {
-        width: 100%;
-        height: 100%;
+<style define:vars={{ width, height }}>
+    .icon :global(svg) {
+        width: var(--width, 100%);
+        height: var(--height, 100%);
     }
 </style>

src/components/Post.astro

@@ -8,6 +8,8 @@ import { render } from 'astro:content';
 import Toc from '@components/Toc.vue';
 import { formatDate } from '@lib/datefmt';
 
+import Icon from '@components/Icon.astro';
+
 export interface Props {
     entry: CollectionEntry<'posts'>,
     prevSlug?: string | null,
@@ -59,7 +61,11 @@ footer {
     grid-column: 2 / 3;
     margin-bottom: 2.5rem;
     display: flex;
-    justify-content: space-between;
+
+    color: var(--content-color-faded);
+    margin-top: 1.5rem;
+    padding-top: 2.25rem;
+    border-top: 1px solid var(--content-color-faded);
 
     & a {
         font-size: 1.25rem;
@@ -77,6 +83,32 @@ footer {
     }
 }
 
+/* basic styles */
+.footer-link {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+
+    &.right {
+        margin-left: auto;
+    }
+}
+
+/* animate on hover */
+.footer-link {
+    & :global(svg) {
+        transition: transform 150ms;
+    }
+
+    &.right:hover :global(svg) {
+        transform: translateX(50%);
+    }
+
+    &.left:hover :global(svg) {
+        transform: translateX(-50%);
+    }
+}
+
 article {
     & :global(section.post::first-letter) {
         font-family: 'Baskervville';
@@ -116,10 +148,16 @@ article {
 
     <footer>
         {prevSlug && (
-            <a href={`/${prevSlug}`} data-astro-prefetch>Older</a>
+            <div class="footer-link left">
+                <Icon name="arrow-left" height="1em" />
+                <a href={`/${prevSlug}`} data-astro-prefetch>Older</a>
+            </div>
         )}
         {nextSlug && (
-            <a href={`/${nextSlug}`} data-astro-prefetch>Newer</a>
+            <div class="footer-link right">
+                <a href={`/${nextSlug}`} data-astro-prefetch>Newer</a>
+                <Icon name="arrow-right" height="1em" />
+            </div>
         )}
     </footer>
 </article>

src/components/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+</svg>

src/components/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+</svg>

src/components/icons/moon.svg

@@ -1,10 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
   <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
 </svg>
-
-<style>
-svg {
-    width: 100%;
-    height: 100%;
-}
-</style>