diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-07-11 15:42:10 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-11 15:42:10 -0400 |
| commit | faf3f3a8d111b543c0aca12432fe1a2ee5e2d726 (patch) | |
| tree | a754bd03b9db417a5dfeb1a4a50236b858884ec1 /examples/with-nanostores/src/components/FigurineDescription.astro | |
| parent | bf5d1cc1e71da38a14658c615e9481f2145cc6e7 (diff) | |
| download | astro-faf3f3a8d111b543c0aca12432fe1a2ee5e2d726.tar.gz astro-faf3f3a8d111b543c0aca12432fe1a2ee5e2d726.tar.zst astro-faf3f3a8d111b543c0aca12432fe1a2ee5e2d726.zip | |
Update `with-nanostores` example to match docs walkthrough (#3840)
* feat: replace with-nanostores with new example
* docs: update README with docs call-out
* chore: small formatting inconsistencies
* nit: standardize to spaces :'(
* nit: standardize to tabs!
* refactor: use html "hidden" property
* nit: beta.66 for sanity
Diffstat (limited to 'examples/with-nanostores/src/components/FigurineDescription.astro')
| -rw-r--r-- | examples/with-nanostores/src/components/FigurineDescription.astro | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/examples/with-nanostores/src/components/FigurineDescription.astro b/examples/with-nanostores/src/components/FigurineDescription.astro new file mode 100644 index 000000000..8d801d53a --- /dev/null +++ b/examples/with-nanostores/src/components/FigurineDescription.astro @@ -0,0 +1,36 @@ +<h1>Astronaut Figurine</h1> +<p class="limited-edition-badge">Limited Edition</p> +<p>The limited edition Astronaut Figurine is the perfect gift for any Astro contributor. This fully-poseable action figurine comes equipped with:</p> +<ul> + <li>A fabric space suit with adjustible straps</li> + <li>Boots lightly dusted by the lunar surface *</li> + <li>An adjustable space visor</li> +</ul> +<p> + <sub>* Dust not actually from the lunar surface</sub> +</p> + +<style> + h1 { + margin: 0; + margin-block-start: 2rem; + } + + .limited-edition-badge { + font-weight: 700; + text-transform: uppercase; + background-image: linear-gradient(0deg,var(--astro-blue), var(--astro-pink)); + background-size: 100% 200%; + background-position-y: 100%; + border-radius: 0.4rem; + animation: pulse 4s ease-in-out infinite; + display: inline-block; + color: white; + padding: 0.2rem 0.4rem; + } + + @keyframes pulse { + 0%, 100% { background-position-y: 0%; } + 50% { background-position-y: 80%; } + } +</style> |