🌈 style: 卡片样式阴影调整一致

MaLuns · May 16, 2024 · af51488 · af51488
1 parent 2bb3a0a
commit af51488
Show file tree

Hide file tree

Showing 19 changed files with 91 additions and 63 deletions.
diff --git a/packages/hexo-theme-async/layout/_partial/page/archive.ejs b/packages/hexo-theme-async/layout/_partial/page/archive.ejs
@@ -47,7 +47,7 @@
             <div class="trm-timeline-item trm-scroll-animation">
                 <div class="trm-timeline-mark-light"></div>
                 <div class="trm-timeline-mark"></div>
-                <div class="trm-a trm-timeline-content <%- theme.archive.type %>">
+                <div class="trm-timeline-content <%- theme.archive.type %>">
                     <% if(theme.archive.type === 'less'){ %>
                         <div class="trm-card-header">
                             <h6>

diff --git a/packages/hexo-theme-async/layout/_partial/page/links.ejs b/packages/hexo-theme-async/layout/_partial/page/links.ejs
@@ -35,12 +35,12 @@
     <%  theme.links.forEach(item=>{%>
         <div class="col-lg-6">
             <a href='<%- item.url %>' target='_blank' rel="nofollow">
-                <div class="trm-service-icon-box trm-scroll-animation trm-p-20">
-                    <div class="trm-service-content">
+                <div class="trm-link-box trm-scroll-animation trm-p-20">
+                    <div class="trm-link-content">
                         <div class="trm-icon">
                             <img draggable="false" <%- onerror('flink') %> alt="<%- item.name %>" src="<%- item.image %>">
                         </div>
-                        <div class="trm-service-text">
+                        <div class="trm-link-text">
                             <h6 class="trm-mb-10"><%- item.name %></h6>
                             <div><%- item.desc ? truncate(item.desc,{length:32}) : '' %></div>
                         </div>

diff --git a/packages/hexo-theme-async/scripts/filters/index.js b/packages/hexo-theme-async/scripts/filters/index.js
@@ -1,16 +1,17 @@
 hexo.extend.filter.register('after_post_render', data => {
+	let replaceText = ` data-tag='post-image'`;
+
 	// img lazyload
 	if (hexo.theme.config.lazyload && hexo.theme.config.lazyload.enable) {
-		data.content = data.content.replace(/<img(.+?)(\/{0,1})>/gi, (str, p1) => {
-			return str.replace(p1, `${p1} loading="lazy"`);
-		});
+		replaceText += ` loading="lazy"`;
 	}
 
+	// img failed to load
 	if (hexo.theme.config.error_img.post_page) {
-		const onerror = hexo.extend.helper.get('onerror').bind(hexo);
-		data.content = data.content.replace(/<img(.+?)(\/{0,1})>/gi, (str, p1) => {
-			return str.replace(p1, `${p1} ${onerror('post_page')}`);
-		});
+		replaceText += ` ${hexo.extend.helper.get('onerror').bind(hexo)('post_page')}`;
 	}
+
+	data.content = data.content.replace(/<img(.+?)(\/{0,1})>/gi, (str, p1) => str.replace(p1, `${p1} ${replaceText}`));
+
 	return data;
 });
diff --git a/packages/hexo-theme-async/scripts/tags/flink.js b/packages/hexo-theme-async/scripts/tags/flink.js
@@ -30,12 +30,12 @@ const flinkFn = (args, content) => {
 		listResult += `
 <div class="col-lg-${col}">
     <a href='${item.url}' target='_blank' rel="nofollow">
-        <div class="trm-service-icon-box trm-scroll-animation trm-p-20">
-            <div class="trm-service-content">
+        <div class="trm-link-box trm-scroll-animation trm-p-20">
+            <div class="trm-link-content">
                 <div class="trm-icon">
                     <img class="no-fancybox" draggable="false" ${onerror('flink')} alt="${item.name}" src="${item.image}">
                 </div>
-                <div class="trm-service-text">
+                <div class="trm-link-text">
                     <h6 class="trm-mb-10">${item.name}</h6>
                     <div>${truncate(item.desc || '', { length: 32 })}</div>
                 </div>

diff --git a/packages/hexo-theme-async/source/css/_components/app-frame.less b/packages/hexo-theme-async/source/css/_components/app-frame.less
@@ -3,7 +3,6 @@
 	width: 100%;
 	overflow: hidden;
 	background-color: var(--theme-bg2-color, #f4f5f7);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
 	.transition-mixin();
 
 	/* .trm-hidden-switcher {

diff --git a/packages/hexo-theme-async/source/css/_components/banner.less b/packages/hexo-theme-async/source/css/_components/banner.less
@@ -5,7 +5,7 @@
 	z-index: 1;
 	overflow: hidden;
 	border-radius: 0 0 20px 20px;
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	box-shadow: var(--box-shadow);
 
 	.trm-slideshow {
 		position: absolute;

diff --git a/packages/hexo-theme-async/source/css/_components/blockquote.less b/packages/hexo-theme-async/source/css/_components/blockquote.less
@@ -1,5 +1,5 @@
 blockquote {
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	box-shadow: var(--box-shadow);
 	margin: 0;
 	display: block;
 	position: relative;

diff --git a/packages/hexo-theme-async/source/css/_components/card.less b/packages/hexo-theme-async/source/css/_components/card.less
@@ -4,7 +4,7 @@
 	border-radius: var(--card-border-radius, 10px);
 	margin-bottom: var(--card-bottom-card, 40px);
 	padding: var(--card-padding, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	box-shadow: var(--box-shadow);
 
 	.trm-icon {
 		font-size: 22px;
@@ -14,14 +14,13 @@
 }
 
 // skill-card
-
 .trm-skill-card {
 	border-radius: var(--card-border-radius, 10px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
 	background-color: var(--theme-bg-color, #fcfcfe);
 	padding: var(--card-padding, 40px);
 	margin-bottom: var(--card-bottom-card, 40px);
 
+	.shadow();
 	.trm-skill-header {
 		display: flex;
 		justify-content: space-between;
@@ -33,7 +32,7 @@
 		background-color: var(--theme-bg2-color, #f4f5f7);
 		height: 5px;
 		width: 100%;
-		box-shadow: var(--box-shadow2, inset 0 0 4px -1px rgba(0, 0, 0, 0.15));
+		box-shadow: var(--box-shadow);
 
 		.trm-progressbar {
 			width: 0;
@@ -135,21 +134,20 @@
 	}
 }
 
-// icon-box
-
-.trm-service-icon-box {
+// link-box
+.trm-link-box {
 	padding: var(--card-padding, 40px);
 	border-radius: var(--card-border-radius, 10px);
 	background-color: var(--theme-bg-color, #fcfcfe);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
 	margin-bottom: var(--card-bottom-card, 40px);
+	box-shadow: var(--box-shadow);
 
-	.trm-service-content {
+	.trm-link-content {
 		display: flex;
 		align-items: center;
 	}
 
-	.trm-service-text {
+	.trm-link-text {
 		flex: 1;
 
 		div {
@@ -170,10 +168,12 @@
 			padding: 2px;
 		}
 	}
+
+	.click-animation();
+	.shadow();
 }
 
 // main card
-
 .trm-main-card-frame {
 	position: relative;
 	z-index: 2;
@@ -287,7 +287,7 @@
 
 		.trm-avatar {
 			border: solid 3px var(--theme-bg-color, #fcfcfe);
-			box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+			box-shadow: var(--box-shadow);
 			width: 110px;
 			height: 110px;
 			border-radius: 50%;
@@ -314,11 +314,10 @@
 }
 
 // counter card
-
 .trm-counter-up {
 	text-align: center;
 	border-radius: var(--card-border-radius, 10px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	box-shadow: var(--box-shadow);
 	background-color: var(--theme-bg-color, #fcfcfe);
 	padding: var(--card-padding, 40px);
 	margin-bottom: var(--card-bottom-card, 40px);
@@ -350,12 +349,11 @@
 }
 
 // contact card
-
 .trm-contact-card {
 	border-radius: var(--card-border-radius, 10px);
 	background: var(--theme-bg-color, #fcfcfe);
 	padding: var(--card-padding, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	box-shadow: var(--box-shadow);
 
 	.trm-form-bottom {
 		display: flex;
@@ -380,14 +378,15 @@
 }
 
 //  blog card
-
 .trm-blog-card {
 	background-color: var(--theme-bg-color, #fcfcfe);
 	position: relative;
 	overflow: hidden;
 	border-radius: var(--card-border-radius, 10px);
 	margin-bottom: var(--card-bottom-card, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+
+	.click-animation();
+	.shadow();
 
 	.trm-top {
 		position: absolute;
@@ -511,15 +510,15 @@
 }
 
 // publications card
-
 .trm-older-publications-card {
 	background-color: var(--theme-bg-color, #fcfcfe);
 	position: relative;
 	overflow: hidden;
 	border-radius: var(--card-border-radius, 10px);
 	padding: var(--card-padding, 40px);
 	margin-bottom: var(--card-bottom-card, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+
+	.shadow();
 
 	.trm-older-publication {
 		margin-bottom: var(--card-bottom-card, 40px);
@@ -622,15 +621,15 @@
 }
 
 //  categories card
-
 .trm-blog-categories {
 	text-align: center;
 	position: relative;
 	background-color: var(--theme-bg-color, #fcfcfe);
 	border-radius: var(--card-border-radius, 10px);
 	padding: var(--card-padding, 40px);
 	margin-bottom: var(--card-bottom-card, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+
+	.shadow();
 
 	&:before {
 		content: "";
@@ -666,9 +665,10 @@
 	background-color: var(--theme-bg-color, #fcfcfe);
 	border-radius: var(--card-border-radius, 10px);
 	padding: var(--card-padding, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
 	margin-bottom: var(--card-bottom-card, 40px);
 
+	.shadow();
+
 	&.trm-popular {
 		&:after {
 			content: "popular";
@@ -729,9 +729,10 @@
 	position: relative;
 	overflow: hidden;
 	margin-bottom: var(--card-bottom-card, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
 	border-radius: var(--card-border-radius, 10px);
 
+	.shadow();
+
 	.trm-cover-frame {
 		padding-bottom: 100%;
 		position: relative;
@@ -761,7 +762,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+		box-shadow: var(--box-shadow);
 		opacity: 0;
 		transform: translateY(30px) scale(1.02);
 		.transition-mixin();
@@ -817,7 +818,6 @@
 // order card
 
 .trm-order {
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
 	background-color: var(--theme-bg-color, #fcfcfe);
 	border-radius: var(--card-border-radius, 10px);
 	overflow: hidden;
@@ -826,6 +826,7 @@
 	max-width: 800px;
 	padding: 0;
 
+	.shadow();
 	.trm-popup-content {
 		max-height: 550px;
 		display: flex;
@@ -911,7 +912,7 @@
 	padding: var(--card-padding, 40px);
 	background-color: var(--theme-bg-color, #fcfcfe);
 	border-radius: var(--card-border-radius, 10px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	box-shadow: var(--box-shadow);
 
 	.trm-slider-author {
 		img {
@@ -922,7 +923,7 @@
 			object-position: center;
 			margin-bottom: 20px;
 			border: solid 3px var(--theme-bg-color, #fcfcfe);
-			box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+			box-shadow: var(--box-shadow);
 		}
 	}
 
@@ -945,9 +946,9 @@
 	background-color: var(--theme-bg-color, #fcfcfe);
 	border-radius: var(--card-border-radius, 10px);
 	margin-bottom: var(--card-bottom-card, 40px);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
 	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,6 +1,6 @@
 footer {
 	background-color: var(--theme-bg-color, #fcfcfe);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	box-shadow: var(--box-shadow);
 	border-radius: var(--card-border-radius, 10px);
 	text-align: center;
 	width: 100%;

diff --git a/packages/hexo-theme-async/source/css/_components/form.less b/packages/hexo-theme-async/source/css/_components/form.less
@@ -13,7 +13,7 @@ form,
 		border-radius: 10px;
 		margin-bottom: 20px;
 		border: 0;
-		box-shadow: var(--box-shadow2, inset 0 0 4px -1px rgba(0, 0, 0, 0.15));
+		box-shadow: var(--box-shadow);
 		background-color: var(--theme-bg2-color, #f4f5f7);
 		padding: 0 20px;
 
@@ -31,7 +31,7 @@ form,
 		border-radius: 10px;
 		margin-bottom: 40px;
 		border: 0;
-		box-shadow: var(--box-shadow2, inset 0 0 4px -1px rgba(0, 0, 0, 0.15));
+		box-shadow: var(--box-shadow);
 		background-color: var(--theme-bg2-color, #f4f5f7);
 		padding: 15px 20px;
 

diff --git a/packages/hexo-theme-async/source/css/_components/menu.less b/packages/hexo-theme-async/source/css/_components/menu.less
@@ -54,7 +54,7 @@
 					top: 80px;
 					left: -10px;
 					border-radius: 0 0 10px 10px;
-					box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+					box-shadow: var(--box-shadow);
 					position: absolute;
 					z-index: 9;
 					display: flex;
@@ -156,7 +156,7 @@
 		margin: 0;
 		pointer-events: all;
 		max-height: 0;
-		box-shadow: var(--box-shadow2, inset 0 0 4px -1px rgba(0, 0, 0, 0.15));
+		box-shadow: var(--box-shadow);
 	}
 
 	.trm-menu nav ul li:hover ul {

diff --git a/packages/hexo-theme-async/source/css/_components/mode-switcher.less b/packages/hexo-theme-async/source/css/_components/mode-switcher.less
@@ -78,7 +78,7 @@
 		.tgl-light {
 			& + .trm-swich {
 				margin-bottom: 0;
-				box-shadow: var(--box-shadow2, inset 0 0 4px -1px rgba(0, 0, 0, 0.15));
+				box-shadow: var(--box-shadow);
 				background: var(--theme-bg2-color, #f4f5f7);
 				border-radius: 2em;
 				padding: 2px;

diff --git a/packages/hexo-theme-async/source/css/_components/plugins/reward/reward.less b/packages/hexo-theme-async/source/css/_components/plugins/reward/reward.less
@@ -30,6 +30,6 @@
 		transition-property: all;
 		transition-duration: 0.3s;
 		transition-delay: 0s;
-		box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+		box-shadow: var(--box-shadow);
 	}
 }