neutrino2211/mainasara.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
neutrino2211
2025-12-17 11:03:29 +01:00
parent 69fa5b0a81
commit ac62ea0fe9
13 changed files with 823 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/stories/[slug]/page.tsx
View File

@@ -66,29 +66,29 @@ export default async function StoryPage({ params }: StoryPageProps) {
}
return (
<div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 font-mono">
<div className="min-h-screen bg-[#FAF8F5] font-mono">
<div className="max-w-4xl mx-auto px-6 py-12">
<header className="text-center mb-16">
<div className="mb-8">
<div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-yellow-300">
<div className="text-4xl font-bold text-yellow-300">📝</div>
<div className="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#F0E8D8]">
<div className="text-4xl font-bold text-[#F0E8D8]">📝</div>
</div>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
<h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
Mini Stories
</h1>
<p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
<p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
Capturing moments in brief narratives
</p>
</header>
<nav className="mb-16">
<div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
<div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
<ul className="flex flex-wrap justify-center gap-4 md:gap-8">
<li>
<Link
href="/"
className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
>
Home
</Link>
@@ -96,7 +96,7 @@ export default async function StoryPage({ params }: StoryPageProps) {
<li>
<Link
href="/digital-art"
className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
>
Digital Art
</Link>
@@ -104,7 +104,7 @@ export default async function StoryPage({ params }: StoryPageProps) {
<li>
<Link
href="/stories"
className="border-yellow-200 bg-yellow-300 px-4 py-2 border-2 text-black"
className="border-[#3D3D3D] bg-[#F0E8D8] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
>
All Stories
</Link>
@@ -112,7 +112,7 @@ export default async function StoryPage({ params }: StoryPageProps) {
<li>
<Link
href="/thoughts"
className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
className="text-[#3D3D3D] font-bold hover:bg-[#B8C5CE] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
>
Thoughts
</Link>
@@ -122,17 +122,17 @@ export default async function StoryPage({ params }: StoryPageProps) {
</nav>
<main>
<article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
<article className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal">
<div className="mb-8">
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 uppercase mb-4">
<h1 className="text-3xl md:text-4xl font-bold text-[#3D3D3D] uppercase mb-4">
{story.title}
</h1>
<div className="flex gap-4 text-sm mb-6">
<span className="bg-yellow-200 text-black px-3 py-1 border-2 border-black font-bold">
<span className="bg-[#F0E8D8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
{formatReadingTime(story.readTime)} read
</span>
<span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
<span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
{new Date(story.createdAt).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
@@ -143,7 +143,7 @@ export default async function StoryPage({ params }: StoryPageProps) {
</div>
<div className="prose prose-lg max-w-none">
<div className="text-gray-800 leading-relaxed whitespace-pre-line">
<div className="text-[#5D5D5D] leading-relaxed whitespace-pre-line">
{story.content}
</div>
</div>
@@ -151,8 +151,8 @@ export default async function StoryPage({ params }: StoryPageProps) {
</main>
<footer className="mt-20 text-center">
<div className="bg-black text-white p-4 font-bold">
<p className="text-sm uppercase">Built with brutalist pastels</p>
<div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
<p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
</div>
</footer>
</div>