Skip to content

Commit 4c53ba3

Browse files
princepspolycapprincepspolycap
committed
feat: enhance blog layout components and improve hover effects
1 parent 4a1d161 commit 4c53ba3

File tree

5 files changed

+34
-64
lines changed

5 files changed

+34
-64
lines changed

‎src/app/globals.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,12 @@
184184
.hover-lift:hover
185185
{
186186
transform: translateY(-4px);
187-
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
187+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 40px rgba(123, 0, 211, 0.15);
188+
}
189+
190+
:is(.dark .hover-lift:hover)
191+
{
192+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 50px rgba(123, 0, 211, 0.25);
188193
}
189194

190195
/* === GRADIENT TEXT === */
@@ -401,4 +406,4 @@ code[data-line-numbers-max-digits='3']>[data-line]::before
401406
.custom-scrollbar::-webkit-scrollbar-thumb:hover
402407
{
403408
background-color: rgba(123, 0, 211, 0.5);
404-
}
409+
}

‎src/components/Blog/BlogLayoutOne.js‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { slug } from "github-slugger";
66

77
const BlogLayoutOne = ({blog}) => {
88
return (
9-
<div className="group inline-block overflow-hidden rounded-xl hover-lift">
9+
<Link href={blog.url} className="group block relative w-full h-full overflow-hidden rounded-xl hover-lift border border-transparent dark:border-light/10">
1010
<div
1111
className="absolute top-0 left-0 bottom-0 right-0 h-full
1212
bg-gradient-to-b from-transparent from-0% to-dark/90 rounded-xl z-10
@@ -25,20 +25,13 @@ const BlogLayoutOne = ({blog}) => {
2525

2626
<div className="w-full absolute bottom-0 p-4 xs:p-6 sm:p-10 z-20">
2727
<Tag link={`/categories/${slug(blog.tags[0])}`} name={blog.tags[0]}
28-
className="px-6 text-xs sm:text-sm py-1 sm:py-2 !border "
28+
className="px-6 text-xs sm:text-sm py-1 sm:py-2 !border"
2929
/>
30-
<Link href={blog.url} className="mt-6">
31-
<h2 className="font-bold capitalize text-sm xs:text-base sm:text-xl md:text-2xl text-light mt-2 sm:mt-4">
32-
<span
33-
className="bg-gradient-to-r from-accent to-accent bg-[length:0px_6px] dark:from-accentDark/50 dark:to-accentDark/50
34-
group-hover:bg-[length:100%_6px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 "
35-
>
36-
{blog.title}
37-
</span>
38-
</h2>
39-
</Link>
30+
<h2 className="font-bold capitalize text-sm xs:text-base sm:text-xl md:text-2xl text-light mt-2 sm:mt-4 group-hover:text-accentDark transition-colors duration-300">
31+
{blog.title}
32+
</h2>
4033
</div>
41-
</div>
34+
</Link>
4235
);
4336
};
4437

‎src/components/Blog/BlogLayoutThree.js‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,32 @@ import React from "react";
55

66
const BlogLayoutThree = ({ blog }) => {
77
return (
8-
<div className="group flex flex-col items-center text-dark dark:text-light hover-lift">
9-
<Link href={blog.url} className="h-full rounded-xl overflow-hidden">
8+
<Link href={blog.url} className="group block rounded-xl overflow-hidden bg-light/50 dark:bg-light/5 hover-lift border border-transparent dark:border-light/10">
9+
<div className="rounded-xl overflow-hidden">
1010
<Image
1111
src={blog.image.src}
1212
placeholder="blur"
1313
blurDataURL={blog.image.blurDataURL}
1414
alt={blog.title}
1515
width={blog.image.width}
1616
height={blog.image.height}
17-
className=" aspect-[4/3] w-full h-full object-cover object-center group-hover:scale-105 transition-all ease duration-300 "
17+
className="aspect-[4/3] w-full h-full object-cover object-center group-hover:scale-105 transition-all ease duration-300"
1818
sizes="(max-width: 640px) 100vw,(max-width: 1024px) 50vw, 33vw"
1919
/>
20-
</Link>
20+
</div>
2121

22-
<div className="flex flex-col w-full mt-4">
22+
<div className="flex flex-col w-full p-4">
2323
<span className="uppercase text-accent dark:text-accentDark font-semibold text-xs sm:text-sm">
2424
{blog.tags[0]}
2525
</span>
26-
<Link href={blog.url} className="inline-block my-1">
27-
<h2 className="font-semibold capitalize text-base sm:text-lg">
28-
<span
29-
className="bg-gradient-to-r from-accent/50 to-accent/50 dark:from-accentDark/50
30-
dark:to-accentDark/50
31-
bg-[length:0px_6px]
32-
group-hover:bg-[length:100%_6px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 "
33-
>
34-
{blog.title}
35-
</span>
36-
</h2>
37-
</Link>
38-
39-
<span className="capitalize text-gray dark:text-light/50 font-semibold text-sm sm:text-base">
26+
<h2 className="font-semibold capitalize text-base sm:text-lg text-dark dark:text-light group-hover:text-accent dark:group-hover:text-accentDark transition-colors duration-300 my-1">
27+
{blog.title}
28+
</h2>
29+
<span className="capitalize text-gray dark:text-light/50 font-semibold text-sm sm:text-base">
4030
{format(new Date(blog.publishedAt), "MMMM dd, yyyy")}
4131
</span>
4232
</div>
43-
</div>
33+
</Link>
4434
);
4535
};
4636

‎src/components/Blog/BlogLayoutTwo.js‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,8 @@ import React from "react";
55

66
const BlogLayoutTwo = ({blog}) => {
77
return (
8-
<div className="group grid grid-cols-12 gap-4 items-center text-dark dark:text-light hover-lift">
9-
<Link
10-
href={blog.url}
11-
className=" col-span-12 lg:col-span-4 h-full rounded-xl overflow-hidden"
12-
>
8+
<Link href={blog.url} className="group grid grid-cols-12 gap-4 items-center text-dark dark:text-light rounded-xl overflow-hidden hover-lift bg-light/50 dark:bg-light/5 border border-transparent dark:border-light/10 p-2">
9+
<div className="col-span-12 lg:col-span-4 h-full rounded-xl overflow-hidden">
1310
<Image
1411
src={blog.image.src}
1512
placeholder="blur"
@@ -20,28 +17,20 @@ const BlogLayoutTwo = ({blog}) => {
2017
className="aspect-square w-full h-full object-cover object-center group-hover:scale-105 transition-all ease duration-300"
2118
sizes="(max-width: 640px) 100vw,(max-width: 1024px) 50vw, 33vw"
2219
/>
23-
</Link>
20+
</div>
2421

25-
<div className="col-span-12 lg:col-span-8 w-full">
22+
<div className="col-span-12 lg:col-span-8 w-full">
2623
<span className="inline-block w-full uppercase text-accent dark:text-accentDark font-semibold text-xs sm:text-sm">
2724
{blog.tags[0]}
2825
</span>
29-
<Link href={blog.url} className="inline-block my-1">
30-
<h2 className="font-semibold capitalize text-base sm:text-lg">
31-
<span
32-
className="bg-gradient-to-r from-accent/50 dark:from-accentDark/50 to-accent/50 dark:to-accentDark/50 bg-[length:0px_6px]
33-
group-hover:bg-[length:100%_6px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 "
34-
>
35-
{blog.title}
36-
</span>
37-
</h2>
38-
</Link>
39-
40-
<span className="inline-block w-full capitalize text-gray dark:text-light/50 font-semibold text-xs sm:text-base">
26+
<h2 className="font-semibold capitalize text-base sm:text-lg group-hover:text-accent dark:group-hover:text-accentDark transition-colors duration-300 my-1">
27+
{blog.title}
28+
</h2>
29+
<span className="inline-block w-full capitalize text-gray dark:text-light/50 font-semibold text-xs sm:text-base">
4130
{format(new Date(blog.publishedAt), "MMMM dd, yyyy")}
4231
</span>
4332
</div>
44-
</div>
33+
</Link>
4534
);
4635
};
4736

‎src/components/Footer/index.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import React from "react";
33
import { useForm } from "react-hook-form";
44
import { GithubIcon, LinkedinIcon, TwitterIcon, YouTubeIcon, PeerlistIcon, InstagramIcon, TikTokIcon, MediumIcon } from "../Icons";
5-
import Link from "next/link";
65
import siteMetadata from "@/src/utils/siteMetaData";
76

87
const Footer = () => {
@@ -116,19 +115,13 @@ const Footer = () => {
116115
</a>
117116
</div>
118117

119-
<div className="w-full mt-16 md:mt-24 relative font-medium border-t border-solid border-light py-6 px-8 flex flex-col md:flex-row items-center justify-between">
118+
<div className="w-full mt-16 md:mt-24 relative font-medium border-t border-solid border-light py-6 px-8 flex flex-col md:flex-row items-center justify-between">
120119
<span className="text-center">
121120
&copy;{currentYear} Princeps Polycap. All rights reserved.
122121
</span>
123-
<Link
124-
href="/sitemap.xml"
125-
className="text-center underline my-4 md:my-0"
126-
>
127-
sitemap.xml
128-
</Link>
129122
<div className="text-center">
130123
Documented with &hearts; by{" "}
131-
<a href={siteMetadata.siteUrl} className="underline" target="_blank" rel="noopener noreferrer">
124+
<a href={siteMetadata.siteUrl} className="hover:text-accent dark:hover:text-accentDark transition-colors duration-300" target="_blank" rel="noopener noreferrer">
132125
Princeps Polycap
133126
</a>
134127
</div>

0 commit comments

Comments
 (0)