This is an automated email from the ASF dual-hosted git repository.
wenming pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 0d4a1a2 style: update the design of user showcase in homepage (#183)
0d4a1a2 is described below
commit 0d4a1a23d783b27f6fa7330c46d619b7903bd06e
Author: qier222 <[email protected]>
AuthorDate: Sat Feb 13 15:27:23 2021 +0800
style: update the design of user showcase in homepage (#183)
Co-authored-by: juzhiyuan <[email protected]>
---
website/src/css/customTheme.css | 76 +++++++++++++++++++++++++++++++++++------
website/src/pages/help.js | 8 +++--
website/src/pages/index.js | 39 ++++++++++++++-------
3 files changed, 98 insertions(+), 25 deletions(-)
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index c308d43..2ef7443 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -9,7 +9,7 @@
--ifm-color-shadow--lw: #7f1e1b;
--color-primary: #e8433e;
- --color-secondary: #6b7280;
+ --color-secondary: #4b5563;
--color-secondary-bg: #f3f4f6;
}
@@ -95,17 +95,73 @@ header h2 {
}
.showcase {
padding-bottom: 8rem;
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0;
+ margin-right: 0;
+}
+.showcase .container {
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0;
+ margin-right: 0;
+ max-width: unset;
}
-.showcase .logos {
+.showcase .user-logos {
margin-top: 48px;
}
-.showcase .logo {
- margin: 0 12px;
- padding: 8px 18px;
- height: 50px;
- border-radius: 8px;
- background: white;
+
+.showcase .user-logos:hover span {
+ animation-play-state: paused !important;
+}
+
+.showcase .logo-row {
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ height: 5rem;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+
+.showcase .user-logos-container {
+ display: inline-block;
+ white-space: nowrap;
+ overflow: hidden;
+ position: absolute;
+}
+
+.showcase .user-logos-container section {
+ white-space: nowrap;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+}
+
+.showcase .user-logos-container section span {
+ animation: 36s linear 0s infinite reverse none running logo-animation;
+ white-space: nowrap;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+}
+
+.showcase .user-logo {
+ max-width: 128px;
+ max-height: 50px;
+ margin: 0 16px;
+}
+
+@keyframes logo-animation {
+ from {
+ transform: translateX(-100%);
+ }
+
+ to {
+ transform: translateX(0%);
+ }
}
/* learn how */
@@ -160,7 +216,7 @@ header h2 {
}
.button.secondary {
background: #f3f4f6;
- color: #6b7280;
+ color: var(--color-secondary);
border: 1px solid #d1d5db;
box-sizing: border-box;
}
@@ -181,7 +237,7 @@ a:hover {
font-size: 1.1rem;
}
.footer__links .footer__item a {
- opacity: 0.86;
+ opacity: 0.94;
}
.footer__links a:hover {
opacity: 1;
diff --git a/website/src/pages/help.js b/website/src/pages/help.js
index 756a5fe..246c49e 100644
--- a/website/src/pages/help.js
+++ b/website/src/pages/help.js
@@ -22,7 +22,11 @@ function Help(props) {
<div class="card">
<div className="header">
<h2>
- <img src="/img/documents.png" id="documents-icon" />
+ <img
+ src="/img/documents.png"
+ id="documents-icon"
+ alt="documents icon"
+ />
Browse Docs
</h2>
</div>
@@ -39,7 +43,7 @@ function Help(props) {
<div class="card">
<div className="header">
<h2>
- <img src="/img/community.png" />
+ <img src="/img/community.png" alt="community icon" />
Join the community
</h2>
</div>
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 6c3ffd8..98574ad 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -109,6 +109,7 @@ const LearnHow = () => (
className="image"
src="https://github.com/apache/apisix/blob/master/doc/images/apisix.png?raw=true";
align="right"
+ alt="apisix-description"
/>
</div>
</div>
@@ -122,18 +123,12 @@ const Showcase = () => {
if ((siteConfig.customFields.users || []).length === 0) {
return null;
}
- const showcase = siteConfig.customFields.users
- .filter((user) => user.pinned)
- .map((user) => (
- <a href={user.infoLink} key={user.infoLink}>
- <img
- className="logo"
- src={user.image}
- alt={user.caption}
- title={user.caption}
- />
- </a>
- ));
+ const showcase = siteConfig.customFields.users.map((user) => (
+ <a href={user.infoLink} key={user.infoLink} target="_blank">
+ <img className="user-logo" src={user.image} alt={user.caption} />
+ </a>
+ ));
+ const middleIndex = (showcase.length / 2).toFixed(0);
return (
<div className="hero text--center showcase">
@@ -148,11 +143,29 @@ const Showcase = () => {
<a
href="https://github.com/apache/apisix/blob/master/doc/powered-by.md";
target="_blank"
+ rel="noopener"
>
<u>Add your company</u>
</a>
</p>
- <div className="logos">{showcase}</div>
+ <div className="user-logos">
+ <div className="logo-row">
+ <span className="user-logos-container">
+ <section>
+ <span>{showcase.slice(0, middleIndex)}</span>
+ <span>{showcase.slice(0, middleIndex)}</span>
+ </section>
+ </span>
+ </div>
+ <div className="logo-row">
+ <span className="user-logos-container">
+ <section>
+ <span>{showcase.slice(middleIndex, showcase.length)}</span>
+ <span>{showcase.slice(middleIndex, showcase.length)}</span>
+ </section>
+ </span>
+ </div>
+ </div>
</div>
</div>
);
![https://github.com/apache/apisix/blob/master/doc/images/apisix.png?raw=true"](https://github.com/apache/apisix/blob/master/doc/images/apisix.png?raw=true"){kind=link}