raresj/mypage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🖼️ update blog post styles

Browse Source
This commit is contained in:
RJ
2025-11-13 16:04:17 +02:00
parent bc745cfa8b
commit 82b77be57a
18 changed files with 623 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/blog/blog-client.tsx
View File

@@ -65,22 +65,21 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
}
return (
<div className="min-h-screen bg-zinc-900">
<Navbar />
<div className="min-h-screen bg-[rgb(var(--bg-primary))]">
<div className="max-w-7xl mx-auto px-6 py-12">
{/* Header */}
<div className="border-l-4 border-cyan-400 pl-6 mb-12">
<p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
<div className="border-l border-[var(--neon-cyan)] pl-6 mb-12">
<p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-widest mb-2">
DATABASE QUERY // SEARCH RESULTS
</p>
<h1 className="text-4xl md:text-6xl font-mono font-bold text-zinc-100 uppercase tracking-tight">
<h1 className="text-4xl md:text-6xl font-mono font-bold text-[rgb(var(--text-primary))] uppercase tracking-tight">
&gt; BLOG ARCHIVE_
</h1>
</div>
{/* Search Bar */}
<div className="border-4 border-slate-700 bg-slate-900 p-6 mb-8">
<div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6 mb-8">
<div className="flex flex-col lg:flex-row gap-4">
<SearchBar
searchQuery={searchQuery}
@@ -109,7 +108,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
{/* Results Count */}
<div className="mb-6">
<p className="font-mono text-sm text-zinc-500 uppercase">
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase">
FOUND {filteredAndSortedPosts.length} {filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
</p>
</div>
@@ -131,8 +130,8 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
})}
</div>
) : (
<div className="border-4 border-slate-700 bg-slate-900 p-12 text-center">
<p className="font-mono text-lg text-zinc-400 uppercase">
<div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-12 text-center">
<p className="font-mono text-lg text-[rgb(var(--text-muted))] uppercase">
NO POSTS FOUND // TRY DIFFERENT SEARCH TERMS
</p>
</div>
@@ -140,12 +139,12 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
{/* Pagination */}
{totalPages > 1 && (
<div className="border-4 border-slate-700 bg-slate-900 p-6">
<div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6">
<div className="flex items-center justify-between">
<button
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
>
&lt; PREV
</button>
@@ -154,10 +153,10 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
<button
key={page}
onClick={() => setCurrentPage(page)}
className={`w-12 h-12 font-mono text-sm border-2 transition-colors cursor-pointer ${
className={`w-12 h-12 font-mono text-sm border transition-colors cursor-pointer ${
currentPage === page
? 'bg-cyan-400 border-cyan-400 text-slate-900'
: 'border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
? 'bg-[var(--neon-cyan)] border-[var(--neon-cyan)] text-white'
: 'border-[rgb(var(--border-primary))] text-[rgb(var(--text-muted))] hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)]'
}`}
>
{String(page).padStart(2, '0')}
@@ -167,7 +166,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
<button
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages}
className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
>
NEXT &gt;
</button>