Skip to content

Commit ba1f8af

Browse files
WangSimiao2000WangSimiao2000
committed
refactor(pages): Enhance friends and tools card styling and layout
- Convert card containers from divs to anchor tags for better semantic HTML and native link behavior - Increase grid column minimum width from 280px to 300px for better spacing - Increase gap between cards from 1rem to 1.25rem for improved visual separation - Expand avatar/icon size from 48px to 52px for better visibility - Increase hover transform from -2px to -3px for more pronounced interaction feedback - Add flexbox layout to card body with centered alignment and consistent gap spacing - Restructure card content with dedicated info wrapper for better text overflow handling - Update typography with improved font sizes and line heights for better readability - Replace opacity-based styling with semantic color variables for consistent theming - Add text truncation with ellipsis for descriptions to prevent layout overflow - Improve accessibility by using semantic color variables instead of opacity values - Standardize padding to 1.25rem 1.5rem across all cards for consistency
1 parent 65aded9 commit ba1f8af

2 files changed

Lines changed: 95 additions & 69 deletions

File tree

‎_tabs/friends.md‎

Lines changed: 49 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,75 +7,88 @@ order: 5
77
<style>
88
.friend-grid {
99
display: grid;
10-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
11-
gap: 1rem;
10+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
11+
gap: 1.25rem;
1212
}
13-
.friend-grid .card {
13+
a.friend-card.card {
14+
text-decoration: none !important;
15+
color: inherit;
16+
border-bottom: none !important;
1417
transition: transform 0.2s, box-shadow 0.2s;
18+
cursor: pointer;
1519
}
16-
.friend-grid .card:hover {
17-
transform: translateY(-2px);
20+
a.friend-card.card:hover {
21+
transform: translateY(-3px);
1822
box-shadow: var(--card-shadow);
19-
}
20-
.friend-grid .card .card-body a {
21-
text-decoration: none;
2223
color: inherit;
2324
border-bottom: none !important;
2425
}
25-
.friend-grid .card .card-body a:hover {
26-
color: inherit;
27-
border-bottom: none !important;
26+
.friend-card .card-body {
27+
display: flex;
28+
align-items: center;
29+
gap: 1rem;
30+
padding: 1.25rem 1.5rem;
2831
}
2932
.friend-avatar {
30-
width: 48px;
31-
height: 48px;
33+
width: 52px;
34+
height: 52px;
3235
border-radius: 50%;
3336
object-fit: cover;
3437
flex-shrink: 0;
3538
}
3639
.friend-icon-fallback {
37-
width: 48px;
38-
height: 48px;
40+
width: 52px;
41+
height: 52px;
42+
border-radius: 50%;
43+
background: var(--sidebar-bg);
3944
display: flex;
4045
align-items: center;
4146
justify-content: center;
42-
font-size: 1.5rem;
43-
opacity: 0.6;
47+
font-size: 1.4rem;
48+
color: var(--text-muted-color);
4449
flex-shrink: 0;
4550
}
51+
.friend-info {
52+
min-width: 0;
53+
flex: 1;
54+
}
4655
.friend-name {
47-
font-size: 1rem;
56+
font-size: 1.05rem;
4857
font-weight: 600;
58+
color: var(--heading-color);
4959
margin: 0;
60+
line-height: 1.4;
5061
}
5162
.friend-desc {
5263
font-size: 0.85rem;
53-
margin: 0.25rem 0 0;
54-
opacity: 0.75;
64+
color: var(--text-muted-color);
65+
margin: 0.3rem 0 0;
66+
line-height: 1.4;
67+
overflow: hidden;
68+
text-overflow: ellipsis;
69+
white-space: nowrap;
5570
}
5671
</style>
5772

5873
<div class="friend-grid">
5974
{% for friend in site.data.friends %}
6075
{% if friend.name and friend.url %}
61-
<div class="card">
62-
<div class="card-body p-0">
63-
<a href="{{ friend.url }}" class="d-flex align-items-center p-0" style="padding: 1.25rem !important;" target="_blank" rel="noopener noreferrer">
64-
{% if friend.icon %}
65-
<img src="{{ friend.icon }}" alt="{{ friend.name }}" class="friend-avatar me-3" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
66-
<span class="friend-icon-fallback me-3" style="display:none;"><i class="fas fa-globe"></i></span>
67-
{% else %}
68-
<span class="friend-icon-fallback me-3"><i class="fas fa-globe"></i></span>
76+
<a href="{{ friend.url }}" class="friend-card card" target="_blank" rel="noopener noreferrer">
77+
<div class="card-body">
78+
{% if friend.icon %}
79+
<img src="{{ friend.icon }}" alt="{{ friend.name }}" class="friend-avatar" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
80+
<span class="friend-icon-fallback" style="display:none;"><i class="fas fa-globe"></i></span>
81+
{% else %}
82+
<span class="friend-icon-fallback"><i class="fas fa-globe"></i></span>
83+
{% endif %}
84+
<div class="friend-info">
85+
<div class="friend-name">{{ friend.name }}</div>
86+
{% if friend.description %}
87+
<div class="friend-desc">{{ friend.description }}</div>
6988
{% endif %}
70-
<div>
71-
<div class="friend-name">{{ friend.name }}</div>
72-
{% if friend.description %}
73-
<div class="friend-desc">{{ friend.description }}</div>
74-
{% endif %}
75-
</div>
76-
</a>
89+
</div>
7790
</div>
78-
</div>
91+
</a>
7992
{% endif %}
8093
{% endfor %}
8194
</div>

‎_tabs/tools.md‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,67 +7,80 @@ order: 6
77
<style>
88
.tool-grid {
99
display: grid;
10-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
11-
gap: 1rem;
10+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
11+
gap: 1.25rem;
1212
}
13-
.tool-grid .card {
13+
a.tool-card.card {
14+
text-decoration: none !important;
15+
color: inherit;
16+
border-bottom: none !important;
1417
transition: transform 0.2s, box-shadow 0.2s;
18+
cursor: pointer;
1519
}
16-
.tool-grid .card:hover {
17-
transform: translateY(-2px);
20+
a.tool-card.card:hover {
21+
transform: translateY(-3px);
1822
box-shadow: var(--card-shadow);
19-
}
20-
.tool-grid .card .card-body a {
21-
text-decoration: none;
2223
color: inherit;
2324
border-bottom: none !important;
2425
}
25-
.tool-grid .card .card-body a:hover {
26-
color: inherit;
27-
border-bottom: none !important;
26+
.tool-card .card-body {
27+
display: flex;
28+
align-items: center;
29+
gap: 1rem;
30+
padding: 1.25rem 1.5rem;
2831
}
2932
.tool-icon {
30-
width: 48px;
31-
height: 48px;
33+
width: 52px;
34+
height: 52px;
35+
border-radius: 50%;
36+
background: var(--sidebar-bg);
3237
display: flex;
3338
align-items: center;
3439
justify-content: center;
35-
font-size: 1.5rem;
36-
opacity: 0.6;
40+
font-size: 1.4rem;
41+
color: var(--text-muted-color);
3742
flex-shrink: 0;
3843
}
44+
.tool-info {
45+
min-width: 0;
46+
flex: 1;
47+
}
3948
.tool-name {
40-
font-size: 1rem;
49+
font-size: 1.05rem;
4150
font-weight: 600;
51+
color: var(--heading-color);
4252
margin: 0;
53+
line-height: 1.4;
4354
}
4455
.tool-desc {
4556
font-size: 0.85rem;
46-
margin: 0.25rem 0 0;
47-
opacity: 0.75;
57+
color: var(--text-muted-color);
58+
margin: 0.3rem 0 0;
59+
line-height: 1.4;
60+
overflow: hidden;
61+
text-overflow: ellipsis;
62+
white-space: nowrap;
4863
}
4964
</style>
5065

5166
<div class="tool-grid">
5267
{% for tool in site.data.tools %}
5368
{% if tool.name and tool.url %}
54-
<div class="card">
55-
<div class="card-body p-0">
56-
<a href="{{ tool.url }}" class="d-flex align-items-center p-0" style="padding: 1.25rem !important;">
57-
{% if tool.icon %}
58-
<span class="tool-icon me-3"><i class="{{ tool.icon }}"></i></span>
59-
{% else %}
60-
<span class="tool-icon me-3"><i class="fas fa-puzzle-piece"></i></span>
69+
<a href="{{ tool.url }}" class="tool-card card">
70+
<div class="card-body">
71+
{% if tool.icon %}
72+
<span class="tool-icon"><i class="{{ tool.icon }}"></i></span>
73+
{% else %}
74+
<span class="tool-icon"><i class="fas fa-puzzle-piece"></i></span>
75+
{% endif %}
76+
<div class="tool-info">
77+
<div class="tool-name">{{ tool.name }}</div>
78+
{% if tool.description %}
79+
<div class="tool-desc">{{ tool.description }}</div>
6180
{% endif %}
62-
<div>
63-
<div class="tool-name">{{ tool.name }}</div>
64-
{% if tool.description %}
65-
<div class="tool-desc">{{ tool.description }}</div>
66-
{% endif %}
67-
</div>
68-
</a>
81+
</div>
6982
</div>
70-
</div>
83+
</a>
7184
{% endif %}
7285
{% endfor %}
7386
</div>

0 commit comments

Comments
 (0)