🐞 fix(blog):

fix blog excerpt overflow close #291
GlobeMC · Jul 27, 2024 · 3c6f751 · 3c6f751
1 parent b7771d0
commit 3c6f751
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 46 deletions.
diff --git a/.vitepress/theme/layouts/Posts.vue b/.vitepress/theme/layouts/Posts.vue
@@ -5,15 +5,16 @@ import { data as posts } from "../../data/posts.data"
 <template>
 	<div class="container">
 		<div v-for="post in posts" :key="post.url">
-			<a style="color: inherit;" class="card" :href="post.url">
+			<a style="color: inherit" class="card" :href="post.url">
 				<span class="title">{{ post.title }}</span>
-				<div class="content" v-if="post.excerpt" v-html="post.excerpt"></div>
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<div v-if="post.excerpt" class="content" v-html="post.excerpt"></div>
 			</a>
 		</div>
 	</div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .container {
 	position: relative;
 	display: flex;
@@ -22,50 +23,58 @@ import { data as posts } from "../../data/posts.data"
 	max-width: 1200px;
 	flex-wrap: wrap;
 	z-index: 1;
-}
 
-.container .card {
-	position: relative;
-	width: 15rem;
-	height: 10rem;
-	margin: 30px;
-	box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
-	border-radius: 15px;
-	background: rgba(255, 255, 255, 0.1);
-	overflow: hidden;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-top: 1px solid rgba(255, 255, 255, 0.5);
-	border-left: 1px solid rgba(255, 255, 255, 0.5);
-	backdrop-filter: blur(5px);
+	.card {
+		position: relative;
+		width: 15rem;
+		height: 10rem;
+		margin: 30px;
+		box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
+		border-radius: 15px;
+		background: rgba(255, 255, 255, 0.1);
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-top: 1px solid rgba(255, 255, 255, 0.5);
+		border-left: 1px solid rgba(255, 255, 255, 0.5);
+		backdrop-filter: blur(5px);
 
-}
+		.title {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			opacity: 1;
+			transition: opacity 0.3s ease-out;
+		}
 
-.container .card .title {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	opacity: 1;
-	transition: opacity 0.3s ease-out;
-}
+		.content {
+			padding: 10px;
+			text-align: center;
+			transform: translateY(100px);
+			opacity: 0;
+			transition: 0.5s;
+			height: 8rem;
+			white-space: no-wrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
-.container .card:hover .title {
-	opacity: 0;
-}
+			& ::v-deep .header-anchor {
+				display: none;
+			}
+		}
 
-.container .card .content {
-	padding: 10px;
-	text-align: center;
-	transform: translateY(100px);
-	opacity: 0;
-	transition: 0.5s;
-}
+		&:hover {
+			.title {
+				opacity: 0;
+			}
 
-.container .card:hover .content {
-	transform: translateY(0px) scale(0.8);
-	opacity: 1;
+			.content {
+				transform: translateY(0px) scale(0.8);
+				opacity: 1;
+			}
+		}
+	}
 }
-
 </style>
diff --git a/docs/blog/post1.md b/docs/blog/post1.md
@@ -6,9 +6,6 @@ date: 2021-01-01T00:00:00Z
 
 # Post1
 
-Some text here.
-Write excerpts here, before the first `---` line.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
 
 ---
-
-This is the end of the first post.