Feat: implémentation front page Blog

- blog.json.php : réécriture — intro (writer), featured (pages field),
  articles triés par date desc (featured exclu de la liste)
- layout.css : .page-scrollable + .page-container (styles génériques
  pour pages scrollables type blog/article)
- Blog.svelte : page scrollable avec header intro, article featured
  (image large + excerpt), liste articles avec dividers, responsive
  mobile/tablet via @custom-media

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

site/templates/blog.json.php

@@ -1,23 +1,25 @@
 <?php
 
-$specificData = [
+$featured = $page->featured()->toPages()->first();
-  'intro' => [
+
-    'title' => $page->introTitle()->value(),
+$mapArticle = function($article) {
-    'text' => $page->introText()->value()
-  ],
-  'articles' => $page->children()->listed()->sortBy('date', 'desc')->map(function($article) {
   return [
     'title' => $article->title()->value(),
     'slug'  => $article->slug(),
-      'url' => $article->url(),
+    'date'  => $article->date()->toDate('d/m/Y'),
-      'date' => $article->date()->toDate('Y-m-d'),
-      'dateFormatted' => $article->date()->toDate('d/m/Y'),
     'intro' => $article->intro()->excerpt(200),
     'cover' => $article->cover()->toFile()?->url(),
-      'authorName' => $article->authorName()->value(),
-      'authorPhoto' => $article->authorPhoto()->toFile()?->url()
   ];
-  })->values()
+};
+
+$articles = $page->children()->listed()->sortBy('date', 'desc');
+
+$specificData = [
+  'intro'    => $page->intro()->value(),
+  'featured' => $featured ? $mapArticle($featured) : null,
+  'articles' => ($featured ? $articles->not($featured) : $articles)
+    ->map($mapArticle)
+    ->values(),
 ];
 
 $pageData = array_merge($genericData, $specificData);

src/styles/layout.css

@@ -13,6 +13,18 @@
   overflow-y: hidden;
 }
 
