Navbar Logo added and Favicon

Author: kalkayan

assets/icons/logo.svg

@@ -1,24 +1,21 @@
-.motto {
-    font-size: 80px;
-    line-height: 100%;
-    font-weight: 800;
+.banner {
+    width: 90%;
 }
 
-// #td-cover-block-0
-//.td-cover-block {
-    //background-color: rgba(0, 0, 0, 0.7);
-//}
-
-@keyframes gradient {
-	0% {
-		background-position: 0% 50%;
-	}
-	50% {
-		background-position: 100% 50%;
-	}
-	100% {
-		background-position: 0% 50%;
-	}
+
+.td-navbar-scroll {
+    background-color: $primary !important;
+    animation: all ease-in 1s;
+}
+.navbar-brand {
+    & > .navbar-logo > svg {
+        width: 100px;
+        height: 50px;
+    }
+
+    & span:nth-child(2) {
+        display: none;
+    }
 }
 
 .features-heading {
@@ -47,7 +44,6 @@
             margin-bottom: 5rem;
         }
 
-
         @media screen and (max-width: 720px) and (orientation: portrait) {
             padding: 4rem 2rem 0 2rem;
 
@@ -57,7 +53,6 @@
         }
     }
 
-
     .image {
         position: relative;
 
@@ -82,10 +77,9 @@
     overflow: hidden;
 
     @media screen and (max-width: 720px) and (orientation: portrait) {
-
     }
 
-    & > .content{
+    & > .content {
         padding: 2rem 8rem 4rem 1rem;
 
         & > p:not(:last-child) {

assets/scss/_styles_project.scss

@@ -86,13 +86,13 @@ privacy_policy = "https://policies.google.com/privacy"
 # This menu appears only if you have at least one [params.versions] set.
 version_menu = "Releases"
 
-# Flag used in the "version-banner" partial to decide whether to display a 
+# Flag used in the "version-banner" partial to decide whether to display a
 # banner on every page indicating that this is an archived version of the docs.
 # Set this flag to "true" if you want to display the banner.
 archived_version = false
 
 # The version number for the version of the docs represented in this doc set.
-# Used in the "version-banner" partial to display a version number for the 
+# Used in the "version-banner" partial to display a version number for the
 # current doc set.
 version = "0.0"
 
@@ -129,7 +129,7 @@ breadcrumb_disable = false
 #  Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
 sidebar_search_disable = false
 #  Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
-navbar_logo = false
+navbar_logo = true
 # Set to true to disable the About link in the site footer
 footer_about_disable = true
 
@@ -144,7 +144,7 @@ yes = 'Glad to hear it! Please <a href="https://github.com/USERNAME/REPOSITORY/i
 no = 'Sorry to hear that. Please <a href="https://github.com/USERNAME/REPOSITORY/issues/new">tell us how we can improve</a>.'
 
 # Adds a reading time to the top of each doc.
-# If you want this feature, but occasionally need to remove the Reading time from a single page, 
+# If you want this feature, but occasionally need to remove the Reading time from a single page,
 # add "hide_readingtime: true" to the page's front matter
 [params.ui.readingtime]
 enable = false

config.toml

@@ -8,7 +8,7 @@
   <div class="mx-auto">
     <div class="col-sm-12 card bg-transparent border-0">
       <div class="text-center">
-        <img src="banner.png" alt="" srcset="">
+        <img class="banner" src="banner.png" alt="" srcset="">
         <p>
             Elekto was created as part of an LFX internship for the Kubernetes project by <a href="https://github.com/kalkayan">Manish Sahani,</a>
             and is now a CNCF infrastructure project.
@@ -133,3 +133,17 @@ <h1 class="display-3 text-center mb-4">Elekto Project is hosted and supported by
   </div>
 </div>
 {{% /blocks/section %}}
+
+<script>
+    let scrollpos = window.scrollY
+    const header = document.querySelector("nav")
+
+    const add_class_on_scroll = () => header.classList.add("td-navbar-scroll")
+    const remove_class_on_scroll = () => header.classList.remove("td-navbar-scroll")
+
+    window.addEventListener('scroll', function() {
+        scrollpos = window.scrollY;
+        if (scrollpos >= '1100') { add_class_on_scroll() }
+        else { remove_class_on_scroll() }
+    })
+</script>

content/en/_index.html

@@ -0,0 +1,5 @@
+<link rel="icon" type="image/png" href="/iconx/favicon-16x16.png" sizes="16x16">
+<link rel="icon" type="image/png" href="/iconx/favicon-32x32.png" sizes="32x32">
+<link rel="icon" type="image/png" href="/iconx/android-192x192.png" sizes="192x192">
+<link rel="apple-touch-icon" href="/iconx/apple-touch-icon-180x180.png" sizes="180x180">
+<meta name="msapplication-config" content="/iconx/browserconfig.xml">

static/favicons/_head.html

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<browserconfig>
+  <msapplication>
+    <tile>
+    <square70x70logo src="/iconx/tile70x70.png" />
+    <square150x150logo src="/iconx/tile150x150.png" />
+    <wide310x150logo src="/iconx/tile310x150.png" />
+    <square310x310logo src="/iconx/tile310x310.png" />
+    <tilecolor>transparent</tilecolor>
+    </tile>
+  </msapplication>
+</browserconfig>