<nav> <script> var pages = document.getElementById("pages"); function toggle_modal_menu() { pages.classList.toggle("hidden"); } </script> <a href="/" class="title nav-left">Colormatic</a> <img src="/img/colormatic_logo.svg" role="img" alt="Colormatic Logo" class="nav-center colormatic-logo" /> <div class="nav-right inline"> <ul class="responsive-hidden"> <li><a href="/zakarya">Zakarya</a></li> <li><a href="/studios">Colormatic Studios</a></li> <li><a href="/about">About</a></li> </ul> <a href="https://git.colormatic.org" class="git-icon" target="_blank" rel="noopener noreferrer"><img src="/img/git-icon.svg" role="img" alt="Colormatic Git" /></a> <!-- Official git logo: https://git-scm.com/downloads/logos --> <a onclick="toggle_modal_menu();" class="responsive menu-button"><img src="/img/menu.svg" role="img" alt="Menu" /></a> <!-- Bootstrap list icon: https://icons.getbootstrap.com/icons/list --> </div> </nav> <span onclick="toggle_modal_menu();" id="pages" class="modalbg hidden"> <div> <button class="close"><img src="/img/close.svg" role="img" alt="Close"></button> <!-- Bootstrap x icon: https://icons.getbootstrap.com/icons/x --> <ul> <li><a href="/zakarya">Zakarya</a></li> <li><a href="/studios">Colormatic Studios</a></li> <li><a href="/about">About</a></li> </ul> </div> </span>