diff options
Diffstat (limited to 'examples/basics')
| -rw-r--r-- | examples/basics/src/components/Card.astro | 42 | ||||
| -rw-r--r-- | examples/basics/src/layouts/Layout.astro | 69 | ||||
| -rw-r--r-- | examples/basics/src/pages/index.astro | 48 |
3 files changed, 90 insertions, 69 deletions
diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro index 53b67a9da..4039d4f4f 100644 --- a/examples/basics/src/components/Card.astro +++ b/examples/basics/src/components/Card.astro @@ -1,26 +1,26 @@ --- export interface Props { - title: string, - body: string, - href: string, + title: string; + body: string; + href: string; } -const {href, title, body} = Astro.props; +const { href, title, body } = Astro.props; --- + <li class="link-card"> - <a href={href}> - <h2> - {title} - <span>→</span> - </h2> - <p> - {body} - </p> - </a> + <a href={href}> + <h2> + {title} + <span>→</span> + </h2> + <p> + {body} + </p> + </a> </li> <style> - :root { - --link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%); + --link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%); } .link-card { @@ -49,11 +49,11 @@ const {href, title, body} = Astro.props; margin: 0; transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); } - - p { - margin-top: 0.75rem; - margin-bottom: 0; - } + + p { + margin-top: 0.75rem; + margin-bottom: 0; + } h2 span { display: inline-block; @@ -65,7 +65,7 @@ const {href, title, body} = Astro.props; } .link-card:is(:hover, :focus-within) h2 { - color: #4F39FA; + color: #4f39fa; } .link-card:is(:hover, :focus-within) h2 span { diff --git a/examples/basics/src/layouts/Layout.astro b/examples/basics/src/layouts/Layout.astro index fe43c7e27..9a46f2d8e 100644 --- a/examples/basics/src/layouts/Layout.astro +++ b/examples/basics/src/layouts/Layout.astro @@ -8,49 +8,48 @@ const { title } = Astro.props as Props; <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width"> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>{title}</title> -</head> -<body> - <slot /> -</body> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <title>{title}</title> + </head> + <body> + <slot /> + </body> </html> - <style> - :root { - --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); - --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); - --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); + :root { + --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); + --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); + --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); - --color-text: hsl(12, 5%, 4%); - --color-bg: hsl(10, 21%, 95%); + --color-text: hsl(12, 5%, 4%); + --color-bg: hsl(10, 21%, 95%); --color-border: hsl(17, 24%, 90%); - } + } - html { - font-family: system-ui, sans-serif; - font-size: var(--font-size-base); - color: var(--color-text); - background-color: var(--color-bg); - } + html { + font-family: system-ui, sans-serif; + font-size: var(--font-size-base); + color: var(--color-text); + background-color: var(--color-bg); + } - body { - margin: 0; - } + body { + margin: 0; + } - :global(h1) { - font-size: var(--font-size-xl); - } + :global(h1) { + font-size: var(--font-size-xl); + } - :global(h2) { - font-size: var(--font-size-lg); - } + :global(h2) { + font-size: var(--font-size-lg); + } - :global(code) { - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + :global(code) { + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; - } + } </style> diff --git a/examples/basics/src/pages/index.astro b/examples/basics/src/pages/index.astro index ea7401f11..cf05f0bb6 100644 --- a/examples/basics/src/pages/index.astro +++ b/examples/basics/src/pages/index.astro @@ -1,26 +1,43 @@ --- -import Layout from '../layouts/Layout.astro'; -import Card from '../components/Card.astro'; +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"> - Check out the <code>src/pages</code> directory to get started.<br/> + Check out the <code>src/pages</code> directory to get started.<br /> <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above. </p> <ul role="list" class="link-card-grid"> - <Card href="https://docs.astro.build/" title="Documentation" body="Learn how Astro works and explore the official API docs." /> - <Card href="https://astro.build/integrations/" title="Integrations" body="Supercharge your project with new frameworks and libraries." /> - <Card href="https://astro.build/themes/" title="Themes" body="Explore a galaxy of community-built starter themes." /> - <Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" /> + <Card + href="https://docs.astro.build/" + title="Documentation" + body="Learn how Astro works and explore the official API docs." + /> + <Card + href="https://astro.build/integrations/" + title="Integrations" + body="Supercharge your project with new frameworks and libraries." + /> + <Card + href="https://astro.build/themes/" + title="Themes" + body="Explore a galaxy of community-built starter themes." + /> + <Card + href="https://astro.build/chat/" + title="Chat" + body="Come say hi to our amazing Discord community. ❤️" + /> </ul> </main> </Layout> <style> :root { - --astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4); + --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4); } h1 { @@ -29,7 +46,7 @@ import Card from '../components/Card.astro'; main { margin: auto; - padding: 1em; + padding: 1em; max-width: 60ch; } @@ -45,15 +62,20 @@ import Card from '../components/Card.astro'; } @keyframes pulse { - 0%, 100% { background-position-y: 0%; } - 50% { background-position-y: 80%; } + 0%, + 100% { + background-position-y: 0%; + } + 50% { + background-position-y: 80%; + } } .instructions { line-height: 1.6; margin: 1rem 0; - background: #4F39FA; - padding: 1.0rem; + background: #4f39fa; + padding: 1rem; border-radius: 0.4rem; color: var(--color-bg); } |