blogs/docs/.vuepress/styles/index.scss
SilverAg.L 4c90f70fc4
Some checks failed
部署文档 / build (push) Failing after 2s
2024 - 31.05.2025 All Bumped.
Thanks to the following contributors:
- @snowykami
- @frg2089
- Nya_Twisuki
2025-05-31 14:30:19 +08:00

66 lines
1.4 KiB
SCSS

// place your custom styles here
.vp-blog-hero-description {
text-align: center;
margin: 0.75rem auto 0;
}
.vp-nav-logo {
border-radius: 9999px;
}
.vp-blog-hero-image {
border-radius: 2rem;
}
.vp-blogger-avatar {
border-radius: 1rem;
}
$width: 48rem;
$height: 25rem;
.vp-page.vp-blog-home {
& .vp-blog-mask:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: min($width, calc(100vw - 2rem));
height: min($height, 100vh);
z-index: 2;
display: block;
transform: translate(max(calc(min($width, calc(100vw - 2rem)) / -2), -50vw),
calc(min($height, 100vh) / -2));
backdrop-filter: blur(1rem);
/* 边框模糊效果 */
/* filter: blur(.25rem); */
border-radius: 1rem;
html[data-theme='dark'] & {
background: #3333337f;
box-shadow: 0.25rem 0.25rem #0000007f;
}
html[data-theme='light'] & {
background: #cccccc7f;
box-shadow: 0.25rem 0.25rem #6666667f;
}
}
& .vp-blog-mask::after {
opacity: unset;
background: unset;
html[data-theme='dark'] & {
background: #0000007f;
}
}
& .vp-blog-hero {
padding: 2rem;
html[data-theme='light'] & {
color: var(--grey-darker);
}
}
}