ref: remplace l'animation de l'Accueil par une vidéo et la déplace dans A propos
This commit is contained in:
parent
8bd25821c0
commit
ff90b05977
22 changed files with 636 additions and 1078 deletions
|
|
@ -1,158 +1,120 @@
|
|||
@charset "UTF-8";
|
||||
#page-a-propos {
|
||||
--images-longueur-maximale: 1300px;
|
||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||
--images-marges-ligne: var(--espace-xl) * 2;
|
||||
--conteneur-marges-internes-ligne: var(--espace-xl);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
margin-top: var(--page-marges-bloc-debut);
|
||||
}
|
||||
#page-a-propos .storytelling {
|
||||
padding: var(--espace-xl) 0;
|
||||
color: var(--couleur-gris-fonce);
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: none;
|
||||
min-block-size: inherit;
|
||||
max-block-size: inherit;
|
||||
}
|
||||
#page-a-propos .storytelling__conteneur {
|
||||
position: relative;
|
||||
width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));
|
||||
margin: auto;
|
||||
overscroll-behavior: inherit;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
place-items: center;
|
||||
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
||||
padding: 0 var(--conteneur-marges-internes-ligne);
|
||||
}
|
||||
#page-a-propos .storytelling picture {
|
||||
position: relative;
|
||||
}
|
||||
#page-a-propos .storytelling picture::before {
|
||||
content: "";
|
||||
#page-a-propos .storytelling__animation {
|
||||
--hauteur-animation: 90px;
|
||||
--taille-police: calc(var(--espace-xl) * 2.5);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
|
||||
background-repeat: space;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
filter: opacity(0%);
|
||||
animation: 1s clignotement infinite alternate both linear;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
block-size: 100%;
|
||||
margin: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
mask-image: linear-gradient(
|
||||
var(--mask-direction, to right),
|
||||
hsla(0, 0%, 0%, 0),
|
||||
hsl(0, 0%, 0%) 20%,
|
||||
hsl(0, 0%, 0%) 80%,
|
||||
hsla(0, 0%, 0%, 0)
|
||||
);
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-a-propos .storytelling img {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
height: auto;
|
||||
#page-a-propos .storytelling__animation[hidden] {
|
||||
display: grid !important;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-a-propos .storytelling__animation.no-js {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-a-propos .storytelling__animation .animation-conteneur {
|
||||
overflow: visible;
|
||||
width: 120vw;
|
||||
block-size: var(--hauteur-animation);
|
||||
}
|
||||
#page-a-propos .storytelling__animation .animation-texte {
|
||||
overflow: visible;
|
||||
font-size: var(--taille-police);
|
||||
font-weight: 600;
|
||||
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
||||
}
|
||||
#page-a-propos .storytelling__image {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-content: center;
|
||||
inline-size: max-content;
|
||||
max-inline-size: 100%;
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
}
|
||||
#page-a-propos .storytelling__image[data-caché] {
|
||||
display: none !important;
|
||||
}
|
||||
#page-a-propos .storytelling__image picture {
|
||||
max-block-size: inherit;
|
||||
}
|
||||
#page-a-propos .storytelling__image img {
|
||||
scale: 0.95;
|
||||
max-block-size: inherit;
|
||||
margin: auto;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle {
|
||||
position: absolute;
|
||||
right: 46.5%;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle img {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
width: 1.75rem;
|
||||
/* filter: drop-shadow(1px 1px 3px var(--couleur-gris-fonce)); */
|
||||
/* transition: 0.2s filter; */
|
||||
}
|
||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"] {
|
||||
top: 1%;
|
||||
right: 60%;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"] {
|
||||
top: 25%;
|
||||
right: 70%;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"] {
|
||||
top: 37%;
|
||||
right: 20%;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"] {
|
||||
top: 58%;
|
||||
right: 70%;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"] {
|
||||
top: 76%;
|
||||
right: 14%;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"] {
|
||||
top: 95.5%;
|
||||
right: 75%;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle[data-ensemble-epingle-boite-actif] img {
|
||||
/* filter: drop-shadow(1px 1px 5px var(--couleur-gris-fonce)); */
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(46.5% - (15rem + var(--espace-l)) / 2);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
padding: var(--espace-l);
|
||||
border: 1px solid var(--couleur-noir);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
color: var(--couleur-noir);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: var(--couleur-fond);
|
||||
transition: 0.2s opacity, 0.2s visibility;
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
|
||||
align-self: end;
|
||||
padding: var(--espace-xs);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte button img {
|
||||
pointer-events: none;
|
||||
aspect-ratio: 1;
|
||||
width: 1.5rem;
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte button:active {
|
||||
background: var(--couleur-jaune);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte p {
|
||||
max-width: 15rem;
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte p + p {
|
||||
margin-top: var(--espace-m);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"] {
|
||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
||||
top: calc(23% - var(--hauteur-boite) / 2);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] {
|
||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
||||
top: calc(35% - var(--hauteur-boite) / 2);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] button {
|
||||
left: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"] {
|
||||
--hauteur-boite: calc(8lh + 2rem + var(--espace-l) * 2);
|
||||
top: calc(58% - var(--hauteur-boite) / 2);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"] {
|
||||
--hauteur-boite: calc(12lh + 2rem + var(--espace-l) * 2);
|
||||
top: calc(76% - var(--hauteur-boite) / 2);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] {
|
||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
||||
top: calc(95.5% - var(--hauteur-boite) / 2);
|
||||
}
|
||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] button {
|
||||
left: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
|
||||
@media (scripting: none) {
|
||||
#page-a-propos .storytelling__animation {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@media (width <= 700px) {
|
||||
#page-a-propos {
|
||||
--images-marges-ligne: var(--espace-m);
|
||||
--conteneur-marges-internes-ligne: var(--espace-l);
|
||||
}
|
||||
}
|
||||
@media (width <= 500px) {
|
||||
#page-a-propos {
|
||||
--conteneur-marges-internes-ligne: var(--espace-m);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clignotement {
|
||||
to {
|
||||
filter: opacity(30%);
|
||||
@supports (-moz-appearance: none) {
|
||||
#page-a-propos .storytelling__animation {
|
||||
--taille-police: calc(var(--espace-xl) * 2.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;AAEA;AAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIA;AACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAEA;EACE;;AAIJ;EACE;EAEA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAEA;EACE;;AAMR;EA7LF;IA8LI;;;;AAIJ;EACE;IACE","file":"page-a-propos.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAOA;;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-a-propos.css"}
|
||||
|
|
@ -1 +1 @@
|
|||
#page-a-propos{--images-longueur-maximale:1300px;--page-marges-bloc-debut:var(--en-tete-hauteur);--images-marges-ligne:var(--espace-xl) * 2;margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex}#page-a-propos .storytelling{padding:var(--espace-xl) 0;color:var(--couleur-gris-fonce)}#page-a-propos .storytelling__conteneur{width:min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));margin:auto;position:relative}#page-a-propos .storytelling picture{position:relative}#page-a-propos .storytelling picture:before{content:"";filter:opacity(0%);background-image:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg);background-position:50%;background-repeat:space;background-size:contain;width:100%;height:100%;animation:1s linear infinite alternate both clignotement;position:absolute;top:0;left:0}#page-a-propos .storytelling img{object-fit:contain;background:0 0;width:max-content;height:auto;position:relative}#page-a-propos .storytelling .epingle{position:absolute;right:46.5%}#page-a-propos .storytelling .epingle img{pointer-events:none;width:1.75rem;display:block}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"]{top:1%;right:60%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"]{top:25%;right:70%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"]{top:37%;right:20%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"]{top:58%;right:70%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"]{top:76%;right:14%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"]{top:95.5%;right:75%}#page-a-propos .storytelling .boite-texte{top:0;right:calc(46.5% - (15rem + var(--espace-l)) / 2);padding:var(--espace-l);border:1px solid var(--couleur-noir);color:var(--couleur-noir);visibility:hidden;opacity:0;background:var(--couleur-fond);flex-flow:column;font-size:.8rem;font-style:italic;transition:opacity .2s,visibility .2s;display:flex;position:absolute}#page-a-propos .storytelling .boite-texte button{top:0;right:calc(-1.5rem - var(--espace-m) - var(--espace-xs));padding:var(--espace-xs);align-self:end;position:absolute}#page-a-propos .storytelling .boite-texte button img{pointer-events:none;aspect-ratio:1;width:1.5rem}#page-a-propos .storytelling .boite-texte button:active{background:var(--couleur-jaune)}#page-a-propos .storytelling .boite-texte p{max-width:15rem}#page-a-propos .storytelling .boite-texte p+p{margin-top:var(--espace-m)}#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif]{visibility:visible;opacity:1}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(23% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(35% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] button{left:calc(-1.5rem - var(--espace-m) - var(--espace-xs))}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"]{--hauteur-boite:calc(8lh + 2rem + var(--espace-l) * 2);top:calc(58% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"]{--hauteur-boite:calc(12lh + 2rem + var(--espace-l) * 2);top:calc(76% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(95.5% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] button{left:calc(-1.5rem - var(--espace-m) - var(--espace-xs))}@media (width<=700px){#page-a-propos{--images-marges-ligne:var(--espace-m)}}@keyframes clignotement{to{filter:opacity(30%)}}
|
||||
#page-a-propos{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-a-propos .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-a-propos .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur) * 13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-a-propos .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl) * 2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right), #0000, #000 20%, #000 80%, #0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-a-propos .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-a-propos .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-a-propos .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-a-propos .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-a-propos .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-a-propos .storytelling__image[data-caché]{display:none!important}#page-a-propos .storytelling__image picture{max-block-size:inherit}#page-a-propos .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-a-propos .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-a-propos{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-a-propos{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-a-propos .storytelling__animation{--taille-police:calc(var(--espace-xl) * 2.2)}}
|
||||
|
|
@ -1,121 +1,10 @@
|
|||
@charset "UTF-8";
|
||||
#page-accueil {
|
||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||
--conteneur-marges-internes-ligne: var(--espace-xl);
|
||||
--hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur));
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
margin-top: var(--page-marges-bloc-debut);
|
||||
}
|
||||
#page-accueil .storytelling {
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: none;
|
||||
min-block-size: inherit;
|
||||
max-block-size: inherit;
|
||||
}
|
||||
#page-accueil .storytelling__conteneur {
|
||||
overscroll-behavior: inherit;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
place-items: center;
|
||||
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
||||
padding: 0 var(--conteneur-marges-internes-ligne);
|
||||
}
|
||||
#page-accueil .storytelling__animation {
|
||||
--hauteur-animation: 90px;
|
||||
--taille-police: calc(var(--espace-xl) * 2.5);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
block-size: 100%;
|
||||
margin: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
mask-image: linear-gradient(
|
||||
var(--mask-direction, to right),
|
||||
hsla(0, 0%, 0%, 0),
|
||||
hsl(0, 0%, 0%) 20%,
|
||||
hsl(0, 0%, 0%) 80%,
|
||||
hsla(0, 0%, 0%, 0)
|
||||
);
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-accueil .storytelling__animation[hidden] {
|
||||
display: grid !important;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-accueil .storytelling__animation.no-js {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-accueil .storytelling__animation .animation-conteneur {
|
||||
overflow: visible;
|
||||
width: 120vw;
|
||||
block-size: var(--hauteur-animation);
|
||||
}
|
||||
#page-accueil .storytelling__animation .animation-texte {
|
||||
overflow: visible;
|
||||
font-size: var(--taille-police);
|
||||
font-weight: 600;
|
||||
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
||||
}
|
||||
#page-accueil .storytelling__image {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-content: center;
|
||||
inline-size: max-content;
|
||||
max-inline-size: 100%;
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
}
|
||||
#page-accueil .storytelling__image[data-caché] {
|
||||
display: none !important;
|
||||
}
|
||||
#page-accueil .storytelling__image picture {
|
||||
max-block-size: inherit;
|
||||
}
|
||||
#page-accueil .storytelling__image img {
|
||||
scale: 0.95;
|
||||
max-block-size: inherit;
|
||||
margin: auto;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
}
|
||||
@media (scripting: none) {
|
||||
#page-accueil .storytelling__animation {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@media (width <= 700px) {
|
||||
#page-accueil {
|
||||
--conteneur-marges-internes-ligne: var(--espace-l);
|
||||
}
|
||||
}
|
||||
@media (width <= 500px) {
|
||||
#page-accueil {
|
||||
--conteneur-marges-internes-ligne: var(--espace-m);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-moz-appearance: none) {
|
||||
#page-accueil .storytelling__animation {
|
||||
--taille-police: calc(var(--espace-xl) * 2.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* # sourceMappingURL=page-accueil.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAOA;;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;EAEE;EAEA;EACA;EACA;EACA;EACA","file":"page-accueil.css"}
|
||||
|
|
@ -1 +1 @@
|
|||
#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur) * 13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl) * 2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right), #0000, #000 20%, #000 80%, #0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl) * 2.2)}}
|
||||
#page-accueil{--hauteur-conteneur:calc(100svh - var(--pied-de-page-hauteur));min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);flex-flow:column;display:flex;overflow:hidden}
|
||||
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v
Normal file
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v
Normal file
Binary file not shown.
Binary file not shown.
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v
Normal file
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v
Normal file
Binary file not shown.
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm
Normal file
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm
Normal file
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue