🌈 style: 卡片样式调整一致

MaLuns · May 23, 2024 · 746e68d · 746e68d
1 parent af51488
commit 746e68d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/packages/hexo-theme-async/layout/_partial/footer.ejs b/packages/hexo-theme-async/layout/_partial/footer.ejs
@@ -1,4 +1,4 @@
-<footer class="trm-scroll-animation">
+<footer class="trm-footer-card trm-scroll-animation">
 
     <% if(theme.footer.beian.enable) { %>
         <div class="trm-footer-item">

diff --git a/packages/hexo-theme-async/source/css/_components/card.less b/packages/hexo-theme-async/source/css/_components/card.less
@@ -11,6 +11,8 @@
 		color: var(--theme-color, #00283a);
 		margin-bottom: 20px;
 	}
+
+	.shadow();
 }
 
 // skill-card
@@ -21,6 +23,7 @@
 	margin-bottom: var(--card-bottom-card, 40px);
 
 	.shadow();
+
 	.trm-skill-header {
 		display: flex;
 		justify-content: space-between;
@@ -827,6 +830,7 @@
 	padding: 0;
 
 	.shadow();
+
 	.trm-popup-content {
 		max-height: 550px;
 		display: flex;
@@ -949,6 +953,7 @@
 	padding: var(--card-padding, 40px);
 
 	.shadow();
+
 	.trm-project-desc {
 		height: 3rem;
 		overflow: hidden;

diff --git a/packages/hexo-theme-async/source/css/_components/footer.less b/packages/hexo-theme-async/source/css/_components/footer.less
@@ -1,11 +1,11 @@
-footer {
+.trm-footer-card {
 	background-color: var(--theme-bg-color, #fcfcfe);
-	box-shadow: var(--box-shadow);
 	border-radius: var(--card-border-radius, 10px);
 	text-align: center;
 	width: 100%;
 	padding: 20px;
 
+	.shadow();
 	.trm-footer-item {
 		color: var(--body-color, #7b7b7d);
 		min-height: 1.6rem;

diff --git a/packages/hexo-theme-async/source/css/index.less b/packages/hexo-theme-async/source/css/index.less
@@ -36,20 +36,32 @@
 }
 
 .click-animation {
-	.transition-mixin(all, 0.3s, ease);
 	&:active {
-		transform: scale(0.97);
+		animation: linear 0.2s clickanimation forwards;
 	}
 }
 
 .shadow {
+	transition:
+		all 0.4s ease-in-out,
+		box-shadow 0.3s ease;
 	box-shadow: var(--box-shadow);
 
 	&:hover {
 		box-shadow: var(--box-shadow-hover);
 	}
 }
 
+@keyframes clickanimation {
+	0% {
+		transform: scale(1);
+	}
+
+	100% {
+		transform: scale(0.97);
+	}
+}
+
 @import "./_variables/index.less";
 @import "./_components/index.less";
 @import (optional) "../../../../source/_data/style/index.less";