mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-12-08 00:44:30 +01:00
fix: add hover effects
This commit is contained in:
parent
9f79b88202
commit
2a635bf3ba
@ -22,7 +22,7 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
|
||||
locale="en"
|
||||
data-cy={post.slug}
|
||||
>
|
||||
<ShadowContainer className="cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2">
|
||||
<ShadowContainer className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02]">
|
||||
<h2
|
||||
data-cy="blog-post-title"
|
||||
className="text-xl font-semibold text-primary dark:text-primary-dark"
|
||||
|
@ -14,8 +14,11 @@ export const Header = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black">
|
||||
<Link href="/">
|
||||
<h1 className="flex items-center justify-center">
|
||||
<h1>
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-105"
|
||||
>
|
||||
<Image
|
||||
quality={100}
|
||||
className="size-16"
|
||||
@ -26,8 +29,8 @@ export const Header = (): JSX.Element => {
|
||||
<strong className="ml-1 hidden font-headline font-semibold text-primary dark:text-primary-dark sm:block sm:text-xl">
|
||||
Théo LUDWIG
|
||||
</strong>
|
||||
</h1>
|
||||
</Link>
|
||||
</h1>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-col items-center justify-center px-6">
|
||||
<Link
|
||||
|
@ -11,7 +11,7 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
|
||||
const { name, description, href } = props
|
||||
|
||||
return (
|
||||
<ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-transform duration-200 ease-in-out hover:-translate-y-2">
|
||||
<ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.03]">
|
||||
<a href={href} target="_blank" rel="noopener noreferrer">
|
||||
<div className="flex">
|
||||
<GitHubIcon className="mr-2 h-6" />
|
||||
|
@ -13,7 +13,7 @@ export const SocialMediaItem = (props: SocialMediaItemProps): JSX.Element => {
|
||||
aria-label={ariaLabel}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="relative inline-block bg-transparent"
|
||||
className="relative inline-block bg-transparent transition-all duration-300 ease-in-out hover:scale-110"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
|
Loading…
Reference in New Issue
Block a user