Skip to content

style(site): pro-community to borrow from X #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xrdavies merged 1 commit into from
Apr 9, 2026
Merged

style(site): pro-community to borrow from X #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions design-demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,30 @@
background-size: 72px 72px, 72px 72px, auto;
}

.preview.pro-community {
background: #ffffff;
border: 1px solid #eff3f4;
}

.preview.pro-community::before {
inset: 18px 18px auto 18px;
height: 60px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #eff3f4;
}

.preview.pro-community::after {
left: 18px;
right: 18px;
top: 90px;
bottom: 18px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #eff3f4;
}


.actions {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -277,6 +301,7 @@ <h1>现在增加了一版更接近正式发布站的候选稿，可与前面三
<a class="button" href="./atlas-ink/">打开方案 A</a>
<a class="button" href="./summit-signal/">打开方案 B</a>
<a class="button" href="./member-house/">打开方案 C</a>
<a class="button" href="./pro-community/">打开方案 D</a>
</div>
</div>

Expand Down Expand Up @@ -332,6 +357,16 @@ <h2>方案 B · 全球科技峰会型</h2>
<h2>方案 C · 现代会所会员型</h2>
<p>更像高端会员社区或俱乐部网站，强调邀请制、归属感与身份感，适合放大“长期社群”的一面。</p>
</article>

<article class="card">
<div class="card-top">
<span class="pill">内容承载力更强</span>
<a href="./pro-community/">进入 demo</a>
</div>
<div class="preview pro-community"></div>
<h2>方案 D · 专业社区信息型</h2>
<p>强调整体网站内容的模块化组织，呈现清晰、高端而且极具科技感的观感，适合作为内容丰富的平台。</p>
</article>
</section>
</main>
</body>
Expand Down
15 changes: 15 additions & 0 deletions design-demos/pro-community/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>方案 D · 专业社区信息型 | TGO 风格 Demo</title>
<meta name="description" content="TGO 前台视觉探索 demo：专业社区信息型。" />
<link rel="stylesheet" href="../shared/base.css" />
<link rel="stylesheet" href="./theme.css" />
</head>
<body data-theme="pro-community">
<div id="app"></div>
<script type="module" src="../shared/render.js"></script>
</body>
</html>
167 changes: 167 additions & 0 deletions design-demos/pro-community/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
:root {
--page-bg: #ffffff;
--page-ink: #0f1419;
--page-muted: #536471;
--page-line: #eff3f4;
--surface: #ffffff;
--surface-strong: #ffffff;
--surface-alt: #f7f9f9;
--shadow-soft: none;
--shadow-strong: none;
--accent: #1d9bf0;
--accent-strong: #1a8cd8;
--accent-soft: rgba(29, 155, 240, 0.1);
--button-ink: #ffffff;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-alt: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
}

body {
background: var(--page-bg);
}

.page-wrap::before {
display: none;
}

h1, h2, h3 {
letter-spacing: -0.01em;
font-weight: 800;
color: var(--page-ink);
}

.initial-badge,
.brand-mark {
border-radius: 8px;
background: var(--page-bg);
border: 1px solid var(--page-line);
box-shadow: none;
}

.button {
border-radius: 9999px;
font-weight: 700;
border: 1px solid transparent;
transition: background-color 0.2s ease;
}

.button-primary {
background: var(--page-ink);
color: #ffffff;
box-shadow: none;
}

.button-primary:hover {
background: #272c30;
transform: none;
}

.button-secondary {
background: var(--page-bg);
border-color: #cfd9de;
color: var(--page-ink);
box-shadow: none;
}

.button-secondary:hover {
background: rgba(15, 20, 25, 0.1);
transform: none;
}

.hero-frame {
background: var(--page-bg);
border: 1px solid var(--page-line);
box-shadow: none;
border-radius: var(--radius-lg);
padding: 40px;
}

.hero-quote {
padding-left: 16px;
border-left: 4px solid var(--page-line);
color: var(--page-muted);
font-weight: 400;
}

.hero-image {
border-radius: var(--radius-md);
border: 1px solid var(--page-line);
box-shadow: none;
}

.hero-note {
background: var(--surface-alt);
border: 1px solid var(--page-line);
box-shadow: none;
}

.surface-card,
.surface-subcard {
background: var(--page-bg);
backdrop-filter: none;
border: 1px solid var(--page-line);
box-shadow: none;
}

.surface-card:hover,
.surface-subcard:hover {
background: rgba(0, 0, 0, 0.03);
border-color: var(--page-line);
box-shadow: none;
transform: none;
transition: background 0.2s ease;
}

.section-head {
border-bottom: 1px solid var(--page-line);
padding-bottom: 24px;
margin-bottom: 32px;
}

.intro-copy {
max-width: 100%;
}

.experience-card,
.collection-card,
.article-card,
.testimonial-card,
.board-card {
background: var(--page-bg);
transition: background 0.2s ease;
}

.board-card:hover,
.article-card:hover,
.testimonial-card:hover {
transform: none;
background: rgba(0, 0, 0, 0.03);
}

.tag-pill,
.board-branch,
.eyebrow,
.section-kicker {
background: rgba(15, 20, 25, 0.08);
color: var(--page-ink);
border: none;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}

.demo-modebar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--page-line);
}

.demo-header {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--page-line);
}
8 changes: 8 additions & 0 deletions design-demos/shared/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ export const demoThemes = {
reference: "YPO × Chief × Soho House",
summary: "更强调会籍感、邀请感与长期社群归属。",
recommendation: "会员社区气质最强"
},
"pro-community": {
id: "pro-community",
chineseName: "方案 D · 专业社区信息型",
englishName: "Pro Community",
reference: "Vercel × Stripe × Intercom",
summary: "强调整体网站内容的模块化组织，呈现清晰、高端而且极具科技感的观感，适合作为内容丰富的平台。",
recommendation: "内容承载力更强"
}
};

Expand Down
1 change: 1 addition & 0 deletions scripts/serve-design-demos.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,5 @@ server.listen(port, "127.0.0.1", () => {
console.log(`- Atlas Ink: ${baseUrl}atlas-ink/`);
console.log(`- Summit Signal: ${baseUrl}summit-signal/`);
console.log(`- Member House: ${baseUrl}member-house/`);
console.log(`- Pro Community: ${baseUrl}pro-community/`);
});
Loading