gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
app/pages/design-system.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<div class="ds-preview">
<DsHeading class="titre" as="h1" size="">Design du site internet de l'Orchestre National d'Île-de-France</DsHeading>
<DsHeading class="centrer" as="h1" tone="brand_rouge" size="">TYPOGRAPHIE</DsHeading>
<div class="category">
<DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Roboto Flex (police par défaut des titres)</DsHeading>
<DsHeading as="h1" size="">Titres niveau 1 (h1) Roboto extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" size="">Titres niveau 2 (h2) Roboto bold Taille xl/32px</DsHeading>
<DsHeading as="h3" size="">Titres niveau 3 (h3) Roboto semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" size="">Titre de carte niveau 4 (h4) Roboto black Taille lg2/30px</DsHeading>
<DsHeading as="h5" size="">Titres de carte niveau 5 (h5) Roboto medium Taille md2/23px</DsHeading>
<DsHeading as="h6" size="">Titres de carte niveau 6 (h6) Roboto extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Brandon</DsHeading>
<DsHeading as="h1" font="brandon" size="">Titres niveau 1 (h1) Brandon extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" font="brandon" size="">Titres niveau 2 (h2) Brandon bold Taille xl/32px</DsHeading>
<DsHeading as="h3" font="brandon" size="">Titres niveau 3 (h3) Brandon semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" font="brandon" size="">Titres de carte niveau 4 (h4) Brandon black Taille lg2/30px</DsHeading>
<DsHeading as="h5" font="brandon" size="">Titres de carte niveau 5 (h5) Brandon medium Taille md2/23px</DsHeading>
<DsHeading as="h6" font="brandon" size="">Titres de carte niveau 6 (h6) Brandon extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3" font="barlow" size="">Les titres avec la police Barlow</DsHeading>
<DsHeading as="h1" font="barlow" size="">Titres niveau 1 (h1) Barlow extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" font="barlow" size="">Titres niveau 2 (h2) Barlow bold Taille xl/32px</DsHeading>
<DsHeading as="h3" font="barlow" size="">Titres niveau 3 (h3) Barlow semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" font="barlow" size="">Titres de carte niveau 4 (h4) Barlow black Taille lg2/30px</DsHeading>
<DsHeading as="h5" font="barlow" size="">Titres de carte niveau 5 (h5) Barlow medium Taille md2/23px</DsHeading>
<DsHeading as="h6" font="barlow" size="">Titres de carte niveau 6 (h6) Barlow extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3">Les textes</DsHeading>
<DsText as="p" tone="brand_rouge">
Texte standard police Roboto Flex / Taille 16px / couleur rouge ONDIF: info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" font="brandon">
Texte police Brandon / Taille 16px : info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" font="barlow">
Texte police Barlow / Taille 16px : info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" :clamp="2">
Texte police Roboto Flex / Taille 16px / clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
</DsText>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3">Carte concert</DsHeading>
<DsText as="p" tone="brand_rouge">
Pour les endroits où il y a une liste de concert page d'accueil, page agenda, page saison...
</DsText>
<br>
<hr>
<br>
<ConcertCard
id="1"
title="TITRE DU CONCERT EN MAJUSCULE"
venue="Nom du lieu, éventuellement de la salle"
dateISO="2026-01-15T20:30:00+01:00"
dateLabel="Jeudi 15 janvier 2026 — 20h30"
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
imageUrl="https://picsum.photos/id/56/500/700"
imageAlt="Orchestre sur scène"
ctaHref="/concert[id]"
detailsHref="/concerts/concert_template"
/>
</div>
</div>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
</script>
<style lang="scss">
.ds-preview {
display: grid;
//gap: var(--sp-4);
padding: var(--sp-48);
justify-content: center;
}
.titre {
justify-self: center;
margin-bottom: 50px;
}
.category {
max-width: 1000px;
justify-self: flex-start;
margin-bottom: 30px;
padding: 40px;
border-radius: 14px;
}
.centrer {
justify-self: center;
margin-bottom: 30px;
}
.rempli {
width: 100%;
background-color: #ebebeb;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 5px;
border-radius: 5px;
}
</style>