diff --git a/wiki/layout.html b/wiki/layout.html index cba7d738ab18e0ead9600c0b904e1c49358f855b..b168191d0699f68cad6d5a064dc2dad61d0c550c 100644 --- a/wiki/layout.html +++ b/wiki/layout.html @@ -84,6 +84,14 @@ box-shadow: 2px 0 5px rgba(0,0,0,0.1); border-radius: 0px; overflow-y: auto; + transition: transform 0.3s ease-in-out; + } + + /* Media query for screens smaller than 768px (typical tablet breakpoint) */ + @media (max-width: 768px) { + .sidebar { + transform: translateX(-100%); + } } .sidebar ul { list-style: none; @@ -137,51 +145,6 @@ color: hsl(17, 100%, 50%); } - .back-to-top { - position: fixed; - left: 95px; - bottom: 170px; - width: 40px; - height: 40px; - background-color: hsl(17, 100%, 50%); - border: none; - border-radius: 50%; - color: white; - font-size: 20px; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - transition: opacity 0.3s, visibility 0.3s; - opacity: 0; - visibility: hidden; - } - - .back-to-top.show { - opacity: 1; - visibility: visible; - } - - .back-to-top:hover { - background-color: hsl(18, 25%, 8%); - } - - .team-logo { - position: fixed; - left: 10px; - top: 130px; - transform: translateY(-50%); - width: 150px; - height: 150px; - border-radius: 75%; - overflow: hidden; - z-index: 10; - } - .team-logo img { - width: 100%; - height: 100%; - object-fit: cover; - } .text-size-toggle { position: fixed; right: 10px; @@ -405,6 +368,22 @@ } }); + window.addEventListener('resize', function() { + var sidebar = document.querySelector('.sidebar'); + if (window.innerWidth <= 768) { + sidebar.style.transform = 'translateX(-100%)'; + } else { + sidebar.style.transform = 'translateX(0)'; + } + }); + + // Initial check on page load + window.addEventListener('load', function() { + var sidebar = document.querySelector('.sidebar'); + if (window.innerWidth <= 768) { + sidebar.style.transform = 'translateX(-100%)'; + } + }); </script> </body>