Skip to content

Commit 6397e00

Browse files
sunshinegsunshineg
committed
feat(ossheroes): 详情页去 banner 重构为终端风，页脚加 Built With MindMux
- detail.ejs：移除 banner-detail-new.png 与 award.png，profile 区改为终端窗口卡片（$ ./whois <login>），排名下拉改为徽章 pill，头像加霓虹绿边框，移动端适配 - footer.ejs：滚动背景色改用 --osw-card 主题变量，去掉硬编码 #212529 - copyRight.ejs：新增 Built With MindMux 行（https://mindmux.ai/） - index.v1.css：新增终端卡片与排名徽章样式，清理死样式
1 parent 5a5b332 commit 6397e00

5 files changed

Lines changed: 160 additions & 58 deletions

File tree

‎ossheroes/themes/OpenSourceWin/layout/_partial/copyRight.ejs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
<% const footerYear = date(Date.now(), 'YYYY'); %>
2-
<div class="page-footer" data-i18n-zh="Copyright &#169; 2022 - <%= footerYear %> OpenSource.Win" data-i18n-en="Copyright &#169; 2022 - <%= footerYear %> OpenSource.Win">Copyright &#169; 2022 - <%= footerYear %> OpenSource.Win</div>
2+
<div class="page-footer">
3+
<div data-i18n-zh="Copyright &#169; 2022 - <%= footerYear %> OpenSource.Win" data-i18n-en="Copyright &#169; 2022 - <%= footerYear %> OpenSource.Win">Copyright &#169; 2022 - <%= footerYear %> OpenSource.Win</div>
4+
<div class="page-footer-credit">Built With <a href="https://mindmux.ai/" target="_blank" rel="noopener">MindMux</a></div>
5+
</div>

‎ossheroes/themes/OpenSourceWin/layout/_partial/detail.ejs‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,55 @@
1-
<!-- 头部 -->
1+
<!-- 头部（banner 大图已移除，图片文件仍保留在 source/img/） -->
22
<div class="header header-detail">
33
<%- partial('menu') %>
4-
<!-- 头部内容 -->
5-
<div class="container">
6-
<div class="row justify-content-center">
7-
<div class="col-12 col-md-8">
8-
<%- image_tag('img/banner-detail-new.png', {class: 'home-head', alt: 'logo'}) %>
9-
</div>
10-
</div>
11-
</div>
124
</div>
135
<!-- 详情 -->
146
<div class="container pt-5 detail-content">
157
<div class="row justify-content-center">
168
<div class="col-sm-12 col-md-8">
17-
<div class="d-flex flex-column flex-md-row justify-content-between">
18-
<div class="d-flex">
19-
<%- partial('avatar', {className: 'detail-avatar me-4', item: item}) %>
20-
<div>
21-
<div class="detail-nick">
22-
<%- item.name ? item.name : item.slug %>
23-
<%
24-
const years = site.data.rankingList?.sort((a,b)=>b.year - a.year).flatMap(({ year, annualRanking }) =>
25-
annualRanking
26-
.filter(({ login }) => login == item.slug)
27-
.map(({ ranking }) => ({ year, ranking }))
28-
);
29-
%>
9+
<!-- 终端风 profile 卡片：$ ./whois <login> -->
10+
<div class="detail-term">
11+
<div class="detail-term-bar">
12+
<span class="detail-term-dots" aria-hidden="true"><i></i><i></i><i></i></span>
13+
<span class="detail-term-title">opensource@win: ~</span>
14+
</div>
15+
<div class="detail-term-body">
16+
<div class="detail-term-cmd"><span class="detail-term-prompt" aria-hidden="true">$</span> ./whois <%- item.slug %></div>
17+
<%
18+
const years = site.data.rankingList?.sort((a,b)=>b.year - a.year).flatMap(({ year, annualRanking }) =>
19+
annualRanking
20+
.filter(({ login }) => login == item.slug)
21+
.map(({ ranking }) => ({ year, ranking }))
22+
);
23+
%>
24+
<div class="detail-term-result">
25+
<%- partial('avatar', {className: 'detail-avatar', item: item}) %>
26+
<div class="detail-term-info">
27+
<div class="detail-term-line">
28+
<span class="detail-term-out" aria-hidden="true">&gt;</span>
29+
<span class="detail-term-key" data-i18n-zh="名称" data-i18n-en="name">名称</span>
30+
<span class="detail-term-sep" aria-hidden="true">::</span>
31+
<span class="detail-term-name"><%- item.name ? item.name : item.slug %></span>
32+
</div>
33+
<div class="detail-term-line">
34+
<span class="detail-term-out" aria-hidden="true">&gt;</span>
35+
<span class="detail-term-key" data-i18n-zh="简介" data-i18n-en="bio">简介</span>
36+
<span class="detail-term-sep" aria-hidden="true">::</span>
37+
<span class="text-secondary"><%- item.description %></span>
38+
</div>
39+
<div class="detail-term-line">
40+
<span class="detail-term-out" aria-hidden="true">&gt;</span>
41+
<span class="detail-term-key">github</span>
42+
<span class="detail-term-sep" aria-hidden="true">::</span>
43+
<%- link_to('https://github.com/' + item.slug, '@' + item.slug, {external: true}) %>
44+
</div>
3045
<% if(years.length) { %>
31-
<%- partial('_partial/ranking', {years: years}) %>
46+
<div class="detail-ranks">
47+
<%- partial('_partial/ranking', {years: years}) %>
48+
</div>
3249
<% } %>
3350
</div>
34-
<div class="text-secondary mt-2"><%- item.description %></div>
35-
<div class="mt-2">
36-
<%- link_to('https://github.com/' + item.slug, '@' + item.slug, {external: true}) %>
37-
</div>
3851
</div>
3952
</div>
40-
<%- image_tag('img/award.png', {class: 'mt-3 mt-sm-0 d-none d-lg-block', alt: 'Hacking Heros Logo', width: 250, height: 170}) %>
4153
</div>
4254

