wenyongda/vhAstro-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化样式细节

Browse Source
This commit is contained in:
Han 2025-03-24 17:04:18 +08:00
parent f60f15b04a
commit bf2bdf1720
21 changed files with 169 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/wechat.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

26
src/components/Archive/Archive.less
View File

@ -22,14 +22,14 @@ section.vh-container {
width: 100%;
height: 2.5rem;
border-radius: 1rem;
font-size: 1rem;
font-size: var(--vh-size-p);
transition: background .16s;
&:not(.title) {
&:hover {
background-color: var(--vh-color-default-88);
background-color: var(--vh-main-color);
&>i {
&::before {
@ -43,9 +43,9 @@ section.vh-container {
}
&>em {
font-size: 0.875rem;
color: var(--vh-black-38);
font-size: var(--vh-size-span);
font-weight: 500;
color: #00000080;
}
&>i {
@ -72,17 +72,17 @@ section.vh-container {
&>span {
font-size: 1rem;
color: #000000;
font-size: var(--vh-size-p);
color: var(--vh-black-100);
font-weight: 600;
}
}
&>em {
flex-shrink: 0;
width: 5.05rem;
height: 3.75rem;
color: var(--vh-black-100);
font-size: 1.5rem;
font-weight: 600;
line-height: 3.75rem;
@ -115,7 +115,7 @@ section.vh-container {
flex: 1;
white-space: nowrap;
overflow: hidden;
color: #0000004D;
color: var(--vh-black-66);
font-weight: 500;
text-overflow: ellipsis;
transition: all .16s;
@ -124,8 +124,8 @@ section.vh-container {
&>cite {
margin-left: auto;
width: 7.8rem;
font-size: 0.875rem;
color: #0000004D;
font-size: var(--vh-size-span);
color: var(--vh-black-66);
font-weight: 400;
font-style: normal;
white-space: nowrap;
@ -173,11 +173,11 @@ section.vh-container {
&:not(.title) {
&>em {
font-size: 0.8rem;
font-size: var(--vh-size-h3);
}
&>span {
font-size: 0.88rem;
font-size: var(--vh-size-h2);
}
}
@ -191,7 +191,7 @@ section.vh-container {
}
&>span {
font-size: 0.8rem;
font-size: var(--vh-size-h3);
}
}
}

19
src/components/ArticleCard/ArticleCard.less
View File

@ -49,7 +49,7 @@ section.article-list {
padding: 0.18rem 1rem;
width: max-content;
height: max-content;
font-size: 1rem;
font-size: var(--vh-size-p);
color: #fff;
border-radius: 0.66rem;
transform: rotate(-45deg);
@ -99,7 +99,7 @@ section.article-list {
&>.vh-article-desc {
flex: 1;
box-sizing: border-box;
padding: 1.25rem;
padding: 1.188rem;
display: flex;
flex-direction: column;
width: 100%;
@ -115,7 +115,7 @@ section.article-list {
&>.vh-article-categories {
box-sizing: border-box;
width: max-content;
font-size: 0.875rem;
font-size: var(--vh-size-span);
font-weight: 700;
/* 默认渐变色起始 */
--gradient-color-1: #a32cc4;
@ -168,7 +168,7 @@ section.article-list {
&>.title {
margin: 0;
font-size: 1.18rem;
font-size: var(--vh-size-h1);
font-weight: 600;
line-height: 1.36;
display: -webkit-box;
@ -181,10 +181,12 @@ section.article-list {
}
&>.vh-article-excerpt {
margin: 0.88rem 0 0.625rem;
margin: 0.88rem 0;
width: 100%;
height: max-content;
font-size: 0.875rem;
color: var(--vh-black-66);
font-size: var(--vh-size-small);
letter-spacing: 0.88px;
line-height: 1.28rem;
display: -webkit-box;
-webkit-box-orient: vertical;
@ -192,13 +194,12 @@ section.article-list {
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
opacity: 0.6;
}
&>footer {
margin-top: auto;
font-size: 0.875rem;
color: #6E6E6E;
font-size: var(--vh-size-mini);
color: var(--vh-black-100);
}
}
}

24
src/components/Aside/Aside.less
View File

@ -40,7 +40,7 @@ aside.vh-aside {
align-items: center;
gap: 0.68rem;
width: 100%;
font-size: 1.125rem;
font-size: var(--vh-size-h1);
font-weight: 600;
&::before {
@ -48,7 +48,7 @@ aside.vh-aside {
width: 0.25rem;
height: 1.16rem;
border-radius: 0.5rem;
background-color: var(--vh-color-default);
background-color: var(--vh-main-color-88);
}
}
@ -78,13 +78,13 @@ aside.vh-aside {
width: 36%;
height: 0.26rem;
border-radius: 3px;
background-color: var(--vh-color-default);
background-color: var(--vh-main-color-88);
}
}
&>.vh-aside-motto {
font-size: 0.86rem;
color: #A3A3A3;
color: var(--vh-black-66);
line-height: 1.5;
text-align: center;
}
@ -120,7 +120,7 @@ aside.vh-aside {
bottom: 0;
width: 100%;
height: 0;
background-color: var(--vh-color-default);
background-color: var(--vh-main-color-88);
transition: height 0.16s ease-in-out;
z-index: -1;
}
@ -161,7 +161,7 @@ aside.vh-aside {
&:hover {
padding-left: 0.66rem;
background-color: var(--vh-color-default-88);
background-color: var(--vh-main-color-66);
&>i {
background-color: transparent;
@ -174,10 +174,10 @@ aside.vh-aside {
justify-content: center;
width: 2rem;
height: 1.75rem;
font-size: 0.875rem;
font-size: var(--vh-size-span);
font-style: normal;
border-radius: 0.38rem;
background-color: var(--vh-color-default-88);
background-color: var(--vh-main-color-66);
transition: background 0.16s ease-in-out;
overflow: hidden;
}
@ -201,7 +201,7 @@ aside.vh-aside {
&:hover {
&>span {
background-color: var(--vh-color-default);
background-color: var(--vh-main-color);
}
}
@ -212,8 +212,8 @@ aside.vh-aside {
width: max-content;
height: 1.75rem;
border-radius: 0.38rem;
background-color: var(--vh-color-default-88);
font-size: 0.875rem;
background-color: var(--vh-main-color-38);
font-size: var(--vh-size-span);
font-style: normal;
line-height: 1.75rem;
transition: background 0.16s ease-in-out;
@ -286,7 +286,7 @@ aside.vh-aside {
&>span {
width: 100%;
font-size: 0.8rem;
font-size: var(--vh-size-h3);
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;

25
src/components/Comment/Comment.less
View File

@ -10,7 +10,7 @@
// 评论样式
.twikoo {
font-size: 0.88rem;
font-size: var(--vh-size-h2);
img:not(.tk-avatar-img) {
cursor: pointer;
@ -28,7 +28,7 @@
ol {
li {
color: #33333388;
font-size: 0.875rem;
font-size: var(--vh-size-span);
line-height: 1.6;
}
@ -39,7 +39,7 @@
:not(pre) {
&>code {
background-color: var(--vh-color-default);
background-color: var(--vh-black-16);
padding: .125rem .375rem;
font-size: 0.8125rem;
}
@ -53,9 +53,9 @@
}
p {
color: #4c4948;
color: var(--vh-black-100);
font-weight: 400;
font-size: 0.875rem;
font-size: var(--vh-size-span);
line-height: 28px;
@ -95,7 +95,7 @@
// 及背景颜色
.el-input-group__append,
.el-input-group__prepend {
background-color: var(--vh-color-default-88) !important;
background-color: var(--vh-white-88) !important;
}
// 评论内容样式
@ -137,8 +137,11 @@
&>.tk-meta {
&>.tk-nick {
position: relative;
color: #9999ff;
line-height: 1.18rem;
strong {
color: #9999ff;
line-height: 1.18rem;
}
&.tk-nick-link {
cursor: pointer;
@ -212,7 +215,7 @@
&>.tk-nick {
position: relative;
color: #4c4948;
color: var(--vh-black-100);
line-height: 1.18rem;
&.tk-nick-link {
@ -226,7 +229,7 @@
bottom: 0;
width: 0;
height: 1px;
background-color: #4c4948;
background-color: var(--vh-black-88);
transition: all 0.28s;
}
@ -289,7 +292,7 @@
box-sizing: border-box;
padding: 4px;
border-radius: 0.2rem;
background-color: var(--vh-color-default-88);
background-color: var(--vh-black-6);
}
}

2
src/components/Footer/Footer.less
View File

@ -96,7 +96,7 @@
&.text {
&>p {
font-size: 0.88rem;
font-size: var(--vh-size-h2);
&>a {
color: #94A3B8;

2
src/components/Header/Header.astro
View File

@ -13,7 +13,7 @@ import "./Header.less";
<section class="main">
<a href="/" class="index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path d="M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1l32 0 0 160.4c0 35.3 28.7 64 64 64l102.3 0-31.3-52.2c-4.1-6.8-2.6-15.5 3.5-20.5L288 368l-60.2-82.8c-10.9-15 8.2-33.5 22.8-22l117.9 92.6c8 6.3 8.2 18.4 .4 24.9L288 448l38.4 64 122.1 0c35.5 0 64.2-28.8 64-64.3l-.7-160.2 32 0z"></path></svg>
Home
<span>Home</span>
</a>
<div class="link-list vh-link-list">
{

37
src/components/Header/Header.less
View File

@ -9,7 +9,7 @@ header.vh-header {
justify-content: center;
width: 100vw;
height: 3.6rem;
background-color: #ffffff66;
background-color: var(--vh-white-6);
backdrop-filter: blur(2rem);
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
z-index: 9;
@ -37,7 +37,7 @@ header.vh-header {
gap: 0.5rem;
width: max-content;
height: 80%;
font-size: 1rem;
font-size: var(--vh-size-p);
font-weight: 700;
z-index: 1;
transition: all 0.08s ease-in-out;
@ -63,26 +63,37 @@ header.vh-header {
width: 100%;
height: 100%;
border-radius: 0.5rem;
background-color: var(--vh-color-default);
background-color: var(--vh-main-color);
opacity: 0;
transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out;
z-index: -1;
}
&>svg {
height: 1.5rem;
width: auto;
object-fit: contain;
}
&.index {
padding-right: 2rem;
&>span {
box-sizing: border-box;
padding-top: 0.188rem;
width: max-content;
height: max-content;
font-size: 1.088rem;
line-height: 1;
}
}
&.search-btn {
&>svg {
width: 1rem;
height: 1rem;
}
}
&>svg {
height: 1.5rem;
}
&.index {
padding-right: 2rem;
}
}
&>.link-list,
@ -133,7 +144,7 @@ header.vh-header {
padding: 0.36rem;
width: 1.88rem;
height: 1.88rem;
border: 1px solid var(--vh-color-default);
border: 1px solid var(--vh-black-16);
border-radius: 0.6rem;
}
}
@ -148,7 +159,7 @@ header.vh-header {
&>section.main {
a {
font-size: 0.875rem;
font-size: var(--vh-size-span);
&:hover {
&::before {

2
src/components/MobileSidebar/MobileSidebar.less
View File

@ -69,7 +69,7 @@
gap: 0.618rem;
width: 100%;
height: 2.25rem;
font-size: 1rem;
font-size: var(--vh-size-p);
color: #66758c;
font-weight: 600;
border-radius: 0.375rem;

2
src/components/Pagination/Pagination.less
View File

@ -20,7 +20,7 @@ section.vh-article-pagination {
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
font-size: 0.875rem;
font-size: var(--vh-size-span);
color: #99a9bf;
user-select: none;
transition: background-color 0.16s ease-in-out;

2
src/components/Reward/Reward.astro
View File

@ -5,5 +5,5 @@ import "./Reward.less";
<section class="vh-reward">
<p>喜欢这篇文章嘛，觉得文章不错的话，奖励奖励我！</p>
<div class="reward-list"><span class="alipay"><i style={`background-image: url(${SITE_INFO.Reward.AliPay})`}></i>支付宝</span><span class="wechat"><i style={`background-image: url(${SITE_INFO.Reward.WeChat})`}></i>微信</span></div>
<div class="reward-list"><span class="alipay"><img src={SITE_INFO.Reward.AliPay} alt="支付宝打赏" />支付宝</span><span class="wechat"><img src={SITE_INFO.Reward.WeChat} alt="微信打赏" /> 微信</span></div>
</section>

5
src/components/Reward/Reward.less
View File

@ -47,7 +47,7 @@
pointer-events: auto;
}
&>i {
&>img {
pointer-events: auto;
opacity: 1;
transform: translate(-50%, -1rem);
@ -66,7 +66,7 @@
height: 100%;
}
&>i {
&>img {
opacity: 0;
pointer-events: none;
position: absolute;
@ -75,6 +75,7 @@
transform: translate(-50%, 0);
width: calc(100vw - 1rem);
max-width: 258px;
max-height: max-content;
border-radius: 0.588rem;
aspect-ratio: 6/8;
background-size: cover;

16
src/components/Search/Search.less
View File

@ -53,7 +53,7 @@
gap: 0.28rem;
width: 100%;
height: 2.425rem;
background-color: var(--vh-color-default-88);
background-color: var(--vh-white-100);
border-radius: 0.66rem;
overflow: hidden;
@ -69,13 +69,13 @@
width: 100%;
height: 100%;
border: none;
color: #9CA3AF;
font-size: 0.875rem;
color: var(--vh-black-88);
font-size: var(--vh-size-span);
background-color: transparent;
transition: width 0.16s ease-in-out;
&::placeholder {
color: #9CA3AF;
color: var(--vh-black-88);
}
}
}
@ -117,9 +117,9 @@
&>span {
width: 100%;
font-size: 1.125rem;
font-size: var(--vh-size-h1);
font-weight: 600;
color: #000000E6;
color: var(--vh-black-100);
line-height: 1.16;
white-space: nowrap;
overflow: hidden;
@ -128,8 +128,8 @@
&>p {
width: 100%;
font-size: 0.875rem;
color: #00000080;
font-size: var(--vh-size-span);
color: var(--vh-black-56);
font-weight: 400;
line-height: 1.25rem;
display: -webkit-box;

2
src/layouts/Layout/Layout.astro
View File

@ -22,8 +22,6 @@ import "./Layout.less";
<Head Title={title} Keywords={keywords} Description={description} PageCover={pagecover}>
<!-- 谷歌广告JS加载项 -->
{ad_Client && (asideAD_Slot || articleAD_Slot) && <script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ad_Client}`} crossorigin="anonymous" />}
<!-- MiSans字体 -->
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,500,600,700:MiSans" />
</Head>
<body>
<MobileSidebar />

12
src/layouts/ToolLayout/ToolLayout.less
View File

@ -35,7 +35,7 @@
z-index: 1;
&:hover {
background-color: var(--vh-color-default);
background-color: var(--vh-black-16);
&>.avatar {
transform: scale(1.2) rotate(8deg);
@ -67,7 +67,7 @@
z-index: 1;
&>span {
font-size: 1rem;
font-size: var(--vh-size-p);
font-weight: 700;
line-height: 1rem;
}
@ -139,7 +139,7 @@
&>p {
padding: 0;
color: #26262680;
font-size: 0.875rem;
font-size: var(--vh-size-span);
line-height: 1.8;
display: -webkit-box;
-webkit-box-orient: vertical;
@ -164,7 +164,7 @@
align-items: center;
gap: 0.5rem;
height: 1.56rem;
font-size: 0.8rem;
font-size: var(--vh-size-h3);
overflow: hidden;
&>em {
@ -244,7 +244,7 @@
overflow: hidden;
&>span {
font-size: 0.875rem;
font-size: var(--vh-size-span);
}
&>time {
@ -258,7 +258,7 @@
&>.main {
box-sizing: border-box;
padding: 1rem 0;
font-size: 0.875rem;
font-size: var(--vh-size-span);
font-weight: 500;
img {

2
src/pages/article/[...article].astro
View File

@ -47,7 +47,7 @@ import "@/styles/ArticleBase.less";
<span class="article-meta-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l80 0 0 56-80 0 0-56zm0 104l80 0 0 64-80 0 0-64zm128 0l96 0 0 64-96 0 0-64zm144 0l80 0 0 64-80 0 0-64zm80-48l-80 0 0-56 80 0 0 56zm0 160l0 40c0 8.8-7.2 16-16 16l-64 0 0-56 80 0zm-128 0l0 56-96 0 0-56 96 0zm-144 0l0 56-64 0c-8.8 0-16-7.2-16-16l0-40 80 0zM272 248l-96 0 0-56 96 0 0 56z"></path></svg>
<time>{fmtTime(post.data.date, "YYYY-MM-DD A")}</time>
<span class="count"><strong>{article_word_count}</strong>字</span>
<span class="count"><strong>{article_word_count || "一点"}</strong>字</span>
<span class="time"><strong>{parseFloat((Number(reading_time) || 0).toFixed(1).replace(/\.0+$/, ""))}</strong>分钟</span>
</span>
<a class="article-meta-item" href={`/categories/${post.data.categories}`}>

6
src/scripts/Init.ts
View File

@ -92,10 +92,6 @@ export default () => {
MusicList.forEach((i: any) => i.destroy());
MusicList.length = 0;
});
console.log(
"%c\u4E3B\u9898\uFF1AvhAstro-Theme%c https://github.com/uxiaohan/vhAstro-Theme ",
"background: linear-gradient(90deg, #030307, #1a1a2e); color: #fadfa3; padding: 4px;",
"background: #EDEDED; padding: 4px;"
);
console.log("%c🌻 程序：Astro | 主题：vhAstro-Theme | 作者：Han | Github：https://github.com/uxiaohan/vhAstro-Theme 🌻", "color:#fff; background: linear-gradient(270deg, #18d7d3, #68b7dd, #8695e6, #986fee); padding: 8px 15px; border-radius: 8px");
console.log("%c\u521D\u59CB\u5316\u5B8C\u6BD5.", "color: #ffffff; background: #000; padding:5px");
}

2
src/styles/About.less
View File

@ -16,7 +16,7 @@
padding: 0.88rem 0;
width: 100%;
height: max-content;
font-size: 1.125rem;
font-size: var(--vh-size-h1);
}
&>.language-tool {

24
src/styles/Article.less
View File

@ -40,16 +40,24 @@ section.vh-container {
}
&>time {
color: #9A9A9A;
color: var(--vh-black-66);
}
&>span {
&.count {
color: #3FA67F;
strong {
color: #3FA67F;
}
}
&.time {
color: #E9B740;
strong {
color: #E9B740;
}
}
}
}
@ -77,6 +85,12 @@ section.vh-container {
}
}
.dplayer-controller {
span {
color: #fff;
}
}
&>.tag-list {
box-sizing: border-box;
padding-top: 2rem;
@ -95,13 +109,13 @@ section.vh-container {
gap: 0.18rem;
height: 1.68rem;
width: max-content;
font-size: 0.875rem;
font-size: var(--vh-size-span);
border-radius: 1rem;
background-color: var(--vh-color-default-88);
background-color: var(--vh-main-color-56);
transition: background 0.16s ease-in-out, transform 0.16s ease-in-out;
&:hover {
background-color: var(--vh-color-default);
background-color: var(--vh-main-color-88);
transform: translateY(-0.18rem);
}
@ -148,7 +162,7 @@ section.vh-container {
}
h3 {
font-size: 1.18rem;
font-size: var(--vh-size-h1);
}

28
src/styles/ArticleBase.less
View File

@ -12,21 +12,21 @@
display: inline-block;
box-sizing: border-box;
margin: 1.666rem 0 0.36rem;
font-size: 1rem;
font-size: var(--vh-size-p);
width: 100%;
max-width: 100%;
word-break: break-all;
&:hover {
&::before {
color: #60a5fa7f;
color: var(--vh-main-color-88);
}
}
&::before {
padding-right: 0.56rem;
content: "#";
color: #33333388;
color: var(--vh-black-38);
transition: color 0.16s ease-in-out;
}
}
@ -54,7 +54,7 @@
}
h4 {
font-size: 1.125rem;
font-size: var(--vh-size-h1);
}
// p标签样式
@ -68,8 +68,8 @@
line-height: 1.6;
li {
color: #9A9A9A;
font-size: 0.875rem;
color: var(--vh-black-66);
font-size: var(--vh-size-span);
line-height: 1.6;
}
@ -86,7 +86,7 @@
// 其下面的code标签样式
code {
background-color: var(--vh-color-default);
background-color: var(--vh-black-16);
padding: .125rem .375rem;
font-size: 0.8125rem;
}
@ -109,7 +109,7 @@
border-radius: 0.618rem;
&>p {
font-size: 0.875rem;
font-size: var(--vh-size-span);
font-weight: 500;
line-height: 1.58rem;
color: #6A737D;
@ -171,7 +171,7 @@
// 其下面的code标签样式
code {
background-color: var(--vh-color-default);
background-color: var(--vh-black-16);
padding: .125rem .375rem;
font-size: 0.8125rem;
}
@ -233,7 +233,7 @@
}
p {
font-size: 0.875rem;
font-size: var(--vh-size-span);
line-height: 2;
font-weight: 500;
}
@ -284,7 +284,7 @@
bottom: 0;
width: 100%;
height: 0;
background-color: var(--vh-color-default-66);
background-color: var(--vh-black-default-66);
transition: height 0.16s ease-in-out;
z-index: -1;
}
@ -294,7 +294,7 @@
box-sizing: border-box;
color: #000;
font-weight: 600;
font-size: 0.875rem;
font-size: var(--vh-size-span);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@ -544,7 +544,7 @@
border-radius: 0.618rem;
height: max-content;
max-height: 888px;
background-color: var(--vh-color-default-99) !important;
background-color: var(--vh-white-66) !important;
code {
box-sizing: border-box;
@ -552,7 +552,7 @@
&>span {
box-sizing: border-box;
font-size: 0.875rem;
font-size: var(--vh-size-span);
line-height: 1.66;
&::before {

49
src/styles/Base.less
View File

@ -1,11 +1,41 @@
@import url('/assets/font/index.css');
:root {
// 颜色
--vh-color-default: #EDEEF3;
--vh-color-default-66: #EDEEF366;
--vh-color-default-88: #EDEEF388;
--vh-color-default-99: #EDEEF399;
// 基础色
--vh-black-color: #34495e; //文字颜色
--vh-white-color: #EDEEF3; //背景颜色
--vh-black-100: rgb(from var(--vh-black-color) r g b);
--vh-black-88: rgb(from var(--vh-black-color) r g b / 88%);
--vh-black-66: rgb(from var(--vh-black-color) r g b / 66%);
--vh-black-56: rgb(from var(--vh-black-color) r g b / 56%);
--vh-black-38: rgb(from var(--vh-black-color) r g b / 38.88%);
--vh-black-28: rgb(from var(--vh-black-color) r g b / 28%);
--vh-black-16: rgb(from var(--vh-black-color) r g b / 16%);
--vh-black-6: rgb(from var(--vh-black-color) r g b / 6%);
--vh-white-100: rgb(from var(--vh-white-color) r g b);
--vh-white-88: rgb(from var(--vh-white-color) r g b / 88%);
--vh-white-66: rgb(from var(--vh-white-color) r g b / 66%);
--vh-white-38: rgb(from var(--vh-white-color) r g b / 38.88%);
--vh-white-28: rgb(from var(--vh-white-color) r g b / 28%);
--vh-white-16: rgb(from var(--vh-white-color) r g b / 16%);
--vh-white-6: rgb(from var(--vh-white-color) r g b / 6%);
// 主题色
--vh-main-color: #EDEEF3;
--vh-main-color-88: rgb(from var(--vh-main-color) r g b / 88%);
--vh-main-color-66: rgb(from var(--vh-main-color) r g b / 66%);
--vh-main-color-56: rgb(from var(--vh-main-color) r g b / 56%);
--vh-main-color-38: rgb(from var(--vh-main-color) r g b / 38.88%);
--vh-main-color-28: rgb(from var(--vh-main-color) r g b / 28%);
--vh-main-color-16: rgb(from var(--vh-main-color) r g b / 16%);
--vh-main-color-6: rgb(from var(--vh-main-color) r g b / 6%);
// 尺寸
--vh-size-h1: 1.125rem;
--vh-size-h2: 0.88rem;
--vh-size-h3: 0.8rem;
--vh-size-p: 1rem;
--vh-size-span: 0.875rem;
--vh-size-small: 0.8625rem;
--vh-size-mini: 0.805rem;
--vh-padding-top: calc(66px + 1rem);
--vh-main-max-width: 1388px;
--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem);
@ -21,7 +51,6 @@ p,
blockquote {
margin: 0;
padding: 0;
color: #333;
text-decoration: none;
}
@ -37,7 +66,6 @@ p {
a {
margin: 0;
padding: 0;
color: #333;
text-decoration: none;
line-height: 1.6;
}
@ -57,6 +85,7 @@ img {
}
* {
color: var(--vh-black-100);
// IOS 点击阴影
-webkit-tap-highlight-color: transparent;
// 隐藏滚动条
@ -75,8 +104,6 @@ img {
html {
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 16px;
color: #333;
&>body {
position: relative;
@ -88,7 +115,7 @@ html {
align-items: center;
width: 100vw;
height: max-content;
font-family: 'MiSans', serif;
font-family: 'HarmonyOS Sans SC', serif;
font-weight: 400;
cursor: url(/assets/images/default.cur), default;
overflow-x: hidden;
@ -112,7 +139,7 @@ html {
&>p {
padding: 0;
font-size: 1rem;
font-size: var(--vh-size-p);
line-height: 2;
}
}