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:
parent
42ee58c18d
commit
d4f05d6157
17 changed files with 870 additions and 183 deletions
180
src/styles/collection.css
Normal file
180
src/styles/collection.css
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
/* Shared styles for collection pages (Blog, WhitePapers) */
|
||||
|
||||
/* --- Header / Intro --- */
|
||||
.collection-header {
|
||||
text-align: center;
|
||||
padding: 6rem 0 3rem;
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.collection-header h1 {
|
||||
font-size: var(--font-size-title-main);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.collection-header p {
|
||||
font-size: var(--font-size-subtitle);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.collection-header :global(h1) {
|
||||
font-family: "Terminal", sans-serif;
|
||||
font-size: var(--font-size-title-main);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.collection-header :global(p) {
|
||||
font-size: var(--font-size-subtitle);
|
||||
line-height: 1.6;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* --- Card --- */
|
||||
.collection-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.collection-card-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.collection-card-date {
|
||||
color: #d9d9d9;
|
||||
font-size: var(--font-size-paragraph);
|
||||
}
|
||||
|
||||
.collection-card-title {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: 40px;
|
||||
max-width: 80%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.collection-card-title a {
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.collection-card-title a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.collection-card-description {
|
||||
color: #d9d9d9;
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.collection-card-readmore {
|
||||
color: var(--color-primary);
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.collection-card-readmore .arrow {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* --- Image --- */
|
||||
.collection-card-image img {
|
||||
width: 300px;
|
||||
height: 169px;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.collection-card-image img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.collection-card-image--featured img {
|
||||
width: auto;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* --- Divider --- */
|
||||
.collection-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Featured --- */
|
||||
.collection-card--featured .collection-card-title {
|
||||
font-size: 36px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* --- Loading --- */
|
||||
.collection-loading {
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* --- Mobile --- */
|
||||
@media (max-width: 700px) {
|
||||
.collection-header {
|
||||
padding: 4rem 0 2rem;
|
||||
}
|
||||
|
||||
.collection-header :global(h1) {
|
||||
font-size: var(--font-size-title-main-mobile);
|
||||
}
|
||||
|
||||
.collection-header :global(p) {
|
||||
font-size: var(--font-size-subtitle-mobile);
|
||||
}
|
||||
|
||||
.collection-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.collection-card-image img,
|
||||
.collection-card-image--featured img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.collection-card--featured .collection-card-title {
|
||||
font-size: var(--font-size-title-section-mobile);
|
||||
}
|
||||
|
||||
.collection-card-title {
|
||||
font-size: var(--font-size-title-section-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Tablet --- */
|
||||
@media (min-width: 701px) and (max-width: 912px) {
|
||||
.collection-header :global(h1) {
|
||||
font-size: var(--font-size-title-main-tablet);
|
||||
}
|
||||
|
||||
.collection-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.collection-card-image img,
|
||||
.collection-card-image--featured img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,3 +65,7 @@
|
|||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
.pixel {
|
||||
font-family: "Terminal", sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@import './reset.css';
|
||||
@import './fonts.css';
|
||||
@import './layout.css';
|
||||
@import './collection.css';
|
||||
@import './buttons.css';
|
||||
@import './cursor.css';
|
||||
@import './utils.css';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue