[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

7 files changed, 33 insertions, 14 deletions

diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
index ee38ef7..d189e02 100644
--- a/assets/sass/components/_button.scss
+++ b/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%);
       }
     }
   }
diff --git a/assets/sass/components/_search.scss b/assets/sass/components/_search.scss
index 40ac802..513f1e1 100644
--- a/assets/sass/components/_search.scss
+++ b/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");
diff --git a/assets/sass/layout/_navbar.scss b/assets/sass/layout/_navbar.scss
index 4a424bb..6c7c416 100644
--- a/assets/sass/layout/_navbar.scss
+++ b/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');
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 48385e5..ed459d5 100644
--- a/assets/sass/main.scss
+++ b/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';
diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss
index e855f99..817471c 100644
--- a/assets/sass/pages/_home.scss
+++ b/assets/sass/pages/_home.scss
@@ -1,7 +1,6 @@
 .home {
   &__landing {
     width: 100%;
-    min-height: 500px;
     
     @include flexbox();
     @include align-items(center);
diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss
index dd4bed4..1ed1241 100644
--- a/assets/sass/themes/_dark.scss
+++ b/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%),
diff --git a/assets/sass/themes/_light.scss b/assets/sass/themes/_light.scss
index cd4fa1a..f03b266 100644
--- a/assets/sass/themes/_light.scss
+++ b/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,