365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize duplicated tailwind code and formatting

Browse Source
This commit is contained in:
prototypa
2022-08-27 01:52:23 -04:00
parent ca01eecc24
commit 212331215b
28 changed files with 424 additions and 950 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/widgets/BlogListItem.astro
View File

@@ -1,36 +1,26 @@
---
import Picture from "~/components/core/Picture.astro";
import { findImage } from "~/utils/findImage";
import { getFormattedDate } from "~/utils/getFormatedDate";
const { post } = Astro.props;
const image = await findImage(post.image);
---
<article
class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8"
>
<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
<a class="relative block group" href="#0">
<div
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
>
<Picture
src={image}
class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
alt={post.description}
aspectRatio={1}
/>
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
<Picture src={image} class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg" widths={[400,
768]} sizes="(max-width: 767px) 400px, 768px" alt={post.description} aspectRatio={1} />
</div>
</a>
<div>
<header>
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
<a
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={`/blog/${post.slug}`}
>
<a class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={`/blog/${post.slug}`}>
{post.title}
</a>
</h2>
@@ -41,17 +31,9 @@ const image = await findImage(post.image);
<footer class="flex items-center mt-4">
<div>
<span class="text-gray-500 dark:text-slate-400">
<time datetime={""}>
{
new Date(post.pubDate).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})
}
</time>
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time>
</span>
</div>
</footer>
</div>
</article>
</article>