Skip to content

Commit b1d6d9a

Browse files
minortexminortex
committed
fix: adjust photos display
1 parent 33a9f88 commit b1d6d9a

2 files changed

Lines changed: 105 additions & 57 deletions

File tree

‎assets/css/custom.css‎

Lines changed: 97 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
/* =================================================================== */
2-
/* 长代码块限制 */
2+
/* 长代码块限制 */
33
/* =================================================================== */
44
pre {
5-
max-height: 50vh; /* 设置最大高度，例如 300px, 400px 或 30vh */
6-
overflow-y: auto; /* 垂直方向：内容超出时显示滚动条 */
7-
overflow-x: auto; /* 水平方向：内容超出时显示滚动条 (适用于长行代码) */
8-
padding-bottom: 1em; /* 增加底部内边距，防止滚动条遮挡最后一行代码 */
9-
10-
/* 注意：对于代码块，通常不希望自动换行，所以保持默认的 white-space: pre; 或明确设置 */
11-
/* white-space: pre; */
5+
max-height: 50vh;
6+
/* 设置最大高度，例如 300px, 400px 或 30vh */
7+
overflow-y: auto;
8+
/* 垂直方向：内容超出时显示滚动条 */
9+
overflow-x: auto;
10+
/* 水平方向：内容超出时显示滚动条 (适用于长行代码) */
11+
padding-bottom: 1em;
12+
/* 增加底部内边距，防止滚动条遮挡最后一行代码 */
13+
14+
/* 注意：对于代码块，通常不希望自动换行，所以保持默认的 white-space: pre; 或明确设置 */
15+
/* white-space: pre; */
1216
}
1317

1418
/*例外，在短码中定义的不折叠*/
1519
.no-limit-code pre {
16-
max-height: none !important; /* 移除最大高度限制 */
17-
overflow-y: visible !important; /* 垂直方向不显示滚动条 */
18-
/* overflow-x: auto !important; */ /* 水平滚动通常希望保留，所以这里不覆盖或根据需求设置 */
20+
max-height: none !important;
21+
/* 移除最大高度限制 */
22+
overflow-y: visible !important;
23+
/* 垂直方向不显示滚动条 */
24+
/* overflow-x: auto !important; */
25+
/* 水平滚动通常希望保留，所以这里不覆盖或根据需求设置 */
1926
}
2027

2128

