2025-07-03
- étoffe le fichier `JOURNAL` avec les nouveaux changements majeurs. - propose une tâche _Justfile_ pour un rechargement à chaud primitif lors de changements CSS. - ne précompresse pas et ne propose plus de versions « legacy » des scripts JS en methodes développement. - appose correctement `aria-current` sur le lien de la page courante dans les deux menus de navigation. - remplace une image statique « Scroll down » avec une animation SVG reposant sur du texte et des chemins. - renomme moultes choses.
This commit is contained in:
parent
b85a03a141
commit
d30b83d093
49 changed files with 830 additions and 359 deletions
|
|
@ -2,21 +2,117 @@
|
|||
{% import "macros/images.twig" as images %}
|
||||
|
||||
{% block contenu %}
|
||||
<main id="page-accueil">
|
||||
<main
|
||||
id="page-accueil"
|
||||
aria-label="Scroll down to navigate through the pictures"
|
||||
>
|
||||
<div class="storytelling">
|
||||
<div class="storytelling__conteneur">
|
||||
<div
|
||||
class="storytelling__image"
|
||||
data-index="0"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll0", "", 903, 1080, "image-scroll0")
|
||||
}}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="storytelling__conteneur"
|
||||
inert
|
||||
>
|
||||
{# Animation #}
|
||||
<div class="storytelling__animation no-js">
|
||||
<svg
|
||||
class="animation-conteneur"
|
||||
height="90px"
|
||||
preserveAspectRatio="xMidYMin"
|
||||
viewBox="0 0 1200 90"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg
|
||||
y="50%"
|
||||
class="animation-texte"
|
||||
>
|
||||
<path
|
||||
d="m0 0c600-90 600 90 1200 0"
|
||||
fill="transparent"
|
||||
id="curve-1"
|
||||
/>
|
||||
|
||||
{# TODO: Créer une fonction pour générer les images #}
|
||||
<text dominant-baseline="middle">
|
||||
<textPath
|
||||
id="text-path-1"
|
||||
xlink:href="#curve-1"
|
||||
>
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset"
|
||||
dur="5s"
|
||||
fill="remove"
|
||||
from="-50%"
|
||||
to="0%"
|
||||
repeatCount="indefinite"
|
||||
xlink:href="#text-path-1"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<text dominant-baseline="middle">
|
||||
<textPath
|
||||
id="text-path-2"
|
||||
xlink:href="#curve-1"
|
||||
>
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset"
|
||||
dur="5s"
|
||||
fill="remove"
|
||||
from="0%"
|
||||
to="50%"
|
||||
repeatCount="indefinite"
|
||||
xlink:href="#text-path-2"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<text dominant-baseline="middle">
|
||||
<textPath
|
||||
id="text-path-3"
|
||||
xlink:href="#curve-1"
|
||||
>
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset"
|
||||
dur="5s"
|
||||
fill="remove"
|
||||
from="50%"
|
||||
to="100%"
|
||||
repeatCount="indefinite"
|
||||
xlink:href="#text-path-3"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<text dominant-baseline="middle">
|
||||
<textPath
|
||||
id="text-path-4"
|
||||
xlink:href="#curve-1"
|
||||
>
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset"
|
||||
dur="5s"
|
||||
fill="remove"
|
||||
from="100%"
|
||||
to="150%"
|
||||
repeatCount="indefinite"
|
||||
xlink:href="#text-path-4"
|
||||
/>
|
||||
</text>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{# Images #}
|
||||
<div
|
||||
class="storytelling__image"
|
||||
data-index="1"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", "", 903, 1080, "image-scroll1")
|
||||
|
|
@ -24,10 +120,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="2"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", "", 903, 1080, "image-scroll2")
|
||||
|
|
@ -35,10 +131,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="3"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", "", 903, 1080, "image-scroll3")
|
||||
|
|
@ -46,10 +142,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="4"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", "", 903, 1080, "image-scroll4")
|
||||
|
|
@ -57,10 +153,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="5"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", "", 903, 1080, "image-scroll5")
|
||||
|
|
@ -68,10 +164,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="6"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", "", 903, 1080, "image-scroll6")
|
||||
|
|
@ -79,10 +175,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="7"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", "", 903, 1080, "image-scroll7")
|
||||
|
|
@ -90,10 +186,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="8"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", "", 903, 1080, "image-scroll8")
|
||||
|
|
@ -101,10 +197,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="9"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", "", 903, 1080, "image-scroll9")
|
||||
|
|
@ -112,10 +208,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="10"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", "", 903, 1080, "image-scroll10")
|
||||
|
|
@ -123,10 +219,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="11"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", "", 903, 1080, "image-scroll11")
|
||||
|
|
@ -134,10 +230,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="12"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", "", 903, 1080, "image-scroll12")
|
||||
|
|
@ -145,10 +241,10 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
aria-hidden
|
||||
class="storytelling__image"
|
||||
data-cache
|
||||
data-caché
|
||||
data-index="13"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", "", 903, 1080, "image-scroll13")
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
id="bouton-plus-de-produits"
|
||||
type="button"
|
||||
>
|
||||
Show more products
|
||||
Show more
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
</button>
|
||||
</section>
|
||||
|
||||
{# TODO: Utiliser un Menu WordPress #}
|
||||
{# TODO: Utiliser des <span> À L'INTÉRIEUR de <li> #}
|
||||
{# TODO: Utiliser un Menu WordPress ? #}
|
||||
<nav
|
||||
class="menu-navigation"
|
||||
id="menu-navigation-en-tete"
|
||||
|
|
@ -28,6 +27,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ page_courante == pages.home.lien ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.home.lien }}"
|
||||
>
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ est_page_boutique ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.shop.lien }}"
|
||||
>
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ page_courante == pages.about.lien ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.about.lien }}"
|
||||
>
|
||||
|
|
@ -65,6 +67,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ page_courante == pages.contact.lien ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.contact.lien }}"
|
||||
>
|
||||
|
|
@ -110,6 +113,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ page_courante == pages.home.lien ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.home.lien }}"
|
||||
>
|
||||
|
|
@ -123,6 +127,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ est_page_boutique ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.shop.lien }}"
|
||||
>
|
||||
|
|
@ -136,6 +141,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ page_courante == pages.about.lien ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.about.lien }}"
|
||||
>
|
||||
|
|
@ -149,6 +155,7 @@
|
|||
>
|
||||
<span>
|
||||
<a
|
||||
{{ page_courante == pages.contact.lien ? "aria-current=page" : ""}}
|
||||
class="lien-menu"
|
||||
href="{{ pages.contact.lien }}"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue