This is an automated email from the ASF dual-hosted git repository.
psxjoy pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fesod.git
The following commit(s) were added to refs/heads/main by this push:
new 972253c4 docs: TeamPage optimised mobile devices (#642)
972253c4 is described below
commit 972253c4264a119a3e8e2aaafe1ca952268d42df
Author: 박지현 <[email protected]>
AuthorDate: Sun Oct 12 00:37:50 2025 +0900
docs: TeamPage optimised mobile devices (#642)
* docs: TeamPage optimised mobile devices
* refactor: update mobile breakpoint to 768px
---
website/src/pages/team/index.css | 100 +++++++++++++++++++--------------------
website/src/pages/team/index.jsx | 20 ++++----
2 files changed, 60 insertions(+), 60 deletions(-)
diff --git a/website/src/pages/team/index.css b/website/src/pages/team/index.css
index 58e45717..4467a013 100644
--- a/website/src/pages/team/index.css
+++ b/website/src/pages/team/index.css
@@ -19,101 +19,101 @@
/* Derived from
https://github.com/apache/streampark-website/tree/dev/src/pages/team */
.team_page {
- margin-top: 50px !important;
+ margin-top: 50px !important;
}
.team_page h1:first-child {
- font-size: 3rem;
+ font-size: 3rem;
}
.team_page a {
- text-decoration: none;
+ text-decoration: none;
}
.team_page .team_title {
- margin-top: 40px;
+ margin-top: 40px;
}
.team_page .team_desc {
- margin-bottom: 40px;
+ margin-bottom: 40px;
}
.team_page .team_indent {
- line-height: 40px;
+ line-height: 40px;
}
.team_page .desc {
- font-size: 1rem;
- margin-left: .5rem;
+ font-size: 1rem;
+ margin-left: 0.5rem;
}
.team-row {
- --bs-gutter-x: 1.5rem;
- --bs-gutter-y: 0;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin-top: calc(-1 * var(--bs-gutter-y));
- margin-right: calc(-0.5 * var(--bs-gutter-x));
- margin-left: calc(-0.5 * var(--bs-gutter-x));
+ --bs-gutter-x: 1.5rem;
+ --bs-gutter-y: 0;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-top: calc(-1 * var(--bs-gutter-y));
+ margin-right: calc(-0.5 * var(--bs-gutter-x));
+ margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.team-box {
- width: 20% !important;
- padding: 12px;
+ width: 20% !important;
+ padding: 12px;
}
.team-user-img {
- width: 80px;
- border-radius: 50%;
- border: 2px solid #fff;
+ width: 80px;
+ border-radius: 50%;
+ border: 2px solid #fff;
}
.bg-team {
- margin-top: -1.5rem !important;
- padding: 2.5rem 1rem 0.5rem 1rem;
- background-color: #ffffff !important;
- border-radius: 0.75rem;
- box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !important;
+ margin-top: -1.5rem !important;
+ padding: 2.5rem 1rem 0.5rem 1rem;
+ background-color: #ffffff !important;
+ border-radius: 0.75rem;
+ box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !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: 0.25rem;
+ 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: 0.25rem;
}
.team-link .github-icon {
- width: 20px;
- height: 20px;
- color: #fff;
+ width: 20px;
+ height: 20px;
+ color: #fff;
}
[data-theme="dark"] .team-link {
- background-color: #95999c;
+ background-color: #95999c;
}
[data-theme="dark"] .bg-team {
- background-color: #0e1114 !important;
+ background-color: #0e1114 !important;
}
.divider {
- width: 100%;
- height: 1px;
- background-color: #dfdfdf;
+ width: 100%;
+ height: 1px;
+ background-color: #dfdfdf;
}
-.block {
- width: 1200px;
- padding: 0 20px;
- margin: 0 auto;
+@media (max-width: 768px) {
+ .team-box {
+ width: 50% !important;
+ }
}
diff --git a/website/src/pages/team/index.jsx b/website/src/pages/team/index.jsx
index d00edeaf..9069a0f6 100644
--- a/website/src/pages/team/index.jsx
+++ b/website/src/pages/team/index.jsx
@@ -44,7 +44,7 @@ export default function () {
<BrowserOnly>
{() => {
return <Layout>
- <div className="block team_page" style={{padding: "10px 0
30px"}}>
+ <div className="container team_page">
<h1><Translate>team.name</Translate></h1>
<p className="team_desc
team_indent"><Translate>team.desc</Translate></p>
@@ -56,17 +56,17 @@ export default function () {
{
dataSource.pmc.map((item, i) => (
<div className='team-box' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
- <div style={{textAlign: "center"}}>
- <div style={{overflow: "hidden",
zIndex: 1}}>
+ <div style={{ textAlign: "center" }}>
+ <div style={{ overflow: "hidden",
zIndex: 1 }}>
<img className="team-user-img"
src={avatarUrl(item.githubId)} title=""
- alt=""/>
+ alt="" />
</div>
<div className={item.isMentor ?
'team-mentor bg-team' : 'bg-team'}>
<h5
className="team-name">{item.name}</h5>
<small>{getGitName(item.gitUrl)}</small>
<div>
<a className="team-link"
href={item.gitUrl}>
- <Github
className="github-icon"/>
+ <Github
className="github-icon" />
</a>
</div>
</div>
@@ -83,18 +83,18 @@ export default function () {
{
dataSource.committer.map((item, i) => (
<div className='team-box' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
- <div style={{textAlign: "center"}}>
- <div style={{overflow: "hidden",
zIndex: 1}}>
+ <div style={{ textAlign: "center" }}>
+ <div style={{ overflow: "hidden",
zIndex: 1 }}>
<img className="team-user-img"
src={avatarUrl(item.githubId)}
- title=""
- alt=""/>
+ title=""
+ alt="" />
</div>
<div className="bg-team">
<h5
className="team-name">{item.name}</h5>
<small>{getGitName(item.gitUrl)}</small>
<div>
<a className="team-link"
href={item.gitUrl}>
- <Github
className="github-icon"/>
+ <Github
className="github-icon" />
</a>
</div>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
