56 lines
1 KiB
Text
56 lines
1 KiB
Text
|
---
|
||
|
|
export interface Props {
|
||
|
|
title: string;
|
||
|
|
link: string;
|
||
|
|
image: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { image, link, title } = Astro.props;
|
||
|
|
|
||
|
|
const icon: string = `background: url('ta_icons/${image}.png')`
|
||
|
|
---
|
||
|
|
<a href={link} target="_blank" rel="noopener noreferrer">
|
||
|
|
<article>
|
||
|
|
<div style={icon}>
|
||
|
|
<h2>{title}</h2>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
article {
|
||
|
|
background-color: rgb(27, 27, 27);
|
||
|
|
border-color: #1e1e1e;
|
||
|
|
padding: 10px;
|
||
|
|
text-align: center;
|
||
|
|
transition: transform var(--speed) var(--ease);
|
||
|
|
height: auto;
|
||
|
|
width: auto;
|
||
|
|
line-height: 128px;
|
||
|
|
}
|
||
|
|
article:hover {
|
||
|
|
transform: scale(var(--hover-scale));
|
||
|
|
}
|
||
|
|
article > div {
|
||
|
|
width: 128px;
|
||
|
|
height: 128px;
|
||
|
|
object-fit: cover;
|
||
|
|
object-position: 0% 0%;
|
||
|
|
}
|
||
|
|
|
||
|
|
article:hover h2 {
|
||
|
|
color: white;
|
||
|
|
background-color: #1e1e1e;
|
||
|
|
font-size: 18px;
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: bottom;
|
||
|
|
line-height: normal;
|
||
|
|
width: 90%;
|
||
|
|
border-radius: 5px;
|
||
|
|
opacity: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
article h2 {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|