58 lines
1.2 KiB
Text
58 lines
1.2 KiB
Text
---
|
|
export interface Props {
|
|
title: string;
|
|
to: string;
|
|
}
|
|
|
|
const { to, title } = Astro.props;
|
|
|
|
const isExternal = to.startsWith('http');
|
|
---
|
|
{ isExternal == true ? (
|
|
<a href={to} target="_blank" rel="noopener noreferrer" class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
|
|
<p>{title} →</p>
|
|
</a>
|
|
) : (
|
|
<a href={to} class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
|
|
<p>{title} →</p>
|
|
</a>
|
|
)
|
|
}
|
|
<style lang="scss">
|
|
@use '../assets/styles/colours';
|
|
.card {
|
|
margin: 1rem;
|
|
padding: 1.5rem;
|
|
text-align: left;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border: 2px solid #000;
|
|
border-radius: 20px;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
.card p {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.card:link,
|
|
.card:visited {
|
|
color: #000;
|
|
}
|
|
|
|
.card:hover,
|
|
.card:focus,
|
|
.card:active {
|
|
color: colours.$accent-colour-light !important;
|
|
border-color: colours.$accent-colour-light;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.card {
|
|
margin: 0.5rem;
|
|
padding: 1.25rem;
|
|
width: 9rem;
|
|
}
|
|
}
|
|
</style>
|