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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue