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>
This commit is contained in:
isUnknown
parent
2352b621e5
commit
3ab4b21e8c
3 changed files with 258 additions and 28 deletions
|
|
@ -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>
|
||||
<div class="blog__container">
|
||||
<h1>{data?.title || 'Blog'}</h1>
|
||||
<p>Blog view - To be implemented</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.blog {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
background: #0d0e22;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.blog__container {
|
||||
max-width: 1200px;
|
||||
/* --- 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue