Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

adjust desktop desktop nav

Browse source
This commit is contained in:
isUnknown 2024-04-15 16:01:13 +02:00
parent 81454b3e4e
commit b8de28aade
5 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/src/article.css
View file

@ -1,4 +1,5 @@
article .content { article .content {
scroll-margin-block-start: calc(var(--unit--vertical) * 6); scroll-margin-block-start: calc(var(--unit--vertical) * 6);
margin-top: calc(var(--unit--vertical) * 2); margin-top: calc(var(--unit--vertical) * 2);
padding-bottom: calc(var(--unit--vertical) * 2);
} }

4
assets/css/src/header.css
View file

@ -138,10 +138,6 @@ button.toggle.right::before {
} }
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {
#main-header {
display: flex;
justify-content: center;
}
#logo { #logo {
width: 37vw; width: 37vw;
} }

10
assets/css/src/html.css
View file

@ -62,10 +62,12 @@ html {
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {
:root { :root {
--padding-body: calc(12 * var(--unit--horizontal)); --padding-body: calc(15 * var(--unit--horizontal));
} }
body { body,
padding-left: var(--padding-body); #logo {
max-width: calc(17 * var(--unit--horizontal)); max-width: calc(22 * var(--unit--horizontal));
padding-left: var(--padding-body) !important;
box-sizing: content-box;
} }
} }

15
assets/js/script.js
View file

@ -82,7 +82,6 @@ function toggleLogoState() {
} }
function togglePanel(side, event) { function togglePanel(side, event) {
event.stopPropagation();
document.querySelector(`.panel--${side}`).classList.toggle("open"); document.querySelector(`.panel--${side}`).classList.toggle("open");
const isOpen = document const isOpen = document
.querySelector(`.panel--${side}`) .querySelector(`.panel--${side}`)
@ -95,12 +94,15 @@ function togglePanel(side, event) {
document.querySelector("html").style.overflowY = "hidden"; document.querySelector("html").style.overflowY = "hidden";
document.querySelector("#main-header").classList.remove("minimized"); document.querySelector("#main-header").classList.remove("minimized");
} }
} else if (window.innerWidth < 640) { } else {
document.querySelector("html").style.overflowY = ""; if (window.innerWidth < 640) {
if (scrollY > 10) { document.querySelector("html").style.overflowY = "";
document.querySelector("#main-header").classList.add("minimized"); if (scrollY > 10) {
document.querySelector("#main-header").classList.add("minimized");
}
} }
} }
event.stopPropagation();
} }
function closePanels() { function closePanels() {
@ -135,6 +137,9 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
setWindowHeightFactor(); setWindowHeightFactor();
window.addEventListener("resize", () => {
setWindowHeightFactor();
});
fixFootNotes(); fixFootNotes();

8
site/snippets/panels.php
View file

@ -1,23 +1,23 @@
<sidebar id="desktop-nav"> <sidebar id="desktop-nav">
<ul> <ul>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>"> <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)"> <button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
années années
</button> </button>
</li> </li>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>"> <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)"> <button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
catégories catégories
</button> </button>
</li> </li>
<li class="empty <li class="empty
"></li> "></li>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>"> <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
<a href="#"> <a href="#">
s'abonner s'abonner
</a> </a>
</li> </li>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>"> <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
<a href="<?= $site->find('a-propos')->url() ?>"> <a href="<?= $site->find('a-propos')->url() ?>">
à propos à propos
</a> </a>