diff options
| author | kartofen <mladenovnasko0@gmail.com> | 2022-10-26 18:03:58 +0300 | 
|---|---|---|
| committer | kartofen <mladenovnasko0@gmail.com> | 2022-10-26 18:03:58 +0300 | 
| commit | 9ad43ed4d41906af8ae33160b30d6cd6a6ae9bc0 (patch) | |
| tree | 65c17129709d70b34fc1f7ac5b48d9d479468ee8 /src/components | |
| parent | 921421f2e2f44178333f8ef3011c43bc4eb6e39e (diff) | |
prod version
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Card.astro | 76 | 
1 files changed, 0 insertions, 76 deletions
| diff --git a/src/components/Card.astro b/src/components/Card.astro deleted file mode 100644 index aea28c8..0000000 --- a/src/components/Card.astro +++ /dev/null @@ -1,76 +0,0 @@ ---- -export interface Props { -	title: string; -	body: string; -	href: string; -} - -const { href, title, body } = Astro.props as Props; ---- - -<li class="link-card"> -	<a href={href}> -		<h2> -			{title} -			<span>→</span> -		</h2> -		<p> -			{body} -		</p> -	</a> -</li> -<style> -	:root { -		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%); -	} - -	.link-card { -		list-style: none; -		display: flex; -		padding: 0.15rem; -		background-image: var(--link-gradient); -		background-size: 400%; -		border-radius: 0.5rem; -		background-position: 100%; -		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); -	} - -	.link-card > a { -		width: 100%; -		text-decoration: none; -		line-height: 1.4; -		padding: 1em 1.3em; -		border-radius: 0.35rem; -		color: var(--text-color); -		background-color: white; -		opacity: 0.8; -	} - -	h2 { -		margin: 0; -		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); -	} - -	p { -		margin-top: 0.75rem; -		margin-bottom: 0; -	} - -	h2 span { -		display: inline-block; -		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); -	} - -	.link-card:is(:hover, :focus-within) { -		background-position: 0; -	} - -	.link-card:is(:hover, :focus-within) h2 { -		color: #4f39fa; -	} - -	.link-card:is(:hover, :focus-within) h2 span { -		will-change: transform; -		transform: translateX(2px); -	} -</style> | 
