xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 21:17:07 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve item spacing, opacity-based ItemCard hover

Browse Source
This commit is contained in:
Xevion
2022-12-25 15:16:22 -06:00
parent dce8a2bc3c
commit 02333d09de
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ItemCard.tsx
View File

@@ -4,7 +4,8 @@ import {classNames, isHoverable} from "../utils/helpers";
import DependentImage from "./DependentImage"; import DependentImage from "./DependentImage";
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import {AiFillGithub} from "react-icons/ai"; import {AiFillGithub, AiFillLinkedin, AiOutlineLink,} from "react-icons/ai";
import {RxOpenInNewWindow} from "react-icons/rx";
type ItemCardProps = { type ItemCardProps = {
banner: string; banner: string;
@@ -21,27 +22,30 @@ const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
setActive(false); setActive(false);
}) })
return <div onClick={() => { return <div ref={itemRef}
if (!isHoverable()) toggleActive(); className={classNames("item", active ? "active" : null)}
}} onClick={() => {
ref={itemRef} className={classNames("item", active ? "active" : null)}> if (!isHoverable()) toggleActive();
}}>
<DependentImage fill src={banner} blurDataURL={bannerBlur} <DependentImage fill src={banner} blurDataURL={bannerBlur}
className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")} className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
placeholder="blur" placeholder="blur"
alt={`Banner for ${title}`} alt={`Banner for ${title}`}
/> />
<div className="elements grid grid-cols-12 h-full"> <div className="elements grid grid-cols-12 h-full m-2 px-1 sm:px-4">
<div className="col-span-8 max-h-full md:col-span-7 drop-shadow-2xl md:p-3 pl-2 md:ml-4"> <div className="col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
<div className="mt-1 text-lg md:mt-3 md:text-3xl">{title}</div> <div className="text-2xl sm:text-2xl md:text-3xl">{title}</div>
<div className="mt-0 md:mt-1.5 md:text-xl overflow-hidden"> <div className="mt-0 md:mt-1.5 text-xl sm:text-lg md:text-xl overflow-hidden ">
<ReactMarkdown>{description}</ReactMarkdown> <ReactMarkdown>{description}</ReactMarkdown>
</div> </div>
</div> </div>
<div className="col-span-1 hidden md:block"/> <div className="col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
<div className="col-span-4 w-full flex justify-end max-h-full md:py-5">
<div <div
className="grid grid-cols-2 grid-rows-2 mr-1 md:mr-5 gap-3 aspect-square max-w-full object-contain max-h-full icon-grid"> className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
<RxOpenInNewWindow/>
{/*<AiOutlineLink/>*/}
<AiFillGithub/> <AiFillGithub/>
{/*<AiFillLinkedin/>*/}
</div> </div>
</div> </div>
</div> </div>

2
src/styles/globals.scss
View File

@@ -57,6 +57,6 @@ html, body {
> svg { > svg {
width: 75%; width: 75%;
height: 75%; height: 75%;
@apply transition-transform drop-shadow-md hover:scale-[120%] text-zinc-200 hover:text-zinc-50 m-auto aspect-square; @apply transition-transform drop-shadow-md hover:scale-[120%] opacity-80 hover:opacity-100 text-white m-auto aspect-square;
} }
} }