me
/
ethanreece.com
Archived
1
0
Fork 0
Code Pull Requests Actions Activity

formatting fix

main
Ethan Reece 2023-05-24 15:38:14 -05:00
parent 3b6dcd02c3
commit 9a80307168
Signed by: me
GPG Key ID: D3993665FF92E1C3
1 changed files with 73 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/pages/index.astro
View File

@ -1,83 +1,81 @@
--- ---
import Layout from '../layouts/Layout.astro' import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro' import Card from '../components/Card.astro';
--- ---
<Layout title="Welcome to Astro."> <Layout title="Welcome to Astro.">
<main> <main>
<h1>Welcome to <span class="text-gradient">Astro</span></h1> <h1>Welcome to <span class="text-gradient">Astro</span></h1>
<p class="instructions"> <p class="instructions">
To get started, open the directory <code>src/pages</code> in your project.<br 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.
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message </p>
above. <ul role="list" class="link-card-grid">
</p> <Card
<ul role="list" class="link-card-grid"> href="https://docs.astro.build/"
<Card title="Documentation"
href="https://docs.astro.build/" body="Learn how Astro works and explore the official API docs."
title="Documentation" />
body="Learn how Astro works and explore the official API docs." <Card
/> href="https://astro.build/integrations/"
<Card title="Integrations"
href="https://astro.build/integrations/" body="Supercharge your project with new frameworks and libraries."
title="Integrations" />
body="Supercharge your project with new frameworks and libraries." <Card
/> href="https://astro.build/themes/"
<Card title="Themes"
href="https://astro.build/themes/" body="Explore a galaxy of community-built starter themes."
title="Themes" />
body="Explore a galaxy of community-built starter themes." <Card
/> href="https://astro.build/chat/"
<Card title="Community"
href="https://astro.build/chat/" body="Come say hi to our amazing Discord community. ❤️"
title="Community" />
body="Come say hi to our amazing Discord community. ❤️" </ul>
/> </main>
</ul>
</main>
</Layout> </Layout>
<style> <style>
main { main {
margin: auto; margin: auto;
padding: 1.5rem; padding: 1.5rem;
max-width: 60ch; max-width: 60ch;
} }
h1 { h1 {
font-size: 3rem; font-size: 3rem;
font-weight: 800; font-weight: 800;
margin: 0; margin: 0;
} }
.text-gradient { .text-gradient {
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-size: 400%; background-size: 400%;
background-position: 0%; background-position: 0%;
} }
.instructions { .instructions {
line-height: 1.6; line-height: 1.6;
margin: 1rem 0; margin: 1rem 0;
border: 1px solid rgba(var(--accent), 25%); border: 1px solid rgba(var(--accent), 25%);
background-color: white; background-color: white;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
} }
.instructions code { .instructions code {
font-size: 0.875em; font-size: 0.875em;
font-weight: bold; font-weight: bold;
background: rgba(var(--accent), 12%); background: rgba(var(--accent), 12%);
color: rgb(var(--accent)); color: rgb(var(--accent));
border-radius: 4px; border-radius: 4px;
padding: 0.3em 0.45em; padding: 0.3em 0.45em;
} }
.instructions strong { .instructions strong {
color: rgb(var(--accent)); color: rgb(var(--accent));
} }
.link-card-grid { .link-card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 1rem; gap: 1rem;
padding: 0; padding: 0;
} }
</style> </style>