Post meta line fix on mobile
This commit is contained in:
parent
6968646702
commit
fa6c205838
1 changed files with 14 additions and 7 deletions
|
|
@ -4,6 +4,7 @@ import { ShareLinks } from '@/components/post/ShareLinks'
|
|||
import { TableOfContents } from '@/components/post/TableOfContents'
|
||||
import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
|
||||
import { slugify } from '@/utils/slug'
|
||||
import { Pencil, SendHorizonal } from 'lucide-react'
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
|
|
@ -53,9 +54,12 @@ export default async function Post({ params }: { params: Promise<{ slug: string
|
|||
</Link>
|
||||
)}
|
||||
<h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
|
||||
<div className="flex items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-4 text-sm">
|
||||
<div className="flex justify-between md:justify-normal items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-2 md:px-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Posted</span>
|
||||
<span className="hidden md:inline">Posted</span>
|
||||
<span className="md:hidden">
|
||||
<SendHorizonal className="w-3 h-3" />
|
||||
</span>
|
||||
<time
|
||||
dateTime={meta.date}
|
||||
title={new Date(meta.date).toLocaleString()}
|
||||
|
|
@ -63,16 +67,19 @@ export default async function Post({ params }: { params: Promise<{ slug: string
|
|||
>
|
||||
{new Date(meta.date).toLocaleDateString(undefined, {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
<span>·</span>
|
||||
<span className="hidden md:inline">·</span>
|
||||
{meta.updated && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Updated</span>
|
||||
<span className="hidden md:inline">Updated</span>
|
||||
<span className="md:hidden">
|
||||
<Pencil className="w-3 h-3" />
|
||||
</span>
|
||||
<time
|
||||
dateTime={meta.updated}
|
||||
title={new Date(meta.updated).toLocaleString()}
|
||||
|
|
@ -80,12 +87,12 @@ export default async function Post({ params }: { params: Promise<{ slug: string
|
|||
>
|
||||
{new Date(meta.updated).toLocaleDateString(undefined, {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
<span>·</span>
|
||||
<span className="hidden md:inline">·</span>
|
||||
</>
|
||||
)}
|
||||
<span>{meta.readingTimeText}</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue