alpinux.cedrica5l/alpinux-static
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

fix: sélecteur largeur — data-cw sur <html> au lieu de CSS variable

Browse source 
max-width:none + margin:auto sur flex child causait le rétrécissement
de main. Remplacé par width:100% + sélecteurs d'attribut html[data-cw].

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alpinux 2026-05-06 11:53:25 +02:00
parent ec3284873a
commit 46a8a0b75f
2 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/static/app.css
View file

@ -57,7 +57,10 @@ header { background: var(--blue-dark); color: #fff; }
.width-switcher button.ws-active { background: rgba(255,255,255,.25); color: #fff; border-color: rgba(255,255,255,.5); }
/* ── Mise en page ─────────────────────────────────────────────── */
main { max-width: var(--content-width, none); margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
main { width: 100%; margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
html[data-cw="900"] main { max-width: 900px; }
html[data-cw="1200"] main { max-width: 1200px; }
html[data-cw="1600"] main { max-width: 1600px; }
/* ── Carte générique ──────────────────────────────────────────── */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.8rem; }

14
app/templates/base.html
View file

@ -7,7 +7,7 @@
<link rel="icon" type="image/x-icon" href="https://static.alpinux.org/logo/favicon.ico">
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
<script>
(function(){var w=localStorage.getItem('content-width');document.documentElement.style.setProperty('--content-width',w?w+'px':'none');})();
(function(){var cw=localStorage.getItem('content-width');if(cw)document.documentElement.dataset.cw=cw;})();
</script>
</head>
<body>
@ -72,17 +72,23 @@
(function () {
const KEY = 'content-width';
const btns = document.querySelectorAll('.width-switcher button');
const html = document.documentElement;
function applyActive(val) {
btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val ?? '')));
btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val || '')));
}
applyActive(localStorage.getItem(KEY));
btns.forEach(btn => btn.addEventListener('click', () => {
const val = btn.dataset.width;
try { localStorage.setItem(KEY, val); } catch(_) {}
document.documentElement.style.setProperty('--content-width', val ? val + 'px' : 'none');
if (val) {
localStorage.setItem(KEY, val);
html.dataset.cw = val;
} else {
localStorage.removeItem(KEY);
delete html.dataset.cw;
}
applyActive(val);
}));
})();