diff options
Diffstat (limited to 'examples/middleware/src/pages/index.astro')
| -rw-r--r-- | examples/middleware/src/pages/index.astro | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/examples/middleware/src/pages/index.astro b/examples/middleware/src/pages/index.astro new file mode 100644 index 000000000..ff77d4a15 --- /dev/null +++ b/examples/middleware/src/pages/index.astro @@ -0,0 +1,63 @@ +--- +import Layout from '../layouts/Layout.astro'; +import Card from '../components/Card.astro'; +--- + +<Layout title="Welcome to Astro."> + <main> + <h1>Welcome to <span class="text-gradient">Astro</span></h1> + <p class="instructions"> + To get started, open the directory <code>src/pages</code> in your project.<br /> + <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above. + </p> + {} + <ul role="list" class="link-card-grid"> + <Card href="/login" title="Login" body="Try the login" /> + </ul> + </main> +</Layout> + +<style> + main { + margin: auto; + padding: 1.5rem; + max-width: 60ch; + } + h1 { + font-size: 3rem; + font-weight: 800; + margin: 0; + } + .text-gradient { + background-image: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; + } + .instructions { + line-height: 1.6; + margin: 1rem 0; + border: 1px solid rgba(var(--accent), 25%); + background-color: white; + padding: 1rem; + border-radius: 0.4rem; + } + .instructions code { + font-size: 0.875em; + font-weight: bold; + background: rgba(var(--accent), 12%); + color: rgb(var(--accent)); + border-radius: 4px; + padding: 0.3em 0.45em; + } + .instructions strong { + color: rgb(var(--accent)); + } + .link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 1rem; + padding: 0; + } +</style> |