world-game/src/views/Blog.svelte

<script>
  import Footer from '@components/layout/Footer.svelte'

  let { data } = $props()

  const featured = $derived(data?.featured ?? null)
  const articles = $derived(data?.articles ?? [])
</script>

<section class="blog page-scrollable">
  <div class="page-container">

    <!-- 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 {
    background: #0d0e22;
    color: var(--color-text);
  }

  /* --- Header / Intro --- */
  .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>