From 89b2bd7090e6a65914ec67311c62f78e8682cc11 Mon Sep 17 00:00:00 2001 From: Julien Martin Date: Wed, 22 Apr 2026 18:58:58 +0200 Subject: [PATCH] =?UTF-8?q?feat(vitrine):=20proposition=20=C2=AB=20Cahier?= =?UTF-8?q?=20pop=20=C2=BB=20(n=C3=A9o-galet=20/=20fanzine)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Syne + IBM Plex Mono, bordures épaisses, ombres décalées - Accueil type polaroid + stickers + bandeau sombre - Nav sticky, menu mobile, pied de page assorti - Pages intérieures dans cadre blanc contrasté Made-with: Cursor --- content/_index.md | 71 ++-- layouts/_default/baseof.html | 54 ++-- layouts/_default/list.html | 6 +- layouts/_default/single.html | 10 +- layouts/index.html | 35 ++ layouts/partials/footer.html | 19 +- static/css/style.css | 607 ++++++++++++++++++++++++++--------- static/js/site.js | 42 +++ 8 files changed, 604 insertions(+), 240 deletions(-) create mode 100644 layouts/index.html create mode 100644 static/js/site.js diff --git a/content/_index.md b/content/_index.md index 13a66de..2c0d35c 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,48 +1,33 @@ --- -title: "P'titsPas - Plateforme Publique de Gestion Petite Enfance pour Collectivités" +title: "P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire" description: "Solution numérique publique pour les collectivités : gestion transparente des relations parents-assistantes maternelles, sans notation ni algorithme opaque. Égalité et neutralité garanties." keywords: ["P'titsPas", "ptitspas", "p'tits pas", "ptits pas", "petitspas", "petit pas", "petits pas", "opetitspas", "pitispas", "ptitpas", "p'titpas", "Ptitspas", "PTITSPAS", "petite enfance", "assistante maternelle", "collectivité", "commune", "garde enfant", "RPE", "relais petite enfance", "plateforme publique", "transparence", "neutralité", "gestion municipale petite enfance", "plateforme numérique collectivité", "mise en relation parents assistante maternelle", "solution publique garde enfant", "service public petite enfance", "accompagnement parental collectivité", "transparence service public", "égalité accès garde enfant", "politique municipale enfance", "dématérialisation services municipaux"] date: 2025-05-17T12:00:00+02:00 +hero_image: "/images/page_login_4.1.png" +hero_image_alt: "Logo P'titsPas" +hero_tagline: "Zéro algo opaque · Zéro notation · 100 % collectivité" +intro_md: | + **Modernisez la mise en relation Parents - Assistantes Maternelles avec une plateforme 100% éthique, conçue pour les collectivités.** + + Les RPE sont saturés, la gestion administrative est lourde et les parents peinent à trouver une information fiable ? + **P'titsPas** centralise et sécurise tout le parcours d'accueil individuel, tout en redonnant la main à la collectivité. + + Plus qu'un outil de gestion, c'est la garantie d'un **Service Public Numérique** exemplaire. +ethics: + - title: "Sans notation" + detail: " des pros" + - title: "Sans algorithme opaque" + detail: " de sélection" + - title: "100 % conforme" + detail: " aux valeurs de la République" +why_md: | + ## Pourquoi choisir P'titsPas pour votre commune ? + + Là où les plateformes privées "ubérisent" la garde d'enfant, P'titsPas **restaure le lien de confiance** et la neutralité du service public. + + * **🏛️ Souveraineté des Données :** Vos données restent sur le territoire, protégées et maîtrisées (RGPD strict). + * **⚖️ Équité Territoriale :** Offrez la même qualité de service à tous les administrés, quel que soit leur quartier. + * **🤝 Valorisation des RPE :** Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur l'accompagnement humain. + * **📱 Simplicité d'Usage :** Une interface pensée pour tous (parents, assistantes mat', agents), accessible sur mobile et PC. +cta_title: "Reprenez la main sur votre politique petite enfance" --- - -
Logo P'titsPas
- -# P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire - -
- -**Modernisez la mise en relation Parents - Assistantes Maternelles avec une plateforme 100% éthique, conçue pour les collectivités.** - -Les RPE sont saturés, la gestion administrative est lourde et les parents peinent à trouver une information fiable ? -**P'titsPas** centralise et sécurise tout le parcours d'accueil individuel, tout en redonnant la main à la collectivité. - -Plus qu'un outil de gestion, c'est la garantie d'un **Service Public Numérique** exemplaire : -* **Sans notation** des professionnels -* **Sans algorithme opaque** de sélection -* **100% conforme** aux valeurs de la République - -
- ---- -
- -## Pourquoi choisir P'titsPas pour votre commune ? - -Là où les plateformes privées "ubérisent" la garde d'enfant, P'titsPas **restaure le lien de confiance** et la neutralité du service public. - -* **🏛️ Souveraineté des Données :** Vos données restent sur le territoire, protégées et maîtrisées (RGPD strict). -* **⚖️ Équité Territoriale :** Offrez la même qualité de service à tous les administrés, quel que soit leur quartier. -* **🤝 Valorisation des RPE :** Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur l'accompagnement humain. -* **📱 Simplicité d'Usage :** Une interface pensée pour tous (parents, assistantes mat', agents), accessible sur mobile et PC. - -
- ---- -
- -### Reprenez le contrôle de votre politique Petite Enfance - -Voir les fonctionnalités clés -Demander une démo - -
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 85ef68e..6dc7622 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,40 +3,26 @@ - - {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }} - - {{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }} {{ end }} - - - - - - - - - - - + - - - - -
- + + +
+
+ + +
-
+
{{ block "main" . }}{{ .Content }}{{ end }}
{{ partial "footer.html" . }} + - \ No newline at end of file + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 7ab2eb2..e31dace 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,3 +1,5 @@ {{ define "main" }} - {{ .Content }} -{{ end }} \ No newline at end of file +
+ {{ .Content }} +
+{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 91a0583..aad8c34 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,7 @@ {{ define "main" }} -
- {{ .Content }} -
-{{ end }} \ No newline at end of file +
+
+ {{ .Content }} +
+
+{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..69769b6 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,35 @@ +{{ define "main" }} +
+
+
+ {{ .Params.hero_image_alt | default +
+
+

{{ .Params.hero_tagline | default "Service public numérique — petite enfance" }}

+

{{ .Title }}

+
+
+
+
+ {{ with .Params.intro_md }}{{ . | markdownify }}{{ end }} +
+
+
+ {{ range .Params.ethics }} +
{{ .title }}{{ .detail }}
+ {{ end }} +
+
+
+
+ {{ with .Params.why_md }}{{ . | markdownify }}{{ end }} +
+
+

{{ .Params.cta_title | default "Passer à l'action" }}

+ +
+
+{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 11546ee..20d72a3 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,11 +1,8 @@ - \ No newline at end of file + diff --git a/static/css/style.css b/static/css/style.css index 526fce1..8fd0c71 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,180 +1,487 @@ -/* Charte Graphique P'titsPas */ +/* Proposition « Cahier pop » — néo-galet / fanzine (très différent de la vitrine classique) */ + +@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@400;600;700;800&display=swap"); -/* Variables de Couleurs */ :root { - --color-peche-doux: #FFD7A8; - --color-menthe-claire: #AEE1CD; - --color-rose-tendre: #F6B2C4; - --color-jaune-pale: #FFECB3; - --color-lavande: #E6E6FA; /* Approximation, à ajuster si vous avez un hex exact */ - --color-corail-leger: #FFDAB9; /* Approximation, à ajuster */ - --color-texte-principal: #333333; - --color-texte-secondaire: #555555; - --color-blanc: #FFFFFF; - --padding-module: 8px; + --ink: #14110f; + --paper: #fffef7; + --tape: #ffeb80; + --mint-pop: #7dd3c0; + --peach-pop: #ffb4a2; + --lav-pop: #c4b5fd; + --border: 3px solid var(--ink); + --shadow-hard: 6px 6px 0 var(--ink); + --shadow-soft: 4px 4px 0 rgba(20, 17, 15, 0.35); + --font-display: "Syne", system-ui, sans-serif; + --font-mono: "IBM Plex Mono", ui-monospace, monospace; + --nav-cut: 52rem; } -/* Import des polices (exemple avec Google Fonts) */ -@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Open+Sans:wght@400;700&family=Poppins:wght@700&family=Quicksand:wght@500;700&family=Montserrat:wght@400;700&display=swap'); -/* Si vous avez une police script/brushed spécifique, elle devra être importée ici aussi, potentiellement localement */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} -/* Styles de Base */ -body { - font-family: 'Open Sans', sans-serif; - color: var(--color-texte-principal); - background-color: var(--color-blanc); /* Ou une teinte pastel très claire comme fond général */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body.theme-cahier-pop { margin: 0; - padding: 0; - line-height: 1.6; + font-family: var(--font-display); + font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1rem); + line-height: 1.55; + color: var(--ink); + background-color: var(--paper); + background-image: + radial-gradient(circle at 12% 18%, rgba(255, 180, 162, 0.35) 0%, transparent 42%), + radial-gradient(circle at 88% 8%, rgba(196, 181, 253, 0.4) 0%, transparent 38%), + radial-gradient(circle at 1px 1px, rgba(20, 17, 15, 0.07) 1px, transparent 0); + background-size: auto, auto, 18px 18px; } -main { - padding: calc(var(--padding-module) * 3); /* 24px */ - max-width: 960px; +:focus-visible { + outline: 3px solid var(--mint-pop); + outline-offset: 3px; +} + +.skip-link { + position: absolute; + left: -9999px; + z-index: 2000; + padding: 0.75rem 1rem; + background: var(--ink); + color: var(--paper); + font-weight: 700; + text-decoration: none; + border: var(--border); + box-shadow: var(--shadow-hard); +} + +.skip-link:focus { + left: 0.75rem; + top: 0.75rem; +} + +/* Header */ +.cp-header { + position: sticky; + top: 0; + z-index: 100; + background: var(--tape); + border-bottom: var(--border); + box-shadow: 0 4px 0 rgba(20, 17, 15, 0.12); +} + +.cp-header__inner { + max-width: 72rem; + margin: 0 auto; + padding: 0.75rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; +} + +.cp-logo { + font-weight: 800; + font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); + letter-spacing: -0.03em; + text-transform: uppercase; + text-decoration: none; + color: var(--ink); + border: var(--border); + padding: 0.35rem 0.65rem; + background: #fff; + box-shadow: var(--shadow-soft); + transform: rotate(-1.5deg); +} + +.cp-logo:hover { + transform: rotate(0deg) translate(-2px, -2px); + box-shadow: var(--shadow-hard); +} + +.cp-nav { + position: relative; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.cp-nav-toggle { + display: flex; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 2.75rem; + height: 2.75rem; + padding: 0; + border: var(--border); + background: #fff; + cursor: pointer; + box-shadow: var(--shadow-soft); +} + +.cp-nav-toggle span { + display: block; + width: 1.1rem; + height: 3px; + margin: 0 auto; + background: var(--ink); +} + +.cp-nav-panel { + overflow: hidden; + max-height: 0; + transition: max-height 0.35s ease; +} + +.cp-nav.is-open .cp-nav-panel { + max-height: 22rem; +} + +.cp-nav-list { + list-style: none; + margin: 0; + padding: 0.75rem 0 0; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: flex-end; +} + +.cp-nav-list a { + font-family: var(--font-mono); + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + text-decoration: none; + color: var(--ink); + border: var(--border); + padding: 0.45rem 0.65rem; + background: #fff; + display: inline-block; + box-shadow: 3px 3px 0 var(--ink); +} + +.cp-nav-list a:hover { + transform: translate(-2px, -2px); + box-shadow: 5px 5px 0 var(--ink); +} + +@media (min-width: 52rem) { + .cp-nav-toggle { + display: none; + } + + .cp-nav-panel { + max-height: none !important; + overflow: visible; + padding-top: 0; + } + + .cp-nav-list { + padding-top: 0; + } +} + +@media (max-width: 51.99rem) { + .cp-nav-panel { + position: absolute; + right: 0; + top: calc(100% + 0.35rem); + left: 0; + background: var(--paper); + border: var(--border); + box-shadow: var(--shadow-hard); + padding: 0.75rem; + } + + .cp-nav-list { + flex-direction: column; + align-items: stretch; + } +} + +/* Main shell */ +.cp-main { + max-width: 72rem; + margin: 0 auto; + padding: 1.5rem 1rem 3rem; +} + +.cp-page { + border: var(--border); + background: #fff; + box-shadow: var(--shadow-hard); + padding: clamp(1.25rem, 3vw, 2.25rem); +} + +.cp-page .content { + max-width: 48rem; margin: 0 auto; } -h1 { - font-family: 'Merienda', cursive; /* Police Script pour titres d'impact */ - color: var(--color-texte-principal); - /* Peut nécessiter des ajustements de taille ou de graisse spécifiques */ - /* font-weight: 700; /* ou 400 selon le style désiré */ +/* Home */ +.cp-hero { + display: grid; + gap: 1.5rem; + margin-bottom: 2rem; + align-items: start; } -h2, h3, h4, h5, h6 { - font-family: 'Poppins', sans-serif; /* Pour les sous-titres et autres titres */ - color: var(--color-texte-principal); +@media (min-width: 52rem) { + .cp-hero { + grid-template-columns: 1fr 1.05fr; + } } -/* Accroches et sous-titres (exemples) */ -.accroche { - font-family: 'Quicksand', sans-serif; - font-weight: 700; - color: var(--color-texte-secondaire); +.cp-polaroid { + border: var(--border); + background: #fff; + padding: 0.75rem 0.75rem 2.25rem; + box-shadow: var(--shadow-hard); + transform: rotate(-2.2deg); + max-width: 22rem; + margin: 0 auto; } -a { - color: var(--color-corail-leger); /* Corail léger pour les liens */ - text-decoration: none; +@media (min-width: 52rem) { + .cp-polaroid { + margin: 0; + } } -a:hover { - text-decoration: underline; -} - -/* Header / Navigation */ -header nav { - background-color: var(--color-menthe-claire); /* Menthe claire pour le header */ - padding: var(--padding-module) 0; -} - -header nav ul { - list-style-type: none; - padding: 0 calc(var(--padding-module) * 2); - text-align: center; - margin: 0; -} - -header nav ul li { - display: inline; - margin-right: calc(var(--padding-module) * 2.5); /* 20px */ -} - -header nav ul li a { - color: var(--color-texte-principal); /* Texte plus foncé sur fond pastel clair */ - text-decoration: none; - padding: calc(var(--padding-module) * 1.5) var(--padding-module); - display: inline-block; - font-family: 'Quicksand', sans-serif; - font-weight: 700; - border-radius: calc(var(--padding-module) / 2); /* 4px */ -} - -header nav ul li a:hover { - background-color: var(--color-peche-doux); /* Pêche doux au survol */ - text-decoration: none; -} - -/* Style pour l'image du logo sur la page d'accueil */ -.logo-accueil img { - width: 100%; - max-height: 400px; - object-fit: cover; - display: block; - margin-bottom: calc(var(--padding-module) * 4); /* 32px */ - border-radius: var(--padding-module); /* Coins arrondis style galet */ -} - -/* Boutons */ -button, -input[type="submit"], -.cta-button { - font-family: 'Quicksand', sans-serif; - font-weight: 700; - background-color: var(--color-peche-doux); /* Pêche doux pour les boutons primaires */ - color: var(--color-texte-principal); - border: none; - padding: calc(var(--padding-module) * 1.5) calc(var(--padding-module) * 3); - border-radius: calc(var(--padding-module) * 3); /* Forme de galet allongé */ - cursor: pointer; - text-decoration: none; - display: inline-block; - margin-top: var(--padding-module); - transition: background-color 0.3s ease; -} - -button:hover, -input[type="submit"]:hover, -.cta-button:hover { - background-color: var(--color-rose-tendre); /* Rose tendre au survol */ -} - -/* Formulaires (basique) */ -form div { - margin-bottom: calc(var(--padding-module) * 2); -} - -form label { +.cp-polaroid img { display: block; - margin-bottom: var(--padding-module); - font-family: 'Quicksand', sans-serif; -} - -form input[type="text"], -form input[type="email"], -form input[type="tel"], -form textarea { width: 100%; - padding: var(--padding-module); - border: 1px solid var(--color-menthe-claire); - border-radius: calc(var(--padding-module) / 2); /* 4px */ - box-sizing: border-box; /* Important pour que padding ne change pas la largeur totale */ - font-family: 'Open Sans', sans-serif; + height: auto; + border: var(--border); } -/* Sections de contenu - style galet */ -.content-section { - background-color: var(--color-blanc); - padding: calc(var(--padding-module) * 3); - margin-bottom: calc(var(--padding-module) * 3); - border-radius: calc(var(--padding-module) * 2); /* 16px, angles arrondis */ - box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Ombre douce */ +.cp-hero-copy h1 { + font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.85rem); + line-height: 1.08; + margin: 0 0 0.75rem; + letter-spacing: -0.04em; +} + +.cp-tagline { + font-family: var(--font-mono); + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.12em; + border: var(--border); + display: inline-block; + padding: 0.35rem 0.5rem; + background: var(--lav-pop); + box-shadow: 3px 3px 0 var(--ink); + margin-bottom: 1rem; +} + +.cp-zine-grid { + display: grid; + gap: 1rem; + margin-bottom: 2rem; +} + +@media (min-width: 40rem) { + .cp-zine-grid { + grid-template-columns: 1.35fr 1fr; + } +} + +.cp-panel { + border: var(--border); + background: #fff; + padding: 1.25rem; + box-shadow: var(--shadow-soft); +} + +.cp-panel--mint { + background: color-mix(in srgb, var(--mint-pop) 55%, #fff); +} + +.cp-stickers { + display: flex; + flex-direction: column; + gap: 0.65rem; +} + +.cp-sticker { + font-family: var(--font-mono); + font-size: 0.78rem; + font-weight: 600; + border: var(--border); + padding: 0.55rem 0.65rem; + background: var(--peach-pop); + box-shadow: 3px 3px 0 var(--ink); + transform: rotate(var(--rot, 0deg)); +} + +.cp-sticker:nth-child(1) { + --rot: -0.8deg; +} + +.cp-sticker:nth-child(2) { + --rot: 1deg; + background: var(--lav-pop); +} + +.cp-sticker:nth-child(3) { + --rot: -0.4deg; + background: var(--tape); +} + +.cp-sticker strong { + display: block; + font-family: var(--font-display); + font-size: 0.95rem; + text-transform: none; + letter-spacing: 0; + margin-bottom: 0.15rem; +} + +.cp-band { + border: var(--border); + background: var(--ink); + color: var(--paper); + padding: 1.5rem 1.25rem; + box-shadow: var(--shadow-hard); + margin-bottom: 2rem; +} + +.cp-band h2 { + margin-top: 0; + color: var(--tape); + font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem); +} + +.cp-band a { + color: var(--mint-pop); +} + +.cp-cta { + text-align: center; + border: var(--border); + padding: 1.75rem 1rem; + background: linear-gradient(135deg, var(--peach-pop), var(--tape)); + box-shadow: var(--shadow-hard); +} + +.cp-cta h2 { + margin-top: 0; +} + +.cp-btn { + font-family: var(--font-mono); + font-size: 0.82rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + text-decoration: none; + color: var(--ink); + border: var(--border); + padding: 0.65rem 1.1rem; + background: #fff; + display: inline-block; + margin: 0.35rem; + box-shadow: var(--shadow-soft); +} + +.cp-btn:hover { + transform: translate(-3px, -3px); + box-shadow: var(--shadow-hard); +} + +/* Legacy content pages */ +body.theme-cahier-pop .logo-accueil img { + border: var(--border); + box-shadow: var(--shadow-hard); +} + +body.theme-cahier-pop .content-section { + border: var(--border); + background: #fff; + padding: 1.25rem; + margin-bottom: 1.25rem; + box-shadow: var(--shadow-soft); +} + +body.theme-cahier-pop h1, +body.theme-cahier-pop h2, +body.theme-cahier-pop h3 { + font-family: var(--font-display); + letter-spacing: -0.02em; +} + +body.theme-cahier-pop a { + color: var(--ink); + font-weight: 600; + text-decoration-thickness: 2px; +} + +body.theme-cahier-pop .cta-button { + font-family: var(--font-mono); + font-size: 0.82rem; + text-transform: uppercase; + letter-spacing: 0.06em; + border: var(--border); + background: var(--tape); + color: var(--ink); + padding: 0.6rem 1rem; + box-shadow: var(--shadow-soft); + border-radius: 0; +} + +body.theme-cahier-pop .cta-button:hover { + transform: translate(-2px, -2px); + box-shadow: var(--shadow-hard); +} + +body.theme-cahier-pop form input, +body.theme-cahier-pop form textarea { + border: var(--border); + font-family: var(--font-display); +} + +body.theme-cahier-pop button, +body.theme-cahier-pop input[type="submit"] { + font-family: var(--font-mono); + text-transform: uppercase; + border: var(--border); + box-shadow: var(--shadow-soft); + cursor: pointer; } /* Footer */ -footer { - background-color: var(--color-jaune-pale); /* Jaune pâle pour le footer */ - padding: calc(var(--padding-module) * 2.5) 0; +.cp-footer { + border-top: var(--border); + background: var(--ink); + color: var(--paper); + padding: 1.5rem 1rem; text-align: center; - border-top: 1px solid var(--color-peche-doux); - margin-top: calc(var(--padding-module) * 5); } -footer p { - margin: var(--padding-module) 0; - font-size: 0.9em; +.cp-footer a { + color: var(--mint-pop); + font-family: var(--font-mono); + font-size: 0.78rem; + text-transform: uppercase; + letter-spacing: 0.08em; + margin: 0 0.5rem; } - -footer a { - color: var(--color-texte-secondaire); -} \ No newline at end of file diff --git a/static/js/site.js b/static/js/site.js new file mode 100644 index 0000000..b2a6fa5 --- /dev/null +++ b/static/js/site.js @@ -0,0 +1,42 @@ +(function () { + var nav = document.getElementById("cp-nav"); + if (!nav) return; + var toggle = document.getElementById("cp-nav-toggle"); + var mq = window.matchMedia("(max-width: 51.99rem)"); + + function setOpen(open) { + nav.classList.toggle("is-open", open); + if (toggle) { + toggle.setAttribute("aria-expanded", open ? "true" : "false"); + toggle.setAttribute("aria-label", open ? "Fermer le menu" : "Ouvrir le menu"); + } + } + + if (toggle) { + toggle.addEventListener("click", function () { + var next = !nav.classList.contains("is-open"); + setOpen(next); + if (next) { + var first = nav.querySelector(".cp-nav-list a"); + if (first) requestAnimationFrame(function () { first.focus(); }); + } + }); + } + + document.addEventListener("keydown", function (e) { + if (e.key === "Escape" && nav.classList.contains("is-open")) { + setOpen(false); + if (toggle) toggle.focus(); + } + }); + + nav.querySelectorAll(".cp-nav-list a").forEach(function (a) { + a.addEventListener("click", function () { + if (mq.matches) setOpen(false); + }); + }); + + mq.addEventListener("change", function (ev) { + if (!ev.matches) setOpen(false); + }); +})();