consultoria-as/cronicas-de-los-reinos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve: better use of screen space on all pages

Browse Source 
- Larger book spines on desktop (w-64 h-96)
- Wider spacing between books on shelf
- Game cover page: two-column layout on large screens
- Chapter reader: wider content area (800px on lg)
- Larger typography on desktop breakpoints

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-02-17 08:59:25 +00:00
parent 1f6225fc5e
commit 2e3f688d4f
6 changed files with 125 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
.claude/settings.local.json Normal file
View File

@@ -0,0 +1,44 @@
{
"permissions": {
"allow": [
"Bash(git init:*)",
"Bash(git add:*)",
"Bash(git commit:*)",
"Bash(git config:*)",
"Bash(npx create-next-app@latest:*)",
"Bash(npx create-next-app@14:*)",
"Bash(npm install:*)",
"Bash(timeout 30 npm run dev:*)",
"Bash(timeout 20 npm run dev:*)",
"Bash(git -C /home/PaginaNovelasYRpg add:*)",
"Bash(git -C /home/PaginaNovelasYRpg status)",
"Bash(git -C:*)",
"Bash(echo:*)",
"Bash(npx tsc:*)",
"Bash(pkill:*)",
"Bash(ls:*)",
"Bash(npm run build:*)",
"Bash(curl -s -X POST \"https://git.consultoria-as.com/api/v1/user/repos\" -H \"Content-Type: application/json\" -u \"consultoria-as:Aasi940812\" -d '{\"\"name\"\":\"\"cronicas-de-los-reinos\"\",\"\"description\"\":\"\"Las historias epicas de los MMORPGs que marcaron una era\"\",\"\"private\"\":false}')",
"Bash(python3:*)",
"Bash(git remote add:*)",
"Bash(git branch:*)",
"Bash(git push:*)",
"Bash(git remote set-url:*)",
"Bash(ip addr:*)",
"Bash(pm2 start:*)",
"Bash(pm2 startup:*)",
"Bash(pm2 save:*)",
"Bash(curl:*)",
"Bash(pm2 stop:*)",
"Bash(pm2 logs:*)",
"Bash(pm2 delete:*)",
"Bash(lsof:*)",
"Bash(xargs:*)",
"Bash(pm2 kill:*)",
"Bash(ss:*)",
"Bash(kill:*)",
"Bash(NODE_ENV=production npx next build:*)",
"Bash(pm2 restart:*)"
]
}
}

15
ecosystem.config.js Normal file
View File

@@ -0,0 +1,15 @@
module.exports = {
apps: [
{
name: "cronicas-de-los-reinos",
cwd: "/home/PaginaNovelasYRpg",
script: "node_modules/.bin/next",
args: "start -H 0.0.0.0 -p 3000",
env: {
NODE_ENV: "production",
},
max_restarts: 5,
restart_delay: 3000,
},
],
};

37
src/components/BookCover.tsx
View File

@@ -5,7 +5,7 @@ export default function BookCover({ game }: { game: GameWithChapters }) {
return ( return (
<div className="min-h-screen bg-parchment text-stone-800"> <div className="min-h-screen bg-parchment text-stone-800">
{/* Back to shelf */} {/* Back to shelf */}
<div className="p-4 md:p-6"> <div className="p-4 md:p-6 lg:px-12">
<Link <Link
href="/" href="/"
className="inline-flex items-center text-stone-500 hover:text-stone-700 font-lora text-sm transition-colors" className="inline-flex items-center text-stone-500 hover:text-stone-700 font-lora text-sm transition-colors"
@@ -14,30 +14,32 @@ export default function BookCover({ game }: { game: GameWithChapters }) {
</Link> </Link>
</div> </div>
{/* Cover */} {/* Cover - two column layout on large screens */}
<div className="max-w-2xl mx-auto px-6 py-12 text-center"> <div className="max-w-6xl mx-auto px-6 py-8 md:py-12 lg:grid lg:grid-cols-2 lg:gap-16 lg:items-start">
{/* Left: Title and description */}
<div className="text-center lg:text-left lg:sticky lg:top-8">
{/* Decorative top */} {/* Decorative top */}
<div <div
className="w-24 h-1 mx-auto mb-8 rounded" className="w-24 h-1 mx-auto lg:mx-0 mb-8 rounded"
style={{ backgroundColor: game.accentColor }} style={{ backgroundColor: game.accentColor }}
/> />
<h1 <h1
className="font-playfair text-4xl md:text-5xl font-bold mb-3" className="font-playfair text-4xl md:text-5xl lg:text-6xl font-bold mb-3"
style={{ color: game.colorDark }} style={{ color: game.colorDark }}
> >
{game.title} {game.title}
</h1> </h1>
<p <p
className="font-lora italic text-lg mb-8" className="font-lora italic text-lg md:text-xl mb-8"
style={{ color: game.color }} style={{ color: game.color }}
> >
{game.subtitle} {game.subtitle}
</p> </p>
{/* Decorative divider */} {/* Decorative divider */}
<div className="flex items-center justify-center gap-4 mb-8"> <div className="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div className="w-16 h-px bg-stone-300" /> <div className="w-16 h-px bg-stone-300" />
<div <div
className="w-2 h-2 rotate-45" className="w-2 h-2 rotate-45"
@@ -46,13 +48,14 @@ export default function BookCover({ game }: { game: GameWithChapters }) {
<div className="w-16 h-px bg-stone-300" /> <div className="w-16 h-px bg-stone-300" />
</div> </div>
<p className="font-lora text-stone-600 text-base leading-relaxed max-w-lg mx-auto mb-16"> <p className="font-lora text-stone-600 text-base md:text-lg leading-relaxed max-w-lg mx-auto lg:mx-0 mb-12 lg:mb-0">
{game.description} {game.description}
</p> </p>
</div>
{/* Table of Contents */} {/* Right: Table of Contents */}
<div className="text-left max-w-md mx-auto"> <div>
<h2 className="font-playfair text-xl font-semibold text-stone-700 mb-6 text-center tracking-wide uppercase"> <h2 className="font-playfair text-xl md:text-2xl font-semibold text-stone-700 mb-6 text-center lg:text-left tracking-wide uppercase">
Indice Indice
</h2> </h2>
@@ -61,31 +64,31 @@ export default function BookCover({ game }: { game: GameWithChapters }) {
<Link <Link
key={chapter.slug} key={chapter.slug}
href={`/${game.slug}/${chapter.slug}`} href={`/${game.slug}/${chapter.slug}`}
className="flex items-baseline gap-3 py-3 px-2 rounded hover:bg-parchment-dark transition-colors group" className="flex items-baseline gap-4 py-4 px-4 rounded-lg hover:bg-parchment-dark transition-colors group"
> >
<span <span
className="font-playfair text-sm font-bold min-w-[2rem]" className="font-playfair text-base md:text-lg font-bold min-w-[2.5rem]"
style={{ color: game.color }} style={{ color: game.color }}
> >
{String(chapter.number).padStart(2, "0")} {String(chapter.number).padStart(2, "0")}
</span> </span>
<span className="font-lora text-stone-700 group-hover:text-stone-900 flex-1"> <span className="font-lora text-stone-700 group-hover:text-stone-900 flex-1 text-base md:text-lg">
{chapter.title} {chapter.title}
</span> </span>
<span className="text-stone-300 group-hover:text-stone-500 text-sm"> <span className="text-stone-300 group-hover:text-stone-500 text-base">
&rarr; &rarr;
</span> </span>
</Link> </Link>
))} ))}
</div> </div>
</div>
{/* Decorative bottom */} {/* Decorative bottom */}
<div <div
className="w-24 h-1 mx-auto mt-16 rounded" className="w-24 h-1 mx-auto lg:mx-0 mt-12 rounded"
style={{ backgroundColor: game.accentColor }} style={{ backgroundColor: game.accentColor }}
/> />
</div> </div>
</div> </div>
</div>
); );
} }

