WORKS

<script> /* SWWS /works — persist filter index safely for Super.so */ (function(){ if (!/\/works(\/|$)/.test(location.pathname)) return; const KEY = 'swws:filterIndex'; const KEY_TEXT = 'swws:filterText'; const KEY_SCROLL = 'swws:scrollY'; const norm = s => (s||'').trim().toLowerCase(); function getButtons() { return Array.from(document.querySelectorAll('button, .super-filter button, .filters button, a')) .filter(b => b.offsetParent && b.textContent.trim().length); } // Sauvegarde au clic document.addEventListener('click', e => { const btn = e.target.closest('button, a'); if (!btn) return; const btns = getButtons(); const idx = btns.indexOf(btn); if (idx >= 0) { sessionStorage.setItem(KEY, idx); sessionStorage.setItem(KEY_TEXT, norm(btn.textContent)); sessionStorage.setItem(KEY_SCROLL, window.scrollY); } }, true); // Restaure function restore() { const idx = parseInt(sessionStorage.getItem(KEY)); const txt = sessionStorage.getItem(KEY_TEXT); const scrollY = parseFloat(sessionStorage.getItem(KEY_SCROLL)) || 0; if (isNaN(idx) && !txt) return; const t0 = performance.now(); (function loop(){ const btns = getButtons(); if (btns.length) { const target = btns[idx] || btns.find(b => norm(b.textContent) === txt); if (target) { target.click(); setTimeout(() => window.scrollTo({ top: scrollY, behavior: 'instant' }), 100); return; } } if (performance.now() - t0 < 6000) requestAnimationFrame(loop); })(); } document.addEventListener('DOMContentLoaded', restore); window.addEventListener('pageshow', restore); })(); </script>

/* 1) Lever les limites de conteneur sur la page Works / .page__works .super-content { max-width: none !important; } article#block-works.notion-root.max-width { max-width: none !important; } / 2) Fixer la largeur de la/les vues Notion en pourcentage de l'écran / :root { --portfolio-w: 80vw; } / ajuste 60–90 selon besoin / #block-works .notion-collection_view, #block-works .notion-collection_view > div { width: var(--portfolio-w); max-width: none; margin-inline: auto; / centré / } / Variables / :root{ --portfolio-vw: 80vw; / ajuste: 70–90vw / --portfolio-cap: 1280px; / plafond ≈ conteneur par défaut / } / Desktop & tablettes larges : appliquer la largeur à la gallery / @media (min-width: 901px){ .page__works #block-works .notion-collection-gallery{ width: min(var(--portfolio-vw), var(--portfolio-cap)) !important; max-width: 100% !important; margin-inline: auto !important; / centré / display: block; / évite certains layouts flex / } } / Mobile : rien → comportement par défaut de Super/Notion / / --- Couleur de fond du titre de carte dans la section Works --- / #block-works .notion-property.notion-property__title.notion-collection-card__property.title.notion-semantic-string { background-color: #fff; / 🎨 choisis ta couleur / padding: 0.5rem 0.75rem; / un peu d’espace interne / border-radius: 0px; / arrondi léger / display: inline-block; / le fond épouse la longueur du texte / transition: background-color 0.2s ease; } / Option : effet hover très léger / #block-works a.notion-collection-card__anchor:hover .notion-property.notion-property__title.notion-collection-card__property.title.notion-semantic-string { background-color: #ebebeb; } / Variante dark mode (si applicable) */ .dark-mode #block-works .notion-property.notion-property__title.notion-collection-card__property.title.notion-semantic-string { background-color: #1a1a1a; } .dark-mode #block-works a.notion-collection-card__anchor:hover .notion-property.notion-property__title.notion-collection-card__property.title.notion-semantic-string { background-color: #222; }