Skip to content

Commit 6f7aed3

Browse files
Leaf-0w0Leaf-0w0
authored
Merge pull request #379 from sakuhanachan/tailwind4v2
Refine CSS and Layout (additional from e686ac9)
2 parents 66fd799 + 685894e commit 6f7aed3

7 files changed

Lines changed: 121 additions & 62 deletions

File tree

‎postcss.config.mjs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import postcssImport from 'postcss-import';
2+
import postcssNesting from 'postcss-nesting';
3+
4+
export default {
5+
plugins: {
6+
'postcss-import': postcssImport,
7+
'postcss-nesting': postcssNesting,
8+
}
9+
};

‎src/layouts/Layout.astro‎

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -415,33 +415,32 @@ if (siteConfig.font) {
415415
"banner-height": `${BANNER_HEIGHT}vh`,
416416
}}
417417
>
418-
@reference "tailwindcss";
418+
@reference "../styles/main.css";
419419

420420
@layer components {
421-
.enable-banner.is-home #banner-wrapper {
422-
@apply xl:h-(--banner-height-home) xl:translate-y-[var(--banner-height-extend)];
423-
}
424-
.enable-banner #banner-wrapper {
425-
@apply xl:h-[var(--banner-height-home)];
426-
}
427-
.enable-banner.is-home #banner {
428-
@apply xl:h-(--banner-height-home) xl:translate-y-0;
429-
}
430-
.enable-banner #banner {
431-
@apply xl:h-(--banner-height-home) xl:translate-y-[var(--bannerOffset)];
432-
}
433-
.enable-banner.is-home #main-grid {
434-
@apply xl:translate-y-[var(--banner-height-extend)];
435-
}
436-
.enable-banner #top-row {
437-
@apply xl:h-[calc(var(--banner-height-home)-4.5rem)] transition-all duration-300;
438-
}
439-
.enable-banner.is-home #sidebar-sticky {
440-
@apply xl:top-[calc(1rem_-_var(--banner-height-extend))];
441-
}
442-
.navbar-hidden {
443-
@apply opacity-0 -translate-y-16;
444-
}
421+
.enable-banner.lg\:is-home #banner-wrapper {
422+
height: var(--banner-height-home);
423+
transform: translateY(var(--banner-height-extend));
424+
}
425+
.enable-banner #banner-wrapper {
426+
height: var(--banner-height-home);
427+
}
428+
429+
.enable-banner.lg\:is-home #banner {
430+
height: var(--banner-height-home);
431+
transform: translateY(0);
432+
}
433+
.enable-banner #banner {
434+
height: var(--banner-height-home);
435+
transform: translateY(var(--bannerOffset));
436+
}
437+
.enable-banner.lg\:is-home #main-grid {
438+
transform: translateY(var(--banner-height-extend));
439+
}
440+
.enable-banner #top-row {
441+
height: calc(var(--banner-height-home) - 4.5rem);
442+
@apply transition-all duration-300;
443+
}
445444

446445
/* Water waves animation */
447446
.waves > .parallax use {
@@ -456,6 +455,20 @@ if (siteConfig.font) {
456455
}
457456
}
458457
}
458+
@layer utilities {
459+
.enable-banner.lg\:is-home #sidebar-sticky {
460+
top: calc(1rem - var(--banner-height-extend)) !important;
461+
}
462+
.enable-banner.lg\:is-home #left-sidebar-sticky {
463+
top: calc(1rem - var(--banner-height-extend)) !important;
464+
}
465+
.enable-banner.lg\:is-home #right-sidebar-sticky {
466+
top: calc(1rem - var(--banner-height-extend)) !important;
467+
}
468+
.navbar-hidden {
469+
@apply opacity-0 -translate-y-16;
470+
}
471+
}
459472
</style>
460473

461474
<script>

‎src/styles/expressive-code.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@apply relative;
55

66
.frame {
7-
@apply !shadow-none;
7+
@apply shadow-none!;
88
}
99