@@ -28,35 +35,36 @@ pre {
2835

2936

3037
/* =================================================================== */
31-
/* 使用媒体查询 (Media Query) 来区分桌面和移动设备。 */
38+
/* 使用媒体查询 (Media Query) 来区分桌面和移动设备。 */
3239
/* =================================================================== */
3340

34-
/*
41+
/*
3542
第一部分：默认样式（针对手机等小屏幕）
3643
这里我们什么都不做，让主题保持默认行为。
3744
这样可以确保在手机上文章宽度是 100%，不会溢出。
3845
*/
3946

40-
/*
47+
/*
4148
第二部分：仅在屏幕宽度大于 1024px 时生效（针对平板横屏和桌面电脑）
42-
`@media (min-width: 1024px)` 的意思是 “下面的规则只在屏幕宽度至少为 1024px 时才应用”
49+
`@media (min-width: 1024px)` 的意思是“下面的规则只在屏幕宽度至少为 1024px 时才应用”
4350
*/
44-
@media (min-width: 1024px) {
45-
46-
/* 1. 加宽文章区域 */
47-
.max-w-prose {
48-
/* 将最大宽度设为您喜欢的值，比如 80ch, 90ch, 或者 960px */
49-
max-width: 75ch;
50-
}
51-
52-
/* 2. (可选) 调整左侧目录(ToC)的宽度 */
53-
/* 如果您觉得左侧的目录太宽，可以用这个来减小它的宽度 */
54-
/* 如果不需要，可以把下面这段 .lg\:max-w-xs 的代码删除 */
55-
.lg\:max-w-xs {
56-
max-width: 18rem; /* 默认是 20rem，可以适当减小 */
57-
}
51+
@media (min-width: 1024px) {
52+
53+
/* 1. 加宽文章区域 */
54+
.max-w-prose {
55+
/* 将最大宽度设为您喜欢的值，比如 80ch, 90ch, 或者 960px */
56+
max-width: 75ch;
5857
}
5958

59+
/* 2. (可选) 调整左侧目录 (ToC) 的宽度 */
60+
/* 如果您觉得左侧的目录太宽，可以用这个来减小它的宽度 */
61+
/* 如果不需要，可以把下面这段 .lg\:max-w-xs 的代码删除 */
62+
.lg\:max-w-xs {
63+
max-width: 18rem;
64+
/* 默认是 20rem，可以适当减小 */
65+
}
66+
}
67+
6068

6169

6270

@@ -72,7 +80,7 @@ pre {
7280

7381
/* --- 1. 变量定义 (主题核心) --- */
7482
:root {
75-
/* 这是默认(浅色模式)的变量值 */
83+
/* 这是默认 (浅色模式) 的变量值 */
7684
--card-background: #ffffff;
7785
--card-border-color: #eee;
7886
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -83,12 +91,16 @@ pre {
8391

8492
html.dark {
8593
/* 当进入深色模式时，我们在这里覆盖上面的变量值 */
86-
--card-background: rgba(41, 41, 41, 0.65); /* 半透明背景 */
87-
--card-border-color: rgba(255, 255, 255, 0.15); /* 半透明亮色边框 */
94+
--card-background: rgba(41, 41, 41, 0.65);
95+
/* 半透明背景 */
96+
--card-border-color: rgba(255, 255, 255, 0.15);
97+
/* 半透明亮色边框 */
8898
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
8999
--card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
90-
--card-text-color: #e5e7eb; /* 亮灰色文字 */
91-
--card-text-muted: #9ca3af; /* 稍暗的亮灰色文字 */
100+
--card-text-color: #e5e7eb;
101+
/* 亮灰色文字 */
102+
--card-text-muted: #9ca3af;
103+
/* 稍暗的亮灰色文字 */
92104
}
93105

94106

@@ -107,17 +119,20 @@ div.article-content .article-list--compact.links {
107119
div.article-content .article-list--compact.links article {
108120
background: var(--card-background);
109121
box-shadow: var(--card-shadow);
110-
border: 1px solid var(--card-border-color); /* 使用变量 */
111-
border-radius: 9px; /* 统一样式 */
122+
border: 1px solid var(--card-border-color);
123+
/* 使用变量 */
124+
border-radius: 9px;
125+
/* 统一样式 */
112126
padding: 1.2rem 1.5rem;
113127
transition: all 0.3s ease-in-out;
114-
margin: 0 !important; /* 清除所有外边距，由gap控制 */
128+
margin: 0 !important;
129+
/* 清除所有外边距，由 gap 控制 */
115130
}
116131

117132
/* 深色模式下的毛玻璃效果 (这是唯一需要单独处理的非变量样式) */
118133
html.dark div.article-content .article-list--compact.links article {
119-
backdrop-filter: blur(10px);
120-
-webkit-backdrop-filter: blur(10px);
134+
backdrop-filter: blur(10px);
135+
-webkit-backdrop-filter: blur(10px);
121136
}
122137

123138
/* 悬停效果 */
@@ -135,7 +150,7 @@ div.article-content .article-list--compact.links article a {
135150
min-height: 80px;
136151
}
137152

138-
/* 圆形Logo/图片容器 */
153+
/* 圆形 Logo/图片容器 */
139154
div.article-content .article-list--compact.links article .article-image {
140155
pointer-events: none;
141156
flex-shrink: 0;
@@ -144,14 +159,16 @@ div.article-content .article-list--compact.links article .article-image {
144159
margin-right: 1rem;
145160
border-radius: 50%;
146161
overflow: hidden;
147-
border: 2px solid var(--card-border-color); /* 使用变量 */
162+
border: 2px solid var(--card-border-color);
163+
/* 使用变量 */
148164
}
149165

150-
/* Logo图片本身 */
166+
/* Logo 图片本身 */
151167
div.article-content .article-list--compact.links article .article-image img {
152168
width: 100%;
153169
height: 100%;
154-
object-fit: cover; /* 使用cover效果更好 */
170+
object-fit: cover;
171+
/* 使用 cover 效果更好 */
155172
margin: 0 !important;
156173
}
157174

@@ -165,46 +182,56 @@ div.article-content .article-list--compact.links article .article-details {
165182
div.article-content .article-list--compact.links article .article-title {
166183
font-size: 1.2em;
167184
font-weight: 600;
168-
color: var(--card-text-color); /* 使用变量 */
185+
color: var(--card-text-color);
186+
/* 使用变量 */
169187
word-break: break-word;
170188
margin: 0 !important;
171189
}
172190

173191
/* 简介 */
174192
div.article-content .article-list--compact.links article footer.article-time {
175193
font-size: 0.9em;
176-
color: var(--card-text-muted); /* 使用变量 */
194+
color: var(--card-text-muted);
195+
/* 使用变量 */
177196
margin-top: 0.3rem !important;
178197
word-break: break-word;
179198
}
180199

181200

182201
/* --- 3. 响应式布局 (保持不变) --- */
183202

184-
/* 默认单列，不需要写，因为这是grid的默认行为 */
203+
/* 默认单列，不需要写，因为这是 grid 的默认行为 */
185204
div.article-content .article-list--compact.links {
186205
grid-template-columns: 1fr;
187206
}
188-
/* 平板: 两列 */
207+
208+
/* 平板：两列 */
189209
@media (min-width: 768px) {
190210
.max-w-prose {
191211
max-width: 100% !important;
192212
}
213+
193214
div.article-content .article-list--compact.links {
194215
grid-template-columns: 1fr 1fr;
195-
margin-left: auto; /* 实现自动居中 */
196-
margin-right: auto; /* 实现自动居中 */
216+
margin-left: auto;
217+
/* 实现自动居中 */
218+
margin-right: auto;
219+
/* 实现自动居中 */
197220
}
198221
}
199-
/* 桌面: 三列 */
222+
223+
/* 桌面：三列 */
200224
@media (min-width: 1024px) {
201225
.max-w-prose {
202226
max-width: 100% !important;
203227
}
228+
204229
div.article-content .article-list--compact.links {
205230
grid-template-columns: 1fr 1fr 1fr;
206-
margin-left: auto; /* 实现自动居中 */
207-
margin-right: auto; /* 实现自动居中 */
231+
margin-left: auto;
232+
/* 实现自动居中 */
233+
margin-right: auto;
234+
/* 实现自动居中 */
208235
}
209236
}
210237

@@ -220,12 +247,26 @@ div.article-content .article-list--compact.links {
220247
/* 针对 Blowfish 主题中 hero 背景图片的容器 */
221248
/* =================================================================== */
222249
.single_hero_background {
223-
background-position: top right !important; /* 确保顶部居中显示，底部裁剪 */
224-
background-size: cover !important; /* 确保图片覆盖整个容器，同时保持比例 */
225-
background-repeat: no-repeat !important; /* 避免图片重复 */
226-
/* 您可以根据需要调整 h-[800px] 这个固定高度，
250+
background-position: top right !important;
251+
/* 确保顶部居中显示，底部裁剪 */
252+
background-size: cover !important;
253+
/* 确保图片覆盖整个容器，同时保持比例 */
254+
background-repeat: no-repeat !important;
255+
/* 避免图片重复 */
256+
/* 您可以根据需要调整 h-[800px] 这个固定高度，
227257
如果它导致图片在某些屏幕上看起来不理想。
228258
但要覆盖它可能需要更复杂的 CSS 或修改主题配置。
229259
这里我们只关注 background-position。
230260
*/
261+
}
262+
263+
/* =================================================================== */
264+
/* 文内插入图片的修改 */
265+
/* =================================================================== */
266+
.article-content img {
267+
width: auto;
268+
display: block;
269+
margin-left: auto;
270+
margin-right: auto;
271+
border-radius: 8px;
231272
}

‎config/_default/markup.toml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
# 不使用类名，开启复制按钮
12
[highlight]
23
noClasses = false
34

5+
# 保留原始 markdown 的 html 代码
46
[goldmark.renderer]
5-
unsafe = true
7+
unsafe = true
8+
9+
# 图片和代码块支持属性，markdown 原生功能
10+
[goldmark.parser.attribute]
11+
block = true
12+
title = true

0 commit comments

Comments
 (0)