Skip to content

Commit ca172e3

Browse files
LiudonLiudon
committed
add css
1 parent 45bb23e commit ca172e3

File tree

2 files changed

+356
-0
lines changed

2 files changed

+356
-0
lines changed

‎assets/css/extended/blank.css‎

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
/* # Markdown 风格 */
2+
/* 标题、正文、行内代码 - 颜色 */
3+
:root {
4+
--primary: #212121; /* rgb(30, 30, 30); */
5+
--content: #333333; /* rgb(31, 31, 31); */
6+
--code-bg: rgba(175, 184, 193, 0.2); /* rgb(245, 245, 245); */
7+
--hljs-bg: #282C34;
8+
}
9+
.dark {
10+
--code-bg: rgba(175, 184, 193, 0.2); /* rgb(55, 56, 62); */
11+
--hljs-bg: #1c1c1c;
12+
}
13+
14+
/* 链接样式 */
15+
.post-content a {
16+
color: #0969da;
17+
box-shadow: none;
18+
text-decoration: none;
19+
}
20+
.post-content a:hover {
21+
text-decoration: underline;
22+
}
23+
/* 行内代码 - 左右间距 */
24+
.post-content code {
25+
margin: unset;
26+
}
27+
/* 代码块 - 最大高度 */
28+
.post-content pre code {
29+
max-height: 40rem;
30+
}
31+
32+
pre, code {
33+
font-family: Consolas,Monaco,SFMono-Regular,Andale Mono,Liberation Mono,Ubuntu Mono,Menlo,monospace;
34+
}
35+
36+
.post-content .highlight pre {
37+
tab-size: 4 !important;
38+
}
39+
40+
.post-content .highlight:not(table), .post-content pre {
41+
box-shadow: 1px 5px 5px 1px rgb(144 164 174 / 60%);
42+
border-radius: var(--radius);
43+
}
44+
45+
.dark .post-content .highlight:not(table), .post-content pre {
46+
box-shadow: 1px 5px 5px 1px rgb(5 10 15 / 60%);
47+
border-radius: var(--radius);
48+
}
49+
50+
/* 图片居中 */
51+
.post-content img {
52+
margin: auto;
53+
}
54+
/* 行文风格 */
55+
body {
56+
57+
/* font-family: "LXGW WenKai Screen", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif; */
58+
font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
59+
font-size: 1rem;
60+
line-height: 1.5;
61+
margin: 0;
62+
}
63+
.post-content {
64+
padding-top: 1rem;
65+
}
66+
.post-content blockquote {
67+
color: #808080;
68+
}
69+
.post-content p,
70+
.post-content blockquote,
71+
.post-content figure,
72+
.post-content table,
73+
.post-content hr {
74+
margin: 1.15rem 0;
75+
}
76+
.post-content ul,
77+
.post-content ol,
78+
.post-content dl,
79+
.post-content li {
80+
margin: 0.5rem 0;
81+
}
82+
.post-content h1,
83+
.post-content h2,
84+
.post-content h3,
85+
.post-content h4,
86+
.post-content h5,
87+
.post-content h6 {
88+
margin-bottom: 1.15rem;
89+
font-weight: 600;
90+
}
91+
.post-content h1 {
92+
font-size: 2.6rem;
93+
margin-top: 4rem;
94+
border-bottom: 1px solid #ccc;
95+
}
96+
.post-content h2 {
97+
font-size: 1.8rem;
98+
margin-top: 4rem;
99+
border-bottom: 1px solid #ccc;
100+
}
101+
.post-content h3 {
102+
font-size: 1.6rem;
103+
margin-top: 2rem;
104+
}
105+
.post-content h4 {
106+
font-size: 1.4rem;
107+
margin-top: 1.44rem;
108+
}
109+
.post-content h5 {
110+
font-size: 1.2rem;
111+
margin-top: 1.15rem;
112+
}
113+
.post-content h6 {
114+
font-size: 1rem;
115+
margin-top: 1rem;
116+
}
117+
/* GitHub 样式的表格 */
118+
.post-content table tr {
119+
border: 1px solid #979da3 !important;
120+
}
121+
.post-content table tr:nth-child(2n),
122+
.post-content thead {
123+
background-color: var(--code-bg);
124+
}
125+
.post-content table th {
126+
border: 1px solid #979da3 !important;
127+
}
128+
.post-content table td {
129+
border: 1px solid #979da3 !important;
130+
}
131+
132+
:root {
133+
--nav-width: 1380px;
134+
--article-width: 650px;
135+
--toc-width: 300px;
136+
}
137+
138+
.toc {
139+
margin: 0 2px 40px 2px;
140+
border: 1px solid var(--border);
141+
background: var(--entry);
142+
border-radius: var(--radius);
143+
padding: 0.4em;
144+
}
145+
146+
.toc-container.wide {
147+
position: absolute;
148+
height: 100%;
149+
border-right: 1px solid var(--border);
150+
left: calc((var(--toc-width) + var(--gap)) * -1);
151+
top: calc(var(--gap) * 2);
152+
width: var(--toc-width);
153+
}
154+
155+
.wide .toc {
156+
position: sticky;
157+
top: var(--gap);
158+
border: unset;
159+
background: unset;
160+
border-radius: unset;
161+
width: 100%;
162+
margin: 0 2px 40px 2px;
163+
}
164+
165+
.toc details summary {
166+
cursor: zoom-in;
167+
margin-inline-start: 20px;
168+
padding: 12px 0;
169+
}
170+
171+
.toc details[open] summary {
172+
font-weight: 500;
173+
}
174+
175+
.toc-container.wide .toc .inner {
176+
margin: 0;
177+
}
178+
179+
.active {
180+
font-size: 110%;
181+
font-weight: 600;
182+
}
183+
184+
.toc ul {
185+
list-style-type: circle;
186+
}
187+
188+
.toc .inner {
189+
margin: 0 0 0 20px;
190+
padding: 0px 15px 15px 20px;
191+
font-size: 16px;
192+
193+
/*目录显示高度*/
194+
max-height: 83vh;
195+
overflow-y: auto;
196+
}
197+
198+
.toc .inner::-webkit-scrollbar-thumb { /*滚动条*/
199+
background: var(--border);
200+
border: 7px solid var(--theme);
201+
border-radius: var(--radius);
202+
}
203+
204+
.toc li ul {
205+
margin-inline-start: calc(var(--gap) * 0.5);
206+
list-style-type: none;
207+
}
208+
209+
.toc li {
210+
list-style: none;
211+
font-size: 0.95rem;
212+
padding-bottom: 5px;
213+
}
214+
215+
.toc li a:hover {
216+
color: var(--secondary);
217+
}
218+
219+
img {
220+
width:100%;
221+
height:auto;
222+
}
223+
224+
video {
225+
width:100%;
226+
height:auto;
227+
}
228+
229+
/* figure {
230+
background-color: var(--code-bg);
231+
} */
232+
233+
.post-content figure>figcaption {
234+
color: var(--primary);
235+
font-size: 12px;
236+
margin: 8px 0 16px;
237+
font-weight: 100;
238+
}
239+
240+
figure figcaption:before {
241+
content: "◎ ";
242+
}
243+
244+
.friendurl {
245+
text-decoration: none !important;
246+
color: black;
247+
box-shadow: none !important;
248+
}
249+
250+
.myfriend {
251+
width: 56px !important;
252+
height: 56px !important;
253+
border-radius: 50%!important;
254+
padding: 2px;
255+
margin-top: 20px !important;
256+
margin-left: 14px !important;
257+
background-color: #fff;
258+
}
259+
260+
.frienddiv {
261+
overflow: auto;
262+
height: 100px;
263+
width: 49%;
264+
display: inline-block !important;
265+
border-radius: 5px;
266+
background: none;
267+
268+
-webkit-transition: all ease-out 0.3s;
269+
-moz-transition: all ease-out 0.3s;
270+
-o-transition: all ease-out 0.3s;
271+
transition: all ease-out 0.3s;
272+
}
273+
274+
.dark .frienddiv:hover {
275+
background: var(--code-bg);
276+
}
277+
278+
.frienddiv:hover {
279+
background: var(--theme);
280+
transition: transform 1s;
281+
webkit-transform: scale(1.1);
282+
-moz-transform: scale(1.2);
283+
-ms-transform: scale(1.2);
284+
-o-transform: scale(1.2);
285+
transform: scale(1.1);
286+
}
287+
288+
.frienddiv:hover .frienddivleft img {
289+
transition: 0.9s !important;
290+
-webkit-transition: 0.9s !important;
291+
-moz-transition: 0.9s !important;
292+
-o-transition: 0.9s !important;
293+
-ms-transition: 0.9s !important;
294+
transform: rotate(360deg) !important;
295+
-webkit-transform: rotate(360deg) !important;
296+
-moz-transform: rotate(360deg) !important;
297+
-o-transform: rotate(360deg) !important;
298+
-ms-transform: rotate(360deg) !important;
299+
}
300+
301+
.frienddivleft {
302+
width: 92px;
303+
float: left;
304+
margin-right: -5px;
305+
}
306+
307+
.frienddivright {
308+
margin-top: 18px;
309+
margin-right: 18px;
310+
}
311+
312+
.friendname {
313+
text-overflow: ellipsis;
314+
font-size: 100%;
315+
margin-bottom: 5px;
316+
color: var(--primary);
317+
}
318+
319+
.friendinfo {
320+
text-overflow: ellipsis;
321+
font-size: 70%;
322+
color: var(--primary);
323+
}
324+
325+
@media screen and (max-width: 600px) {
326+
.friendinfo {
327+
display: none;
328+
}
329+
.frienddivleft {
330+
width: 84px;
331+
margin: auto;
332+
}
333+
.frienddivright {
334+
height: 100%;
335+
margin: auto;
336+
display: flex;
337+
align-items: center;
338+
justify-content: center;
339+
}
340+
.friendname {
341+
font-size: 18px;
342+
}
343+
}

‎assets/css/extended/image-view.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.post-content p:has(> picture:nth-child(2)){column-count:2;column-gap:8px;margin:6px 0;}
2+
.post-content p:has(> picture:nth-child(3)){column-count:3;}
3+
.post-content p:has(> picture:nth-child(4)){column-count:4;}
4+
.post-content p:has(> picture:nth-child(5)){column-count:5;}
5+
.post-content p:has(> picture:nth-child(6)){column-count:4;}
6+
.post-content p:has(> picture:nth-child(2)) picture{display:inherit;}
7+
.post-content p:has(> picture:nth-child(6)) picture{margin-bottom:8px;}
8+
9+
/*外层定义了img的宽高，导致灯箱的鼠标关闭有问题，这里重置掉外层定义的宽高属性*/
10+
.view-image-lead img {
11+
width: unset !important;
12+
height: unset !important;
13+
}

0 commit comments

Comments
 (0)