1010
.title {

‎src/styles/main.css‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,37 @@
1717

1818
/* Migrate from v3 config */
1919
@theme {
20-
--font-sans: 'Roboto', 'sans-serif', ui-sans-serif, system-ui, sans-serif;
20+
--font-sans:
21+
'Roboto', 'sans-serif', ui-sans-serif, system-ui, sans-serif,
22+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
2123

2224
--breakpoint-md: 768px;
2325
--breakpoint-lg: 1280px;
2426
}
2527

2628
/* Migrated css */
2729
@utility expand-animation {
28-
@apply relative before:ease-out before:duration-75 before:transition-all active:bg-none hover:before:bg-(--btn-plain-bg-hover) active:before:bg-(--btn-plain-bg-active) z-0
29-
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
30+
position: relative;
31+
z-index: 0;
32+
&::before {
33+
content: '';
34+
position: absolute;
35+
inset: 0;
36+
border-radius: inherit;
37+
scale: 0.85;
38+
z-index: -10;
39+
transition: all 0.15s ease-out;
40+
}
41+
&:hover::before {
42+
background-color: var(--btn-plain-bg-hover);
43+
scale: 1;
44+
}
45+
&:active::before {
46+
background-color: var(--btn-plain-bg-active);
47+
}
48+
&:active {
49+
background: none;
50+
}
3051
}
3152

3253
/* 导入 ZenMaruGothic-Medium 字体 */

‎src/styles/markdown.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121

2222
/* --- 链接 --- */
2323
a:not(.no-styling) {
24-
@apply relative bg-none font-medium text-[var(--primary)]
25-
underline decoration-[var(--link-underline)] decoration-1 decoration-dashed underline-offset-4;
24+
@apply relative bg-none font-medium text-(--primary)
25+
underline decoration-(--link-underline) decoration-1 decoration-dashed underline-offset-4;
2626
box-decoration-break: clone;
2727
-webkit-box-decoration-break: clone;
2828

@@ -37,7 +37,7 @@
3737

3838
/* --- 代码块 --- */
3939
code {
40-
@apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
40+
@apply bg-(--inline-code-bg) text-(--inline-code-color) px-1 py-0.5 rounded-md overflow-hidden;
4141

4242
font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
4343

@@ -65,7 +65,7 @@
6565
ul,
6666
ol {
6767
li::marker {
68-
@apply text-[var(--primary)];
68+
@apply text-(--primary);
6969
}
7070
}
7171

@@ -75,7 +75,7 @@
7575
font-weight: inherit;
7676

7777
&:before {
78-
@apply content-[''] absolute left-0 block transition bg-[var(--btn-regular-bg)] h-full w-1 rounded-full;
78+
@apply content-[''] absolute left-0 block transition bg-(--btn-regular-bg) h-full w-1 rounded-full;
7979
}
8080

8181
p:before,
@@ -86,7 +86,7 @@
8686

8787
/* --- 表格样式 --- */
8888
.table-wrapper {
89-
@apply w-full overflow-x-auto m-0 rounded-[var(--radius-large)];
89+
@apply w-full overflow-x-auto m-0 rounded-(--radius-large);
9090
-webkit-overflow-scrolling: touch;
9191

9292
/* --- 滚动条样式 --- */

‎src/styles/photoswipe.css‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,31 @@
22

33
/* PhotoSwipe 按钮样式 */
44
.pswp__button {
5-
@apply transition bg-black/40 hover:bg-black/50 active:bg-black/60 flex items-center justify-center mr-0 w-12 h-12;
5+
transition: all 0.2s ease !important;
6+
background-color: rgba(0, 0, 0, 0.4) !important;
7+
display: flex !important;
8+
align-items: center !important;
9+
justify-content: center !important;
10+
margin-right: 0 !important;
11+
width: 3rem !important;
12+
height: 3rem !important;
613
}
7-
.pswp__button--zoom,
8-
.pswp__button--close {
9-
@apply mt-4 rounded-xl active:scale-90;
14+
.pswp__button:hover {
15+
background-color: rgba(0, 0, 0, 0.5) !important;
16+
}
17+
.pswp__button:active {
18+
background-color: rgba(0, 0, 0, 0.6) !important;
19+
}
20+
.pswp__button--zoom, .pswp__button--close {
21+
margin-top: 1rem !important;
22+
border-radius: 0.75rem !important;
23+
}
24+
.pswp__button--zoom:active, .pswp__button--close:active {
25+
transform: scale(0.9) !important;
1026
}
1127
.pswp__button--zoom {
12-
@apply mr-2.5;
28+
margin-right: 0.625rem !important;
1329
}
1430
.pswp__button--close {
15-
@apply mr-4;
16-
}
31+
margin-right: 1rem !important;
32+
}

‎src/styles/twikoo.css‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ html.dark {
1111
}
1212

1313
.tk-comments {
14-
@apply text-[var(--tk-text)];
14+
@apply text-(--tk-text);
1515
}
1616

1717
.tk-submit {
@@ -26,7 +26,7 @@ html.dark {
2626
@apply flex-col-reverse;
2727
.tk-input {
2828
textarea {
29-
@apply rounded-[var(--radius-large)] py-4 px-6 !min-h-[150px] focus:border-[var(--primary)];
29+
@apply rounded-(--radius-large) py-4 px-6 min-h-[150px]! focus:border-(--primary);
3030
}
3131
}
3232
}
@@ -38,58 +38,58 @@ html.dark {
3838
div {
3939
@apply min-h-10;
4040
.el-input-group__prepend {
41-
@apply !bg-inherit rounded-l-lg;
41+
@apply bg-inherit! rounded-l-lg;
4242
min-height: inherit;
4343
}
4444
input {
45-
@apply px-4 rounded-r-lg focus:!border-[var(--primary)];
45+
@apply px-4 rounded-r-lg focus:border-(--primary)!;
4646
min-height: inherit;
4747
}
4848
}
4949
}
5050

5151
/* Button */
5252
.tk-row.actions {
53-
@apply w-full !ml-0 !mt-0;
53+
@apply w-full ml-0! mt-0!;
5454
.__markdown {
55-
@apply !hidden;
55+
@apply hidden!;
5656
}
5757
.tk-preview,
5858
.tk-send,
5959
.tk-cancel {
6060
@apply border-none rounded-lg px-3 py-0 h-8
61-
!bg-[var(--btn-regular-bg-active)] disabled:!bg-[var(--btn-regular-bg)]
62-
!text-[var(--btn-content)] disabled:!text-[#ffffffa1];
61+
bg-(--btn-regular-bg-active)! disabled:bg-(--btn-regular-bg)!
62+
text-(--btn-content)! disabled:text-[#ffffffa1]!;
6363
}
6464
}
6565

6666
/* Comment title */
6767
.tk-comments-title {
6868
.__comments svg {
69-
@apply fill-[var(--primary)];
69+
@apply fill-(--primary);
7070
}
7171
}
7272

7373
.tk-comment {
7474
@apply border-[1px] border-[rgba(144,147,153,0.31)] p-4 rounded-2xl hover:shadow-md transition-all;
7575
.tk-action-icon svg {
76-
@apply fill-[var(--primary)];
76+
@apply fill-(--primary);
7777
}
7878
}
7979

8080
.tk-action {
8181
.tk-action-count {
82-
@apply text-[var(--btn-content)];
82+
@apply text-(--btn-content);
8383
}
8484
}
8585

8686
.tk-meta {
8787
.tk-tag {
88-
@apply border-none rounded-lg text-[var(--btn-content)];
88+
@apply border-none rounded-lg text-(--btn-content);
8989
}
9090

9191
.tk-tag-green {
92-
@apply bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)] dark:text-[var(--deep-text)];
92+
@apply bg-(--btn-regular-bg) dark:bg-(--primary) dark:text-(--deep-text);
9393
}
9494
}
9595

@@ -104,26 +104,26 @@ html.dark {
104104
}
105105

106106
a {
107-
@apply underline text-[var(--primary)] font-medium;
107+
@apply underline text-(--primary) font-medium;
108108
}
109109

110110
.tk-ruser {
111111
@apply no-underline;
112112
}
113113

114114
:not(pre) > code {
115-
@apply bg-[var(--inline-code-bg)] rounded-md text-[--inline-code-color] px-1 py-0.5 font-semibold;
115+
@apply bg-(--inline-code-bg) rounded-md text-(--inline-code-color) px-1 py-0.5 font-semibold;
116116
}
117117

118118
li {
119-
@apply before:content-["•"] before:text-[var(--primary)];
119+
@apply before:content-["•"] before:text-(--primary);
120120
}
121121
}
122122

123123
/* Replies */
124124
.tk-replies {
125125
.tk-comment {
126-
@apply bg-[var(--page-bg)];
126+
@apply bg-(--page-bg);
127127
.tk-content {
128128
> span:first-of-type {
129129
@apply text-xs;
@@ -134,12 +134,12 @@ html.dark {
134134

135135
.twikoo .code-block {
136136
pre {
137-
@apply !rounded-xl;
137+
@apply rounded-xl!;
138138
}
139139

140140
/* Code block fall back */
141141
pre:not([class]) {
142-
@apply bg-[var(--codeblock-bg)] overflow-auto p-2 text-[var(--code-block-text)];
142+
@apply bg-(--codeblock-bg) overflow-auto p-2 text-(--code-block-text);
143143
}
144144

145145
.copy-btn-icon {
@@ -150,7 +150,7 @@ html.dark {
150150

151151
.tk-expand-wrap .tk-expand,
152152
.tk-collapse-wrap .tk-expand {
153-
@apply hover:rounded-lg mt-1 hover:bg-[var(--btn-plain-bg-hover)];
153+
@apply hover:rounded-lg mt-1 hover:bg-(--btn-plain-bg-hover);
154154
}
155155

156156
/* by @SirTamago

0 commit comments

Comments
 (0)