Merge branch 'feature/burgerMenu' into develop

develop
Nathan Steel 3 years ago
commit 915e65b59a

@ -15,6 +15,8 @@
<body> <body>
<header> <header>
<h1>Error 404</h1> <h1>Error 404</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -15,6 +15,8 @@
<body> <body>
<header> <header>
<h1>About me</h1> <h1>About me</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Blog Thoughts</h1> <h1>Blog Thoughts</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Aney's Blog</h1> <h1>Aney's Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>I've started a blog</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>My SteamDeck Arrived!</h1> <h1>My SteamDeck Arrived!</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -15,6 +15,8 @@
<body> <body>
<header> <header>
<h1>Reducing my Homelab</h1> <h1>Reducing my Homelab</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

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

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Aney's Hardware</h1> <h1>Aney's Hardware</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Link your domain name to your server</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Adding PHP to NGINX server</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Adminer Setup</h1> <h1>Adminer Setup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Backup MySQL/MariaDB</h1> <h1>Backup MySQL/MariaDB</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Automating Backups with Cronjobs</h1> <h1>Automating Backups with Cronjobs</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Backup with rdiff-backup</h1> <h1>Backup with rdiff-backup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Backup with rsync</h1> <h1>Backup with rsync</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Setup SSL with Certbot</h1> <h1>Setup SSL with Certbot</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Get a domain name</h1> <h1>Get a domain name</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Aney' guide to server hosting</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -15,6 +15,8 @@
<body> <body>
<header> <header>
<h1>Aney's Guides</h1> <h1>Aney's Guides</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Initial Server Setup</h1> <h1>Initial Server Setup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Template for Blog</h1> <h1>Template for Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>MySQL (actually MariaDB) Setup Guide</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>How to install an NGINX web server</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Template for Blog</h1> <h1>Template for Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>NGINX web optimisation</h1> <h1>NGINX web optimisation</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Template for Blog</h1> <h1>Template for Blog</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Debian Install Guide for Servers</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>How to set a static IP</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -15,6 +15,8 @@
<body> <body>
<header> <header>
<h1>Git server setup</h1> <h1>Git server setup</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Setup a bridge network for KVM</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>How to setup an NGINX website</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Setup KVM/QEMU virtualisation</h1> <h1>Setup KVM/QEMU virtualisation</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>SQL Cheatsheet</h1> <h1>SQL Cheatsheet</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Virsh Cheatsheet</h1> <h1>Virsh Cheatsheet</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>VM/Server Seperation of Concerns</h1> <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>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

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

@ -1,5 +1,7 @@
html,body { height:100% } html,body { height:100% }
html { font-size:14px } html { font-size:14px }
header {position: relative}
header hr {display:none}
body { body {
margin:.2rem; margin:.2rem;
max-width:48rem; max-width:48rem;
@ -14,7 +16,7 @@ border-top:1px dotted #000
nav>a:first-child {border:none} nav>a:first-child {border:none}
h1,h2,h3,h4,h5,h6 { line-height:1 } h1,h2,h3,h4,h5,h6 { line-height:1 }
header h1 { margin: 1.4rem auto 1.2rem } header h1 { margin: 1.4rem auto 1.2rem; margin-right: 60px }
a { text-decoration:none } a { text-decoration:none }
a:link,a:visited { color:#087CA7 } a:link,a:visited { color:#087CA7 }
@ -48,6 +50,22 @@ tbody th{ background-color: #292929 }
tr:nth-child(even){ background-color: #FEFEFE } tr:nth-child(even){ background-color: #FEFEFE }
tr:hover{ background-color: #DEDEDE } tr:hover{ background-color: #DEDEDE }
.burger-container {
position: absolute;height: 24px;width: 30px;
cursor: pointer;top: 34px;right: 10px}
#burger-toggle {display: none}
.burger,.burger::after,.burger::before {
position: absolute;background-color: #000;
height: 4px;width: 30px;border-radius: 2px;content:"";
transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1)}
.burger::before {margin-top: -8px}
.burger::after {margin-top: 8px}
#burger-toggle~nav {display:none;}
#burger-toggle:checked~nav {display:block;}
#burger-toggle:checked+.burger-container .burger::before{margin-top:0px;transform:rotate(45deg)}
#burger-toggle:checked+.burger-container .burger::after{margin-top:0px;transform:rotate(-45deg)}
#burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)}
footer p { margin:0 } footer p { margin:0 }
body { body {
display:-webkit-flex;display:-ms-flexbox;display:flex; display:-webkit-flex;display:-ms-flexbox;display:flex;
@ -56,18 +74,25 @@ flex-direction:column
main { flex:1 0 auto } main { flex:1 0 auto }
@media print {body {max-width:none}} @media print {body {max-width:none}}
@media (min-width: 600px) { @media (min-width: 600px) {
body { margin:.2rem auto; } body { margin:.2rem auto; }
nav>a { margin-left:2rem; padding: auto; display: inline; border: none } nav>a { margin-left:2rem; padding: auto; display: inline; border: none }
nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 } nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 }
ul li{ margin: auto } ul li{ margin: auto }
.burger-container {display: none}
#burger-toggle~nav {display: block}
header hr {display: block}
}
@media (max-width:320px) {
#burger-toggle~nav{display:block}
.burger-container{display:none}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { color:#FFF; background:#191919 } body { color:#FFF; background:#191919 }
a:link,a:visited {color:#9CF} a:link,a:visited {color:#9CF}
a:hover,a:visited:hover {color:#DA4167} a:hover,a:visited:hover {color:#DA4167}
nav>a { border-color:#FFF } nav>a { border-color:#FFF }
.tag {background-color:#FFF;color:#000} .tag {background-color:#FFF;color:#000}
.burger,.burger::after,.burger::before {background:#FFF}
} }

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

@ -15,6 +15,8 @@
<body> <body>
<header> <header>
<h1>Aney's Recipes</h1> <h1>Aney's Recipes</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Aney's Sitemap</h1> <h1>Aney's Sitemap</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Support Me</h1> <h1>Support Me</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

@ -16,6 +16,8 @@
<body> <body>
<header> <header>
<h1>Aney's Favourite Sites</h1> <h1>Aney's Favourite Sites</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
<hr/> <hr/>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>

Loading…
Cancel
Save