Spaces:
Running
Running
File size: 2,758 Bytes
fee9c1e 6b70860 fee9c1e 6b70860 fee9c1e b8e1b6c 6b70860 1ee6ce7 a17a3bf 6b70860 a17a3bf 6b70860 a17a3bf 6b70860 a17a3bf 6b70860 1ee6ce7 a17a3bf 6b70860 1ee6ce7 6b70860 a17a3bf 6b70860 b8e1b6c a4b9560 a17a3bf 6b70860 a17a3bf 1ee6ce7 6b70860 a4b9560 6b70860 a4b9560 6b70860 a4b9560 efb32fc a17a3bf 6b70860 a4b9560 6b70860 a4b9560 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
---
---
<div class="sidenote-container">
<aside class="sidenote">
<slot />
</aside>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const containers = document.querySelectorAll(".sidenote-container");
containers.forEach((container) => {
// Find the previous element (sibling just before)
const previousElement = container.previousElementSibling as HTMLElement;
if (previousElement && previousElement.parentNode) {
// Create a wrapper div that will contain both the previous element and the sidenote
const wrapper = document.createElement("div");
wrapper.className = "sidenote-wrapper";
// Insert the wrapper before the previous element
previousElement.parentNode.insertBefore(wrapper, previousElement);
// Move both the previous element and the sidenote container into the wrapper
wrapper.appendChild(previousElement);
wrapper.appendChild(container);
// Style the wrapper to create the layout
wrapper.style.position = "relative";
wrapper.style.display = "block";
// Style the sidenote container so it positions correctly
const sidenoteContainer = container as HTMLElement;
sidenoteContainer.style.position = "absolute";
sidenoteContainer.style.top = "0";
sidenoteContainer.style.right = "-292px"; // 260px width + 32px gap
sidenoteContainer.style.width = "260px";
// Display the container with a fade-in
sidenoteContainer.style.display = "block";
sidenoteContainer.style.opacity = "0";
// Fade-in with transition
setTimeout(() => {
sidenoteContainer.style.opacity = "1";
}, 10);
}
});
});
</script>
<style is:global>
.sidenote-wrapper {
/* Le wrapper contient l'élément original et le sidenote */
position: relative;
display: block;
}
.sidenote-container {
/* Caché par défaut, sera affiché par JS */
display: none;
margin: 0;
/* Transition for fade-in */
transition: opacity 0.3s ease-in-out;
}
.sidenote {
border-radius: 8px;
padding: 0 30px;
font-size: 0.9rem;
color: var(--muted-color);
margin: 0;
}
@media (--bp-content-collapse) {
.sidenote-wrapper {
/* Sur mobile, le wrapper n'a pas besoin de position relative */
position: static !important;
}
.sidenote-container {
position: static !important;
width: auto !important;
right: auto !important;
top: auto !important;
margin-top: 8px;
/* Affichage normal sur mobile */
display: block !important;
opacity: 1 !important;
}
.sidenote {
padding: 0;
}
}
</style>
|