[new feature] background support in landing page

#3
landing:
  height: 500
  image: favicon/android-icon-192x192.png
  title:
    - Zzo Docs
  text:
    - Make a blog with hugo zzo theme!
  titleColor:
  textColor:
  spaceBetweenTitleText: 25
  buttons:
    - link: docs/gettingstarted/quickstart
      text: GET STARTED
      color: primary
    - link: https://github.com/zzossig/hugo-theme-zzo
      text: DOWNLOAD
      color: default
  # backgroundImage:
  #   src: images/landscape.jpg
  #   height: 600

assets/sass/components/_button.scss

@@ -10,28 +10,28 @@
 
   &[data-color="default"] {
     @include themify($themes) {
-      color: themed('landing-button-default');
-      background-color: transparent;
-      border: 1px solid themed('landing-button-default');
+      color: themed('body-background-color');
+      border: 1px solid darken(themed('landing-button-default'), 15%);
+      background-color: themed('landing-button-default');
 
       @include on-event {
         color: themed('body-background-color');
         border: 1px solid darken(themed('landing-button-default'), 15%);
-        background-color: themed('landing-button-default');
+        background-color: lighten(themed('landing-button-default'), 8%);
       }
     }
   }
   
   &[data-color="primary"] {
     @include themify($themes) {
-      color: themed('landing-button-primary');
-      background-color: transparent;
-      border: 1px solid themed('landing-button-primary');
+      color: themed('body-background-color');
+      border: 1px solid darken(themed('landing-button-primary'), 15%);
+      background-color: themed('landing-button-primary');
 
       @include on-event {
         color: themed('body-background-color');
         border: 1px solid darken(themed('landing-button-primary'), 15%);
-        background-color: themed('landing-button-primary');
+        background-color: lighten(themed('landing-button-primary'), 8%);
       }
     }
   }

assets/sass/components/_search.scss

@@ -8,7 +8,7 @@
 
   &[data-bgimg="true"] {
     @include themify($themes) {
-      border: 2px solid themed('search-border-color');
+      border: 2px solid transparent;
       background-color: transparent;
       &:focus-within {
         background-color: themed("search-background-color");

assets/sass/layout/_navbar.scss

@@ -64,7 +64,7 @@
       }
 
       @include themify($themes) {
-        color: themed('body-color');
+        color: themed('navbar-menu-color');
         &.active {
           font-weight: bold;
           color: themed('active-font-color');
@@ -138,7 +138,7 @@
       @include align-items(center);
       @include justify-content(flex-start);
       @include themify($themes) {
-        color: themed('body-color');
+        color: themed('navbar-logo-color');
         @include on-event {
           color: themed('active-font-color');
         }
@@ -172,8 +172,15 @@
 
       @include flexbox();
       @include align-items(flex-end);
+
       @include themify($themes) {
-        color: themed('body-color');
+        &[data-bgimg="true"] {
+          // color
+        }
+
+        &[data-bgimg="false"] {
+          color: themed('body-color');
+        }
       }
     }
   }
@@ -207,7 +214,7 @@
       @include align-items(center);
       @include justify-content(center);
       @include themify($themes) {
-        color: themed('landing-button-default');
+        color: themed('navbar-icon-color');
         @include on-event {
           color: themed('body-color');
           background-color: themed('dropdown-hover-background-color');

assets/sass/main.scss

@@ -6,9 +6,16 @@ $content-font: {{ .Site.Data.font.content_font }};
 $dark-active-font-color: {{ .Site.Data.color.dark_active_font_color }};
 $dark-link-color: {{ .Site.Data.color.dark_link_color }};
 $dark-link-hover-color: {{ .Site.Data.color.dark_link_hover_color }};
+$dark-nav-logo-color: {{ .Site.Data.color.dark_nav_logo_color }};
+$dark-nav-menu-color: {{ .Site.Data.color.dark_nav_menu_color }};
+$dark-nav-icon-color: {{ .Site.Data.color.dark_nav_icon_color }};
+
 $light-active-font-color: {{ .Site.Data.color.light_active_font_color }};
 $light-link-color: {{ .Site.Data.color.light_link_color }};
 $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
+$light-nav-logo-color: {{ .Site.Data.color.light_nav_logo_color }};
+$light-nav-menu-color: {{ .Site.Data.color.light_nav_menu_color }};
+$light-nav-icon-color: {{ .Site.Data.color.light_nav_icon_color }};
 
 @import 'abstracts/variables';
 @import 'abstracts/mixins';

assets/sass/pages/_home.scss

@@ -1,7 +1,6 @@
 .home {
   &__landing {
     width: 100%;
-    min-height: 500px;
     
     @include flexbox();
     @include align-items(center);

assets/sass/themes/_dark.scss

@@ -11,6 +11,9 @@ $dark: (
   back-background-color: #212121,
   navbar-background-color: #403E41,
   navbar-hover-background-color: rgba(225,225,225,0.4),
+  navbar-logo-color: $dark-nav-logo-color,
+  navbar-menu-color: $dark-nav-menu-color,
+  navbar-icon-color: $dark-nav-icon-color,
   search-border-active-color: #424242,
   search-border-outline-color: rgba(166, 166, 166, 0.45),
   search-background-color: lighten(#403E41, 5%),

assets/sass/themes/_light.scss

@@ -11,6 +11,9 @@ $light: (
   back-background-color: #f7f8f9,
   navbar-background-color: #fafafa,
   navbar-hover-background-color: rgba(225,225,225,0.4),
+  navbar-logo-color: $light-nav-logo-color,
+  navbar-menu-color: $light-nav-menu-color,
+  navbar-icon-color: $light-nav-icon-color,
   search-border-outline-color: rgba(207, 216, 220, 0.6),
   search-border-active-color: #b0bec5,
   search-background-color: #fff,

data/color.toml

@@ -1,8 +1,14 @@
 dark_active_font_color = "#aed581"
 dark_link_color = "#FFD866"
 dark_link_hover_color = "#FF6188"
+dark_nav_logo_color = "#FCFCFA"
+dark_nav_menu_color = "#FCFCFA"
+dark_nav_icon_color = "#ccc"
 
 
 light_active_font_color = "#007d9c"
 light_link_color = "#007d9c"
-light_link_hover_color = "#00ACD7"
+light_link_hover_color = "#00ACD7"
+light_nav_logo_color = "#242729"
+light_nav_menu_color = "#242729"
+light_nav_icon_color = "#535a61"

layouts/partials/head/scripts.html

@@ -186,6 +186,7 @@
     var tocElem = document.querySelector('.toc');
     var tableOfContentsElem = tocElem ? tocElem.querySelector('#TableOfContents') : null;
     var singleContentsElem = document.querySelector('.single__contents');
+    var dataBGImgs = document.querySelectorAll('div[data-bgimg]');
 
     {{ $tocLevels := ($.Param "tocLevels") }}
     var tocLevels = JSON.parse({{ $tocLevels | jsonify }});
@@ -196,6 +197,26 @@
       tocLevels = "h1, h2, h3, h4, h5, h6";
     }
 
+    {{ $isLandingBgImg := $.Params.landing.backgroundImage }}
+    var isLandingBgImg = JSON.parse({{ $isLandingBgImg | jsonify }});
+    {{ $isHome := .IsHome }}
+    var isHome = JSON.parse({{ $isHome | jsonify }});
+
+    function setNavbarBG(scrollTop) {
+      if (isHome && isLandingBgImg && Object.keys(isLandingBgImg).length) {
+        if (isLandingBgImg.height <= scrollTop) {
+          dataBGImgs.forEach(function(elem) {
+            elem.setAttribute('data-bgimg', 'false');
+          });
+        } else {
+          dataBGImgs.forEach(function (elem) {
+            elem.setAttribute('data-bgimg', 'true');
+          });
+        }
+      }
+    }
+    setNavbarBG(lastScrollTop);
+
     window.onscroll = function () {
       var st = window.pageYOffset || document.documentElement.scrollTop;
       if (st > lastScrollTop) { // scroll down
@@ -212,6 +233,7 @@
             }
           }
         }) : null;
+        setNavbarBG(st);
       } else { // scroll up
         singleContentsElem ? 
         singleContentsElem.querySelectorAll(tocLevels.toString()).forEach(function(elem) {
@@ -226,6 +248,7 @@
             }
           }
         }) : null;
+        setNavbarBG(st);
       }
       lastScrollTop = st <= 0 ? 0 : st;
     };

layouts/partials/main/landing/home-landing.html

@@ -5,7 +5,7 @@
     {{ with .backgroundImage }}
       <div style="background-image: url('{{ .src | relURL }}'); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: -50px; left: 0; width: 100%; height: {{ .height }}px;"></div>
     {{ end }}
-    <div class="home__landing">
+    <div class="home__landing" style="height: {{ .height }}px;">
       {{ if .image }}
         <div class="home__landing--img">
           <img src="{{ .image | relURL }}" alt="Site Landing Page image">

layouts/partials/navbar/logo/navbar-logo.html

@@ -8,7 +8,7 @@
   {{ end }}
   {{ if ne .Site.Params.logoType "long" }}
     <a href="{{ "/" | relLangURL }}" title="{{ i18n "tooltip-home" }}" rel="home" class="navbar__logo--text-link">
-      <h6 class="navbar__logo--text">{{ .Site.Params.logoText }}</h6>
+      <h6 class="navbar__logo--text" data-bgimg="{{ if and ($.Params.landing.backgroundImage) $.IsHome }}true{{ else }}false{{ end }}">{{ .Site.Params.logoText }}</h6>
     </a>
   {{ end }}
 </div>

layouts/partials/navbar/menu/navbar-menu.html

@@ -5,6 +5,6 @@
   {{ $active = or $active (eq (lower .URL) (lower $current.Title)) }}
   {{ $active = or $active (eq (lower .URL) (lower $current.Type)) }}
   <li class="navbar__menu--item {{ if $active }}active{{ end }}">
-    <a href="{{ .URL | relLangURL | safeURL }}">{{ safeHTML .Name }}</a>
+    <a href="{{ .URL | relLangURL | safeURL }}" data-bgimg="{{ if and ($.Params.landing.backgroundImage) $.IsHome }}true{{ else }}false{{ end }}">{{ safeHTML .Name }}</a>
   </li>
 {{ end }}

layouts/partials/navbar/navbar.html

@@ -1,6 +1,6 @@
 {{ if .Site.Params.enableNavbar }}
 <nav class="nav">
-  <div class="navbar__wrapper" data-bgimg="{{ if $.Params.landing.backgroundImage }}true{{ else }}false{{ end }}">
+  <div class="navbar__wrapper" data-bgimg="{{ if and ($.Params.landing.backgroundImage) .IsHome }}true{{ else }}false{{ end }}">
     <div class="divider">
       <div class="navbar lmr">
         {{ partial "navbar/logo/navbar-logo.html" . }}

layouts/partials/navbar/search/site-search.html

@@ -1,6 +1,6 @@
 {{ if $.Param "enableSearch" }}
 
-<div class="search" data-bgimg="{{ if $.Params.landing.backgroundImage }}true{{ else }}false{{ end }}">
+<div class="search" data-bgimg="{{ if and ($.Params.landing.backgroundImage) .IsHome }}true{{ else }}false{{ end }}">
   <span class="icon">
     {{ partial "svgs/search.svg" (dict "width" 22 "height" 22) }}
   </span>