Feat: Livres blancs — nouveau template collection + livre blanc individuel
- Blueprints white-papers / white-paper (intro, cover, PDF, date) - Templates PHP + JSON API (liste avec singleSlug, détail avec fileUrl) - Route POST (:any)/(:any)/download pour le téléchargement gated - Panel : entrée white-papers ajoutée au menu après blog - collection.css : styles partagés extraits de Blog (collection-*) - Blog.svelte : classes renommées blog-* → collection-* - WhitePapers.svelte : vue liste, URLs dynamiques via data.uri - WhitePaper.svelte : vue détail deux colonnes + formulaire de téléchargement - i18n : clés white paper (label, form, consentement, statuts) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
42ee58c18d
commit
d4f05d6157
17 changed files with 870 additions and 183 deletions
|
|
@ -106,7 +106,7 @@
|
|||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<section
|
||||
class="blog page-scrollable"
|
||||
class="collection blog page-scrollable"
|
||||
class:golden-grid={!!articleData}
|
||||
bind:this={sectionEl}
|
||||
onclick={handleClick}
|
||||
|
|
@ -119,49 +119,49 @@
|
|||
<div class="page-container">
|
||||
|
||||
{#if data?.intro}
|
||||
<header class="blog-header">
|
||||
<header class="collection-header">
|
||||
{@html data.intro}
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
{#if featured}
|
||||
<article class="blog-card blog-card--featured">
|
||||
<div class="blog-card-text">
|
||||
<time class="blog-card-date">{featured.published}</time>
|
||||
<h2 class="blog-card-title">
|
||||
<article class="collection-card collection-card--featured">
|
||||
<div class="collection-card-text">
|
||||
<time class="collection-card-date">{featured.published}</time>
|
||||
<h2 class="collection-card-title">
|
||||
<a href="/blog/{featured.slug}">{featured.title}</a>
|
||||
</h2>
|
||||
{#if featured.intro}
|
||||
<p class="blog-card-description">{featured.intro}</p>
|
||||
<p class="collection-card-description">{featured.intro}</p>
|
||||
{/if}
|
||||
<a href="/blog/{featured.slug}" class="blog-card-readmore">
|
||||
<a href="/blog/{featured.slug}" class="collection-card-readmore">
|
||||
{t('read_article')} <span class="arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
{#if featured.cover}
|
||||
<div class="blog-card-image blog-card-image--featured">
|
||||
<div class="collection-card-image collection-card-image--featured">
|
||||
<a href="/blog/{featured.slug}">
|
||||
<img src={featured.cover} alt={featured.title} />
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
<hr class="blog-divider" />
|
||||
<hr class="collection-divider" />
|
||||
{/if}
|
||||
|
||||
{#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">
|
||||
<article class="collection-card">
|
||||
<div class="collection-card-text">
|
||||
<time class="collection-card-date">{article.date}</time>
|
||||
<h2 class="collection-card-title">
|
||||
<a href="/blog/{article.slug}">{article.title}</a>
|
||||
</h2>
|
||||
<a href="/blog/{article.slug}" class="blog-card-readmore">
|
||||
<a href="/blog/{article.slug}" class="collection-card-readmore">
|
||||
{t('read_article')} <span class="arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
{#if article.cover}
|
||||
<div class="blog-card-image">
|
||||
<div class="collection-card-image">
|
||||
<a href="/blog/{article.slug}">
|
||||
<img src={article.cover} alt={article.title} />
|
||||
</a>
|
||||
|
|
@ -169,12 +169,12 @@
|
|||
{/if}
|
||||
</article>
|
||||
{#if i < articles.length - 1}
|
||||
<hr class="blog-divider" />
|
||||
<hr class="collection-divider" />
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if articleLoading}
|
||||
<p class="blog-loading">{t('loading')}</p>
|
||||
<p class="collection-loading">{t('loading')}</p>
|
||||
{/if}
|
||||
|
||||
<Footer />
|
||||
|
|
@ -189,178 +189,18 @@
|
|||
padding: 0 50px;
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: none;
|
||||
padding: 0 10%;
|
||||
}
|
||||
|
||||
/* --- 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", sans-serif;
|
||||
font-size: 40px;
|
||||
max-width: 80%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.blog-card-title a {
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.blog-card-title a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.blog-card-description {
|
||||
color: #d9d9d9;
|
||||
font-family: "Danzza",sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.blog-card-readmore {
|
||||
color: var(--color-primary);
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-card-readmore .arrow {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.blog-card-readmore:hover {
|
||||
.collection-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;
|
||||
}
|
||||
|
||||
/* --- Loading --- */
|
||||
.blog-loading {
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* --- Mobile --- */
|
||||
@media (max-width: 700px) {
|
||||
.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 (min-width: 701px) and (max-width: 912px) {
|
||||
.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;
|
||||
.blog {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue