Skip to content

Commit 65aded9

Browse files
WangSimiao2000WangSimiao2000
committed
refactor(pages): Refactor friends and tools pages with improved card styling
- Rename grid container classes from `.card-grid` to `.friend-grid` and `.tool-grid` for better specificity - Reduce gap spacing from 1.5rem to 1rem for tighter card layout - Consolidate custom card styles to use existing `.card` component classes - Simplify icon handling by removing separate `.card-icon` wrapper and using direct styling - Rename custom classes for clarity: `.friend-card` → `.card`, `.card-text` → card body content - Add utility classes (`.d-flex`, `.align-items-center`, `.me-3`, `.p-0`) for consistent spacing and alignment - Update hover effects to use `var(--card-shadow)` for consistency with theme variables - Remove text decoration and color overrides on links within cards for cleaner styling - Restructure HTML to leverage Bootstrap card component structure for better maintainability
1 parent 118317a commit 65aded9

2 files changed

Lines changed: 78 additions & 106 deletions

File tree

‎_tabs/friends.md‎

Lines changed: 41 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,91 +5,77 @@ order: 5
55
---
66

77
<style>
8-
.card-grid {
8+
.friend-grid {
99
display: grid;
1010
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
11-
gap: 1.5rem;
11+
gap: 1rem;
1212
}
13-
14-
.friend-card {
15-
background: var(--card-bg);
16-
border: 1px solid var(--card-border-color);
17-
border-radius: 0.75rem;
18-
padding: 1.25rem;
13+
.friend-grid .card {
1914
transition: transform 0.2s, box-shadow 0.2s;
20-
text-decoration: none;
21-
color: var(--text-color);
22-
display: flex;
23-
align-items: center;
24-
gap: 1rem;
2515
}
26-
27-
.friend-card:hover {
16+
.friend-grid .card:hover {
2817
transform: translateY(-2px);
29-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
18+
box-shadow: var(--card-shadow);
3019
}
31-
32-
.card-icon {
33-
flex-shrink: 0;
34-
width: 48px;
35-
height: 48px;
36-
display: flex;
37-
align-items: center;
38-
justify-content: center;
20+
.friend-grid .card .card-body a {
21+
text-decoration: none;
22+
color: inherit;
23+
border-bottom: none !important;
3924
}
40-
41-
.card-icon img {
25+
.friend-grid .card .card-body a:hover {
26+
color: inherit;
27+
border-bottom: none !important;
28+
}
29+
.friend-avatar {
4230
width: 48px;
4331
height: 48px;
4432
border-radius: 50%;
4533
object-fit: cover;
34+
flex-shrink: 0;
4635
}
47-
48-
.default-icon {
36+
.friend-icon-fallback {
37+
width: 48px;
38+
height: 48px;
4939
display: flex;
5040
align-items: center;
5141
justify-content: center;
52-
width: 48px;
53-
height: 48px;
5442
font-size: 1.5rem;
55-
color: var(--text-color);
5643
opacity: 0.6;
44+
flex-shrink: 0;
5745
}
58-
59-
.card-text h3 {
60-
margin: 0;
46+
.friend-name {
6147
font-size: 1rem;
6248
font-weight: 600;
63-
color: var(--text-color);
49+
margin: 0;
6450
}
65-
66-
.card-text p {
67-
margin: 0.25rem 0 0;
51+
.friend-desc {
6852
font-size: 0.85rem;
69-
color: var(--text-color);
53+
margin: 0.25rem 0 0;
7054
opacity: 0.75;
7155
}
7256
</style>
7357

74-
<div class="card-grid">
58+
<div class="friend-grid">
7559
{% for friend in site.data.friends %}
7660
{% if friend.name and friend.url %}
77-
<a href="{{ friend.url }}" class="friend-card" target="_blank" rel="noopener noreferrer">
78-
<div class="card-icon">
79-
{% if friend.icon %}
80-
<img src="{{ friend.icon }}" alt="{{ friend.name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
81-
<span class="default-icon" style="display:none;"><i class="fas fa-globe"></i></span>
82-
{% else %}
83-
<span class="default-icon"><i class="fas fa-globe"></i></span>
84-
{% endif %}
85-
</div>
86-
<div class="card-text">
87-
<h3>{{ friend.name }}</h3>
88-
{% if friend.description %}
89-
<p>{{ friend.description }}</p>
90-
{% endif %}
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>
69+
{% 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>
9177
</div>
92-
</a>
78+
</div>
9379
{% endif %}
9480
{% endfor %}
9581
</div>

‎_tabs/tools.md‎

Lines changed: 37 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,83 +5,69 @@ order: 6
55
---
66

77
<style>
8-
.card-grid {
8+
.tool-grid {
99
display: grid;
1010
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
11-
gap: 1.5rem;
11+
gap: 1rem;
1212
}
13-
14-
.tool-card {
15-
background: var(--card-bg);
16-
border: 1px solid var(--card-border-color);
17-
border-radius: 0.75rem;
18-
padding: 1.25rem;
13+
.tool-grid .card {
1914
transition: transform 0.2s, box-shadow 0.2s;
20-
text-decoration: none;
21-
color: var(--text-color);
22-
display: flex;
23-
align-items: center;
24-
gap: 1rem;
2515
}
26-
27-
.tool-card:hover {
16+
.tool-grid .card:hover {
2817
transform: translateY(-2px);
29-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
18+
box-shadow: var(--card-shadow);
3019
}
31-
32-
.card-icon {
33-
flex-shrink: 0;
20+
.tool-grid .card .card-body a {
21+
text-decoration: none;
22+
color: inherit;
23+
border-bottom: none !important;
24+
}
25+
.tool-grid .card .card-body a:hover {
26+
color: inherit;
27+
border-bottom: none !important;
28+
}
29+
.tool-icon {
3430
width: 48px;
3531
height: 48px;
3632
display: flex;
3733
align-items: center;
3834
justify-content: center;
39-
}
40-
41-
.default-icon {
42-
display: flex;
43-
align-items: center;
44-
justify-content: center;
45-
width: 48px;
46-
height: 48px;
4735
font-size: 1.5rem;
48-
color: var(--text-color);
4936
opacity: 0.6;
37+
flex-shrink: 0;
5038
}
51-
52-
.card-text h3 {
53-
margin: 0;
39+
.tool-name {
5440
font-size: 1rem;
5541
font-weight: 600;
56-
color: var(--text-color);
42+
margin: 0;
5743
}
58-
59-
.card-text p {
60-
margin: 0.25rem 0 0;
44+
.tool-desc {
6145
font-size: 0.85rem;
62-
color: var(--text-color);
46+
margin: 0.25rem 0 0;
6347
opacity: 0.75;
6448
}
6549
</style>
6650

67-
<div class="card-grid">
51+
<div class="tool-grid">
6852
{% for tool in site.data.tools %}
6953
{% if tool.name and tool.url %}
70-
<a href="{{ tool.url }}" class="tool-card">
71-
<div class="card-icon">
72-
{% if tool.icon %}
73-
<span class="default-icon"><i class="{{ tool.icon }}"></i></span>
74-
{% else %}
75-
<span class="default-icon"><i class="fas fa-puzzle-piece"></i></span>
76-
{% endif %}
77-
</div>
78-
<div class="card-text">
79-
<h3>{{ tool.name }}</h3>
80-
{% if tool.description %}
81-
<p>{{ tool.description }}</p>
82-
{% endif %}
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>
61+
{% 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>
8369
</div>
84-
</a>
70+
</div>
8571
{% endif %}
8672
{% endfor %}
8773
</div>

0 commit comments

Comments
 (0)