HangerThem/blog.hangerthem.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

A bit of styling for in-between post navigation

Browse source
This commit is contained in:
HangerThem 2026-08-04 11:48:08 +02:00
parent 729d3ae611
commit ba4e2dbd27
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/posts/[slug]/page.tsx
View file

@ -130,9 +130,9 @@ export default async function Post({ params }: { params: Promise<{ slug: string
{previous ? ( {previous ? (
<Link <Link
href={`/posts/${previous.slug}`} href={`/posts/${previous.slug}`}
className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70" className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-fg/10 active:bg-fg/15"
> >
<span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide"> <span className="flex items-center gap-1 text-xs text-fg-dim uppercase tracking-wide">
<ArrowLeft className="w-3 h-3 shrink-0 transition-transform group-hover:-translate-x-1" /> <ArrowLeft className="w-3 h-3 shrink-0 transition-transform group-hover:-translate-x-1" />
Previous Previous
</span> </span>
@ -147,9 +147,9 @@ export default async function Post({ params }: { params: Promise<{ slug: string
{next ? ( {next ? (
<Link <Link
href={`/posts/${next.slug}`} href={`/posts/${next.slug}`}
className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70 sm:text-right" className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-fg/10 active:bg-fg/15 sm:text-right"
> >
<span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide sm:justify-end"> <span className="flex items-center gap-1 text-xs text-fg-dim uppercase tracking-wide sm:justify-end">
Next Next
<ArrowRight className="w-3 h-3 shrink-0 transition-transform group-hover:translate-x-1" /> <ArrowRight className="w-3 h-3 shrink-0 transition-transform group-hover:translate-x-1" />
</span> </span>