Merge branch 'feature/burgerAccessibility' into develop

develop
Nathan Steel 3 years ago
commit 2d776c4055

@ -16,7 +16,7 @@
<header>
<h1>Error 404</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>About me</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Blog Thoughts</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Hello, Burger menu!</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Aney's Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>I've started a blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>My SteamDeck Arrived!</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Reducing my Homelab</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Aney's CV</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Aney's Hardware</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Link your domain name to your server</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Adding PHP to NGINX server</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Adminer Setup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Backup MySQL/MariaDB</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Automating Backups with Cronjobs</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Backup with rdiff-backup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Backup with rsync</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Setup SSL with Certbot</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Get a domain name</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Aney' guide to server hosting</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Aney's Guides</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Initial Server Setup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Template for Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>MySQL (actually MariaDB) Setup Guide</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>How to install an NGINX web server</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Template for Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>NGINX web optimisation</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Template for Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Debian Install Guide for Servers</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>How to set a static IP</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Git server setup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Setup a bridge network for KVM</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>How to setup an NGINX website</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Setup KVM/QEMU virtualisation</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>SQL Cheatsheet</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Virsh Cheatsheet</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>VM/Server Seperation of Concerns</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Web Development 101</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Webpage to website</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Your first webpage</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Aney's Network</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -40,6 +40,11 @@ border:1px solid #DDD;border-radius:6px}
float:right;
padding:14px;border:1px solid;
margin:1.4rem;margin-right:auto}
.sr{
position:absolute;overflow:hidden;
left:-9999px;top:auto;
width:1px;height:1px;
}
footer p{margin:0}
table{text-align:left;width:100%;
@ -52,18 +57,18 @@ tbody tr:nth-child(odd){background:#EEE}
tbody tr:hover{background:#DDD}
.burger-container{
position:absolute;height:24px;width:30px;
position:absolute;height:21px;width:30px;
cursor:pointer;top:34px;right:10px}
#burger-toggle,#burger-toggle~nav{display:none}
.burger,.burger::after,.burger::before{
position:absolute;background:#000;
height:4px;width:30px;border-radius:2px;content:"";
transition:transform 300ms cubic-bezier(.4,1,.5,1)}
.burger::before{margin-top:-8px}
.burger::after{margin-top:8px}
.burger::before{margin-top:8px}
.burger::after{margin-top:16px}
#burger-toggle:checked~nav{display:block}
#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)}
#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)}
#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)}
#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)}
#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}
@media print{body{max-width:none}}

@ -16,7 +16,7 @@
<header>
<h1>Aney's Projects</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Aney's Recipes</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Woky Beef Stew</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Aney's Sitemap</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -16,7 +16,7 @@
<header>
<h1>Support Me</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

@ -17,7 +17,7 @@
<header>
<h1>Aney's Favourite Sites</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
<hr/>
<nav>
<a href="/">home</a>

Loading…
Cancel
Save