Consistent burger icon

assets/css/screen.css

@@ -71,6 +71,46 @@ a {
     text-decoration: none;
 }
 
+.gh-button {
+    display: inline-flex;
+    gap: 0.4em;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75em 1.15em;
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--color-white);
+    letter-spacing: inherit;
+    cursor: pointer;
+    background-color: var(--ghost-accent-color);
+    border: 0;
+    border-radius: 100px;
+}
+
+.gh-button:hover {
+    opacity: 0.95;
+}
+
+.gh-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    color: var(--color-darker-gray);
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+}
+
+.gh-icon-button svg {
+    width: 20px;
+    height: 20px;
+}
+
 /* 4. Layout */
 
 .gh-viewport {
@@ -188,7 +228,7 @@ a {
 }
 
 .gh-navigation-brand .gh-search {
-    margin-right: 8px;
+    margin-right: 2px;
 }
 
 @media (max-width: 767px) {
@@ -373,50 +413,34 @@ Search                         LOGO                    Login Subscribe
 /* 5.3. Burger icon */
 
 .gh-burger {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: relative;
     display: none;
-    width: 30px;
+    margin-right: -7px;
-    height: 30px;
-    padding: 0;
-    margin-right: -3px;
-    appearance: none;
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
 }
 
-.gh-burger::before,
+.gh-burger svg {
-.gh-burger::after {
-    position: absolute;
-    left: 3px;
     width: 24px;
-    height: 1px;
+    height: 24px;
-    content: "";
-    background-color: var(--color-darker-gray);
-    transition: all 0.2s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
 }
 
-.gh-burger::before {
+.gh-burger svg:last-child {
-    top: 11px;
+    display: none;
 }
 
-.gh-burger::after {
+.is-navigation-open .gh-burger svg:first-child {
-    bottom: 11px;
+    display: none;
 }
 
-.is-navigation-open .gh-burger::before {
+.is-navigation-open .gh-burger svg:last-child {
-    top: 15px;
+    display: block;
-    transform: rotate(45deg);
-}
-
-.is-navigation-open .gh-burger::after {
-    bottom: 14px;
-    transform: rotate(-45deg);
 }
 
 @media (max-width: 767px) {
     .gh-burger {
-        display: block;
+        display: flex;
     }
 }
 
@@ -553,45 +577,3 @@ Search                         LOGO                    Login Subscribe
         opacity: 0;
     }
 }
-
-/* Buttons */
-
-.gh-button {
-    display: inline-flex;
-    gap: 0.4em;
-    align-items: center;
-    justify-content: center;
-    padding: 0.75em 1.15em;
-    font-size: 1.6rem;
-    font-weight: 700;
-    line-height: 1;
-    color: var(--color-white);
-    letter-spacing: inherit;
-    cursor: pointer;
-    background-color: var(--ghost-accent-color);
-    border: 0;
-    border-radius: 100px;
-}
-
-.gh-button:hover {
-    opacity: 0.95;
-}
-
-.gh-icon-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    color: var(--color-darker-gray);
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-    outline: none;
-}
-
-.gh-icon-button svg {
-    width: 20px;
-    height: 20px;
-}

partials/components/navigation.hbs

@@ -10,7 +10,10 @@
                 {{/if}}
             </a>
             {{> "search-toggle"}}
-            <button class="gh-burger"></button>
+            <button class="gh-burger gh-icon-button">
+                {{> "icons/burger"}}
+                {{> "icons/close"}}
+            </button>
         </div>
 
         <nav class="gh-navigation-menu">

partials/icons/burger.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg>

partials/icons/close.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>