diff options
| author |  Chris Swithinbank <swithinbank@gmail.com>
| 2023-01-13 08:59:00 +0100 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-01-13 08:59:00 +0100 |
| commit | ca22a81799319906d0b576af645ad75247f18754 (patch) | |
| tree | c27b883704d2695903ca5e6f047b4ade2e04408c /examples/portfolio/src/components/CallToAction.astro | |
| parent | bbb14d73266b5b36f5ac2eb7a9ee845e8eef8a11 (diff) | |
| download | astro-ca22a81799319906d0b576af645ad75247f18754.tar.gz astro-ca22a81799319906d0b576af645ad75247f18754.tar.zst astro-ca22a81799319906d0b576af645ad75247f18754.zip | |
Implement redesign of portfolio example (#5765)
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Diffstat (limited to 'examples/portfolio/src/components/CallToAction.astro')
| -rw-r--r-- | examples/portfolio/src/components/CallToAction.astro | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/examples/portfolio/src/components/CallToAction.astro b/examples/portfolio/src/components/CallToAction.astro new file mode 100644 index 000000000..a1ca69750 --- /dev/null +++ b/examples/portfolio/src/components/CallToAction.astro @@ -0,0 +1,56 @@ +--- +interface Props { + href: string; +} + +const { href } = Astro.props; +--- + +<a href={href}><slot /></a> + +<style> + a { + position: relative; + display: flex; + place-content: center; + text-align: center; + padding: 0.56em 2em; + gap: 0.8em; + color: var(--accent-text-over); + text-decoration: none; + line-height: 1.1; + border-radius: 999rem; + overflow: hidden; + background: var(--gradient-accent-orange); + box-shadow: var(--shadow-md); + white-space: nowrap; + } + + @media (min-width: 20em) { + a { + font-size: var(--text-lg); + } + } + + /* Overlay for hover effects. */ + a::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + transition: background-color var(--theme-transition); + mix-blend-mode: overlay; + } + + a:focus::after, + a:hover::after { + background-color: hsla(var(--gray-999-basis), 0.3); + } + + @media (min-width: 50em) { + a { + padding: 1.125rem 2.5rem; + font-size: var(--text-xl); + } + } +</style> |