mirror of
https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git
synced 2026-09-04 20:55:41 +00:00
reformate divider to pixel
This commit is contained in:
parent
2ac6091ab6
commit
e7ba5f86b1
2 changed files with 29 additions and 17 deletions
|
|
@ -2,28 +2,39 @@
|
|||
|
||||
<style>
|
||||
.divider {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
margin-bottom: 1rem;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--deep-red) 0 14px,
|
||||
transparent 14px 28px,
|
||||
var(--deep-blue) 28px 42px,
|
||||
transparent 42px 56px
|
||||
--divider-red: var(--deep-red);
|
||||
--divider-blue: var(--deep-blue);
|
||||
|
||||
--px: 4px; /* 单个像素点大小 */
|
||||
--stripe: 16px; /* 每段斜纹横向长度 */
|
||||
--period: 64px; /* 一个完整重复周期 */
|
||||
--row-pattern: linear-gradient(
|
||||
90deg,
|
||||
var(--divider-red) 0 var(--stripe),
|
||||
transparent var(--stripe) calc(var(--stripe) * 2),
|
||||
var(--divider-blue) calc(var(--stripe) * 2) calc(var(--stripe) * 3),
|
||||
transparent calc(var(--stripe) * 3) calc(var(--stripe) * 4)
|
||||
);
|
||||
|
||||
width: 100%;
|
||||
height: calc(var(--px) * 3);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
background:
|
||||
var(--row-pattern) 0 0 / var(--period) var(--px) repeat-x,
|
||||
var(--row-pattern) calc(-1 * var(--px)) calc(1 * var(--px)) /
|
||||
var(--period) var(--px) repeat-x,
|
||||
var(--row-pattern) calc(-2 * var(--px)) calc(2 * var(--px)) /
|
||||
var(--period) var(--px) repeat-x,
|
||||
var(--row-pattern) calc(-3 * var(--px)) calc(3 * var(--px)) /
|
||||
var(--period) var(--px) repeat-x;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:global(html.dark) .divider,
|
||||
:global(.dark) .divider {
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#ff8a8a 0 14px,
|
||||
transparent 14px 28px,
|
||||
#9ecbff 28px 42px,
|
||||
transparent 42px 56px
|
||||
);
|
||||
--divider-red: #ff8a8a;
|
||||
--divider-blue: #9ecbff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@ const tags = data.tags;
|
|||
.post-title {
|
||||
margin: 0;
|
||||
font-family:
|
||||
"Noto Sans SC",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
|
|
|
|||
Loading…
Reference in a new issue