4355
<div class="contribute mt-4 mt-sm-1">

‎ossheroes/themes/OpenSourceWin/layout/_partial/footer.ejs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<script>
22
window.onload = function () {
33
const navWrap = document.getElementById('navWrap');
4+
// 使用主题变量，保持与暗黑导航一致（不再硬编码旧亮色体系色值）
5+
const navBg = getComputedStyle(document.documentElement).getPropertyValue('--osw-card').trim() || 'var(--osw-card)';
46
window.addEventListener('scroll', function() {
57
if (window.scrollY > 100) {
6-
navWrap.style.backgroundColor = '#212529';
8+
navWrap.style.backgroundColor = navBg;
79
} else {
810
navWrap.style.backgroundColor = 'transparent';
911
}
1012
})
1113
}
12-
</script>
14+
</script>

‎ossheroes/themes/OpenSourceWin/layout/_partial/ranking.ejs‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
<span class="fs-5 lh-sm">
2-
<select class="text-secondary ranking">
3-
<% years.forEach((item, index) => { %>
4-
<option value="<%= item.ranking %>"><%= item.year %> #<%= item.ranking %></option>
5-
<% }) %>
6-
</select>
7-
</span>
1+
<%# 历年排名徽章：[2026] RANK #12 —— 终端风 pill，直角 + 暗绿边框 + 霓虹绿文字 %>
2+
<% years.forEach((item) => { %>
3+
<span class="rank-badge">[<%- item.year %>] <span data-i18n-zh="排名" data-i18n-en="RANK">排名</span> #<%- item.ranking %></span>
4+
<% }) %>

‎ossheroes/themes/OpenSourceWin/source/css/index.v1.css‎

Lines changed: 108 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ a:hover {
7676
border-bottom: 1px solid var(--osw-border);
7777
}
7878
.header-detail {
79-
padding-bottom: 64px;
79+
/* banner 已移除，头部仅保留导航占位 */
80+
padding-bottom: 0;
8081
}
8182
.home-head {
8283
width: 100%;
@@ -242,40 +243,124 @@ a.user-item:hover .nickname {
242243
border-top: 1px solid var(--osw-border);
243244
margin-top: 3rem;
244245
}
246+
.page-footer-credit {
247+
margin-top: 0.25rem;
248+
font-size: 13px;
249+
color: var(--osw-muted);
250+
}
245251
.avatar {
246252
width: 64px;
247253
height: 64px;
248254
border-radius: 0 !important;
249255
border: 1px solid var(--osw-border);
250256
}
251257

252-
/* detail css */
258+
/* detail css —— 终端风 profile 卡片 */
253259
.detail-avatar {
254260
width: 160px;
255261
height: 160px;
262+
flex: none;
256263
border-radius: 0 !important;
264+
border: 1px solid var(--osw-primary);
265+
box-shadow: 0 0 16px oklch(0.85 0.20 140 / 0.25);
266+
}
267+
268+
.detail-term {
269+
background: var(--osw-card);
257270
border: 1px solid var(--osw-border);
271+
border-radius: 0;
272+
overflow: hidden;
258273
}
259-
.detail-nick {
260-
font-weight: 600;
261-
font-size: 40px;
262-
line-height: 48px;
274+
.detail-term-bar {
275+
display: flex;
276+
align-items: center;
277+
gap: 0.75rem;
278+
padding: 0.6rem 1rem;
279+
border-bottom: 1px solid var(--osw-border);
280+
color: var(--osw-muted);
281+
font-size: 13px;
282+
letter-spacing: 0.05em;
283+
}
284+
.detail-term-dots {
285+
display: inline-flex;
286+
gap: 6px;
287+
}
288+
.detail-term-dots i {
289+
width: 10px;
290+
height: 10px;
291+
border-radius: 50%;
292+
background: var(--osw-border);
293+
}
294+
.detail-term-dots i:nth-child(2) {
295+
background: var(--osw-muted);
296+
}
297+
.detail-term-dots i:nth-child(3) {
298+
background: var(--osw-primary);
299+
}
300+
.detail-term-body {
301+
padding: 1.25rem 1.5rem 1.5rem;
302+
}
303+
.detail-term-cmd {
304+
color: var(--osw-foreground);
305+
margin-bottom: 1rem;
306+
word-break: break-all;
307+
}
308+
.detail-term-prompt {
263309
color: var(--osw-primary);
310+
margin-right: 0.25rem;
311+
}
312+
.detail-term-result {
313+
display: flex;
314+
align-items: flex-start;
315+
gap: 1.5rem;
316+
}
317+
.detail-term-info {
318+
flex: 1;
319+
min-width: 0;
320+
}
321+
.detail-term-line {
322+
line-height: 1.8;
264323
word-break: break-word;
265-
word-wrap: break-word;
266324
}
267-
.detail-list > li {
268-
list-style: none;
325+
.detail-term-out {
326+
color: var(--osw-muted);
327+
margin-right: 0.5rem;
269328
}
270-
271-
/* 详情页年份排名下拉框 */
272-
select.ranking {
273-
background-color: var(--osw-card);
329+
.detail-term-key {
330+
display: inline-block;
331+
/* 等宽字体下按最长 key（github，6 字符）对齐 :: 分隔符 */
332+
min-width: 6ch;
274333
color: var(--osw-primary);
334+
}
335+
.detail-term-sep {
336+
color: var(--osw-muted);
337+
margin: 0 0.5rem;
338+
}
339+
.detail-term-name {
340+
font-weight: 600;
341+
color: var(--osw-foreground);
342+
}
343+
344+
/* 历年排名徽章：[2026] RANK #12 —— 直角 + 暗绿边框 + 霓虹绿文字 */
345+
.detail-ranks {
346+
display: flex;
347+
flex-wrap: wrap;
348+
gap: 0.5rem;
349+
margin-top: 0.75rem;
350+
}
351+
.rank-badge {
352+
padding: 0.2rem 0.6rem;
275353
border: 1px solid var(--osw-border);
276354
border-radius: 0;
277-
padding: 2px 8px;
278-
font-family: var(--osw-font);
355+
background: oklch(0.85 0.20 140 / 0.06);
356+
color: var(--osw-primary);
357+
font-size: 13px;
358+
letter-spacing: 0.05em;
359+
white-space: nowrap;
360+
}
361+
362+
.detail-list > li {
363+
list-style: none;
279364
}
280365

281366
.contribute img {
@@ -441,12 +526,15 @@ select.ranking {
441526
.icons-wrap {
442527
gap: 0.5rem;
443528
}
444-
.detail-nick {
445-
font-size: 24px;
446-
line-height: 1.5;
529+
.detail-term-result {
530+
flex-direction: column;
531+
}
532+
.detail-term-body {
533+
padding: 1rem;
447534
}
448-
.ranking {
449-
font-size: 1rem !important;
535+
.detail-avatar {
536+
width: 96px;
537+
height: 96px;
450538
}
451539
.contribute li > a {
452540
word-wrap: break-word;

0 commit comments

Comments
 (0)