mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
hamburger
This commit is contained in:
@@ -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*/
|
||||||
|
@@ -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" />
|
||||||
|
Reference in New Issue
Block a user