classe et espece
This commit is contained in:
82
src/pages/classes/[...slug].astro
Normal file
82
src/pages/classes/[...slug].astro
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
import { getCollection, render } from "astro:content";
|
||||
import GameLayout from "../../../layouts/GameLayout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const classEntries = await getCollection("classes");
|
||||
return classEntries.map((entry) => ({
|
||||
params: { slug: entry.id },
|
||||
props: { entry },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
if (!entry) return Astro.redirect("/404");
|
||||
|
||||
const { Content } = await render(entry);
|
||||
---
|
||||
|
||||
<GameLayout title={entry.data.title}>
|
||||
<article class="class-detail">
|
||||
<header class="post-header">
|
||||
<a href="/creation" class="back-nav">← Retour à la création</a>
|
||||
<h1>{entry.data.title}</h1>
|
||||
<p>{entry.data.description}</p>
|
||||
</header>
|
||||
|
||||
<hr class="separator" />
|
||||
|
||||
<div class="prose-content">
|
||||
<Content />
|
||||
</div>
|
||||
</article>
|
||||
</GameLayout>
|
||||
|
||||
<style>
|
||||
.class-detail {
|
||||
background: white;
|
||||
border: 1px solid #dcd0b9;
|
||||
border-radius: 8px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.back-nav {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.8rem;
|
||||
color: #b8860b;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.5rem 0;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 2.2rem;
|
||||
color: #3a352a;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#dcd0b9,
|
||||
transparent
|
||||
);
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
.prose-content {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
167
src/pages/creation.astro
Normal file
167
src/pages/creation.astro
Normal file
@@ -0,0 +1,167 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import GameLayout from "../layouts/GameLayout.astro";
|
||||
|
||||
const classes = await getCollection("classes");
|
||||
const especes = await getCollection("especes");
|
||||
---
|
||||
|
||||
<GameLayout title="Création de Personnage">
|
||||
<div class="creation-container">
|
||||
<!-- Section for Classes -->
|
||||
<section class="character-select">
|
||||
<h2 class="dnd-title">Choisissez votre Classe</h2>
|
||||
<div class="dnd-bar"></div>
|
||||
<p class="dnd-intro">
|
||||
La classe définit vos compétences et votre rôle dans l'aventure.
|
||||
</p>
|
||||
<div class="class-grid">
|
||||
{
|
||||
classes.map((charClass) => (
|
||||
<div class="class-card">
|
||||
<h3>{charClass.data.title}</h3>
|
||||
<p>{charClass.data.description}</p>
|
||||
<a
|
||||
href={`/classes/${charClass.id}`}
|
||||
class="select-button"
|
||||
>
|
||||
Détails
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section for Species -->
|
||||
<section class="character-select">
|
||||
<h2 class="dnd-title">Choisissez votre Espèce</h2>
|
||||
<div class="dnd-bar"></div>
|
||||
<p class="dnd-intro">
|
||||
L'espèce influence votre apparence, votre histoire et certaines
|
||||
de vos aptitudes.
|
||||
</p>
|
||||
<div class="class-grid">
|
||||
{
|
||||
especes.map((espece) => (
|
||||
<div class="class-card">
|
||||
<h3>{espece.data.title}</h3>
|
||||
<p>{espece.data.description}</p>
|
||||
<a
|
||||
href={`/especes/${espece.id}`}
|
||||
class="select-button"
|
||||
>
|
||||
Détails
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</GameLayout>
|
||||
|
||||
<style>
|
||||
.creation-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.character-select {
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
.dnd-title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 2.5rem;
|
||||
color: #c89b3c;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dnd-bar {
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
#c89b3c 50%,
|
||||
transparent 100%
|
||||
);
|
||||
margin: 4px auto 1rem auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.dnd-intro {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 1rem;
|
||||
opacity: 0.8;
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.class-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.class-card {
|
||||
background: white;
|
||||
border: 1px solid #c89b3c;
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
transition:
|
||||
transform 0.3s,
|
||||
box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.class-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(200, 155, 60, 0.2);
|
||||
}
|
||||
|
||||
.class-card h3 {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 1.8rem;
|
||||
color: #c89b3c;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.class-card p {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.9;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.9rem;
|
||||
background: transparent;
|
||||
color: #c89b3c;
|
||||
border: 1px solid #c89b3c;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.3s,
|
||||
color 0.3s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.select-button:hover {
|
||||
background: #c89b3c;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
82
src/pages/especes/[...slug].astro
Normal file
82
src/pages/especes/[...slug].astro
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
import { getCollection, render } from "astro:content";
|
||||
import GameLayout from "../../../layouts/GameLayout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const especeEntries = await getCollection("especes");
|
||||
return especeEntries.map((entry) => ({
|
||||
params: { slug: entry.id },
|
||||
props: { entry },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
if (!entry) return Astro.redirect("/404");
|
||||
|
||||
const { Content } = await render(entry);
|
||||
---
|
||||
|
||||
<GameLayout title={entry.data.title}>
|
||||
<article class="espece-detail">
|
||||
<header class="post-header">
|
||||
<a href="/creation" class="back-nav">← Retour à la création</a>
|
||||
<h1>{entry.data.title}</h1>
|
||||
<p>{entry.data.description}</p>
|
||||
</header>
|
||||
|
||||
<hr class="separator" />
|
||||
|
||||
<div class="prose-content">
|
||||
<Content />
|
||||
</div>
|
||||
</article>
|
||||
</GameLayout>
|
||||
|
||||
<style>
|
||||
.espece-detail {
|
||||
background: white;
|
||||
border: 1px solid #dcd0b9;
|
||||
border-radius: 8px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.back-nav {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.8rem;
|
||||
color: #b8860b;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.5rem 0;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 2.2rem;
|
||||
color: #3a352a;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#dcd0b9,
|
||||
transparent
|
||||
);
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
.prose-content {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -32,6 +32,12 @@ const allTags = [
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="creation-button-container">
|
||||
<a href="/creation" class="creation-button"
|
||||
>Création de Personnage</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<Timeline eras={eras} />
|
||||
|
||||
<ContentSearch posts={sortedPosts} tags={allTags} basePath="journal" />
|
||||
@@ -39,6 +45,30 @@ const allTags = [
|
||||
</GameLayout>
|
||||
|
||||
<style is:global>
|
||||
.creation-button-container {
|
||||
text-align: center;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.creation-button {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 1.2rem;
|
||||
background: #c89b3c;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.creation-button:hover {
|
||||
background: #a27c2c;
|
||||
}
|
||||
|
||||
.index-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
Reference in New Issue
Block a user