site/_includes/layouts/navbar.njk

<!-- top navbar -->
<header class="navbar">
    <a class="nav-base nav-left nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/home"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
    <div class="nav-base nav-left nav-baselink nav-mobile-menu">
        <input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
        <label aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
            <img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
        </label>
        <ul>
            <li class="nav-home">
                <a href="/home"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
            </li>
            <li class="nav-services">
                <a href="/services"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
            </li>
            <li class="nav-webmaster">
                <a href="/admins"><span class="icon tabler--user"></span> <span class="text">Admins</span></a>
            </li>
            <li class="nav-donate">
                <a href="/donate"><span class="icon tabler--currency-dollar"></span> <span class="text">Donate</span></a>
            </li>
        </ul>
    </div>
    <a class="nav-base nav-left nav-links nav-home" href="/home"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
    <a class="nav-base nav-left nav-links nav-services" href="/services"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
    <a class="nav-base nav-left nav-links nav-webmaster" href="/admins"><span class="icon tabler--user"></span> <span class="text">Admins</span></a>
    <a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="icon tabler--currency-dollar"></span> <span class="text">Donate</span></a>
    <div class="nav-base nav-right nav-settings" aria-roledescription="Settings Menu">
        <input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
        <label aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings">
            <span class="icon tabler--settings">
        </label>
        <ul>
            <li>
                <h2>Settings</h2>
            </li>
            <li>
                <hr class="solid">
                <p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
                <p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
                <span>
                    <input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
                    <label for="theme-auto">System (Auto)</label><br>
                </span>
                <span>
                    <input type="radio" id="theme-light" name="theme-setting" value="light" />
                    <label for="theme-light">Light</label><br>
                </span>
                <span>
                    <input type="radio" id="theme-dark" name="theme-setting" value="dark" />
                    <label for="theme-dark">Dark</label><br>
                </span>
            </li>
            <li>
                <hr class="solid">
                <p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
                <span>
                    <input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
                    <label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
                </span>
                <span>
                    <input type="radio" id="font-ahn" name="font-setting" value="ahn" />
                    <label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
                </span>
                <span>
                    <input type="radio" id="font-inter" name="font-setting" value="inter" />
                    <label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
                </span>
                <p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
                <span>
                    <input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
                    <label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
                </span>
                <span>
                    <input type="radio" id="font-serif" name="font-setting" value="serif" />
                    <label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
                </span>
                <span>
                    <input type="radio" id="font-monospace" name="font-setting" value="monospace" />
                    <label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
                </span>
            </li>
            <li>
                <hr class="solid">
                <span>
                    <input type="checkbox" id="uncapitalization" name="uncapitalization" />
                    <label for="uncapitalization">Disable forced uncapitalization</label><br>
                </span>
                <span>
                    <input type="checkbox" id="disable-bg" name="disable-bg" />
                    <label for="disable-bg">Disable background gradient</label><br>
                </span>
                <span>
                    <input type="checkbox" id="disable-animations" name="disable-animations" />
                    <label for="disable-animations">Disable animations</label><br>
                </span>
                <span>
                    <input type="checkbox" id="disable-alttext" name="disable-alttext" />
                    <label for="disable-alttext">Disable alt-text popup</label>
                </span>
            </li>
            <li>
                <hr class="solid">
                <p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
                <p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
            </li>
        </ul>
    </div>
    
    <p aria-hidden="true" class="nav-base nav-right nav-systray">
        <span class="icon tabler--bell"></span>
        <span class="icon tabler--volume"></span>
        <span class="icon tabler--wifi"></span>
        <span class="icon tabler--battery-filled"></span>
    </p>
</header>