Archived
1
0
Fork 0
This repository has been archived on 2024-04-05. You can view files and clone it, but cannot push or open issues or pull requests.
ethanreece.com/src/components/content/index/Subsection.astro
2023-06-02 16:17:51 -05:00

40 lines
1 KiB
Text

---
export interface Props {
title: string
subtitle: string
url: string | null
}
const { title, subtitle, url } = Astro.props
const fontSize = 'text-[.9rem]'
const fontSizeH3 = 'text-[1.4rem]'
const fontSpacing = 'leading-[1.5rem]'
const margin = 'm-[-1rem] p-[1rem]'
const background = 'bg-[#00000020]'
---
<a
href={url}
target="_blank"
rel="noopener noreferrer"
class={`block rounded ${
url &&
`hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
} ${fontSize} ${margin} ${background}`}
>
<div class={`mx-auto max-w-page-w space-y-paragraph`}>
<span class={`flex flex-col`}>
<h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
{
subtitle && (
<span class={`font-thin italic ${fontSpacing}`}>
{subtitle}
</span>
)
}
</span>
<slot />
</div>
</a>