feat: sections in landing support backgroundColor setting, details im…

…porve
ashisa · Jul 31, 2018 · 42a9edd · 42a9edd
1 parent 01b9048
commit 42a9edd
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 22 deletions.
diff --git a/_includes/scripts/lib/affix.js b/_includes/scripts/lib/affix.js
@@ -77,12 +77,12 @@
         }, 100);
         timeout = setTimeout(function() {
           clearInterval(interval);
-        }, 60000);
+        }, 45000);
         window.pageLoad.then(function() {
           setTimeout(function() {
             clearInterval(interval);
             clearTimeout(timeout);
-          }, 1500);
+          }, 3000);
         });
         $scrollTarget.on('scroll', function() {
           disabled || setState();

diff --git a/_includes/scripts/lib/toc.js b/_includes/scripts/lib/toc.js
@@ -71,12 +71,12 @@
         }, 100);
         timeout = setTimeout(function() {
           clearInterval(interval);
-        }, 60000);
+        }, 45000);
         window.pageLoad.then(function() {
           setTimeout(function() {
             clearInterval(interval);
             clearTimeout(timeout);
-          }, 1500);
+          }, 3000);
         });
         $scrollTarget.on('scroll', function() {
           disabled || setState(null, scrolling);

diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -16,7 +16,7 @@
 {%- elsif page.data.theme == 'dark' -%}
   <section class="section section--dark overlay" style="background-image: url({{ _url }});">
 {%- else -%}
-  <section class="section overlay" style="background-image: url({{ page.data.background_image.src }});">
+  <section class="section overlay" style="background-image: url({{ _url }});">
 {%- endif -%}
     <div class="section__content">
       <h1>{{ _title }}</h1>
@@ -37,12 +37,19 @@ <h2 itemprop="alternativeHeadline">{{ page.data.sub_title }}</h2>
   </section>
 
   {%- for _section in page.data.sections -%}
+    {%- include snippets/get-nav-url.html path=_section.background_image.src -%}
+    {%- assign _url = __return -%}
     {%- if _section.theme == 'light' -%}
-      <section class="section section--light feature" id="section-{{ forloop.index }}">
+      <section class="section section--light feature" id="section-{{ forloop.index }}"
     {%- elsif _section.theme == 'dark' -%}
-      <section class="section section--dark feature" id="section-{{ forloop.index }}">
+      <section class="section section--dark feature" id="section-{{ forloop.index }}"
     {%- else -%}
-      <section class="section feature" id="section-{{ forloop.index }}">
+      <section class="section feature" id="section-{{ forloop.index }}"
+    {%- endif -%}
+    {%- if _section.background_color -%}
+        style="background-image: url({{ _url }}); background-color: {{ _section.background_color }};">
+    {%- else -%}
+        style="background-image: url({{ _url }});">
     {%- endif -%}
 
         <div class="section__content">

diff --git a/_sass/layout/_landing.scss b/_sass/layout/_landing.scss
@@ -8,6 +8,7 @@
   .section {
     text-align: center;
     background-color: $text-background-color;
+    background-size: cover;
     @include flexbox();
     @include align-items(center);
     h1 {
@@ -68,8 +69,6 @@
   .overlay {
     min-height: 40rem;
     padding: map-get($spacers, 5) 0;
-    background-image: url(/docs/assets/images/cover1.jpeg);
-    background-size: cover;
     @include media-breakpoint-down(md) {
       min-height: 28rem;
     }

diff --git a/docs/landing.html b/docs/landing.html
@@ -23,18 +23,22 @@
         src: https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/TeXt-responsive.png
     - title: Super Customizable
       description: Everything from the menus, sidebars, comments, and more can be configured or set with YAML Front Matter.
+      theme: dark
       actions:
         - text: Learn More
           url: /docs/en/configuration
       image:
         src: https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/TeXt-skins.png
+      background_color: '#515151'
     - title: Plenty Layouts
       description: With the help of layouts, you can easily make different type of pages.
+      theme: dark
       actions:
         - text: Learn More
           url: /docs/en/layouts
       image:
         src: https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/TeXt-layouts.png
+      background_color: '#515151'
     - title: Enhanced User Experience
       children:
         - title: Additional styles
@@ -48,10 +52,12 @@
             - text: Learn More
               url: /docs/en/markdown-enhancements
     - title: 100% Free
+      theme: dark
       description: Free to use however you want under the MIT License. Clone it, fork it, customize it, whatever!
       actions:
         - text: '<i class="fab fa-github"></i> GitHub'
           url: https://github.com/kitian616/jekyll-TeXt-theme
+      background_color: '#515151'
     - title: Tip Me
       children:
         - title: 'WeChat <i class="fas fa-arrow-down"></i>'
@@ -75,15 +81,13 @@
 
 <script src="https://cdn.jsdelivr.net/npm/typeit@5.10.1/dist/typeit.min.js"></script>
 <script>
-  window.pageLoad.then(function() {
-    setTimeout(function() {
-      new TypeIt('.tips', {
-        strings: ['Personal Site.', 'Team Site.', 'Blog.', 'Project.', 'Documentation.'],
-        speed: 150,
-        breakLines: false,
-        autoStart: true,
-        loop: true
-      });
-    }, 300);
-  });
+  setTimeout(function() {
+    new TypeIt('.tips', {
+      strings: ['Personal Site.', 'Team Site.', 'Blog.', 'Project.', 'Documentation.'],
+      speed: 150,
+      breakLines: false,
+      autoStart: true,
+      loop: true
+    });
+  }, 600);
 </script>
diff --git a/test/Gemfile b/test/Gemfile
@@ -1,6 +1,7 @@
 source "https://rubygems.org"
 
-gem "jekyll-text-theme", path: "../"
+# gem "jekyll-text-theme", path: "../"
+gem "jekyll-text-theme"
 
 gem "tzinfo-data"
 gem "wdm", "~> 0.1.0" if Gem.win_platform?