chore: refactor footer and header icons (#1962)

* refactor footer

* fix icons layout

* remove font awesome icons

* refactor header icons

* redeploy netlify preview

* use absolute path for a svg icons

* replace img elements with CSS background-image and mask-image for theme icons

* fix bugs and remove unused css classes

* apply thin scroller for tables (chrome)

* inherit colors for footer social icons

* simplify openjs icon

* use openjs white logo

* simplify theme icons

* fix theme icons

* fix background color

* fix bugs and refactor theme.js

* remove color flicker

* fix bugs and refactor theme.js

* refactor

* remove comments from svg

* legacy fix: alignment of icons

Author: ShubhamOulkar

_includes/footer.html

@@ -3,13 +3,8 @@
 <footer>
   <section id="footer-content">
     <div id="footer-copyright">
-      <a href="https://openjsf.org/">
-        <img
-          src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg"
-          alt="OpenJS Foundation" width="125" height="39" class="hidden-dark" />
-        <img
-          src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg"
-          alt="OpenJS Foundation" width="125" height="39" class="hidden-light" />
+      <a href="https://openjsf.org/" class="openjs-logo" title="OpenJS Foundation">
+         {% include icons/openjs_foundation-logo-horizontal-white.svg %}
       </a>
       <div id="footer-policy">
         <a href="https://terms-of-use.openjsf.org">
@@ -33,44 +28,36 @@
       <div class="footer-social">
         <div>
           <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
-            <span class="hidden-dark">
-              {% include icons/github-light.svg %}
-            </span>
-            <span class="hidden-light">
-              {% include icons/github-dark.svg %}
-            </span>
+            {% include icons/github.svg %}
           </a>
         </div>
         <div>
           <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g"
-            aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+            aria-label="Go to the repository on Youtube">
+            {% include icons/youtube.svg %}</a>
         </div>
         <div>
-          <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
-            <span class="hidden-dark">
-              {% include icons/x-light.svg %}
-            </span>
-            <span class="hidden-light">
-              {% include icons/x-dark.svg %}
-            </span>
+          <a href="https://x.com/UseExpressJS" aria-label="Go to the X account">
+              {% include icons/X.svg %}
           </a>
         </div>
         <div>
           <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH"
-            aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+            aria-label="Join Slack group">
+            {% include icons/slack.svg %}</a>
         </div>
         <div>
-          <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include
+          <a href="https://opencollective.com/express" aria-label="Go to Open Collective">{% include
             icons/opencollective.svg %}</a>
         </div>
         <div>
-          <a href="https://bsky.app/profile/expressjs.bsky.social" aria-label="Go to the repository on Bluesky">{%
+          <a href="https://bsky.app/profile/expressjs.bsky.social" aria-label="Go to the Bluesky">{%
             include icons/bluesky.svg %}</a>
         </div>
       </div>
       <a href="https://www.netlify.com">
-        <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify"
-          width="80" />
+          <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify"
+            width="80" />
       </a>
     </div>
   </section>

_includes/head.html

@@ -35,7 +35,6 @@
     <link rel="stylesheet" href="/css/themes/dark-theme.css?_={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/css/style.css?_={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/css/sintax.css?_={{ site.time | date: '%s' }}">
-    <link rel="stylesheet" href="/css/font-awesome.min.css">
     <link rel="stylesheet" href="/css/langs/{{ page.lang }}.css">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="description" content="{{page.description}}">

_includes/header.html

@@ -1,6 +1,8 @@
 <header>
   <div id="mobile-menu">
-    <div id="nav-button" class="fa fa-bars fa-2x button"></div>
+    <div id="nav-button" class="header-btn">
+      {% include icons/hamburger.svg %}
+    </div>
   </div>
   <div class="logo-container">
     <a href="/" title="Go to homepage" aria-label="Go to homepage">
@@ -245,9 +247,9 @@
     </ul>
   </nav>
   <div class="header-right">
-    <button id="theme-toggle" type="button" class="theme-btn" title="change theme">
-      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-      <span class="sun-icon hidden-light"></span>
+    <button id="theme-toggle" type="button" class="theme-btn" title="change theme" aria-label="Switch to dark mode">
+      <span id="icon-moon">{% include icons/moon.svg %}</span>
+      <span id="icon-sun">{% include icons/sun.svg %}</span>
     </button>
     {% include language-picker.html %}
     {% include language-picker-mobile.html %}