[incubator-yunikorn-site] branch master updated: [YUNIKORN 684] Add why-yunikorn in the website home page (#55)

[kmarton]

This is an automated email from the ASF dual-hosted git repository.

kmarton pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-yunikorn-site.git


The following commit(s) were added to refs/heads/master by this push:
     new 22b5664  [YUNIKORN 684] Add why-yunikorn in the website home page (#55)
22b5664 is described below

commit 22b56648a03572c2496b5aab9d5217c73d517827
Author: Weiwei Yang <w...@apache.org>
AuthorDate: Thu Jun 3 02:54:47 2021 -0700

    [YUNIKORN 684] Add why-yunikorn in the website home page (#55)
---
 src/pages/index.js          |  13 +++++++++++--
 src/pages/styles.module.css |   4 ++--
 static/img/why-dark.png     | Bin 0 -> 246279 bytes
 static/img/why.png          | Bin 0 -> 245630 bytes
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 0d5613c..ab7c38f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -19,6 +19,14 @@ import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
+import useThemeContext from '@theme/hooks/useThemeContext';
+
+const ImageSwitcher = ({lightImageSrc, darkImageSrc}) => {
+    const { isDarkTheme } = useThemeContext();
+    return (
+        <img src={isDarkTheme ? darkImageSrc : lightImageSrc} alt="why" 
className={styles.timelineImage} />
+    )
+}
 
 const features = [
   {
@@ -104,8 +112,9 @@ function Home() {
 
             <section className="features_src-pages-">
                 <div className="container">
-                    <h3 className="text--center">Project Timeline</h3>
-                    <img src="img/project-timeline.png" 
className={styles.timelineImage}/>
+                    <h1 className="text--center">☺ WHY YUNIKORN?</h1>
+                    {/*<img src="img/why-dark.png" 
className={styles.timelineImage}/>*/}
+                    <ImageSwitcher darkImageSrc={"img/why-dark.png"} 
lightImageSrc={"img/why.png"} />
                 </div>
             </section>
         </main>
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 24c1c74..581e46d 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -52,8 +52,8 @@
 }
 
 .timelineImage {
-  height: 80%;
-  width: 80%;
+  height: 70%;
+  width: 70%;
   display: block;
   margin-left: auto;
   margin-right: auto;
diff --git a/static/img/why-dark.png b/static/img/why-dark.png
new file mode 100644
index 0000000..41533d1
Binary files /dev/null and b/static/img/why-dark.png differ
diff --git a/static/img/why.png b/static/img/why.png
new file mode 100644
index 0000000..a93be0c
Binary files /dev/null and b/static/img/why.png differ