fonc(à-propos) créé le défilement avec les images
This commit is contained in:
parent
55c8361653
commit
8450f84c0e
14 changed files with 163 additions and 114 deletions
|
|
@ -432,7 +432,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
--en-tete-section-hauteur: var(--en-tete-hauteur);
|
||||
--en-tete-logo-longueur: 80px;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
z-index: 60;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
|
|
|||
|
|
@ -1,81 +1,19 @@
|
|||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 100;
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype");
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable.ttf") format("truetype");
|
||||
unicode-range: U+0, U+D, U+20-7E, U+A0-36F, U+374-375, U+37A-37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D0-486, U+488-513, U+E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 100;
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype");
|
||||
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic.ttf") format("truetype");
|
||||
unicode-range: U+0, U+D, U+20-7E, U+A0-36F, U+374-375, U+37A-37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D0-486, U+488-513, U+E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -315,6 +253,22 @@ a.lien-bouton:active {
|
|||
a.lien-bouton:hover {
|
||||
background: var(--lien-bouton-arriere-plan-couleur-survol);
|
||||
}
|
||||
}
|
||||
|
||||
a.lien-lien {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.lien-lien:active {
|
||||
text-decoration-color: var(--couleur-jaune);
|
||||
background: var(--couleur-jaune);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a.lien-lien:hover {
|
||||
text-decoration-color: var(--couleur-jaune);
|
||||
background: var(--couleur-jaune);
|
||||
}
|
||||
|
||||
a:not([class]):hover {
|
||||
text-decoration-color: var(--couleur-noir);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,33 +6,63 @@
|
|||
margin-top: var(--page-marges-bloc-debut);
|
||||
}
|
||||
#page-a-propos .storytelling {
|
||||
padding: var(--espace-xl);
|
||||
padding: var(--espace-xl) 0;
|
||||
}
|
||||
#page-a-propos .storytelling__conteneur {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 60rem;
|
||||
overflow-x: hidden;
|
||||
width: min(60rem, 100% - 4rem);
|
||||
height: 2000px;
|
||||
margin: auto;
|
||||
border: 1px solid red;
|
||||
}
|
||||
#page-a-propos .storytelling__section {
|
||||
position: relative;
|
||||
}
|
||||
#page-a-propos .storytelling picture {
|
||||
position: absolute;
|
||||
}
|
||||
#page-a-propos .storytelling picture#image-1 {
|
||||
z-index: 20;
|
||||
left: 50%;
|
||||
width: 40%;
|
||||
}
|
||||
#page-a-propos .storytelling picture#image-2 {
|
||||
z-index: 19;
|
||||
top: 8vmin;
|
||||
scale: -1 1;
|
||||
width: 70%;
|
||||
}
|
||||
#page-a-propos .storytelling picture#image-3 {
|
||||
z-index: 21;
|
||||
top: 54vmin;
|
||||
left: 35%;
|
||||
width: 30%;
|
||||
}
|
||||
#page-a-propos .storytelling picture#image-4 {
|
||||
z-index: 20;
|
||||
top: 60vmin;
|
||||
left: 40%;
|
||||
width: 60%;
|
||||
}
|
||||
#page-a-propos .storytelling img {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
}
|
||||
#page-a-propos .storytelling img#image-1 {
|
||||
z-index: 20;
|
||||
left: 60%;
|
||||
width: 30%;
|
||||
}
|
||||
#page-a-propos .storytelling img#image-2 {
|
||||
#page-a-propos .storytelling .texte {
|
||||
position: absolute;
|
||||
z-index: 19;
|
||||
top: 15%;
|
||||
scale: -1 1;
|
||||
width: 70%;
|
||||
max-width: 15rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
#page-a-propos .storytelling .texte#texte-1 {
|
||||
top: 42vmin;
|
||||
right: 0;
|
||||
}
|
||||
#page-a-propos .storytelling .texte p + p {
|
||||
margin-top: var(--espace-m);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=page-a-propos.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":"AAEA;AACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-a-propos.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":"AAEA;AACE;EACA;EAEA;EACA;EACA;;AAMA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE","file":"page-a-propos.css"}
|
||||
|
|
@ -38,6 +38,10 @@
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
#page-accueil .storytelling__image picture {
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
#page-accueil .storytelling__image img {
|
||||
max-height: inherit;
|
||||
object-fit: contain;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"mappings":"AAAA;;;;;;;;;;;AAYA;;;;;;;;AAOA;;;;;;;AAMA;;;;;;;;;AAQA;;;;;AAIA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css"],"sourcesContent":["#page-accueil {\n /* Dimensions */\n --hauteur-conteneur: calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));\n /* Marges */\n --page-marges-bloc-debut: var(--en-tete-hauteur);\n overflow: hidden;\n display: flex;\n flex-flow: column nowrap;\n min-height: var(--hauteur-conteneur);\n max-height: var(--hauteur-conteneur);\n margin-top: var(--page-marges-bloc-debut);\n}\n#page-accueil .storytelling {\n scrollbar-width: none;\n overflow-y: scroll;\n place-items: center;\n min-height: inherit;\n max-height: inherit;\n}\n#page-accueil .storytelling__conteneur {\n display: flex;\n flex-flow: column nowrap;\n min-height: calc(var(--hauteur-conteneur) * 10);\n padding: 0 var(--espace-xl);\n}\n#page-accueil .storytelling__image {\n position: sticky;\n top: 0;\n align-content: center;\n width: 100%;\n min-height: var(--hauteur-conteneur);\n max-height: var(--hauteur-conteneur);\n}\n#page-accueil .storytelling__image[data-cache] {\n visibility: hidden;\n opacity: 0;\n}\n#page-accueil .storytelling__image img {\n scale: 0.9;\n max-height: inherit;\n margin: auto;\n object-fit: contain;\n background: transparent;\n}\n\n/*# sourceMappingURL=page-accueil.css.map */\n"],"names":[]}
|
||||
{"version":3,"mappings":"AAAA;;;;;;;;;;;AAYA;;;;;;;;AAOA;;;;;;;AAMA;;;;;;;;;AAQA;;;;;AAIA;;;;AAGA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css"],"sourcesContent":["#page-accueil {\n /* Dimensions */\n --hauteur-conteneur: calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));\n /* Marges */\n --page-marges-bloc-debut: var(--en-tete-hauteur);\n overflow: hidden;\n display: flex;\n flex-flow: column nowrap;\n min-height: var(--hauteur-conteneur);\n max-height: var(--hauteur-conteneur);\n margin-top: var(--page-marges-bloc-debut);\n}\n#page-accueil .storytelling {\n scrollbar-width: none;\n overflow-y: scroll;\n place-items: center;\n min-height: inherit;\n max-height: inherit;\n}\n#page-accueil .storytelling__conteneur {\n display: flex;\n flex-flow: column nowrap;\n min-height: calc(var(--hauteur-conteneur) * 10);\n padding: 0 var(--espace-xl);\n}\n#page-accueil .storytelling__image {\n position: sticky;\n top: 0;\n align-content: center;\n width: 100%;\n min-height: var(--hauteur-conteneur);\n max-height: var(--hauteur-conteneur);\n}\n#page-accueil .storytelling__image[data-cache] {\n visibility: hidden;\n opacity: 0;\n}\n#page-accueil .storytelling__image picture {\n max-height: inherit;\n}\n#page-accueil .storytelling__image img {\n scale: 0.9;\n max-height: inherit;\n margin: auto;\n object-fit: contain;\n background: transparent;\n}\n\n/*# sourceMappingURL=page-accueil.css.map */\n"],"names":[]}
|
||||
|
|
@ -46,11 +46,6 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#page-contact .contenu__textuel a {
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#page-contact .contenu__textuel p + p {
|
||||
margin-top: var(--espace-m);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"mappings":"AAAA;;;;;;;;;;AAaA;;;;;;;;;;;;;AAYA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;;;;;AAUA;;;;;AAIA;;;;AAGA;EACE","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-contact.css"],"sourcesContent":["#page-contact {\n /* Dimensions */\n --page-hauteur-minimale: calc(\n 100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px\n );\n /* Marges */\n --page-marges-bloc-debut: var(--en-tete-hauteur);\n display: flex;\n flex-flow: column nowrap;\n margin-top: var(--page-marges-bloc-debut);\n margin-bottom: var(--espace-xl);\n border-bottom: 1px solid var(--couleur-noir);\n}\n#page-contact .contenu {\n display: flex;\n flex-flow: column nowrap;\n place-items: center;\n width: min(50rem, 100%);\n min-height: var(--page-hauteur-minimale);\n margin: auto;\n font-weight: 500;\n font-style: italic;\n border: 1px solid var(--couleur-noir);\n border-bottom: initial;\n}\n#page-contact .contenu__en-tete {\n width: 100%;\n padding: var(--espace-m) var(--espace-xl);\n color: var(--couleur-blanc);\n background: var(--couleur-noir);\n}\n#page-contact .contenu__en-tete h2 {\n width: fit-content;\n margin: auto;\n text-transform: uppercase;\n letter-spacing: var(--espacement-inter-lettres-etendu-l);\n}\n#page-contact .contenu__textuel {\n display: flex;\n flex: 1;\n flex-flow: column nowrap;\n place-content: center;\n max-width: 34rem;\n height: 100%;\n padding: 0 var(--espace-xl);\n text-wrap: pretty;\n}\n#page-contact .contenu__textuel a {\n font-style: italic;\n text-decoration: underline;\n}\n#page-contact .contenu__textuel p + p {\n margin-top: var(--espace-m);\n}\n@media (width <= 50rem) {\n #page-contact .contenu {\n border-right: initial;\n border-left: initial;\n }\n}\n\n/*# sourceMappingURL=page-contact.css.map */\n"],"names":[]}
|
||||
{"version":3,"mappings":"AAAA;;;;;;;;;;AAaA;;;;;;;;;;;;;AAYA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;;;;;AAUA;;;;AAGA;EACE","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-contact.css"],"sourcesContent":["#page-contact {\n /* Dimensions */\n --page-hauteur-minimale: calc(\n 100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px\n );\n /* Marges */\n --page-marges-bloc-debut: var(--en-tete-hauteur);\n display: flex;\n flex-flow: column nowrap;\n margin-top: var(--page-marges-bloc-debut);\n margin-bottom: var(--espace-xl);\n border-bottom: 1px solid var(--couleur-noir);\n}\n#page-contact .contenu {\n display: flex;\n flex-flow: column nowrap;\n place-items: center;\n width: min(50rem, 100%);\n min-height: var(--page-hauteur-minimale);\n margin: auto;\n font-weight: 500;\n font-style: italic;\n border: 1px solid var(--couleur-noir);\n border-bottom: initial;\n}\n#page-contact .contenu__en-tete {\n width: 100%;\n padding: var(--espace-m) var(--espace-xl);\n color: var(--couleur-blanc);\n background: var(--couleur-noir);\n}\n#page-contact .contenu__en-tete h2 {\n width: fit-content;\n margin: auto;\n text-transform: uppercase;\n letter-spacing: var(--espacement-inter-lettres-etendu-l);\n}\n#page-contact .contenu__textuel {\n display: flex;\n flex: 1;\n flex-flow: column nowrap;\n place-content: center;\n max-width: 34rem;\n height: 100%;\n padding: 0 var(--espace-xl);\n text-wrap: pretty;\n}\n#page-contact .contenu__textuel p + p {\n margin-top: var(--espace-m);\n}\n@media (width <= 50rem) {\n #page-contact .contenu {\n border-right: initial;\n border-left: initial;\n }\n}\n\n/*# sourceMappingURL=page-contact.css.map */\n"],"names":[]}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -12,7 +12,7 @@
|
|||
--en-tete-logo-longueur: 80px;
|
||||
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
z-index: 60;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
|
|
|||
|
|
@ -8,36 +8,77 @@
|
|||
flex-flow: column nowrap;
|
||||
margin-top: var(--page-marges-bloc-debut);
|
||||
|
||||
* {
|
||||
// outline: 1px solid red;
|
||||
}
|
||||
|
||||
.storytelling {
|
||||
padding: var(--espace-xl);
|
||||
padding: var(--espace-xl) 0;
|
||||
|
||||
&__conteneur {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 60rem;
|
||||
overflow-x: hidden;
|
||||
width: min(60rem, 100% - 4rem);
|
||||
height: 2000px;
|
||||
margin: auto;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
&__section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
picture {
|
||||
position: absolute;
|
||||
|
||||
&#image-1 {
|
||||
z-index: 20;
|
||||
left: calc(90% - 40%);
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&#image-2 {
|
||||
z-index: 19;
|
||||
top: 8vmin;
|
||||
scale: -1 1;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
&#image-3 {
|
||||
z-index: 21;
|
||||
top: 54vmin;
|
||||
left: 35%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
&#image-4 {
|
||||
z-index: 20;
|
||||
top: 60vmin;
|
||||
left: calc(100% - 60%);
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
|
||||
&#image-1 {
|
||||
z-index: 20;
|
||||
left: calc(90% - 30%);
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
&#image-2 {
|
||||
.texte {
|
||||
position: absolute;
|
||||
z-index: 19;
|
||||
top: 15%;
|
||||
scale: -1 1;
|
||||
width: 70%;
|
||||
max-width: 15rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
|
||||
&#texte-1 {
|
||||
top: 42vmin;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: var(--espace-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,33 @@
|
|||
<main id="page-a-propos">
|
||||
<div class="storytelling">
|
||||
<div class="storytelling__conteneur">
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/tool11", "", 3828, 4127) }}
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/pic1", "", 903, 1080) }}
|
||||
<div
|
||||
class="storytelling__section"
|
||||
id="section-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/tool11", "", 835, 900, "image-1")
|
||||
}}
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/pic1", "", 898, 900, "image-2")
|
||||
}}
|
||||
<div
|
||||
class="texte"
|
||||
id="texte-1"
|
||||
>
|
||||
<p>
|
||||
Haïkus are short Japanese poems written in three lines to capture the beauty of small details in the every
|
||||
day life.
|
||||
</p>
|
||||
<p>More than poetry, it's a philosophy.</p>
|
||||
</div>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/tool16", "", 900, 900, "image-3")
|
||||
}}
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/pic5", "", 900, 607, "image-4")
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% macro genere_source_img_multi_formats(rel_url, alt="", width, height) %}
|
||||
<picture>
|
||||
{% macro genere_source_img_multi_formats(rel_url, alt="", width, height, id="") %}
|
||||
<picture id="{{ id }}">
|
||||
<source
|
||||
srcset="{{ rel_url }}.avif"
|
||||
type="image/avif"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue