dev #3
@ -8,6 +8,7 @@
|
||||
--ext-color-primary-3: #2e2d51;
|
||||
--ext-color-primary-4: #d4a187;
|
||||
--ext-color-primary-5: #e7ccc0;
|
||||
--ext-color-primary-6: #64b3b4;
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@ -19,6 +20,7 @@
|
||||
--ext-color-primary-3: #2e2d51;
|
||||
--ext-color-primary-4: #d4a187;
|
||||
--ext-color-primary-5: #e7ccc0;
|
||||
--ext-color-primary-6: #64b3b4;
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
@ -34,18 +36,25 @@ body {
|
||||
.ext-btn {
|
||||
@apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
|
||||
}
|
||||
|
||||
.ext-btn-primary {
|
||||
@apply bg-extColorPrimary text-white;
|
||||
}
|
||||
|
||||
.ext-btn-primary2 {
|
||||
@apply bg-extColorPrimary2 text-white;
|
||||
}
|
||||
|
||||
.ext-btn-primary3 {
|
||||
@apply bg-extColorPrimary3 text-white;
|
||||
}
|
||||
.ext-btn-primary4 {
|
||||
@apply bg-extColorPrimary4 text-white;
|
||||
}
|
||||
|
||||
.ext-btn-shadow-sm {
|
||||
@apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)];
|
||||
}
|
||||
.ext-btn-shadow-sm-primary4 {
|
||||
@apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
|
@ -19,36 +19,21 @@ export interface BlogCardItemProps {
|
||||
|
||||
export function BlogCardItem({ data }: BlogCardItemProps) {
|
||||
return (
|
||||
<div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50">
|
||||
<div className="post-prev-3-container d-block d-sm-flex">
|
||||
<div className="post-prev-3-img">
|
||||
<div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50">
|
||||
<div className="post-prev-3-container flex flex-col">
|
||||
<div>
|
||||
<a href={`/${data.slug}/`}>
|
||||
<Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
|
||||
<Image width={684} height={454} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="post-prev-3-intro">
|
||||
<h4 className="post-prev-3-title">
|
||||
<div className="px-4 py-3 h-full flex flex-col justify-between">
|
||||
<h2 className="text-lg text-center">
|
||||
<a href={`/${data.slug}/`}>{data.title}</a>
|
||||
</h4>
|
||||
<div className="post-prev-3-text">{data.contentPreview}</div>
|
||||
<div className="post-prev-3-info clearfix">
|
||||
{!!data?.author?.name && (
|
||||
<div className="float-start">
|
||||
<a href="#">
|
||||
<Image
|
||||
className="post-prev-3-author-img"
|
||||
width={30}
|
||||
height={30}
|
||||
src={data.author?.img ?? "#"}
|
||||
alt="Image Description"
|
||||
/>
|
||||
</h2>
|
||||
<div className="flex justify-center mt-2">
|
||||
<a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary4">
|
||||
Continue Reading
|
||||
</a>
|
||||
<a href="#">{data.author.name}</a>
|
||||
</div>
|
||||
)}
|
||||
<div className={!!data?.author?.name ? "float-end" : "float-start"}>
|
||||
<a href="#">{data.date}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -58,22 +43,14 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
|
||||
|
||||
export function BlogCardItemSkeleton() {
|
||||
return (
|
||||
<div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50 animate-pulse">
|
||||
<div className="post-prev-3-container d-block d-sm-flex">
|
||||
<div className="post-prev-3-img">
|
||||
<div className="w-56 h-64 bg-gray-300 rounded-l-lg"></div>
|
||||
</div>
|
||||
<div className="post-prev-3-intro flex flex-1">
|
||||
<div className="flex flex-col flex-1 justify-between">
|
||||
<div>
|
||||
<div className="h-5 bg-gray-300 rounded w-3/4 mb-2"></div>
|
||||
<div className="h-4 bg-gray-300 rounded w-5/6 mb-2"></div>
|
||||
<div className="h-4 bg-gray-300 rounded w-2/3"></div>
|
||||
<div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
|
||||
</div>
|
||||
<div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50 animate-pulse">
|
||||
<div className="post-prev-3-container flex flex-col">
|
||||
<div className="h-48 w-full bg-gray-300"></div>
|
||||
<div className="px-4 py-3">
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<div className="h-4 bg-gray-300 rounded w-full"></div>
|
||||
<div className="h-4 bg-gray-300 rounded w-full"></div>
|
||||
<div className="h-4 bg-gray-300 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -15,6 +15,8 @@ export default {
|
||||
extColorPrimary2: "var(--ext-color-primary-2)",
|
||||
extColorPrimary3: "var(--ext-color-primary-3)",
|
||||
extColorPrimary4: "var(--ext-color-primary-4)",
|
||||
extColorPrimary5: "var(--ext-color-primary-5)",
|
||||
extColorPrimary6: "var(--ext-color-primary-6)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user