202511260822

frontend/protos/index.html

@@ -38,7 +38,8 @@
 
 <script>
   logMsgAddActiveSection('intersectionObserver');
-  logMsgAddActiveSection('HtmlElement');
+  logMsgAddActiveSection('htmlElement');
+  logMsgAddActiveSection('etatSection');
 </script>
 
 <script>
@@ -115,10 +116,12 @@
   }
 
   after_section_header.addEventListener("click", function() {
+    logMsg('etatSection','toggle section_header ');
     toggleElement(section_header);
   });
 
   after_section_synthese.addEventListener("click", function() {
+    logMsg('etatSection','toggle section_synthese ');
     toggleElement(section_synthese);
   });
 
@@ -126,11 +129,12 @@
     const element = document.querySelector(elementSelector);
     if (element) {
       element.scrollIntoView();
-      logMsg('HtmlElement','scrollTo '+elementSelector);
+      logMsg('htmlElement','scrollTo '+elementSelector);
     }
   }
 
   function etatSections(etat) {
+    logMsg('etatSection','Etat courant '+etat);
     switch (etat) {
       case 1 :
         scrollToElement('#div_before_header');

frontend/protos/styles.css

@@ -19,58 +19,96 @@
   --couleur-texte: black;
   --couleur-fond: var(--couleur-clair);
 
-  --header-height: 400px;
-  --nav-height: 80px;
-  --synthese-min-height: 150px;
-  --principale-min-height: 1000px;
-  --footer-min-height: 80px;
+  --marker-before-height: 5px;
+  --marker-after-height: 12px;
+  --section-min-height: 80px;
+
+  --section-header-height: 120px;
+  --section-navbar-height: var(--section-min-height);
+  --section-synthese-height: 120px;
+  --section-principale-height: 800px;
+}
+
+@font-face {
+	font-family: 'Fonte-Texte';
+	font-display: fallback;
+	/* Penser à bien héberger la font sur le même domaine que mon site */
+	src: url(../fonts/Fonte-Texte.woff2) format('woff2');
+	/* Réutiliser ici exactement la même liste unicode que ci-dessus */
+	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
+		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
+		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
+		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
+}
+
+@font-face {
+	font-family: 'Fonte-Titre';
+	font-display: fallback;
+	/* Penser à bien héberger la font sur le même domaine que mon site */
+	src: url(../fonts/Fonte-Titre.woff2) format('woff2');
+	/* Réutiliser ici exactement la même liste unicode que ci-dessus */
+	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
+		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
+		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
+		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
 }
 
 html {
-  font-family: monospace;
-  max-width: 95%;
-  padding-left: 0;
-  padding-right: 0;
-  margin: 0 auto;
-  background: var(--couleur-fond);
+    font-family: Fonte-Texte, monospace;
+    width: 95%;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 auto;
+    background: var(--couleur-fond);
+    color: var(--couleur-texte);
 }
 
 body {
-  padding: 0;
-  margin: 0;
-  min-height:1000px;
+    padding: 0;
+    margin: 0;
+    min-height:1000px;
 }
 
-header {
+.div_before_section {
     color: var(--couleur-texte);
-    background-color: aqua;
-    height: var(--header-height);
+    background-color: black;
+    height: var(--marker-before-height);
 }
-
-nav {
-    position: sticky;
-    top: 0px;
+.div_section {
+    min-height: var(--section-min-height);
+}
+.div_after_section {
     color: var(--couleur-texte);
-    background-color: yellow;
-    height: var(--nav-height);
+    background-color: red;
+    height: var(--marker-after-height);
 }
 
-#synthese {
-    color: var(--couleur-texte);
-    background-color: rgb(252, 130, 201);
-    min-height: var(--synthese-min-height);
+.header {
+    height: var(--section-header-height);
+    background-color: aqua;
+}
+.navbar {
+    height: var(--section-navbar-height);
+    background-color: yellow;
 }
 
-#principale {
-    color: var(--couleur-texte);
-    background-color: rgb(63, 15, 177);
-    min-height: var(--principale-min-height);
+.navbar_fixed {
+    position: fixed;
+    top: 0;
+    width: 70%;
+}
+.div_before_synthese_when_navbar_fixed {
+    height: calc(var(--section-navbar-height) - var(--marker-after-height) - var(--marker-before-height));
 }
 
-footer {
-    position: sticky;
-    bottom: 0px;
-    color: var(--couleur-texte);
-    background-color: rgb(9, 138, 15);
-    min-height: var(--footer-min-height);
+.synthese {
+    background-color: pink;
+    height: var(--section-synthese-height);
+}
+.principale {
+    height: var(--section-principale-height);
 }
+.footer {
+    background-color: greenyellow;
+}
+