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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Archive/Archive.less
+13 -13
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);
}
}
}
src/components/ArticleCard/ArticleCard.less
+10 -9
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);
}
}
}
src/components/Aside/Aside.less
+12 -12
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;
src/components/Comment/Comment.less
+14 -11
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);
}
}
src/components/Footer/Footer.less
+1 -1
View File
@@ -96,7 +96,7 @@
&.text {
&>p {
font-size: 0.88rem;
font-size: var(--vh-size-h2);
&>a {
color: #94A3B8;
src/components/Header/Header.astro
+1 -1
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">
{
src/components/Header/Header.less
+24 -13
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 {
src/components/MobileSidebar/MobileSidebar.less
+1 -1
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;
src/components/Pagination/Pagination.less
+1 -1
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;
src/components/Reward/Reward.astro
+1 -1
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>
src/components/Reward/Reward.less
+3 -2
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;
src/components/Search/Search.less
+8 -8
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;