+/* Pages scrollables (blog, article, etc.) */
+.page-scrollable {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 50px;
+}
+
 /* Vertical Lines */
 .vertical-line {
   z-index: var(--z-base);

src/views/Blog.svelte

@@ -1,24 +1,240 @@
 <script>
-  import { fade } from 'svelte/transition'
+  import Footer from '@components/layout/Footer.svelte'
+
   let { data } = $props()
+
+  const featured = $derived(data?.featured ?? null)
+  const articles = $derived(data?.articles ?? [])
 </script>
 
-<div class="blog" transition:fade>
+<section class="blog page-scrollable">
-  <div class="blog__container">
+  <div class="page-container">
-    <h1>{data?.title || 'Blog'}</h1>
+
-    <p>Blog view - To be implemented</p>
+    <!-- Intro -->
+    {#if data?.intro}
+      <header class="blog-header">
+        {@html data.intro}
+      </header>
+    {/if}
+
+    <!-- Featured article -->
+    {#if featured}
+      <article class="blog-card blog-card--featured">
+        <div class="blog-card-text">
+          <time class="blog-card-date">{featured.date}</time>
+          <h2 class="blog-card-title">
+            <a href="/blog/{featured.slug}">{featured.title}</a>
+          </h2>
+          {#if featured.intro}
+            <p class="blog-card-excerpt">{featured.intro}</p>
+          {/if}
+          <a href="/blog/{featured.slug}" class="blog-card-readmore">
+            Lire l'article <span class="arrow">→</span>
+          </a>
         </div>
+        {#if featured.cover}
+          <div class="blog-card-image blog-card-image--featured">
+            <a href="/blog/{featured.slug}">
+              <img src={featured.cover} alt={featured.title} />
+            </a>
           </div>
+        {/if}
+      </article>
+      <hr class="blog-divider" />
+    {/if}
+
+    <!-- Articles list -->
+    {#each articles as article, i}
+      <article class="blog-card">
+        <div class="blog-card-text">
+          <time class="blog-card-date">{article.date}</time>
+          <h2 class="blog-card-title">
+            <a href="/blog/{article.slug}">{article.title}</a>
+          </h2>
+          <a href="/blog/{article.slug}" class="blog-card-readmore">
+            Lire l'article <span class="arrow">→</span>
+          </a>
+        </div>
+        {#if article.cover}
+          <div class="blog-card-image">
+            <a href="/blog/{article.slug}">
+              <img src={article.cover} alt={article.title} />
+            </a>
+          </div>
+        {/if}
+      </article>
+      {#if i < articles.length - 1}
+        <hr class="blog-divider" />
+      {/if}
+    {/each}
+
+  </div>
+
+  <Footer />
+</section>
 
 <style>
   .blog {
-    min-height: 100vh;
+    background: #0d0e22;
-    padding: 8rem 2rem 4rem;
+    color: var(--color-text);
-    color: #fff;
   }
 
-  .blog__container {
+  /* --- Header / Intro --- */
-    max-width: 1200px;
+  .blog-header {
+    text-align: center;
+    padding: 6rem 0 3rem;
+  }
+
+  .blog-header :global(h1) {
+    font-family: "Terminal", sans-serif;
+    font-size: var(--font-size-title-main);
+    text-transform: uppercase;
+    margin-bottom: 1.5rem;
+  }
+
+  .blog-header :global(p) {
+    font-size: var(--font-size-subtitle);
+    line-height: 1.6;
+    max-width: 640px;
     margin: 0 auto;
+    opacity: 0.9;
+  }
+
+  /* --- Card (article item) --- */
+  .blog-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 2rem;
+    padding: 1.5rem 0;
+  }
+
+  .blog-card-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 640px;
+  }
+
+  .blog-card-date {
+    color: #d9d9d9;
+    font-size: var(--font-size-paragraph);
+  }
+
+  .blog-card-title {
+    font-family: "Danzza Bold", sans-serif;
+    font-size: var(--font-size-title-section);
+    line-height: 1.3;
+  }
+
+  .blog-card-title a {
+    transition: color 0.2s;
+  }
+
+  .blog-card-title a:hover {
+    color: var(--color-primary);
+  }
+
+  .blog-card-excerpt {
+    color: #d9d9d9;
+    font-size: var(--font-size-paragraph);
+    line-height: 1.6;
+  }
+
+  .blog-card-readmore {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--color-primary);
+    font-family: "Danzza Medium", sans-serif;
+    font-size: var(--font-size-paragraph);
+    transition: gap 0.2s;
+  }
+
+  .blog-card-readmore:hover {
+    gap: 1rem;
+  }
+
+  /* --- Image --- */
+  .blog-card-image img {
+    width: 300px;
+    height: 169px;
+    object-fit: cover;
+    transition: transform 0.3s;
+  }
+
+  .blog-card-image img:hover {
+    transform: scale(1.05);
+  }
+
+  .blog-card-image--featured img {
+    width: auto;
+    height: 300px;
+  }
+
+  /* --- Divider --- */
+  .blog-divider {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.15);
+    margin: 0;
+  }
+
+  /* --- Featured --- */
+  .blog-card--featured .blog-card-title {
+    font-size: 36px;
+    line-height: 1.3;
+  }
+
+  /* --- Mobile --- */
+  @media (--mobile) {
+    .blog-header {
+      padding: 4rem 0 2rem;
+    }
+
+    .blog-header :global(h1) {
+      font-size: var(--font-size-title-main-mobile);
+    }
+
+    .blog-header :global(p) {
+      font-size: var(--font-size-subtitle-mobile);
+    }
+
+    .blog-card {
+      flex-direction: column;
+    }
+
+    .blog-card-image img,
+    .blog-card-image--featured img {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16/9;
+    }
+
+    .blog-card--featured .blog-card-title {
+      font-size: var(--font-size-title-section-mobile);
+    }
+
+    .blog-card-title {
+      font-size: var(--font-size-title-section-mobile);
+    }
+  }
+
+  /* --- Tablet --- */
+  @media (--tablet-only) {
+    .blog-header :global(h1) {
+      font-size: var(--font-size-title-main-tablet);
+    }
+
+    .blog-card {
+      flex-direction: column;
+    }
+
+    .blog-card-image img,
+    .blog-card-image--featured img {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16/9;
+    }
   }
 </style>