streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: simplify article layout and fix text wrapping

Browse Source
This commit is contained in:
streaper2
2026-05-10 13:54:50 +02:00
parent 3567e5d224
commit f64b8ba53c
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/blog/[id]/page.tsx
View File

@@ -63,24 +63,25 @@ export default async function BlogPostPage({ params }: Props) {
} }
return ( return (
<article className="bg-white min-h-screen"> <article className="bg-gray-50 min-h-screen py-12">
{/* Hero Image */} <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="w-full h-64 md:h-96 relative"> {/* Navigation */}
<img <div className="mb-8">
src={post.imageUrl} <Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
alt={post.title}
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div className="absolute bottom-0 left-0 w-full p-4 sm:p-8 max-w-4xl mx-auto">
<Link href="/blog" className="inline-flex items-center text-white/80 hover:text-white mb-4 text-sm font-medium transition-colors">
<ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
</Link> </Link>
</div> </div>
</div>
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-20 relative z-10"> <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100">
<div className="bg-white rounded-xl shadow-xl p-6 md:p-10 border border-gray-100"> {/* Header Image */}
<div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
<img
src={post.imageUrl}
alt={post.title}
className="w-full h-full object-cover"
/>
</div>
{/* Header */} {/* Header */}
<header className="mb-8 border-b border-gray-100 pb-8"> <header className="mb-8 border-b border-gray-100 pb-8">
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4"> <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">

5
app/globals.css
View File

@@ -26,11 +26,10 @@ body {
} }
.prose { .prose {
text-align: justify; text-align: left;
hyphens: none; hyphens: none;
word-break: normal; word-break: normal;
overflow-wrap: normal; overflow-wrap: break-word;
overflow-x: auto;
} }
.prose p { .prose p {

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts"; import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.