This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository
https://gitbox.apache.org/repos/asf/incubator-streampark-website.git
The following commit(s) were added to refs/heads/dev by this push:
new 11d47f9 style: team page style and download style (#240)
11d47f9 is described below
commit 11d47f920552ff4446224db875365d0df97bb3f0
Author: Kriszu <[email protected]>
AuthorDate: Thu Sep 7 23:12:10 2023 +0800
style: team page style and download style (#240)
---
src/pages/download/index.less | 6 ++-
src/pages/team/index.jsx | 89 +++++++++++++++++-----------------
src/pages/team/index.less | 109 ++++++++++++++++--------------------------
3 files changed, 92 insertions(+), 112 deletions(-)
diff --git a/src/pages/download/index.less b/src/pages/download/index.less
index 369cded..94e36ac 100644
--- a/src/pages/download/index.less
+++ b/src/pages/download/index.less
@@ -1,6 +1,10 @@
@import url('/src/styles/variable.less');
[data-theme="dark"] .download_page .custom-info-block {
- background-color: #e2e7eb !important;
+ background-color: rgba(255, 255, 255, 0.07) !important;
+ color: #b5bbc5;
+ .custom-block-title{
+ color: #f3f4f5;
+ }
}
.download_page {
diff --git a/src/pages/team/index.jsx b/src/pages/team/index.jsx
index 5b8c6f8..3e9d36a 100644
--- a/src/pages/team/index.jsx
+++ b/src/pages/team/index.jsx
@@ -12,6 +12,9 @@ export default function () {
const isBrowser = useIsBrowser();
const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ?
'zh-CN' : 'en';
const dataSource = config?.[language];
+ function getGitName(url) {
+ return '@' + url.replace('https://github.com/', '');
+ }
return (
<BrowserOnly>
{() => {
@@ -32,24 +35,24 @@ export default function () {
Mentor
<span className="desc">{dataSource.info.tip}</span>
</h3>
- <div className="row bg-gray py-4">
+ <div className="row py-4">
{
dataSource.mentor.map((item, i) => (
- <div className="team_user mb-5 px-4" key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
- <a href={item.gitUrl} target="_blank">
- <div className="team team-hover rounded">
- <div className="team-img">
- <img src={item.avatarUrl} alt={item.name} />
- </div>
- <div className="team-info">
- <span className="team-name
text-dark">{item.name}</span>
- <p className="team-leader d-flex align-items-center
justify-content-center">
+ <div className='col-lg-3 col-sm-6 my-3' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
+ <div className="hover-top-in text-center" >
+ <div className="overflow-hidden z-index-1
position-relative px-5">
+ <img className="team-user-img" src={item.avatarUrl}
title="" alt="" />
+ </div>
+ <div className="mx-2 mx-xl-3 position-relative bg-team
text-center hover-top--in">
+ <h6 className="font-weight-bold team-name
mb-1">{item.name}</h6>
+ <small>{getGitName(item.gitUrl)}</small>
+ <div className="pt-2">
+ <a className="icon-sm team-link" href={item.gitUrl}>
<Github className="github-icon" />
- {item.name}
- </p>
+ </a>
</div>
</div>
- </a>
+ </div>
</div>
))
}
@@ -59,25 +62,25 @@ export default function () {
PPMC
<span className="desc">{dataSource.info.tip}</span>
</h3>
- <div className="row bg-gray py-4">
+ <div className="row py-4">
{
dataSource.PPMC.map((item, i) => (
- <div className="team_user mb-5 px-4" key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
- <a href={item.gitUrl} target="_blank">
- <div className="team team-hover rounded">
- <div className="team-img">
- <img src={item.avatarUrl} alt={item.name} />
- </div>
- <div className="team-info">
- <span className="team-name
text-dark">{item.name}</span>
- <p className="team-leader d-flex
align-items-center justify-content-center">
- <Github className="github-icon" />
- {item.name}
- </p>
- </div>
+ <div className='col-lg-3 col-sm-6 my-3' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
+ <div className="hover-top-in text-center" >
+ <div className="overflow-hidden z-index-1
position-relative px-5">
+ <img className="team-user-img" src={item.avatarUrl}
title="" alt="" />
+ </div>
+ <div className="mx-2 mx-xl-3 position-relative bg-team
text-center hover-top--in">
+ <h6 className="font-weight-bold team-name
mb-1">{item.name}</h6>
+ <small>{getGitName(item.gitUrl)}</small>
+ <div className="pt-2">
+ <a className="icon-sm team-link" href={item.gitUrl}>
+ <Github className="github-icon" />
+ </a>
</div>
- </a>
+ </div>
</div>
+ </div>
))
}
</div>
@@ -86,25 +89,25 @@ export default function () {
Committer
<span className="desc">{dataSource.info.tip}</span>
</h3>
- <div className="row bg-gray py-4">
+ <div className="row py-4">
{
dataSource.committer.map((item, i) => (
- <div className="team_user mb-5 px-4" key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
- <a href={item.gitUrl} target="_blank">
- <div className="team team-hover rounded">
- <div className="team-img">
- <img src={item.avatarUrl} alt={item.name} />
- </div>
- <div className="team-info">
- <span className="team-name
text-dark">{item.name}</span>
- <p className="team-leader d-flex
align-items-center justify-content-center">
- <Github className="github-icon" />
- {item.name}
- </p>
- </div>
+ <div className='col-lg-3 col-sm-6 my-3' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
+ <div className="hover-top-in text-center" >
+ <div className="overflow-hidden z-index-1
position-relative px-5">
+ <img className="team-user-img" src={item.avatarUrl}
title="" alt="" />
+ </div>
+ <div className="mx-2 mx-xl-3 position-relative bg-team
text-center hover-top--in">
+ <h6 className="font-weight-bold team-name
mb-1">{item.name}</h6>
+ <small>{getGitName(item.gitUrl)}</small>
+ <div className="pt-2">
+ <a className="icon-sm team-link" href={item.gitUrl}>
+ <Github className="github-icon" />
+ </a>
</div>
- </a>
+ </div>
</div>
+ </div>
))
}
</div>
diff --git a/src/pages/team/index.less b/src/pages/team/index.less
index a12951f..1592047 100644
--- a/src/pages/team/index.less
+++ b/src/pages/team/index.less
@@ -104,83 +104,56 @@
/*****************************
team
*****************************/
-.team_user {
- width: 20%!important;
+.team-user-img {
+ min-width: 200px;
+ border-radius:50%;
+ border: 5px solid #fff;
+ box-shadow: 0 .375rem 1.5rem 0 rgba(87,96,113,.125)!important;
}
-.team {
- background: #fff;
- padding: 10px 0;
- text-align: center;
- position: relative;
- &:hover{
- transform:translateY(-10px)
- }
- .team-img {
-
- img {
- display: inline-block;
- width: 100px;
- height: 100px;
- border-radius: 50%;
- border: 2px solid #f5f5ff ;
- }
-
- }
-
- .team-info {
- text-align: center;
- margin-top: 20px;
-
- ul {
- margin-bottom: 0px;
-
- li {
- display: inline-block;
- margin: 0px 10px;
- }
-
- }
- .team-name {
- display: inline-block;
- font-size: 17px;
- font-weight: 600;
- margin-bottom: 10px;
- }
-
- .team-leader {
- font-size: 12px;
- font-weight: 300;
- margin-bottom: 7px;
- color: #333;
- .github-icon {
- width: 20px;
- height: 20px;
- margin-right: 5px;
- }
- }
+.hover-top-in .hover-top--in {
+ transition: ease-in-out all .35s;
+ position: relative;
+ top: 0
+}
+.hover-top-in:hover .hover-top--in {
+ top: -10px
+}
+.bg-team {
+ margin-top: -1.5rem!important;
+ padding: 2.5rem 1rem .5rem 1rem;
+ background-color: rgb(255,255,255)!important;
+ border-radius: .75rem;
+ box-shadow: 0 .375rem 1.5rem 0 rgba(87,96,113,.125)!important;
+}
+.team-link{
+ background-color: #fff;
+ border-radius: 50%;
+ width: 1.5rem;
+ height: 1.5rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 75%;
+ line-height: normal;
+ margin-right:.25rem;
+ .github-icon{
+ width: 20px ;
+ height: 20px;
+ color: #fff;
}
-
}
-.team.team-hover {
- // background-color: #f5f9ff;
- transition: all 0.3s ease-in-out;
- &:hover {
- background-color: #fff;
- box-shadow: 0 1.0rem 2rem rgba(0, 0, 0, .05);
- }
+[data-theme="dark"] {
-}
+ .bg-team {
+ background-color: rgb(14,17,20)!important;
-@media (max-width:991px) {
- .team {
- padding: 20px;
}
-
}
-.bg-gray{
- background-color: var(--ifm-color-primary-contrast-background);
+.team-name{
+ font-size: 1rem;
}
