generated from gitea_admin/default
finalisation home page
This commit is contained in:
104
README.md
104
README.md
@@ -1,32 +1,86 @@
|
|||||||
# Stack
|
# Stack
|
||||||
- NUXT
|
- NUXT 4
|
||||||
|
|
||||||
|
# Dev du site en local
|
||||||
|
# NUXT
|
||||||
|
Démarrer NUXT
|
||||||
|
- npm run dev
|
||||||
|
- URL : http://localhost:3000/
|
||||||
|
|
||||||
# Site de développement
|
# Site de développement
|
||||||
|
|
||||||
## URL
|
## URL
|
||||||
https://2025.orchestre-ile.com/
|
https://2025.orchestre-ile.com/
|
||||||
|
|
||||||
## package.json du serveur
|
# TODO
|
||||||
Fichier /var/www/wondif_vue$ more package.json
|
## Serveur web
|
||||||
{
|
Créer un vrai /security.txt (ou /.well-known/security.txt) au lieu de le renvoyer en 404.
|
||||||
"name": "wondif_vue",
|
dans le fichier de conf NGINX /etc/nginx/sites-available$ sudo nano wondif_2025
|
||||||
"type": "module",
|
# Fichier standard optionnel (si tu ne le fournis pas)
|
||||||
"private": true,
|
location = /security.txt { return 404; }
|
||||||
"scripts": {
|
|
||||||
"build": "nuxt build",
|
|
||||||
"dev": "nuxt dev",
|
# Dev
|
||||||
"generate": "nuxt generate",
|
## MEDIAS QUERIES
|
||||||
"preview": "nuxt preview",
|
|
||||||
"start": "node .output/server/index.mjs",
|
@media (max-width: 599px) {
|
||||||
"postinstall": "nuxt prepare"
|
. {
|
||||||
},
|
xxx
|
||||||
"dependencies": {
|
}
|
||||||
"@nuxt/image": "^1.11.0",
|
}
|
||||||
"nuxt": "^4.1.3",
|
@media (min-width: 600px) {
|
||||||
"vue": "^3.5.22",
|
. {
|
||||||
"vue-router": "^4.5.1"
|
xxx
|
||||||
},
|
}
|
||||||
"devDependencies": {
|
}
|
||||||
"sass": "^1.93.2"
|
@media (min-width: 700px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1300px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
. {
|
||||||
|
xxx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
padded: { type: Boolean, default: true }, // padding vertical
|
||||||
|
|
||||||
|
&--padded {
|
||||||
|
padding-top: 30px;
|
||||||
|
padding-bottom: 50px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
4
app/assets/img/icones/agenda_blanc_non_opaque.svg
Normal file
4
app/assets/img/icones/agenda_blanc_non_opaque.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 10H28V27C28 28.6562 26.6562 30 25 30H3C1.34375 30 0 28.6562 0 27V10ZM4 15V17C4 17.55 4.45 18 5 18H7C7.55 18 8 17.55 8 17V15C8 14.45 7.55 14 7 14H5C4.45 14 4 14.45 4 15ZM4 23V25C4 25.55 4.45 26 5 26H7C7.55 26 8 25.55 8 25V23C8 22.45 7.55 22 7 22H5C4.45 22 4 22.45 4 23ZM12 15V17C12 17.55 12.45 18 13 18H15C15.55 18 16 17.55 16 17V15C16 14.45 15.55 14 15 14H13C12.45 14 12 14.45 12 15ZM12 23V25C12 25.55 12.45 26 13 26H15C15.55 26 16 25.55 16 25V23C16 22.45 15.55 22 15 22H13C12.45 22 12 22.45 12 23ZM20 15V17C20 17.55 20.45 18 21 18H23C23.55 18 24 17.55 24 17V15C24 14.45 23.55 14 23 14H21C20.45 14 20 14.45 20 15ZM20 23V25C20 25.55 20.45 26 21 26H23C23.55 26 24 25.55 24 25V23C24 22.45 23.55 22 23 22H21C20.45 22 20 22.45 20 23Z" fill="white"/>
|
||||||
|
<path d="M10 2C10 0.89375 9.10625 0 8 0C6.89375 0 6 0.89375 6 2V4H3C1.34375 4 0 5.34375 0 7V10H28V7C28 5.34375 26.6562 4 25 4H22V2C22 0.89375 21.1063 0 20 0C18.8937 0 18 0.89375 18 2V4H10V2Z" fill="#E20018"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
3
app/assets/img/icones/ticket_blanc.svg
Normal file
3
app/assets/img/icones/ticket_blanc.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="23" height="31" viewBox="0 0 23 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22.4958 2.67233C22.59 2.00789 22.1165 1.53441 21.4521 1.43762L17.5622 1.05831C16.9919 1.05831 16.5185 1.43762 16.4243 1.81693C16.045 3.23999 15.1896 4.18957 12.4402 3.99861C9.78247 3.80764 8.55037 2.66972 8.45619 1.24666C8.36202 0.676386 7.88592 0.393866 7.31827 0.297077L3.33422 0.0119418C2.66978 -0.0822314 2.19629 0.39125 2.09951 1.05569L0.012001 28.4784C-0.0821721 29.0487 0.39131 29.6163 0.96158 29.7131L19.1789 30.9478C19.8433 31.042 20.3168 30.5685 20.4136 29.9041L22.5011 2.67233H22.4958ZM11.9641 14.0594L14.2426 14.2504L14.0516 16.5289L11.7732 16.3379L11.9641 14.0594ZM8.26262 13.8685L10.5411 14.0594L10.3501 16.3379L8.07165 16.1469L8.26262 13.8685ZM4.46691 13.5833L6.74538 13.7743L6.55703 16.0528L4.27857 15.8618L4.46691 13.5833ZM17.7506 16.7146L15.4721 16.5236L15.6631 14.2452L17.9389 14.4361L17.7506 16.7146Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 950 B |
3
app/assets/img/icones/ticket_noir.svg
Normal file
3
app/assets/img/icones/ticket_noir.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="23" height="31" viewBox="0 0 23 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22.4958 2.67233C22.59 2.00789 22.1165 1.53441 21.4521 1.43762L17.5622 1.05831C16.9919 1.05831 16.5185 1.43762 16.4243 1.81693C16.045 3.23999 15.1896 4.18957 12.4402 3.99861C9.78247 3.80764 8.55037 2.66972 8.45619 1.24666C8.36202 0.676386 7.88592 0.393866 7.31827 0.297077L3.33422 0.0119418C2.66978 -0.0822314 2.19629 0.39125 2.09951 1.05569L0.012001 28.4784C-0.0821721 29.0487 0.39131 29.6163 0.96158 29.7131L19.1789 30.9478C19.8433 31.042 20.3168 30.5685 20.4136 29.9041L22.5011 2.67233H22.4958ZM11.9641 14.0594L14.2426 14.2504L14.0516 16.5289L11.7732 16.3379L11.9641 14.0594ZM8.26262 13.8685L10.5411 14.0594L10.3501 16.3379L8.07165 16.1469L8.26262 13.8685ZM4.46691 13.5833L6.74538 13.7743L6.55703 16.0528L4.27857 15.8618L4.46691 13.5833ZM17.7506 16.7146L15.4721 16.5236L15.6631 14.2452L17.9389 14.4361L17.7506 16.7146Z" fill="black" fill-opacity="0.85"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 970 B |
@@ -16,35 +16,42 @@
|
|||||||
|
|
||||||
grid-template-rows: 130px auto auto;
|
grid-template-rows: 130px auto auto;
|
||||||
|
|
||||||
@include media_queries.media_max(tablet_700) {
|
@include media_queries.media_max(phone_500) {
|
||||||
|
grid-template-columns: 20px minmax(0, 1fr) 10px;
|
||||||
|
}
|
||||||
|
@include media_queries.media_min(phone_500) {
|
||||||
|
grid-template-columns: 30px minmax(0, 1fr) 10px;
|
||||||
|
}
|
||||||
|
@include media_queries.media_min(tablet_600) {
|
||||||
grid-template-columns: 10px minmax(0, 1fr) 10px;
|
grid-template-columns: 10px minmax(0, 1fr) 10px;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(tablet_700) {
|
@include media_queries.media_min(tablet_700) {
|
||||||
grid-template-columns: 10px minmax(0, 1fr) 10px;
|
grid-template-columns: 30px minmax(0, 1fr) 10px;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(tablet_800) {
|
@include media_queries.media_min(tablet_800) {
|
||||||
grid-template-columns: 10px minmax(0, 1fr) 10px;
|
grid-template-columns: 30px minmax(0, 1fr) 10px;
|
||||||
|
grid-template-rows: 123px auto auto;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(tablet_900) {
|
@include media_queries.media_min(tablet_900) {
|
||||||
grid-template-columns: 15px minmax(0, 1fr) 15px;
|
grid-template-columns: 35px minmax(0, 1fr) 15px;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1000) {
|
@include media_queries.media_min(desktop_1000) {
|
||||||
grid-template-columns: auto 980px auto;
|
grid-template-columns: auto 930px auto;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1100) {
|
@include media_queries.media_min(desktop_1100) {
|
||||||
grid-template-columns: auto 1090px auto;
|
grid-template-columns: auto 1000px auto;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1200) {
|
@include media_queries.media_min(desktop_1200) {
|
||||||
grid-template-columns: auto 1160px auto;
|
grid-template-columns: auto 1100px auto;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1300) {
|
@include media_queries.media_min(desktop_1300) {
|
||||||
grid-template-columns: 1fr 1250px 1fr;
|
grid-template-columns: 1fr 1200px 1fr;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1500) {
|
@include media_queries.media_min(desktop_1500) {
|
||||||
grid-template-columns: 1fr 1420px 1fr;
|
grid-template-columns: 1fr 1400px 1fr;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1800) {
|
@include media_queries.media_min(desktop_1800) {
|
||||||
grid-template-columns: 1fr 1700px 1fr;
|
grid-template-columns: 1fr 1410px 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -4,8 +4,10 @@
|
|||||||
.header_navigation_topbar {
|
.header_navigation_topbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
font-family: 'brandontext_regular';
|
//font-family: 'brandontext_regular';
|
||||||
|
font-family: var(--font-roboto);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
.header_nav_topbar_item {
|
.header_nav_topbar_item {
|
||||||
@@ -46,7 +48,8 @@
|
|||||||
|
|
||||||
.header_nav_topbar_submenu_item {
|
.header_nav_topbar_submenu_item {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-family: 'brandontext_regular';
|
//font-family: 'brandontext_regular';
|
||||||
|
font-family: var(--font-roboto);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -131,11 +134,11 @@
|
|||||||
}
|
}
|
||||||
@include media_queries.media_min(tablet_800) {
|
@include media_queries.media_min(tablet_800) {
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
margin-right: 25px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(tablet_900) {
|
@include media_queries.media_min(tablet_900) {
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
margin-right: 30px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media_queries.media_max(tablet_700) {
|
@include media_queries.media_max(tablet_700) {
|
||||||
@@ -157,7 +160,8 @@
|
|||||||
|
|
||||||
text-wrap-mode: nowrap;
|
text-wrap-mode: nowrap;
|
||||||
|
|
||||||
font-family: 'brandontext_regular';
|
//font-family: 'brandontext_regular';
|
||||||
|
font-family: var(--font-roboto);
|
||||||
|
|
||||||
@include media_queries.media_min(tablet_600) {
|
@include media_queries.media_min(tablet_600) {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@@ -172,7 +176,7 @@
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1800) {
|
@include media_queries.media_min(desktop_1800) {
|
||||||
font-size: 26px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_nav_item {
|
.header_nav_item {
|
||||||
@@ -205,7 +209,7 @@
|
|||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1800) {
|
@include media_queries.media_min(desktop_1800) {
|
||||||
margin-right: 34px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
@@ -222,18 +226,19 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
|
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-left: 9px;
|
padding-left: 25px;
|
||||||
padding-right: 16px;
|
padding-right: 22px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 10px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background-color: rgba(255, 255, 255, 0.93);
|
background-color: rgba(255, 255, 255, 0.93);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
.header_nav_sub_menu_item {
|
.header_nav_sub_menu_item {
|
||||||
list-style: none;
|
list-style: circle;
|
||||||
font-family: 'brandontext_regular';
|
//font-family: 'brandontext_regular';
|
||||||
|
font-family: var(--font-roboto);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 4px;
|
||||||
&:hover {
|
&:hover {
|
||||||
a {
|
a {
|
||||||
color: var(--c-brand_rouge);
|
color: var(--c-brand_rouge);
|
||||||
@@ -262,7 +267,7 @@
|
|||||||
width: 83%;
|
width: 83%;
|
||||||
}
|
}
|
||||||
@include media_queries.media_min(desktop_1800) {
|
@include media_queries.media_min(desktop_1800) {
|
||||||
width: 100%;
|
width: 83%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -297,7 +302,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Par défaut : desktop visible, mobile caché */
|
/* Par défaut : desktop visible, mobile caché */
|
||||||
.header_nav--desktop { display: flex; }
|
.header_nav--desktop { display: flex; align-items: center;}
|
||||||
.header_nav--mobile { display: none; }
|
.header_nav--mobile { display: none; }
|
||||||
.header_nav--mobile-icons { display: none; }
|
.header_nav--mobile-icons { display: none; }
|
||||||
.header_drawer { display: none; }
|
.header_drawer { display: none; }
|
||||||
@@ -319,7 +324,7 @@
|
|||||||
}
|
}
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-top: -23px;
|
margin-top: -23px;
|
||||||
margin-right: 60px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger_black {
|
.hamburger_black {
|
||||||
@@ -386,7 +391,7 @@
|
|||||||
background-color: rgba(0, 0, 0, 0.9);
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
margin-top: 47px;
|
margin-top: 47px;
|
||||||
|
|
||||||
|
font-family: var(--font-roboto);
|
||||||
|
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
@@ -405,6 +410,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header_drawer_link {
|
.header_drawer_link {
|
||||||
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $blanc;
|
color: $blanc;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
@@ -434,19 +440,22 @@
|
|||||||
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
|
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
padding-top: 10px;
|
padding-top: 13px;
|
||||||
padding-left: 9px;
|
padding-left: 23px;
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 10px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background-color: rgba(255, 255, 255, 0.93);
|
background-color: rgba(255, 255, 255, 0.93);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
.header_drawer_sub_menu_item {
|
.header_drawer_sub_menu_item {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-family: 'brandontext_regular';
|
//font-family: 'brandontext_regular';
|
||||||
|
font-family: var(--font-roboto);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 4px;
|
||||||
|
list-style: circle;
|
||||||
|
color: var(--c-text);
|
||||||
&:hover {
|
&:hover {
|
||||||
a {
|
a {
|
||||||
color: var(--c-brand_rouge);
|
color: var(--c-brand_rouge);
|
||||||
|
|||||||
@@ -2,17 +2,17 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
transform: translateZ(0);
|
//transform: translateZ(0);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orb {
|
.orb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
filter: blur(3px);
|
//filter: blur(3px);
|
||||||
opacity: 0.30;
|
opacity: 0.5;
|
||||||
will-change: transform;
|
//will-change: transform;
|
||||||
transform: translate3d(0,0,0);
|
//transform: translate3d(0,0,0);
|
||||||
|
|
||||||
//background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
|
//background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
|
||||||
background: red;
|
background: red;
|
||||||
@@ -21,12 +21,12 @@
|
|||||||
.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
|
.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
|
||||||
.orb--2 { width: 320px; height: 320px; top: 6%; left: 72%; animation: orb2 6s ease-in-out infinite alternate; }
|
.orb--2 { width: 320px; height: 320px; top: 6%; left: 72%; animation: orb2 6s ease-in-out infinite alternate; }
|
||||||
|
|
||||||
@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
|
//@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
|
||||||
@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
|
//@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
|
||||||
@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
|
//@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
|
||||||
@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
|
//@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
|
||||||
@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
|
//@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
|
||||||
@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
|
//@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.orb { animation: none !important; }
|
.orb { animation: none !important; }
|
||||||
|
|||||||
266
app/components/BannierePros.vue
Normal file
266
app/components/BannierePros.vue
Normal file
@@ -0,0 +1,266 @@
|
|||||||
|
<!-- Utilisé pour : -->
|
||||||
|
<!-- Index.vue / Encart PROS bas de page -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="banniere_pros_wp">
|
||||||
|
<div class="studio_img">
|
||||||
|
<DsMedia src="/contenus/studio_img_1.webp" alt="Image du studio pro" ratio="16-9" />
|
||||||
|
</div>
|
||||||
|
<div class="banniere_pros--description studio_description">
|
||||||
|
<div>
|
||||||
|
<img src="/img/logos/logo_le_studio_noir.png" alt="Logo du studio pro" width="200">
|
||||||
|
</div>
|
||||||
|
<DsHeading as="h5" tone="default" class="banniere_pros--description--titre">
|
||||||
|
On enregistre au studio !
|
||||||
|
</DsHeading>
|
||||||
|
<DsText as="p" tone="default" :clamp="3">
|
||||||
|
Un grand studio modulaire ouvert à tous les professionnels aux portes de Paris
|
||||||
|
</DsText>
|
||||||
|
</div>
|
||||||
|
<div class="parc_img">
|
||||||
|
<DsMedia src="/contenus/studio_img_2.webp" alt="Image du studio pro" ratio="16-9" />
|
||||||
|
</div>
|
||||||
|
<div class="banniere_pros--description parc_description">
|
||||||
|
<div>
|
||||||
|
<img src="/img/logos/logo_le_parc_noir.png" alt="Logo du parc instrumental pro" width="150">
|
||||||
|
</div>
|
||||||
|
<DsHeading as="h5" tone="default" class="banniere_pros--description--titre">
|
||||||
|
+ de 3 000 instruments en location
|
||||||
|
</DsHeading>
|
||||||
|
<DsText as="p" tone="default" :clamp="3">
|
||||||
|
Location d’instruments de musique pour les professionnels et les amateurs
|
||||||
|
</DsText>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||||
|
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||||
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.banniere_pros_wp {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
row-gap: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 399px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 30px 240px;
|
||||||
|
grid-template-rows: 130px 60px 130px 42px 111px 70px 140px;
|
||||||
|
//justify-content: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 80px 290px;
|
||||||
|
grid-template-rows: 150px 60px 130px 42px 170px 70px 140px;
|
||||||
|
//justify-content: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 150px 270px 40px 40px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
//justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 220px 250px 40px 40px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
//justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 220px 250px 40px 40px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
//justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 100px 190px 20px 40px 110px 140px 160px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 130px 190px 40px 30px 160px 130px 169px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 160px 200px 90px 50px 160px 150px 150px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 200px 200px 100px 50px 200px 150px 150px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 230px 200px 100px 50px 230px 150px 150px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1300px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 270px 200px 100px 50px 270px 150px 150px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
.banniere_pros_wp {
|
||||||
|
grid-template-columns: 320px 200px 100px 50px 320px 150px 150px;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
.ds-media--16-9 {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* IMAGES */
|
||||||
|
.studio_img {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-row: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
.studio_img {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-row: 1/2;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parc_img {
|
||||||
|
grid-column: 4 / 7;
|
||||||
|
grid-row: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
@media (max-width: 799px) {
|
||||||
|
.parc_img {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-row: 2;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
.parc_img {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-row: 5/6;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DESCRIPTIONS (au-dessus des images) */
|
||||||
|
.studio_description {
|
||||||
|
grid-column: 2 / 5;
|
||||||
|
grid-row: 1;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
.studio_description {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2/4;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parc_description {
|
||||||
|
grid-column: 6 / 8;
|
||||||
|
grid-row: 1;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
@media (max-width: 799px) {
|
||||||
|
.parc_description {
|
||||||
|
grid-column: 2 / 5;
|
||||||
|
grid-row: 2;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
.parc_description {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 6/8;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banniere_pros--description {
|
||||||
|
background-color: var(--c-background-blanc-casse);
|
||||||
|
padding: 17px;
|
||||||
|
max-height: 170px;
|
||||||
|
&--titre {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
242
app/components/FilteredCards.vue
Normal file
242
app/components/FilteredCards.vue
Normal file
@@ -0,0 +1,242 @@
|
|||||||
|
<!-- Utilisé pour : -->
|
||||||
|
<!-- Index.vue / Tous à l'orchestre -->
|
||||||
|
|
||||||
|
<!-- Permet de filtrer des contenus grâce à des boutons -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<!-- FILTRES -->
|
||||||
|
<SectionContent pad="xs" class="theme_tao--filters" role="tablist">
|
||||||
|
<DsButton
|
||||||
|
v-for="f in filters"
|
||||||
|
:key="f.key"
|
||||||
|
textColor="invert"
|
||||||
|
size="aplati"
|
||||||
|
borderColor="invert"
|
||||||
|
:aria-pressed="activeFilter === f.key"
|
||||||
|
:class="{ 'is-active': activeFilter === f.key }"
|
||||||
|
@click="activeFilter = f.key"
|
||||||
|
>
|
||||||
|
{{ f.label }}
|
||||||
|
</DsButton>
|
||||||
|
</SectionContent>
|
||||||
|
|
||||||
|
<!-- CARTES HORIZONTALES -->
|
||||||
|
<SectionContent class="theme_tao--cardlist">
|
||||||
|
<HorizontalCards
|
||||||
|
aria-label="Posts Instagram ONDIF"
|
||||||
|
hint-key="tao-cardlist-hint-seen"
|
||||||
|
:peek="30"
|
||||||
|
:fade-width="64"
|
||||||
|
:reset-key="activeFilter"
|
||||||
|
reset-behavior="smooth"
|
||||||
|
:reset-delay-ms="0"
|
||||||
|
>
|
||||||
|
|
||||||
|
<DsCard
|
||||||
|
v-for="card in filteredCards"
|
||||||
|
:key="card.id"
|
||||||
|
class="theme_tao--cardlist--card"
|
||||||
|
>
|
||||||
|
<div class="theme_tao--cardlist--card--wp">
|
||||||
|
<!-- Image -->
|
||||||
|
<div class="theme_tao--cardlist--card--img">
|
||||||
|
<NuxtImg :src="card.imgSrc" :alt="card.imgAlt" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="theme_tao--cardlist--card--content">
|
||||||
|
<DsHeading as="h5" tone="default">
|
||||||
|
{{ card.title }}
|
||||||
|
</DsHeading>
|
||||||
|
|
||||||
|
<DsText as="p" tone="default" :clamp="6">
|
||||||
|
<span v-html="card.descriptionHtml" />
|
||||||
|
</DsText>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DsCard>
|
||||||
|
|
||||||
|
</HorizontalCards>
|
||||||
|
</SectionContent>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
import { ref, computed, watch, nextTick } from 'vue'
|
||||||
|
import DsCard from '@root/design-system/components/DsCard.vue'
|
||||||
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||||
|
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
||||||
|
import SectionContent from '../components/section/SectionContent.vue'
|
||||||
|
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------
|
||||||
|
// Filtres
|
||||||
|
//--------------------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Variable qui contient les catégories qui permettront de filtrer
|
||||||
|
const filters = [
|
||||||
|
{ key: 'famille', label: 'Famille' },
|
||||||
|
{ key: 'lieux', label: 'Lieux' },
|
||||||
|
{ key: 'ateliers', label: 'Ateliers' },
|
||||||
|
{ key: 'musique', label: 'Musique' },
|
||||||
|
]
|
||||||
|
// variable pour donner le filtre actif
|
||||||
|
// filtre par défaut : le premier
|
||||||
|
const activeFilter = ref(filters[0].key)
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------
|
||||||
|
// CONTENUS DES CARTES
|
||||||
|
//--------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const cards = ref([
|
||||||
|
{
|
||||||
|
id: 'insta-1',
|
||||||
|
imgSrc: '/contenus/insta_ondif_1.jpg',
|
||||||
|
imgAlt: 'le titre du post',
|
||||||
|
title: "[Y'A PAS QUE LES ÂNES QUI MANGENT DU SON]",
|
||||||
|
descriptionHtml: `Tu as moins de 28 ans ? Paie 6 € la place dès 3 concerts de l’Orchestre à la Philharmonie de Paris<br>
|
||||||
|
🔴 Ile de France | Ministère de la culture<br>
|
||||||
|
🎨 Agence belleville.eu`,
|
||||||
|
tags: ['musique','famille'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'insta-2',
|
||||||
|
imgSrc: '/contenus/insta_ondif_2.jpg',
|
||||||
|
imgAlt: 'le titre du post',
|
||||||
|
title: "✨ Tous à l’orchestre ! Un début de saison qui fait vibrer l’Ondif 🎶",
|
||||||
|
descriptionHtml: `Des lycéens conquis par Rachmaninov aux premières rencontres à Montereau, des petites oreilles émerveillées aux ateliers de Marly-la-Ville, sans oublier la musique portée jusqu'aux hôpitaux.<br>
|
||||||
|
Et plus de 250 choristes rassemblés pour le "Chantons avec" Alice Swing !<br>
|
||||||
|
Quelle énergie ❤️`,
|
||||||
|
tags: ['famille', 'ateliers', 'musique', 'lieux'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'insta-3',
|
||||||
|
imgSrc: '/contenus/insta_ondif_3.jpg',
|
||||||
|
imgAlt: 'le titre du post',
|
||||||
|
title: "L'Orchestre en résidence à Montereau",
|
||||||
|
descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
|
||||||
|
tags: ['lieux', 'ateliers', 'famille'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'insta-3',
|
||||||
|
imgSrc: '/contenus/insta_ondif_3.jpg',
|
||||||
|
imgAlt: 'le titre du post',
|
||||||
|
title: "L'Orchestre en résidence à Montereau",
|
||||||
|
descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
|
||||||
|
tags: ['lieux', 'ateliers', 'famille'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'insta-3',
|
||||||
|
imgSrc: '/contenus/insta_ondif_3.jpg',
|
||||||
|
imgAlt: 'le titre du post',
|
||||||
|
title: "L'Orchestre en résidence à Montereau",
|
||||||
|
descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
|
||||||
|
tags: ['lieux', 'ateliers', 'famille'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'insta-3',
|
||||||
|
imgSrc: '/contenus/insta_ondif_3.jpg',
|
||||||
|
imgAlt: 'le titre du post',
|
||||||
|
title: "L'Orchestre en résidence à Montereau",
|
||||||
|
descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
|
||||||
|
tags: ['lieux', 'ateliers', 'famille'],
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------
|
||||||
|
// Computed : cartes filtrées
|
||||||
|
//--------------------------------------------------------------------------
|
||||||
|
const filteredCards = computed(() => {
|
||||||
|
return cards.value.filter(card =>
|
||||||
|
card.tags.includes(activeFilter.value)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.theme_tao {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
&--description {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
&--txt {
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
&--filters {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 10px;
|
||||||
|
row-gap: 14px;
|
||||||
|
.is-active {
|
||||||
|
background-color: var(--c-surface);
|
||||||
|
color: var(--c-backgroud-brandreverse);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--cardlist {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
&--card {
|
||||||
|
background-color: var(--c-surface);
|
||||||
|
border-radius: 10px;
|
||||||
|
//padding: 50px;
|
||||||
|
padding: clamp(18px, 2.4vw, 32px);
|
||||||
|
|
||||||
|
&--wp {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&--img {
|
||||||
|
max-width: 280px;
|
||||||
|
overflow: hidden;
|
||||||
|
img {
|
||||||
|
max-height: 280px;
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
img {
|
||||||
|
max-height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--content {
|
||||||
|
max-width: 320px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--card {
|
||||||
|
/* base: mobile-first */
|
||||||
|
width: clamp(260px, 81vw, 360px);
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(260px, 80vw, 360px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(280px, 63vw, 460px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(280px, 60vw, 460px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(320px, 33vw, 520px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(360px, 28vw, 560px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<NewsletterCta />
|
<NewsletterCta />
|
||||||
<PageSection tone="brand" :padded="false" content-size="default" padt="sm" padb="sm" class="footer">
|
<PageSection tone="brand" content-size="default" padt="sm" padb="sm" class="footer">
|
||||||
<div class="footer--inner">
|
<div class="footer--inner">
|
||||||
<SectionContent pad="xs" class="footer--logo">
|
<SectionContent pad="xs" class="footer--logo">
|
||||||
<NuxtImg :src="logoDefault" :alt="brand.logoAlt" class="logo-img" />
|
<NuxtImg :src="logoDefault" :alt="brand.logoAlt" class="logo-img" />
|
||||||
@@ -26,19 +26,19 @@
|
|||||||
<div class="nav--item nav--social">
|
<div class="nav--item nav--social">
|
||||||
|
|
||||||
<a class="social" href="...">
|
<a class="social" href="...">
|
||||||
<NuxtImg :src="logoInstagram" alt="logo Instagram" height="37" width="37" class="social__icon" />
|
<NuxtImg :src="logoInstagram" alt="logo Instagram" height="30" width="30" class="social__icon" />
|
||||||
<span class="social__label">Instagram</span>
|
<span class="social__label">Instagram</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="social" href="...">
|
<a class="social" href="...">
|
||||||
<NuxtImg :src="logoyt" alt="logo You Tube" height="28" width="37" class="social__icon" />
|
<NuxtImg :src="logoyt" alt="logo You Tube" height="30" width="35" class="social__icon" />
|
||||||
<span class="social__label">YouTube</span>
|
<span class="social__label">YouTube</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="social" href="...">
|
<a class="social" href="...">
|
||||||
<NuxtImg :src="logofacebook" alt="logo Facebook" height="37" width="35" class="social__icon" />
|
<NuxtImg :src="logofacebook" alt="logo Facebook" height="30" width="28" class="social__icon" />
|
||||||
<span class="social__label">Facebook</span>
|
<span class="social__label">Facebook</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="social" href="...">
|
<a class="social" href="...">
|
||||||
<NuxtImg :src="logolinkedin" alt="logo LinkedIn" height="37" width="37" class="social__icon" />
|
<NuxtImg :src="logolinkedin" alt="logo LinkedIn" height="30" width="30" class="social__icon" />
|
||||||
<span class="social__label">LinkedIn</span>
|
<span class="social__label">LinkedIn</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@@ -51,7 +51,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
<PageSection :padded="false" content-size="default" padt="sm" padb="sm">
|
<PageSection content-size="default" padt="sm" padb="sm">
|
||||||
<SectionContent>
|
<SectionContent>
|
||||||
<div class="footer_logos">
|
<div class="footer_logos">
|
||||||
<div><img class="footer_logos--img" :src="logoPrefet" height="80" alt="logo Préfet de la région d'Île-de-France" /></div>
|
<div><img class="footer_logos--img" :src="logoPrefet" height="80" alt="logo Préfet de la région d'Île-de-France" /></div>
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</SectionContent>
|
</SectionContent>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
<PageSection :padded="false" content-size="default" padt="sm" padb="sm">
|
<PageSection content-size="default" padt="sm" padb="sm">
|
||||||
<SectionContent>
|
<SectionContent>
|
||||||
<div class="footer_mentions">
|
<div class="footer_mentions">
|
||||||
<div class="footer_mentions--item">© Orchestre national d’Île-de-France - 2026</div>
|
<div class="footer_mentions--item">© Orchestre national d’Île-de-France - 2026</div>
|
||||||
@@ -145,7 +145,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: rgb(255 255 255 / 83%);
|
background-color: rgb(255 255 255 / 60%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
303
app/components/HorizontalCards.vue
Normal file
303
app/components/HorizontalCards.vue
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
<!-- app/components/HorizontalCards.vue -->
|
||||||
|
<!-- Faire défiler des cartes qui se déplacent horizontalement -->
|
||||||
|
<!-- Les cartes sont dans le composant qui appelle celui-çi, donc cela vaut pour tous types de cartes-->
|
||||||
|
<template>
|
||||||
|
<!-- Root: classe is-scrolled pour piloter fade + hint -->
|
||||||
|
<div
|
||||||
|
class="hc"
|
||||||
|
:class="[
|
||||||
|
rootClass,
|
||||||
|
{ 'is-scrolled': hasScrolled }
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<!-- Optional title slot -->
|
||||||
|
<div v-if="$slots.title" class="hc__header">
|
||||||
|
<slot name="title" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hint icon (micro affordance) -->
|
||||||
|
<div v-if="showHint" class="hc__hint" aria-hidden="true">
|
||||||
|
<span class="hc__hint-icon">{{ hintIcon }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="showHint" class="hc__hint--left" aria-hidden="true">
|
||||||
|
<span class="hc__hint-icon">{{ hintIcon }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scroller -->
|
||||||
|
<div
|
||||||
|
ref="scroller"
|
||||||
|
class="hc__scroller"
|
||||||
|
:class="scrollerClass"
|
||||||
|
tabindex="0"
|
||||||
|
role="region"
|
||||||
|
:aria-label="ariaLabel"
|
||||||
|
@scroll.passive="onScroll"
|
||||||
|
>
|
||||||
|
<div class="hc__track" :class="trackClass">
|
||||||
|
<!-- Cards -->
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, onBeforeUnmount, ref, computed, watch, nextTick } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
ariaLabel: { type: String, default: 'Horizontal content' },
|
||||||
|
|
||||||
|
/** Active l’animation "nudge" une seule fois (localStorage) */
|
||||||
|
nudgeOnce: { type: Boolean, default: true },
|
||||||
|
hintKey: { type: String, default: 'horizontal-cards-hint-seen' },
|
||||||
|
|
||||||
|
/** Nudge settings */
|
||||||
|
nudgePx: { type: Number, default: 48 },
|
||||||
|
nudgeDelayMs: { type: Number, default: 350 },
|
||||||
|
nudgeReturnDelayMs: { type: Number, default: 450 },
|
||||||
|
|
||||||
|
/** UI affordances */
|
||||||
|
showHint: { type: Boolean, default: true },
|
||||||
|
hintIcon: { type: String, default: '⇆' },
|
||||||
|
|
||||||
|
/** Peek: % de padding-right du scroller pour montrer la carte suivante */
|
||||||
|
peek: { type: Number, default: 30 }, // 25–40 conseillé
|
||||||
|
|
||||||
|
/** Fade (px) : largeur du dégradé */
|
||||||
|
fadeWidth: { type: Number, default: 64 },
|
||||||
|
|
||||||
|
/** Classes hooks */
|
||||||
|
rootClass: { type: [String, Array, Object], default: '' },
|
||||||
|
scrollerClass: { type: [String, Array, Object], default: '' },
|
||||||
|
trackClass: { type: [String, Array, Object], default: '' },
|
||||||
|
|
||||||
|
// Reset scroll (ex: changement de filtre)
|
||||||
|
resetKey: { type: [String, Number], default: null },
|
||||||
|
resetBehavior: { type: String, default: 'smooth' }, // 'smooth' ou 'auto'
|
||||||
|
resetDelayMs: { type: Number, default: 0 },
|
||||||
|
})
|
||||||
|
|
||||||
|
const scroller = ref(null)
|
||||||
|
const hasScrolled = ref(false)
|
||||||
|
|
||||||
|
let t = null
|
||||||
|
|
||||||
|
const cssVars = computed(() => ({
|
||||||
|
'--hc-peek': `${props.peek}%`,
|
||||||
|
'--hc-fade-w': `${props.fadeWidth}px`
|
||||||
|
}))
|
||||||
|
|
||||||
|
const markSeen = () => {
|
||||||
|
try { localStorage.setItem(props.hintKey, '1') } catch (_) {}
|
||||||
|
}
|
||||||
|
const isSeen = () => {
|
||||||
|
try { return localStorage.getItem(props.hintKey) === '1' } catch (_) { return true }
|
||||||
|
}
|
||||||
|
|
||||||
|
const onScroll = () => {
|
||||||
|
if (!hasScrolled.value) {
|
||||||
|
hasScrolled.value = true
|
||||||
|
markSeen()
|
||||||
|
}
|
||||||
|
if (t) clearTimeout(t)
|
||||||
|
t = setTimeout(() => {}, 80)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const el = scroller.value
|
||||||
|
if (!el) return
|
||||||
|
|
||||||
|
// Inject vars on root element
|
||||||
|
// (Vue n’aime pas style binding + class binding sur le root via computed uniquement,
|
||||||
|
// donc on set ici pour être sûr)
|
||||||
|
el.closest('.hc')?.style?.setProperty('--hc-peek', `${props.peek}%`)
|
||||||
|
el.closest('.hc')?.style?.setProperty('--hc-fade-w', `${props.fadeWidth}px`)
|
||||||
|
|
||||||
|
if (!props.nudgeOnce) return
|
||||||
|
if (isSeen()) return
|
||||||
|
|
||||||
|
const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches
|
||||||
|
if (reduce) return
|
||||||
|
|
||||||
|
const canScroll = el.scrollWidth > el.clientWidth + 4
|
||||||
|
if (!canScroll) return
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
el.scrollBy({ left: props.nudgePx, behavior: 'smooth' })
|
||||||
|
setTimeout(() => {
|
||||||
|
el.scrollBy({ left: -props.nudgePx, behavior: 'smooth' })
|
||||||
|
markSeen()
|
||||||
|
}, props.nudgeReturnDelayMs)
|
||||||
|
}, props.nudgeDelayMs)
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (t) clearTimeout(t)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Pour revenir à la première carte sur changement de filtre
|
||||||
|
const resetToStart = async () => {
|
||||||
|
const el = scroller.value
|
||||||
|
if (!el) return
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
|
||||||
|
// Important : si tu changes le contenu + transition, un petit délai peut aider
|
||||||
|
const run = () => el.scrollTo({ left: 0, behavior: props.resetBehavior })
|
||||||
|
|
||||||
|
if (props.resetDelayMs > 0) {
|
||||||
|
setTimeout(run, props.resetDelayMs)
|
||||||
|
} else {
|
||||||
|
run()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.resetKey,
|
||||||
|
(nv, ov) => {
|
||||||
|
// si c’est la première fois (ov === null) tu peux choisir de reset ou pas
|
||||||
|
if (nv === ov) return
|
||||||
|
resetToStart()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
/* ==========================================================================
|
||||||
|
HorizontalCards (no lib)
|
||||||
|
- scroll-snap
|
||||||
|
- peek (last card cut)
|
||||||
|
- fade right
|
||||||
|
- hint icon
|
||||||
|
- nudge once (JS minimal)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.hc {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/* Vars (fallbacks) */
|
||||||
|
--hc-peek: 30%;
|
||||||
|
--hc-fade-w: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title slot */
|
||||||
|
.hc__header {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hint icon */
|
||||||
|
.hc__hint {
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 180ms ease, transform 180ms ease;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.hc__hint--left {
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 180ms ease, transform 180ms ease;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hc__hint-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroller */
|
||||||
|
.hc__scroller {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
scroll-snap-type: x mandatory;
|
||||||
|
|
||||||
|
// Cacher la barre de défilement horizontal
|
||||||
|
/* Firefox */
|
||||||
|
scrollbar-width: none;
|
||||||
|
/* IE / Edge legacy */
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
/* WebKit (Chrome, Safari, Edge Chromium) */
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ✅ peek */
|
||||||
|
padding: 0.25rem var(--hc-peek) 0.25rem 0;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
/* Fade right */
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: var(--hc-fade-w);
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
background: linear-gradient(
|
||||||
|
to left,
|
||||||
|
rgb(172 207 207 / 59%),
|
||||||
|
rgba(172, 207, 207, 0)
|
||||||
|
);
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 180ms ease;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid currentColor;
|
||||||
|
outline-offset: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
.hc__track {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Snap + “rail-friendly” defaults for children */
|
||||||
|
.hc__track > * {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* After first scroll: calm UI */
|
||||||
|
.hc.is-scrolled {
|
||||||
|
.hc__hint, .hc__hint--left {
|
||||||
|
background: rgba(172, 207, 207, 0.9);
|
||||||
|
//opacity: 0;
|
||||||
|
transform: translateY(-50%) scale(0.96);
|
||||||
|
}
|
||||||
|
.hc__scroller::after {
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="newslettercta">
|
<div class="newslettercta">
|
||||||
<PageSection tone="brandreverse" :padded="false" content-size="default" padb="xs">
|
<PageSection tone="brandreverse" content-size="default" padb="xs">
|
||||||
<SectionTitle as="h1" tone="invert" pad="xs">
|
<SectionTitle as="h1" tone="invert" pad="xs">
|
||||||
NEWSLETTER
|
NEWSLETTER
|
||||||
</SectionTitle>
|
</SectionTitle>
|
||||||
@@ -42,10 +42,8 @@
|
|||||||
.newslettercta__content {
|
.newslettercta__content {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
row-gap: 15px;
|
row-gap: 15px;
|
||||||
column-gap: 15px;
|
column-gap: 25px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
|
||||||
.newslettercta__content_text {
|
.newslettercta__content_text {
|
||||||
@@ -53,12 +51,18 @@
|
|||||||
}
|
}
|
||||||
.newslettercta__button {
|
.newslettercta__button {
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
justify-self: start;
|
justify-self: center;
|
||||||
|
}
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
.newslettercta__button {
|
||||||
|
justify-self: center;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 300px) {
|
@media (max-width: 300px) {
|
||||||
.newslettercta__content {
|
.newslettercta__content {
|
||||||
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
|
padding-left: calc(var(--sp-45) - 20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (min-width: 500px) {
|
@media (min-width: 500px) {
|
||||||
|
|||||||
75
app/components/SquareCard.vue
Normal file
75
app/components/SquareCard.vue
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<DsCard class="square-card">
|
||||||
|
<div class="square-card__grid">
|
||||||
|
<!-- Image -->
|
||||||
|
<div class="square-card__media">
|
||||||
|
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="square-card__content">
|
||||||
|
<DsHeading as="h5" tone="default" class="square-card__title">
|
||||||
|
{{ title }}
|
||||||
|
</DsHeading>
|
||||||
|
<!-- Description -->
|
||||||
|
<DsText as="p" tone="default" :clamp="3" class="square-card__description">
|
||||||
|
{{ description }}
|
||||||
|
</DsText>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DsCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DsCard from '@root/design-system/components/DsCard.vue'
|
||||||
|
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||||
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||||
|
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||||
|
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
|
||||||
|
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
id: { type: [String, Number], required: true },
|
||||||
|
title: { type: String, required: true },
|
||||||
|
url: { type: String, required: true },
|
||||||
|
description: { type: String, default: '' },
|
||||||
|
imgSrc: { type: String, default: '' },
|
||||||
|
imgAlt: { type: String, default: '' },
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.square-card__grid {
|
||||||
|
display: grid;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square-card__content {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--sp-6);
|
||||||
|
max-width: 518px;
|
||||||
|
padding-left: 22px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-top: 13px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
background: white;
|
||||||
|
max-width: 85%;
|
||||||
|
justify-self: center;
|
||||||
|
position: relative;
|
||||||
|
margin-top: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square-card__meta {
|
||||||
|
margin-top: calc(var(--sp-4) * -1);
|
||||||
|
}
|
||||||
|
.square-card__description {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.square-card__actions {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
108
app/components/SquareCardList.vue
Normal file
108
app/components/SquareCardList.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<div class="square-card-list">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.square-card-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--gap-cards);
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
@media (max-width: 572px) {
|
||||||
|
.square-card-list {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Afficher seulement 1 cards < 600px
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
.square-card-list > .square-card:nth-child(2) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.square-card-list > .square-card:nth-child(3) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Afficher seulement 2 cards < 900px
|
||||||
|
@media (max-width: 799px) {
|
||||||
|
.square-card-list > .square-card:nth-child(n+3) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Taille des cards
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 260px;
|
||||||
|
flex: 1 1 260px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 260px;
|
||||||
|
flex: 1 1 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 280px;
|
||||||
|
flex: 1 1 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 280px;
|
||||||
|
flex: 1 1 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 260px;
|
||||||
|
flex: 1 1 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 280px;
|
||||||
|
flex: 1 1 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 300px;
|
||||||
|
flex: 1 1 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 258px;
|
||||||
|
flex: 1 1 258px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1300px) {
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 283px;
|
||||||
|
flex: 1 1 283px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
// style appliqué au composant enfant via sa classe
|
||||||
|
.square-card-list > .square-card {
|
||||||
|
max-width: 308px;
|
||||||
|
flex: 1 1 308px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
74
app/components/TextCardLeft.vue
Normal file
74
app/components/TextCardLeft.vue
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<DsCard class="textleft-card">
|
||||||
|
<div class="textleft-card__grid">
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="textleft-card__content">
|
||||||
|
<DsHeading as="h5" tone="default" class="textleft-card__title">
|
||||||
|
{{ title }}
|
||||||
|
</DsHeading>
|
||||||
|
<!-- Description -->
|
||||||
|
<DsText as="p" tone="default" :clamp="3" class="textleft-card__description">
|
||||||
|
{{ description }}
|
||||||
|
</DsText>
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="concert-card__actions">
|
||||||
|
<DsButtonArrow :to="`/concerts/${id}`" variant="secondary">
|
||||||
|
Découvrir
|
||||||
|
</DsButtonArrow>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DsCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DsCard from '@root/design-system/components/DsCard.vue'
|
||||||
|
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||||
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||||
|
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||||
|
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
|
||||||
|
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
id: { type: [String, Number], required: true },
|
||||||
|
title: { type: String, required: true },
|
||||||
|
url: { type: String, required: true },
|
||||||
|
description: { type: String, default: '' },
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.textleft-card__grid {
|
||||||
|
display: grid;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textleft-card__content {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--sp-6);
|
||||||
|
max-width: 518px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-top: 3px;
|
||||||
|
background: white;
|
||||||
|
border-left: 2px solid;
|
||||||
|
&:hover {
|
||||||
|
border-left-color: var(--c-brand_rouge);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.textleft-card__meta {
|
||||||
|
margin-top: calc(var(--sp-4) * -1);
|
||||||
|
}
|
||||||
|
.textleft-card__description {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.textleft-card__actions {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
108
app/components/TextCardLeftList.vue
Normal file
108
app/components/TextCardLeftList.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<div class="textleft-card-list">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.textleft-card-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--gap-cards);
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
@media (max-width: 572px) {
|
||||||
|
.textleft-card-list {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Afficher seulement 1 cards < 600px
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
.textleft-card-list > .textleft-card:nth-child(2) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.textleft-card-list > .textleft-card:nth-child(3) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Afficher seulement 2 cards < 900px
|
||||||
|
@media (max-width: 799px) {
|
||||||
|
.textleft-card-list > .textleft-card:nth-child(3) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Taille des cards
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 260px;
|
||||||
|
flex: 1 1 260px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 247px;
|
||||||
|
flex: 1 1 247px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 280px;
|
||||||
|
flex: 1 1 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 231px;
|
||||||
|
flex: 1 1 231px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 258px;
|
||||||
|
flex: 1 1 258px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 288px;
|
||||||
|
flex: 1 1 288px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 311px;
|
||||||
|
flex: 1 1 311px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 334px;
|
||||||
|
flex: 1 1 334px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1300px) {
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 367px;
|
||||||
|
flex: 1 1 367px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
// style appliqué au composant enfant via sa classe
|
||||||
|
.textleft-card-list > .textleft-card {
|
||||||
|
max-width: 400px;
|
||||||
|
flex: 1 1 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,11 +1,10 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import logoDefault from '/img/logos/logo_orchestre_red.svg'
|
import logoDefault from '/img/logos/logo_orchestre_red.svg'
|
||||||
import agendaRouge from '@/assets/img/icones/agenda_rouge.svg'
|
import agendaRouge from '@/assets/img/icones/agenda_rouge.svg'
|
||||||
import ticket from '@/assets/img/icones/ticket_black.svg'
|
import ticket from '@/assets/img/icones/ticket_noir.svg'
|
||||||
import mobile_agenda_icon from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
|
import mobile_agenda_icon from '@/assets/img/icones/agenda_blanc_non_opaque.svg'
|
||||||
import mobile_ticket from '@/assets/img/icones/ticket_white.svg'
|
import mobile_ticket from '@/assets/img/icones/ticket_blanc.svg'
|
||||||
const { brand } = useAppConfig()
|
const { brand } = useAppConfig()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -18,17 +17,31 @@
|
|||||||
<img :src="agendaRouge" alt="icone agenda" />
|
<img :src="agendaRouge" alt="icone agenda" />
|
||||||
</template>
|
</template>
|
||||||
<template #ticket>
|
<template #ticket>
|
||||||
<img class="img_ticket" :src="ticket" alt="icone ticket" />
|
<img class="img_ticket_desktop" :src="ticket" alt="icone ticket" />
|
||||||
</template>
|
</template>
|
||||||
<template #mobile_agenda_icon>
|
<template #mobile_agenda_icon>
|
||||||
<img :src="mobile_agenda_icon" alt="icone ticket" />
|
<img :src="mobile_agenda_icon" alt="icone ticket" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #mobile_ticket>
|
<template #mobile_ticket>
|
||||||
<img :src="mobile_ticket" alt="icone ticket" />
|
<img class="img_ticket_mob" :src="mobile_ticket" alt="icone ticket" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</HeaderNav>
|
</HeaderNav>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
|
.img_ticket_desktop {
|
||||||
|
max-height: 26px;
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-left: -11px;
|
||||||
|
}
|
||||||
|
.img_ticket_mob {
|
||||||
|
max-height: 37px;
|
||||||
|
margin-top: 9px;
|
||||||
|
margin-left: -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
<nav class="header_nav_cont" aria-label="Primary navigation">
|
<nav class="header_nav_cont" aria-label="Primary navigation">
|
||||||
<!-- Desktop nav -->
|
<!-- Desktop nav -->
|
||||||
<ul class="header_nav header_nav--desktop">
|
<ul class="header_nav header_nav--desktop">
|
||||||
<li class="header_nav_item brandontext_bold">
|
<li class="header_nav_item">
|
||||||
L'Orchestre
|
L'Orchestre
|
||||||
<ul class="header_nav_sub_menu">
|
<ul class="header_nav_sub_menu">
|
||||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="header_nav_item brandontext_bold">
|
<li class="header_nav_item">
|
||||||
Éducation et médiation
|
Éducation et médiation
|
||||||
<ul class="header_nav_sub_menu">
|
<ul class="header_nav_sub_menu">
|
||||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Petite enfance</NuxtLink></li>
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Petite enfance</NuxtLink></li>
|
||||||
@@ -156,7 +156,7 @@
|
|||||||
>
|
>
|
||||||
<ul class="header_drawer_inner">
|
<ul class="header_drawer_inner">
|
||||||
<li
|
<li
|
||||||
class="header_drawer_link brandontext_bold"
|
class="header_drawer_link"
|
||||||
:class="{ 'is-open': activeDrawer === 'orchestre' }"
|
:class="{ 'is-open': activeDrawer === 'orchestre' }"
|
||||||
@click="toggleDrawer('orchestre')"
|
@click="toggleDrawer('orchestre')"
|
||||||
>
|
>
|
||||||
@@ -188,7 +188,7 @@
|
|||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
class="header_drawer_link brandontext_bold"
|
class="header_drawer_link"
|
||||||
:class="{ 'is-open': activeDrawer === 'education' }"
|
:class="{ 'is-open': activeDrawer === 'education' }"
|
||||||
@click="toggleDrawer('education')"
|
@click="toggleDrawer('education')"
|
||||||
>
|
>
|
||||||
@@ -217,15 +217,17 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li class="icon_mobile">
|
||||||
<NuxtLink class="header_drawer_link icon_mobile_agenda" to="/agenda" @click="close">
|
<NuxtLink class="header_drawer_link icon_mobile_agenda" to="/agenda" @click="close">
|
||||||
<!-- ICÔNE injectée -->
|
<!-- ICÔNE injectée -->
|
||||||
<slot name="mobile_agenda_icon" />
|
<slot name="mobile_agenda_icon" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<NuxtLink class="header_drawer_link icon_mobile_ticket" to="/agenda" @click="close">
|
<NuxtLink class="header_drawer_link icon_mobile_ticket" to="/agenda" @click="close">
|
||||||
<!-- ICÔNE injectée -->
|
<!-- ICÔNE injectée -->
|
||||||
<slot name="mobile_ticket" />
|
<slot name="mobile_ticket" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -262,6 +264,12 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
|
.icon_mobile {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 20px;
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
.icon_mobile_agenda {
|
.icon_mobile_agenda {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|||||||
@@ -7,12 +7,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<header>
|
<header>
|
||||||
<div class="bg-orbs" aria-hidden="true">
|
<div class="bg-orbs" aria-hidden="true">
|
||||||
<span class="orb orb--1" />
|
<!-- <span class="orb orb--1" /> -->
|
||||||
<span class="orb orb--2" />
|
<!-- <span class="orb orb--2" /> -->
|
||||||
<span class="orb orb--3" />
|
<!-- <span class="orb orb--3" /> -->
|
||||||
<span class="orb orb--4" />
|
<!-- <span class="orb orb--4" /> -->
|
||||||
<span class="orb orb--5" />
|
<!-- <span class="orb orb--5" /> -->
|
||||||
<span class="orb orb--6" />
|
<!-- <span class="orb orb--6" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="header_layout" :class="`header--${theme}`">
|
<div class="header_layout" :class="`header--${theme}`">
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@@ -8,12 +8,14 @@
|
|||||||
<section
|
<section
|
||||||
class="page-section"
|
class="page-section"
|
||||||
:class="[
|
:class="[
|
||||||
|
`page-section--overflow--${overflow}`,
|
||||||
`page-section--${tone}`,
|
`page-section--${tone}`,
|
||||||
{ 'page-section--padded': padded }
|
{ 'page-section--padded': padded },
|
||||||
|
`page-section--padded--${padded_size}`
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<!-- Si content == true -->
|
<!-- Si content == true -->
|
||||||
<PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb">
|
<PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb" :position="position" :overflow="overflow">
|
||||||
<slot />
|
<slot />
|
||||||
</PageSectionInner>
|
</PageSectionInner>
|
||||||
|
|
||||||
@@ -28,11 +30,13 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
defineProps({
|
defineProps({
|
||||||
tone: { type: String, default: 'default' }, // default / brand / muted / dark…
|
tone: { type: String, default: 'default' }, // default / brand / muted / dark…
|
||||||
padded: { type: Boolean, default: true }, // padding vertical
|
padded_size: { type: String, default: '' }, // none | sm | md | lg
|
||||||
contentSize: { type: String, default: 'default'}, // narrow/default/wide
|
contentSize: { type: String, default: 'default'}, // narrow/default/wide
|
||||||
content: { type: Boolean, default: true }, // contenu contraint ou full
|
content: { type: Boolean, default: true }, // contenu contraint ou full
|
||||||
padb : { type: String, default: '' }, // props pour PageSectionInner
|
padb : { type: String, default: '' }, // props pour PageSectionInner
|
||||||
padt : { type: String, default: '' } // props pour PageSectionInner
|
padt : { type: String, default: '' }, // props pour PageSectionInner
|
||||||
|
position : { type: String, default: '' },
|
||||||
|
overflow : { type: String, default: '' }
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -41,6 +45,9 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
//min-height: var(--sp-200);
|
//min-height: var(--sp-200);
|
||||||
|
&--overflow--hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/* tons = arrière-plan section */
|
/* tons = arrière-plan section */
|
||||||
&--default { background: transparent; }
|
&--default { background: transparent; }
|
||||||
@@ -50,9 +57,15 @@
|
|||||||
|
|
||||||
// padding en haut et en bas
|
// padding en haut et en bas
|
||||||
&--padded {
|
&--padded {
|
||||||
|
&--md {
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
padding-bottom: 50px;
|
padding-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
&--lg {
|
||||||
|
padding-top: 30px;
|
||||||
|
padding-bottom: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
Des templates peuvent avoir toutes la même marge de page et d'autres, par ex, être full page -->
|
Des templates peuvent avoir toutes la même marge de page et d'autres, par ex, être full page -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`]">
|
<div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`,`page-section--inner--position--${position}`,`page-section--inner--overflow--${overflow}`]">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -11,7 +11,8 @@
|
|||||||
defineProps({
|
defineProps({
|
||||||
size: { type: String, default: 'default' }, // default / wide / narrow
|
size: { type: String, default: 'default' }, // default / wide / narrow
|
||||||
padb : { type: String, default: '' },
|
padb : { type: String, default: '' },
|
||||||
padt : { type: String, default: '' }
|
padt : { type: String, default: '' },
|
||||||
|
position : { type: String, dafault : ''}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -25,7 +26,9 @@
|
|||||||
|
|
||||||
// respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)
|
// respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)
|
||||||
|
|
||||||
|
&--position--relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
// limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
|
// limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
|
||||||
&--narrow {
|
&--narrow {
|
||||||
@@ -37,7 +40,7 @@
|
|||||||
/* mobile / small screens */
|
/* mobile / small screens */
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
padding-inline: var(--page-padding-mobile);
|
//padding-inline: var(--page-padding-mobile);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 0px) {
|
@media (min-width: 0px) {
|
||||||
|
|||||||
@@ -29,30 +29,44 @@
|
|||||||
&--tone-brandreverse { background: var(--c-backgroud-brandreverse); }
|
&--tone-brandreverse { background: var(--c-backgroud-brandreverse); }
|
||||||
|
|
||||||
&--pad-xs {
|
&--pad-xs {
|
||||||
padding-top: var(--sp-32);
|
//padding-top: var(--sp-32);
|
||||||
padding-bottom: var(--sp-16);
|
padding-bottom: var(--sp-16);
|
||||||
padding-left: var(--sp-45);
|
padding-left: var(--sp-45);
|
||||||
|
padding-right: var(--sp-8);
|
||||||
}
|
}
|
||||||
&--pad-sm {
|
&--pad-sm {
|
||||||
padding-top: var(--sp-32);
|
//padding-top: var(--sp-32);
|
||||||
padding-bottom: var(--sp-16);
|
padding-bottom: var(--sp-16);
|
||||||
padding-left: var(--sp-45);
|
padding-left: var(--sp-45);
|
||||||
|
padding-right: var(--sp-8);
|
||||||
}
|
}
|
||||||
&--pad-md {
|
&--pad-md {
|
||||||
padding-top: var(--sp-80);
|
//padding-top: var(--sp-80);
|
||||||
padding-bottom: var(--sp-180);
|
padding-bottom: var(--sp-180);
|
||||||
padding-left: var(--sp-45);
|
padding-left: var(--sp-45);
|
||||||
|
padding-right: var(--sp-8);
|
||||||
}
|
}
|
||||||
&--pad-lg {
|
&--pad-lg {
|
||||||
padding-top: var(--sp-80);
|
//padding-top: var(--sp-80);
|
||||||
padding-bottom: var(--sp-180);
|
padding-bottom: var(--sp-180);
|
||||||
padding-left: var(--sp-45);
|
padding-left: var(--sp-45);
|
||||||
|
padding-right: var(--sp-8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.section-content {
|
||||||
|
&--pad-xs {
|
||||||
|
//padding-bottom: calc(var(--sp-16) * 0.5);
|
||||||
|
padding-left: calc(var(--sp-45) * 0.5);
|
||||||
|
//padding-right: calc(var(--sp-8) * 0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 300px) {
|
@media (max-width: 300px) {
|
||||||
.section-title {
|
.section-title {
|
||||||
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
|
padding-left: calc(var(--sp-45) - 20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -45,10 +45,17 @@
|
|||||||
padding-left: var(--sp-45);
|
padding-left: var(--sp-45);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.section-title {
|
||||||
|
&--pad-xs {
|
||||||
|
padding-left: calc(var(--sp-45) * 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 300px) {
|
@media (max-width: 300px) {
|
||||||
.section-title {
|
.section-title {
|
||||||
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
|
padding-left: calc(var(--sp-45) - 20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<!-- Cas avec “cadre couleur” full page mais contenu dans marge -->
|
<!-- Cas avec “cadre couleur” full page mais contenu dans marge -->
|
||||||
<PageSection tone="dark" :padded="true" content-size="default">
|
<PageSection tone="dark" padded_size="md" content-size="default">
|
||||||
<DsHeading as="h1" size="">CONCERTS À VENIR...</DsHeading>
|
<DsHeading as="h1" size="">CONCERTS À VENIR...</DsHeading>
|
||||||
<ConcertCard
|
<ConcertCard
|
||||||
id="1"
|
id="1"
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
</PageSection>
|
</PageSection>
|
||||||
|
|
||||||
<!-- Cas normal : toute la section est contenu dans les marges -->
|
<!-- Cas normal : toute la section est contenu dans les marges -->
|
||||||
<PageSection :padded="true" content-size="default">
|
<PageSection padded_size="md" content-size="default">
|
||||||
<DsHeading as="h1" size="">PAR TOUS ET POUR TOUS</DsHeading>
|
<DsHeading as="h1" size="">PAR TOUS ET POUR TOUS</DsHeading>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
|
|
||||||
|
|||||||
@@ -1,14 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
<!-- ================== -->
|
||||||
<!-- Fond noir -->
|
<!-- Fond noir -->
|
||||||
<PageSection tone="dark" :padded="false" content-size="default">
|
<!-- ================== -->
|
||||||
|
<PageSection tone="dark" content-size="default">
|
||||||
<SectionTitle tone="invert" pad="md">
|
<SectionTitle tone="invert" pad="md">
|
||||||
CONCERTS À VENIR …
|
CONCERTS À VENIR …
|
||||||
</SectionTitle>
|
</SectionTitle>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
|
|
||||||
|
<!-- ================== -->
|
||||||
<!-- Listes des prochains conncerts -->
|
<!-- Listes des prochains conncerts -->
|
||||||
<PageSection content-size="default" class="remonter_concert_list">
|
<!-- ================== -->
|
||||||
|
<PageSection padded_size="md" content-size="default" class="remonter_concert_list">
|
||||||
<ConcertCardList>
|
<ConcertCardList>
|
||||||
<ConcertCard
|
<ConcertCard
|
||||||
id="1"
|
id="1"
|
||||||
@@ -49,16 +53,18 @@
|
|||||||
</ConcertCardList>
|
</ConcertCardList>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
|
|
||||||
<!-- Carte Île-De-France Par tous et pour tous -->
|
<!-- ================== -->
|
||||||
<PageSection class="theme_ptpt_wp">
|
<!-- Carte Île-De-France Partout et pour tous -->
|
||||||
<SectionContent class="theme_ptpt">
|
<!-- ================== -->
|
||||||
<DsMedia :src="ptpt_img" alt="Carte Île-De-France" class="theme_ptpt--img"/>
|
<PageSection padded_size="md" class="theme_ppt_wp">
|
||||||
<SectionContent tone="brand_rouge45" pad="xs" class="theme_ptpt--content">
|
<SectionContent class="theme_ppt">
|
||||||
|
<DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/>
|
||||||
|
<SectionContent tone="brand_rouge45" pad="" class="theme_ppt--content">
|
||||||
<SectionTitle tone="invert" pad="xs">
|
<SectionTitle tone="invert" pad="xs">
|
||||||
PAR TOUS ET POUR TOUS
|
PARTOUT ET POUR TOUS
|
||||||
</SectionTitle>
|
</SectionTitle>
|
||||||
<SectionContent pad="xs" class="theme_ptpt--description">
|
<SectionContent pad="xs" class="theme_ppt--description">
|
||||||
<DsText tone="invert" size="lg" class="theme_ptpt--txt" >
|
<DsText tone="invert" size="lg" class="theme_ppt--txt" >
|
||||||
Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions -
|
Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions -
|
||||||
</DsText>
|
</DsText>
|
||||||
<DsButtonArrow to="/" variant="invert">
|
<DsButtonArrow to="/" variant="invert">
|
||||||
@@ -69,22 +75,92 @@
|
|||||||
</SectionContent>
|
</SectionContent>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
|
|
||||||
|
<!-- ================== -->
|
||||||
<!-- Tous à l'Orchestre -->
|
<!-- Tous à l'Orchestre -->
|
||||||
<PageSection tone="brandreverse" :padded="true" content-size="default" padb="xs" class="theme_tao">
|
<!-- ================== -->
|
||||||
|
<PageSection tone="brandreverse" padded_size="md" content-size="default" padb="xs" class="theme_tao">
|
||||||
<SectionContent>
|
<SectionContent>
|
||||||
|
|
||||||
<SectionTitle tone="invert" pad="xs">
|
<SectionTitle tone="invert" pad="xs">
|
||||||
TOUS À L’ORCHESTRE
|
TOUS À L’ORCHESTRE
|
||||||
</SectionTitle>
|
</SectionTitle>
|
||||||
<SectionContent pad="xs" class="theme_ptpt--description">
|
<SectionContent pad="xs" class="theme_tao--description">
|
||||||
<DsText tone="invert" size="lg" class="theme_ptpt--txt" >
|
<DsText tone="invert" size="lg" class="theme_tao--txt" >
|
||||||
Phrase d’accroche / explicative de cette rubrique par tous et pour tous
|
Phrase d’accroche / explicative de cette rubrique par tous et pour tous
|
||||||
</DsText>
|
</DsText>
|
||||||
</SectionContent>
|
</SectionContent>
|
||||||
|
</SectionContent>
|
||||||
|
|
||||||
|
<!-- LES CARTES -->
|
||||||
|
<FilteredCards />
|
||||||
|
</PageSection>
|
||||||
|
|
||||||
|
<!-- ================== -->
|
||||||
|
<!-- ACTUALITÉS -->
|
||||||
|
<!-- ================== -->
|
||||||
|
<PageSection padded_size="md">
|
||||||
|
<SectionContent>
|
||||||
|
<SectionTitle tone="" pad="xs">
|
||||||
|
LES DERNIÈRES ACTUALITÉS
|
||||||
|
</SectionTitle>
|
||||||
|
</SectionContent>
|
||||||
|
<SquareCardList >
|
||||||
|
<SquareCard
|
||||||
|
v-for="actuscard in actuscards"
|
||||||
|
:key="actuscard.id"
|
||||||
|
:id="actuscard.id"
|
||||||
|
:imgSrc="actuscard.imgSrc"
|
||||||
|
:imgAlt="actuscard.imgAlt"
|
||||||
|
:title="actuscard.title"
|
||||||
|
:description="actuscard.description"
|
||||||
|
:url="actuscard.url"
|
||||||
|
></SquareCard>
|
||||||
|
</SquareCardList>
|
||||||
|
</PageSection>
|
||||||
|
|
||||||
|
<!-- ================== -->
|
||||||
|
<!-- ONDIF MAG -->
|
||||||
|
<!-- ================== -->
|
||||||
|
<PageSection padded_size="md" position="relative" overflow="hidden" class="theme_mag">
|
||||||
|
<div class="decoration--mag"><img src="/img/decoration/ellipse_mag.svg" alt=""></div>
|
||||||
|
<SectionContent>
|
||||||
|
<SectionTitle tone="" pad="xs">
|
||||||
|
ONDIF MAG
|
||||||
|
</SectionTitle>
|
||||||
|
<SectionContent pad="xs" class="theme_tao--description">
|
||||||
|
<DsText tone="" size="lg" class="theme_tao--txt" >
|
||||||
|
Le magazine en ligne de l’Orchestre national d’Île-de-France vous invite à découvrir l’actualité des concerts de l’orchestre, des interprètes, des chefs et cheffes, de la création contemporaine et des projets de l’ONDIF sur le territoire francilien et au-delà. Portraits de musiciens, de compositeurs, d’artistes invités, décryptages d’œuvres, partez à la découverte de l’actualité musicale !
|
||||||
|
</DsText>
|
||||||
|
</SectionContent>
|
||||||
|
</SectionContent>
|
||||||
|
|
||||||
|
<SectionContent pad="xs">
|
||||||
|
<TextCardLeftList >
|
||||||
|
<TextCardLeft
|
||||||
|
v-for="magcard in magcards"
|
||||||
|
:key="magcard.id"
|
||||||
|
:id="magcard.id"
|
||||||
|
:title="magcard.title"
|
||||||
|
:description="magcard.description"
|
||||||
|
:url="magcard.url"
|
||||||
|
></TextCardLeft>
|
||||||
|
</TextCardLeftList>
|
||||||
</SectionContent>
|
</SectionContent>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
|
|
||||||
|
<!-- ================== -->
|
||||||
|
<!-- L'ORCHESTRE POUR LES PROS -->
|
||||||
|
<!-- ================== -->
|
||||||
|
<PageSection padded_size="lg">
|
||||||
|
<SectionContent>
|
||||||
|
<SectionTitle tone="" pad="xs">
|
||||||
|
L'ORCHESTRE POUR LES PROS
|
||||||
|
</SectionTitle>
|
||||||
|
</SectionContent>
|
||||||
|
|
||||||
|
<SectionContent>
|
||||||
|
<BannierePros />
|
||||||
|
</SectionContent>
|
||||||
|
</PageSection>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -92,10 +168,13 @@
|
|||||||
import { onMounted, computed } from 'vue'
|
import { onMounted, computed } from 'vue'
|
||||||
import { clientLog } from '~/utils/clientLog'
|
import { clientLog } from '~/utils/clientLog'
|
||||||
import SectionContent from '../components/section/SectionContent.vue'
|
import SectionContent from '../components/section/SectionContent.vue'
|
||||||
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||||
|
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
||||||
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
|
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
|
||||||
import ptpt_img from '@/assets/img/illustrations/map_idf.jpg'
|
import ppt_img from '@/assets/img/illustrations/map_idf.jpg'
|
||||||
|
import DsCard from '@root/design-system/components/DsCard.vue'
|
||||||
|
|
||||||
// Layout utilisé
|
// Layout utilisé
|
||||||
definePageMeta({ layout: 'default' })
|
definePageMeta({ layout: 'default' })
|
||||||
@@ -143,6 +222,70 @@
|
|||||||
clientLog('info', 'test de log depuis vuejs', { })
|
clientLog('info', 'test de log depuis vuejs', { })
|
||||||
clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
|
clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
//--------------------
|
||||||
|
// DONNÉES POUR LES ACTUS
|
||||||
|
//--------------------
|
||||||
|
const actuscards = ref([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
imgSrc: '/contenus/actu1_1.jpg',
|
||||||
|
imgAlt: 'Les prochains concours',
|
||||||
|
title: "Les prochains concours",
|
||||||
|
description: `Inscrivez-vous aux auditions de l'Orchestre national d'Île-de-France.
|
||||||
|
Un nombre maximum de caractère sera défini pour le texte qui figure dans la description de l’actu sur la page d’accueil.`,
|
||||||
|
url:"#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
imgSrc: '/contenus/actu1_1.jpg',
|
||||||
|
imgAlt: 'Du sur-mesure pour les petites oreilles',
|
||||||
|
title: "Du sur-mesure pour les petites oreilles",
|
||||||
|
description: `Les ateliers 0-3 ans sont de retour !`,
|
||||||
|
url:"#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
imgSrc: '/contenus/actu1_1.jpg',
|
||||||
|
imgAlt: "Académie d'Orchestre 2026",
|
||||||
|
title: "Académie d'Orchestre 2026",
|
||||||
|
description: `Les ateliers 0-3 ans sont de retour !`,
|
||||||
|
url:"#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
imgSrc: '/contenus/actu1_1.jpg',
|
||||||
|
imgAlt: "Pablo González, nouveau directeur musical pour la saison 27.28",
|
||||||
|
title: "Pablo González, nouveau directeur musical pour la saison 27.28",
|
||||||
|
description: ``,
|
||||||
|
url:"#",
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
//--------------------
|
||||||
|
// DONNÉES POUR ONDIF MAG
|
||||||
|
//--------------------
|
||||||
|
const magcards = ref([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: "LA FANTASTIQUE DE BERLIOZ",
|
||||||
|
description: `L’auteur suppose qu’un jeune musicien, affecté de cette maladie morale qu’un écrivain célèbre appelle le vague des passions, voit pour la première fois une femme qui réunit tous les charmes de l’être idéal que rêvait son imagination...`,
|
||||||
|
url:"#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: "L’ITALIE BAROQUE, BERCEAU DU CONCERTO",
|
||||||
|
description: `C’est dans l’Italie baroque du début du XVIIe siècle que naît le Stile Concertato (style concertant), et plus précisément à Venise, autour des grands maîtres qui ont œuvré à la basilique Saint-Marc, comme les Gabrieli.`,
|
||||||
|
url:"#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-D’OEUVRE À LA FOIS CLASSIQUE ET ROMANTIQUE",
|
||||||
|
description: `Avant la première exécution publique de l’œuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait d’abord été créée dans le palais du prince Lobkowitz en mars 1807.`,
|
||||||
|
url:"#",
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@@ -150,13 +293,13 @@
|
|||||||
transform: translateY(-170px);
|
transform: translateY(-170px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme_ptpt_wp {
|
.theme_ppt_wp {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
|
||||||
.theme_ptpt {
|
|
||||||
display: grid;
|
|
||||||
// parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
|
// parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
|
||||||
margin-top: -170px;
|
margin-top: -170px;
|
||||||
|
}
|
||||||
|
.theme_ppt {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
&--img {
|
&--img {
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
@@ -165,11 +308,14 @@
|
|||||||
&--content {
|
&--content {
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
&--description {
|
&--description {
|
||||||
max-width: 520px;
|
max-width: 800px;
|
||||||
margin-top: 35px;
|
align-self: self-start;
|
||||||
|
// margin-top: 35px;
|
||||||
}
|
}
|
||||||
&--txt {
|
&--txt {
|
||||||
margin-bottom: 35px;
|
margin-bottom: 35px;
|
||||||
@@ -178,6 +324,146 @@
|
|||||||
|
|
||||||
.theme_tao {
|
.theme_tao {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
&--description {
|
||||||
|
max-width: 800px;
|
||||||
|
|
||||||
|
}
|
||||||
|
&--txt {
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
&--filters {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 10px;
|
||||||
|
row-gap: 14px;
|
||||||
|
|
||||||
|
}
|
||||||
|
&--cardlist {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
&--card {
|
||||||
|
background-color: var(--c-surface);
|
||||||
|
border-radius: 10px;
|
||||||
|
//padding: 50px;
|
||||||
|
padding: clamp(18px, 2.4vw, 32px);
|
||||||
|
|
||||||
|
&--wp {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&--img {
|
||||||
|
max-width: 280px;
|
||||||
|
overflow: hidden;
|
||||||
|
img {
|
||||||
|
max-height: 280px;
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
img {
|
||||||
|
max-height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&--content {
|
||||||
|
max-width: 320px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&--card {
|
||||||
|
/* base: mobile-first */
|
||||||
|
width: clamp(260px, 81vw, 360px);
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(260px, 80vw, 360px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(280px, 63vw, 460px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(280px, 60vw, 460px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(320px, 33vw, 520px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
&--card {
|
||||||
|
width: clamp(360px, 28vw, 560px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_mag {
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1300px) {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1500px) {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decoration--mag {
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
right: -150px;
|
||||||
|
}
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
right: -120px;
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
right: -100px;
|
||||||
|
}
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
right: -100px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
right: -140px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1300px) {
|
||||||
|
right: -100px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1500px) {
|
||||||
|
right: -50px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -116,6 +116,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Sizes */
|
/* Sizes */
|
||||||
|
&--aplati {
|
||||||
|
font-size: var(--text-md);
|
||||||
|
padding-inline: var(--sp-14);
|
||||||
|
min-height: 2rem;
|
||||||
|
}
|
||||||
&--sm {
|
&--sm {
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
padding: var(--sp-4) var(--sp-8);
|
padding: var(--sp-4) var(--sp-8);
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
--c-brand_rouge-weak: #e3061391;
|
--c-brand_rouge-weak: #e3061391;
|
||||||
--c-backgroud-black: #111;
|
--c-backgroud-black: #111;
|
||||||
--c-backgroud-brandreverse: #ACCFCF;
|
--c-backgroud-brandreverse: #ACCFCF;
|
||||||
|
--c-background-blanc-casse: #FCFCFC;
|
||||||
|
|
||||||
/* États */
|
/* États */
|
||||||
--c-success: green;
|
--c-success: green;
|
||||||
|
|||||||
@@ -26,3 +26,7 @@
|
|||||||
--gap-cards: var(--sp-22);
|
--gap-cards: var(--sp-22);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.position--relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
--sp-6: 0.375rem; /* 6px */
|
--sp-6: 0.375rem; /* 6px */
|
||||||
--sp-8: 0.5rem; /* 8px */
|
--sp-8: 0.5rem; /* 8px */
|
||||||
--sp-12: 0.75rem; /* 12px */
|
--sp-12: 0.75rem; /* 12px */
|
||||||
|
--sp-14: 0.875rem; /* 14px */
|
||||||
|
|
||||||
/* Spacing standard */
|
/* Spacing standard */
|
||||||
--sp-16: 1rem; /* 16px */
|
--sp-16: 1rem; /* 16px */
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
/* Line heights */
|
/* Line heights */
|
||||||
--lh-tight: 1.15;
|
--lh-tight: 1.15;
|
||||||
--lh-snug: 1.25;
|
--lh-snug: 1.25;
|
||||||
--lh-base: 1.5;
|
--lh-base: 1.3;
|
||||||
|
|
||||||
/* Letter spacing (optionnel mais utile) */
|
/* Letter spacing (optionnel mais utile) */
|
||||||
--ls-tight: -0.01em;
|
--ls-tight: -0.01em;
|
||||||
|
|||||||
3
doc_contenu.md
Normal file
3
doc_contenu.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Page Accueil
|
||||||
|
- bloc "Partout et pour tous"
|
||||||
|
- 700 signes (espaces compris) max
|
||||||
13
doc_generale.md
Normal file
13
doc_generale.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
# Page rendu architecture
|
||||||
|
|
||||||
|
1. app.vue contient <NuxtPage />, qui affiche la page courante (ex. index.vue).
|
||||||
|
2. Chaque page est rendue dans son layout (par défaut default.vue).
|
||||||
|
3. Dans default.vue, le <main> contient un <slot /> : c’est là que le contenu de la page s’insère.
|
||||||
|
|
||||||
|
Donc le flux est : app.vue → <NuxtPage /> → layout default.vue → <main><slot /></main> → contenu de pages/*.
|
||||||
|
|
||||||
|
# Header
|
||||||
|
1. Dans le layout default le header contient
|
||||||
|
1.1 un contenant => <HeaderWrapper>
|
||||||
|
1.2 ce contenant contient le header => <HeaderDefault>
|
||||||
@@ -47,6 +47,8 @@ export default defineNuxtConfig({
|
|||||||
runtimeConfig: {
|
runtimeConfig: {
|
||||||
// Server-side only (jamais exposé au client)
|
// Server-side only (jamais exposé au client)
|
||||||
strapiToken: process.env.STRAPI_API_TOKEN || '',
|
strapiToken: process.env.STRAPI_API_TOKEN || '',
|
||||||
|
instagramAppId: process.env.NUXT_INSTAGRAM_APP_ID,
|
||||||
|
instagramClientToken: process.env.NUXT_INSTAGRAM_CLIENT_TOKEN,
|
||||||
|
|
||||||
// 🌍 Public (accessible dans le navigateur)
|
// 🌍 Public (accessible dans le navigateur)
|
||||||
public: {
|
public: {
|
||||||
|
|||||||
BIN
public/contenus/actu1_1.jpg
Normal file
BIN
public/contenus/actu1_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/contenus/insta_ondif_1.jpg
Normal file
BIN
public/contenus/insta_ondif_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
public/contenus/insta_ondif_2.jpg
Normal file
BIN
public/contenus/insta_ondif_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
BIN
public/contenus/insta_ondif_3.jpg
Normal file
BIN
public/contenus/insta_ondif_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
public/contenus/studio_img_1.webp
Normal file
BIN
public/contenus/studio_img_1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
public/contenus/studio_img_2.webp
Normal file
BIN
public/contenus/studio_img_2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
public/favicon_nuxt.jpg
Normal file
BIN
public/favicon_nuxt.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
3
public/img/decoration/ellipse_mag.svg
Normal file
3
public/img/decoration/ellipse_mag.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="466" height="932" viewBox="0 0 466 932" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M466 0C466 275.2 466 233.327 466 490.692C466 748.056 466 707.305 466 932C208.635 932 0 723.365 0 466C0 208.635 208.635 0 466 0Z" fill="#E30613" fill-opacity="0.59"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 282 B |
BIN
public/img/logos/logo_le_parc_noir.png
Normal file
BIN
public/img/logos/logo_le_parc_noir.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/img/logos/logo_le_studio_noir.png
Normal file
BIN
public/img/logos/logo_le_studio_noir.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
108
server/api/instagram/oembed.post.js
Normal file
108
server/api/instagram/oembed.post.js
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
function isValidUrl(u) {
|
||||||
|
try {
|
||||||
|
new URL(u);
|
||||||
|
return true;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function isInstagramPostUrl(u) {
|
||||||
|
try {
|
||||||
|
const url = new URL(u);
|
||||||
|
const host = url.hostname.replace(/^www\./, "");
|
||||||
|
|
||||||
|
if (host !== "instagram.com") return false;
|
||||||
|
|
||||||
|
const p = url.pathname;
|
||||||
|
return p.startsWith("/p/") || p.startsWith("/reel/") || p.startsWith("/tv/");
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineCachedEventHandler(
|
||||||
|
async (event) => {
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
|
||||||
|
const appId = config.instagramAppId;
|
||||||
|
const clientToken = config.instagramClientToken;
|
||||||
|
|
||||||
|
if (!appId || !clientToken) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 500,
|
||||||
|
statusMessage:
|
||||||
|
"Missing Instagram oEmbed credentials (instagramAppId / instagramClientToken).",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await readBody(event).catch(() => null);
|
||||||
|
|
||||||
|
if (!body || !Array.isArray(body.urls)) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
statusMessage: "Invalid payload. Expected { urls: string[] }",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// normalise + filtre
|
||||||
|
const urls = body.urls
|
||||||
|
.map((u) => String(u).trim())
|
||||||
|
.filter((u) => isValidUrl(u))
|
||||||
|
.filter((u) => isInstagramPostUrl(u))
|
||||||
|
.slice(0, 24);
|
||||||
|
|
||||||
|
if (urls.length === 0) {
|
||||||
|
return { results: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Token Meta oEmbed: APP_ID|CLIENT_TOKEN
|
||||||
|
const accessToken = `${appId}|${clientToken}`;
|
||||||
|
|
||||||
|
const results = await Promise.all(
|
||||||
|
urls.map(async (url) => {
|
||||||
|
const endpoint = new URL(
|
||||||
|
"https://graph.facebook.com/v19.0/instagram_oembed"
|
||||||
|
);
|
||||||
|
endpoint.searchParams.set("url", url);
|
||||||
|
endpoint.searchParams.set("omitscript", "true");
|
||||||
|
endpoint.searchParams.set("access_token", accessToken);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await $fetch(endpoint.toString(), { timeout: 10000 });
|
||||||
|
|
||||||
|
return {
|
||||||
|
url,
|
||||||
|
ok: true,
|
||||||
|
html: data?.html || "",
|
||||||
|
title: data?.title ?? null,
|
||||||
|
author_name: data?.author_name ?? null,
|
||||||
|
thumbnail_url: data?.thumbnail_url ?? null,
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
return {
|
||||||
|
url,
|
||||||
|
ok: false,
|
||||||
|
error:
|
||||||
|
e?.data?.error?.message ||
|
||||||
|
e?.message ||
|
||||||
|
"Unknown oEmbed error",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return { results };
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// cache 6h
|
||||||
|
maxAge: 60 * 60 * 6,
|
||||||
|
|
||||||
|
// clé de cache basée sur le payload (urls)
|
||||||
|
getKey: async (event) => {
|
||||||
|
const body = await readBody(event).catch(() => null);
|
||||||
|
const urls = Array.isArray(body?.urls) ? body.urls.join("|") : "none";
|
||||||
|
return `instagram:oembed:${urls}`;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
Reference in New Issue
Block a user