Website: Draw the menu bars with CSS instead the font-awesome icons

2 files changed, 17 insertions, 2 deletions

diff --git a/website/themes/beastie/assets/styles/main.css b/website/themes/beastie/assets/styles/main.css
index cf5f78a012..0385c2f2e7 100644
--- a/website/themes/beastie/assets/styles/main.css
+++ b/website/themes/beastie/assets/styles/main.css
@@ -450,9 +450,24 @@ header ul li {
 
 .menu-bars {
   display: none;
+  width: 2rem;
+  height: 2rem;
   margin-left: auto;
   color: var(--white);
   cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.menu-bars::before {
+  content: "";
+  display: block;
+  width: 1.5rem;
+  height: 2px;
+  background-color: currentColor;
+  border-radius: 999px;
+  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
 }
 
 input[type='checkbox'] {
@@ -665,7 +680,7 @@ input[type='checkbox'] {
   }
 
   .menu-bars {
-    display: block;
+    display: flex;
   }
 
   .menu {
diff --git a/website/themes/beastie/layouts/_partials/site-header.html b/website/themes/beastie/layouts/_partials/site-header.html
index 1928c07a30..e411dfaea2 100644
--- a/website/themes/beastie/layouts/_partials/site-header.html
+++ b/website/themes/beastie/layouts/_partials/site-header.html
@@ -6,7 +6,7 @@
         <img src="{{ "images/FreeBSD-monochromatic.svg" | relURL }}" width="160" height="50" alt="FreeBSD logo">
       </a>
       <label class="menu-bars" for="menu-bars">
-        <i class="fa fa-bars" aria-hidden="true"></i>
+        <span class="menu-bars-icon" aria-hidden="true"></span>
       </label>
     </div>
     <input id="menu-bars" type="checkbox">