diff --git a/static/css/lesgv.css b/static/css/lesgv.css index b3902fa..6082364 100644 --- a/static/css/lesgv.css +++ b/static/css/lesgv.css @@ -47,4 +47,13 @@ a:hover { img.lesgv.hero { margin: 0 auto; max-height: 35vh; +} + +div.card { + flex-direction: row; +} + +div.card-header { + transform: rotate(180deg); + writing-mode: vertical-lr; } \ No newline at end of file diff --git a/static/javascript/burger.js b/static/javascript/burger.js index 8ae7d72..d975632 100644 --- a/static/javascript/burger.js +++ b/static/javascript/burger.js @@ -18,3 +18,61 @@ if (document.getElementById('menu-checkbox')) { } } + + +let toggle = document.querySelector('#jour-nuit'); + +function lesgvGoDark(toggle) { + localStorage.removeItem('lightmode'); + localStorage.setItem('darkmode', true); + toggle.innerText = 'Nuit'; + document.body.classList.add('darkmode'); +} + +function lesgvGoLight(toggle) { + localStorage.removeItem('darkmode'); + localStorage.setItem('lightmode', true); + toggle.innerText = 'Jour'; + document.body.classList.remove('darkmode'); +} + +function toggleDarkmode() { + let toggle = document.querySelector('#jour-nuit'); + if (document.body.classList.contains('darkmode')) { + lesgvGoLight(toggle); + } else { + lesgvGoDark(toggle); + } +} + +toggle.addEventListener('click', function(e) { + if (document.body.classList.contains('darkmode')) { + lesgvGoLight(toggle); + } else { + lesgvGoDark(toggle); + } +}); + +// Turn the theme off if the 'darkmode' key exists in localStorage +if (localStorage.getItem('darkmode')) { + lesgvGoDark(toggle); +} else if (localStorage.getItem('lightmode')) { + lesgvGoLight(toggle); +} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + lesgvGoDark(toggle); +} + + +window.addEventListener( + "pagehide", + (event) => { + if (toggle) { + if (document.body.classList.contains('darkmode')) { + lesgvGoDark(toggle); + } else { + lesgvGoLight(toggle); + } + } + }, + false, +); \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index 925aa78..570afb3 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -55,6 +55,7 @@ +
  •  < Jour et nuit
  • {{template "admenu" .}}