feat: move theme switcher to fixed burger menu, positioned in corner bracket (cyberpunk)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
LIABEUF, Stephane (External)
parent
48ff94ce02
commit
ae0f46160b
1 changed files with 82 additions and 28 deletions
110
index.html
110
index.html
|
|
@ -28,7 +28,8 @@
|
|||
<style>
|
||||
@media print {
|
||||
|
||||
#theme-switcher,
|
||||
.burger-btn,
|
||||
#theme-menu,
|
||||
.cursor-dot,
|
||||
.hero-scroll,
|
||||
.corner-bracket {
|
||||
|
|
@ -306,17 +307,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* ════ THEME SWITCHER ════ */
|
||||
#theme-switcher {
|
||||
/* ════ BURGER + THEME DROPDOWN ════ */
|
||||
.burger-btn {
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
z-index: 10001;
|
||||
top: 16px;
|
||||
right: 24px;
|
||||
z-index: 10003;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .4));
|
||||
gap: 5px;
|
||||
border-radius: 4px;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.burger-btn:hover { opacity: .7; }
|
||||
.burger-btn span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
transition: background .3s;
|
||||
}
|
||||
|
||||
#theme-menu {
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
right: 16px;
|
||||
z-index: 10002;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
min-width: 200px;
|
||||
}
|
||||
#theme-menu.open { display: flex; }
|
||||
|
||||
.theme-btn {
|
||||
cursor: pointer;
|
||||
|
|
@ -328,16 +355,10 @@
|
|||
border-radius: 4px;
|
||||
transition: transform .15s, opacity .15s;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.theme-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.theme-btn.active {
|
||||
outline: 3px solid #fff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.theme-btn:hover { transform: scale(1.03); }
|
||||
.theme-btn.active { outline: 3px solid #fff; outline-offset: 2px; }
|
||||
|
||||
.theme-btn.btn-cyberpunk {
|
||||
background: #00f5ff;
|
||||
|
|
@ -346,7 +367,6 @@
|
|||
font-size: 10px;
|
||||
letter-spacing: .12em;
|
||||
}
|
||||
|
||||
.theme-btn.btn-bd {
|
||||
background: #FFE033;
|
||||
color: #1a1a1a;
|
||||
|
|
@ -355,7 +375,6 @@
|
|||
letter-spacing: .08em;
|
||||
border: 3px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.theme-btn.btn-itpro {
|
||||
background: #1a56db;
|
||||
color: #fff;
|
||||
|
|
@ -364,6 +383,28 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* burger par thème */
|
||||
[data-theme="cyberpunk"] .burger-btn { top: 24px; right: 64px; }
|
||||
[data-theme="cyberpunk"] .burger-btn span { background: #00f5ff; }
|
||||
[data-theme="cyberpunk"] #theme-menu {
|
||||
background: #050810;
|
||||
border: 1px solid rgba(0,245,255,.2);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,.6);
|
||||
}
|
||||
[data-theme="bd"] .burger-btn span { background: #1a1a1a; }
|
||||
[data-theme="bd"] #theme-menu {
|
||||
background: #FFE033;
|
||||
border: 3px solid #1a1a1a;
|
||||
box-shadow: 4px 4px 0 #1a1a1a;
|
||||
}
|
||||
[data-theme="itpro"] .burger-btn span { background: #1a56db; }
|
||||
[data-theme="itpro"] #theme-menu {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ════ TRANSITIONS ════ */
|
||||
body {
|
||||
transition: background .4s, color .4s;
|
||||
|
|
@ -2277,11 +2318,6 @@
|
|||
font-size: 10px
|
||||
}
|
||||
|
||||
#theme-switcher {
|
||||
bottom: 16px;
|
||||
right: 16px
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 11px
|
||||
|
|
@ -2387,9 +2423,12 @@
|
|||
<!-- Cursor -->
|
||||
<div class="cursor-dot" id="cursorDot"></div>
|
||||
|
||||
<!-- Theme switcher -->
|
||||
<div id="theme-switcher">
|
||||
<button class="theme-btn btn-cyberpunk active" onclick="setTheme('cyberpunk')">⚡ CYBERPUNK</button>
|
||||
<!-- Burger + Theme menu (fixed, hors de tout backdrop-filter) -->
|
||||
<button class="burger-btn" id="burgerBtn" onclick="toggleThemeMenu()" aria-label="Changer de thème">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<div id="theme-menu">
|
||||
<button class="theme-btn btn-cyberpunk" onclick="setTheme('cyberpunk')">⚡ CYBERPUNK</button>
|
||||
<button class="theme-btn btn-bd" onclick="setTheme('bd')">💥 BANDE DESSINÉE</button>
|
||||
<button class="theme-btn btn-itpro" onclick="setTheme('itpro')">💼 IT PROFESSIONNEL</button>
|
||||
</div>
|
||||
|
|
@ -2631,10 +2670,25 @@
|
|||
// ══════════════════════════════════════════════
|
||||
// THÈME
|
||||
// ══════════════════════════════════════════════
|
||||
function toggleThemeMenu() {
|
||||
const menu = document.getElementById('theme-menu');
|
||||
if (menu) menu.classList.toggle('open');
|
||||
}
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
const menu = document.getElementById('theme-menu');
|
||||
const btn = document.getElementById('burgerBtn');
|
||||
if (menu && btn && !btn.contains(e.target) && !menu.contains(e.target)) {
|
||||
menu.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
function setTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
|
||||
document.querySelector('.btn-' + theme).classList.add('active');
|
||||
document.querySelectorAll('.btn-' + theme).forEach(b => b.classList.add('active'));
|
||||
const menu = document.getElementById('theme-menu');
|
||||
if (menu) menu.classList.remove('open');
|
||||
// re-animer les barres
|
||||
document.querySelectorAll('.skill-fill').forEach(f => { f.style.width = '0'; });
|
||||
setTimeout(() => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue