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
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
**/_test.*

29
src/lib/Post.svelte
View File

@ -62,22 +62,31 @@
.footer a {
display: flex;
align-items: center;
gap: 1rem;
gap: 0.45em;
font-size: 0.9rem;
font-size: 1rem;
color: var(--content-color-faded);
text-decoration: none;
text-decoration: underline;
text-underline-offset: 0.25em;
text-decoration-color: transparent;
transition: 150ms;
will-change: transform;
}
.footer a:hover {
text-decoration-color: currentColor;
text-decoration: underline;
transform: scale(1.15);
}
.footer svg {
width: 1.5em;
width: 1em;
transition: 150ms;
}
a.prev:hover svg {
transform: translateX(-50%);
}
a.next:hover svg {
transform: translateX(50%);
}
</style>
@ -104,8 +113,8 @@
<div class="footer">
{#if prev}
<a href="/{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">
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg>
Previous
@ -114,9 +123,9 @@
{#if next}
<!-- 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
<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" />
</svg>
</a>