Astro project

astro/strong-singularity/src/pages/index.astro

@@ -0,0 +1,62 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+---
+
+  <Layout title="Welcome to Astro.">
+    <main>
+        <div class="App">
+              <h1 id="garlic">Garlic</h1>
+              <p>Garlic is a simple, fast and secure way to protect your website from being scraped by bots.</p>
+                <p>You write your code and text as you would any other day, just let garlic protect your content from scraping.</p>
+
+  <a href="/more/about">About</a>
+
+          </div>
+    </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>

astro/strong-singularity/src/pages/more/about.mdx

@@ -0,0 +1,9 @@
+---
+layout: ../../layouts/Layout.astro
+title: About me
+---
+
+
+I live on **Mars** but feel free to
+
+Here is my counter component, working in MDX: