navbar and hero-body improvements (kedacore#792)

assets/sass/nav.sass

@@ -62,3 +62,19 @@
 
     & + &
       margin-top: 1rem
+
+.scrolled 
+    background: #1d1c29 !important
+    transition: background 1000ms
+
+.navbar-link, .navbar-item
+	color: white;
+
+.navbar-link, .navbar-end .navbar-item
+	&:hover
+		color:#00aeff
+
+.navbar-dropdown .navbar-item
+	color: #4a4a4a
+
+

assets/sass/style.sass

@@ -196,7 +196,10 @@ $hero-body-padding: 4rem 1.5rem
     margin-left: 0.75rem
 
 .has-background-pattern
-  background-image: url("/img/circuit-board.svg")
+	background-color: transparent;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%2324CEFF' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%232fc2f4' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%2337b6e8' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%233daadc' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23419ecf' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%234492c2' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%234587b5' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23467ca8' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%2345719b' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%2344668e' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23425c81' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%233f5274' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%233b4867' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23363f5a' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%2331364e' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%232c2d42' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23252536' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%231F1D2B' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
+	background-attachment: fixed;
+	background-size: cover;
 
 .has-extra-padding
   margin: 1.5rem 0
@@ -239,3 +242,4 @@ hr
   &.are-spaced
     .button:not(:first-child)
       margin-left: 0.5rem
+

layouts/partials/home/hero.html

@@ -3,7 +3,7 @@
 {{ $btns   := site.Menus.buttons }}
 {{ $sect   := .Section }}
 {{ $docsL  := index site.Params.versions.docs 0 }}
-<section class="hero is-dark is-medium has-background-pattern">
+<section class="hero is-medium has-background-pattern">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered is-variable is-8">
@@ -47,3 +47,12 @@
     </div>
   </div>
 </section>
+
+<script>
+        $(function () {
+            $(document).scroll(function () {
+                var $nav = $("#mainnav");
+                $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
+            });
+        });
+    </script>

layouts/partials/navbar.html

@@ -7,12 +7,12 @@
 {{ $scalers  := where site.RegularPages ".CurrentSection.Title" "Scalers" }}
 {{ $versions := site.Params.versions.docs }}
 {{ $latest   := index $versions 0 }}
-<nav class="navbar is-black is-fixed-top" role="navigation" aria-label="main navigation" x-data="{ open: false }">
+<nav id="mainnav" style="padding:10px" class="navbar is-transparent has-background-pattern is-fixed-top" role="navigation" aria-label="main navigation" x-data="{ open: false }">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-brand" style="align-items: end;">
       <a class="navbar-item" href="{{ $home }}">
         {{ $url := printf "img/logos/%s" $logo | relURL }}
-        <img src="{{ $url }}">
+        <img src="{{ $url }}" style="transform: scale(2);">
       </a>
 
       <a role="button" class="navbar-burger" data-target="navbar-menu" aria-label="menu" aria-expanded="false" @click="open = !open" @click.away="open = false" :class="{ 'is-active': open }">
@@ -45,7 +45,7 @@
             <span>
               {{ .Name }}
             </span>
-            <span class="icon has-text-secondary">
+            <span class="icon has-text-white">
               <i class="fas fa-md fa-caret-down"></i>
             </span>
           </a>
@@ -59,7 +59,7 @@
                 {{ .Name }}
               </span>
               {{ if $isExternal }}
-              <span class="icon has-text-secondary">
+              <span class="icon has-text-white">
                 <i class="fas fa-xs fa-external-link-alt"></i>
               </span>
               {{ end }}
@@ -78,7 +78,7 @@
             <span>
               {{ .Name }}
             </span>
-            <span class="icon has-text-secondary">
+            <span class="icon has-text-white">
               <i class="fas fa-md fa-caret-down"></i>
             </span>
           </a>
@@ -91,7 +91,7 @@
                 {{ .Name }}
               </span>
               {{ if $isExternal }}
-              <span class="icon has-text-secondary">
+              <span class="icon has-text-white">
                 <i class="fas fa-xs fa-external-link-alt"></i>
               </span>
               {{ end }}
@@ -105,7 +105,7 @@
             {{ .Name }}
           </span>
           {{ if $isExternal }}
-          <span class="icon has-text-secondary">
+          <span class="icon has-text-white">
             <i class="fas fa-xs fa-external-link-alt"></i>
           </span>
           {{ end }}
@@ -122,3 +122,16 @@
     </div>
   </div>
 </nav>
+
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+
+<script>
+        $(function () {
+            $(document).scroll(function () {
+                var $nav = $("#mainnav");
+                $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
+            });
+        });
+    </script>