jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tweak next/prev links

Browse Source
This commit is contained in:
Joseph Montanaro 2023-09-23 19:23:40 -07:00
parent c1e82ffb2c
commit ce4ddf5a17
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -8,3 +8,4 @@ node_modules
!.env.example !.env.example
vite.config.js.timestamp-* vite.config.js.timestamp-*
vite.config.ts.timestamp-* vite.config.ts.timestamp-*
**/_test.*

29
src/lib/Post.svelte
View File

@ -62,22 +62,31 @@
.footer a { .footer a {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.45em;
font-size: 0.9rem; font-size: 1rem;
color: var(--content-color-faded); color: var(--content-color-faded);
text-decoration: none; text-decoration: underline;
text-underline-offset: 0.25em;
text-decoration-color: transparent;
transition: 150ms; transition: 150ms;
will-change: transform;
} }
.footer a:hover { .footer a:hover {
text-decoration-color: currentColor;
text-decoration: underline; text-decoration: underline;
transform: scale(1.15);
} }
.footer svg { .footer svg {
width: 1.5em; width: 1em;
transition: 150ms;
}
a.prev:hover svg {
transform: translateX(-50%);
}
a.next:hover svg {
transform: translateX(50%);
} }
</style> </style>
@ -104,8 +113,8 @@
<div class="footer"> <div class="footer">
{#if prev} {#if prev}
<a href="/{prev}" data-sveltekit-preload-data="hover"> <a href="/{prev}" class="prev" data-sveltekit-preload-data="hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <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.5L3 12m0 0l7.5-7.5M3 12h18" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg> </svg>
Previous Previous
@ -114,9 +123,9 @@
{#if next} {#if next}
<!-- we use margin-left rather than justify-content so it works regardless of whether the "previous" link exists --> <!-- we use margin-left rather than justify-content so it works regardless of whether the "previous" link exists -->
<a href="/{next}" style="margin-left: auto;" data-sveltekit-preload-data="hover"> <a href="/{next}" class="next" style="margin-left: auto;" data-sveltekit-preload-data="hover">
Next Next
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <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.5L21 12m0 0l-7.5 7.5M21 12H3" /> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg> </svg>
</a> </a>