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

12
components/blog/blog-card.tsx
View File

@@ -14,8 +14,8 @@ export function BlogCard({ post, variant }: BlogCardProps) {
if (!hasImage || variant === 'text-only') {
return (
<Link href={`/blog/${post.slug}`} className="block cursor-pointer">
<article className="border-4 border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
<div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
<article className="border border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
<div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
<span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
{post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
</span>
@@ -44,7 +44,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
if (variant === 'image-side') {
return (
<Link href={`/blog/${post.slug}`} className="block cursor-pointer">
<article className="border-4 border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
<article className="border border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
<div className="flex flex-col md:flex-row h-full">
<div className="md:w-1/3 relative h-64 md:h-auto bg-zinc-900">
<Image
@@ -56,7 +56,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
<div className="absolute inset-0 bg-zinc-900/60" />
</div>
<div className="md:w-2/3 p-6">
<div className="border-l-4 border-cyan-400 pl-4 mb-4">
<div className="border-l-2 border-cyan-400 pl-4 mb-4">
<span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
{post.frontmatter.category} // {formatDate(post.frontmatter.date)}
</span>
@@ -86,7 +86,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
return (
<Link href={`/blog/${post.slug}`} className="block cursor-pointer">
<article className="border-4 border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
<article className="border border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
<div className="relative h-64 bg-zinc-900">
<Image
src={post.frontmatter.image!}
@@ -97,7 +97,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
<div className="absolute inset-0 bg-zinc-900/60" />
</div>
<div className="p-6">
<div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
<div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
<span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
{post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
</span>