tibo/template
1
0
Fork 0
mirror of https://git.topisto.net/tibo/template.git synced 2026-03-31 19:29: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>
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');

112
frontend/protos/styles.css
View File

@@ -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: 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;
height: var(--header-height);
}
nav {
position: sticky;
top: 0px;
color: var(--couleur-texte);
.navbar {
height: var(--section-navbar-height);
background-color: yellow;
height: var(--nav-height);
}
#synthese {
color: var(--couleur-texte);
background-color: rgb(252, 130, 201);
min-height: var(--synthese-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));
}
#principale {
color: var(--couleur-texte);
background-color: rgb(63, 15, 177);
min-height: var(--principale-min-height);
.synthese {
background-color: pink;
height: var(--section-synthese-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);
}