added all logos

jovialcore · Dec 27, 2023 · 868569c · 868569c
1 parent 8199fbe
commit 868569c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,8 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
+  <link rel="icon" type="image/png" href="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703702996/WCS_2_1.png">
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

diff --git a/src/components/header/HeaderComponent.vue b/src/components/header/HeaderComponent.vue
@@ -1,22 +1,59 @@
 <template>
   <nav class="navbar navbar-expand-lg bg-dark mb-3">
     <div class="container-fluid">
-      <router-link class="navbar-brand" :to="{ name: 'Home' }">  <img src="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703702996/WCS_4.png" style="width: 10em;"> </router-link>
+      <router-link class="navbar-brand" :to="{ name: 'Home' }">
+
+        <!-- desktop logo -->
+        <img class="desktop-logo"
+          src="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703702996/WCS_4.png"
+          style="width: 10em;">
+
+        <!-- mobile logo -->
+        <img class="mobile-logo"
+          src="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703703886/WCS_555555555555.png"
+          >
+
+      </router-link>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
         aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
         <ul class="navbar-nav mb-2 mb-lg-0">
           <li class="nav-item">
-            <a href="https://github.com/jovialcore/whatcompstack-BE" target="_blank" class="nav-link">Please star (🌟) us on Github </a>
+            <a href="https://github.com/jovialcore/whatcompstack-BE" target="_blank" class="nav-link">Please star (🌟) us
+              on Github </a>
           </li>
         </ul>
       </div>
     </div>
   </nav>
 </template>
 
+<style scoped>
+@media (max-width: 767px) {
+  .desktop-logo {
+    display: none;
+  }
+
+  .mobile-logo {
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  .desktop-logo {
+    display: block;
+  }
+
+  .mobile-logo {
+    display: none;
+  }
+}
+</style>
+
+
+
 <script>
 export default {
   name: 'HeaderComponent'