add new blogs

pages/blog/[...slug].vue

@@ -4,7 +4,7 @@
 		<div class="pt-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
 			<ContentDoc v-slot="{ doc }">
 				<img :src="doc.image.src"
-					class="mb-2" />
+					class="mb-2 rounded-md drop-shadow" />
 				<h1 class="text-3xl text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
 				<p class="mb-1 text-zinc-400">
 					{{ doc.description }}
@@ -12,7 +12,7 @@
 				<p class="mb-2 text-zinc-500">
 					{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
 				</p>
-				<div class="flex flex-wrap w-full gap-2 justify-start mb-7">
+				<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
 					<IconTag v-for="tag in doc.tags"
 						:name="tag"
 						:iconName='tag'
@@ -33,3 +33,10 @@
 			</div>
 		</footer>
 </template>
+
+<style>
+br {
+  @apply my-3;
+  display: block;
+}
+</style>

pages/blog/index.vue

@@ -13,7 +13,7 @@
 							:src="article.image.src"
 							class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
 						<div
-							class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
+							class="p-3 overflow-hidden pt-2 text-fade mb-1 pb-1 relative">
 							<h3>
 								<nuxt-link tabindex="0"
 									class="text-lg"
@@ -27,7 +27,7 @@
 							<p class="text-zinc-500">
 								{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
 							</p>
-							<p class="text-zinc-200 max-h-56">
+							<p class="text-zinc-200 max-h-[13.75rem]">
 								<ContentDoc :head="false"
 									:value="article"
 									:path="article._path"
@@ -38,8 +38,10 @@
 											:iconName='tag'
 											isTag="true" />
 									</div>
-									<ContentRenderer :value="doc"
-										:excerpt="true" />
+									<div class="max-h-full">
+										<ContentRenderer :value="doc"
+											:excerpt="true" />
+									</div>
 								</ContentDoc>
 							</p>
 						</div>
@@ -50,8 +52,21 @@
 	</div>
 </template>
 
+<style>
+.text-fade::before {
+	content: '';
+	position: absolute;
+	width: 100%;
+	height: 33.333333%;
+	left: 0px;
+	bottom: 0px;
+	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(12,12,12,0) 36%, rgba(32,31,32,1) 95%, rgba(32,31,32,1) 100%);
+}
+</style>
+
 <script setup lang="ts">
 const { data: articles } = await useAsyncData('posts-list', () => queryContent('/blog')
+	.only(['image', '_path', 'title', 'description', 'date'])
 	.where({ _draft: false })
 	.sort({ date: -1, $numeric: true, })
 	.find()

pages/index.vue

@@ -3,7 +3,7 @@
 		<Nav class="absolute z-10" />
 		<header class="w-full h-3/6 sm:h-2/5 md:h-3/5">
 			<div
-				class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background">
+				class="p-6 bg-[#1212121A] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background">
 				<div
 					class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
 					<img alt="juls07 profile picture"
@@ -124,6 +124,32 @@
 	</div>
 </template>
   
+<style scoped>
+.blur-background {
+	position: relative;
+	overflow: hidden;
+}
+
+.blur-background::before {
+	content: '';
+	margin: -35px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	filter: blur(16px) saturate(125%);
+}
+
+header,
+.blur-background::before {
+	background-image: url(~/assets/images/header.jpg);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+</style>
+
 <script setup lang="ts">
 useHead({
 	title: 'Juls07',