feat: use the express logo in the header (#1839)

Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>

Author: ShubhamOulkar

_includes/header.html

@@ -2,8 +2,14 @@
   <div id="mobile-menu">
     <div id="nav-button" class="fa fa-bars fa-2x button"></div>
   </div>
-  <section id="logo"><a href="/" class="express">Express</a>
-  </section>
+  <div class="logo-container">
+    <a href="/" class="hidden-dark" title="Go to homepage" aria-label="Go to homepage">
+      <img src="/images/brand/logotype-light.svg" alt="Express.js logo" width="90" height="30"/>
+    </a>
+    <a href="/" class="hidden-light" title="Go to homepage" aria-label="Go to homepage">
+      <img src="/images/brand/logotype-dark.svg" alt="Express.js logo" width="90" height="30"/>
+    </a>
+  </div>
   <div id="navbar">
     <input id="q" placeholder="🔎 search">
     <ul id="navmenu">

css/style.css

@@ -253,23 +253,10 @@ a {
 }
 
 /* logo */
-
-#logo {
-  width: auto;
-  z-index: 1;
-}
-
-#logo a {
+.logo-container a {
   text-decoration: none;
 }
 
-#logo .express {
-  display: block;
-  font: 25px "Helvetica Neue", "Open Sans", sans-serif;
-  font-weight: 100;
-  color: var(--card-fg);
-}
-
 #description .express {
   display: block;
   font: 4.5em "Helvetica Neue", "Open Sans", sans-serif;
@@ -1039,21 +1026,8 @@ h2 a {
     margin-right: 5%;
   }
 
-  #logo {
-    position: static;
-    width: 100%;
-    margin-left: 60px;
-  }
-
-  #logo a {
-    display: table !important;
-    margin: 0 auto;
-    text-decoration: none;
-  }
-
-  #logo .express {
-    margin-top: 0px;
-    font-weight: bold;
+  .logo-container {
+    margin-inline: auto;
   }
 
   #home-menu {
@@ -1396,7 +1370,7 @@ strong.eol {
 }
 
 .hidden-dark {
-  display: block;
+  display: flex;
 }
 
 .hidden-light {

css/themes/dark-theme.css

@@ -9,7 +9,7 @@ html.dark-mode {
   }
 
   .hidden-light {
-    display: block;
+    display: flex;
   }
 
   .hidden-dark {