Skip to content

Commit 80a8cf8

Browse files
author
chenliangzihao
committed
build: 删除嵌套写法 修复cssbug
1 parent 5e6e0f5 commit 80a8cf8

File tree

6 files changed

+203
-203
lines changed

6 files changed

+203
-203
lines changed

‎astro.config.mjs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,7 @@ export default defineConfig({
3636
},
3737
},
3838
integrations: [
39-
tailwind({
40-
nesting: true,
41-
}),
39+
tailwind(),
4240
swup({
4341
theme: false,
4442
animationClass: 'transition-swup-', // see https://swup.js.org/options/#animationselector
@@ -64,7 +62,7 @@ export default defineConfig({
6462
svelte(),
6563
sitemap(),
6664
Compress({
67-
CSS: false,
65+
CSS: true,
6866
HTML: {
6967
'html-minifier-terser': {
7068
removeAttributeQuotes: false,

‎postcss.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import postcssImport from 'postcss-import';
22
import tailwindcss from 'tailwindcss';
3-
import postcssNesting from 'tailwindcss/nesting/index.js';
43

54
/** @type {import('postcss').Config} */
65
const config = {
76
plugins: {
87
'postcss-import': postcssImport, // to combine multiple css files
9-
'tailwindcss/nesting': postcssNesting,
8+
// 禁用nesting功能，因为我们已经移除了所有嵌套语法
9+
// 'tailwindcss/nesting': postcssNesting,
1010
tailwindcss: tailwindcss,
1111
},
1212
};

‎src/components/PostCard.astro‎

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -72,61 +72,57 @@ const coverWidth = '28%';
7272
</div>
7373

7474
<!-- word count and read time -->
75-
<!-- <div class="flex gap-4 text-sm text-black/30 transition dark:text-white/30">
75+
<div class="flex gap-4 text-sm text-black/30 transition dark:text-white/30">
7676
<div>
77-
{'0 Words'}
78-
{' ' + i18n(I18nKey.wordsCount)}
77+
<!-- {'-'}
78+
{' ' + i18n(I18nKey.wordsCount)} -->
7979
</div>
80-
<div>|</div>
80+
<!-- <div>|</div> -->
8181
<div>
82-
{'0 Minutes'}
83-
{' ' + i18n(I18nKey.minutesCount)}
82+
<!-- {'-'}
83+
{' ' + i18n(I18nKey.minutesCount)} -->
8484
</div>
8585
</div>
86-
</div> -->
87-
88-
{
89-
hasCover && (
90-
<a
91-
href={url}
92-
aria-label={title}
93-
class:list={[
94-
'group',
95-
'mx-4 -mb-2 mt-4 max-h-[20vh] md:mx-0 md:mb-0 md:mt-0 md:max-h-none',
96-
'relative overflow-hidden rounded-xl active:scale-95 md:absolute md:bottom-3 md:right-3 md:top-3 md:w-[var(--coverWidth)]',
97-
]}
98-
>
99-
<div class="pointer-events-none absolute z-10 h-full w-full transition group-hover:bg-black/30 group-active:bg-black/50" />
100-
<div class="pointer-events-none absolute z-20 flex h-full w-full items-center justify-center">
101-
<Icon
102-
name="material-symbols:chevron-right-rounded"
103-
class="scale-50 text-5xl text-white opacity-0 transition group-hover:scale-100 group-hover:opacity-100"
104-
/>
105-
</div>
106-
<ImageWrapper src={image} alt="Cover Image of the Post" class="h-full w-full" />
107-
</a>
108-
)
109-
}
86+
</div>
11087

111-
{
112-
!hasCover && (
113-
<a
114-
href={url}
115-
aria-label={title}
116-
class="btn-regular absolute bottom-3 right-3 top-3 !hidden w-[3.25rem] rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:scale-95 active:bg-[var(--enter-btn-bg-active)] md:!flex"
117-
>
88+
{
89+
hasCover && (
90+
<a
91+
href={url}
92+
aria-label={title}
93+
class:list={[
94+
'group',
95+
'mx-4 -mb-2 mt-4 max-h-[20vh] md:mx-0 md:mb-0 md:mt-0 md:max-h-none',
96+
'relative overflow-hidden rounded-xl active:scale-95 md:absolute md:bottom-3 md:right-3 md:top-3 md:w-[var(--coverWidth)]',
97+
]}
98+
>
99+
<div class="pointer-events-none absolute z-10 h-full w-full transition group-hover:bg-black/30 group-active:bg-black/50" />
100+
<div class="pointer-events-none absolute z-20 flex h-full w-full items-center justify-center">
118101
<Icon
119102
name="material-symbols:chevron-right-rounded"
120-
class="mx-auto text-4xl text-[var(--primary)] transition"
103+
class="scale-50 text-5xl text-white opacity-0 transition group-hover:scale-100 group-hover:opacity-100"
121104
/>
122-
</a>
123-
)
124-
}
125-
</div>
126-
<div
127-
class="mx-6 border-t-[1px] border-dashed border-black/10 transition last:border-t-0 dark:border-white/[0.15] md:hidden"
128-
>
129-
</div>
105+
</div>
106+
<ImageWrapper src={image} alt="Cover Image of the Post" class="h-full w-full" />
107+
</a>
108+
)
109+
}
130110

131-
<style define:vars={{ coverWidth }}></style>
111+
{
112+
!hasCover && (
113+
<a
114+
href={url}
115+
aria-label={title}
116+
class="btn-regular absolute bottom-3 right-3 top-3 !hidden w-[3.25rem] rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:scale-95 active:bg-[var(--enter-btn-bg-active)] md:!flex"
117+
>
118+
<Icon name="material-symbols:chevron-right-rounded" class="mx-auto text-4xl text-[var(--primary)] transition" />
119+
</a>
120+
)
121+
}
132122
</div>
123+
<div
124+
class="mx-6 border-t-[1px] border-dashed border-black/10 transition last:border-t-0 dark:border-white/[0.15] md:hidden"
125+
>
126+
</div>
127+
128+
<style define:vars={{ coverWidth }}></style>

‎src/styles/main.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,15 @@
5555
}
5656
.btn-plain {
5757
@apply relative flex items-center justify-center bg-none text-black/75 transition hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
58-
&:not(.scale-animation) {
59-
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)];
60-
}
61-
&.scale-animation {
62-
@apply expand-animation;
63-
&.current-theme-btn {
64-
@apply text-[var(--primary)] before:scale-100 before:bg-[var(--btn-plain-bg-hover)] before:opacity-100;
65-
}
66-
}
58+
}
59+
.btn-plain:not(.scale-animation) {
60+
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)];
61+
}
62+
.btn-plain.scale-animation {
63+
@apply expand-animation;
64+
}
65+
.btn-plain.scale-animation.current-theme-btn {
66+
@apply text-[var(--primary)] before:scale-100 before:bg-[var(--btn-plain-bg-hover)] before:opacity-100;
6767
}
6868
.btn-regular {
6969
@apply flex items-center justify-center bg-[var(--btn-regular-bg)] text-[var(--btn-content)] transition hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)] dark:text-white/75;

‎src/styles/markdown.css‎

Lines changed: 106 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,107 @@
1-
.custom-md {
2-
h1 {
3-
@apply text-3xl;
4-
}
5-
6-
h1,
7-
h2,
8-
h3,
9-
h4,
10-
h5,
11-
h6 {
12-
.anchor {
13-
@apply -m-0.5 ml-[0.2ch] select-none p-0.5 no-underline opacity-0 transition !important;
14-
15-
.anchor-icon {
16-
@apply mx-[0.45ch] !important;
17-
}
18-
}
19-
20-
&:hover {
21-
.anchor {
22-
@apply opacity-100 !important;
23-
}
24-
}
25-
}
26-
27-
a:not(.no-styling) {
28-
@apply link relative bg-none font-medium text-[var(--primary)] underline decoration-[var(--link-underline)] decoration-dashed decoration-1 underline-offset-4;
29-
30-
&:hover,
31-
&:active {
32-
@apply decoration-transparent;
33-
}
34-
}
35-
36-
code {
37-
@apply overflow-hidden rounded-md bg-[var(--inline-code-bg)] px-1 py-0.5 text-[var(--inline-code-color)];
38-
39-
font-family:
40-
'JetBrains Mono Variable',
41-
ui-monospace,
42-
SFMono-Regular,
43-
Menlo,
44-
Monaco,
45-
Consolas,
46-
Liberation Mono,
47-
Courier New,
48-
monospace;
49-
&:before {
50-
content: none;
51-
}
52-
&:after {
53-
content: none;
54-
}
55-
56-
counter-reset: line;
57-
span.line {
58-
&:before {
59-
@apply mr-4 inline-block w-4 text-white/25;
60-
content: counter(line);
61-
counter-increment: line;
62-
direction: rtl;
63-
}
64-
&:last-child:empty,
65-
&:last-child:has(> span:empty:only-child) {
66-
display: none;
67-
}
68-
}
69-
}
70-
71-
pre {
72-
@apply bg-[var(--codeblock-bg)] !important;
73-
@apply rounded-xl px-5;
74-
75-
code {
76-
@apply bg-transparent p-0 text-sm text-inherit;
77-
78-
::selection {
79-
@apply bg-[var(--codeblock-selection)];
80-
}
81-
}
82-
}
83-
84-
ul,
85-
ol {
86-
li::marker {
87-
@apply text-[var(--primary)];
88-
}
89-
}
90-
91-
blockquote {
92-
@apply relative border-transparent not-italic;
93-
font-weight: inherit;
94-
95-
&:before {
96-
@apply absolute -left-1 block h-full w-1 rounded-full bg-[var(--btn-regular-bg)] transition content-[''];
97-
}
98-
99-
/* Remove the double quotes from default styles */
100-
p:before,
101-
p:after {
102-
@apply content-none;
103-
}
104-
}
1+
.custom-md h1 {
2+
@apply text-3xl;
3+
}
4+
5+
.custom-md h1 .anchor,
6+
.custom-md h2 .anchor,
7+
.custom-md h3 .anchor,
8+
.custom-md h4 .anchor,
9+
.custom-md h5 .anchor,
10+
.custom-md h6 .anchor {
11+
@apply -m-0.5 ml-[0.2ch] select-none p-0.5 no-underline opacity-0 transition !important;
12+
}
13+
14+
.custom-md h1 .anchor .anchor-icon,
15+
.custom-md h2 .anchor .anchor-icon,
16+
.custom-md h3 .anchor .anchor-icon,
17+
.custom-md h4 .anchor .anchor-icon,
18+
.custom-md h5 .anchor .anchor-icon,
19+
.custom-md h6 .anchor .anchor-icon {
20+
@apply mx-[0.45ch] !important;
21+
}
22+
23+
.custom-md h1:hover .anchor,
24+
.custom-md h2:hover .anchor,
25+
.custom-md h3:hover .anchor,
26+
.custom-md h4:hover .anchor,
27+
.custom-md h5:hover .anchor,
28+
.custom-md h6:hover .anchor {
29+
@apply opacity-100 !important;
30+
}
31+
32+
.custom-md a:not(.no-styling) {
33+
@apply link relative bg-none font-medium text-[var(--primary)] underline decoration-[var(--link-underline)] decoration-dashed decoration-1 underline-offset-4;
34+
}
35+
36+
.custom-md a:not(.no-styling):hover,
37+
.custom-md a:not(.no-styling):active {
38+
@apply decoration-transparent;
39+
}
40+
41+
.custom-md code {
42+
@apply overflow-hidden rounded-md bg-[var(--inline-code-bg)] px-1 py-0.5 text-[var(--inline-code-color)];
43+
font-family:
44+
'JetBrains Mono Variable',
45+
ui-monospace,
46+
SFMono-Regular,
47+
Menlo,
48+
Monaco,
49+
Consolas,
50+
Liberation Mono,
51+
Courier New,
52+
monospace;
53+
counter-reset: line;
54+
}
55+
56+
.custom-md code:before {
57+
content: none;
58+
}
59+
60+
.custom-md code:after {
61+
content: none;
62+
}
63+
64+
.custom-md code span.line:before {
65+
@apply mr-4 inline-block w-4 text-white/25;
66+
content: counter(line);
67+
counter-increment: line;
68+
direction: rtl;
69+
}
70+
71+
.custom-md code span.line:last-child:empty,
72+
.custom-md code span.line:last-child:has(> span:empty:only-child) {
73+
display: none;
74+
}
75+
76+
.custom-md pre {
77+
@apply bg-[var(--codeblock-bg)] !important;
78+
@apply rounded-xl px-5;
79+
}
80+
81+
.custom-md pre code {
82+
@apply bg-transparent p-0 text-sm text-inherit;
83+
}
84+
85+
.custom-md pre code ::selection {
86+
@apply bg-[var(--codeblock-selection)];
87+
}
88+
89+
.custom-md ul li::marker,
90+
.custom-md ol li::marker {
91+
@apply text-[var(--primary)];
92+
}
93+
94+
.custom-md blockquote {
95+
@apply relative border-transparent not-italic;
96+
font-weight: inherit;
97+
}
98+
99+
.custom-md blockquote:before {
100+
@apply absolute -left-1 block h-full w-1 rounded-full bg-[var(--btn-regular-bg)] transition content-[''];
101+
}
102+
103+
/* Remove the double quotes from default styles */
104+
.custom-md blockquote p:before,
105+
.custom-md blockquote p:after {
106+
@apply content-none;
105107
}

0 commit comments

Comments
 (0)