Minimal design details

src/components/blog/GridItem.astro

@@ -30,19 +30,19 @@ const image = await findImage(post.image);
 			)
 		}
 	</div>
-	<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
+	<h3 class="mb-2 text-xl font-bold leading-tight sm:text-2xl font-heading">
 		{
 			BLOG?.post?.disabled ? (
 				post.title
 			) : (
 				<a
 					href={getPermalink(post.slug, 'post')}
-					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+					class="hover:text-primary-600 transition ease-in duration-200"
 				>
 					{post.title}
 				</a>
 			)
 		}
 	</h3>
-	<p class="text-gray-700 dark:text-gray-400">{post.excerpt || post.description}</p>
+	<p class="text-gray-500 dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
 </article>

src/components/blog/Headline.astro

@@ -2,9 +2,9 @@
 const { title = await Astro.slots.render('default'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
 ---
 
-<header class="mb-8 md:mb-16 text-center">
+<header class="mb-8 md:mb-16 text-center max-w-3xl mx-auto">
 	<h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading">
 		{title}
 	</h1>
-	{subtitle && <div class="mt-2 md:mt-3 text-lg md:text-xl max-w-2xl mx-auto" set:html={subtitle} />}
+	{subtitle && <div class="mt-2 md:mt-3 mx-auto text-xl text-gray-500 dark:text-slate-400 font-medium" set:html={subtitle} />}
 </header>

src/components/blog/HighlightedPosts.astro

@@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
 			{
 				allPostsText && allPostsLink && (
 					<a
-						class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200 block mb-6 md:mb-0"
+						class="text-gray-500 dark:text-slate-400 hover:text-primary-600 transition ease-in duration-200 block mb-6 md:mb-0"
 						href={allPostsLink}
 					>
 						{allPostsText} »

src/components/blog/ListItem.astro

@@ -1,4 +1,5 @@
 ---
+import Icon from 'astro-icon';
 import { Picture } from '@astrojs/image/components';
 import PostTags from '~/components/common/Tags.astro';
 
@@ -38,9 +39,16 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 			</a>
 		)
 	}
-	<div>
+	<div class="mt-2">
 		<header>
-			<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading">
+			<div class="mb-1">
+				<span class="text-sm">
+					<Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 text-gray-500 dark:text-gray-400" />
+					<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
+					{Math.ceil(post.readingTime)} min read
+				</span>
+			</div>
+			<h2 class="text-xl sm:text-2xl font-bold leading-tight  mb-2 font-heading text-gray-700 dark:text-slate-300">
 				{
 					link ? (
 						<a
@@ -55,19 +63,11 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 				}
 			</h2>
 		</header>
-		<p class="text-md sm:text-lg flex-grow">
+
-			{post.excerpt || post.description}
+		{post.excerpt && <p class="flex-grow text-gray-500 dark:text-slate-400 text-lg">{post.excerpt}</p>}
-		</p>
+		<footer class="mt-5">
-		<footer class="mt-4">
+			<PostTags tags={post.tags} />
-			<div>
+			
-				<span class="text-gray-500 dark:text-slate-400">
-					<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
-					{Math.ceil(post.readingTime)} min read
-				</span>
-			</div>
-			<div class="mt-4">
-				<PostTags tags={post.tags} />
-			</div>
 		</footer>
 	</div>
 </article>

src/components/blog/SinglePost.astro

@@ -1,5 +1,7 @@
 ---
+import Icon from 'astro-icon';
 import { Picture } from '@astrojs/image/components';
+
 import PostTags from '~/components/common/Tags.astro';
 import SocialShare from '~/components/common/SocialShare.astro';
 
@@ -17,22 +19,29 @@ const { post, url } = Astro.props;
 
 <section class="py-8 sm:py-16 lg:py-20 mx-auto">
 	<article>
-		<header class={post.image ? 'text-center' : ''}>
+		<header class={post.image ? '' : ''}>
-			<p class="px-4 sm:px-6 max-w-3xl mx-auto">
+			<div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
-				<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
+				<p>
-					Math.ceil(post.readingTime)
+					<Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 text-gray-500 dark:text-gray-400" />
-				} min read
+					<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
-			</p>
+						Math.ceil(post.readingTime)
+					} min read
+				</p>
+			</div>
 			<h1
-				class="px-4 sm:px-6 max-w-3xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
+				class="px-4 sm:px-6 max-w-3xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
 			>
 				{post.title}
 			</h1>
+			<p class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-gray-500 dark:text-slate-400 font-medium text-justify">
+				{post.excerpt}
+			</p>
+			
 			{
 				post.image ? (
 					<Picture
 						src={post.image}
-						class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
+						class="max-w-full lg:max-w-6xl mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
 						widths={[400, 900]}
 						sizes="(max-width: 900px) 400px, 900px"
 						alt={post.description || ''}

src/components/common/SocialShare.astro

@@ -11,7 +11,7 @@ const { text, url, class: className = 'inline-block' } = Astro.props;
 ---
 
 <div class={className}>
-	<span class="align-super font-bold">Share:</span>
+	<span class="align-super font-bold dark:text-slate-400">Share:</span>
 	<button class="ml-2" title="Twitter Share" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
 		><Icon name="logos:twitter" class="w-6 h-6" />
 	</button>

src/components/common/Tags.astro

@@ -17,7 +17,7 @@ const { tags, class: className = 'text-sm' } = Astro.props;
 		<ul class={className}>
 			{tags.map((tag) => (
 				<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase">
-					{BLOG?.tag?.disabled ? tag : <a href={getPermalink(tag, 'tag')}>{tag}</a>}
+					{BLOG?.tag?.disabled ? tag : <a href={getPermalink(tag, 'tag')} class="text-gray-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-gray-200">{tag}</a>}
 				</li>
 			))}
 		</ul>

src/components/widgets/Hero.astro

@@ -38,7 +38,7 @@ const {
 					)
 				}
 				<div class="max-w-3xl mx-auto">
-					{subtitle && <p class="text-xl text-gray-600 mb-8 dark:text-slate-400" set:html={subtitle} />}
+					{subtitle && <p class="text-xl font-medium text-gray-500 mb-8 dark:text-slate-400" set:html={subtitle} />}
 					<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
 						{
 							callToAction && (