init
This commit is contained in:
commit
de73fc619a
3560 changed files with 747274 additions and 0 deletions
159
web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css
Executable file
159
web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css
Executable file
|
|
@ -0,0 +1,159 @@
|
|||
#page-a-propos {
|
||||
--images-longueur-maximale: 1300px;
|
||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||
--images-marges-ligne: var(--espace-xl) * 2;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin-top: var(--page-marges-bloc-debut);
|
||||
}
|
||||
#page-a-propos .storytelling {
|
||||
padding: var(--espace-xl) 0;
|
||||
color: var(--couleur-gris-fonce);
|
||||
}
|
||||
#page-a-propos .storytelling__conteneur {
|
||||
position: relative;
|
||||
width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));
|
||||
margin: auto;
|
||||
}
|
||||
#page-a-propos .storytelling picture {
|
||||
position: relative;
|
||||
}
|
||||
#page-a-propos .storytelling picture::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 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;
|
||||
}
|
||||
#page-a-propos .storytelling img {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
height: 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 (width <= 700px) {
|
||||
#page-a-propos {
|
||||
--images-marges-ligne: var(--espace-m);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clignotement {
|
||||
to {
|
||||
filter: opacity(30%);
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=page-a-propos.css.map */
|
||||
Loading…
Add table
Add a link
Reference in a new issue