Skip to content

Commit 6fe5e64

Browse files
qlADqlAD
committed
style(gkBlog): optimize the style and layout of blog posts
1 parent d522697 commit 6fe5e64

File tree

4 files changed

+49
-27
lines changed

4 files changed

+49
-27
lines changed

‎apps/gkBlog/src/contents/links/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,8 +151,7 @@ function LinksContents() {
151151
</Code>
152152

153153
<p className="mt-4">
154-
发送申请至:{" "}
155-
<a href="mailto:your-email@example.com">qlad_adgk@163.com</a>{" "}
154+
发送申请至: <a href="mailto:qlad_adgk@163.com">qlad_adgk@163.com</a>{" "}
156155
或者在下方留言。
157156
</p>
158157
</div>

‎apps/gkBlog/src/pages/blog/link-genetic-and-meiosis/genotype-calculator.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export function PunnettSquareCalculator() {
111111
value={genotype}
112112
onChange={(e) => setGenotype(e.target.value)}
113113
placeholder="输入基因型，如 AaBb"
114-
className="w-full px-3 py-2 border rounded-md"
114+
className="w-full px-3 py-2 border dark:border-gray-700 rounded-md"
115115
aria-labelledby="genotype-label"
116116
/>
117117
<p className="text-sm text-muted-foreground">
@@ -127,7 +127,10 @@ export function PunnettSquareCalculator() {
127127

128128
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
129129
{result.gametes.map((gamete) => (
130-
<div key={gamete} className="border rounded p-2 text-center">
130+
<div
131+
key={gamete}
132+
className="border dark:border-gray-700 rounded p-2 text-center"
133+
>
131134
{gamete}
132135
</div>
133136
))}
@@ -139,13 +142,13 @@ export function PunnettSquareCalculator() {
139142
<table className="min-w-full border-collapse">
140143
<thead>
141144
<tr>
142-
<th className="border p-2" scope="col">
145+
<th className="border dark:border-gray-700 p-2" scope="col">
143146
<span className="sr-only">配子</span>
144147
</th>
145148
{result.gametes.map((gamete) => (
146149
<th
147150
key={gamete}
148-
className="border p-2 bg-muted font-medium"
151+
className="border dark:border-gray-700 p-2 bg-muted font-medium"
149152
>
150153
{gamete}
151154
</th>
@@ -155,11 +158,14 @@ export function PunnettSquareCalculator() {
155158
<tbody>
156159
{result.punnettSquare.map((row, rowIndex) => (
157160
<tr key={result.gametes[rowIndex]} className="border">
158-
<th className="border p-2 bg-muted font-medium">
161+
<th className="border dark:border-gray-700 p-2 bg-muted font-medium">
159162
{result.gametes[rowIndex]}
160163
</th>
161164
{row.map((cell) => (
162-
<td key={cell} className="border p-2 text-center">
165+
<td
166+
key={cell}
167+
className="border dark:border-gray-700 p-2 text-center"
168+
>
163169
{cell}
164170
</td>
165171
))}

‎apps/gkBlog/src/pages/blog/link-genetic-and-meiosis/hybrid-calculator.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ function HybridCalculator() {
9999
value={parent1}
100100
onChange={(e) => setParent1(e.target.value)}
101101
placeholder="输入基因型，如 AaBbCCdd"
102-
className="w-full px-3 py-2 border rounded-md"
102+
className="w-full px-3 py-2 border dark:border-gray-700 rounded-md"
103103
/>
104104
</div>
105105

@@ -111,7 +111,7 @@ function HybridCalculator() {
111111
value={parent2}
112112
onChange={(e) => setParent2(e.target.value)}
113113
placeholder="输入基因型，如 AabbCcDd"
114-
className="w-full px-3 py-2 border rounded-md"
114+
className="w-full px-3 py-2 border dark:border-gray-700 rounded-md"
115115
/>
116116
</div>
117117
</form>
@@ -123,7 +123,7 @@ function HybridCalculator() {
123123
{result.gametes1.map((gamete) => (
124124
<div
125125
key={`p1-${gamete}`}
126-
className="border rounded p-2 text-center"
126+
className="border dark:border-gray-700 rounded p-2 text-center"
127127
>
128128
{gamete}
129129
</div>
@@ -135,7 +135,7 @@ function HybridCalculator() {
135135
{result.gametes2.map((gamete) => (
136136
<div
137137
key={`p2-${gamete}`}
138-
className="border rounded p-2 text-center"
138+
className="border dark:border-gray-700 rounded p-2 text-center"
139139
>
140140
{gamete}
141141
</div>
@@ -144,16 +144,16 @@ function HybridCalculator() {
144144

145145
<p>旁氏表（Punnett Square）：</p>
146146
<div className="overflow-auto">
147-
<table className="min-w-full border-collapse">
147+
<table className="min-w-full border-collapse">
148148
<thead>
149149
<tr>
150-
<th className="border p-2" scope="col">
150+
<th className="border dark:border-gray-700 p-2" scope="col">
151151
<span className="sr-only">配子</span>
152152
</th>
153153
{result.gametes2.map((gamete) => (
154154
<th
155155
key={`header-p2-${gamete}`}
156-
className="border p-2 bg-muted font-medium"
156+
className="border dark:border-gray-700 p-2 bg-muted font-medium"
157157
>
158158
{gamete}
159159
</th>
@@ -162,12 +162,18 @@ function HybridCalculator() {
162162
</thead>
163163
<tbody>
164164
{result.punnettSquare.map((row, rowIndex) => (
165-
<tr key={result.gametes1[rowIndex]} className="border">
166-
<th className="border p-2 bg-muted font-medium">
165+
<tr
166+
key={result.gametes1[rowIndex]}
167+
className="dark:border-gray-700 border"
168+
>
169+
<th className="border dark:border-gray-700 p-2 bg-muted font-medium">
167170
{result.gametes1[rowIndex]}
168171
</th>
169172
{row.map((cell) => (
170-
<td key={cell} className="border p-2 text-center">
173+
<td
174+
key={cell}
175+
className="border dark:border-gray-700 p-2 text-center"
176+
>
171177
{cell}
172178
</td>
173179
))}

‎apps/gkBlog/src/styles/mdx-contents.css‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@apply w-full text-slate-600;
33
@apply dark:text-slate-400;
44

5+
/* 基本文本样式 */
56
p {
67
@apply leading-relaxed;
78

@@ -33,17 +34,18 @@
3334
}
3435
}
3536

37+
/* 列表样式 */
3638
ul,
3739
ol {
38-
@apply ml-7 mt-6 mb-6;
39-
@apply md:ml-9;
40+
@apply ml-6 mt-5 mb-5;
41+
@apply md:ml-7;
4042

4143
li {
4244
@apply relative leading-relaxed;
4345
padding-left: 0.4rem;
4446

4547
& + li {
46-
@apply mt-2;
48+
@apply mt-5;
4749
}
4850
}
4951
}
@@ -52,8 +54,8 @@
5254
@apply list-none;
5355

5456
> li::before {
55-
@apply absolute -left-7 top-[0.5em] h-[10px] w-[10px] rounded-full bg-slate-500 content-[''];
56-
@apply md:-left-5;
57+
@apply absolute -left-6 top-[0.5em] h-[9px] w-[9px] rounded-full bg-slate-500 content-[''];
58+
@apply md:-left-4;
5759
@apply dark:bg-slate-400;
5860
transition:
5961
transform 0.2s ease-in-out,
@@ -66,7 +68,7 @@
6668

6769
ul,
6870
ol {
69-
@apply mt-2 ml-4;
71+
@apply mt-5 ml-5;
7072
}
7173

7274
ol > li::before {
@@ -76,6 +78,13 @@
7678

7779
ol {
7880
@apply list-decimal;
81+
@apply ml-7;
82+
@apply md:ml-8;
83+
84+
ul,
85+
ol {
86+
@apply ml-6;
87+
}
7988

8089
li::marker {
8190
@apply text-slate-500 font-medium;
@@ -87,16 +96,18 @@
8796
}
8897
}
8998

99+
/* 代码块样式 */
90100
:not(pre, .mdx-inline-highlight) {
91101
> code {
92102
@apply font-medium text-slate-700;
93103
@apply dark:text-slate-300;
94-
@apply bg-slate-200 dark:bg-slate-800; /* 添加背景色，区分代码 */
95-
@apply rounded-md px-1; /* 增加内边距和圆角，使其更加突出 */
96-
@apply shadow-sm dark:shadow-md; /* 为暗色模式添加阴影，使其更立体 */
104+
@apply bg-slate-200 dark:bg-slate-800;
105+
@apply rounded-md px-1;
106+
@apply shadow-sm dark:shadow-md;
97107
}
98108
}
99109

110+
/* 引用块样式 */
100111
blockquote {
101112
@apply relative my-6 py-1 pl-6 text-slate-600;
102113
@apply dark:text-slate-400;

0 commit comments

Comments
 (0)