14
src/components/BookShelf.tsx
View File

@@ -3,22 +3,22 @@ import BookSpine from "./BookSpine";
export default function BookShelf({ games }: { games: GameMeta[] }) { export default function BookShelf({ games }: { games: GameMeta[] }) {
return ( return (
<div className="min-h-screen flex flex-col items-center justify-center px-4 py-16"> <div className="min-h-screen flex flex-col items-center justify-center px-4 py-12 md:py-16">
{/* Title */} {/* Title */}
<div className="text-center mb-16"> <div className="text-center mb-12 md:mb-16">
<h1 className="font-playfair text-4xl md:text-6xl font-bold text-parchment mb-4"> <h1 className="font-playfair text-4xl md:text-6xl lg:text-7xl font-bold text-parchment mb-4">
Cronicas de los Reinos Cronicas de los Reinos
</h1> </h1>
<p className="font-lora text-stone-400 text-lg italic max-w-lg mx-auto"> <p className="font-lora text-stone-400 text-lg md:text-xl italic max-w-2xl mx-auto">
Las historias epicas de los mundos que nos unieron Las historias epicas de los mundos que nos unieron
</p> </p>
<div className="w-32 h-0.5 bg-amber-700/50 mx-auto mt-6" /> <div className="w-32 h-0.5 bg-amber-700/50 mx-auto mt-6" />
</div> </div>
{/* Shelf */} {/* Shelf */}
<div className="relative"> <div className="relative w-full max-w-6xl mx-auto">
{/* Books row */} {/* Books row */}
<div className="flex gap-6 md:gap-8 items-end justify-center flex-wrap px-8 pb-4"> <div className="flex gap-6 md:gap-10 lg:gap-14 items-end justify-center flex-wrap px-4 md:px-8 pb-4">
{games.map((game) => ( {games.map((game) => (
<BookSpine key={game.slug} game={game} /> <BookSpine key={game.slug} game={game} />
))} ))}
@@ -30,7 +30,7 @@ export default function BookShelf({ games }: { games: GameMeta[] }) {
</div> </div>
{/* Footer */} {/* Footer */}
<p className="mt-16 text-stone-600 text-sm font-lora"> <p className="mt-12 md:mt-16 text-stone-600 text-sm font-lora">
Selecciona un tomo para comenzar a leer Selecciona un tomo para comenzar a leer
</p> </p>
</div> </div>

6
src/components/BookSpine.tsx
View File

@@ -5,7 +5,7 @@ export default function BookSpine({ game }: { game: GameMeta }) {
return ( return (
<Link href={`/${game.slug}`} className="group block"> <Link href={`/${game.slug}`} className="group block">
<div <div
className="relative w-44 h-64 md:w-48 md:h-72 rounded-r-md shadow-lg cursor-pointer transition-all duration-300 group-hover:-translate-y-3 group-hover:rotate-[-2deg] group-hover:shadow-2xl" className="relative w-44 h-64 md:w-56 md:h-80 lg:w-64 lg:h-96 rounded-r-md shadow-lg cursor-pointer transition-all duration-300 group-hover:-translate-y-3 group-hover:rotate-[-2deg] group-hover:shadow-2xl"
style={{ style={{
background: `linear-gradient(135deg, ${game.color} 0%, ${game.colorDark} 100%)`, background: `linear-gradient(135deg, ${game.color} 0%, ${game.colorDark} 100%)`,
}} }}
@@ -23,12 +23,12 @@ export default function BookSpine({ game }: { game: GameMeta }) {
style={{ backgroundColor: game.accentColor }} style={{ backgroundColor: game.accentColor }}
/> />
<h2 <h2
className="font-playfair text-lg md:text-xl font-bold leading-tight text-white" className="font-playfair text-lg md:text-2xl lg:text-3xl font-bold leading-tight text-white"
> >
{game.title} {game.title}
</h2> </h2>
<p <p
className="text-xs mt-2 opacity-75 font-lora italic" className="text-xs md:text-sm mt-2 opacity-75 font-lora italic"
style={{ color: game.accentColor }} style={{ color: game.accentColor }}
> >
{game.subtitle} {game.subtitle}

16
src/components/ChapterReader.tsx
View File

@@ -23,7 +23,7 @@ export default function ChapterReader({
<ReadingProgress color={game.accentColor} /> <ReadingProgress color={game.accentColor} />
{/* Header */} {/* Header */}
<header className="max-w-3xl mx-auto px-6 pt-8 pb-4"> <header className="max-w-4xl mx-auto px-6 lg:px-12 pt-8 pb-4">
<Link <Link
href={`/${game.slug}`} href={`/${game.slug}`}
className="inline-flex items-center text-stone-500 hover:text-stone-700 font-lora text-sm transition-colors" className="inline-flex items-center text-stone-500 hover:text-stone-700 font-lora text-sm transition-colors"
@@ -33,33 +33,33 @@ export default function ChapterReader({
</header> </header>
{/* Chapter heading */} {/* Chapter heading */}
<div className="max-w-3xl mx-auto px-6 pt-8 pb-12 text-center"> <div className="max-w-4xl mx-auto px-6 lg:px-12 pt-8 pb-12 text-center">
<p <p
className="font-playfair text-sm font-semibold tracking-widest uppercase mb-3" className="font-playfair text-sm md:text-base font-semibold tracking-widest uppercase mb-3"
style={{ color: game.color }} style={{ color: game.color }}
> >
Capitulo {chapter.number} de {totalChapters} Capitulo {chapter.number} de {totalChapters}
</p> </p>
<h1 className="font-playfair text-3xl md:text-4xl font-bold text-stone-800 mb-4"> <h1 className="font-playfair text-3xl md:text-4xl lg:text-5xl font-bold text-stone-800 mb-4">
{chapter.title} {chapter.title}
</h1> </h1>
<div className="flex items-center justify-center gap-4"> <div className="flex items-center justify-center gap-4">
<div className="w-12 h-px bg-stone-300" /> <div className="w-16 h-px bg-stone-300" />
<div <div
className="w-2 h-2 rotate-45" className="w-2 h-2 rotate-45"
style={{ backgroundColor: game.accentColor }} style={{ backgroundColor: game.accentColor }}
/> />
<div className="w-12 h-px bg-stone-300" /> <div className="w-16 h-px bg-stone-300" />
</div> </div>
</div> </div>
{/* Chapter content */} {/* Chapter content */}
<article className="max-w-[700px] mx-auto px-6 pb-20 font-lora text-lg leading-relaxed text-stone-700 prose prose-stone prose-lg prose-headings:font-playfair prose-headings:text-stone-800 prose-p:mb-6 prose-p:indent-8 first:prose-p:indent-0"> <article className="max-w-[700px] lg:max-w-[800px] mx-auto px-6 lg:px-12 pb-20 font-lora text-lg lg:text-xl leading-relaxed lg:leading-relaxed text-stone-700 prose prose-stone prose-lg lg:prose-xl prose-headings:font-playfair prose-headings:text-stone-800 prose-p:mb-6 prose-p:indent-8 first:prose-p:indent-0">
<MDXRemote source={chapter.content} /> <MDXRemote source={chapter.content} />
</article> </article>
{/* Chapter navigation */} {/* Chapter navigation */}
<nav className="max-w-[700px] mx-auto px-6 pb-16"> <nav className="max-w-[700px] lg:max-w-[800px] mx-auto px-6 lg:px-12 pb-16">
<div className="border-t border-stone-300 pt-8 flex justify-between items-center"> <div className="border-t border-stone-300 pt-8 flex justify-between items-center">
{prevChapter ? ( {prevChapter ? (
<Link <Link