Skip to content

Commit 2d70b17

Browse files
CatCodeMeCatCodeMe
committed
自定义 aside 样式,参考vuepress-theme-hope 样式
1 parent 7ba6b80 commit 2d70b17

File tree

3 files changed

+103
-54
lines changed

3 files changed

+103
-54
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,4 +89,5 @@ src/data/comments.json
8989
a.json
9090
src/data/comments.json
9191
b.html
92-
localhost*
92+
localhost*
93+
public/fonts/crjk*

‎packages/pure/components/user/Aside.astro

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
---
2-
// https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Aside.astro
32
import { AstroError } from 'astro/errors'
43
54
import Icon from './Icon.astro'
65
7-
const asideVariants = ['note', 'tip', 'caution', 'danger'] as const
6+
const asideVariants = ['important', 'info', 'note', 'tip', 'warning', 'caution'] as const
87
const icons = {
9-
note: 'info',
10-
tip: 'bulb',
11-
caution: 'alert',
12-
danger: 'octangon'
8+
important: 'important',
9+
info: 'callout_info',
10+
note: 'note',
11+
tip: 'tip',
12+
warning: 'warning',
13+
caution: 'caution'
1314
} as const
1415
1516
interface Props {
@@ -23,8 +24,7 @@ if (!asideVariants.includes(type)) {
2324
throw new AstroError(
2425
'Invalid `type` prop passed to the `<Aside>` component.\n',
2526
`Received: ${JSON.stringify(type)}
26-
` +
27-
`Expected one of ${asideVariants.map((i) => JSON.stringify(i)).join(', ')}`
27+
` + `Expected one of ${asideVariants.map((i) => JSON.stringify(i)).join(', ')}`
2828
)
2929
}
3030
@@ -34,13 +34,11 @@ if (!title) {
3434
---
3535

3636
<aside aria-label={title} class={`aside aside-${type}`}>
37-
<div class="aside-container">
38-
<p class="aside-title">
39-
<Icon name={icons[type]} />
40-
<span>{title}</span>
41-
</p>
42-
<div class="aside-content">
43-
<slot />
44-
</div>
37+
<p class='aside-title'>
38+
<Icon name={icons[type]} />
39+
<span>{title}</span>
40+
</p>
41+
<div class='aside-content'>
42+
<slot />
4543
</div>
4644
</aside>

‎src/assets/styles/callout.css

Lines changed: 87 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,120 @@
1-
/* Inspired by VuePress Theme Hope - Solid Background Style */
1+
/* callout.css - VuePress Theme Hope Style - Corrected Layout */
22

3-
/* Base container style */
43
.aside {
5-
padding: 1rem 1.5rem;
6-
margin: 1rem 0;
7-
border-radius: 8px;
8-
border: none; /* Ensure no borders */
4+
border-radius: 8px;
5+
margin: 1rem 0;
6+
padding: 1rem;
7+
border: 1px solid transparent;
98
}
109

11-
/* Title style */
12-
.aside .aside-container p:first-child {
13-
font-weight: 600;
14-
margin-bottom: -0.4rem;
15-
margin-top: 0;
16-
display: flex;
17-
align-items: center;
18-
gap: 0.5rem;
10+
.aside .aside-title {
11+
font-weight: 700;
12+
margin: 0;
13+
margin-bottom: -0.4rem; /* Negative margin to pull content up */
14+
display: flex;
15+
align-items: center;
16+
gap: 0.5rem;
17+
}
18+
19+
.aside .aside-title svg {
20+
width: 1.5em;
21+
height: 1.5em;
1922
}
2023

21-
/* Content style */
2224
.aside .aside-content {
23-
margin-top: 1rem;
25+
margin-top: 1rem; /* Counteract the negative margin */
26+
color: inherit;
2427
}
2528

26-
.aside .aside-content p {
27-
line-height: 1.6;
29+
.aside .aside-content > :first-child {
30+
margin-top: 0;
31+
}
32+
.aside .aside-content > :last-child {
33+
margin-bottom: 0;
2834
}
2935

3036
/* --- Light Mode --- */
3137
.aside.aside-note {
32-
background-color: #e7f3fe;
33-
color: #30588c;
38+
background-color: rgb(142 150 170 / 14%);
39+
}
40+
.aside.aside-note .aside-title {
41+
color: #656869;
3442
}
3543

3644
.aside.aside-tip {
37-
background-color: #e6f6e6;
38-
color: #2d6b4e;
45+
background-color: rgb(16 185 129 / 14%);
46+
}
47+
.aside.aside-tip .aside-title {
48+
color: #18794e;
49+
}
50+
51+
.aside.aside-info {
52+
background-color: rgb(27 178 229 / 14%);
53+
}
54+
.aside.aside-info .aside-title {
55+
color: #2888a7;
56+
}
57+
58+
.aside.aside-warning {
59+
background-color: rgb(234 179 8 / 14%);
60+
}
61+
.aside.aside-warning .aside-title {
62+
color: #915930;
3963
}
4064

4165
.aside.aside-caution {
42-
background-color: #fff8e6;
43-
color: #8c6d30;
66+
background-color: rgb(244 63 94 / 14%);
67+
}
68+
.aside.aside-caution .aside-title {
69+
color: #b8272c;
4470
}
4571

46-
.aside.aside-danger {
47-
background-color: #fde7e9;
48-
color: #8c3030;
72+
.aside.aside-important {
73+
background-color: rgb(159 122 234 / 14%);
74+
}
75+
.aside.aside-important .aside-title {
76+
color: #6f42c1;
4977
}
5078

5179
/* --- Dark Mode --- */
5280
html.dark .aside.aside-note {
53-
background-color: #2f3e55;
54-
color: #a8b1ff;
81+
background-color: rgb(142 150 170 / 14%);
82+
}
83+
html.dark .aside.aside-note .aside-title {
84+
color: #e4e4e9;
5585
}
5686

5787
html.dark .aside.aside-tip {
58-
background-color: #2a4f44;
59-
color: #80c8a5;
88+
background-color: rgb(16 185 129 / 16%);
89+
}
90+
html.dark .aside.aside-tip .aside-title {
91+
color: #3dd68c;
92+
}
93+
94+
html.dark .aside.aside-info {
95+
background-color: rgb(27 178 229 / 16%);
96+
}
97+
html.dark .aside.aside-info .aside-title {
98+
color: #43bde2;
99+
}
100+
101+
html.dark .aside.aside-warning {
102+
background-color: rgb(234 179 8 / 16%);
103+
}
104+
html.dark .aside.aside-warning .aside-title {
105+
color: #e6b30a;
60106
}
61107

62108
html.dark .aside.aside-caution {
63-
background-color: #554a2f;
64-
color: #e7c000;
109+
background-color: rgb(244 63 94 / 16%);
110+
}
111+
html.dark .aside.aside-caution .aside-title {
112+
color: #ff7875;
65113
}
66114

67-
html.dark .aside.aside-danger {
68-
background-color: #553030;
69-
color: #ff9999;
70-
}
115+
html.dark .aside.aside-important {
116+
background-color: rgb(159 122 234 / 16%);
117+
}
118+
html.dark .aside.aside-important .aside-title {
119+
color: #b392f0;
120+
}

0 commit comments

Comments
 (0)