tibo/template
1
0
Fork 0
mirror of https://git.topisto.net/tibo/template.git synced 2026-03-31 17:19:10 +00:00
Code Issues Releases Wiki Activity

202511260822

Browse Source
This commit is contained in:
Thibaud
2025-11-26 08:22:51 +01:00
parent 3870cb21ee
commit 3a562b6d26
2 changed files with 81 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/protos/index.html
View File

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

112
frontend/protos/styles.css
View File

@@ -19,58 +19,96 @@
--couleur-texte: black; --couleur-texte: black;
--couleur-fond: var(--couleur-clair); --couleur-fond: var(--couleur-clair);
--header-height: 400px; --marker-before-height: 5px;
--nav-height: 80px; --marker-after-height: 12px;
--synthese-min-height: 150px; --section-min-height: 80px;
--principale-min-height: 1000px;
--footer-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 { html {
font-family: monospace; font-family: Fonte-Texte, monospace;
max-width: 95%; width: 95%;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
margin: 0 auto; margin: 0 auto;
background: var(--couleur-fond); background: var(--couleur-fond);
color: var(--couleur-texte);
} }
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
min-height:1000px; min-height:1000px;
} }
header { .div_before_section {
color: var(--couleur-texte); color: var(--couleur-texte);
background-color: black;
height: var(--marker-before-height);
}
.div_section {
min-height: var(--section-min-height);
}
.div_after_section {
color: var(--couleur-texte);
background-color: red;
height: var(--marker-after-height);
}
.header {
height: var(--section-header-height);
background-color: aqua; background-color: aqua;
height: var(--header-height);
} }
.navbar {
nav { height: var(--section-navbar-height);
position: sticky;
top: 0px;
color: var(--couleur-texte);
background-color: yellow; background-color: yellow;
height: var(--nav-height);
} }
#synthese { .navbar_fixed {
color: var(--couleur-texte); position: fixed;
background-color: rgb(252, 130, 201); top: 0;
min-height: var(--synthese-min-height); width: 70%;
}
.div_before_synthese_when_navbar_fixed {
height: calc(var(--section-navbar-height) - var(--marker-after-height) - var(--marker-before-height));
} }
#principale { .synthese {
color: var(--couleur-texte); background-color: pink;
background-color: rgb(63, 15, 177); height: var(--section-synthese-height);
min-height: var(--principale-min-height); }
.principale {
height: var(--section-principale-height);
}
.footer {
background-color: greenyellow;
} }
footer {
position: sticky;
bottom: 0px;
color: var(--couleur-texte);
background-color: rgb(9, 138, 15);
min-height: var(--footer-min-height);
}