hamburger

This commit is contained in:
Kyle
2020-12-16 17:48:59 -08:00
parent 45e362931b
commit d29fd729dc
2 changed files with 10 additions and 10 deletions

View File

@@ -203,8 +203,8 @@ a:hover {
/*Hamburger*/ /*Hamburger*/
.hamburger { .hamburger {
position: fixed; position: fixed;
right: 2rem; right: 0rem;
top: 2rem; top: 0rem;
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
fill-rule: evenodd; fill-rule: evenodd;
@@ -214,7 +214,7 @@ a:hover {
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
background: #35603E; background: #35603E;
border-radius: 0.5rem; border-radius: 0 0 0 0.5rem;
} }
.hamburger > path { .hamburger > path {
fill: none; fill: none;
@@ -241,8 +241,8 @@ a:hover {
.circle { .circle {
z-index: 5; z-index: 5;
position: fixed; position: fixed;
right: 4rem; right: 2rem;
top: 4rem; top: 2rem;
padding: 0; padding: 0;
background: #35603E; background: #35603E;
border-radius: 100%; border-radius: 100%;
@@ -250,13 +250,13 @@ a:hover {
} }
.hamburger:hover + .circle { .hamburger:hover + .circle {
padding: 3rem; padding: 3rem;
right: 1rem; right: -1rem;
top: 1rem; top: -1rem;
} }
.hamburger.opened + .circle { .hamburger.opened + .circle {
padding: var(--window-diagonal-size); padding: var(--window-diagonal-size);
right: calc(4rem - var(--window-diagonal-size)); right: calc(2rem - var(--window-diagonal-size));
top: calc(4rem - var(--window-diagonal-size)); top: calc(2rem - var(--window-diagonal-size));
transition: 0.75s cubic-bezier(.53,.47,.76,-0.52); transition: 0.75s cubic-bezier(.53,.47,.76,-0.52);
} }
/*Menus*/ /*Menus*/

View File

@@ -15,7 +15,7 @@
<header> <header>
<h1 class='title center'>CARD CONJURER</h1> <h1 class='title center'>CARD CONJURER</h1>
</header> </header>
<div html-include='/globalHTML/menu.html'> <div>
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" class='hamburger' onclick='toggleMenu()'> <svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" class='hamburger' onclick='toggleMenu()'>
<path class='line1' d="M10,18L90,18L10,82" /> <path class='line1' d="M10,18L90,18L10,82" />
<path class='line3' d="M10,82L90,82L10,18" /> <path class='line3' d="M10,82L90,82L10,18" />