hover nav
This commit is contained in:
parent
3ea41b5cf0
commit
2df3106031
6 changed files with 36 additions and 13 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin: calc(var(--spacing)*2) auto;
|
margin: calc(var(--spacing)*2) auto;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
max-width: var(--max-w-container);
|
max-width: var(--max-w-container);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -972,7 +972,6 @@ button:disabled {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin: calc(var(--spacing) * 2) auto;
|
margin: calc(var(--spacing) * 2) auto;
|
||||||
text-align: center;
|
|
||||||
max-width: var(--max-w-container);
|
max-width: var(--max-w-container);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1958,6 +1957,9 @@ body main {
|
||||||
#rapport .rapport__content ul {
|
#rapport .rapport__content ul {
|
||||||
padding-left: 3ch;
|
padding-left: 3ch;
|
||||||
}
|
}
|
||||||
|
#rapport .rapport__content:target {
|
||||||
|
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
#rapport__aside {
|
#rapport__aside {
|
||||||
width: var(--rapport-w);
|
width: var(--rapport-w);
|
||||||
|
|
@ -2007,6 +2009,9 @@ body main {
|
||||||
#rapport__aside #toc li.selected {
|
#rapport__aside #toc li.selected {
|
||||||
background-color: var(--grey-800);
|
background-color: var(--grey-800);
|
||||||
}
|
}
|
||||||
|
#rapport__aside #toc li:hover {
|
||||||
|
background-color: var(--grey-800);
|
||||||
|
}
|
||||||
#rapport__aside #toc .toc-level-1 {
|
#rapport__aside #toc .toc-level-1 {
|
||||||
margin-bottom: calc(var(--spacing) * 0.5);
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -168,6 +168,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rapport__content:target{
|
||||||
|
padding-top: calc(var(--header-h)*2 + var(--spacing))!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -242,6 +246,10 @@
|
||||||
background-color: var(--grey-800);
|
background-color: var(--grey-800);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li:hover{
|
||||||
|
background-color: var(--grey-800);
|
||||||
|
}
|
||||||
|
|
||||||
.toc-level-1{
|
.toc-level-1{
|
||||||
margin-bottom: calc(var(--spacing)*0.5);
|
margin-bottom: calc(var(--spacing)*0.5);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,11 @@ export function headerScrollVisibility() {
|
||||||
const header = document.getElementById("site-header");
|
const header = document.getElementById("site-header");
|
||||||
const hero = document.getElementById("hero");
|
const hero = document.getElementById("hero");
|
||||||
|
|
||||||
if (!header || !hero) return;
|
if (!header) return;
|
||||||
|
|
||||||
function checkScroll() {
|
function checkScroll() {
|
||||||
|
if (hero) {
|
||||||
|
// Comportement avec hero
|
||||||
const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
|
const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
|
||||||
const heroBottom = hero.getBoundingClientRect().bottom;
|
const heroBottom = hero.getBoundingClientRect().bottom;
|
||||||
|
|
||||||
|
|
@ -25,6 +27,14 @@ export function headerScrollVisibility() {
|
||||||
} else {
|
} else {
|
||||||
header.classList.remove("is-visible");
|
header.classList.remove("is-visible");
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
// Comportement sans hero \
|
||||||
|
if (window.scrollY >= 300) {
|
||||||
|
header.classList.add("is-visible");
|
||||||
|
} else {
|
||||||
|
header.classList.remove("is-visible");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener("scroll", checkScroll);
|
window.addEventListener("scroll", checkScroll);
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,8 @@
|
||||||
|
|
||||||
<nav id="toc">
|
<nav id="toc">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="toc-level-1"><a href="#auteurs">Les auteurs de ce rapport</a></li>
|
<li class="toc-level-1 selected"><a href="#auteurs">Les auteurs de ce rapport</a></li>
|
||||||
<li class="toc-level-1 selected"><a href="#rappel-faits">Rappel des faits</a></li>
|
<li class="toc-level-1"><a href="#rappel-faits">Rappel des faits</a></li>
|
||||||
<li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
|
<li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
|
||||||
<li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
|
<li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
|
||||||
<li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
|
<li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
|
||||||
|
|
@ -117,7 +117,7 @@
|
||||||
|
|
||||||
<div class="rapport__content">
|
<div class="rapport__content">
|
||||||
|
|
||||||
<div class="section-content">
|
<div class="section-content" id="auteurs">
|
||||||
<h3 class="section-title">Les auteurs de ce rapport</h3>
|
<h3 class="section-title">Les auteurs de ce rapport</h3>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -172,7 +172,7 @@ du présent rapport sont : </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="section-content">
|
<div class="section-content" id="rappel-faits">
|
||||||
<h3 class="section-title">Rappel des faits</h3>
|
<h3 class="section-title">Rappel des faits</h3>
|
||||||
<p>
|
<p>
|
||||||
Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
|
Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue